The Next.js website that renders the curriculum with an interactive system visualizer.
cd website
npm install
npm run dev
# Open http://localhost:3000- Landing page (
/) — hero, stats, track summaries, "what this is NOT" - Curriculum map — all 38 chapters, searchable and filterable by track
- Lesson reader — renders chapter markdown with Mermaid diagram support, sidebar navigation
- System Visualizer — interactive RAG pipeline walkthrough (6 steps)
- Question bank — scenario-framed practice questions with worked answers
The website reads chapter content from the ../chapters/ directory via the API route at src/app/api/chapters/route.ts. The chapters are the same markdown files readable on GitHub — no separate CMS.
- Next.js 16 with App Router
- TypeScript 5
- Tailwind CSS 4
- shadcn/ui component library
- react-markdown + remark-gfm for markdown rendering
- mermaid for diagram rendering
- gray-matter for YAML frontmatter parsing
website/
├── src/
│ ├── app/
│ │ ├── api/chapters/route.ts # API: list + fetch chapters
│ │ ├── layout.tsx # Root layout, metadata
│ │ ├── page.tsx # Single-page app with tabs
│ │ └── globals.css # Tailwind + prose styles
│ └── components/ui/ # shadcn/ui components
├── package.json
└── README.md (this file)
The page is a single-page app with tab-based navigation (Home, Curriculum, Reader, Visualizer, Questions). All state is client-side. The API route reads from the filesystem.
To add a new chapter: just add a markdown file to ../chapters/ with proper frontmatter. It will appear in the curriculum map automatically.
npm run build
npm start- Colors: edit Tailwind classes in
src/app/page.tsx(TRACKS object, BLOOM_COLORS) - Typography: edit
proseclasses in the MarkdownRenderer component - Mermaid theme: edit
mermaid.initialize()in the MermaidBlock component