Контекст
Получить расценку у дилера на автостекло — звонок и неделя ожидания. Нужно было дать пользователю мгновенный квот по VIN, ввод которого можно подтвердить сканом баркода с двери водителя, и сразу показать варианты (OEM / aftermarket) в выбранной валюте.
Решение
Пользователь вводит VIN или сканит штрих-код через камеру (@zxing/browser), бэкенд возвращает доступные варианты с ценой. Валюта переключается между CAD и USD (изначально CAD). UI выдержан в iOS-стиле (NavigationBar, LargeTitle, нативная типографика, framer-motion на переходах). Авторизация партнёров — через email-OTP с bootstrap-флагом для первого админа.
Стек и архитектура
- Backend: Spring Boot 3.4.2, Spring Security, Spring Data MongoDB.
- Frontend: Next.js 16 (App Router), framer-motion,
@zxing/browser(скан баркода),qrcode.react. - i18n / валюта: EN-интерфейс, переключатель CAD/USD с инициализацией CAD.
- Сервер: backend на
localhost:8092в dev, фронт на:3001.
Роль и результат
Мы делали и API, и iOS-флэйвор фронта: модель котировок, VIN-валидация и парсинг баркода, переключатель валют, bootstrap-логика для админа. От ввода VIN до показа квота — около 10 секунд.