How to Integrate Thinkific with V0

Thinkific uses API key authentication and routes requests through your school's subdomain. You need both before writing any code. To get your API key, log into your Thinkific admin dashboard at yourschool.thinkific.com/admin. Click on your profile icon or navigate to Settings in the admin menu. Look for 'API' or 'Developer' settings — in the Thinkific admin, this is typically under Settings → Code & Analytics → API (or similar navigation depending on your plan). Generate a new API key and copy it. Thinkific API keys look like a long random alphanumeric string. Note that Thinkific's API key access depends on your plan. The API is available on Growth and higher plans. If you are on the Basic or Start plan, you may not have API access and will need to upgrade. Your subdomain is the part of your Thinkific school URL before '.thinkific.com'. If your school is at myacademy.thinkific.com, your subdomain is 'myacademy'. Every Thinkific API call uses this subdomain in the request headers (X-Auth-Subdomain) to identify which school you are querying. All Thinkific API endpoints use the base URL https://api.thinkific.com/api/public/v1. Authentication requires both the API key in the Authorization header (as Bearer token) and the subdomain in the X-Auth-Subdomain header. Omitting either header will result in authentication errors.

Store your Thinkific API key and subdomain in Vercel's environment variables so your Next.js API route can authenticate with the Thinkific API securely. Open your Vercel Dashboard, navigate to your project, click 'Settings', and select 'Environment Variables'. Add the following two variables: THINKIFIC_API_KEY: Your Thinkific API key. This is a secret — do not add a NEXT_PUBLIC_ prefix. Set it for Production, Preview, and Development environments. THINKIFIC_SUBDOMAIN: Your school subdomain (the part before .thinkific.com). For example, if your school is at learnwithme.thinkific.com, set this to 'learnwithme'. This is not a secret but is best kept in an environment variable for easy configuration. Save both variables and trigger a redeployment. For local development, add these same variables to your .env.local file so your local Next.js server can authenticate with Thinkific during development.

1# .env.local — local development only, excluded from Git
2THINKIFIC_API_KEY=your_thinkific_api_key_here
3THINKIFIC_SUBDOMAIN=yourschool

Create the Next.js API route that fetches courses from Thinkific. This route runs server-side on Vercel and uses both the API key and subdomain to authenticate with the Thinkific API. Create app/api/thinkific/courses/route.ts. The Thinkific courses endpoint is GET https://api.thinkific.com/api/public/v1/courses and returns a paginated list of all courses in your school. Each course object includes id, name, slug, description, card_image_url, price (in your currency's smallest unit), administrator_user_id, product_id, published, and instructor details. Thinkific uses meta.pagination for pagination, which returns page, per_page, total_pages, and total objects. The default page size is 25. For most schools with under 50 courses, two pages cover the complete catalog. You can request up to 250 courses per page using the per_page query parameter. Filter for published courses only by checking the published field — draft and private courses should not appear in a public storefront. You can either filter on the Thinkific API side (Thinkific does not have a direct published=true filter parameter but you can filter after fetching) or filter in your route before returning the response. The price field in Thinkific's API is returned as a decimal number (e.g., 49.99 for a $49.99 course), not in cents. A price of 0.0 means the course is free. Format this for display in your component rather than in the API route.

1import { NextResponse } from 'next/server';
2
3interface ThinkificCourse {
4  id: number;
5  name: string;
6  slug: string;
7  description: string;
8  card_image_url: string | null;
9  price: number;
10  published: boolean;
11  instructor: {
12    id: number;
13    full_name: string;
14    avatar_url: string | null;
15  } | null;
16}
17
18interface ThinkificResponse {
19  items: ThinkificCourse[];
20  meta: {
21    pagination: {
22      page: number;
23      per_page: number;
24      total_pages: number;
25      total: number;
26    };
27  };
28}
29
30async function fetchCoursePage(
31  apiKey: string,
32  subdomain: string,
33  page: number
34): Promise<ThinkificResponse> {
35  const url = new URL('https://api.thinkific.com/api/public/v1/courses');
36  url.searchParams.set('page', String(page));
37  url.searchParams.set('limit', '50');
38
39  const response = await fetch(url.toString(), {
40    headers: {
41      Authorization: `Bearer ${apiKey}`,
42      'X-Auth-Subdomain': subdomain,
43      'Content-Type': 'application/json',
44    },
45    next: { revalidate: 300 },
46  });
47
48  if (!response.ok) {
49    throw new Error(`Thinkific API returned ${response.status}`);
50  }
51
52  return response.json();
53}
54
55export async function GET() {
56  const apiKey = process.env.THINKIFIC_API_KEY;
57  const subdomain = process.env.THINKIFIC_SUBDOMAIN;
58
59  if (!apiKey || !subdomain) {
60    return NextResponse.json(
61      { error: 'Thinkific configuration missing' },
62      { status: 500 }
63    );
64  }
65
66  try {
67    const firstPage = await fetchCoursePage(apiKey, subdomain, 1);
68    let allCourses = firstPage.items;
69
70    // Fetch additional pages if needed
71    const totalPages = firstPage.meta.pagination.total_pages;
72    for (let page = 2; page <= totalPages; page++) {
73      const additionalPage = await fetchCoursePage(apiKey, subdomain, page);
74      allCourses = allCourses.concat(additionalPage.items);
75    }
76
77    // Filter to published courses only
78    const publishedCourses = allCourses
79      .filter((course) => course.published)
80      .map((course) => ({
81        id: course.id,
82        name: course.name,
83        slug: course.slug,
84        description: course.description || '',
85        imageUrl: course.card_image_url,
86        price: course.price,
87        isFree: course.price === 0,
88        instructorName: course.instructor?.full_name || '',
89        instructorAvatar: course.instructor?.avatar_url || null,
90        enrollUrl: `https://${subdomain}.thinkific.com/courses/${course.slug}`,
91      }));
92
93    return NextResponse.json({ courses: publishedCourses, total: publishedCourses.length });
94  } catch (error) {
95    console.error('Thinkific courses fetch failed:', error);
96    return NextResponse.json(
97      { error: 'Failed to fetch courses' },
98      { status: 500 }
99    );
100  }
101}

With the courses API route working, prompt V0 to generate the React components that render your course catalog. The most effective approach is to first check the JSON output of /api/thinkific/courses to see the exact field names, then reference those in your V0 prompt. For a course catalog page, describe the card layout you want: the image placement, typography for course name and instructor, price display format, and the enrollment CTA. Tell V0 whether you want a grid (2-3 columns) or a list layout. Specify how you want to handle missing course images — either a placeholder gradient or your brand logo. Ask V0 to add category filtering or sorting if your course catalog is large. Thinkific's API supports collections (course bundles) which you can fetch separately to use as filter categories. If you only have a handful of courses, simple sorting by price (free first) or alphabetical order may be sufficient. For the price display, instruct V0 to show 'Free' for courses with price of 0 and to format paid prices as '$XX' or with your local currency symbol. You can also ask V0 to add a 'sale' badge if you want to manually flag certain courses as discounted. Ask V0 to generate a loading skeleton that matches your card layout — this appears while the fetch is in progress and prevents layout shift. The skeleton should have the same dimensions as a loaded card so the page does not jump when data arrives.

If you want to build a student-facing dashboard showing enrolled courses and progress, you need an additional API route that fetches enrollments for a specific user. This requires authenticating as an admin and looking up the user's enrollments by their email address. Create app/api/thinkific/enrollments/route.ts. The Thinkific enrollments endpoint is GET https://api.thinkific.com/api/public/v1/enrollments. You can filter by user email using the query parameter query[user_email]={email}. The response includes enrollment records with course_name, percentage_completed, completed, activated_at, expiry_date, and course_id. For user-specific dashboards where each visitor should only see their own enrollments, you will need a way to identify the current user. If your V0 app has authentication (via Clerk, Auth0, or similar), the logged-in user's email can be passed as a query parameter to the API route. The route should validate that the requester is authenticated before looking up enrollments — never allow arbitrary email lookups without authentication. For internal admin tools where you want to look up any student's enrollments, you can accept the email as a query parameter with admin authentication protecting the route. For complex use cases like syncing Thinkific enrollments with your own database, triggering enrollment from external events, or building a full white-label course platform on top of Thinkific, RapidDev can help design a more comprehensive integration architecture.

1import { NextRequest, NextResponse } from 'next/server';
2
3export async function GET(request: NextRequest) {
4  const apiKey = process.env.THINKIFIC_API_KEY;
5  const subdomain = process.env.THINKIFIC_SUBDOMAIN;
6
7  if (!apiKey || !subdomain) {
8    return NextResponse.json(
9      { error: 'Thinkific configuration missing' },
10      { status: 500 }
11    );
12  }
13
14  const { searchParams } = new URL(request.url);
15  const userEmail = searchParams.get('email');
16
17  if (!userEmail) {
18    return NextResponse.json({ error: 'Email parameter required' }, { status: 400 });
19  }
20
21  const enrollmentsUrl = new URL(
22    'https://api.thinkific.com/api/public/v1/enrollments'
23  );
24  enrollmentsUrl.searchParams.set('query[user_email]', userEmail);
25  enrollmentsUrl.searchParams.set('limit', '50');
26
27  try {
28    const response = await fetch(enrollmentsUrl.toString(), {
29      headers: {
30        Authorization: `Bearer ${apiKey}`,
31        'X-Auth-Subdomain': subdomain,
32        'Content-Type': 'application/json',
33      },
34      next: { revalidate: 60 },
35    });
36
37    if (!response.ok) {
38      console.error('Thinkific enrollments error:', response.status);
39      return NextResponse.json(
40        { error: `Thinkific returned ${response.status}` },
41        { status: response.status }
42      );
43    }
44
45    const data = await response.json();
46
47    const enrollments = (data.items || []).map(
48      (e: {
49        course_name: string;
50        percentage_completed: number;
51        completed: boolean;
52        activated_at: string;
53        expiry_date: string | null;
54        course_id: number;
55      }) => ({
56        courseName: e.course_name,
57        percentageCompleted: e.percentage_completed,
58        completed: e.completed,
59        activatedAt: e.activated_at,
60        expiryDate: e.expiry_date,
61        courseId: e.course_id,
62        courseUrl: `https://${subdomain}.thinkific.com/courses/take/${e.course_id}`,
63      })
64    );
65
66    return NextResponse.json({ enrollments, total: enrollments.length });
67  } catch (error) {
68    console.error('Thinkific enrollments fetch failed:', error);
69    return NextResponse.json(
70      { error: 'Failed to fetch enrollments' },
71      { status: 500 }
72    );
73  }
74}