How to Integrate Bolt.new with FutureLearn

Before writing any code, it is important to understand why direct FutureLearn integration is not possible and which alternative best fits your project goals. FutureLearn, owned by the SEEK Group since 2022, operates as a closed learning platform. Unlike Coursera (which has a public catalog API at api.coursera.org), Udemy (which has an affiliate API), or Teachable (which has a REST API for course creators), FutureLearn has made a deliberate product decision not to expose their course data, enrollment information, or learner progress to third-party developers. There is no FutureLearn developer portal, no OAuth application registration, and no documented REST endpoints. This means any Bolt.new integration strategy must choose one of three paths: (1) The affiliate link path is best if your goal is course discovery and recommendation — you build the front end, FutureLearn delivers the learning, and you earn commission. Affiliate links are simple outbound URLs with a tracking parameter appended. No API, no backend complexity, no deployment requirements — this path works in the Bolt WebContainer preview immediately. (2) The custom platform path is best if you want to own the learning experience end-to-end. You build courses, video players, progress tracking, and certificates inside your Bolt app using Supabase as the backend. This requires more development effort but gives you complete control over content, data, and monetization. (3) The Coursera API alternative is best if you need programmatic access to an established, large-scale course catalog without building your own. Coursera provides a free public API for course discovery that returns titles, descriptions, partner names, and photos. For most Bolt.new developers building educational apps, the custom platform path with Supabase delivers the most value — you get a real product with your own brand and data, rather than sending users away to FutureLearn. Ask yourself: do you want to own the learner relationship, or refer learners to FutureLearn and earn affiliate commission? Your answer determines which path to take.

1-- supabase/migrations/001_learning_platform.sql
2-- Course catalog
3CREATE TABLE courses (
4  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
5  title TEXT NOT NULL,
6  slug TEXT UNIQUE NOT NULL,
7  description TEXT,
8  category TEXT,
9  level TEXT CHECK (level IN ('Beginner', 'Intermediate', 'Advanced')),
10  duration_weeks INTEGER,
11  thumbnail_url TEXT,
12  published BOOLEAN DEFAULT false,
13  created_at TIMESTAMPTZ DEFAULT now()
14);
15
16-- Lessons within courses
17CREATE TABLE lessons (
18  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
19  course_id UUID REFERENCES courses(id) ON DELETE CASCADE,
20  title TEXT NOT NULL,
21  video_url TEXT,
22  duration_minutes INTEGER,
23  order_index INTEGER NOT NULL,
24  created_at TIMESTAMPTZ DEFAULT now()
25);
26
27-- User enrollments
28CREATE TABLE enrollments (
29  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
30  user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
31  course_id UUID REFERENCES courses(id) ON DELETE CASCADE,
32  enrolled_at TIMESTAMPTZ DEFAULT now(),
33  UNIQUE(user_id, course_id)
34);
35
36-- Lesson completion tracking
37CREATE TABLE lesson_completions (
38  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
39  user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
40  lesson_id UUID REFERENCES lessons(id) ON DELETE CASCADE,
41  completed_at TIMESTAMPTZ DEFAULT now(),
42  UNIQUE(user_id, lesson_id)
43);
44
45-- RLS policies
46ALTER TABLE courses ENABLE ROW LEVEL SECURITY;
47ALTER TABLE lessons ENABLE ROW LEVEL SECURITY;
48ALTER TABLE enrollments ENABLE ROW LEVEL SECURITY;
49ALTER TABLE lesson_completions ENABLE ROW LEVEL SECURITY;
50
51-- Anyone can read published courses and their lessons
52CREATE POLICY "Public read published courses" ON courses FOR SELECT USING (published = true);
53CREATE POLICY "Public read lessons" ON lessons FOR SELECT USING (true);
54
55-- Users manage their own enrollments and completions
56CREATE POLICY "Users manage own enrollments" ON enrollments
57  USING (user_id = auth.uid()) WITH CHECK (user_id = auth.uid());
58CREATE POLICY "Users manage own completions" ON lesson_completions
59  USING (user_id = auth.uid()) WITH CHECK (user_id = auth.uid());

With the database schema in place, the next step is building the course discovery and enrollment flow. The catalog page shows all published courses with their titles, categories, difficulty levels, duration, and thumbnails. For authenticated users, it shows whether they are already enrolled in each course. The enrollment action inserts a row into the enrollments table and redirects the user to the first lesson. The catalog page is a React Server Component that queries Supabase for published courses. For the enrollment check, you fetch the current user's enrollments and compare them against the course list client-side. This avoids N+1 queries — one query for courses, one query for the user's enrollments, then a JavaScript join. For course thumbnails, Supabase Storage is the recommended approach: upload images to a public bucket called 'course-thumbnails' and store the public URL in the courses table. Alternatively, use external image URLs (from Unsplash or your own CDN) stored directly in the thumbnail_url column. The learning platform does not need native FutureLearn thumbnails since you are building your own content. The category filter uses client-side state to filter the visible course cards without re-fetching from the server. This works well for catalogs up to a few hundred courses. For larger catalogs, move filtering to the Supabase query with a WHERE clause on the category column. The difficulty level filter works the same way. When a user clicks 'Enroll', the component calls a Server Action that inserts into the enrollments table. Server Actions are the correct pattern for database mutations in Next.js App Router — they run on the server, have access to process.env credentials, and do not require a separate API route. After enrollment, the user is redirected to the first lesson in the course.

1// app/courses/actions.ts
2'use server';
3import { createClient } from '@/lib/supabase/server';
4import { redirect } from 'next/navigation';
5
6export async function enrollInCourse(courseId: string, firstLessonId?: string) {
7  const supabase = await createClient();
8  const { data: { user } } = await supabase.auth.getUser();
9
10  if (!user) {
11    redirect('/login');
12  }
13
14  const { error } = await supabase
15    .from('enrollments')
16    .insert({ user_id: user.id, course_id: courseId });
17
18  if (error && error.code !== '23505') {
19    // 23505 = unique constraint violation (already enrolled)
20    throw new Error(`Enrollment failed: ${error.message}`);
21  }
22
23  if (firstLessonId) {
24    redirect(`/lessons/${firstLessonId}`);
25  }
26}

The lesson player is the core of the learning experience. Each lesson page shows the video embed, the lesson title, the course navigation sidebar (all lessons in the course with completion indicators), and a 'Mark as Complete' button. When the user clicks 'Mark as Complete', a Server Action inserts a row into the lesson_completions table and updates the sidebar state. For video embedding, YouTube is the simplest and most reliable approach for a Bolt-built learning platform: store the YouTube video URL or ID in the video_url column and embed it using a standard iframe. The YouTube embed URL format is https://www.youtube.com/embed/{videoId}. For private or custom video content, use Supabase Storage with a signed URL. Supabase Storage supports direct video streaming and generates time-limited signed URLs for private content — prompt Bolt to generate an API route that creates a signed URL from SUPABASE_SERVICE_ROLE_KEY. The progress sidebar shows all lessons in the course with a checkmark icon for completed lessons. This sidebar is a Client Component that receives the initial completion state as a prop from the Server Component parent, and updates optimistically when the user marks a lesson complete. Optimistic UI means the checkbox appears checked immediately when clicked, before the database write confirms — this makes the interface feel instant even on slow connections. Course completion is calculated as (completed lessons / total lessons) * 100. Display this as a progress bar at the top of the sidebar. When the percentage reaches 100%, show a congratulations message and a link to download or view the course certificate. The certificate feature is covered in the next step. Navigation between lessons uses the order_index column. The 'Next Lesson' button fetches the lesson with order_index + 1 in the same course. The 'Previous Lesson' button uses order_index - 1. Handle edge cases: no previous lesson on the first lesson, no next lesson on the last lesson.

1// app/lessons/[lessonId]/actions.ts
2'use server';
3import { createClient } from '@/lib/supabase/server';
4import { revalidatePath } from 'next/cache';
5
6export async function markLessonComplete(lessonId: string, courseSlug: string) {
7  const supabase = await createClient();
8  const { data: { user } } = await supabase.auth.getUser();
9
10  if (!user) return { error: 'Not authenticated' };
11
12  const { error } = await supabase
13    .from('lesson_completions')
14    .insert({ user_id: user.id, lesson_id: lessonId });
15
16  if (error && error.code !== '23505') {
17    return { error: error.message };
18  }
19
20  revalidatePath(`/lessons/${lessonId}`);
21  return { success: true };
22}
23
24export async function getProgressForCourse(courseId: string, userId: string) {
25  const supabase = await createClient();
26
27  // Get total lesson count
28  const { count: total } = await supabase
29    .from('lessons')
30    .select('*', { count: 'exact', head: true })
31    .eq('course_id', courseId);
32
33  // Get completed count for this user
34  const { data: completions } = await supabase
35    .from('lesson_completions')
36    .select('lesson_id, lessons!inner(course_id)')
37    .eq('user_id', userId)
38    .eq('lessons.course_id', courseId);
39
40  const completed = completions?.length ?? 0;
41  const percentage = total ? Math.round((completed / total) * 100) : 0;
42
43  return { completed, total: total ?? 0, percentage };
44}

If building a full custom learning platform is more than your project requires, the FutureLearn affiliate program is a much simpler integration path. FutureLearn's affiliate program lets you link to their courses with a tracking parameter appended to the URL. When a user clicks your link and enrolls in a FutureLearn course within the attribution window, you earn a commission (typically 10-30% of the course fee). This approach is essentially outbound linking with revenue sharing — no API, no backend, no deployment required. To join the FutureLearn affiliate program, go to futurelearn.com/partnerships/affiliates and apply. FutureLearn uses an affiliate network (historically Impact or Awin) — after approval, you get access to a dashboard where you can generate affiliate links, create banners, and track your earnings. The affiliate link format is typically: https://www.futurelearn.com/courses/{course-slug}?utm_source={your_affiliate_id}&utm_medium=affiliate. For a Bolt-built course recommendation portal, store your curated course list in a Supabase table with columns for title, provider, description, image URL, affiliate URL, and metadata. The portal fetches this table and renders course cards. The 'View Course' or 'Enroll' button on each card opens the affiliate URL in a new tab. This is a pure content site — no authentication, no server-side API calls, no environment variables needed. It works completely in the Bolt WebContainer preview. Note a key limitation: since FutureLearn has no API, your course database must be maintained manually. You cannot automatically sync new courses, price changes, or availability. For a small curated catalog (20-50 courses), this is manageable. For a large-scale course aggregator, a platform with a real API (like Coursera or Udemy) is a better fit. For Bolt's WebContainer context: this affiliate approach generates zero WebContainer-related issues. There are no incoming webhooks, no API rate limits, no native modules, no CORS concerns. Outbound links work exactly the same in Bolt's preview as in production.

1// Example affiliate course data for seeding
2// Insert via Supabase Table Editor or SQL:
3/*
4INSERT INTO affiliate_courses (title, provider, category, level, duration_weeks, description, image_url, affiliate_url, featured)
5VALUES
6  (
7    'Introduction to Data Science',
8    'FutureLearn',
9    'Technology',
10    'Beginner',
11    4,
12    'Learn data science fundamentals with Python, covering data analysis, visualization, and machine learning basics.',
13    'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=400',
14    'https://www.futurelearn.com/courses/data-science',
15    true
16  ),
17  (
18    'Digital Marketing Strategy',
19    'FutureLearn',
20    'Business',
21    'Intermediate',
22    6,
23    'Master digital marketing channels including SEO, social media, email marketing, and paid advertising.',
24    'https://images.unsplash.com/photo-1432888622747-4eb9a8efeb07?w=400',
25    'https://www.futurelearn.com/courses/digital-marketing',
26    true
27  );
28*/
29
30// app/recommended-courses/page.tsx
31import { createClient } from '@/lib/supabase/server';
32
33export default async function RecommendedCoursesPage() {
34  const supabase = await createClient();
35  const { data: courses } = await supabase
36    .from('affiliate_courses')
37    .select('*')
38    .order('featured', { ascending: false })
39    .order('created_at', { ascending: false });
40
41  return (
42    <div className="mx-auto max-w-6xl px-4 py-12">
43      <h1 className="mb-2 text-3xl font-bold">Recommended Courses</h1>
44      <p className="mb-8 text-gray-600">Curated courses from FutureLearn and partner institutions</p>
45      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
46        {courses?.map((course) => (
47          <div key={course.id} className="rounded-xl border bg-white p-0 shadow-sm overflow-hidden">
48            {course.image_url && (
49              <img src={course.image_url} alt={course.title} className="h-48 w-full object-cover" />
50            )}
51            <div className="p-5">
52              <span className="text-xs font-medium uppercase text-blue-600">{course.category}</span>
53              <h2 className="mt-1 text-lg font-semibold">{course.title}</h2>
54              <p className="mt-2 text-sm text-gray-600 line-clamp-2">{course.description}</p>
55              <div className="mt-3 flex items-center gap-3 text-xs text-gray-500">
56                <span>{course.level}</span>
57                <span>·</span>
58                <span>{course.duration_weeks} weeks</span>
59              </div>
60              <a
61                href={course.affiliate_url}
62                target="_blank"
63                rel="noopener noreferrer"
64                className="mt-4 block w-full rounded-lg bg-blue-600 py-2 text-center text-sm font-medium text-white hover:bg-blue-700"
65              >
66                View on FutureLearn
67              </a>
68            </div>
69          </div>
70        ))}
71      </div>
72    </div>
73  );
74}

For developers who specifically need programmatic access to a large course catalog — the kind of integration you would use FutureLearn for if they had an API — Coursera is the most practical alternative. Coursera provides a public REST API at api.coursera.org that returns course listings, partner information, and course metadata. The API is free to use for catalog data and requires no OAuth for basic course discovery queries. Coursera's catalog API follows a standard REST pattern. The courses endpoint is GET https://api.coursera.org/api/courses.v1 and accepts query parameters including q (query type: search or browse), query (search terms), fields (comma-separated list of fields to return), and limit/start for pagination. Fields available include name, slug, photoUrl, description, and partnerIds. This API is HTTP-based and works perfectly through a Bolt.new Next.js API route — outbound calls from the server side have no CORS issues. The API route pattern is straightforward: your React component calls your own /api/courses endpoint, which adds any required headers and calls api.coursera.org, then returns the cleaned data to the frontend. This proxy pattern serves two purposes: it keeps any API credentials server-side (though Coursera's catalog API does not require credentials for basic queries), and it lets you add caching, error handling, and response transformation in one place. Pagination is important for a good user experience. Coursera's API returns results with a paging object containing a next cursor. Implement infinite scroll or 'Load More' pagination in the React component using the cursor from the previous response. Store the cursor in component state and include it as a start parameter in the next API call. Note that Coursera's API is designed for course discovery, not for managing enrollments or accessing learner data — those features require Coursera's enterprise integration (Coursera for Campus or Coursera for Business). For a Bolt.new app building a learning resource aggregator, the catalog API is exactly the right level of access.

1// app/api/coursera/search/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4interface CourseraCoursesResponse {
5  elements: Array<{
6    id: string;
7    name: string;
8    slug: string;
9    photoUrl?: string;
10    description?: string;
11    partnerIds?: string[];
12  }>;
13  paging?: { next?: string };
14}
15
16export async function GET(request: NextRequest) {
17  const { searchParams } = new URL(request.url);
18  const query = searchParams.get('query') ?? 'programming';
19  const start = searchParams.get('start') ?? '0';
20
21  try {
22    const url = new URL('https://api.coursera.org/api/courses.v1');
23    url.searchParams.set('q', 'search');
24    url.searchParams.set('query', query);
25    url.searchParams.set('fields', 'name,slug,photoUrl,description,partnerIds');
26    url.searchParams.set('limit', '12');
27    url.searchParams.set('start', start);
28
29    const response = await fetch(url.toString(), {
30      headers: {
31        'Accept': 'application/json',
32      },
33      next: { revalidate: 300 }, // Cache for 5 minutes
34    });
35
36    if (!response.ok) {
37      return NextResponse.json(
38        { error: `Coursera API error: ${response.status}` },
39        { status: response.status }
40      );
41    }
42
43    const data: CourseraCoursesResponse = await response.json();
44
45    return NextResponse.json({
46      courses: data.elements.map((course) => ({
47        id: course.id,
48        name: course.name,
49        slug: course.slug,
50        photoUrl: course.photoUrl,
51        description: course.description,
52        courseUrl: `https://www.coursera.org/learn/${course.slug}`,
53      })),
54      nextCursor: data.paging?.next,
55    });
56  } catch (error) {
57    const message = error instanceof Error ? error.message : 'Request failed';
58    return NextResponse.json({ error: message }, { status: 500 });
59  }
60}