Zero2Claude Architecture Overview

System Architecture

Frontend

React SPA
Virtual Terminal
15 Interactive Components
Real-time (WebSocket)

→

API

RESTful Endpoints
Authentication
Content Moderation
WebSocket Server

→

Data

PostgreSQL
Redis (Pub/Sub)
Full-text Search
Migrations

→

AI

Personalized Onboarding
Bug Triage Agent
Feature Request Bot
Palette Generation

→

Infrastructure

Cloud Hosting
CDN
Auto-deploy
Health Monitoring

Key Data Flows

Lesson Flow

Student opens lesson → frontend loads lesson JSON → renders sections sequentially (narrative, terminal exercises, quizzes) → progress synced to backend → achievement check on completion

Authentication

Email/password or Google OAuth → server validates credentials → issues access + refresh tokens → frontend auto-refreshes on expiry → cross-origin cookie support

Forum

Student creates thread → content moderation pipeline (HTML strip, profanity filter, spam detection) → stored with full-text search vector → voting + replies

Peer Help

Student requests help on a lesson → broadcast via WebSocket → peer accepts → real-time chat with moderation → session closes when resolved

AI Onboarding

New user describes background → AI generates personalized learning plan → priority levels + recommended lessons → plan shown in dashboard

Bug Triage Agent

GitHub issue created → agent polls hourly → AI investigates codebase → creates fix branch + draft PR → notifies reporter when fix deploys

Curriculum (147 Lessons)

Level	Title	Lessons	Topics
0	Computers Are Not Magic	6	Files, folders, paths, what a terminal is
1	Your First 30 Minutes in the Terminal	13	Navigate, create, manage files
2	Reading and Writing Files	13	View files, search text, chain commands
3	Your Code Has a History	17	Git and GitHub fundamentals
4	How Software Actually Works	14	Client/server, APIs, databases, cloud
4B	Talk to the Internet	12	HTTP requests, real APIs, curl
5	Building With Real Tools	15	Node.js, npm, Express server
6	Claude Code — Your AI Pair Programmer	15	Prompting, editing, building with Claude
6B	Claude Skills	5	Custom slash commands, SKILL.md
6C	MCP — Connect Claude to Everything	5	MCP servers, transports, Tool Search
6D	Context Is Everything	5	CLAUDE.md, memory, sessions, specs
6E	Claude Code Advanced	5	Subagents, worktrees, hooks, headless, cost
7	Junior Developer Patterns	12	Debug, deploy, security, pro workflow
8	The Project — Build a Real Game	10	WebSockets, Socket.io, multiplayer, deploy

Deployment Pipeline

1

Push to Main

Git triggers deploy

2

Build

Compile + bundle

3

Migrate

Schema updates

4

Seed

147 lessons synced

5

Rolling Deploy

Zero downtime

6

Health Check

Automated monitoring

Platform Features

Interactive Terminal

Virtual filesystem with command parser and git simulation. 15 interactive exercise types including terminal steps, quizzes, fill-in-blank, drag-and-drop, and more.

CORE

Community Forum

Discussion categories, threads, replies, voting, full-text search, image attachments, and content moderation.

LIVE

Peer Help

Real-time help requests and chat. Students can ask for help on specific lessons and peers can assist live.

REAL-TIME

AI Onboarding

AI-generated personalized learning plans based on student background. Recommends priority levels and lessons.

AI

Bug Triage Agent

AI agent that auto-investigates GitHub issues, creates fix branches and draft PRs, and notifies reporters.

AI AGENT

Achievement System

16 achievements across milestones, streaks, speed, and level mastery. Toast notifications on unlock.

LIVE

Color Palette System

Multiple visual themes with user selection. AI-powered palette generation for admins.

LIVE

Text-to-Speech

Browser-native speech synthesis reads lesson content aloud. Configurable voice, rate, and pitch.

LIVE

Personal Notes

Full CRUD notes system tied to specific lessons. Dashboard tab, in-lesson quick-add, markdown support.

LIVE

Product Genie

AI classifies forum feature requests, replies as a bot, and creates GitHub issues for the backlog.

AI AGENT

Admin Dashboard

Comprehensive management: student analytics, lesson editor, theme editor, forum moderation, and more.

ADMIN

Maintenance Mode

Smart health monitoring with automatic detection and graceful degradation during outages.

ADMIN

Tech Stack

Frontend

React + TypeScript
Vite
Tailwind CSS
Socket.IO

Backend

Node.js + Express
PostgreSQL
Drizzle ORM
Redis

AI

Anthropic (Claude)
Google (Gemini)
Claude Code Agent SDK

Infrastructure

Cloud Hosting + CDN
Auto-deploy on Push
Health Monitoring

Testing

Vitest (985+ tests)
React Testing Library
API integration tests