# How to Integrate Bolt.new with Skillshare

- Tool: Bolt.new
- Difficulty: Intermediate
- Time required: 20 minutes
- Last updated: April 2026

## TL;DR

Skillshare does not offer a public developer API. To add creative learning features to a Bolt.new app, build a custom course platform using Supabase with video hosting via YouTube or Vimeo, embed Skillshare class links using their affiliate program, or use Teachable's or Coursera's REST APIs for programmatic access to course content and enrollment data. The affiliate approach takes 15 minutes; a full custom platform takes about an hour.

## Adding Creative Learning Features to Your Bolt.new App

Skillshare is one of the most popular online learning platforms for creative professionals, with over 40,000 classes covering design, illustration, photography, video production, and business skills. However, unlike many SaaS platforms, Skillshare does not offer a public developer API. There is no way to programmatically query Skillshare's course catalog, manage enrollments, or retrieve student progress data through an official API. Their integration ecosystem is limited to an affiliate program that provides referral links and tracking.

For Bolt.new developers, this means integrating Skillshare directly into an application is not technically possible in the traditional sense. The practical options depend on what you are trying to build. If you want to recommend Skillshare courses from your app, the affiliate program lets you embed tracked links that redirect users to Skillshare — this takes about 15 minutes to set up. If you want to build a full learning experience (video lessons, quizzes, certificates, progress tracking), build it with Supabase and a video hosting provider like Vimeo or YouTube — you own the platform entirely. If you specifically need an API for an existing course catalog, Teachable and Coursera both offer REST APIs with standard authentication that work well with Bolt.new.

This guide covers all three approaches. The affiliate embed path is the simplest. The custom platform path is the most powerful. The Teachable API path is the middle ground — a real learning platform with developer access. All approaches work correctly in Bolt's WebContainer preview for development, and deploy to Netlify or Bolt Cloud without any special configuration.

## Before you start

- A Bolt.new account with a Next.js project open
- For affiliate approach: a Skillshare affiliate account at https://www.skillshare.com/affiliates (requires approval)
- For custom platform: a free Supabase account at https://supabase.com
- For Teachable integration: a Teachable account with API access (requires paid plan) — get API key at teachable.com → Settings → Integrations
- Basic familiarity with React components and Supabase

## Step-by-step guide

### 1. Understand Skillshare's API Situation and Choose Your Approach

Before investing time in an integration, it is important to understand the technical reality: Skillshare provides no public developer API. Their platform is closed to programmatic access. If you search the Skillshare website or developer resources, you will find an affiliate program for marketers and a Teams API for enterprise corporate training accounts, but neither provides general course catalog access or the ability to manage individual user enrollments for third-party applications.

Skillshare's Teams plan does have an SCIM-based API for enterprise single sign-on and user provisioning — but this is designed for corporate IT departments managing Skillshare subscriptions for employees, not for developers building learning applications. It cannot be used to embed course content or manage individual enrollments from a third-party app.

Given these constraints, the approach for your Bolt.new project depends on what you need to accomplish. If you want to direct users toward Skillshare content (recommend classes, point to specific teachers), the affiliate program is the right tool — you create trackable referral links and embed them as buttons or cards in your app. You earn a commission when new users subscribe to Skillshare through your link. If you need a complete learning platform with video, quizzes, progress tracking, and certificates, build it with Supabase and a video hosting service. If you specifically need programmatic course API access, Teachable is the closest Skillshare alternative that supports it. The rest of this guide shows you each approach in detail.

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

**Expected result:** You have decided which integration path fits your project — affiliate links for recommending content, custom Supabase platform for full ownership, or Teachable API for programmatic course management.

### 2. Implement Skillshare Affiliate Links in Your Bolt.new App

The Skillshare affiliate program lets you earn commissions by referring new subscribers to Skillshare from your app. After applying at skillshare.com/affiliates and being approved, you receive a unique affiliate tag that you append to any Skillshare URL as a query parameter (?via=yourtag). When a user who has never subscribed to Skillshare clicks your link and signs up, you receive a commission — typically $7-10 per trial.

For your Bolt.new app, this means you can create a curated course recommendation section where each course card links to the Skillshare class with your affiliate tag appended. You maintain a list of recommended courses (either hard-coded in your component or stored in a Supabase table for easy updating), including the course title, instructor, thumbnail URL, duration, and your affiliate-tagged Skillshare URL.

This approach requires no API calls, no server-side code, and no environment variables — it is purely frontend link embedding. The course cards can be styled however you like using Tailwind and shadcn/ui components. Adding a Supabase table to store the recommended courses makes them easy to update without redeploying your app. Since this approach uses only outbound links (no incoming connections), it works identically in Bolt's WebContainer preview and in production on Netlify or Bolt Cloud.

One important note on the thumbnail images: Skillshare class thumbnails change their CDN URLs over time. For reliable image display, either download the thumbnails and host them in Supabase Storage, or use Skillshare's class URL in a screenshot service. Alternatively, use your own designed course thumbnails for a more branded look.

```
// components/SkillshareRecommendations.tsx
'use client';

import { useState } from 'react';

interface Course {
  id: string;
  title: string;
  instructor: string;
  category: string;
  durationMinutes: number;
  level: 'Beginner' | 'Intermediate' | 'Advanced';
  thumbnailUrl: string;
  affiliateUrl: string;
}

const SAMPLE_COURSES: Course[] = [
  {
    id: '1',
    title: 'Logo Design Fundamentals: Build a Strong Brand Identity',
    instructor: 'Aaron Draplin',
    category: 'Design',
    durationMinutes: 47,
    level: 'Beginner',
    thumbnailUrl: 'https://placehold.co/400x225/6B5CE7/white?text=Logo+Design',
    affiliateUrl: 'https://www.skillshare.com/classes/logo-design/123?via=yourtag',
  },
  {
    id: '2',
    title: 'Portrait Photography: Natural Light Techniques',
    instructor: 'Lisa Olivieri',
    category: 'Photography',
    durationMinutes: 62,
    level: 'Intermediate',
    thumbnailUrl: 'https://placehold.co/400x225/2D9CDB/white?text=Photography',
    affiliateUrl: 'https://www.skillshare.com/classes/portrait-photography/456?via=yourtag',
  },
];

const CATEGORIES = ['All', 'Design', 'Photography', 'Business', 'Video'];

const LEVEL_COLORS = {
  Beginner: 'bg-green-100 text-green-700',
  Intermediate: 'bg-yellow-100 text-yellow-700',
  Advanced: 'bg-red-100 text-red-700',
};

export function SkillshareRecommendations() {
  const [activeCategory, setActiveCategory] = useState('All');

  const filtered = activeCategory === 'All'
    ? SAMPLE_COURSES
    : SAMPLE_COURSES.filter(c => c.category === activeCategory);

  return (
    <section className="py-12 px-4 max-w-6xl mx-auto">
      <h2 className="text-2xl font-bold mb-2">Learn Creative Skills on Skillshare</h2>
      <p className="text-gray-500 mb-6">Curated classes from top instructors</p>

      <div className="flex gap-2 mb-8 flex-wrap">
        {CATEGORIES.map(cat => (
          <button
            key={cat}
            onClick={() => setActiveCategory(cat)}
            className={`px-4 py-1.5 rounded-full text-sm font-medium transition-colors ${
              activeCategory === cat
                ? 'bg-[#00FF84] text-black'
                : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
            }`}
          >
            {cat}
          </button>
        ))}
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {filtered.map(course => (
          <div key={course.id} className="bg-white rounded-xl border border-gray-200 overflow-hidden hover:shadow-md transition-shadow">
            <img src={course.thumbnailUrl} alt={course.title} className="w-full aspect-video object-cover" />
            <div className="p-4">
              <div className="flex items-center gap-2 mb-2">
                <span className="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded">{course.category}</span>
                <span className={`text-xs px-2 py-0.5 rounded ${LEVEL_COLORS[course.level]}`}>{course.level}</span>
              </div>
              <h3 className="font-semibold text-sm mb-1 line-clamp-2">{course.title}</h3>
              <p className="text-xs text-gray-500 mb-1">{course.instructor}</p>
              <p className="text-xs text-gray-400 mb-4">{course.durationMinutes} min</p>
              <a
                href={course.affiliateUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="block text-center bg-[#00FF84] text-black font-medium text-sm py-2 rounded-lg hover:bg-[#00e676] transition-colors"
              >
                Watch on Skillshare
              </a>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}
```

**Expected result:** A responsive course recommendation grid appears in the Bolt preview with category filters. Each course card has a 'Watch on Skillshare' button that links to the affiliate URL. No API calls or environment variables are needed.

### 3. Build a Custom Course Platform with Supabase and Video Hosting

When you need a full learning experience with video lessons, quizzes, student progress tracking, and certificates, building your own platform with Supabase gives you complete control. This approach is more work upfront but gives you a Skillshare-quality experience without any dependency on a third-party learning platform.

The core data model consists of four tables in Supabase: courses (the top-level course with title, description, price, and thumbnail), lessons (individual video lessons within a course, with video URL, title, and order), enrollments (which users are enrolled in which courses and when they completed them), and lesson_completions (tracking which specific lessons a user has watched). All tables communicate with your Bolt.new app through Supabase's PostgREST HTTP API — this works in Bolt's WebContainer because it uses HTTPS, not raw TCP.

For video hosting, you have two good options. YouTube embedding is completely free: upload videos to a private or public YouTube channel, get the video ID from the URL, and embed using an iframe or the react-youtube package. The downside is YouTube branding and related video recommendations at the end. Vimeo's Starter plan ($7/month) provides clean embeds without YouTube branding, privacy controls per video, and a Vimeo API for managing your video library programmatically. For a professional course platform, Vimeo is worth the cost.

Build the course experience in three pages: the course catalog at /courses listing all available courses with thumbnail, title, instructor, and price; the course detail page at /courses/[slug] showing the full lesson list with locked/unlocked state based on enrollment; and the lesson player at /courses/[slug]/lessons/[id] with the video embed, lesson title, and a 'Mark as Complete' button that writes to lesson_completions in Supabase. Add progress calculation: count completed lessons / total lessons to show a progress bar on the course detail page. This can all be built in a single Bolt.new session and deployed to Netlify or Bolt Cloud within an hour.

```
// lib/supabase-course.ts
import { createClient } from '@supabase/supabase-js';

const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
);

export interface Course {
  id: string;
  title: string;
  slug: string;
  description: string;
  instructor_name: string;
  thumbnail_url: string;
  price_cents: number;
  category: string;
}

export interface Lesson {
  id: string;
  course_id: string;
  title: string;
  video_url: string;
  duration_seconds: number;
  order_index: number;
}

export async function getCourses() {
  const { data, error } = await supabase
    .from('courses')
    .select('*')
    .order('created_at', { ascending: false });
  if (error) throw error;
  return data as Course[];
}

export async function getCourseLessons(courseId: string) {
  const { data, error } = await supabase
    .from('lessons')
    .select('*')
    .eq('course_id', courseId)
    .order('order_index');
  if (error) throw error;
  return data as Lesson[];
}

export async function getEnrollment(userId: string, courseId: string) {
  const { data, error } = await supabase
    .from('enrollments')
    .select('*')
    .eq('user_id', userId)
    .eq('course_id', courseId)
    .single();
  if (error && error.code !== 'PGRST116') throw error;
  return data;
}

export async function markLessonComplete(userId: string, lessonId: string) {
  const { error } = await supabase
    .from('lesson_completions')
    .upsert({ user_id: userId, lesson_id: lessonId, completed_at: new Date().toISOString() });
  if (error) throw error;
}

export async function getCourseProgress(userId: string, courseId: string): Promise<number> {
  const lessons = await getCourseLessons(courseId);
  if (lessons.length === 0) return 0;

  const { count } = await supabase
    .from('lesson_completions')
    .select('id', { count: 'exact' })
    .eq('user_id', userId)
    .in('lesson_id', lessons.map(l => l.id));

  return Math.round(((count || 0) / lessons.length) * 100);
}
```

**Expected result:** A working course platform is visible in the Bolt preview — the catalog page shows courses loaded from Supabase, the course detail page shows the lesson list, and the lesson player embeds YouTube videos with progress tracking.

### 4. Deploy to Netlify and Configure Production Settings

Deploying your Skillshare-related Bolt.new app to Netlify or Bolt Cloud makes it publicly accessible and enables features that do not work in the WebContainer development preview, such as Supabase Auth email confirmation links and any payment processing if you are charging for course access.

In Bolt, connect to Netlify through Settings → Applications → Connect to Netlify. Once connected, click the Publish button and select Netlify as the hosting target. Your app builds and deploys to a *.netlify.app URL in about 60 seconds. For the custom course platform, set your Supabase environment variables on Netlify after deployment: go to Site settings → Environment variables and add NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY. For the Teachable integration (covered in the third use case), add TEACHABLE_API_KEY as a server-side variable (no NEXT_PUBLIC_ prefix since it is used only in API routes).

If you are building the course platform with Supabase Auth for user enrollment, configure your Supabase Auth settings to use your deployed Netlify URL as the Site URL (Supabase Dashboard → Authentication → URL Configuration). This ensures email confirmation links in registration emails point to your live site rather than localhost. Also update the Allowed Redirect URLs list in Supabase to include your Netlify domain. For the affiliate link approach, no Netlify configuration is needed beyond the deployment itself — all the course links are hard-coded in your component and work without any environment variables or auth configuration.

```
# netlify.toml
[build]
  command = "npm run build"
  publish = ".next"

[build.environment]
  NODE_VERSION = "20"

[[plugins]]
  package = "@netlify/plugin-nextjs"

# Redirect all 404s to index for client-side routing
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = "200"

# Cache static assets
[[headers]]
  for = "/_next/static/*"
  [headers.values]
    Cache-Control = "public, max-age=31536000, immutable"
```

**Expected result:** The application is live on a *.netlify.app URL. The course catalog loads from Supabase, affiliate links open correctly on the live site, and Supabase Auth email flows work with the production URL configured.

## Best practices

- Be transparent with users that Skillshare course links are affiliate links — this builds trust and is legally required in many jurisdictions under FTC disclosure guidelines
- Store your curated course list in Supabase rather than hard-coding it in your component — this lets you update recommendations without redeploying the app
- Use YouTube for video hosting during the early stages of your course platform and upgrade to Vimeo only when you need features like custom players, privacy per video, or viewer analytics
- Implement lesson progress tracking in Supabase from day one — it is much harder to add retroactively, and students expect their progress to be saved
- Add course category and skill level filtering to your course catalog immediately — as the course count grows past 10-15, users need navigation to find relevant content
- For a course platform, gate lesson content behind enrollment rather than making all videos public — this protects your content investment and creates a clear value proposition for enrollment
- Deploy to Netlify or Bolt Cloud early to test Supabase Auth email flows, since email confirmation links use your site URL which is not available in the WebContainer preview
- Use a CDN or Supabase Storage for course thumbnail images rather than linking directly to third-party CDN URLs, which can change and break your UI

## Use cases

### Skillshare Affiliate Course Recommendation Widget

Add a curated Skillshare course recommendation section to a Bolt.new app using affiliate links. When users click a recommended course, they are redirected to Skillshare with your affiliate tracking code, earning commissions on new subscriptions. No API needed — pure link embedding with optional metadata stored in Supabase.

Prompt example:

```
Create a course recommendation component in React that displays a curated grid of Skillshare classes. Each card should show: a course thumbnail image, class title, instructor name, class duration in minutes, skill level badge, and a 'Watch on Skillshare' button that opens the affiliate link in a new tab. Store the course data in a JavaScript array with fields: id, title, instructor, thumbnailUrl, durationMinutes, level, and affiliateUrl. Style with Tailwind CSS using a 3-column grid on desktop and single column on mobile. Add a category filter for design, photography, and business.
```

### Custom Creative Course Platform with Supabase

Build a complete online course platform in Bolt.new with Supabase as the backend — video lessons hosted on Vimeo or YouTube, student progress tracking, course enrollment, and certificate generation. This is the path when you want a Skillshare-like experience but with full control over content and branding.

Prompt example:

```
Build a creative course platform in Next.js with Supabase. Create tables for: courses (id, title, description, instructor_name, thumbnail_url, price, category), lessons (id, course_id, title, video_url, duration_seconds, order_index), and enrollments (id, user_id, course_id, enrolled_at, completed_at). Build a course catalog page at /courses with category filter and search, a course detail page at /courses/[slug] with lesson list, and a lesson player at /courses/[slug]/lessons/[lessonId] that embeds a YouTube video using the react-youtube package. Track lesson completion in a lesson_completions table. Show progress percentage on the course detail page.
```

### Teachable Course Catalog Integration

Use Teachable's REST API to display your existing Teachable course catalog inside a Bolt.new app, allow users to enroll in courses directly, and track their progress. Teachable's API requires an account with a paid plan but is fully accessible to developers without an enterprise partnership.

Prompt example:

```
Integrate Teachable's REST API into this Next.js app. Create an API route at app/api/teachable/courses/route.ts that fetches the course list from https://developers.teachable.com/v1/courses using an API key from process.env.TEACHABLE_API_KEY. Return the course name, heading, description, image_url, price, and course_url. Build a course catalog page at /courses that displays the courses in a grid with enrollment buttons. Create a second API route app/api/teachable/enroll/route.ts that accepts a POST request with course_id and user email, then calls the Teachable enrollment API.
```

## Troubleshooting

### Trying to call a Skillshare API endpoint returns 404 or authentication errors

Cause: Skillshare does not have a public REST API. Any endpoints you may have found in forums or older blog posts are undocumented internal APIs that are not available to third-party developers and will not work.

Solution: Use one of the three supported approaches: the affiliate program for link referrals, a custom Supabase platform for full ownership, or a supported learning API like Teachable or Coursera. There is no official Skillshare API to integrate.

### Supabase course queries return empty arrays even though data exists in the database

Cause: Row Level Security is enabled on the courses or lessons table but no matching SELECT policy allows public or authenticated reads.

Solution: In Supabase Dashboard → Authentication → Policies, add a SELECT policy for the courses and lessons tables. For a public course catalog, allow all users (including anonymous) to read course data. For lesson content, require authentication.

```
-- Add in Supabase SQL Editor
-- Allow anyone to browse the course catalog
CREATE POLICY "Public can view courses"
  ON courses FOR SELECT
  USING (true);

-- Require authentication to view lessons
CREATE POLICY "Authenticated users can view lessons"
  ON lessons FOR SELECT
  USING (auth.role() = 'authenticated');
```

### YouTube videos embedded in the lesson player do not load in the Bolt WebContainer preview

Cause: YouTube embeds can be blocked by the WebContainer's Content Security Policy or cross-origin policies in some browser configurations.

Solution: This is a known preview limitation. Deploy to Netlify or Bolt Cloud to test YouTube embeds in a real environment. Alternatively, use the direct YouTube URL approach with an anchor tag during development for testing, then switch to the iframe embed for the deployed version.

```
// Development fallback: test with direct link
// <a href={videoUrl} target='_blank'>Watch lesson</a>

// Production embed (works after deployment):
// Extract YouTube video ID
function getYouTubeId(url: string): string | null {
  const match = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([\w-]{11})/);
  return match ? match[1] : null;
}
```

### Teachable API returns 401 Unauthorized when fetching courses

Cause: The Teachable API key is missing or incorrect, or it is being used with the NEXT_PUBLIC_ prefix which exposes it client-side but Teachable's CORS policy blocks browser requests.

Solution: Remove the NEXT_PUBLIC_ prefix from TEACHABLE_API_KEY and use it only in server-side API routes. Teachable's API must be called from your Next.js API routes, not directly from React components, to avoid CORS errors and keep the key secure.

```
// WRONG: exposes key and causes CORS
const key = process.env.NEXT_PUBLIC_TEACHABLE_API_KEY;

// CORRECT: server-side only in app/api/teachable/route.ts
const key = process.env.TEACHABLE_API_KEY;
// This API route is called from the client, not the Teachable API directly
```

## Frequently asked questions

### Does Skillshare have a public API I can use in Bolt.new?

No. Skillshare does not offer a public developer API. Their platform is closed to programmatic access for third-party developers. The only developer-adjacent program Skillshare offers is an affiliate program for referral links and a Teams/Enterprise plan with SCIM support for corporate user management — neither of which provides course catalog or enrollment API access.

### How can I show Skillshare course recommendations in my Bolt.new app?

Use Skillshare's affiliate program. Apply at skillshare.com/affiliates, and once approved, append your affiliate tag to any Skillshare class URL (?via=yourtag). Embed these URLs as buttons or links in your app. There is no API involved — just curated links that you maintain as data in your app or in a Supabase table.

### What is the best way to build a Skillshare-like platform in Bolt.new?

Use Supabase for data storage (courses, lessons, enrollments, progress tracking) and YouTube or Vimeo for video hosting. Supabase communicates over HTTPS so it works in Bolt's WebContainer preview. Prompt Bolt to create the schema and pages in a single session — a working course catalog with video lessons and progress tracking can be built in 1-2 hours.

### Which learning platform API should I use instead of Skillshare for Bolt.new?

Teachable is the most practical choice for individual developers. Their REST API is self-serve (available on paid plans), uses standard Bearer token authentication, has good documentation at developers.teachable.com, and covers courses, enrollments, students, and progress. For academic content, Coursera has a catalog API for enterprise partners. For coding-focused content, Codecademy has enterprise API access.

### Can I receive Skillshare webhook events in my Bolt.new app?

Skillshare does not have a webhook system for third-party applications. Even if it did, Bolt's WebContainer development environment cannot receive incoming HTTP connections from external servers. For production webhook handling from any platform, you must deploy to Netlify or Bolt Cloud first to obtain a publicly accessible URL.

---

Source: https://www.rapidevelopers.com/bolt-ai-integrations/skillshare
© RapidDev — https://www.rapidevelopers.com/bolt-ai-integrations/skillshare