Frontkom Demo: Alle blokker og varianter

Kunde

Demo AS

Bransje

Teknologi og digitale tjenester

Oppdrag

Utvikle en komplett digital plattform med moderne teknologi, skalerbar arkitektur og et intuitivt redaksjonsverktøy.

Teknologi

Next.jsSanity CMSTypeScriptTailwind CSSVercel

Nettside

frontkom.no

Madi paper — Den ferdige løsningen sett fra fugleperspektiv

Bakgrunn

Hvorfor vi bygget dette

Demo AS hadde lenge operert med en utdatert og fragmentert digital infrastruktur som hemmet veksten. Behovet for en samlet plattform som kunne håndtere alt fra innholdspublisering til transaksjoner og datainnsikt, var lenge blitt nedprioritert. Da styret satte digital transformasjon øverst på agendaen, var det klart at tiden for en helhetlig løsning var kommet.

Frontkom ble engasjert for å kartlegge eksisterende systemer, identifisere flaskehalser og utarbeide en fremtidsrettet arkitektur. Målet var ikke bare å erstatte det gamle – men å legge grunnlaget for en skalerbar plattform som kunne vokse med virksomheten i de neste ti årene.

Tilnærming

Slik løste vi det

Vi valgte en moderne JAMstack-arkitektur med Next.js som rammeverk og Sanity CMS som innholdslag. Denne kombinasjonen gir lynrask sidegenerering gjennom statisk og inkrementell regenerering, kombinert med en fleksibel og strukturert redaksjonsopplevelse som redaksjonen raskt tok til seg.

Utviklingsteamet jobbet i tosprintsykluser med tett dialog med kunden. TypeScript ble brukt gjennomgående for å sikre typesikkerhet og redusere feil i produksjon, mens Tailwind CSS sørget for et konsistent og vedlikeholdbart designsystem. Vercel ble valgt som hostingplattform for sin uovertruffen distribusjon og zero-downtime-deployer.

Madi mockup — Administrasjonspanelet gir redaktøren full kontroll

Frontend-arkitekturen er bygget på komponentbaserte prinsipper der hver UI-enhet er isolert, testbar og gjenbrukbar. Vi benyttet React Server Components der det var hensiktsmessig for å minimere JavaScript sendt til klienten og sikre optimal Core Web Vitals-score.

Designsystemet ble bygget bottom-up med atomære komponenter som knapper, inndatafelt og typografi, før vi satte disse sammen til mer komplekse mønstre. Storybook ble brukt som levende dokumentasjon og sikret konsistens på tvers av alle sider og flater i løsningen.