# How to Vibe Code Your Own Skillshare (and Stop Paying for It)

> Online Learning Community for Creatives

- Site: https://skillshare.com
- Category: EdTech & Video Learning Marketplace
- Platforms: Web app, iOS app, Android app
- Verdict: **Solid side project** (65/100 vibecodeable)
- Estimated effort: 2-4 weeks part-time

## Verdict

Build a personal subset for your own video library, but don't expect to replicate the creator ecosystem or proprietary catalog.

Building a functional clone of Skillshare's core video learning loop and project-sharing community is entirely achievable as a solo developer using AI coding agents. However, you will not replicate their proprietary library of 30,000+ professional classes or their two-sided creator marketplace. For a personal-use clone, you will act as your own instructor, uploading your own screen recordings or markdown tutorials into a custom Next.js web application. The hardest technical hurdle will be wiring up video transcoding and adaptive streaming via Mux without letting storage and egress bills spiral out of control. Expect 2-3 weeks of iterative prompting and debugging auth, database schema, and video player edge cases.

### What you can't replicate

- The 30,000+ proprietary professional course catalog
- The 9,000+ active industry-expert instructors and organic creator liquidity
- Global brand trust and 11M+ member network

## What it does

An online learning community and subscription-based educational marketplace offering bite-sized, project-based video classes taught by industry experts in design, illustration, photography, and tech.

### Core features

- Catalog browsing with category filters and search
- Video course player with chapter navigation and playback speed controls
- Two-sided dashboard (student progress tracking vs. teacher course upload)
- Project upload pipeline with image/video attachments and rich text descriptions
- Community feed with peer comment trees and project feedback
- User profile pages showing followed instructors and completed classes

## The business

### Pricing

- Individual Annual Plan: $167.88/yr — Billed annually, effectively $13.99/month with a 7-day trial.
- Individual Monthly Plan: $32.00/mo — Billed monthly via web or app store.
- Teams: $199.00/user/yr — Billed annually for small teams.

### Funding

$143M raised.
- Seed (April 2011)
- Series A (August 2011)
- Series B (May 2016)
- Series C (July 2018)
- Series D (August 2020)
Investors: Union Square Ventures, Spark Capital, Adobe, BlueYard Capital, Spero Ventures, Amasia

Founded 2010.
Team size: 500-700.

## The hard parts

- Video transcoding and adaptive bitrate streaming (HLS/DASH) at scale without high bandwidth egress costs
- Managing dual-role state (a user can be both a student taking a class and a teacher publishing one)
- Robust nested comment trees and asynchronous project feedback loops across community feeds
- Handling stateful course progress tracking (video timestamps, completed lessons, certificate issuance)

## How to vibe code Skillshare

### Prerequisites

- Node.js (free): Required runtime environment for building and running the Next.js application locally.
- GitHub (free): Version control and repository hosting required for deployment pipelines.
- Mux Account (Usage-based (free tier available)): Required for video upload, transcoding, and adaptive bitrate streaming playback.

### Recommended AI tools

- Claude Code: Best-in-class coding agent for scaffolding multi-file full-stack features, database schemas, and wiring APIs autonomously.
- Cursor: Excellent AI-native code editor for fine-tuning UI components, video player controls, and Tailwind layout polish.

### Stack

- Frontend: Next.js with Tailwind CSS and shadcn/ui
- Backend: Next.js Server Actions / API Routes
- Database: Turso (SQLite at the edge)
- Auth: better-auth
- Payments: None (personal-use clone skips payments)
- Other: Mux Video API for video streaming, UploadThing for course cover images and project attachment uploads

### Hosting

- Vercel (Hosting the Next.js frontend and serverless API endpoints on the Hobby tier.): $0/mo
- Turso (Serverless SQLite database for users, courses, lessons, progress tracking, and project posts.): $0/mo

### Build guide

1. **Project Scaffolding & Database Schema** — Initialize a Next.js application with Tailwind CSS, configure Turso SQLite with Drizzle ORM, and set up better-auth for single-user/multi-user authentication.

```
Create a new Next.js 16 project using TypeScript, Tailwind CSS, and App Router. Set up Drizzle ORM connected to a Turso SQLite database. Define the database schema for users (id, name, email, role: 'student'|'teacher'), courses (id, title, description, coverImage, instructorId), lessons (id, courseId, title, muxPlaybackId, duration, orderIndex), user_progress (id, userId, lessonId, completed), and projects (id, courseId, userId, title, description, imageUrl, createdAt). Install better-auth and configure email/password authentication matching the users table schema. Ensure all tables have proper foreign key relations and indexes.
```

2. **Course Catalog & Browse Interface** — Build the homepage and catalog discovery views with category filters, search input, and course detail pages.

```
Build a responsive homepage and catalog discovery page in Next.js using Tailwind CSS and shadcn/ui primitives. Create a grid of course cards displaying cover image, title, instructor name, lesson count, and total duration. Add a search bar and category filter pill buttons that query the Turso database via server actions. Build a course detail page route (/courses/[id]) showing course metadata, syllabus list of lessons, and an 'Enroll' or 'Start Learning' button that records student enrollment.
```

3. **Video Player & Lesson Learning View** — Implement the immersive classroom view featuring the Mux video player, lesson navigation sidebar, and automatic progress tracking.

```
Build the classroom learning interface at /courses/[id]/learn/[lessonId]. On the left, render a collapsible syllabus sidebar listing all course lessons with checked/unchecked status indicators for completed items. On the right, embed the Mux Player React component using the lesson's muxPlaybackId. Implement an automatic progress-tracking mechanism: when a video reaches 90% completion or the user clicks 'Mark as Complete', trigger a server action to update the user_progress table and refresh the sidebar state. Add previous/next lesson navigation buttons.
```

4. **Teacher Studio & Video Upload Pipeline** — Create a creator dashboard enabling instructors to create new courses, upload raw video files to Mux, and organize lesson chapters.

```
Build a creator studio dashboard at /studio for users with the teacher role. Include a view to list created courses and a multi-step form to create a new course (title, description, cover image upload via UploadThing). Inside a course management view, add a lesson builder interface where teachers can enter lesson titles and upload video files directly to Mux using direct upload URLs. Save the resulting muxPlaybackId and asset details into the lessons table associated with the course. Handle upload progress states and error handling cleanly.
```

5. **Community Project Gallery & Feedback Feed** — Build the hands-on project sharing section where students post their completed work and leave peer feedback comments.

```
Build the community project gallery feature for each course at /courses/[id]/projects. Include a 'Submit Project' modal form allowing students to upload an image of their project work, a title, and a description. Render a masonry grid of submitted student projects on the course page. Build a project detail view (/projects/[id]) that displays the project submission alongside a threaded comment section where peers and instructors can leave feedback, encouragement, and critique. Wire up server actions for creating project posts and adding comments.
```

6. **Polish, User Dashboard & Final Verification** — Construct the student profile dashboard showing enrolled courses, completion certificates, and personal statistics.

```
Build the personal student dashboard at /dashboard. Display a summary of active courses with percentage completion progress bars, bookmarked classes, and a history of submitted projects. Add a profile settings page to update user avatars and display names. Review the entire application flow from homepage discovery to video playback, project submission, and dashboard tracking, fixing any broken Tailwind styles, hydration errors, or missing loading states.
```

### Cost vs paying

**Starting costs (one-time):**

- Custom domain (optional): $12.00 one-time
- AI Coding Assistant subscription: $20.00 one-time
- Total: ~$32.00 one-time

**Ongoing costs (monthly):**

- Vercel Hobby Hosting: $0/mo
- Turso Database: $0/mo
- Mux Video Streaming & Storage: ~$5-10/mo (depending on video watch volume)
- Total: ~$5-10/mo

- Paying for the SaaS instead: $14.00/mo
- Build time: 25-35 hours
- AI tool credits: $20.00 (Claude Pro / Cursor)
- Break-even: Never (purely for personal learning and self-hosted course storage)

## Sources

- [Skillshare Pricing Page](https://www.skillshare.com/en/pricing)
- [Himalayas - Skillshare Tech Stack Profile](https://himalayas.co)
- [Tracxn - Skillshare Funding & Company Profile](https://tracxn.com)
- [Wikipedia - Skillshare History & Overview](https://en.wikipedia.org/wiki/Skillshare)