How to Integrate Lovable with Codecademy

Since Codecademy has no public API to query for course data, you build your own data layer in Supabase. This gives you complete control over which courses you feature and how you track progress. Paste this prompt into Lovable's chat to create the database schema: 'Create these Supabase tables for Codecademy integration: (1) codecademy_courses: id (uuid), title (text), url (text), subject (text), difficulty (text, Beginner/Intermediate/Advanced), estimated_hours (integer), description (text), is_active (boolean default true), created_at (timestamptz). (2) course_assignments: id (uuid), user_id (uuid references auth.users), course_id (uuid references codecademy_courses), assigned_by (uuid references auth.users), due_date (date), created_at (timestamptz). (3) course_completions: id (uuid), user_id (uuid references auth.users), course_id (uuid references codecademy_courses), completed_at (timestamptz), source (text, manual or webhook), notes (text). Add RLS policies: all authenticated users can read active courses; users can read their own assignments and completions; users can insert their own completions; admin role can insert/update/delete courses and assignments.' The source column in course_completions distinguishes between self-reported completions (manual) and automatic completions received via Codecademy for Business webhooks (webhook). This lets you report on data quality and trust levels in your analytics. Populate the codecademy_courses table manually with courses relevant to your use case. Copy the course title, URL, and metadata from Codecademy's website. For a developer onboarding scenario, typical courses include: Learn Python 3, Introduction to JavaScript, Learn SQL, Learn Git, Introduction to HTML, and the Full-Stack Engineer career path.

If you have a Codecademy for Business account, you can receive webhook events when employees complete courses. This enables automatic completion tracking without relying on self-reporting. Paste this prompt into Lovable's chat: 'Create a Supabase Edge Function at supabase/functions/codecademy-webhook/index.ts. It should accept POST requests from Codecademy for Business webhooks. Parse the JSON body which contains event data about course completions. Validate an optional CODECADEMY_WEBHOOK_SECRET from headers against the stored secret in Deno.env for security. When receiving a course_completion event, look up the course in the codecademy_courses table by matching the course URL or external ID, then find the user by email in auth.users, and insert a record into course_completions with source: webhook. Return 200 for successfully processed events.' After generating the Edge Function, add a secret to Cloud → Secrets: CODECADEMY_WEBHOOK_SECRET — set any random string (you will also configure this in Codecademy's webhook settings). Deploy your app and get the Edge Function URL: https://[project-ref].supabase.co/functions/v1/codecademy-webhook. In your Codecademy for Business admin console, go to Integrations or Webhooks settings and add this URL as a webhook endpoint for course completion events. Note: The exact webhook payload format for Codecademy for Business may vary — consult your Codecademy account manager for the specific event schema. Common fields include: user_email, course_name, course_url, completed_at, and completion_percentage.

1// supabase/functions/codecademy-webhook/index.ts
2import { createClient } from 'https://esm.sh/@supabase/supabase-js@2';
3
4const corsHeaders = {
5  'Access-Control-Allow-Origin': '*',
6  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
7};
8
9Deno.serve(async (req) => {
10  if (req.method === 'OPTIONS') {
11    return new Response('ok', { headers: corsHeaders });
12  }
13
14  try {
15    const webhookSecret = Deno.env.get('CODECADEMY_WEBHOOK_SECRET');
16    const tokenHeader = req.headers.get('x-webhook-token') ||
17      new URL(req.url).searchParams.get('token');
18
19    if (webhookSecret && tokenHeader !== webhookSecret) {
20      return new Response(
21        JSON.stringify({ error: 'Unauthorized' }),
22        { status: 401, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
23      );
24    }
25
26    const body = await req.json();
27    const { event, data } = body;
28
29    if (event !== 'course_completion') {
30      return new Response(
31        JSON.stringify({ received: true, processed: false }),
32        { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
33      );
34    }
35
36    const supabase = createClient(
37      Deno.env.get('SUPABASE_URL')!,
38      Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')!
39    );
40
41    // Look up user by email
42    const { data: userData } = await supabase.auth.admin.listUsers();
43    const user = userData?.users?.find(u => u.email === data.user_email);
44
45    if (!user) {
46      console.log(`User not found for email: ${data.user_email}`);
47      return new Response(JSON.stringify({ received: true }), {
48        headers: { ...corsHeaders, 'Content-Type': 'application/json' }
49      });
50    }
51
52    // Look up course by URL
53    const { data: course } = await supabase
54      .from('codecademy_courses')
55      .select('id')
56      .eq('url', data.course_url)
57      .single();
58
59    if (course) {
60      await supabase.from('course_completions').upsert({
61        user_id: user.id,
62        course_id: course.id,
63        completed_at: data.completed_at || new Date().toISOString(),
64        source: 'webhook',
65      }, { onConflict: 'user_id,course_id' });
66    }
67
68    return new Response(JSON.stringify({ received: true }), {
69      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
70    });
71  } catch (error) {
72    return new Response(
73      JSON.stringify({ error: error.message }),
74      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
75    );
76  }
77});

Build the main React components for your coding education portal — displaying assigned courses, progress tracking, and completion statistics. Paste this prompt into Lovable's chat: 'Create a CodingLearningDashboard React component. Query the Supabase codecademy_courses table for active courses, the course_assignments table filtered by the current user_id, and the course_completions table filtered by the current user_id. Display: (1) My Assigned Courses section: show assigned courses with due dates, estimated hours, a link to the course on Codecademy, and a Mark Complete button. (2) Completed Courses section: courses where a completion record exists, showing completion date and source (self-reported vs webhook). (3) Browse All Courses section: all active courses grouped by subject, each linking to Codecademy. Show overall progress: X of Y assigned courses completed, as a percentage progress bar.' The Mark Complete button should insert a record into course_completions with source='manual' and completed_at=now(). Use an optimistic UI update — mark the course as complete immediately in the local state before the Supabase insert confirms, for a snappier UX. For the course link, always open Codecademy in a new tab with target='_blank' rel='noopener noreferrer'. Add a visual indicator that the link goes to an external site. For admin users, add a Course Assignment panel where admins can select users and assign courses to them with a due date. This writes to the course_assignments table using the current user's ID as assigned_by.

Complete the integration with admin features: team-level progress tracking, assignment management, and completion rate reporting. Paste this prompt into Lovable's chat: 'Create an admin page for the coding learning platform. (1) Team Progress table: join course_completions, course_assignments, and auth.users to show each user's name, assigned course count, completed count, and completion percentage. Sort by completion percentage ascending to show who needs the most attention first. Highlight anyone below 50% with a yellow badge. (2) Course Completion report: show each course from codecademy_courses with the count of completions, count of assignments, and completion rate as a percentage bar. (3) Assign Courses modal: select one or more users and a course, set a due date, and insert into course_assignments. Admin page should only be accessible to users with admin role in Supabase.' For the team progress table, combine RPC or a Supabase database function to handle the aggregation query efficiently, rather than loading all data to the client and aggregating in JavaScript. A Supabase RPC function (created via the SQL editor) that returns one row per user with their stats is much more efficient for large teams. For complex organizational hierarchies — multiple departments, managers, and nested team structures with Codecademy data — RapidDev's team can help design the data model and reporting queries for your specific organization.