E-Shop
En demo-e-handel byggd i React (Vite + Tailwind) och publicerad på Netlify som skoluppgift på Företagsuniversitetets YH-program.
Min roll: Ensam utvecklare – skoluppgift på Företagsuniversitetet
2025
Teknikstack
React · Vite · Tailwind · Netlify
Problem / Kontext
Skoluppgift för att visa förståelse för React-grunderna genom att bygga ett realistiskt e-handelsgränssnitt — produktlista, kundvagn och kassaflöde — utan en backend.
Mål
- Implementera fullständig kundvagns-UX med React-tillstånd och Context
- Bevara kundvagnens tillstånd vid sidomladdning med localStorage
- Träna komponentkomposition och responsiv layout med Tailwind
- Distribuera offentligt för portfoliodemonstration
Utmaningar
- Hålla kundvagnens tillstånd synkroniserat över djupt nästade komponenter utan prop-drilling
- Hantera kvantitetsuppdateringar och prisberäkningar korrekt
- Göra kassaflödet naturligt utan en riktig betalningsbackend
Viktiga tekniska beslut
- React Context + useReducer för förutsägbar kundvagnstillståndshantering
- localStorage-synk via en anpassad hook för att bevara mellan sessioner
- Vite för nästan omedelbar HMR under utveckling
- Netlify för gratis, automatisk distribution från GitHub
Resultat / Effekt
- Fullt fungerande e-handels-UX-demo tillgänglig på en offentlig URL
- Demonstrerade kunskaper i React Context, hooks och komponentarkitektur
- Godkänt betyg och positiv feedback från lärare
Vad jag skulle förbättra härnäst
- Lägg till en riktig betalningsintegration (Stripe) och orderhanteringsbackend
- Implementera produktsökning, filtrering och sortering
- Lägg till användarautentisering för orderhistorik