Магазин изделий ручной работы

Цель проекта — витрина и админка для магазина изделий ручного труда (игрушки, сувениры и т.п.) с простой загрузкой/редактированием данных через фронтенд‑админку.

Проект сделан как монорепозиторий:

• 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:fix
  • npm 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/categories
• GET /api/products?categorySlug=...

Админ:

• GET /api/admin/products
• POST /api/admin/products
• PATCH /api/admin/products/:id
• DELETE /api/admin/products/:id
• POST /api/admin/categories