System Design Interview Practice

An interactive system design interview practice tool. Draw architecture diagrams on a canvas while an AI interviewer guides you through design phases via real-time chat. Sessions are evaluated against rubrics at the end.

Screenshots

Start a session	Draw on canvas

AI Interview Chat	Evaluation Results

Features

• Interactive canvas — Draw system architecture diagrams using tldraw
• AI interviewer — LLM-powered contextual questions (supports Ollama, Anthropic, Groq)
• Flow engine — Free-tier decision-tree interview fallback (no LLM needed)
• Auto-evaluation — Rubric-based scoring with detailed feedback
• Multiple cases — URL shortener, news feed, and more

Quick Start

Local Development

# Install dependencies
make setup

# Copy and configure environment
cp backend/.env.example backend/.env
# Edit backend/.env with your API keys

# Start dev servers (frontend on :3000, backend on :8000)
make dev

Docker

# Copy and configure environment
cp backend/.env.example backend/.env

# Build and run all services (frontend + backend + Ollama)
make docker-up

Environment Variables

See backend/.env.example for all options. Key variables:

Variable	Description	Default
LLM_PROVIDER	ollama, anthropic, or groq	ollama
OLLAMA_HOST	Ollama server URL	http://localhost:11434
ANTHROPIC_API_KEY	Anthropic API key	—
GROQ_API_KEY	Groq API key	—
CONTENT_DIR	Path to case studies	../content
CORS_ORIGINS	Allowed CORS origins (JSON array)	["http://localhost:3000"]

Project Structure

├── backend/          # FastAPI + Python
│   ├── app/
│   │   ├── api/      # REST + WebSocket endpoints
│   │   ├── core/     # Interviewer, evaluator, canvas parser
│   │   └── models/   # Pydantic models
│   └── Dockerfile
├── frontend/         # React + TypeScript + Vite + tldraw
│   ├── src/
│   └── Dockerfile
├── content/          # Case studies (JSON)
├── scripts/          # Case generation utilities
└── docker-compose.yml

Commands

make setup          # Install all dependencies
make dev            # Start frontend + backend dev servers
make test           # Run backend tests
make lint           # Run ruff + mypy
make docker-up      # Docker compose up
make docker-down    # Docker compose down
make generate       # Generate a new case study via LLM

Tech Stack

• Backend: FastAPI, Pydantic v2, litellm, WebSockets, structlog
• Frontend: React 18, TypeScript, Vite, tldraw, React Router
• LLM: Ollama (local), Anthropic, Groq via litellm