Разработка сложного React-калькулятора логистики | Google Maps API, Zod, Radix UI

Ссылка на работу
image image image
Проект для лондонской мувинговой компании SmartRoom. Задача — полностью автоматизировать выдачу квот (quotes) клиентам, заменив ручной просчет менеджерами на точный алгоритм в браузере. Ключевой функционал: • Многошаговая форма (Multi-step): 5 логических экранов с кэшированием прогресса в localStorage. Строгая валидация данных на каждом шаге с помощью Zod. • Интеграция Google Maps API: Использование Places Autocomplete для точного ввода адресов и Directions API для рендеринга маршрута на карте с расчетом миляжа. • Динамическое ценообразование: Разработан сложный математический алгоритм. Цена пересчитывается в реальном времени, учитывая: точный объем выбранных предметов (инвентарь разбит по комнатам), этажность (с лифтом/без), наценки за выходные/праздники, срочность и загруженность фургонов. • Умный UX: Внедрены компоненты Radix UI для идеальной доступности (a11y) и плавных анимаций. Автоматический апгрейд тарифов (кол-во грузчиков) в зависимости от объема. • Связь с Backend: Отправка собранных данных и итоговой цены через WP REST API. Бизнес-ценность: Снижение нагрузки на колл-центр, мгновенная выдача точной цены клиенту (рост конверсии в заявку) и защита от человеческого фактора при расчетах. Стек: React, Zod, Radix UI, Google Maps API (Places, Directions), TailwindCSS, Vite. 🔗 Детальный разбор логики и Live-версия на моем сайте: