BestHack — Frontend часть

Описание

Маркетплейс топлива — это веб-приложение, разработанное для эффективной торговли остатками топливных ресурсов. Платформа позволяет пользователям просматривать доступные лоты топлива, фильтровать их по различным параметрам (регион, тип топлива, нефтебаза) и осуществлять поиск по ключевым словам.

Основные возможности веб-приложения:

• Авторизация и регистрация пользователей
• Просмотр списка доступных лотов топлива
• Фильтрация лотов по региону, типу топлива и нефтебазе
• Поиск лотов по ключевым словам
• Просмотр детальной информации о конкретном лоте
• Оформление заказа на приобретение определённого объёма топлива
• Отображение статистики (количество лотов, максимальная и минимальная цена)

Архитектура

Приложение разработано с использованием современного стека технологий:

Фронтенд

• React — для создания пользовательских интерфейсов
• TypeScript — для повышения надежности кода
• React Router — для навигации между страницами
• React Query — для управления серверным состоянием и кэширования
• Ant Design — компоненты для создания современного UI
• SCSS — для стилизации компонентов
• Vite — для быстрой и удобной сборки

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

Проект организован по принципу Feature-Sliced Design:

• app/ — глобальная конфигурация приложения, роутинг
• pages/ — страницы приложения (Авторизация, Регистрация, Маркетплейс, Лот)
• widgets/ — составные компоненты, объединяющие несколько фич (Фильтры, Список лотов)
• shared/ — переиспользуемые компоненты, утилиты, API-сервисы

Взаимодействие с API

• Приложение взаимодействует с бэкендом через REST API
• Для HTTP-запросов используется библиотека Axios

Как запускать

Локально

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

   git clone https://github.com/oth33r/besthack
   cd besthack

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

   npm install

3. Создайте .env файл в корне репозитория:

   VITE_API_URL=http://185.157.214.169:8888

4. Соберите проект:

   npm run build

5. Запустите предпросмотр собранного проекта:

   npm run preview

6. Для запуска режима разработки:

   npm run dev

Docker

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

   git clone https://github.com/oth33r/besthack
   cd besthack

2. Соберите Docker образ:

   docker build -t besthack-frontend .

3. Запустите контейнер:

   docker run -d -p 4173:4173 --name besthack-frontend besthack-frontend

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