Codecademy

Since Codecademy will not provide data, your first job is to design the data model that your app will actually own and query. Open FlutterFlow and navigate to the Firestore panel (or Supabase Tables, depending on your backend). For Firebase: create a `courses` collection with documents containing fields like `title` (String), `description` (String), `codecademy_url` (String, the full Codecademy course URL), `category` (String, e.g. 'Python', 'Web Dev'), `difficulty` (String), and `estimated_hours` (Number). Create a `user_progress` collection with documents keyed by user UID, containing a map of `course_id → {completed_lessons: Number, total_lessons: Number, last_accessed: Timestamp, is_complete: Boolean}`. For Supabase: create a `courses` table with equivalent columns, and a `user_progress` table with `user_id` (linked to your auth table), `course_id`, `completed_lessons`, `total_lessons`, `last_accessed`, and `is_complete` fields. Enable Row Level Security so users can only read and write their own progress rows. This schema is the entire data foundation of your app. You will populate the `courses` collection manually by browsing Codecademy and copying the relevant course URLs and metadata. Your app's 'live data' comes from this schema, not from Codecademy. Set up the collection in FlutterFlow's UI now so you have it ready to bind widgets to in the next steps.

1// Sample Supabase schema (SQL)
2CREATE TABLE courses (
3  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
4  title TEXT NOT NULL,
5  description TEXT,
6  codecademy_url TEXT NOT NULL,
7  category TEXT,
8  difficulty TEXT,
9  estimated_hours INT
10);
11
12CREATE TABLE user_progress (
13  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
14  user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
15  course_id UUID REFERENCES courses(id) ON DELETE CASCADE,
16  completed_lessons INT DEFAULT 0,
17  total_lessons INT DEFAULT 0,
18  is_complete BOOLEAN DEFAULT FALSE,
19  last_accessed TIMESTAMPTZ DEFAULT NOW(),
20  UNIQUE(user_id, course_id)
21);
22
23-- Enable RLS
24ALTER TABLE user_progress ENABLE ROW LEVEL SECURITY;
25CREATE POLICY "Users manage own progress" ON user_progress
26  FOR ALL USING (auth.uid() = user_id);

In FlutterFlow, click Custom Code in the left navigation panel. Click + Add and select Widget. Name the widget `CodecademyWebView`. In the Dependencies field, type `webview_flutter` and add the latest compatible version (check pub.dev/packages/webview_flutter for the current version — as of early 2026, version 4.x is current). Paste the Dart code for the widget (see the code block below). The widget takes a single `url` parameter (String) which is the Codecademy course URL to load. Set the widget's default width to `double.infinity` (fill width) and height to the screen height minus your app bar height — typically `MediaQuery.of(context).size.height - 80`. After saving, add the `CodecademyWebView` widget to your Course Detail screen by dragging it from the Custom Widgets section in FlutterFlow's widget panel. Bind the `url` parameter to the `codecademy_url` field from your Firestore/Supabase course record. Important: the WebView widget requires testing on a physical device or a compiled APK — it does not render in FlutterFlow's web preview. On iOS, you may need to enable App Transport Security settings if the WebView fails to load content; go to FlutterFlow's Settings & Integrations → App Details → iOS Bundle and add any necessary ATS exception keys. Android typically loads WebViews without additional configuration. Alternatively, if you prefer not to add a custom widget, use FlutterFlow's built-in 'Launch URL' action (from the Action Flow Editor) which opens the Codecademy URL in the device's default system browser. This is simpler but takes the learner out of your app entirely.

1import 'package:flutter/material.dart';
2import 'package:webview_flutter/webview_flutter.dart';
3
4class CodecademyWebView extends StatefulWidget {
5  const CodecademyWebView({
6    super.key,
7    required this.url,
8    this.width,
9    this.height,
10  });
11
12  final String url;
13  final double? width;
14  final double? height;
15
16  @override
17  State<CodecademyWebView> createState() => _CodecademyWebViewState();
18}
19
20class _CodecademyWebViewState extends State<CodecademyWebView> {
21  late final WebViewController _controller;
22
23  @override
24  void initState() {
25    super.initState();
26    _controller = WebViewController()
27      ..setJavaScriptMode(JavaScriptMode.unrestricted)
28      ..loadRequest(Uri.parse(widget.url));
29  }
30
31  @override
32  Widget build(BuildContext context) {
33    return SizedBox(
34      width: widget.width ?? double.infinity,
35      height: widget.height ?? MediaQuery.of(context).size.height - 80,
36      child: WebViewWidget(controller: _controller),
37    );
38  }
39}

Create a Course Catalog screen in FlutterFlow with a ListView bound to your `courses` Firestore collection or Supabase table. Set the backend query on the ListView to fetch all courses (add filters for `category` if you want to show filtered tabs). Bind each list tile's Text widget to the course `title`, the Subtitle to `description`, and optionally an Image to a cover image URL if you add that field to your schema. Add a 'Category' filter Row above the ListView with a horizontal scrollable list of category chips (Python, Web Dev, Data Science, etc.). Each chip triggers a query filter on the ListView. This gives your app a discovery experience similar to Codecademy's learning path browser, even though the data is entirely yours. Create a Course Detail screen that appears when a user taps a course tile. On this screen, show the course title, description, difficulty, estimated hours, and a 'Start Course' button. Below the button, place a progress indicator showing how many lessons the user has completed (fetched from `user_progress` filtered by the current user's UID and this course's ID). Add a 'Mark lesson complete' button that fires an Action Flow: increment `completed_lessons` by 1 in the user_progress document and update `last_accessed` to now. If `completed_lessons >= total_lessons`, also set `is_complete = true`. When the user taps 'Start Course', open the Codecademy URL — either via the CodecademyWebView widget in a bottom sheet or via a Launch URL action. The learning happens on Codecademy; your app handles all the organization and progress tracking.

Create a Progress Dashboard screen that summarizes the learner's activity. This screen should show: total courses enrolled, total courses completed, current streak (days in a row with at least one lesson marked complete), and a recent activity list showing which lessons were completed when. For the streak calculation, store a `last_activity_date` field in the user's Firebase/Supabase profile document and a running `current_streak` counter. When the user marks a lesson complete, your Action Flow should check whether `last_activity_date` was yesterday — if yes, increment `current_streak` by 1 and update `last_activity_date` to today. If `last_activity_date` is today (they already logged activity), do nothing to the streak. If `last_activity_date` is more than one day ago, reset `current_streak` to 1. For a visual progress chart, add a LinearProgressIndicator or a Circular chart (FlutterFlow's native chart widget) showing overall completion percentage across all enrolled courses. Calculate this as `sum(completed_lessons) / sum(total_lessons)` across all rows in `user_progress` for the current user — you can do this with a Firestore aggregate query or a Supabase RPC function. This dashboard is the core value-add of your companion app over just bookmarking Codecademy in a browser. Learners come to your app for the progress view and organizational features; they go to Codecademy for the actual exercises.

If your organization uses Codecademy for Business, the admin panel allows you to export a CSV of team progress data (which employees are enrolled in which courses, and their completion percentages). This is the only way to get real Codecademy progress data — there is no live API. You can build a periodic ingestion pipeline to load this CSV into your database. Deploy a Firebase Cloud Function (or Supabase Edge Function) that accepts a POST request with the CSV file content. The function parses each row, finds or creates the matching employee record in your database by email, and updates their course completion data. You can trigger this function manually (the admin uploads the CSV via a simple web form or directly to Cloud Storage), or set up a Cloud Scheduler trigger to run it on a schedule if you automate the export via the Codecademy admin panel. The CSV export typically contains columns like employee email, course name, enrollment date, completion percentage, and last activity date. Map these to your `user_progress` schema. Note that the Codecademy course names in the CSV may not match the URLs you stored manually in your `courses` table — you may need to build a name-to-URL mapping table to join them correctly. With this ingestion in place, your FlutterFlow manager dashboard can show real Codecademy completion data for the team, refreshed as often as the admin re-exports and re-uploads. This is the most data you can realistically extract from Codecademy without a live API, and it is entirely sufficient for a manager-facing L&D dashboard.

1// Firebase Cloud Function — Codecademy CSV ingestion
2// index.js (Node.js 18+)
3const functions = require('firebase-functions');
4const admin = require('firebase-admin');
5const { parse } = require('csv-parse/sync');
6
7admin.initializeApp();
8const db = admin.firestore();
9
10exports.ingestCodecademyCSV = functions.https.onRequest(async (req, res) => {
11  if (req.method !== 'POST') return res.status(405).send('Method Not Allowed');
12
13  try {
14    const csvContent = req.body.csv;
15    const records = parse(csvContent, {
16      columns: true,
17      skip_empty_lines: true,
18    });
19
20    const batch = db.batch();
21    for (const row of records) {
22      // row fields depend on your Codecademy for Business export format
23      // Typical: row['Email'], row['Course Name'], row['Completion %']
24      const progressRef = db
25        .collection('team_progress')
26        .doc(`${row['Email']}_${row['Course Name'].replace(/\s+/g, '_')}`);
27      batch.set(progressRef, {
28        email: row['Email'],
29        course_name: row['Course Name'],
30        completion_pct: parseFloat(row['Completion %']) || 0,
31        last_activity: row['Last Activity'] || null,
32        imported_at: admin.firestore.FieldValue.serverTimestamp(),
33      }, { merge: true });
34    }
35    await batch.commit();
36    res.json({ imported: records.length });
37  } catch (err) {
38    console.error('CSV ingestion failed:', err.message);
39    res.status(500).json({ error: 'CSV ingestion failed' });
40  }
41});