How to Integrate Bolt.new with Teachable

Teachable's API uses simple API key authentication — no OAuth flows or token expiration to manage. Your API key is a permanent credential that must be kept secret since it provides full read access to your school's data. Log into your Teachable admin dashboard at teach.teachable.com. Navigate to Settings → API Keys (scroll down in the Settings sidebar). Click 'New API Key', give it a descriptive name (like 'Bolt Dev App' or 'Student Portal'), and click Create. Teachable generates the API key and displays it once — copy it immediately because you cannot view it again after closing the dialog. Note that Teachable's API access levels differ by plan. The Basic plan ($39/month) has very limited API access. The Professional plan ($119/month) provides full API access including user data, enrollment details, and course content. If you are on the Basic plan and the API returns 403 errors on certain endpoints, this is the reason — check Teachable's plan comparison for specific API endpoint availability. Once you have the API key, add it to your .env file. The API key is used as a Bearer token in API requests. Never put the key in client-side code — all Teachable API calls must go through a server-side API route where the key is accessed via `process.env.TEACHABLE_API_KEY`.

1# .env file in your Bolt project root
2# From Teachable admin: Settings → API Keys
3TEACHABLE_API_KEY=your_teachable_api_key_here
4
5# For webhook validation (from Teachable Settings → Integrations → Webhooks)
6TEACHABLE_WEBHOOK_TOKEN=your_webhook_token_here
7
8# Supabase for data storage
9NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
10NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

Teachable's API base URL is `https://developers.teachable.com/v1`. Authentication requires the API key as a Bearer token in the Authorization header. The key endpoints for building a student portal are: `GET /courses` (list all published courses in your school), `GET /courses/{course_id}` (course details), `GET /courses/{course_id}/users` (list all students enrolled in a course), and `GET /users/{user_id}` (individual user details). For a student-facing portal, the enrollment endpoint is critical: `GET /users/{teachable_user_id}/enrollments` returns all courses a specific user is enrolled in. To use this endpoint, you need the student's Teachable user ID. The challenge is mapping your Bolt app's authenticated users (Supabase auth) to their corresponding Teachable user IDs. One approach: when a student first logs into your Bolt portal, look up their Teachable user by email using the `GET /users?email={email}` endpoint and store the Teachable user ID in your Supabase user profile table. Bolt's WebContainer supports all these API calls as outbound HTTP requests — you can test the course listing and user lookup endpoints in the preview during development. The Teachable API enforces rate limits (the documentation states limits but exact numbers depend on plan), so avoid rapid repeated requests during development. A cache of 5-15 minutes for course catalog data is appropriate since courses do not change frequently.

1// app/api/teachable/courses/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { createClient } from '@supabase/supabase-js';
4
5const TEACHABLE_API_KEY = process.env.TEACHABLE_API_KEY;
6const TEACHABLE_BASE_URL = 'https://developers.teachable.com/v1';
7
8const supabase = createClient(
9  process.env.NEXT_PUBLIC_SUPABASE_URL!,
10  process.env.SUPABASE_SERVICE_ROLE_KEY || process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
11);
12
13export async function GET(request: NextRequest) {
14  if (!TEACHABLE_API_KEY) {
15    return NextResponse.json({ error: 'Teachable API not configured' }, { status: 500 });
16  }
17
18  // Check cache in Supabase (15-min freshness)
19  const { data: cached } = await supabase
20    .from('teachable_cache')
21    .select('*')
22    .eq('cache_key', 'courses')
23    .gte('cached_at', new Date(Date.now() - 15 * 60 * 1000).toISOString())
24    .single();
25
26  if (cached) {
27    return NextResponse.json(cached.data);
28  }
29
30  const response = await fetch(`${TEACHABLE_BASE_URL}/courses`, {
31    headers: {
32      'Authorization': `Bearer ${TEACHABLE_API_KEY}`,
33      'Accept': 'application/json',
34    },
35  });
36
37  if (!response.ok) {
38    return NextResponse.json(
39      { error: `Teachable API error: ${response.status}` },
40      { status: response.status }
41    );
42  }
43
44  const data = await response.json();
45  const courses = (data.courses || []).map((c: any) => ({
46    id: c.id,
47    name: c.name,
48    description: c.description,
49    thumbnailUrl: c.image_url,
50    slug: c.url,
51    price: c.price,
52    isFree: c.is_free,
53  }));
54
55  // Store in cache
56  await supabase.from('teachable_cache').upsert({
57    cache_key: 'courses',
58    data: { courses },
59    cached_at: new Date().toISOString(),
60  });
61
62  return NextResponse.json({ courses });
63}

With API routes returning course and enrollment data, build the student-facing interface. The core of a custom Teachable student portal is a dashboard that shows each enrolled student's courses with progress and direct links back to Teachable's course player for actually watching lessons. The student authentication flow works as follows: the student signs into your Bolt app using Supabase Auth (email/password or OAuth). On first login, a background API call searches Teachable for the user by email (`GET /users?email={email}`) and saves the Teachable user ID to the Supabase user profile. Subsequent logins use the stored Teachable ID to fetch enrollment data without the lookup step. For course cards in the student dashboard, link the 'Continue Learning' button directly to the Teachable course URL — the course player lives on Teachable's platform, not in your Bolt app. The format is typically `https://[your-school-name].teachable.com/courses/{slug}/lectures/first`. Your Bolt app provides a better discovery and onboarding experience, while Teachable handles the actual video delivery. Design the portal with a sidebar showing all enrolled courses and a main content area showing course details. Add a progress indicator for each course if the Teachable API returns completion data. A 'Browse More Courses' section at the bottom of the dashboard shows unenrolled courses with enrollment buttons that link to Teachable's checkout page for purchase.

1// components/EnrolledCourseCard.tsx
2interface EnrolledCourse {
3  id: number;
4  name: string;
5  thumbnailUrl?: string;
6  slug: string;
7  schoolSubdomain: string;
8  completedLessons?: number;
9  totalLessons?: number;
10}
11
12export function EnrolledCourseCard({ course }: { course: EnrolledCourse }) {
13  const progressPercent = course.totalLessons
14    ? Math.round((course.completedLessons || 0) / course.totalLessons * 100)
15    : null;
16
17  const continueUrl = `https://${course.schoolSubdomain}.teachable.com/courses/${course.slug}`;
18
19  return (
20    <div className="bg-white rounded-xl border border-gray-200 overflow-hidden hover:shadow-md transition-shadow">
21      {course.thumbnailUrl && (
22        <img src={course.thumbnailUrl} alt={course.name} className="w-full h-40 object-cover" />
23      )}
24      <div className="p-4">
25        <h3 className="font-semibold text-sm mb-2 line-clamp-2">{course.name}</h3>
26        {progressPercent !== null && (
27          <div className="mb-3">
28            <div className="flex justify-between text-xs text-gray-500 mb-1">
29              <span>Progress</span>
30              <span>{progressPercent}%</span>
31            </div>
32            <div className="w-full bg-gray-200 rounded-full h-2">
33              <div
34                className="bg-blue-600 h-2 rounded-full transition-all"
35                style={{ width: `${progressPercent}%` }}
36              />
37            </div>
38          </div>
39        )}
40        <a
41          href={continueUrl}
42          target="_blank"
43          rel="noopener noreferrer"
44          className="block text-center text-sm bg-blue-600 text-white rounded-lg py-2 hover:bg-blue-700"
45        >
46          Continue Learning
47        </a>
48      </div>
49    </div>
50  );
51}

Teachable can send webhook notifications to your app when key events occur: a student enrolls in a course, completes a course, or submits a quiz. These events require a publicly accessible URL — Bolt's WebContainer cannot receive incoming webhook requests since it runs entirely in the browser with no public server. Deploy your Bolt app to Netlify or Bolt Cloud first, then configure Teachable webhooks. In Teachable admin, navigate to Settings → Integrations → Webhooks. Add a new webhook endpoint with your deployed URL, for example `https://your-app.netlify.app/api/teachable/webhook`. Select the events you want to receive: `new_enrollment` (student purchased a course), `course_completed` (student finished all lessons), and `new_sale` (any purchase). Teachable includes a verification token in the webhook request header (`Teachable-Token`). Your webhook handler should validate this token against the value stored in `process.env.TEACHABLE_WEBHOOK_TOKEN` before processing the event. The token is set in Teachable's webhook settings — create a random secret string and add it to both Teachable's webhook configuration and your environment variables. For each `new_enrollment` event, save the enrollment to your Supabase database, trigger a welcome email via SendGrid or Resend, and optionally grant access to additional resources in your Bolt app (like a private Discord channel link or bonus PDF). This full automation creates a premium onboarding experience that Teachable's default enrollment emails cannot match.

1// app/api/teachable/webhook/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { createClient } from '@supabase/supabase-js';
4
5const WEBHOOK_TOKEN = process.env.TEACHABLE_WEBHOOK_TOKEN;
6
7const supabase = createClient(
8  process.env.NEXT_PUBLIC_SUPABASE_URL!,
9  process.env.SUPABASE_SERVICE_ROLE_KEY!
10);
11
12export async function POST(request: NextRequest) {
13  const incomingToken = request.headers.get('Teachable-Token');
14
15  if (!WEBHOOK_TOKEN || incomingToken !== WEBHOOK_TOKEN) {
16    console.error('Invalid Teachable webhook token');
17    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
18  }
19
20  const payload = await request.json();
21  const { object: eventType, data } = payload;
22
23  if (eventType === 'enrollment') {
24    const { user, course } = data;
25
26    await supabase.from('enrollments').insert({
27      student_email: user?.email,
28      student_name: `${user?.first_name} ${user?.last_name}`.trim(),
29      course_name: course?.name,
30      course_id: course?.id,
31      enrolled_at: new Date().toISOString(),
32      webhook_payload: payload,
33    });
34
35    console.log(`New enrollment: ${user?.email} in ${course?.name}`);
36  }
37
38  return NextResponse.json({ received: true });
39}

With course data routes, the student portal UI, and webhook handler in place, deploy the complete app to Netlify or Bolt Cloud. Click Publish in Bolt's navigation to trigger a build and deployment. After the deployment completes, add environment variables in your hosting platform: `TEACHABLE_API_KEY`, `TEACHABLE_WEBHOOK_TOKEN`, `NEXT_PUBLIC_SUPABASE_URL`, `NEXT_PUBLIC_SUPABASE_ANON_KEY`, and `SUPABASE_SERVICE_ROLE_KEY` (for the webhook handler which needs to bypass RLS). Test the complete enrollment flow end-to-end: create a test student account in Teachable, enroll that account in a free test course, and verify the webhook fires and creates a record in your Supabase enrollments table. If Teachable has a 'Resend' feature in the webhook settings, use it to re-send the enrollment webhook to your endpoint and check the response in Teachable's webhook delivery log. For the student portal, test the login flow: sign in with a user whose email matches a Teachable account, verify the email lookup finds the Teachable user ID, and confirm the enrolled courses appear in the dashboard. A common issue is timing — if a student signs up for your Bolt app before enrolling in any Teachable courses, their enrollment list will be empty until they enroll. In production, the WebContainer limitation is no longer relevant — your deployed app receives webhooks on a real server and can use standard TCP database connections if needed. The Next.js API routes become proper serverless functions on Netlify or Vercel that handle incoming requests correctly.