Context
Getting an auto-glass quote from a dealer means a phone call and a week of waiting. The goal was to give the user an instant quote by VIN — which can be confirmed by scanning the barcode on the driver's door — and immediately show the options (OEM / aftermarket) in the selected currency.
Solution
The user enters a VIN or scans the barcode through the camera (@zxing/browser), and the backend returns the available options with prices. The currency toggles between CAD and USD (CAD by default). The UI is styled in the iOS look (NavigationBar, LargeTitle, native typography, framer-motion on transitions). Partner authentication is handled via email OTP with a bootstrap flag for the first admin.
Stack and architecture
- Backend: Spring Boot 3.4.2, Spring Security, Spring Data MongoDB.
- Frontend: Next.js 16 (App Router), framer-motion,
@zxing/browser(barcode scanning),qrcode.react. - i18n / currency: EN interface, CAD/USD toggle initialized to CAD.
- Server: backend on
localhost:8092in dev, frontend on:3001.
Role and outcome
We built both the API and the iOS-flavored frontend: the quote model, VIN validation and barcode parsing, the currency toggle, and the bootstrap logic for the admin. From entering a VIN to showing a quote takes about 10 seconds.