Fullstack-utvikling
Veien fra webgrunnlag til produksjonsklare fullstack-applikasjoner, delt inn i fem faser.
Fase 1: Webgrunnlag
Forstå hvordan internett faktisk fungerer før du bygger noe på toppen av det.
Hvordan internett fungerer
Ikke fullførtHva: DNS, IP-adresser, pakker, klient-server-modellen.
Hvorfor: Uten dette blir feilsøking av nettverksfeil ren gjetting.
Bør kunne: Forklare hva som skjer fra du taster en URL til siden vises.
Prosjektforslag: Tegn og forklar reisen til en HTTP-forespørsel, trinn for trinn.
HTTP og HTTPS
Ikke fullførtHva: Metoder, statuskoder, headere, TLS-kryptering.
Hvorfor: Alt webkommunikasjon går over HTTP(S) — API-er, sider, alt.
Bør kunne: Kjenne forskjellen på GET/POST/PUT/DELETE og vanlige statuskoder.
Prosjektforslag: Inspiser nettverksfanen i DevTools på en side du bruker daglig.
Nettleser og server
Ikke fullførtHva: Rendering, DOM, hvordan en server svarer med HTML/JSON.
Hvorfor: Gir grunnlaget for å forstå SSR vs. CSR senere.
Bør kunne: Forstå forskjellen på server-rendret og klient-rendret innhold.
HTML
Ikke fullførtHva: Semantisk markup, skjemaer, tilgjengelighetstre.
Hvorfor: Dårlig HTML gir dårlig tilgjengelighet og SEO, uansett hvor bra CSS/JS er.
Bør kunne: Skrive semantisk korrekt HTML uten unødvendige div-er.
Prosjektforslag: Bygg en personlig profilside kun med HTML og CSS.
CSS
Ikke fullførtHva: Boksmodell, selektorer, spesifisitet, Flexbox og Grid.
Hvorfor: Layout og design bygger på dette, uansett hvilket rammeverk du senere bruker.
Bør kunne: Lage responsive layouter uten å måtte gjette deg frem.
JavaScript
Ikke fullførtHva: Variabler, funksjoner, DOM-manipulasjon, events, async/await.
Hvorfor: Språket alt frontend-arbeid til slutt kompileres til eller kjører som.
Bør kunne: Skrive JavaScript uten å måtte lene deg på et rammeverk for enkle ting.
Prosjektforslag: Bygg en kalkulator med ren HTML, CSS og JavaScript.
Git og GitHub
Ikke fullførtHva: Versjonskontroll, commits, branches, pull requests.
Hvorfor: Alt profesjonelt utviklingsarbeid foregår gjennom Git.
Bør kunne: Bruke branches og løse merge-konflikter uten panikk.
Terminalbruk
Ikke fullførtHva: Navigasjon i filsystemet, kjøre skript, miljøvariabler.
Hvorfor: Terminalen er verktøyet du bruker mest som utvikler.
Bør kunne: Kan utføre vanlige terminaloppgaver med dokumentasjon som støtte.
Fase 2: Moderne frontend
Gå fra statisk HTML til komponentbaserte, typede applikasjoner.
TypeScript
Ikke fullførtHva: Statisk typing på toppen av JavaScript.
Hvorfor: Fanger feil før kjøretid og gjør store kodebaser håndterbare.
Bør kunne: Skrive typede funksjoner, interfaces og generics.
React
Ikke fullførtHva: Komponentbasert UI-bibliotek med en virtuell DOM.
Hvorfor: Fundamentet Next.js og store deler av moderne frontend bygger på.
Bør kunne: Bygge komponenter med props, state og hooks fra bunnen.
Prosjektforslag: Bygg en to-do-app med lokal state.
Next.js
Ikke fullførtHva: React-rammeverk med filbasert routing, SSR og App Router.
Hvorfor: Gir struktur, ytelse og produksjonsklare mønstre rett ut av boksen.
Bør kunne: Vite forskjellen på Server og Client Components og når hver skal brukes.
Prosjektforslag: Bygg denne roadmap-siden.
Komponenter
Ikke fullførtHva: Gjenbrukbare UI-byggeklosser.
Hvorfor: Reduserer duplisering og gjør UI konsistent.
Bør kunne: Dele opp UI i små, komponerbare enheter.
Props og state
Ikke fullførtHva: Dataflyt inn i komponenter (props) og internt (state).
Hvorfor: Kjernen i hvordan React-applikasjoner henger sammen.
Bør kunne: Vite når data skal løftes opp og når den kan holdes lokalt.
Hooks
Ikke fullførtHva: useState, useEffect, useMemo og egendefinerte hooks.
Hvorfor: Standardmåten å håndtere state og sideeffekter i moderne React.
Bør kunne: Skrive egne hooks for gjenbrukbar logikk.
Server Components
Ikke fullførtHva: Komponenter som rendres på serveren uten JavaScript til klienten.
Hvorfor: Reduserer bundlestørrelse og gir direkte datatilgang uten API-lag.
Bør kunne: Vite når en komponent bør være Server fremfor Client.
Client Components
Ikke fullførtHva: Komponenter som kjører i nettleseren og kan bruke state/interaktivitet.
Hvorfor: Nødvendig for alt som krever interaktivitet eller nettleser-API-er.
Bør kunne: Markere komponenter riktig med "use client" kun der det trengs.
Skjemaer
Ikke fullførtHva: Kontrollerte og ukontrollerte input-felter, Server Actions.
Hvorfor: De fleste applikasjoner samler inn data fra brukeren på et tidspunkt.
Bør kunne: Bygge tilgjengelige skjemaer med god feilhåndtering.
Prosjektforslag: Bygg et skjema med validering og tydelige feilmeldinger.
Validering
Ikke fullførtHva: Klient- og serverside-validering, f.eks. med Zod.
Hvorfor: Data fra brukere kan aldri stoles på uten validering.
Bør kunne: Validere både i UI og på serveren, aldri kun i UI.
Tilgjengelighet
Ikke fullførtHva: ARIA, tastaturnavigasjon, kontrast, skjermlesere.
Hvorfor: En nettside som ikke er tilgjengelig ekskluderer brukere.
Bør kunne: Teste egne sider med kun tastatur.
Responsivt design
Ikke fullførtHva: Layouter som fungerer fra mobil til stor desktop.
Hvorfor: Trafikk kommer fra svært ulike skjermstørrelser.
Bør kunne: Designe mobil-først og teste på ekte breddepunkter.
Fase 3: Backend
Bygg API-ene som frontend-applikasjonene dine snakker med.
Node.js
Ikke fullførtHva: JavaScript-kjøretid utenfor nettleseren.
Hvorfor: Lar deg bruke samme språk i backend som i frontend.
Bør kunne: Forstå event loop og asynkron kjøring.
REST API
Ikke fullførtHva: Arkitekturstil for API-er basert på ressurser og HTTP-verb.
Hvorfor: Den mest brukte API-stilen for webapplikasjoner i dag.
Bør kunne: Designe konsistente, forutsigbare endepunkter.
Routing
Ikke fullførtHva: Kobling mellom URL-er og handlere.
Hvorfor: Grunnlaget for hvordan et API organiseres.
Bør kunne: Strukturere routes etter ressurs, ikke etter handling.
Autentisering
Ikke fullførtHva: Bekrefte hvem brukeren er.
Hvorfor: Nødvendig for alt som ikke skal være offentlig.
Bør kunne: Forstå forskjellen på sesjoner, JWT og OAuth.
Autorisering
Ikke fullførtHva: Bestemme hva en autentisert bruker har lov til å gjøre.
Hvorfor: Autentisering uten autorisering betyr at alle innloggede kan gjøre alt.
Bør kunne: Implementere rollebaserte tilgangskontroller.
Feilhåndtering
Ikke fullførtHva: Konsistente feilresponser og try/catch-strategier.
Hvorfor: Uhåndterte feil krasjer servere og lekker informasjon.
Bør kunne: Returnere forutsigbare feilformater med riktige statuskoder.
Logging
Ikke fullførtHva: Strukturert logging av hendelser og feil.
Hvorfor: Uten logger er feilsøking i produksjon nesten umulig.
Bør kunne: Logge nok til å feilsøke, uten å logge sensitive data.
Miljøvariabler
Ikke fullførtHva: Konfigurasjon utenfor kildekoden.
Hvorfor: Skiller hemmeligheter og miljøspesifikk config fra koden.
Bør kunne: Aldri committe .env-filer med ekte verdier.
Sikkerhet
Ikke fullførtHva: Input-sanering, CORS, sikre headere, avhengighetssårbarheter.
Hvorfor: Backend er der ekte data og forretningslogikk lever.
Bør kunne: Kjenne OWASP Top 10 og hvordan de gjelder egne API-er.
Rate limiting
Ikke fullførtHva: Begrense antall forespørsler per klient.
Hvorfor: Beskytter mot misbruk og overbelastning.
Bør kunne: Sette fornuftige grenser per endepunkt.
Prosjektforslag: Bygg et lite REST-API med autentisering og rate limiting.
Fase 4: Databaser
Lagre og hente data pålitelig og effektivt.
SQL
Ikke fullførtHva: Spørrespråk for relasjonsdatabaser.
Hvorfor: Fortsatt standarden for strukturert databehandling.
Bør kunne: Skrive joins, aggregeringer og subqueries selv.
PostgreSQL
Ikke fullførtHva: Robust, åpen kildekode relasjonsdatabase.
Hvorfor: Industristandard for produksjonsapplikasjoner.
Bør kunne: Sette opp og designe skjema for en ekte applikasjon.
SQLite
Ikke fullførtHva: Filbasert databasemotor uten egen serverprosess.
Hvorfor: Perfekt for lokale verktøy og mindre applikasjoner.
Bør kunne: Vite når SQLite er nok og når man trenger Postgres.
Tabeller
Ikke fullførtHva: Strukturert lagring av rader og kolonner.
Hvorfor: Grunnenheten i enhver relasjonsdatabase.
Bør kunne: Designe tabeller med riktige datatyper og constraints.
Relasjoner
Ikke fullførtHva: Én-til-mange og mange-til-mange mellom tabeller.
Hvorfor: Data henger nesten alltid sammen på tvers av tabeller.
Bør kunne: Modellere relasjoner uten unødvendig duplisering.
Primærnøkler
Ikke fullførtHva: Unik identifikator for hver rad.
Hvorfor: Grunnlaget for pålitelige relasjoner og oppslag.
Bør kunne: Velge fornuftige nøkkelstrategier (auto-increment vs. UUID).
Indekser
Ikke fullførtHva: Datastrukturer som gjør oppslag raskere.
Hvorfor: Uten riktige indekser blir spørringer trege ved vekst.
Bør kunne: Identifisere hvilke kolonner som bør indekseres.
Migrasjoner
Ikke fullførtHva: Versjonskontrollerte endringer i databaseskjema.
Hvorfor: Lar team endre skjema trygt og sporbart over tid.
Bør kunne: Skrive reverserbare migrasjoner.
ORM
Ikke fullførtHva: Objekt-relasjonsmapping mellom kode og database.
Hvorfor: Reduserer boilerplate SQL for vanlige operasjoner.
Bør kunne: Vite når ORM-en hjelper og når rå SQL er bedre.
Prisma eller Drizzle
Ikke fullførtHva: Moderne TypeScript-ORM-er for Node.js.
Hvorfor: Gir typesikker databasetilgang i fullstack-prosjekter.
Bør kunne: Sette opp skjema, migrasjoner og spørringer i én av dem.
Prosjektforslag: Bygg en budsjettoversikt med data i en ekte database.
Fase 5: Produksjon
Få applikasjonene dine trygt og pålitelig i drift.
Linux
Ikke fullførtHva: Filsystem, prosesser, brukere, pakkebehandling.
Hvorfor: Nesten all serverdrift skjer på Linux.
Bør kunne: Navigere og administrere en server uten GUI.
VPS
Ikke fullførtHva: Egen virtuell server du har full kontroll over.
Hvorfor: Gir forståelse for drift som skjulte plattformer tar bort.
Bør kunne: Sette opp og herde en ny server fra bunnen.
Docker
Ikke fullførtHva: Containerisering av applikasjoner og avhengigheter.
Hvorfor: Gjør "virker på min maskin" til et ikke-problem.
Bør kunne: Skrive egne Dockerfiles for applikasjonene dine.
Docker Compose
Ikke fullførtHva: Orkestrering av flere containere sammen.
Hvorfor: De fleste applikasjoner består av flere tjenester.
Bør kunne: Definere en full stack i én compose-fil.
nginx
Ikke fullførtHva: Reverse proxy og webserver.
Hvorfor: Ruter trafikk til riktig tjeneste og håndterer TLS.
Bør kunne: Sette opp reverse proxy for flere subdomener.
DNS
Ikke fullførtHva: Oversetting av domenenavn til IP-adresser.
Hvorfor: Nødvendig for at noen skal finne applikasjonen din.
Bør kunne: Sette opp A- og CNAME-oppføringer selv.
HTTPS
Ikke fullførtHva: Kryptert kommunikasjon mellom klient og server.
Hvorfor: Standard krav for enhver produksjonsside i dag.
Bør kunne: Forstå hvordan sertifikater fornyes automatisk.
Let's Encrypt
Ikke fullførtHva: Gratis, automatiserte TLS-sertifikater.
Hvorfor: Gjør HTTPS tilgjengelig uten kostnad eller friksjon.
Bør kunne: Sette opp certbot med automatisk fornyelse.
Backup
Ikke fullførtHva: Regelmessig sikkerhetskopiering av data.
Hvorfor: Data uten backup er data du vil miste før eller siden.
Bør kunne: Ha automatiske, testede backup-rutiner.
Monitoring
Ikke fullførtHva: Overvåking av oppetid og ytelse.
Hvorfor: Du vil vite om noe er nede før brukerne sier ifra.
Bør kunne: Sette opp varsling ved nedetid.
Uptime Kuma
Ikke fullførtHva: Selvhostet verktøy for oppetidsovervåking.
Hvorfor: Gir full kontroll over egne varsler uten tredjepartsavhengighet.
Bør kunne: Overvåke alle egne tjenester med varsling til Telegram.
CI/CD
Ikke fullførtHva: Automatisert testing og utrulling.
Hvorfor: Reduserer manuelle feil og gjør utrulling forutsigbar.
Bør kunne: Sette opp en enkel pipeline som bygger og deployer automatisk.
Prosjektforslag: Deploy en fullstack-app til egen VPS med Docker Compose og nginx.