# How to Integrate Bolt.new with Codecademy - Tool: Bolt.new - Difficulty: Intermediate - Time required: 20 minutes - Last updated: April 2026 ## TL;DR Codecademy has no public API. In Bolt.new you cannot directly pull Codecademy course data or track user progress. Instead, build a learning portal that embeds Codecademy exercises via iframe, links out to specific courses using affiliate or direct URLs, and uses alternative LMS APIs like Canvas, Teachable, or Thinkific for custom course management. This guide covers honest workarounds and proper learning platform API alternatives. ## Build a Learning Portal with Codecademy Links in Bolt.new Codecademy is one of the most popular coding education platforms, but it does not offer a public API for developers. There is no official way to pull course catalog data, track learner progress, create courses, or manage enrollments programmatically through Codecademy. This is a deliberate business decision — Codecademy's value lies in keeping learners on its platform, not enabling third-party integrations. This does not mean you cannot build something useful with Codecademy in Bolt.new. The most practical approach is to build a curated learning portal: a React application that organizes Codecademy courses into custom learning paths, tracks which external courses a user has bookmarked or completed (stored in your own database), and links learners directly to the appropriate Codecademy URL. Codecademy course URLs follow a consistent pattern (https://www.codecademy.com/learn/course-slug) that you can hardcode or maintain in a JSON configuration file. Codecademy also has an affiliate program through Impact.com that gives you tracked referral links and a commission on new subscriptions. For anything requiring genuine API integration — enrolling users, tracking completion, issuing certificates, or managing course content — you need to use a platform that provides a developer API. Teachable, Thinkific, Canvas LMS, and LearnWorlds all offer REST APIs with authentication, course management, and learner progress endpoints. This guide covers building a Codecademy-linked learning portal and integrating a proper LMS API as the backend for custom course content. ## Before you start - A Bolt.new account with a new Next.js project open - A list of Codecademy course URLs you want to include in your portal (found by browsing Codecademy and copying course page URLs) - Optional: Codecademy affiliate account via Impact.com for tracked referral links - Optional: Teachable, Thinkific, or Canvas LMS account with API access if you need actual course management functionality - Optional: A Supabase project for storing user progress and course assignments ## Step-by-step guide ### 1. Understand Why Codecademy Has No Public API Before writing any code, it is important to understand the limitations clearly. Codecademy does not have a public API and has not announced plans to create one. This means you cannot programmatically fetch Codecademy course listings, enroll users in Codecademy courses, track whether a user has completed a Codecademy lesson, retrieve a user's Codecademy progress or certificate, or access Codecademy exercise content. Attempting to scrape Codecademy's website violates their Terms of Service and is not a stable solution since the HTML structure changes without notice. Codecademy does operate an affiliate program through Impact.com (formerly Impact Radius) that allows you to earn commissions on new Codecademy Pro subscriptions when users click your referral links. This is the only sanctioned programmatic interaction with Codecademy as of March 2026. Given these constraints, there are two valid approaches: (1) build a curated portal that maintains Codecademy URLs in your own configuration and lets users link out to Codecademy directly, or (2) pivot to a learning platform that provides a proper API — Teachable, Thinkific, Canvas LMS, or LearnWorlds are the most developer-friendly options. The rest of this guide covers both approaches. ``` // lib/codecademy-courses.ts // Manually maintained list of Codecademy courses // since Codecademy has no public API export interface CodecademyCourse { name: string; slug: string; url: string; description: string; estimatedHours: number; level: 'Beginner' | 'Intermediate' | 'Advanced'; topics: string[]; isPro: boolean; } export const CODECADEMY_COURSES: CodecademyCourse[] = [ { name: 'Learn Python 3', slug: 'learn-python-3', url: 'https://www.codecademy.com/learn/learn-python-3', description: 'Learn Python syntax, data structures, and object-oriented programming.', estimatedHours: 25, level: 'Beginner', topics: ['Python', 'Programming Fundamentals'], isPro: false, }, { name: 'Learn JavaScript', slug: 'introduction-to-javascript', url: 'https://www.codecademy.com/learn/introduction-to-javascript', description: 'Master JavaScript fundamentals including ES6+ features and DOM manipulation.', estimatedHours: 15, level: 'Beginner', topics: ['JavaScript', 'Web Development'], isPro: false, }, ]; ``` **Expected result:** You have a clear understanding that Codecademy has no API and a TypeScript configuration file with manually maintained course data ready for your portal. ### 2. Build the Curated Learning Portal With a configuration file of Codecademy courses, prompt Bolt to build the learning portal UI. The portal reads from your static configuration — no API calls required for Codecademy content — and stores user progress (completed courses, bookmarks) in localStorage or a database. The UI shows each course with its name, description, skill level, estimated hours, and a button that opens the Codecademy URL in a new tab. For the affiliate program: sign up at Codecademy's page on Impact.com and replace the standard Codecademy URLs with your affiliate tracking links. Affiliate links look like https://www.codecademy.com/learn/course-slug?utm_source=affiliate&utm_medium=referral&utm_campaign=your-id. You can store these as the url field in your configuration file. Adding rel='noopener noreferrer' and target='_blank' to all outbound Codecademy links is important both for security and correct tab behavior. The portal can also include filtering by topic, skill level, and estimated time, and a learning path grouping that organizes courses into logical sequences. Since all Codecademy data is static, this is purely a frontend application — no API routes or server-side code needed for the basic portal. ``` // app/courses/page.tsx (excerpt) 'use client'; import { useState, useEffect } from 'react'; import { CODECADEMY_COURSES, type CodecademyCourse } from '@/lib/codecademy-courses'; const LEVEL_COLORS = { Beginner: 'bg-green-100 text-green-800', Intermediate: 'bg-yellow-100 text-yellow-800', Advanced: 'bg-red-100 text-red-800', } as const; export default function CoursesPage() { const [completed, setCompleted] = useState([]); const [filter, setFilter] = useState('All'); useEffect(() => { const stored = localStorage.getItem('completed-courses'); if (stored) setCompleted(JSON.parse(stored)); }, []); const toggleComplete = (slug: string) => { const updated = completed.includes(slug) ? completed.filter((s) => s !== slug) : [...completed, slug]; setCompleted(updated); localStorage.setItem('completed-courses', JSON.stringify(updated)); }; const filtered = filter === 'All' ? CODECADEMY_COURSES : CODECADEMY_COURSES.filter((c) => c.level === filter || c.topics.includes(filter)); return (

Codecademy Learning Portal

{completed.length} of {CODECADEMY_COURSES.length} courses completed

{filtered.map((course: CodecademyCourse) => (
{course.level}

{course.name}

{course.description}

{course.estimatedHours}h Start Learning →
))}
); } ``` **Expected result:** A learning portal page renders Codecademy course cards with progress tracking, filtering, and outbound links to Codecademy. No API calls are made — all data is from the local configuration file. ### 3. Integrate a Real LMS API: Teachable as the Example If your project requires actual course management — creating courses, enrolling users, tracking completion, issuing certificates — you need an LMS platform with a developer API. Teachable is one of the most popular and developer-friendly options. Its REST API supports fetching course catalogs, enrolling students, tracking progress, and managing users. Thinkific and LearnWorlds offer similar APIs; Canvas LMS is the right choice for educational institutions. To use the Teachable API: log in to your Teachable school, go to Settings → General → API Keys → Generate a new API key. Store it as TEACHABLE_API_KEY in your .env file. The Teachable API base URL is https://developers.teachable.com/v1 and all requests require an apiKey header. Teachable's course endpoint returns full course data including name, description, image URL, price, and enrollment status. This is the kind of dynamic, real-time data that Codecademy cannot provide. Build the Teachable API route in Bolt to proxy these calls server-side, then display the live course catalog in your portal alongside the hardcoded Codecademy links. This hybrid approach — live data from a platform you control, plus curated links to Codecademy for supplementary material — is a pragmatic pattern for learning portals. ``` // app/api/teachable/courses/route.ts import { NextResponse } from 'next/server'; interface TeachableCourse { id: number; name: string; heading: string; description: string; image_url: string | null; url: string; is_published: boolean; price: number; currency_code: string; } export async function GET() { const apiKey = process.env.TEACHABLE_API_KEY; if (!apiKey) { return NextResponse.json({ error: 'TEACHABLE_API_KEY not configured' }, { status: 500 }); } try { const response = await fetch('https://developers.teachable.com/v1/courses', { headers: { apiKey, 'Accept': 'application/json', }, }); if (!response.ok) { return NextResponse.json( { error: `Teachable API error: ${response.status}` }, { status: response.status } ); } const data = await response.json(); const courses: TeachableCourse[] = data.courses || []; const published = courses .filter((c) => c.is_published) .map((c) => ({ id: c.id, name: c.name, description: c.heading || c.description, imageUrl: c.image_url, url: c.url, price: c.price, currency: c.currency_code, })); return NextResponse.json({ courses: published }); } catch (error) { const message = error instanceof Error ? error.message : 'Unknown error'; return NextResponse.json({ error: message }, { status: 500 }); } } ``` **Expected result:** The /api/teachable/courses route returns live course data from your Teachable school. The portal shows both your own Teachable courses and curated Codecademy links in a unified interface. ### 4. Deploy to Netlify with Environment Variables The Codecademy portal itself has no server-side API calls — it reads from a static configuration file — so it works identically in Bolt's WebContainer preview and in production. If you added Teachable or another LMS API integration, those API routes make outbound calls that also work fine in the preview. When you are ready to deploy, connect Bolt to Netlify through Settings → Applications → Netlify → Connect. After deployment, add any LMS API keys (TEACHABLE_API_KEY, etc.) to your Netlify dashboard under Site Configuration → Environment Variables. Since the Codecademy portal relies on localStorage for progress tracking, note that progress data is stored per-browser and does not sync across devices. If you want cross-device progress sync, add a Supabase database with a simple table tracking user_id and completed_course_slug pairs. An important WebContainer note that applies here: if you implement any webhook-receiving features (for example, a Teachable webhook that notifies your app when a student completes a course), those webhooks cannot reach the Bolt preview URL. Teachable sends course completion webhooks to a URL you configure in Teachable Settings → Webhooks. Register your deployed Netlify URL for any webhook endpoints, not the Bolt preview URL. ``` // app/api/progress/route.ts import { NextRequest, NextResponse } from 'next/server'; import { createClient } from '@supabase/supabase-js'; const supabase = createClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.SUPABASE_SERVICE_ROLE_KEY! ); export async function GET(request: NextRequest) { const userId = new URL(request.url).searchParams.get('userId'); if (!userId) return NextResponse.json({ error: 'userId required' }, { status: 400 }); const { data, error } = await supabase .from('user_progress') .select('course_slug, platform, completed_at') .eq('user_id', userId); if (error) return NextResponse.json({ error: error.message }, { status: 500 }); return NextResponse.json({ progress: data }); } export async function POST(request: Request) { const { userId, courseSlug, platform } = await request.json(); const { error } = await supabase.from('user_progress').upsert( { user_id: userId, course_slug: courseSlug, platform, completed_at: new Date().toISOString() }, { onConflict: 'user_id,course_slug' } ); if (error) return NextResponse.json({ error: error.message }, { status: 500 }); return NextResponse.json({ success: true }); } ``` **Expected result:** Your learning portal is deployed on Netlify. User progress syncs across devices via the Supabase database. Teachable API keys are configured in Netlify's environment variables. ## Best practices - Be transparent with users that your portal links to Codecademy but is not affiliated with or endorsed by Codecademy unless you have a formal partnership - Keep your Codecademy course URL configuration in a single file (lib/codecademy-courses.ts) so future URL changes only require one edit - Join the Codecademy affiliate program on Impact.com to earn commissions on referrals rather than sending raw links - For any real course management needs, use a platform with a proper API — Teachable, Thinkific, or Canvas LMS are all well-documented options - Store user progress server-side in a database rather than only in localStorage so progress is not lost when users clear browser data - Clearly distinguish between content you host and manage versus external content on third-party platforms to set correct user expectations - Add UTM parameters to your Codecademy outbound links even without the affiliate program to track which paths generate the most engagement in your analytics ## Use cases ### Curated Learning Path Portal Build a React portal that organizes Codecademy courses into custom learning paths for specific job roles (e.g., 'Full Stack Developer', 'Data Analyst'). Users browse learning paths, mark courses as completed in local state or a simple database, and click through to Codecademy for the actual lessons. Progress tracking stays in your app. Prompt example: ``` Build a learning path portal in Next.js. Create a JSON config file at lib/learning-paths.ts that defines 3 learning paths (Web Developer, Data Scientist, DevOps Engineer), each with 4-6 Codecademy courses including course name, URL, estimated hours, skill level, and topic tags. Build a page at app/learning-paths/page.tsx showing path cards with progress tracking stored in localStorage. Each course shows a checkbox and an external link to the Codecademy URL. Use Tailwind CSS with a clean modern design. ``` ### Company Upskilling Dashboard Build an internal dashboard for a company's engineering team that curates recommended Codecademy courses alongside custom internal training materials. Managers can see which team members have completed recommended courses; employees see their personalized curriculum. Codecademy links are maintained in a database; completion is self-reported. Prompt example: ``` Create an employee learning dashboard in Next.js. Build a Supabase database table called 'course_assignments' with fields: employee_id, course_name, course_url, platform (e.g. 'Codecademy'), completed boolean, completed_at timestamp. Create API routes to assign courses to employees, mark completion, and fetch an employee's assigned courses. Build a dashboard page showing assigned courses grouped by platform with completion checkboxes and direct links to the external course URLs. ``` ### Teachable Course Catalog as Codecademy Alternative For users who need actual API access to course data, enrollment, and progress, integrate Teachable's REST API as the course backend. Build a course catalog in Bolt.new that fetches live Teachable courses, handles enrollment via the API, and tracks learner progress — all the functionality Codecademy does not expose. Prompt example: ``` Build a course catalog in Next.js backed by the Teachable API. Create an API route at app/api/teachable/courses/route.ts that fetches all published courses from the Teachable REST API using process.env.TEACHABLE_API_KEY in the Authorization header. Return course name, description, image URL, price, and enrollment URL. Display them in a filterable grid. Add a second route at app/api/teachable/enroll/route.ts that accepts a user email and course ID and creates an enrollment via the Teachable API. ``` ## Troubleshooting ### No Codecademy API response — no endpoint found or 404 errors when trying to fetch course data Cause: Codecademy intentionally does not expose a public API. Any attempt to query Codecademy URLs as API endpoints will fail. Solution: Maintain Codecademy course data manually in a TypeScript configuration file as shown in this guide. For dynamic course data needs, integrate a platform with a real API such as Teachable, Thinkific, or Canvas LMS. There is no workaround for Codecademy's lack of a public API. ### Teachable API returns 401 Unauthorized Cause: The TEACHABLE_API_KEY environment variable is missing, set incorrectly, or the API key has been revoked. Solution: Go to Teachable Admin → Settings → General → scroll to API Keys section. Generate a new API key and copy it. In Bolt, update your .env file with TEACHABLE_API_KEY=your_key_here. After deploying, add the same key to Netlify's environment variables. Ensure the API key is passed in the 'apiKey' header (not 'Authorization'). ``` // Correct header for Teachable API headers: { apiKey: process.env.TEACHABLE_API_KEY!, 'Accept': 'application/json', } ``` ### Progress tracking resets between browser sessions Cause: The course portal is using in-component state (useState) rather than localStorage or a database for persisting completed course slugs. Solution: Use useEffect to read from and write to localStorage as shown in the code example. For cross-device persistence, add the Supabase progress tracking API routes from Step 4 and replace localStorage reads/writes with API calls. ``` // Read from localStorage on mount useEffect(() => { const stored = localStorage.getItem('completed-courses'); if (stored) setCompleted(JSON.parse(stored)); }, []); // Write to localStorage whenever completed changes useEffect(() => { localStorage.setItem('completed-courses', JSON.stringify(completed)); }, [completed]); ``` ## Frequently asked questions ### Does Codecademy have a public API? No. As of March 2026, Codecademy does not offer a public API for developers. There is no way to programmatically fetch course data, track user progress, or manage enrollments via Codecademy. The only official programmatic integration is the affiliate program through Impact.com for tracked referral links. ### Can I embed Codecademy exercises in my Bolt.new app? Codecademy does not support embedding exercises via iframe in third-party applications. Their interactive coding environment is proprietary and not licensed for embedding. You can link to specific Codecademy course pages using direct URLs, but the exercise interface itself cannot be embedded without a formal partnership agreement with Codecademy. ### What is the best alternative to Codecademy that works with Bolt.new? For course management with a full REST API, Teachable and Thinkific are the most developer-friendly platforms. For institutional educational settings, Canvas LMS provides comprehensive APIs. LearnWorlds is another strong option. All of these allow you to create courses, enroll students programmatically, and track completion — capabilities Codecademy does not expose. ### How do I connect Bolt.new to a learning platform for building a course marketplace? Use a platform with a proper API. Teachable's REST API supports fetching course catalogs, enrolling students, and tracking progress. Build a Next.js API route in Bolt.new that proxies Teachable API calls using your API key stored in process.env.TEACHABLE_API_KEY. The API route keeps your credentials server-side while the React frontend displays live course data. Outbound API calls work in Bolt's WebContainer during development. ### Can I build a learning platform like Codecademy in Bolt.new? Yes — you can build a custom learning platform with interactive lessons, progress tracking, and user accounts entirely in Bolt.new. Use Supabase for the database and authentication, store course content as structured JSON or markdown, and build the interactive lesson UI in React. For code execution challenges, consider integrating a third-party code execution API. This gives you full control over the learning experience, unlike linking to Codecademy. --- Source: https://www.rapidevelopers.com/bolt-ai-integrations/codecademy © RapidDev — https://www.rapidevelopers.com/bolt-ai-integrations/codecademy