Project
FORGE
Front-end Developer
Een fictieve outdoor-webshop, volledig gebouwd in HTML, CSS en JavaScript. Geen frameworks: wel filteren, zoeken, winkelwagen en een shop die aanvoelt als een echte store.
Shop-interface met productoverzicht
Over dit project
FORGE is een webshop voor een fictief outdoor-merk. Ik bouwde de volledige shop-ervaring in HTML, CSS en JavaScript: producten bekijken, filteren, zoeken en items toevoegen aan een winkelwagen.
Het project draait om interactie en overzicht in een productcatalogus. Ik wilde laten zien dat ik een complete frontend kan bouwen zonder framework, met aandacht voor responsive gedrag en feedback aan de gebruiker.
Wat ik bouwde
- Home, collectie, productdetail en over ons in één shop-systeem
- Filter op categorie plus zoeken op trefwoord, zonder page reload
- Slide-in winkelwagen met localStorage tussen pagina's
01 / Het project
Ik bouwde meerdere pagina's (home, collectie, productdetail, over ons) en koppelde die aan één winkelwagen-systeem. Filteren op categorie, zoeken op trefwoord en hoeveelheid aanpassen werken zonder page reload.
02 / Aanpak
- 01
Concept & structuur
Eerst bepaald welke pagina's en shop-acties nodig waren: browsen, filteren, product bekijken, winkelwagen.
- 02
Visueel ontwerp
Donker kleurenschema met koperen accenten gekozen passend bij outdoor gear.
- 03
Bouwen
HTML-structuur, CSS-layout en JavaScript-interacties stap voor stap gekoppeld.
- 04
Responsive testen
Layout en navigatie getest op mobiel, inclusief hamburger-menu en touch-vriendelijke knoppen.
03 / Ontwerp & interactie
Probleem
In een webshop met veel producten moet je snel kunnen filteren én zoeken. Alleen categorieknoppen of alleen een zoekbalk is te beperkt.
Keuze
Ik combineerde filters en zoeken, zodat je de catalogus kunt verkleinen op categorie en daarna verder kunt verfijnen met trefwoorden.
Keuze
De winkelwagen opent als slide-in panel in plaats van een aparte pagina, zodat je context behoudt terwijl je verder shopt.
04 / Development
Alles draait op vanilla JavaScript: DOM-manipulatie voor filters, zoekresultaten, winkelwagen-state en toast-meldingen. CSS zorgt voor hover-states, animaties en responsive breakpoints zonder extern framework.
De winkelwagen blijft bewaard tussen pagina's via localStorage, zodat je niet opnieuw begint als je een product bekijkt en teruggaat naar de collectie.
Stack
Client-side interactie, state en UI. Waar nodig gekoppeld aan backend, CMS of opslag.
05 / Geleerd
Zonder component-structuur wordt JavaScript snel onoverzichtelijk. Ik heb functies en DOM-updates later bewuster gegroepeerd per feature (filter, cart, search).
Kleine feedback, zoals een toast bij "toegevoegd aan winkelwagen", maakt een shop direct duidelijker. Dat kost weinig code maar veel voor de ervaring.