BookDragons: Nettbutikk for bruktbøker
En fullstackløsning med nettbutikk for kunder og adminfunksjonalitet for ansatte
Eksamen i faget Webteknologi ved Gokstad Akademiet gikk ut på å lage en nettbutikk for den fiktive bruktbokhandelen BookDragons. Jeg skulle lage en frontend for de besøkende, hvor de kan se hvilke bøker som selges, legge i handlekurv og gå til utsjekk, samt en adminside i backend for de ansatte som skal kunne legge til nye bøker, kategorisere dem, få oversikt over innkommende bestillinger og lett og oversiktlig navigere seg rundt.
Som del av oppgaven fikk vi en liste med brukerhistorier vi skulle rette oss etter for å løse problemstillingen. Disse inkluderte både kundesiden og ansattsiden, her er en liten del av de:
- “Som en ansatt hos BookDragons vil jeg ha mulighet til å legge inn forfattere, slik at jeg kan knytte bøker opp mot disse og ha oversikt over hvilke bøker vi har per forfatter når jeg søker i systemet.”
- “Som en ansatt hos BookDragons vil jeg få en oversikt over bestillinger som har kommet inn og hvilke bøker som hører med i bestillingen, slik at jeg kan finne frem bøkene som er bestilt til kunden kommer og henter dem.”
- “Som en kunde hos BookDragons vil jeg kunne sende inn en digital bestilling på en eller flere bøker, slik at jeg vet at disse er reservert hos BookDragons slik at jeg kan hente dem senere.”
- “Som en kunde hos BookDragons vil jeg enkelt kunne se hvilke bøker som er til salgs, slik at jeg kan finne en bok jeg liker og kjøpe den.”
- “Som en kunde hos BookDragons vil jeg kunne finne en forfatter jeg liker og se hvilke bøker fra denne forfatteren som er til salgs hos BookDragons, slik at jeg kan kjøpe bøker jeg mangler i samlingen min.”
Hvordan gikk jeg fram?
Eksamensprosjektet skulle løses ved hjelp av teknologier vi har lært i faget, og jeg valgte da TypeScript, Next.js og Payload.
Siden jeg har jobbet mest med UX og frontend, brukte jeg litt tid i starten på å sette meg inn i hvordan jeg skulle sette opp databasen min med tanke på relasjoner, og tegnet en plan for databasen opp i Figma.
Så planla jeg hva jeg kom til å trenge av komponenter og hvordan oppbyggingen av siden skulle se ut, basert på funksjonaliteten jeg trengte fra brukerhistoriene.
Dynamisk filtrering av forfatter eller sjanger
Jeg ville ha en forside med oversikt over alle bøkene, og en dropdown-meny hvor brukeren kan filtrere basert på forfatter eller sjanger. Disse filterkategoriene blir dynamisk opprettet når en forfatter eller sjanger legges til av en ansatt, enten alene eller gjennom ved å legge til en bok. Filtreringen fungerer slik at den bruker useSearchParams og useRouter fra Next. Først hentes ut verdien fra dropdown-menyen, og dette lagres som et url-parameter med useSearchParams, som da oppdaterer siden med useRouter og den nye URL-en:
Med den nye URL-en blir forfatteren eller sjangeren plukket ut og programmet henter ut bøkene som passer til det som er filtrert.
Handlekurven lagres i Zustand
For å lagre handlekurven har jeg brukt Zustand. I utgangspunktet ville jeg bruke localStorage for å ha det enkelt, men etterhvert som jeg jobbet fant jeg ut at jeg ønsket mer funksjonalitet, som å øke, minke og fjerne fra handlekurv, og derfor var Zustand et bedre valg. Handlekurven lagres også i localStorage, slik at kunden kan oppdatere siden uten å miste varene sine, noe som er realistisk for en reell nettbutikk og forventet av de som besøker siden. I Zustand-store har jeg brukt alerts for tilbakemeldinger til kunden, da jeg ikke valgte å prioritere tiden til å lage en toast eller lignende UI for å bekrefte at varen er lagt til, eller hvis de prøver å legge til flere bøker enn det er på lager. Siden jeg hadde mange brukerhistorier å forholde meg til og mye funksjonalitet som skulle lages på 1 uke, var det ikke alt jeg ønsket å gjøre som jeg rakk. Derfor synes jeg det var viktigere at handlekurven var fungerende, fremfor en top notch brukeropplevelse. Det svir litt i UX-hjertet mitt å si, samt ikke få tid til å fokusere på det, men det var viktigere med funksjonalitet i denne runden.
Her hentes handlekurven, så sjekkes det om boken allerede ligger der. Om den gjør det, sjekkes det først om det ikke er forsøkt lagt til flere bøker enn det er i lagerbeholdningen som er lagt inn i backend. Hvis ikke, øker antallet med 1. Hvis den ikke allerede er i handlekurven, legges den til.
For å dele sidene opp i at noen har handlekurv (forsiden, forfatter/sjanger/boksidene), og noen ikke (bestillingsside og ordrebekreftelse), grupperte jeg sidene i with-cart og without-cart som har hver sin layout.tsx. Først hadde jeg alle samlet under samme layout, men å ha handlekurven tilgjengelig på siden hvor kunden legger inn kontaktinformasjon og ordrebekreftelsen var et forstyrrende element, og kunne skape krøll i bestillingen. Jeg ønsket at det skulle være separat for en enklere brukeropplevelse. Selv om jeg ikke har fokusert på det visuelle designet i denne runden, har jeg tenkt på kundeflyten på siden.
Når kunden har lagt inn bestillingen sin, sendes dette til Payload med payload.create i api/ordersi/route.ts slik at en ansatt kan gå inn for å se detaljene:
Resultatet
Nettbutikk i frontend:
Ved innlevering fikk jeg laget en MVP hvor det er mulig for en kunde å se bøker og legge til i handlekurv:
Filtrere etter sjanger eller forfatter:
Lese mer om forfatteren, sjangeren eller boken:
Legge inn bestillinger:
Administrasjon i backend
De ansatte kan legge til bøker, forfattere og sjangre. Bøkene kan kobles opp mot forfattere og sjangre som allerede eksisterer eller legge til nye.
Det er også mulig for de ansatte å redigere feltene, samt slette bøker, forfattere eller sjangre:
Dette prosjektet utfordret meg på en fullstackløsning, hvor jeg måtte tenke på databasedesign, funksjonalitet basert på brukerhistorier, prosjektstyring gjennom GitHub Projects og tidsplanlegging. Det var utfordrende, men veldig lærerikt og spennende. Jeg lærte mye om typeguarding i TypeScript, databaserelasjoner og routing til Payload. Jeg ble fornøyd med filterløsningen, hvor alt opprettes dynamisk når en forfatter/sjanger legges til, og at dette settes som URL-parametre for å dynamisk vise resultatet. Selve designet er jeg ikke særlig fornøyd med, og det gjorde litt vondt å ikke få bruke så mye tid på dette. Det var et resultat av at tiden ikke strakk seg til for min del, jeg valgte heller å fokusere på funksjonaliteten jeg ville ha med for å oppfylle brukerhistoriene vi fikk utdelt.