Dyzlix — Smart Fuel System
Платформа управления топливом для американских траковых автопарков: рекомендации заправок, бронирования, транзакции по картам, живой трекинг и аналитика экономии.
- Роль
- Frontend lead · с нуля
- Longhorn Logistics Group
- Год
- 2024
- Стек
- Vue 3.5TypeScriptVitePiniaTanStack QueryTanStack TableTanStack VirtualHERE MapsD3STOMP/WebSocketTailwind CSS 4VitestPlaywright
- Моих коммитов
- 1 100+
- Доля в истории
- 52%
- Unit-тестов
- 320+
Живой трекинг: виртуализированный список машин и кластеры HERE Maps Fuel Book: рекомендованные заправки, уровень топлива и бронирование Аналитика: расходы, экономия, MPG и простой
Продукт
Топливо — одна из крупнейших статей расходов траковой компании. Dyzlix предлагает лучшие заправки по маршруту, цене и доступности. Букеры назначают их водителям, транзакции по картам (EFS / Relay) сопоставляются с бронированиями, а менеджеры видят экономию, MPG и простой на одном дашборде.
Моя роль
Я создал фронтенд Dyzlix с нуля и полностью отвечаю за него. Начал кодовую базу в октябре 2024 и сам выстроил всё вокруг неё:
- Архитектура — слоистая структура
app → pages → modules → shared, правила потоков данных и шаблон модуля, по которому строится каждая фича. - Сборка — сборка на Vite, конфигурация TypeScript, работа с окружениями и версионирование релизов.
- DX и качество — ESLint и Prettier, Conventional Commits, git-хуки с гейтами type-check, дизайн-токенов, границ импортов и бюджета бандла, unit-тесты и smoke-харнесс на Playwright.
- Дизайн-система — общий UI-кит, дизайн-токены и тёмная тема.
- Фичи — большая часть продукта: дашборд, Fuel Book, живая трекинг-доска, карты, транзакции, простой, права и настройки.
Сегодня я основной автор кодовой базы (1 100+ коммитов) и ориентир в том, как строятся новые фичи.
Архитектура
- Слоистая структура —
app → pages → modules → shared, близко к Feature-Sliced Design. Скрипт boundaries контролирует направление импортов и падает только на новых нарушениях. - Единый поток данных — page → view → composable → типизированный query-хук в
shared/api, TanStack Query для серверного состояния. - UI с учётом прав — ~65 детальных прав
CAN_*и доступ по провайдеру (EFS / Relay). - Real-time — STOMP поверх WebSocket для уведомлений о топливе и событий по картам.
Ключевое
- Живая трекинг-доска — виртуализированный список машин, маркеры и маршруты HERE Maps, воспроизведение маршрута и графики уровня топлива на D3.
- Ратчет-гейты качества в pre-push: type-check, контроль дизайн-токенов (без новых «сырых» цветов), границы импортов, бюджет бандла ~200 КБ gzip, allowlist лицензий и
pnpm audit. - Релизы без простоя — сборки помечаются хешем; открытые вкладки подхватывают новый релиз при следующей навигации и автоматически восстанавливаются после устаревших чанков.
- Smoke-харнесс — каждый маршрут проверяется в 2 вьюпортах × 2 темах: ошибки консоли, упавшие запросы и скриншот-диффы.
- 17 ADR документируют ключевые архитектурные решения.
Следующий проект
Bot Manager — Telegram и операции автопарка