Technical

Sparex- Car / Vehicle Spare Parts online store – Case Study

Sparex- Car / Vehicle Spare Parts online store

Overview

Tech Stack

| Layer | Technologies | |-------|--------------| | Frontend | Next.js 16 (App Router), React 19, TypeScript, Tailwind CSS 4 | | Backend | Next.js API routes, Prisma 7, PostgreSQL | | Database | Vercel Postgres / Prisma Accelerate (serverless-friendly) | | Auth | NextAuth.js v5 (credentials, session, role-based) | | Payments | Stripe (checkout, webhooks) | | Deployment | Vercel (serverless, env-based config) | | Other | PWA (installable), Resend (optional order emails), DVLA/VDG vehicle APIs |

About this project

Features

Shop (customer)

  • Browse categories and 240+ sample products (GSF-style category tree)
  • Find by vehicle: enter registration (DVLA/VDG lookup) or choose make/model/year
  • Product pages, cart, Stripe Checkout, order confirmation
  • Responsive layout and mobile navigation
  • Installable PWA (Sparex branding, favicon, manifest)

Admin (protected)

  • Dashboard with products, categories, and orders CRUD
  • Responsive admin UI with mobile menu
  • Role-based access (admin-only routes via middleware)

Auth

  • Sign in / Register (credentials)
  • Session handling and redirects
  • Seeded admin user for demo

Data & ops

  • Prisma migrations and shared seed (categories, products, vehicles, admin)
  • Seed runnable locally or via secure API on Vercel
  • Product images use app logo (/spareparts.png); seed updates placeholders to logo
  • Env support for DATABASE_URL, POSTGRES_URL, STORAGE_PRISMA_DATABASE_URL (Vercel/Accelerate)

Highlights

  • Full e-commerce flow: categories → products → vehicle fit → cart → Stripe checkout → orders
  • Vehicle integration: number-plate lookup (DVLA/VDG) and make/model/year filters with product compatibility
  • Production-ready deploy: Vercel, serverless DB (Accelerate/direct Postgres), lazy Prisma client for build, env-based seed
  • Maintainable structure: shared seed module (CLI + API), typed API routes, clear app/dashboard/auth layout

Technology stack

  • Prisma
  • PostgreSQL
  • Stripe
  • PWA
  • Next .js
  • React 19
  • Typesript

Categories

Database Management system, Ecommerce, MOT centre, Car spare parts

Completed: 2026-02-21

Links

This post was generated from our portfolio. View all projects or get in touch for a similar project.

Back to Resources