Load Up — TMS и диспетчерская доска
Крупная система управления перевозками для грузовой компании: живая доска грузов, рейсы, обслуживание автопарка, мониторинг безопасности, бухгалтерия и HR в одном React-приложении.
- Роль
- Frontend-инженер
- Longhorn Logistics Group
- Год
- 2026
- Стек
- React 19TypeScriptVite 8TanStack RouterTanStack QueryTanStack TableTanStack VirtualZustandSTOMP/WebSocketWebRTCMapLibreLeafletTailwind CSS 4Vitest
- Кодовая база
- ~3 100 файлов
- Фич-модулей
- 24
- Моих коммитов
- 250+
Операционный дашборд: KPI и живая карта 600+ водителей Update Board: статусы автопарка, прицепы и локации в одной виртуализированной таблице Рейсы: погрузка, доставка и статус диспетчеризации Планировщик маршрутов для траков на HERE Maps с весовыми станциями
Продукт
Load Up управляет грузовой компанией от начала до конца. Диспетчеры бронируют и отслеживают грузы на живой доске; автопарк и сервис ведут машины, заказ-наряды и осмотры; служба безопасности отслеживает инциденты с видео; бухгалтерия ведёт расчёты и зарплаты — всё в одном веб-приложении, которым ежедневно пользуются многие отделы.
Моя роль
Присоединился к команде в июне 2026 и выпускаю фичи в модулях доски, автопарка и безопасности внутри большой, быстро развивающейся кодовой базы со строгими конвенциями.
Архитектура
- React 19 + TanStack Router — файловые маршруты и автоматический code splitting (~210 файлов маршрутов).
- Feature-sliced домены — каждый из 24 модулей владеет своими
api,components,hooks,schemasи стором. - Серверное состояние на TanStack Query с оптимистичными обновлениями; клиентское — Zustand; формы — react-hook-form и Zod.
- Детальные права — центральный каталог прав, используемый в сотнях компонентов.
Ключевое
- Всё в реальном времени — каналы STOMP/WebSocket синхронизируют доску грузов, грузы, уведомления и данные безопасности; звонки RingCentral WebRTC встроены в приложение.
- Большие данные, плавный UI — общая виртуализированная таблица (TanStack Table + Virtual) и карты с кластеризацией и пространственным индексом.
- Корректность в нескольких вкладках — активность оператора отправляется только из одной вкладки через Web Locks и BroadcastChannel.
- Быстрая обратная связь — Vitest разделён на node- и jsdom-проекты, прогон сократился с 8,5 до 3,65 с.
Следующий проект
Expensify — open-source вклад