How to Integrate Learnworlds with V0

Open V0 at v0.dev and describe the course portal interface you want to build. LearnWorlds course data includes title, description, thumbnail image URL, price, category, and enrollment count — describe a UI that displays these fields meaningfully. For a course catalog, a card grid with course thumbnails, titles, and enrollment CTAs works well. For a student dashboard, a list of enrolled courses with progress bars communicates learning progress clearly. Be specific about the interaction states — what happens when a user clicks a course card, how enrollment status changes the button text (Enroll vs Continue Learning), and what the loading state looks like while API data fetches. Include the API route path in your prompt (/api/learnworlds/courses for catalog data, /api/learnworlds/enrollments for student data) so V0 generates the fetch calls pointed at the correct endpoints from the start. V0 generates with Tailwind CSS and shadcn/ui, which provides card components, badge components, and progress bar components that work naturally for course catalog and student dashboard layouts. After generating the components, use V0's Git panel to push to GitHub so Vercel can deploy them.

Create the Next.js API routes that fetch data from the LearnWorlds REST API and return it to your frontend components. The LearnWorlds API base URL is https://{{school-domain}}.learnworlds.com/v2, where {{school-domain}} is your school's subdomain. Authentication uses two headers: Lw-Client with your API key and Accept: application/json. All responses are JSON. The courses endpoint is GET /courses and returns an array of course objects with id, title, description, image, price, and metadata. The enrollments endpoint is GET /users/{userId}/enrollments for a specific user's enrolled courses. The users endpoint is GET /users and supports filtering by email to look up a specific user's ID. For course progress, use GET /users/{userId}/progress. Most V0 course portals start with just the courses listing endpoint and add user-specific endpoints when authentication is added to the app. Note that LearnWorlds paginates responses using page and per_page query parameters — the default page size is 20. For course catalogs with more than 20 courses, implement pagination in your API route using the total_pages field in the response to fetch all pages.

1// app/api/learnworlds/courses/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4const LW_SCHOOL = process.env.LEARNWORLDS_SCHOOL_DOMAIN;
5const LW_API_KEY = process.env.LEARNWORLDS_API_KEY;
6
7function getLearnWorldsHeaders() {
8  return {
9    'Lw-Client': LW_API_KEY!,
10    Accept: 'application/json',
11    'Content-Type': 'application/json',
12  };
13}
14
15async function fetchAllCourses() {
16  const courses: unknown[] = [];
17  let page = 1;
18  let totalPages = 1;
19
20  do {
21    const url = `https://${LW_SCHOOL}.learnworlds.com/v2/courses?page=${page}&per_page=20`;
22    const response = await fetch(url, { headers: getLearnWorldsHeaders() });
23
24    if (!response.ok) {
25      throw new Error(`LearnWorlds API error: ${response.status} ${response.statusText}`);
26    }
27
28    const data = await response.json();
29    courses.push(...(data.data ?? []));
30    totalPages = data.meta?.totalPages ?? 1;
31    page++;
32  } while (page <= totalPages);
33
34  return courses;
35}
36
37export async function GET(request: NextRequest) {
38  if (!LW_SCHOOL || !LW_API_KEY) {
39    return NextResponse.json(
40      { error: 'LearnWorlds is not configured' },
41      { status: 500 }
42    );
43  }
44
45  try {
46    const courses = await fetchAllCourses();
47    return NextResponse.json({ courses }, { status: 200 });
48  } catch (error) {
49    const message = error instanceof Error ? error.message : 'Unknown error';
50    console.error('LearnWorlds courses fetch failed:', message);
51    return NextResponse.json(
52      { error: 'Failed to fetch courses', details: message },
53      { status: 500 }
54    );
55  }
56}
57
58// app/api/learnworlds/enrollments/route.ts
59// GET /api/learnworlds/enrollments?userId=USER_ID
60export async function GETEnrollments(request: NextRequest) {
61  const { searchParams } = new URL(request.url);
62  const userId = searchParams.get('userId');
63
64  if (!userId) {
65    return NextResponse.json({ error: 'userId is required' }, { status: 400 });
66  }
67
68  const url = `https://${LW_SCHOOL}.learnworlds.com/v2/users/${userId}/enrollments`;
69  const response = await fetch(url, { headers: getLearnWorldsHeaders() });
70
71  if (!response.ok) {
72    return NextResponse.json(
73      { error: 'Failed to fetch enrollments' },
74      { status: response.status }
75    );
76  }
77
78  const data = await response.json();
79  return NextResponse.json({ enrollments: data.data ?? [] });
80}

Push your code to GitHub and configure LearnWorlds credentials in Vercel. Open the Vercel Dashboard, select your project, and navigate to Settings → Environment Variables. Add LEARNWORLDS_SCHOOL_DOMAIN with your school's subdomain only — for example, if your school URL is yourschool.learnworlds.com, the value should be 'yourschool' (without '.learnworlds.com'). Add LEARNWORLDS_API_KEY with your API key from LearnWorlds Dashboard → Settings → API Access. Neither variable should have the NEXT_PUBLIC_ prefix — the school domain and API key are server-side values used only in your API routes. After saving both variables, trigger a redeployment from Vercel's Deployments tab. After deployment, visit your deployed app's course catalog page and verify that real course data from LearnWorlds appears in the cards. If courses do not load, check the Vercel function logs in Vercel Dashboard → Functions → select your API route → Logs to see the specific error from the LearnWorlds API. For complex integrations requiring enrollment management and user authentication, RapidDev's team can help wire up the full student authentication flow between your Vercel app and LearnWorlds.