Nordic Auto Craft
Nordic Auto Craft är en egenbyggd demo, inte ett kundcase. Den visar hur jag bygger en tjänstesajt på en gemensam React 18 + TypeScript + Vite SPA-stack med Tailwind CSS 3, shadcn/ui, React Router v6, TanStack Query, react-hook-form, zod och Vitest. Sajten byggs till statiska filer och serveras med Nginx i Docker. Den här demon har framer-motion för sidoövergångar, system-ui-typsnitt (inga Google Fonts) och Playwright för end-to-end-tester. Sidor: start, tjänster, priser, bokning, om och kontakt.
TL;DR
En React + Vite-demo för ett bilverkstadskoncept: tydliga tjänster, bokningsvägar och motion-baserad UI, levererad som statiska filer bakom Nginx i Docker. Resultat: En live-demo med motion som visar hur ett bilservicemärke kan presentera tjänster och bokning i en snabb React SPA.
Konceptwebb
Utvecklingstid
Solo
Samarbete
Lyckat
Resultat
100%
Kundnöjdhet
Utmaningen
Bilverkstäder och detailing-företag behöver en sajt som känns premium och snabb, men många mallösningar blir generiska eller långsamma när motion och media läggs till.
Min lösning
Jag byggde en fokuserad React SPA med Vite 5.4 (SWC), Tailwind och shadcn/ui, lade till framer-motion för medvetna övergångar och Playwright för regressionstester. Appen levereras som statiska filer bakom Nginx i Docker, utan egen backend.
Tekniska funktioner
Byggt med moderna tekniker och beprövade metoder för stabilitet och prestanda
Teknikstack
Moderna tekniker och ramverk för bra prestanda
Säkerhet och kvalitet
Byggt med säkerhetsrutiner och kvalitetssäkring
Ren arkitektur
Tydlig kodstruktur enligt branschpraxis
Prestanda
Optimerat för snabbhet, skalbarhet och användarupplevelse
Nyckel funktioner
Gemensam Vite + React + shadcn SPA anpassad för bilservicemeddelanden
Framer Motion-sidoövergångar utan att tynga first paint
System-ui-typografi (ingen extern font-CDN)
Playwright för kritiska boknings- och navigeringsflöden
Statisk produktionsbuild via Nginx i en multi-stage Docker-image
Projekt galleri
Utvalda skärmdumpar från projektet.
Tekniker
Relaterade artiklar
Projektets resultat
Potentiella kunder inom fordonsbranschen kan öppna en live-demo och se en konkret stack: React SPA, motion, tester och Docker/Nginx-leverans innan de bestämmer sig för en full build.