Analytics-service — это веб-приложение для работы с CSV файлами, которое предоставляет три основных функционала: анализ загруженных CSV файлов, генерацию тестовых CSV файлов и просмотр истории обработки.
Основная страница приложения для анализа CSV файлов.
Функционал:
- Загрузка CSV файла через drag-and-drop или выбор файла
- Отправка файла на бэкенд для агрегации и анализа данных
- Отображение статистики по загруженному файлу (хайлайты и аналитика)
- Автоматическое сохранение результатов обработки в историю
- Обработка ошибок при загрузке или обработке файла
Скриншоты:
Страница для генерации тестовых CSV файлов.
Функционал:
- Генерация готового CSV файла одним нажатием кнопки
- Автоматическое скачивание сгенерированного файла
- Настройки генерации (размер файла, наличие ошибок, максимальные расходы)
- Отображение статуса генерации (ожидание, обработка, завершено)
Скриншоты:
Страница для просмотра истории обработки файлов.
Функционал:
- Отображение всех ранее обработанных файлов с их статусами (успешно/ошибка)
- Просмотр статистики по каждому обработанному файлу
- Удаление отдельных записей из истории
- Очистка всей истории одним нажатием
- Быстрый переход к генератору CSV файлов
Скриншоты:
- Скачать бэкенд
- перейти в папку бэкенда и запустить его:
npm run startnpm install # установка зависимостей
npm run dev # запуск сервера сервер появится здесь http://localhost:5173/
npm install # установка зависимостей
npm run build
npm run preview # запуск сервера сервис появится здесь http://localhost:4173/
- Страницы:
/pages(основные страницы приложения) - UI-компоненты:
/components/UI(переиспользуемые компоненты: кнопки, ссылки и т.д.) - Остальные компоненты:
/components
- API слой:
API.js- взаимодействие с бэкендом - Слой данных:
store/index.js- управление состоянием через Zustand - UI слой: напрямую взаимодействует с API и хранилищем
- Все хранилища Zustand находятся в одном файле из-за их небольшого размера
- Отсутствует отдельный слой бизнес-логики ввиду простоты сервиса