moboPOS – Min egenbygde POS-løsning
📋 Introduksjon
Jeg har utviklet moboPOS som et treningsprosjekt for å forstå hvordan et ekte kassasystem fungerer teknisk – altså hele flyten fra produktadministrasjon til registrerte salg.
Systemet er laget med Next.js 16, TypeScript, Tailwind CSS og MongoDB.
Jeg har hatt fokus på struktur, brukervennlighet og dataflyt.
💡 Oppbygningen
Jeg har delt prosjektet inn i tydelige moduler slik at alt henger sammen, men fortsatt er lett å forstå:
🗄️ Database og API
Jeg har laget egne Mongoose-modeller for produkter, salg og returer, med tydelige felter og typer.
Alle API-ruter (Next.js App Router) bruker Zod for å validere data før de lagres – det forhindrer feil og gjør at databasen holder seg ryddig.
Systemet kobler seg mot MongoDB, men jeg har også laget fallback til localStorage, så det fungerer selv om databasen ikke svarer. Data caches lokalt og synkroniseres når forbindelsen er tilbake.
🛒 Kassesystemet
Produktene hentes fra databasen og vises i et responsivt grid med farge- og ikon-system per kategori (Mat, Drikke, Bakst, Snacks, Annet).
Når du klikker på et produkt, legges det i handlekurven, og totalsum, mva og betalingsmåte regnes ut automatisk.
Alt styres via TypeScript-typer for å unngå feil i dataflyten mellom UI og backend.
Handlekurven har validering som sørger for at du ikke kan fullføre uten betalingsmetode eller varer.
🔧 Admin-delen
Her kan du legge til, redigere eller slette produkter.
Skjemaene bruker Zod-validering og gir feilmeldinger direkte i UI.
Jeg har bygget inn margin-beregning slik at man ser både kroner og prosent i sanntid.
Alt er bygd som egne komponenter som kan gjenbrukes i flere deler av appen (f.eks. samme produktkort brukes i både admin og varebeholdning).
📊 Historikk og kvitteringer
Alle salg lagres med tidspunkt, produkter og betalingsmetode.
Jeg har laget en kvitteringsvisning som formateres automatisk og kan skrives ut rett fra nettleseren (egen print-CSS).
Det finnes også en enkel retur-prosess, der du velger et tidligere salg, krysser av produkter og legger til en returårsak – systemet regner ut total og mva automatisk.
🧭 Fokus underveis
Jeg har vært bevisst på brukeropplevelse – fargekoder, ikonbruk, hover-effekter og rask navigasjon.
Jeg har prioritert strukturert kode med rene mapper og tydelige funksjoner, heller enn å bare få det til å virke.
Prosjektet følger best practice for Next.js: delt i lib/, components/, app/api/ og app/-mapper.
Jeg har brukt TypeScript overalt for å få typesikkerhet på tvers av API, database og UI.
Selv autentiseringen er laget som et lite demo-system med localStorage og kontroll av "admin"-bruker, for å kunne vise konseptet uten backend-auth.
🔧 Videre utvikling
Prosjektet fungerer som et komplett demo-system, men neste steg kunne vært:
- Ekte innlogging med Clerk eller NextAuth
- Bedre rapporter og analyser av salg
- Utvide prissimulatoren fra idé til faktisk logikk med læring basert på tidligere salg
Kort sagt har jeg prøvd å bygge noe praktisk, strukturert og realistisk, og samtidig lært meg mye om hvordan frontend, backend og database kobles sammen i et ekte system.
🧠 Forklaringer på begreper i prosjektet
⚙️ Next.js
Et rammeverk bygget på React som gjør det enklere å bygge moderne webapplikasjoner.
Jeg bruker det fordi det gir meg både frontend og backend i samme prosjekt — altså at jeg kan lage API-endepunkter direkte i prosjektet, uten egen server.
🧩 TypeScript
Et "forbedret" JavaScript med støtte for typer.
Det betyr at man kan si hva slags data man forventer, og unngå mange småfeil.
I praksis gjør det at koden blir tryggere, mer strukturert og lettere å vedlikeholde.
🧱 Tailwind CSS
Et moderne verktøy for styling der du bruker små klasser direkte i HTML-en.
Det gjør det raskere å bygge pene, responsiv sider uten å skrive store CSS-filer.
Jeg brukte det for å sikre likt design på alle komponenter.
🗄️ MongoDB
En database som lagrer data som JSON-objekter (altså ikke tabeller som i SQL).
Det passer bra til prosjekter som moboPOS fordi dataene (varer, salg, returer) ikke alltid er helt like, og MongoDB håndterer det fleksibelt.
Jeg bruker Mongoose for å strukturere hvordan data skal se ut.
🧮 Mongoose
Et verktøy som hjelper deg å jobbe med MongoDB på en trygg og ryddig måte.
Du definerer "modeller" med felter som navn, pris, kategori, og så sørger Mongoose for at alt følger den malen.
Det blir som et mellomlag som validerer og organiserer data før det havner i databasen.
✅ Zod
Et lite bibliotek som sjekker at data som sendes til API-et faktisk er gyldige.
For eksempel at pris ikke er negativ, eller at et produkt alltid har et navn.
Hvis noe er feil, stopper det forespørselen og gir en feilmelding i stedet for å ødelegge databasen.
Jeg brukte Zod til å validere alt som sendes til API-et.
💾 localStorage
En innebygd "mini-database" i nettleseren som lagrer data lokalt.
Jeg brukte den først for å lagre varer og salg midlertidig, og senere som cache hvis MongoDB er nede.
Det gjør at systemet fortsatt fungerer offline.
🔐 Autentisering (login-systemet)
Jeg laget en enkel innlogging med localStorage – ikke ment for produksjon, men bare for å vise hvordan man kunne hatt et admin-system.
Brukeren "admin" og passord "ReadySOFT123" logger deg inn og låser opp adminsiden.
🧾 API-ruter
Dette er "inngangspunktene" backend-delen bruker – for eksempel:
/api/productsfor produkter/api/salesfor salg
Jeg har laget alle med Next.js sitt App Router-system, slik at alt ligger i samme prosjekt uten ekstern server.
📈 CRUD
Står for Create, Read, Update, Delete — altså alt du kan gjøre med data.
I prosjektet mitt støttes alle fire deler: Legge til produkter (Create), hente dem (Read), redigere (Update) og slette (Delete).
🧰 Validering
En måte å sikre at brukeren ikke sender inn feil data.
Jeg gjør det med Zod før data går til MongoDB, og med Mongoose deretter, så data blir sjekket to ganger — både i koden og databasen.
🧑💻 WCAG / tilgjengelighet
Jeg har lagt inn tydelige farger, kontraster, fokusrammer og store nok klikkeflater (min. 44px) for at systemet skal kunne brukes også av folk med nedsatt syn eller på mobil.
Det er det som menes med WCAG AA-standard.
🔁 Fallback og cache
Hvis noe går galt med databasen (for eksempel manglende nett), vil appen bruke localStorage-dataene midlertidig.
Når MongoDB kommer tilbake, synkroniseres det igjen.
Det gjør systemet mer stabilt og brukervennlig.
💡 Komponenter
Små gjenbrukbare byggeklosser i React/Next.js.
For eksempel er produktkortet, handlekurven og kvitteringsvinduet egne komponenter jeg har laget slik at de kan brukes flere steder.
📊 Admin / Dashboard
Admin-delen viser nøkkeltall, som hvor mange produkter som er aktive, gjennomsnittspris og hvor mye som er solgt i dag.
Alt regnes ut automatisk ved hjelp av funksjoner jeg har laget i utils.ts.
🧾 CSV-eksport
Jeg la til mulighet for å eksportere salgsdata til en .csv-fil.
Det gjør det mulig å åpne alt i Excel for videre analyse eller regnskap.
En slik funksjon er liten, men veldig nyttig i virkeligheten.