Source: LLC Course Web App
Repo: VHCosta/llc-course
Stack: React 18 + Vite 5, deployed to Cloudflare Pages
Status: Complete — all 10 modules have full content; actively polished
Architecture
No backend. Content is data-driven: each module is a JS object in src/data/modules/m{N}.js exporting lessons with typed sections. A simulated terminal (terminalScripts.js, ~73K) provides per-lesson interactive practice — scripted responses keyed by lesson ID. Progress stored in localStorage via a custom useProgress hook.
Section Types
text, heading, code, callout, breakdown, stages, list
Component Map
| Component | Role |
|---|---|
App.jsx | Root: theme state, intro/course routing |
IntroScreen.jsx | Hero + roadmap (~18K — largest component) |
Sidebar.jsx | Left nav — collapsible module tree, progress bar, theme toggle |
LessonView.jsx | Main reading pane; owns terminal visible/expanded state |
Section.jsx | Renders individual section types |
Terminal.jsx | Simulated terminal — fully controlled (open + onToggle props from LessonView) |
Terminal (as of 2026-04-11)
- Hidden behind ”▸ TERMINAL (experimental)” opt-in button
- Click button → terminal appears expanded (324px: 38px header + 244px output + 42px input)
- Header click toggles collapse (80px: header + input only; output area is
flex:0 / overflow:hidden / padding:0) - Clicking backdrop (dim overlay above expanded terminal) collapses it
- Red traffic light / onClose returns to the opt-in button
?button in header prints a disclaimer explaining why the terminal is simulated- Terminal is fully controlled:
openandonToggleare props; LessonView owns state
Design
Dark terminal aesthetic. JetBrains Mono (body/code), Bebas Neue (headings), DM Serif Display (decorative). Inline styles + CSS variables — no Tailwind, no CSS modules. Dark/light theme toggle, persisted in localStorage under llc_theme.
Sidebar collapses to a 52px icon rail on desktop; slides in as a full-width drawer on mobile.
Root-level documents
| File | Contents |
|---|---|
CLAUDE.md | Project instructions for Claude Code |
PRODUCT_STRATEGY.md | Audience, free/paid model, pricing, distribution, non-decisions — see source-product-strategy |
plans/GB_EMULATOR.md | Analysis of adding a Game Boy emulator as PDF ch12 — see meta-gb-emulator |
plans/TERMINAL_PLAN.md | WASM vs local companion app analysis — see meta-terminal-plan |
PROJECT_HISTORY.md | Chronological build log for the web app |
REPOS.md | Lists all three repos in the project |
Deploy
wrangler pages deploy dist → Cloudflare Pages. No CI. Manual deploy after each change.
Redirects: /companion → Gumroad; /repo → VHCosta/c-systems-lab-exercises
PWA
PWA manifest + service worker via vite-plugin-pwa. Works offline after first load. Mobile-installable.