Hand-Drawn Digit Recognizer
React 18 + Vite SPA · FastAPI + PyTorch CNN · MNIST classifier (backend API v2.0.0)
A full-stack hand-drawn digit recognition app where users draw digits on a browser canvas and the React frontend sends pixel data to a FastAPI backend that classifies them using an in-process PyTorch CNN trained on MNIST. The app provides per-digit confidence scores alongside the top predicted digit.
Generated 4 Jun 2026 · 18 files · 11 components · 5 flows
File Architecture
The full source tree as a layered graph — every file with its role, imports, exports and reverse dependencies.
System Design
Runtime topology across the five zones — client, edge, application, data and external services.
Flow Graph
The five most significant application flows, step by step — startup, auth, write, read and error recovery.
Technology
| Component | Technology | Version | Source of Detection |
|---|---|---|---|
| Frontend framework | React | ^18.2.0 | frontend/package.json |
| Build tool / dev server | Vite | ^5.0.8 | frontend/package.json, vite.config.js |
| Styling | Tailwind CSS + PostCSS | ^3.4.1 | tailwind.config.js, postcss.config.js |
| Lint | ESLint (react, react-hooks) | ^8.57.0 | frontend/package.json |
| Backend framework | FastAPI | >=0.109.0 | backend/requirements.txt |
| ASGI server | Uvicorn | >=0.27.0 | backend/requirements.txt, main.py |
| ML framework | PyTorch (torch) | >=2.0.0 | backend/requirements.txt |
| Dataset / vision | torchvision (MNIST) | >=0.15.0 | backend/train.py |
| Validation | Pydantic | >=2.5.0 | backend/main.py (PixelData) |
| Numerics | NumPy | >=1.24.0 | backend/main.py |
| Trained artifact | CNN state dict | API v2.0.0 | backend/mnist_model.pth |
| Runtime | Python (CPU PyTorch) | 3.14 | digit-recognizer/CLAUDE.md, README.md |