Table of Contents

1. I'M's Prediction Dashboard
2. Возможности
3. Требования
4. Установка
   1. Клонирование репозитория
   2. Установка зависимостей
   3. Настройка окружения
   4. Запуск приложения
5. Использование
6. Проблемы при разработке
   1. Настройка аутентификации через next-auth
   2. Создание графиков с использованием recharts
   3. Проблемы с самим Next.js или React
   4. Оптимизация производительности

I'M's Prediction Dashboard

Это админ-дэшборд для визуализации прогнозов заказов в ресторанах. Он предоставляет аналитику и данные о прогнозах спроса.

Возможности

• Интерактивный дэшборд с анимациями.
• Просмотр прогнозов спроса для различных мест и временных периодов.
• Графики по общим категориям, типам заказов и ежедневному спросу.
• Возможность загрузить свой CSV файл с данными.
• Аутентификация с использованием учетных данныхю

Требования

• Node.js 18+

Установка

1. Клонируйте репозиторий:

   git clone https://github.com/MelsovEZ/Spot-Sales-Prediction-Frontend.git
   cd Spot-Sales-Prediction-Frontend

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

   npm install

3. Настройте окружение: создайте файл .env и добавьте:

   DATABASE_URL=
   NEXTAUTH_SECRET=
   

4. Запустите приложение:

   npm run dev

5. Откройте приложение по адресу http://localhost:3000.

Использование

• Выберите временной диапазон (например, 1 день или 1 неделя).
• Просматривайте данные для различных мест через вкладки.
• Изучайте графики по категориям и типам заказов.

Проблемы при разработке

1. Настройка аутентификации через next-auth:

   • Ошибки при конфигурации токенов и секретных ключей (неправильный NEXTAUTH_SECRET или полное его отсутствие в .env файле).
   • Проблемы с Тайпскриптом и NextAuth.

2. Создание графиков с использованием recharts:

   • Ошибки при передаче данных в компоненты графиков из-за неправильной структуры данных или отсутствия нужных полей.
   • Некорректное отображение данных для больших временных диапазонов из-за перегрузки осей или слишком большого количества меток.
   • Проблемы с адаптацией интерфейса для мобильных устройств, где графики отображалсь некорректно :skull_emoji:
   • Неправильное использование данных.

3. Проблемы с самим Next.js или React:

   • Ошибки гидрации (Hydration failed).
   • Траблы при передаче пропсов.

4. Оптимизация производительности:

   • Увеличение времени загрузки страницы из-за слишком тяжелых анимаций (анимации графиков).
   • Неправильная структура компонентов.
   • Отсутствие кеширования данных.