Полноценный проект: React + FastAPI

В этом разделе мы построим полноценное web-приложение от нуля, используя Claude Code как тимлида: даём задачу - получаем работающий код. Никаких "придумайте сами" - все промпты, файлы и команды даны явно.

Что мы строим

ToDo с AI-категоризацией - задачник, который сам определяет категорию задачи (работа, личное, обучение, здоровье) с помощью Claude API. Стек выбран намеренно простой, чтобы фокус был на работе с Claude Code, а не на изучении новых фреймворков.

┌─ Архитектура приложения ────────────────────────────┐
│                                                     │
│   ┌──────────────┐         ┌──────────────────┐    │
│   │   React      │  fetch  │   FastAPI        │    │
│   │   (Vite)     ├────────▶│   (uvicorn)      │    │
│   │   :5173      │  JSON   │   :8000          │    │
│   └──────────────┘         └────────┬─────────┘    │
│                                     │              │
│                            ┌────────▼─────────┐    │
│                            │   SQLite         │    │
│                            │   (tasks.db)     │    │
│                            └──────────────────┘    │
│                                     │              │
│                            ┌────────▼─────────┐    │
│                            │  Anthropic API   │    │
│                            │  (категоризация) │    │
│                            └──────────────────┘    │
│                                                     │
└─────────────────────────────────────────────────────┘

Что вы научитесь делать

• Скаффолдить проекты промптом - один правильный промпт = рабочий FastAPI или React за 2 минуты
• Связывать фронт и бэк - CORS, типизация, обработка ошибок
• Подключать AI-фичу - Anthropic SDK с prompt caching (экономит до 90% токенов)
• Покрывать тестами - pytest + vitest, всё через Claude
• Деплоить в Docker - Dockerfile, docker-compose, smoke-тесты после деплоя

Что нужно перед началом

• Установленный Claude Code (раздел 01)
• Базовое понимание slash-команд (раздел 02)
• Минимальный CLAUDE.md в проекте (раздел 03)
• Установленные: Node.js 18+, Python 3.11+, Git, Docker (опционально)

Структура раздела

Раздел разбит на 7 шагов плюс библиотека промптов:

Что у вас будет в конце

• Работающее приложение, доступное на http://localhost:5173
• Backend API на http://localhost:8000 с автодокументацией /docs
• AI-категоризация новых задач при добавлении
• Полное тестовое покрытие критических путей
• Готовый Dockerfile и docker-compose.yml для деплоя на свой VPS
• Smoke-тесты, которые ловят регрессии после git pull на проде