Проект: fullstack
Связываем всё вместе: SPA читает и пишет через API, сервер работает с базой, а данные путешествуют от SQL-запроса до кнопки в интерфейсе.
Схема приложения
В fullstack-проекте три уровня, и каждый отвечает за своё:
- фронтенд — интерфейс: React/SPA, формы, списки, состояние;
- бэкенд — API: Express-роуты, валидация, доступ к данным;
- база — хранение: SQLite для старта, позже PostgreSQL/MySQL.
💡
Правило границ: фронт не знает про SQL, сервер не знает про кнопки. Фронт общается с сервером только через fetch по эндпоинтам API.
Структура проекта
project/
├── client/ # фронтенд (Vite + React)
├── server/ # API (Node + Express)
│ ├── routes/ # эндпоинты
│ └── db.js # подключение к базе
└── .env # порт, секреты (в .gitignore!)
Минимальный цикл
- нарисуйте API заранее: какие роуты и какие поля в ответах;
- заведите базу и схемы; начните с одного объекта (например, tasks);
- напишите CRUD-роуты и проверьте их в REST-клиенте;
- подключите фронт: список с fetch, формы с POST, ошибки — в toast;
- задеплойте: статика + сервер + база (уроки 20 и 48).
ℹ️
Не гонитесь за идеальностью с первого дня. Работающая связка «форма → API → база → список» важнее красивой архитектуры. Доработки пойдут поверх.