Kunden
Gressenteret leverer ferdigplen og hagetilbehør fra Bærum. De har levert kvalitetsplen i Oslo, Asker, Bærum og Buskerud siden tidlig på 90-tallet, og har høyeste kredittverdighet hos Experian. Sortimentet dekker ferdigplen, grønne vegger, hagetilbehør og profesjonell hageveiledning.
Utfordringen
Gressenteret trengte en produksjonsklar nettbutikk, ikke en mal eller standard Shopify-løsning. De trengte et skreddersydd system der kunder kunne bla i produkter, beregne plenpris og betale med Vipps eller Klarna. Løsningen måtte håndtere produktbilder via Cloudflare R2, administrere ordrer gjennom et admin-API og kjøres i Docker for enkel publisering.
Hva vi bygget
Full-stack monorepo
Prosjektet er strukturert som et pnpm workspace monorepo med tre pakker: en Next.js 15 frontend (React 19), en Fastify API-backend med Prisma ORM, og en delt pakke med Zod-valideringsskjemaer og TypeScript-typer brukt av begge apper. Dette holder kontrakten mellom frontend og backend synkronisert uten kodeduplisering.
Produktkatalog og handlekurv
Nettbutikken inkluderer kategorisider for ferdigplen, grønne vegger og tilbehør, hver med produktdetaljsider. En handlekurv på klientsiden lagres på tvers av økter og kobles til betalingsflyten. Produktdata administreres gjennom API-et med admin-nøkkel-beskyttede endepunkter.
Norsk betalingsintegrasjon
Betalingsløsningen støtter både Vipps og Klarna. Arkitekturen er bygget med webhooks for betalingsbekreftelse, ordrestatusoppdateringer og feilhåndtering. Betalingsstubber er på plass for testmiljøet, med en ren oppgraderingsvei til produksjons-API-nøkler.
Bildehåndtering med Cloudflare R2
Produktbilder lastes opp via presignerte URL-er til Cloudflare R2 og serveres via et eget domene. Dette holder bildelagring utenfor applikasjonsserveren og utnytter Cloudflares kantnettverk for rask levering.
Docker-først publisering
Hele stabelen – PostgreSQL, API og frontend – kjører i Docker Compose. Utvikling og produksjon deler samme containerarkitektur med separate compose-filer. Hot reload er koblet via volum-mounts i utvikling. Produksjonskonfigurasjonen legger til helsesjekker og omstartspolicyer.
Beslutninger verdt å forklare
Arkitektur
Skreddersydd fremfor Shopify
Gressenterets prismodell involverer arealberegninger, leveringssoner og sesongbasert tilgjengelighet. En plattform som Shopify ville trengt tillegg på tillegg. Skreddersydd bygging betyr at hver funksjon passer den faktiske forretningslogikken.
Betaling
Vipps + Klarna, ikke Stripe
I Norge er Vipps standard mobilbetaling. Klarna håndterer faktura og avbetalingskjøp. Stripe er populært blant utviklere, men ikke blant norske forbrukere som kjøper hagetilbehør. Vi gikk med det kundene faktisk bruker.
Monorepo
Delte typer, én kilde til sannhet
Den delte pakken betyr at produktskjemaer, ordretyper og valideringsregler defineres én gang og brukes av både API-et og frontenden. Ingen drift mellom hva API-et forventer og hva frontenden sender.
Bilder
R2 fremfor lokal lagring
Produktbilder endres ofte – sesongvarer, nye bilder, oppdaterte miniatyrbilder. Cloudflare R2 med presignerte opplastinger betyr at admin kan oppdatere bilder uten å berøre serveren eller redistribuere.
Teknologistabel
- Frontend: Next.js 15.1, React 19, App Router
- Backend: Fastify, Prisma ORM
- Database: PostgreSQL 16
- Betaling: Vipps ePayment, Klarna Checkout
- Bilder: Cloudflare R2
- Validering: Zod (shared package)
- Infrastructure: Docker Compose, Hetzner Cloud
- Monorepo: pnpm workspaces
Resultatet
Gressenteret har en produksjonsklar nettbutikk som passer måten virksomheten faktisk fungerer på. Kunder kan bla i produkter etter kategori, beregne plenpris for sitt område, legge varer i handlekurven og betale med metodene de allerede bruker. Admin håndterer produkter og ordrer gjennom et ryddig API, og hele løsningen publiseres med én docker-compose-kommando.
Ikke en malbutikk. En plattform bygget for virksomheten.
Tilpasset prislogikk. Norske betalingsmetoder. Bilder levert via edge-nettverk. Én kommando for publisering.