How to Integrate Bolt.new with Coursera

Access to Coursera's Catalog API requires applying for their affiliate program. Navigate to coursera.org/affiliates and click the affiliate program link. The application asks about your website or app, your audience, and how you plan to promote Coursera courses. Approval is not guaranteed — Coursera evaluates whether your platform aligns with their educational mission and has genuine traffic potential. Once approved (typically 2-5 business days), log into your Coursera affiliate dashboard. Find the API section, which provides your `client_id` and `client_secret`. These credentials use OAuth 2.0 Client Credentials flow — your API route first exchanges them for an access token, then uses that token to query the catalog. If you need to prototype before affiliate approval, Coursera's catalog data is also accessible without auth through their legacy public API endpoints (some still work as of 2026), though these are not officially supported. For production apps, use the official affiliate API with proper credentials. Coursera also offers a Content API for deeper catalog access, and an Organization API for enterprise customers — the affiliate API is the most accessible entry point for independent developers. Add your credentials to the .env file once you have them. Never include `client_secret` in client-side code — it must stay server-side in your API route.

1# .env file in your Bolt project root
2COURSERA_CLIENT_ID=your_coursera_client_id
3COURSERA_CLIENT_SECRET=your_coursera_client_secret
4# Your affiliate partner ID for link tracking (from affiliate dashboard)
5COURSERA_AFFILIATE_ID=your_affiliate_partner_id

Coursera's API uses OAuth 2.0 Client Credentials — your API route first requests an access token by POST-ing your client_id and client_secret to Coursera's token endpoint, then includes the token in subsequent catalog API requests. The access token is valid for a short period (typically 1 hour), so you need to handle token expiry and refresh. For Bolt.new, the recommended pattern is to cache the access token in memory between requests. If the cached token is still valid (check the `expires_in` value from the token response), reuse it. If expired or absent, request a new token. This avoids unnecessary token requests on every API call, which would add 200-400ms of latency. The Coursera catalog API returns course objects with rich metadata: name, description, slug, photo URL, workload estimate, certificate type, and the institutions offering the course. The search endpoint allows filtering by query string, topic, language, and difficulty level. For course details including instructor information, rating breakdowns, and syllabus items, a separate API call to the course detail endpoint is needed. Bolt can generate the complete authentication flow and search endpoint from a single prompt. Specify that you want OAuth 2.0 client credentials, the token caching behavior, and the search parameter handling — Bolt will generate the full TypeScript implementation including proper error handling for expired tokens.

1// app/api/courses/search/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4// Cache the access token between requests
5let cachedToken: string | null = null;
6let tokenExpiry: number = 0;
7
8async function getCourseraToken(): Promise<string> {
9  // Return cached token if still valid (with 60s buffer)
10  if (cachedToken && Date.now() < tokenExpiry - 60000) {
11    return cachedToken;
12  }
13
14  const credentials = Buffer.from(
15    `${process.env.COURSERA_CLIENT_ID}:${process.env.COURSERA_CLIENT_SECRET}`
16  ).toString('base64');
17
18  const response = await fetch('https://api.coursera.org/oauth2/client_credentials/token', {
19    method: 'POST',
20    headers: {
21      'Authorization': `Basic ${credentials}`,
22      'Content-Type': 'application/x-www-form-urlencoded',
23    },
24    body: 'grant_type=client_credentials',
25  });
26
27  if (!response.ok) {
28    throw new Error(`Token request failed: ${response.status}`);
29  }
30
31  const data = await response.json();
32  cachedToken = data.access_token;
33  tokenExpiry = Date.now() + (data.expires_in * 1000);
34  return cachedToken!;
35}
36
37export async function GET(request: NextRequest) {
38  const { searchParams } = new URL(request.url);
39  const query = searchParams.get('q') || 'programming';
40  const limit = Math.min(parseInt(searchParams.get('limit') || '12'), 24);
41  const affiliateId = process.env.COURSERA_AFFILIATE_ID;
42
43  try {
44    const token = await getCourseraToken();
45
46    const params = new URLSearchParams({
47      'q': 'search',
48      'query': query,
49      'limit': limit.toString(),
50      'fields': 'name,description,slug,photoUrl,workload,certificates',
51    });
52
53    const response = await fetch(
54      `https://api.coursera.org/api/courses.v1?${params.toString()}`,
55      { headers: { 'Authorization': `Bearer ${token}` } }
56    );
57
58    if (!response.ok) {
59      return NextResponse.json({ error: 'Coursera API error' }, { status: response.status });
60    }
61
62    const data = await response.json();
63
64    const courses = (data.elements || []).map((course: any) => ({
65      id: course.id,
66      name: course.name,
67      description: course.description,
68      slug: course.slug,
69      photoUrl: course.photoUrl,
70      workload: course.workload,
71      enrollmentUrl: affiliateId
72        ? `https://www.coursera.org/learn/${course.slug}?ranMID=40328&ranEAID=${affiliateId}`
73        : `https://www.coursera.org/learn/${course.slug}`,
74    }));
75
76    return NextResponse.json({ courses, total: data.paging?.total });
77  } catch (error: any) {
78    return NextResponse.json({ error: error.message }, { status: 500 });
79  }
80}

With the API route returning course data, prompt Bolt to generate the course discovery interface. The most effective layout for a course catalog is a grid of course cards — each card showing the course thumbnail, name, provider institution, rating (if available), workload estimate, and an enrollment button. Coursera's course data includes `photoUrl` for a course thumbnail and `slug` for building the enrollment URL. The `workload` field contains a free-text estimate like '4-6 hours per week for 4 weeks' — display this as-is rather than trying to parse it numerically. Course ratings are not directly available through the basic catalog API — the affiliate API endpoint for ratings is separate and may require additional permissions. For the search experience, add a text input at the top of the page, topic filter chips (Data Science, Business, Computer Science, Personal Development, etc.), and a difficulty filter (Beginner, Intermediate, Mixed). The search should debounce user input (300ms delay) before calling the API to avoid excessive requests while the user types. Bolt can also generate a course detail modal that loads additional information when a user clicks a course card. The detail view shows the full course description, partner institution logo, certificate type (Professional Certificate, Specialization, Single Course, Degree), and the full workload breakdown.

1// components/CourseCard.tsx
2interface Course {
3  id: string;
4  name: string;
5  description: string;
6  slug: string;
7  photoUrl?: string;
8  workload?: string;
9  enrollmentUrl: string;
10  provider?: string;
11}
12
13export function CourseCard({ course }: { course: Course }) {
14  return (
15    <div className="bg-white border border-gray-200 rounded-xl overflow-hidden hover:shadow-lg transition-shadow flex flex-col">
16      {course.photoUrl && (
17        <img
18          src={course.photoUrl}
19          alt={course.name}
20          className="w-full h-40 object-cover"
21        />
22      )}
23      <div className="p-4 flex flex-col flex-1">
24        <h3 className="font-semibold text-sm leading-snug line-clamp-2 mb-1">
25          {course.name}
26        </h3>
27        {course.provider && (
28          <p className="text-xs text-gray-500 mb-2">{course.provider}</p>
29        )}
30        <p className="text-xs text-gray-600 line-clamp-2 flex-1 mb-3">
31          {course.description}
32        </p>
33        {course.workload && (
34          <p className="text-xs text-blue-600 mb-3">{course.workload}</p>
35        )}
36        <a
37          href={course.enrollmentUrl}
38          target="_blank"
39          rel="noopener noreferrer"
40          className="block text-center text-sm bg-blue-600 text-white rounded-lg py-2 hover:bg-blue-700 transition-colors"
41        >
42          Enroll on Coursera
43        </a>
44      </div>
45    </div>
46  );
47}

Transform the basic course directory into a personalized learning tool by tracking which courses users browse, save, or complete. This data enables simple recommendation logic — users who saved Python courses get recommendations for data science and machine learning courses next. Create a `course_interests` table in Supabase that records user-course interactions: user_id, course_id (Coursera's ID), course_slug, action (saved, clicked, enrolled, completed), and timestamp. Enable RLS so users only see their own activity. Based on this data, build a personalized recommendation section: query the most popular topics in the user's saved courses, then fetch Coursera courses in those topics. The saved courses feature works well in Bolt's WebContainer preview since it only involves Supabase reads and writes (outbound HTTP calls that the WebContainer supports). Users can browse and save courses in the development environment. Affiliate link clicks require a deployed URL for proper attribution tracking since affiliate cookies are set on the Coursera domain after the redirect. For a complete learning tracker, add a progress notes feature: users can add personal notes to any course they are taking, mark lessons as complete, and track their learning streaks. This data lives entirely in Supabase — no Coursera API calls needed for note-taking — making it a reliable, API-call-free feature that enhances the app's value beyond what Coursera's own interface offers.

Affiliate link tracking requires your app to be deployed to a real URL — Coursera's affiliate system sets tracking cookies when users are redirected from your affiliate URL to Coursera's site, and this requires a stable, publicly accessible domain. Bolt's WebContainer preview uses dynamic localhost URLs that cannot be registered as affiliate tracking origins. Deploy to Netlify or Bolt Cloud by clicking Publish in Bolt's navigation. After the deployment completes, add environment variables to your hosting platform: `COURSERA_CLIENT_ID`, `COURSERA_CLIENT_SECRET`, and `COURSERA_AFFILIATE_ID` in Netlify's Site Configuration → Environment Variables or Bolt Cloud's Secrets panel. Once deployed, test affiliate tracking by clicking an enrollment link and checking whether Coursera's affiliate dashboard registers the click within 24-48 hours. Some affiliate programs require approval of specific domains before tracking begins — log into your Coursera affiliate dashboard and verify your deployed domain is registered as an approved referral source. For production monitoring, add click tracking to your enrollment buttons using a thin redirect handler: instead of linking directly to Coursera's affiliate URL, route through `/api/courses/track-click?slug=[slug]` which logs the click to Supabase and then redirects to the Coursera affiliate URL. This gives you first-party analytics on which courses generate the most engagement, independent of Coursera's affiliate dashboard.