Automotive E-commerce Platform
A car marketplace where buyers browse models, compare prices, and book a test drive - built for fast, SEO-friendly listings on mobile-first traffic.
Role
Frontend Developer
Company
Aufait Technologies
Timeline
2023 - 2024
The problem
Car buyers research heavily before they ever contact a dealer. The platform had to make a large, frequently-changing inventory easy to browse - and turn that browsing into booked test drives.
- A large catalogue of models and variants that changed often, so nothing could be hard-coded.
- Buyers compare specs and prices across many pages - slow navigation would lose them.
- Most traffic arrived on mobile, on networks where heavy pages simply don't load.
- Listings needed to be discoverable in search, which ruled out a client-only rendered app.
The solution
I built the frontend on Next.js so listing pages could render on the server - fast first paint and crawlable content - with a component system that absorbed catalogue changes without redesign work.
- Server-rendered, dynamic listing and detail pages driven entirely by API data.
- A reusable card/filter component set so new models and variants needed no new UI.
- A short, low-friction test-drive booking flow with clear validation and feedback.
- Mobile-first layouts, with imagery and interactions tuned for smaller screens.
Architecture & engineering
Ant Design supplied accessible primitives; SCSS handled structure and theming on top. The result was consistent UI with far less bespoke CSS to maintain.
- Next.js pages for SEO-critical listing and model-detail routes.
- Ant Design components extended with SCSS variables and mixins for brand styling.
- A typed data layer over REST endpoints, with loading and error states at the boundary.
- Shared layout primitives to keep spacing and typography consistent across templates.
Results & impact
The clearest signal was engagement: buyers explored more and dropped off less.
Higher user interaction
after the listings and booking-flow rebuild
- Buyers moved through more model pages per session.
- Test-drive bookings became a short, guided flow instead of a long form.
- Server-rendered listings made inventory indexable in search.
- New models shipped as data, with no additional frontend work.
Lessons learned
Building for a catalogue that never stops changing shaped how I think about component design.
Challenge
A catalogue that changes constantly.
Solution
Designed components around data shapes rather than specific models - adding inventory became a content task, not a code change.
Challenge
Balancing a component library against a custom brand.
Solution
Kept Ant Design for behaviour and accessibility, layered SCSS for visual identity - speed without looking generic.
Challenge
Turning browsing into booked test drives.
Solution
Cut the booking form to only what was necessary and surfaced the CTA throughout the journey, not just at the end.
What I'd add next
- Side-by-side model comparison with saved shortlists.
- Structured data (Vehicle schema) for richer search results.
- Image optimisation and route-level code splitting for further mobile gains.
Want to see it live?
Explore the platform, or head back to browse more of my work.