How to Integrate Lovable with FutureLearn

FutureLearn provides different levels of API access depending on your relationship with the platform. Understanding which level applies to your use case determines what credentials you need. Public catalog access (no credentials required): FutureLearn provides public endpoints for browsing their course catalog. The URL pattern is https://www.futurelearn.com/api/courses or similar — check FutureLearn's developer documentation for current public endpoint availability. This covers basic course discovery: titles, organizations, descriptions, subject areas, and enrollment counts. Many course discovery use cases can be built on this alone. Partner API access (requires partnership): Organizations that have a formal FutureLearn partnership (universities, companies, or technology partners) can request API credentials from FutureLearn's partner team. Partner API credentials provide access to: learner enrollment data, step-by-step completion tracking, quiz results, and organization-specific reporting. To apply for a partnership, contact FutureLearn through their website at futurelearn.com/partners. Affiliate access: FutureLearn has an affiliate program (managed through third-party platforms) that provides tracking links for course referrals. This is simpler than the Partner API but only covers basic course linking without data access. For this tutorial, we will cover both the public catalog approach (available immediately) and the Partner API approach (requires formal agreement). If you are building a course discovery portal, start with public catalog access — it covers the majority of use cases without any partnership requirements. If you have partner credentials, they typically consist of an API key or OAuth2 client credentials provided by FutureLearn's partner team. Note these credentials along with the Partner API base URL provided by FutureLearn.

Store any FutureLearn partner credentials in Cloud → Secrets, then create the Edge Function that handles both public (no-auth) and partner (authenticated) API calls. If you have partner credentials, click the '+' icon in Lovable to open the Cloud panel. Click Secrets tab. Add: - FUTURELEARN_API_KEY — your partner API key or OAuth2 client ID - FUTURELEARN_API_SECRET — your partner API secret (if OAuth2 client credentials are used) If using public endpoints only, you do not need any secrets. Paste this prompt into Lovable's chat to generate the Edge Function: 'Create a Supabase Edge Function at supabase/functions/futurelearn-api/index.ts. Accept POST requests with body { endpoint: string, method: string, params?: object, usePartnerAuth: boolean }. For public calls (usePartnerAuth: false), call https://www.futurelearn.com/api/{endpoint} without credentials. For partner calls (usePartnerAuth: true), add Authorization: Bearer {FUTURELEARN_API_KEY} header (or the correct auth format for the partner API). Add query params for GET requests. Return JSON response with CORS headers. If FUTURELEARN_API_KEY is not set and partner auth is requested, return an error indicating credentials are not configured.' FutureLearn's public API base URL may be https://www.futurelearn.com/api or https://api.futurelearn.com — check current documentation. The exact auth header format for the Partner API depends on how FutureLearn issues partner credentials. Common formats are Bearer token or Basic auth with client ID and secret.

1// supabase/functions/futurelearn-api/index.ts
2const corsHeaders = {
3  'Access-Control-Allow-Origin': '*',
4  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
5};
6
7Deno.serve(async (req) => {
8  if (req.method === 'OPTIONS') {
9    return new Response('ok', { headers: corsHeaders });
10  }
11
12  try {
13    const apiKey = Deno.env.get('FUTURELEARN_API_KEY');
14
15    const { endpoint, method = 'GET', params, usePartnerAuth = false } = await req.json();
16
17    if (!endpoint) {
18      return new Response(
19        JSON.stringify({ error: 'endpoint is required' }),
20        { status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
21      );
22    }
23
24    if (usePartnerAuth && !apiKey) {
25      return new Response(
26        JSON.stringify({ error: 'Partner API credentials not configured. Add FUTURELEARN_API_KEY to Cloud Secrets.' }),
27        { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
28      );
29    }
30
31    let url = `https://www.futurelearn.com/api/${endpoint}`;
32    if (params) {
33      const queryString = new URLSearchParams(
34        Object.entries(params).map(([k, v]) => [k, String(v)])
35      ).toString();
36      if (queryString) url += `?${queryString}`;
37    }
38
39    const headers: Record<string, string> = {
40      'Accept': 'application/json',
41      'Content-Type': 'application/json',
42    };
43
44    if (usePartnerAuth && apiKey) {
45      headers['Authorization'] = `Bearer ${apiKey}`;
46    }
47
48    const response = await fetch(url, { method, headers });
49    const data = await response.json();
50
51    return new Response(JSON.stringify(data), {
52      status: response.status,
53      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
54    });
55  } catch (error) {
56    return new Response(
57      JSON.stringify({ error: error.message }),
58      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
59    );
60  }
61});

With the Edge Function in place, build the React components that display FutureLearn course data. Start by fetching the public course catalog and displaying it in a format suited to your target audience. FutureLearn course objects typically include: title, headline (short description), run_count, default_duration (in weeks), effort (hours per week), language, subjects (array), organization names, and upcoming_run dates. Paste this prompt into Lovable's chat: 'Create a FutureLearnCourseBrowser React component. Call the futurelearn-api Edge Function with endpoint courses (or the current FutureLearn catalog endpoint), usePartnerAuth: false. Display courses in a responsive grid of cards. Each card shows: course title, organization name and logo URL if available, subject badges, duration in weeks and effort in hours, language, next start date, and a Learn More button linking to https://www.futurelearn.com/courses/{course-slug} in a new tab. Add filter controls for subject area and language. Implement client-side filtering on the loaded catalog to avoid repeated API calls when filters change.' For the subject area filter, FutureLearn organizes courses into categories including: Business & Management, Creative Arts & Media, Healthcare & Medicine, History, Law, Nature & Environment, Politics & Society, Psychology & Mental Health, Science Engineering & Maths, Teaching, and Technology & Computing. FutureLearn courses with upcoming runs show next_run_start_date. Courses without upcoming runs can still be joined as open-ended self-paced access. Display both types clearly — learners care about start dates for scheduled cohort courses.

Extend the portal with personal features — letting users save courses to their learning plan and track their engagement with FutureLearn content over time, stored in your Supabase database. Paste this prompt into Lovable's chat: 'Add personalization to the FutureLearn portal. Users can save courses to My Learning Plan by clicking a Save button on any course card. This stores the course in a Supabase saved_courses table (user_id, course_title, course_url, organization, subject, saved_at). The My Learning Plan page shows all saved courses with a Remove button, a Mark as Enrolled button (updates enrollment_status to enrolled), and a Mark as Complete button (sets completion_date). Show CPD hours from completed courses using the course effort*duration estimate as hours earned. Display total earned CPD hours in a progress widget.' For the CPD hours calculation, FutureLearn provides effort_per_week (hours) and duration_weeks. Estimated total hours = effort_per_week * duration_weeks. This is an approximation but useful for tracking learning investment. For users with FutureLearn accounts, consider adding a Connect FutureLearn Account option that stores their FutureLearn profile URL. For partner API users, this enables looking up their actual enrollment and completion data from FutureLearn rather than relying on self-reporting. For complex multi-institution portals where FutureLearn data needs to be combined with other learning platforms' content for a unified view, RapidDev's team can help design the normalized learning activity data model.