Sushimi - Веб-приложение для доставки суши

Современный сайт доставки суши и роллов, разработанный с использованием Next.js и PostgreSQL.

Технологии

• Фронтенд: Next.js 13 (App Router), React, TypeScript, Tailwind CSS
• База данных: PostgreSQL
• Хостинг: Vercel + Neon PostgreSQL

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

• Просмотр меню по категориям
• Детальные страницы товаров
• Корзина покупок
• Оформление заказа
• Акции и промокоды

Установка и запуск

Локальная разработка

1. Клонирование репозитория

git clone https://github.com/your-username/sushimi.git
cd sushimi

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

npm install

3. Автоматический запуск проекта

Проект включает автоматизированные скрипты для запуска и остановки всех необходимых сервисов:

# Запуск проекта (база данных + приложение)
npm run local:start

# Остановка проекта (база данных + приложение)
npm run local:stop

Скрипт local:start выполняет следующие действия:

• Останавливает все предыдущие процессы (если они запущены)
• Запускает контейнер PostgreSQL через Docker
• Ожидает готовности базы данных
• Инициализирует базу данных тестовыми данными
• Запускает Next.js приложение

После запуска приложение будет доступно по адресу http://localhost:3000

Важно: Для работы автоматических скриптов требуется установленный Docker.

4. Ручной запуск (альтернативный способ)

Если вы предпочитаете запускать сервисы вручную:

# Инициализация базы данных
npm run db:init

# Запуск приложения
npm run dev

Развертывание на Vercel

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

• Создайте базу данных в Neon (https://neon.tech)
• Скопируйте строку подключения (DATABASE_URL)

2. Настройка проекта на Vercel

• Подключите ваш GitHub репозиторий к Vercel
• В настройках проекта добавьте следующие переменные окружения:
  • DATABASE_URL - строка подключения к базе данных Neon
  • USE_SSL - установите в true для Neon

3. Запустите развертывание

Vercel автоматически запустит скрипт npm run vercel-build, который инициализирует базу данных и выполнит сборку приложения.

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

sushimi/
├── app/                # Next.js App Router
│   ├── api/            # API маршруты
│   ├── cart/           # Страница корзины
│   ├── checkout/       # Страница оформления заказа
│   ├── menu/           # Страница меню
│   ├── promotions/     # Страница акций
│   └── page.tsx        # Главная страница
├── components/         # React компоненты
│   ├── features/       # Функциональные компоненты
│   ├── layouts/        # Компоненты макетов
│   ├── shared/         # Общие компоненты
│   └── ui/             # UI компоненты
├── lib/                # Утилиты и библиотеки
│   ├── api.ts          # API функции
│   └── db.ts           # Функции для работы с базой данных
├── public/             # Статические файлы
│   └── images/         # Изображения
├── scripts/            # Вспомогательные скрипты
│   ├── init-db.js      # Скрипт инициализации БД
│   ├── manual-db-init.js # Скрипт ручной инициализации БД
│   ├── local/          # Скрипты для локальной разработки
│   │   ├── start.js    # Скрипт запуска проекта
│   │   └── stop.js     # Скрипт остановки проекта
│   └── generate-placeholders.js # Скрипт генерации заглушек изображений
└── types/              # TypeScript типы

Разработка

Проект следует дорожной карте, описанной в файле ROADMAP.md. Основные направления разработки:

1. Декомпозиция компонентов
2. Улучшение типизации
3. Оптимизация управления состоянием
4. API и обработка ошибок
5. Улучшение UX и производительности
6. Безопасность и валидация данных
7. Тестирование
8. CI/CD и мониторинг

Устранение неполадок

Проблемы с запуском

1. Порт 3000 занят

   • Запустите npm run local:stop для остановки всех процессов
   • Если проблема не решена, найдите и завершите процесс, занимающий порт 3000

2. Ошибки с базой данных

   • Убедитесь, что Docker запущен
   • Проверьте, что порт 5433 не занят другим процессом
   • Запустите npm run local:stop и затем npm run local:start

3. Проблемы с изображениями

   • Запустите node scripts/generate-placeholders.js для создания заглушек изображений

Лицензия

MIT