Проектное участие в кросс-функциональном хакатоне по разработке ML-продукта и интерфейса модели сопоставления товаров ООО “Просепт”
Цель проекта: создание онлайн-сервиса автоматизации процесса сопоставления товаров.
- Создал проект, используя Vite
- Подготовил дизайн интерфейса приложения
- Сверстал дизайн при помощи модульных стилей и SCSS, разделил интерфейс на layout (header, footer), screens (Главная, Результаты, Статистика) и ui (кнопки, прелоадеры, модальные окна и т. д.)
- Подключил API, используя axios. Все запросы к api делаются в компоненте Home и хранятся в стейт-переменных, которые передаются другим компонентам.
- Помимо технического задания: реализовал блокирование всех кнопок при отправке запроса на сервер, логику исправления ошибок из Результатов или возврат к предыдущей позиции стрелочками, добавил модальное окно для отображения ошибок, предусмотрел отдельные прелоадеры для компонентов, выбор даты в модальном окне с результатами сохраняется на время работы в окне браузера.
- Провел демо для команды
- Пушил изменения в докер
Проект занял 2-е место среди 15-ти команд.
-
Основной интерфейс сервиса
-
Модальное окно с результатами
-
Модальное окно со статистикой
- Клонировать репозиторий и перейти в него
git clone git@github.com:yaroslav-patrikeev/prosept_frontend.git
cd prosept_frontend- Установить зависимости
npm ci- Создать оптимизированную сборку в папке dist
npm run build- Запустить приложение из папки dist
npm run start- Запустить приложение в дев-режиме
npm run dev- HTML, CSS, TypeScript, React
- Препроцессор SCSS, модульные стили
- Сборщик Vite