https://github.com/cskwork/high-traffic-site-tutorial
https://github.com/cskwork/high-traffic-site-tutorial
Last synced: 19 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/cskwork/high-traffic-site-tutorial
- Owner: cskwork
- Created: 2026-05-20T11:51:25.000Z (29 days ago)
- Default Branch: main
- Last Pushed: 2026-05-20T12:52:39.000Z (29 days ago)
- Last Synced: 2026-05-20T17:24:01.873Z (29 days ago)
- Language: TypeScript
- Size: 182 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# High-Traffic Site Tutorial — Kafka × Redis
An interactive 2D + 3D + musical tutorial that teaches developers — beginner through expert —
how to design and operate high-traffic web architecture using **Apache Kafka** and **Redis**.
Built as a static React + Three.js + Tone.js app and deployed to GitHub Pages.
## Stack
- Vite + React 18 + TypeScript (strict)
- React Three Fiber + drei + three.js for 3D scenes
- Tone.js for the procedural music engine
- Tailwind CSS for the concept-based design system
- Framer Motion for layout transitions
- Zustand for client state (progress, audio settings)
- React Router (HashRouter — GitHub Pages friendly)
## Develop
```bash
npm install
npm run dev # http://localhost:5173
npm run typecheck # tsc --noEmit
npm run build # production bundle in dist/
npm run preview # serve the production bundle
npm test # vitest run
```
## Curriculum
| Track | Modules |
|----------|---------------------------------------------------------------|
| Kafka | Beginner → Intermediate → Expert |
| Redis | Beginner → Intermediate → Expert |
| Patterns | Cache-aside · Rate limit · CQRS/Event sourcing · Outbox · LB |
Every concept ships with: plain-language analogy, interactive 2D or 3D scene,
"try it" sandbox, and a musical leitmotif played by the procedural audio engine.
## Deploy
Pushes to `main` trigger `.github/workflows/deploy.yml`, which runs `npm ci && npm run build`
and publishes `dist/` to GitHub Pages. Live URL is configured under repo Settings → Pages.
## Project layout
```
src/
├─ App.tsx, main.tsx, index.css // bootstrap
├─ components/ // design system + shell + UI primitives
├─ routes/ // HomePage, ConceptPage, NotFoundPage
├─ content/ // concept registry + per-concept content modules
├─ audio/ // Tone.js engine + leitmotif registry
├─ viz/ // 2D + 3D visualization primitives
├─ lib/ // tiny utilities + state stores
└─ test/ // vitest setup
```
## License
MIT (see `LICENSE` once added).