A self-paced engineering learning platform built with Next.js. Study structured courses on JavaScript, TypeScript, Node.js, and full-stack development — with syntax-highlighted code examples, interactive mindmaps, and an AI tutor per topic.
| Course | Topics | Level |
|---|---|---|
| JavaScript | Fundamentals, async, DOM, modules, patterns, Node.js core, internals, ES6+, interview prep | Moderate |
| TypeScript | Basics, advanced types, patterns, frontend & backend usage | Moderate |
| Node.js | Runtime, Express, auth, databases, testing, security, performance, deployment | Expert |
| Full Stack | All phases — JS through system design, DevOps, and production | Expert |
- Structured curriculum — phases → topics with meaning, code example, explanation, and deep-dive
- Syntax highlighting — Shiki-powered code blocks, language-aware per phase
- Interactive mindmaps — markmap-rendered concept maps inside topic detail sections
- Progress tracking — completion state per topic, persisted in localStorage
- AI tutor — floating chat per topic with context injection, supports Claude, GPT, and Gemini
- Live console — run JavaScript examples directly in the browser
- Dark / light mode
- Framework — Next.js 16 (App Router)
- Language — TypeScript
- Styling — Tailwind CSS v4
- Syntax highlighting — Shiki
- Mindmaps — markmap-lib + markmap-view
- AI — Vercel AI SDK (
@ai-sdk/anthropic,@ai-sdk/openai,@ai-sdk/google) - Icons — Iconify + @react-symbols/icons
cd app
npm install
npm run devOpen http://localhost:3000.
To use the AI tutor, set at least one provider key in app/.env.local:
ANTHROPIC_API_KEY=...
OPENAI_API_KEY=...
GOOGLE_GENERATIVE_AI_API_KEY=...app/
app/ # Next.js routes
course/[courseId]/ # Course overview page
[phaseId]/[topicId]/ # Topic detail page
components/ # UI components
ai/ # AI chat components
ui/ # code-block, circular-progress, etc.
lib/
courses/
phases/ # Phase content files (one per phase)
javascript/ # JS phases
nodejs/ # Node.js phases
typescript/ # TypeScript phases
...
definitions/ # Course specs (javascript.ts, nodejs.ts, etc.)
registry.ts # All phases registered here
index.ts # getCourse / getPhase / getTopic exports
New topic — edit the relevant phase file in lib/courses/phases/.
New phase — create lib/courses/phases/<category>/<name>.ts, add to registry.ts.
New course — create lib/courses/definitions/<name>.ts with a CourseSpec, add to COURSE_SPECS in index.ts.
Each topic supports a detailed field with GFM markdown (tables, bold) and ```markmap ``` fenced blocks for mindmaps.