ADP - платформа для планирования и отслеживания строительных задач и процессов

Строительные компании сталкиваются с проблемой координации множества параллельных процессов: подготовка документации, закупка материалов, работа подрядчиков, контроль сроков. Стандартные инструменты вроде MS Project слишком универсальны и не учитывают специфику отрасли — шаблонные процессы поставок, привязку задач к конкретным объектам, работу с чеклистами приёмки. Fortech разработал веб-платформу для планирования и контроля строительных проектов с нуля. Команда взяла на себя frontend целиком: от архитектуры до интеграции с бэкендом. В основе — React с TypeScript, библиотека MUI для UI-компонентов, react-dnd для drag-and-drop взаимодействий в Kanban и диаграмме Ганта.

• Разработать систему управления проектными задачами с визуализацией в виде диаграммы Ганта и Kanban-досок

• Реализовать механизм создания и редактирования шаблонов задач с поддержкой чеклистов и процессов подготовки поставок

• Создать административный интерфейс для управления пользователями, отделами и правами доступа

• Построить типобезопасную архитектуру взаимодействия с API с использованием TypeScript и Axios

• Оптимизировать производительность рендеринга сложных интерфейсов с большими объёмами данных

• Разработать систему валидации форм на основе formik и yup для создания и редактирования сущностей проекта

Проект стартовал с проектирования компонентной архитектуры. Выбор пал на React с TypeScript для строгой типизации бизнес-логики и контрактов API. Material UI стал базой для UI-kit — библиотека даёт готовые компоненты с accessibility из коробки, которые кастомизировались под дизайн-систему проекта.

Для роутинга использовался react-router-dom v6 с типизированными route definitions, что исключило ошибки навигации на этапе разработки.

Производительность и интерактивность Основной технический вызов — производительность интерактивных интерфейсов с большим количеством элементов. Диаграмма Ганта и Kanban-доски для крупных проектов содержат сотни задач, которые нужно рендерить, перетаскивать и обновлять в реальном времени.

• Для drag-and-drop выбрана библиотека react-dnd — она даёт полный контроль над логикой перетаскивания и позволяет оптимизировать ререндеры через мемоизацию компонентов.

Работа с данными и формами Запросы к API организованы через Axios с централизованной обработкой ошибок и типизированными response-моделями, что упростило работу с данными и отладку.

Формы создания задач, шаблонов и чеклистов построены на связке formik + yup. Formik управляет состоянием форм и минимизирует ререндеры при вводе данных, yup-схемы валидации типизированы и переиспользуются между формами.

Типизация и рефакторинг Все компоненты покрыты TypeScript интерфейсами: от props до API responses. Это позволило отловить несоответствия типов до запуска кода.

Рефакторинг legacy-участков включал:

• Вынос бизнес-логики в custom hooks;
• Разделение компонентов на presentation и container layers;
• Оптимизацию селекторов состояния для предотвращения лишних рендеров.

• Drag-and-drop для Kanban и Ганта — интеграция react-dnd с мемоизацией компонентов задач через React.memo для рендера только изменённых элементов
• Валидация сложных форм — yup-схемы с вложенными объектами и массивами, интегрированные с formik для синхронной и асинхронной валидации
• Типобезопасное взаимодействие с API — Axios interceptors для обработки ошибок и refresh tokens, TypeScript интерфейсы для всех endpoint responses
• Переиспользуемые UI-компоненты — кастомизация MUI через styled components и theme provider, создание обёрток с типизированными props
• Оптимизация производительности — lazy loading страниц через React.lazy и Suspense, виртуализация длинных списков, debounce для поисковых инпутов
• Маршрутизация с защитой роутов — react-router-dom v6 с HOC для проверки прав доступа и редиректов на основе ролей пользователей
• Рефакторинг legacy кода — перевод классовых компонентов на functional с hooks, вынос переиспользуемой логики в custom hooks

Строительные компании получили инструмент для полного цикла управления проектами: от декомпозиции работ до контроля выполнения через Kanban и Ганта. Менеджеры создают шаблоны типовых процессов с чеклистами, назначают исполнителей, отслеживают прогресс в реальном времени.

• Производительность: Интерфейс работает с сотнями задач без тормозов благодаря оптимизации рендеринга и работы с API.
• Эффективность бизнеса: Бизнес получил масштабируемую платформу с типобезопасным кодом и модульной архитектурой.
• Надежность: TypeScript и строгая типизация сократили количество багов в production, а переиспользуемые компоненты ускорили добавление новых фич.

Проект готов к расширению функционала и интеграции с внешними системами учёта.