3.6 KiB
3.6 KiB
Магазин изделий ручной работы
Цель проекта — витрина и админка для магазина изделий ручного труда (игрушки, сувениры и т.п.) с простой загрузкой/редактированием данных через фронтенд‑админку.
Проект сделан как монорепозиторий:
client/— фронтенд (витрина + админка)server/— бэкенд API + БД
Стек
Фронтенд
- React + Vite
- axios
- @tanstack/react-query
- MUI (@mui/material) + emotion
- React Router
- Архитектура: FSD (Feature-Sliced Design) — слои
app/pages/widgets/features/entities/shared - Качество: ESLint (flat config) + Prettier, границы FSD (
eslint-plugin-boundaries)
Бэкенд
- Node.js
- Fastify (+ CORS)
- Prisma (миграции)
- SQLite (локальная БД; легко сменить на Postgres через
DATABASE_URL)
Основные подходы и договорённости
FSD на фронте
- Импорты между слоями ограничены правилами
boundaries(напримерfeaturesможет импортироватьentities/shared, но не наоборот). - Alias
@указывает наclient/src(см.client/vite.config.tsиclient/tsconfig.app.json).
Данные и админка
- Данные загружаются/редактируются через админку на фронте.
- Админ‑роуты бэкенда защищены простым токеном:
- фронт отправляет
Authorization: Bearer <token> - токен задаётся в
server/.envкакADMIN_API_TOKEN
- фронт отправляет
Форматирование и линтинг (client)
- Prettier конфиг:
client/.prettierrc.json - Ignore:
client/.prettierignore - EditorConfig:
client/.editorconfig - Команды:
npm run lint/npm run lint:fixnpm run format/npm run format:check
Запуск
Бэкенд
cd server
cp .env.example .env # при необходимости поправьте ADMIN_API_TOKEN
npm install
npx prisma migrate dev # если база ещё не создана
npx prisma db seed # опционально: тестовые категории и товары
npm run dev
Сервер: http://127.0.0.1:3333. Проверка: GET /health.
Фронтенд
В другом терминале:
cd client
npm install
npm run dev
Откройте http://localhost:5173. Запросы к /api проксируются на бэкенд (см. client/vite.config.ts).
Админка
Раздел «Админка» в шапке. Введите тот же секрет, что в ADMIN_API_TOKEN (заголовок Authorization: Bearer … уже подставляет фронт). Там можно создавать категории и товары, включать показ на витрине.
Для боевого размещения фронта и API на разных доменах задайте VITE_API_URL (например https://api.example.com/api) и CORS_ORIGIN на сервере.
API (кратко)
Публичные:
GET /api/categoriesGET /api/products?categorySlug=...
Админ:
GET /api/admin/productsPOST /api/admin/productsPATCH /api/admin/products/:idDELETE /api/admin/products/:idPOST /api/admin/categories