Lavido Auto Parts
Next.js 15 App Router · 8 route sections · full design system
Lavido Auto Parts is a premium ecommerce platform for a Vosloorus, Johannesburg-based auto parts retailer. The brief was to build a professional, scalable storefront that could compete with national retailers — clean enough to earn trust from first-time visitors, functional enough to handle real purchase flows. I architected and built the entire frontend on Next.js 15 App Router with TypeScript, implementing a full shop experience: filterable product listings, detailed product pages with specs and compatibility tables, a three-step checkout (delivery, shipping, payment), and a Zustand-powered cart that persists across sessions. Beyond the shop, the platform includes a workshop booking system, a customer account dashboard, a blog, and full authentication screens — everything a growing retail business needs to operate digitally from day one.
What was built
- ▸Shop listing with sidebar filters — brand, category, price range, and stock status
- ▸Product detail pages with specification tables and part compatibility information
- ▸3-step checkout flow — Delivery → Shipping → Payment → Order confirmation
- ▸Zustand cart with localStorage persistence — survives page refresh and navigation
- ▸Workshop booking form with service type, date, and time slot selection
- ▸Customer dashboard — order history, saved addresses, profile, and settings
- ▸Auth system — login, register, and Google/Facebook social sign-in screens
- ▸Custom design system using Playfair Display, Space Grotesk, and Inter typefaces
