How to Integrate Bolt.new with Codecademy

1// lib/codecademy-courses.ts
2// Manually maintained list of Codecademy courses
3// since Codecademy has no public API
4export interface CodecademyCourse {
5  name: string;
6  slug: string;
7  url: string;
8  description: string;
9  estimatedHours: number;
10  level: 'Beginner' | 'Intermediate' | 'Advanced';
11  topics: string[];
12  isPro: boolean;
13}
14
15export const CODECADEMY_COURSES: CodecademyCourse[] = [
16  {
17    name: 'Learn Python 3',
18    slug: 'learn-python-3',
19    url: 'https://www.codecademy.com/learn/learn-python-3',
20    description: 'Learn Python syntax, data structures, and object-oriented programming.',
21    estimatedHours: 25,
22    level: 'Beginner',
23    topics: ['Python', 'Programming Fundamentals'],
24    isPro: false,
25  },
26  {
27    name: 'Learn JavaScript',
28    slug: 'introduction-to-javascript',
29    url: 'https://www.codecademy.com/learn/introduction-to-javascript',
30    description: 'Master JavaScript fundamentals including ES6+ features and DOM manipulation.',
31    estimatedHours: 15,
32    level: 'Beginner',
33    topics: ['JavaScript', 'Web Development'],
34    isPro: false,
35  },
36];

1// app/courses/page.tsx (excerpt)
2'use client';
3
4import { useState, useEffect } from 'react';
5import { CODECADEMY_COURSES, type CodecademyCourse } from '@/lib/codecademy-courses';
6
7const LEVEL_COLORS = {
8  Beginner: 'bg-green-100 text-green-800',
9  Intermediate: 'bg-yellow-100 text-yellow-800',
10  Advanced: 'bg-red-100 text-red-800',
11} as const;
12
13export default function CoursesPage() {
14  const [completed, setCompleted] = useState<string[]>([]);
15  const [filter, setFilter] = useState<string>('All');
16
17  useEffect(() => {
18    const stored = localStorage.getItem('completed-courses');
19    if (stored) setCompleted(JSON.parse(stored));
20  }, []);
21
22  const toggleComplete = (slug: string) => {
23    const updated = completed.includes(slug)
24      ? completed.filter((s) => s !== slug)
25      : [...completed, slug];
26    setCompleted(updated);
27    localStorage.setItem('completed-courses', JSON.stringify(updated));
28  };
29
30  const filtered = filter === 'All'
31    ? CODECADEMY_COURSES
32    : CODECADEMY_COURSES.filter((c) => c.level === filter || c.topics.includes(filter));
33
34  return (
35    <div className="max-w-6xl mx-auto px-4 py-12">
36      <h1 className="text-3xl font-bold mb-2">Codecademy Learning Portal</h1>
37      <p className="text-gray-500 mb-6">
38        {completed.length} of {CODECADEMY_COURSES.length} courses completed
39      </p>
40      <div className="w-full bg-gray-200 rounded-full h-2 mb-8">
41        <div
42          className="bg-blue-600 h-2 rounded-full transition-all"
43          style={{ width: `${(completed.length / CODECADEMY_COURSES.length) * 100}%` }}
44        />
45      </div>
46      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
47        {filtered.map((course: CodecademyCourse) => (
48          <div key={course.slug} className="bg-white border rounded-xl p-5 shadow-sm">
49            <div className="flex justify-between items-start mb-3">
50              <span className={`text-xs font-medium px-2 py-1 rounded-full ${LEVEL_COLORS[course.level]}`}>
51                {course.level}
52              </span>
53              <button onClick={() => toggleComplete(course.slug)} className="text-lg">
54                {completed.includes(course.slug) ? '✅' : '⬜'}
55              </button>
56            </div>
57            <h3 className="font-semibold text-gray-900 mb-2">{course.name}</h3>
58            <p className="text-sm text-gray-500 mb-4 line-clamp-2">{course.description}</p>
59            <div className="flex justify-between items-center">
60              <span className="text-xs text-gray-400">{course.estimatedHours}h</span>
61              <a
62                href={course.url}
63                target="_blank"
64                rel="noopener noreferrer"
65                className="text-sm font-medium text-blue-600 hover:text-blue-800"
66              >
67                Start Learning →
68              </a>
69            </div>
70          </div>
71        ))}
72      </div>
73    </div>
74  );
75}

1// app/api/teachable/courses/route.ts
2import { NextResponse } from 'next/server';
3
4interface TeachableCourse {
5  id: number;
6  name: string;
7  heading: string;
8  description: string;
9  image_url: string | null;
10  url: string;
11  is_published: boolean;
12  price: number;
13  currency_code: string;
14}
15
16export async function GET() {
17  const apiKey = process.env.TEACHABLE_API_KEY;
18  if (!apiKey) {
19    return NextResponse.json({ error: 'TEACHABLE_API_KEY not configured' }, { status: 500 });
20  }
21
22  try {
23    const response = await fetch('https://developers.teachable.com/v1/courses', {
24      headers: {
25        apiKey,
26        'Accept': 'application/json',
27      },
28    });
29
30    if (!response.ok) {
31      return NextResponse.json(
32        { error: `Teachable API error: ${response.status}` },
33        { status: response.status }
34      );
35    }
36
37    const data = await response.json();
38    const courses: TeachableCourse[] = data.courses || [];
39
40    const published = courses
41      .filter((c) => c.is_published)
42      .map((c) => ({
43        id: c.id,
44        name: c.name,
45        description: c.heading || c.description,
46        imageUrl: c.image_url,
47        url: c.url,
48        price: c.price,
49        currency: c.currency_code,
50      }));
51
52    return NextResponse.json({ courses: published });
53  } catch (error) {
54    const message = error instanceof Error ? error.message : 'Unknown error';
55    return NextResponse.json({ error: message }, { status: 500 });
56  }
57}

1// app/api/progress/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { createClient } from '@supabase/supabase-js';
4
5const supabase = createClient(
6  process.env.NEXT_PUBLIC_SUPABASE_URL!,
7  process.env.SUPABASE_SERVICE_ROLE_KEY!
8);
9
10export async function GET(request: NextRequest) {
11  const userId = new URL(request.url).searchParams.get('userId');
12  if (!userId) return NextResponse.json({ error: 'userId required' }, { status: 400 });
13
14  const { data, error } = await supabase
15    .from('user_progress')
16    .select('course_slug, platform, completed_at')
17    .eq('user_id', userId);
18
19  if (error) return NextResponse.json({ error: error.message }, { status: 500 });
20  return NextResponse.json({ progress: data });
21}
22
23export async function POST(request: Request) {
24  const { userId, courseSlug, platform } = await request.json();
25
26  const { error } = await supabase.from('user_progress').upsert(
27    { user_id: userId, course_slug: courseSlug, platform, completed_at: new Date().toISOString() },
28    { onConflict: 'user_id,course_slug' }
29  );
30
31  if (error) return NextResponse.json({ error: error.message }, { status: 500 });
32  return NextResponse.json({ success: true });
33}