Веб-приложение для анализа земельных участков, позволяющее пользователям выбирать полигоны на карте, задавать им имя, отправлять на анализ и отслеживать статус.
- React 19 с функциональными компонентами и хуками.
- TypeScript для статической типизации.
- Vite как сборщик и dev-сервер с проксированием API.
- Redux Toolkit для управления состоянием (полигон, анализы).
- React Router для навигации между страницами.
- Material-UI (MUI) как UI-библиотека (компоненты, иконки, стилизация).
- Leaflet + react-leaflet для отображения карт и рисования полигонов.
- TanStack Query (React Query) для управления асинхронными запросами.
- SASS/SCSS с модулями и методологией BEM для стилей.
Проект построен по принципам микро-фронтендов (Micro-Frontends) с разделением на независимые функциональные модули (features), страницы (pages) и общие утилиты (shared).
src/
├── app/ # Ядро приложения
│ ├── store/ # Управление состоянием (Redux Toolkit)
│ │ ├── slices/ # Слайсы состояния (polygon, analysis)
│ │ ├── hooks.ts # Типизированные хуки useAppDispatch/useAppSelector
│ │ └── index.ts # Конфигурация store
│ ├── routes/ # Маршрутизация (React Router)
│ └── App.tsx # Корневой компонент
├── features/ # Функциональные модули
│ ├── map/ # Работа с картой
│ │ ├── components/ # MapView, LayerSwitcher
│ │ └── hooks/ # useDrawing (логика рисования полигонов)
│ ├── analysis/ # Анализ участков
│ │ ├── components/ # AnalysisForm (форма запуска анализа)
│ │ └── services/ # API-запросы к бэкенду
│ └── ui/ # Общие UI-компоненты (Menu)
├── pages/ # Страницы приложения
│ ├── MapPage/ # Главная страница с картой
│ ├── AnalysesPage/ # Список запущенных анализов
│ └── AnalysisDetailsPage/ # Детали анализа
├── shared/ # Общие ресурсы
│ └── api/ # HTTP-клиент (axios)
└── index.sass # Глобальные стили
- Микро-фронтенды – каждая функциональная область выделена в отдельный модуль (
features/), что позволяет разрабатывать и тестировать их независимо. - Управление состоянием – Redux Toolkit с двумя основными слайсами: polygon (текущий выбранный полигон) и analyses (список запущенных анализов).
- Работа с картой – основана на
react-leaflet, рисование полигонов через плагинleaflet-drawв кастомном хукеuseDrawing. - Взаимодействие с бэкендом – HTTP-клиент
axiosс базовым URL/api, проксирование через Vite в development, в production – nginx. - Стилизация – SASS с модулями, BEM-именование, глобальные стили в
index.sassиglobal.sass. - Маршрутизация – три основные страницы:
/map(карта),/analyses(список анализов),/analyses/:id(детали анализа).
- Node.js 18+ (рекомендуется LTS)
- pnpm (или npm, yarn)
pnpm installpnpm run devПриложение будет доступно по адресу http://localhost:5173. Бэкенд должен быть доступен на http://localhost:3000 (проксируется через Vite).
pnpm run buildСобранные статические файлы появятся в папке dist/. Их можно обслуживать любым HTTP-сервером (nginx, Apache, CDN).
pnpm run previewВ проекте определены следующие npm-скрипты (доступны через pnpm run <script>):
| Скрипт | Назначение |
|---|---|
dev |
Запуск dev-сервера Vite |
build |
Сборка проекта (TypeScript компиляция + Vite build) |
preview |
Локальный просмотр собранного приложения |
lint |
Проверка кода ESLint |
lint:fix |
Автоисправление ESLint проблем |
format |
Форматирование кода Prettier |
format:check |
Проверка форматирования без изменений |
type-check |
Проверка типов TypeScript |
check |
Комплексная проверка: типы + линтинг + форматирование |
На данный момент unit-тесты не настроены. Планируется добавить Jest + React Testing Library.
Проект использует ESLint и Prettier с предустановленными конфигурациями. Перед коммитом автоматически запускается lint-staged через Husky.
pnpm run lintpnpm run lint:fixpnpm run formatИспользуется упрощённая модель Git Flow:
main– стабильная ветка, соответствует production.develop– ветка для интеграции новых функций (опционально).feature/*– ветки для разработки новых возможностей.bugfix/*– ветки для исправления багов.hotfix/*– срочные исправления в production.
Сообщения коммитов должны следовать Conventional Commits:
<type>(<scope>): <subject>
Допустимые типы:
feat– новая функциональность.fix– исправление бага.docs– изменения в документации.style– изменения, не влияющие на логику (форматирование, пробелы).refactor– рефакторинг кода без изменения поведения.test– добавление или исправление тестов.chore– вспомогательные изменения (обновление зависимостей, настройки).
Пример:
feat(map): добавить переключение слоёв карты
fix(analysis): исправить отправку формы при пустом имени
Установлен Husky, который перед коммитом автоматически запускает линтинг и форматирование для изменённых файлов. Это гарантирует соответствие кода стандартам проекта.
Husky уже настроен в проекте. При установке зависимостей (pnpm install) автоматически выполняется скрипт prepare, который активирует хуки в папке .husky/. Если хуки не срабатывают, убедитесь, что:
- Хуки включены в Git:
git config core.hooksPath .husky(выполняется автоматически приpnpm install). - Файлы в
.husky/исполняемые (права+x). При клонировании репозитория может потребоваться выполнитьchmod +x .husky/*.
- pre-commit: запускает
lint-staged, который выполняетeslint --fixиprettier --writeдля изменённых файлов (TypeScript/TSX, SCSS/CSS, JSON/MD). Если линтинг или форматирование завершаются с ошибкой, коммит прерывается.
Чтобы пропустить хуки (например, для экстренного коммита), используйте флаг --no-verify:
git commit -m "..." --no-verifyНо делать это следует только в исключительных случаях.
Разработка ведётся на локальной машине с использованием Vite dev-сервера. Бэкенд должен быть запущен на localhost:3000 (или настроен прокси в vite.config.ts).
- Собрать проект:
pnpm run build. - Скопировать содержимое
dist/на сервер. - Настроить веб-сервер (например, nginx) для обслуживания статики и проксирования API-запросов.
Пример конфигурации nginx:
server {
listen 80;
server_name your-domain.com;
root /path/to/dist;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
location /api/ {
proxy_pass http://backend:3000/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
}- Добавить аутентификацию и авторизацию.
- Реализовать реальное WebSocket-оповещение о завершении анализа.
- Улучшить UX: drag-and-drop редактирование полигона, предпросмотр метрик.
- Интеграция с дополнительными картографическими сервисами (Yandex Maps, Google Maps).
- Оптимизация производительности: lazy loading страниц, мемоизация компонентов.
Данная архитектура обеспечивает модульность, масштабируемость и поддерживаемость кода. Она соответствует современным best practices фронтенд-разработки и позволяет легко добавлять новые функции без переписывания существующего кода.
Проприетарное ПО.