Nordic Auto Craft
Nordic Auto Craft is a self-built demo, not a client case study. It shows how I build a service-business site on a shared React 18 + TypeScript + Vite SPA stack with Tailwind CSS 3, shadcn/ui, React Router v6, TanStack Query, react-hook-form, zod, and Vitest. The site is built to static files and served with Nginx in Docker. This demo leans on framer-motion for page transitions, system-ui fonts (no Google Fonts), and Playwright for end-to-end checks. Routes cover home, services, prices, booking, about, and contact.
TL;DR
A React + Vite demo for a car service brand: clear services, booking paths, and motion-led UI shipped as static files behind Nginx in Docker. Result: A live, motion-rich demo that shows how a car service brand can present services and booking on a fast React SPA.
Concept site
Development time
Solo
Collaboration
Success
Project outcome
100%
Client satisfaction
The challenge
Car service and detailing businesses need a site that feels premium and fast, but many template builds look generic or load slowly once motion and media are added.
My approach
I built a focused React SPA with Vite 5.4 (SWC), Tailwind, and shadcn/ui, then added framer-motion for intentional transitions and Playwright for regression checks. The app ships as static files behind Nginx in Docker, with no custom backend.
Technical features
Built with modern technologies and best practices for reliability and performance
Technology stack
Modern technologies and frameworks for optimal performance
Security and quality
Built with security best practices and quality assurance
Clean architecture
Well-structured codebase following industry standards
Performance
Optimized for speed, scalability, and user experience
Key features
Shared Vite + React + shadcn SPA template tuned for automotive service messaging
Framer Motion page transitions without bloating the first paint
System-ui typography (no external font CDN)
Playwright coverage for critical booking and navigation paths
Static production build served by Nginx in a multi-stage Docker image
Project gallery
Selected screenshots from the project.
Technologies used
Related articles
Project impact
Prospective clients in automotive trades can open a live demo and see a concrete stack: React SPA, motion, testing, and Docker/Nginx delivery before they commit to a full build.