Food App - Приложение для планирования питания

Веб-приложение для управления рецептами, планирования питания и составления списков покупок.

🚀 Быстрый старт

Предварительные требования

• Node.js версии 18+
• pnpm (рекомендуется) или npm
• PostgreSQL база данных
• Git

Установка зависимостей

# Клонирование репозитория
git clone <repository-url>
cd food-app

# Установка зависимостей
pnpm install

Настройка базы данных

1. Создайте PostgreSQL базу данных:

createdb food_app

2. Настройте переменные окружения:

# Создайте файл .env в корне проекта
cp env.example .env

# Отредактируйте .env файл
DATABASE_URL="postgresql://postgres:postgres@127.0.0.1:5432/food_app"

3. Запустите миграции:

pnpm db:migrate

4. Заполните базу тестовыми данными:

pnpm db:seed

Запуск приложения

Вариант 1: Запуск в режиме разработки (рекомендуется)

# Терминал 1: Запуск backend API сервера
pnpm dev

# Терминал 2: Запуск frontend в режиме разработки
pnpm start-frontend

Вариант 2: Запуск production сборки

# Сборка проекта
pnpm build

# Запуск production сервера
pnpm start

Доступ к приложению

• Frontend: http://localhost:5173
• Backend API: http://localhost:3000

📁 Структура проекта

food-app/
├── src/
│   ├── app.tsx          # Основные React компоненты
│   ├── main.tsx         # Точка входа React приложения
│   ├── api.ts           # Backend API сервер (Elysia)
│   ├── api-client.ts    # Frontend API клиент (Eden)
│   └── data.ts          # Статические данные рецептов
├── prisma/
│   ├── schema.prisma    # Схема базы данных
│   └── migrations/      # Миграции базы данных
├── scripts/
│   └── seed.ts          # Скрипт заполнения базы данных
├── index.html           # HTML шаблон
├── package.json         # Зависимости и скрипты
└── README.md           # Документация

🛠️ Доступные команды

# Разработка
pnpm dev                 # Запуск backend сервера в режиме разработки
pnpm start-frontend      # Запуск frontend в режиме разработки
pnpm build              # Сборка проекта
pnpm start              # Запуск production сервера

# База данных
pnpm db:migrate         # Применение миграций
pnpm db:seed            # Заполнение базы тестовыми данными
pnpm db:generate        # Генерация Prisma клиента

# Типизация
pnpm types              # Проверка TypeScript типов

🗄️ База данных

Модели данных

• Recipe - рецепты с КБЖУ
• Ingredient - ингредиенты с единицами измерения
• RecipeIngredient - связь рецептов и ингредиентов
• CartItem - элементы корзины
• StockItem - наличие ингредиентов
• CalendarItem - планирование питания по датам

Миграции

# Создание новой миграции
pnpm db:migrate

# Откат последней миграции
pnpm db:migrate reset

🔧 Технологический стек

Frontend

• React 19 - UI библиотека
• Mantine UI - компоненты интерфейса
• React Router - навигация
• Nanostores - управление состоянием
• Vite - сборщик и dev сервер

Backend

• Elysia.js - веб-фреймворк
• Prisma - ORM для работы с базой данных
• PostgreSQL - база данных
• Eden - типизированный API клиент

📱 Функциональность

Основные возможности

1. Управление рецептами

   • Просмотр списка рецептов
   • Создание новых рецептов
   • Детальная информация о рецепте

2. Корзина покупок

   • Добавление рецептов в корзину
   • Управление количеством
   • Автоматический расчет КБЖУ

3. Список покупок

   • Автоматическое формирование списка ингредиентов
   • Учет имеющихся ингредиентов
   • Расчет необходимого количества

4. Управление ингредиентами

   • Создание новых ингредиентов
   • Указание наличия ингредиентов
   • Удаление неиспользуемых ингредиентов

5. Календарь планирования

   • Планирование питания по датам
   • Массовое добавление в корзину
   • Группировка по дням недели

🐛 Отладка

Логи

# Backend логи
pnpm dev

# Frontend логи
pnpm start-frontend

Проверка API

# Проверка доступности API
curl http://localhost:3000/api/recipes

# Проверка базы данных
curl http://localhost:3000/api/ingredients

Типизация

# Проверка TypeScript типов
pnpm types

🔄 Разработка

Добавление новых функций

1. Backend API:

   • Добавьте новые маршруты в src/api.ts
   • Обновите схему базы данных в prisma/schema.prisma
   • Создайте миграцию: pnpm db:migrate

2. Frontend:

   • Добавьте новые компоненты в src/app.tsx
   • Обновите API клиент в src/api-client.ts
   • Добавьте новые маршруты в React Router

Структура компонентов

// Пример добавления нового компонента
function NewFeature() {
  const data = useStore($dataStore)

  return (
    <Stack gap="lg">
      <Title>Новая функция</Title>
      {/* UI компоненты */}
    </Stack>
  )
}

🚀 Деплой

Production сборка

# Сборка проекта
pnpm build

# Запуск production сервера
pnpm start

Переменные окружения

# Production переменные
NODE_ENV=production
DATABASE_URL="postgresql://user:password@host:port/database"
PORT=3000

📞 Поддержка

При возникновении проблем:

1. Проверьте логи в терминале
2. Убедитесь, что база данных запущена
3. Проверьте переменные окружения
4. Перезапустите серверы

📄 Лицензия

MIT License