How to Integrate Bolt.new with Skillshare

1// Three paths for Skillshare-related features in Bolt.new:
2//
3// PATH 1: Skillshare Affiliate Links (15 minutes)
4// - Join: https://www.skillshare.com/affiliates
5// - Get your affiliate tag (e.g., ?via=yourtag)
6// - Append to any Skillshare class URL
7// - Example: https://www.skillshare.com/classes/class-name/123456789?via=yourtag
8//
9// PATH 2: Custom Course Platform (1-2 hours)
10// - Supabase: courses, lessons, enrollments tables
11// - Video: YouTube embed (free) or Vimeo API ($7/mo)
12// - Full control, no third-party dependency
13//
14// PATH 3: Teachable API (30 minutes)
15// - API docs: https://developers.teachable.com
16// - Requires paid Teachable plan
17// - Standard REST API with Bearer token auth
18// - Works in Bolt WebContainer preview

1// components/SkillshareRecommendations.tsx
2'use client';
3
4import { useState } from 'react';
5
6interface Course {
7  id: string;
8  title: string;
9  instructor: string;
10  category: string;
11  durationMinutes: number;
12  level: 'Beginner' | 'Intermediate' | 'Advanced';
13  thumbnailUrl: string;
14  affiliateUrl: string;
15}
16
17const SAMPLE_COURSES: Course[] = [
18  {
19    id: '1',
20    title: 'Logo Design Fundamentals: Build a Strong Brand Identity',
21    instructor: 'Aaron Draplin',
22    category: 'Design',
23    durationMinutes: 47,
24    level: 'Beginner',
25    thumbnailUrl: 'https://placehold.co/400x225/6B5CE7/white?text=Logo+Design',
26    affiliateUrl: 'https://www.skillshare.com/classes/logo-design/123?via=yourtag',
27  },
28  {
29    id: '2',
30    title: 'Portrait Photography: Natural Light Techniques',
31    instructor: 'Lisa Olivieri',
32    category: 'Photography',
33    durationMinutes: 62,
34    level: 'Intermediate',
35    thumbnailUrl: 'https://placehold.co/400x225/2D9CDB/white?text=Photography',
36    affiliateUrl: 'https://www.skillshare.com/classes/portrait-photography/456?via=yourtag',
37  },
38];
39
40const CATEGORIES = ['All', 'Design', 'Photography', 'Business', 'Video'];
41
42const LEVEL_COLORS = {
43  Beginner: 'bg-green-100 text-green-700',
44  Intermediate: 'bg-yellow-100 text-yellow-700',
45  Advanced: 'bg-red-100 text-red-700',
46};
47
48export function SkillshareRecommendations() {
49  const [activeCategory, setActiveCategory] = useState('All');
50
51  const filtered = activeCategory === 'All'
52    ? SAMPLE_COURSES
53    : SAMPLE_COURSES.filter(c => c.category === activeCategory);
54
55  return (
56    <section className="py-12 px-4 max-w-6xl mx-auto">
57      <h2 className="text-2xl font-bold mb-2">Learn Creative Skills on Skillshare</h2>
58      <p className="text-gray-500 mb-6">Curated classes from top instructors</p>
59
60      <div className="flex gap-2 mb-8 flex-wrap">
61        {CATEGORIES.map(cat => (
62          <button
63            key={cat}
64            onClick={() => setActiveCategory(cat)}
65            className={`px-4 py-1.5 rounded-full text-sm font-medium transition-colors ${
66              activeCategory === cat
67                ? 'bg-[#00FF84] text-black'
68                : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
69            }`}
70          >
71            {cat}
72          </button>
73        ))}
74      </div>
75
76      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
77        {filtered.map(course => (
78          <div key={course.id} className="bg-white rounded-xl border border-gray-200 overflow-hidden hover:shadow-md transition-shadow">
79            <img src={course.thumbnailUrl} alt={course.title} className="w-full aspect-video object-cover" />
80            <div className="p-4">
81              <div className="flex items-center gap-2 mb-2">
82                <span className="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded">{course.category}</span>
83                <span className={`text-xs px-2 py-0.5 rounded ${LEVEL_COLORS[course.level]}`}>{course.level}</span>
84              </div>
85              <h3 className="font-semibold text-sm mb-1 line-clamp-2">{course.title}</h3>
86              <p className="text-xs text-gray-500 mb-1">{course.instructor}</p>
87              <p className="text-xs text-gray-400 mb-4">{course.durationMinutes} min</p>
88              <a
89                href={course.affiliateUrl}
90                target="_blank"
91                rel="noopener noreferrer"
92                className="block text-center bg-[#00FF84] text-black font-medium text-sm py-2 rounded-lg hover:bg-[#00e676] transition-colors"
93              >
94                Watch on Skillshare
95              </a>
96            </div>
97          </div>
98        ))}
99      </div>
100    </section>
101  );
102}

1// lib/supabase-course.ts
2import { createClient } from '@supabase/supabase-js';
3
4const supabase = createClient(
5  process.env.NEXT_PUBLIC_SUPABASE_URL!,
6  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
7);
8
9export interface Course {
10  id: string;
11  title: string;
12  slug: string;
13  description: string;
14  instructor_name: string;
15  thumbnail_url: string;
16  price_cents: number;
17  category: string;
18}
19
20export interface Lesson {
21  id: string;
22  course_id: string;
23  title: string;
24  video_url: string;
25  duration_seconds: number;
26  order_index: number;
27}
28
29export async function getCourses() {
30  const { data, error } = await supabase
31    .from('courses')
32    .select('*')
33    .order('created_at', { ascending: false });
34  if (error) throw error;
35  return data as Course[];
36}
37
38export async function getCourseLessons(courseId: string) {
39  const { data, error } = await supabase
40    .from('lessons')
41    .select('*')
42    .eq('course_id', courseId)
43    .order('order_index');
44  if (error) throw error;
45  return data as Lesson[];
46}
47
48export async function getEnrollment(userId: string, courseId: string) {
49  const { data, error } = await supabase
50    .from('enrollments')
51    .select('*')
52    .eq('user_id', userId)
53    .eq('course_id', courseId)
54    .single();
55  if (error && error.code !== 'PGRST116') throw error;
56  return data;
57}
58
59export async function markLessonComplete(userId: string, lessonId: string) {
60  const { error } = await supabase
61    .from('lesson_completions')
62    .upsert({ user_id: userId, lesson_id: lessonId, completed_at: new Date().toISOString() });
63  if (error) throw error;
64}
65
66export async function getCourseProgress(userId: string, courseId: string): Promise<number> {
67  const lessons = await getCourseLessons(courseId);
68  if (lessons.length === 0) return 0;
69
70  const { count } = await supabase
71    .from('lesson_completions')
72    .select('id', { count: 'exact' })
73    .eq('user_id', userId)
74    .in('lesson_id', lessons.map(l => l.id));
75
76  return Math.round(((count || 0) / lessons.length) * 100);
77}

1# netlify.toml
2[build]
3  command = "npm run build"
4  publish = ".next"
5
6[build.environment]
7  NODE_VERSION = "20"
8
9[[plugins]]
10  package = "@netlify/plugin-nextjs"
11
12# Redirect all 404s to index for client-side routing
13[[redirects]]
14  from = "/*"
15  to = "/index.html"
16  status = "200"
17
18# Cache static assets
19[[headers]]
20  for = "/_next/static/*"
21  [headers.values]
22    Cache-Control = "public, max-age=31536000, immutable"