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

> Learn math, data, and computer science interactively

- Site: https://brilliant.org
- Category: Education / EdTech
- Platforms: Web app
- Verdict: **Serious undertaking** (45/100 vibecodeable)
- Estimated effort: 3-4 weeks of focused development and debugging

## Verdict

You can build a personal study clone with a general course viewer and a generic AI tutor, but replicating their massive library of custom interactive physics and math widgets will require weeks of intense frontend work.

Vibecoding a personal Brilliant clone is a heavy multi-week commitment because the core value isn't just a CRUD app or a standard video player—it's the custom interactive learning canvas. While an AI agent can rapidly scaffold Next.js, database schemas, and integrate an LLM for 'Koji', building interactive math manipulatives, physics simulations, and stateful code puzzle blocks requires writing extensive custom React/SVG components for every single lesson. If you want a fun playground to learn STEM concepts using AI generation for your own custom courses, it's a rewarding project; if you just want to learn math, paying for Brilliant is infinitely faster.

### What you can't replicate

- The proprietary catalog of hundreds of hand-crafted interactive STEM courses and puzzle engines
- The 14-year curriculum refinement loop designed by MIT and Harvard experts
- Massive community base and league leaderboards

## What it does

An interactive, gamified online learning platform focused on STEM fields through bite-sized, hands-on visual problems and an AI tutor named Koji.

### Core features

- Interactive pedagogical canvas engine (custom SVG/D3 math & physics puzzles)
- AI tutor integration ('Koji') inspecting rendered screen state to guide learners
- Adaptive learning path generation and knowledge modeling
- Gamification system (Streaks, XP, levels, daily goals)
- Math and code rendering pipeline (KaTeX/MathJax, mini code runner)
- Sequential and free-form course navigation

## The business

### Pricing

- Free: Free — Limited access to course previews and daily challenges
- Monthly: $27.99/mo — Full access billed monthly
- Annual: $161.88/yr — Full access billed annually (~$13.49/mo)

### Funding

$60M – $94M+ raised.
- Seed ($3M, 2012)
- Series A ($4.67M, 2013)
- Series B ($21M+, 2015/2018)
- Series C / Growth (Early 2020s)
Investors: Social Capital, TPG Rise Select, SoftBank Vision Fund, Learn Capital, Kapor Capital, 500 Startups

Founded 2012.
Team size: 50–200 employees.

## The hard parts

- Building dozens of unique, bespoke interactive puzzle components (physics sims, graph interactives, code editors)
- Contextual AI tutoring pipeline that accurately reads canvas state without giving away direct answers
- Authoring deep, high-quality STEM curriculum content with pedagogical validation loops
- Cross-device progress and state synchronization engine

## How to vibe code Brilliant

### Prerequisites

- Node.js (free): Required runtime for running Next.js and frontend tooling
- GitHub (free): Source control and deployment pipeline integration
- Anthropic API Key (pay-as-you-go): Powers the Koji AI tutor persona and prompt context analysis

### Recommended AI tools

- Claude Code: Best-in-class agentic coding tool for scaffolding full-stack applications, writing complex React canvas components, and debugging state bugs across multi-file architectures.
- Cursor: Ideal for fine-tuning intricate interactive SVG/D3 visual components and reviewing code diffs step-by-step.

### Stack

- Frontend: Next.js (React) with Tailwind CSS, KaTeX for math rendering, and Lucide icons
- Backend: Next.js Server Actions and API Routes
- Database: Turso (SQLite at the edge) for lightweight course progress and user state
- Auth: better-auth for self-hosted, passwordless or email-based local single-user auth
- Payments: None (Personal-use clone)
- Other: Anthropic API (Claude 3.5 Sonnet) for the Koji AI tutor, PostHog for personal usage analytics

### Hosting

- Cloudflare (Full-stack deployment of the Next.js app and edge caching): $0/mo
- Turso (Serverless SQLite database for storing lessons, user progress, and streaks): $0/mo

### Build guide

1. **Scaffold Next.js App & Database Schema** — Initialize a Next.js project with Tailwind CSS, configure Turso SQLite with Drizzle ORM, and set up the core data models for courses, chapters, lessons, user progress, and daily streaks.

```
Create a new Next.js 16 project with Tailwind CSS, TypeScript, and Drizzle ORM configured for Turso SQLite. Define database schemas for users, courses, chapters, lessons, user_progress (tracking completion status, score, and timestamps), and streaks. Include migration scripts and a seed script with 2 sample STEM courses (e.g., Visual Algebra and Intro to Python) containing multi-step lesson structures.
```

2. **Build the Interactive Lesson & Canvas Renderer** — Build a modular lesson viewer component that supports rich text, KaTeX mathematical equations, and custom interactive puzzle blocks (sliders, drag-and-drop graphs, visual state evaluators).

```
Build a lesson player page in Next.js (/courses/[courseId]/lessons/[lessonId]) with a split layout: left side for instructional cards and interactive questions, right side for an interactive canvas widget. Integrate KaTeX for math formula rendering. Create a pluggable component architecture for interactive question types (e.g., a number slider puzzle, a coordinate graph point-clicker, and a multiple-choice concept selector) that validate answers client-side and return success state.
```

3. **Implement Koji AI Tutor Drawer** — Create a contextual AI tutoring drawer ('Koji') that reads the current lesson content, user state, and recent wrong answers to provide hints without giving away the direct solution.

```
Implement a slide-out AI tutor drawer named 'Koji' in the lesson player. Connect it to an API route that uses the Anthropic API (Claude Sonnet). Pass the current lesson metadata, problem statement, user's recent incorrect attempts, and current puzzle state as context. Configure the system prompt so Koji acts like a patient Socratic tutor who asks guiding questions and never directly hands out the final answer.
```

4. **Add Gamification & Progress Tracking** — Implement daily streaks, XP counters, level progression milestones, and dashboard overview metrics.

```
Build a user dashboard and gamification engine. Calculate and display daily learning streaks based on UTC lesson completion dates, award XP points per completed puzzle, and show a progress path tree for each course. Update the database schema and server actions to record completion events and refresh streak stats instantly upon lesson finish.
```

5. **Polish & Deploy to Cloudflare** — Perform responsive UI polish, handle error states, test edge cases, and deploy the application to Cloudflare Workers or Pages.

```
Review all UI components for responsive mobile and desktop layout stability. Add error boundaries around interactive math components and the Koji AI chat drawer. Configure output deployment for Cloudflare using OpenNext or Cloudflare Pages adapter, ensuring environment variables for Turso and Anthropic are properly documented in a .env.example file.
```

### Cost vs paying

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

- AI Coding Assistant Subscription (Claude Pro / Cursor): $20
- Total: ~$20 one-time

**Ongoing costs (monthly):**

- Cloudflare & Turso Free Tiers: $0
- Anthropic API usage for Koji AI tutor: ~$3-5/mo
- Total: ~$4/mo

- Paying for the SaaS instead: $27.99/mo
- Build time: 35-50 hours
- AI tool credits: $20 (Claude Pro / Cursor)
- Break-even: Under 1 month of subscription savings

## Sources

- [Brilliant Official Website](https://brilliant.org)
- [Tracxn - Brilliant Company Profile](https://tracxn.com)
- [Wikipedia - Brilliant (website)](https://en.wikipedia.org/wiki/Brilliant_(website))