How to Integrate Codecademy with V0

Start by prompting V0 to build the front-end interface for your learning application. Since Codecademy has no API to pull course data from, you will be hardcoding or storing course information in your own database. Think of the UI as a structured course navigator: a list of learning modules, each with a title, description, and a button that opens the corresponding Codecademy course URL in a new browser tab. V0 is excellent at generating this kind of dashboard layout. Describe the UI structure you need in your V0 chat — for example, a sidebar with course categories and a main content area showing lesson cards. Each card should display the lesson name, estimated time, a difficulty badge, and two actions: an external link to the Codecademy course and a way to mark the lesson as complete. For the course link buttons, tell V0 to use target='_blank' rel='noopener noreferrer' on anchor tags that open external URLs. This opens Codecademy in a new tab while keeping your app open. Codecademy uses predictable URL patterns like codecademy.com/learn/introduction-to-javascript for courses and codecademy.com/paths/web-development for learning paths — you can store these URLs in your database or hardcode them in a JSON file in your project. After V0 generates the UI, review the component for any API calls it expects. Typically it will expect a data endpoint like /api/courses to fetch the course list and /api/progress to get and update completion status. Note these endpoints — you will create them in the next steps.

With no Codecademy API to call, you need to store your own course data and track progress in your own database. Create two Next.js API routes: one to serve course data (which can be static or database-backed) and one to read and write progress records. The course data route at app/api/courses/route.ts can return a hardcoded array of course objects on GET requests. Each course object should include a unique slug, the course title, the Codecademy URL, description, difficulty, and estimated hours. This avoids a database dependency for static course catalogs. If you want the course list to be editable, store it in Supabase or Neon instead and query it from this route. The progress route at app/api/progress/route.ts is more important — it reads and writes which courses a user has completed. On GET requests, it returns a list of completed course slugs for the current user. On POST requests, it marks a course as complete or incomplete. You will need a users table and a progress table in your database. The user can be identified by a session token if you add authentication, or by a simple browser-stored user ID for a prototype. For authentication, you can use Clerk (which V0 integrates well with) or build a simple email-based identification. For the prototype stage, storing a user ID in localStorage and passing it as a header to your API routes is a fast way to test the flow before adding full auth. Remember to use process.env.DATABASE_URL (no NEXT_PUBLIC_ prefix) in your API routes — database credentials must stay server-side. Never expose your database connection string to the client.

1// app/api/courses/route.ts
2import { NextResponse } from 'next/server';
3
4const courses = [
5  {
6    slug: 'intro-javascript',
7    title: 'Introduction to JavaScript',
8    description: 'Learn the fundamentals of JavaScript programming language.',
9    difficulty: 'Beginner',
10    estimatedHours: 10,
11    category: 'JavaScript',
12    codecademyUrl: 'https://www.codecademy.com/learn/introduction-to-javascript',
13  },
14  {
15    slug: 'react-101',
16    title: 'Learn React',
17    description: 'Build interactive UIs with React components and hooks.',
18    difficulty: 'Intermediate',
19    estimatedHours: 20,
20    category: 'React',
21    codecademyUrl: 'https://www.codecademy.com/learn/react-101',
22  },
23  {
24    slug: 'learn-python',
25    title: 'Learn Python 3',
26    description: 'Start coding with Python, one of the most versatile languages.',
27    difficulty: 'Beginner',
28    estimatedHours: 25,
29    category: 'Python',
30    codecademyUrl: 'https://www.codecademy.com/learn/learn-python-3',
31  },
32];
33
34export async function GET() {
35  return NextResponse.json(courses);
36}

One of the most powerful things you can add to a coding learning app is an interactive code editor that lets users practice right in your app. Monaco Editor — the same editor used in VS Code — is available as an npm package called @monaco-editor/react and works perfectly in Next.js apps generated by V0. Install the package by adding @monaco-editor/react to your project's package.json and running npm install. This package is a React wrapper around Monaco that handles browser-only rendering automatically, which is important because Monaco is a client-side library that cannot run during server-side rendering. The Monaco editor component must be used inside a client component (with the 'use client' directive) and should be loaded dynamically to avoid SSR errors. When you import the Editor component from @monaco-editor/react, it handles lazy loading internally — but wrap the whole editor component with Next.js's dynamic import (dynamic(() => import('./CodeEditor'), { ssr: false })) as an extra safety measure. This prevents the 'window is not defined' error that commonly affects editor libraries in Next.js. Configure the editor with the language (javascript, python, typescript), a default value (starter code for the exercise), and a height. The editor's onChange prop gives you the current code value as a string, which you can store in React state and send to your code execution API when the user clicks Run. For code execution, the free Piston API (emkc.org/api/v2/piston) accepts code and language and returns output — no API key needed for basic usage. Create a Next.js API route at app/api/execute/route.ts that proxies requests to Piston, keeping the external call server-side.

1// app/api/execute/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4export async function POST(request: NextRequest) {
5  try {
6    const { code, language } = await request.json();
7
8    const response = await fetch('https://emkc.org/api/v2/piston/execute', {
9      method: 'POST',
10      headers: { 'Content-Type': 'application/json' },
11      body: JSON.stringify({
12        language: language || 'javascript',
13        version: '*',
14        files: [{ content: code }],
15      }),
16    });
17
18    if (!response.ok) {
19      return NextResponse.json(
20        { error: 'Code execution service unavailable' },
21        { status: 502 }
22      );
23    }
24
25    const data = await response.json();
26    return NextResponse.json({
27      output: data.run?.stdout || '',
28      error: data.run?.stderr || '',
29      exitCode: data.run?.code,
30    });
31  } catch (error) {
32    return NextResponse.json(
33      { error: 'Failed to execute code' },
34      { status: 500 }
35    );
36  }
37}

Your app needs database environment variables and optionally a base URL variable. Go to the Vercel Dashboard, open your project, click Settings in the top nav, then click Environment Variables in the left sidebar. If you are using Supabase for progress tracking, add NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY (both need the NEXT_PUBLIC_ prefix since the Supabase client-side library accesses them in the browser). Also add SUPABASE_SERVICE_ROLE_KEY without the prefix — this is for server-side operations that bypass Row Level Security, and it must never be exposed to the browser. If you are using Neon Postgres directly, add DATABASE_URL without any prefix — this is only used in server-side API routes via pg or @neondatabase/serverless. Neon's connection string includes username, password, host, and database — keep it strictly server-side. If you added a code execution API key (like a Judge0 RapidAPI key), add JUDGE0_API_KEY without the NEXT_PUBLIC_ prefix since the execution API call happens in your server-side route. For the NEXT_PUBLIC_BASE_URL variable, set it to your Vercel deployment URL (e.g., https://your-app.vercel.app). This is useful for generating absolute URLs in API responses and emails. After saving all environment variables, trigger a new Vercel deployment by pushing a commit to your GitHub repository. Go to the Vercel Dashboard → Deployments to watch the build and confirm it succeeds. Check the Function Logs to see that your API routes are executing without errors.