workshop

Bygg en webapp
med Claude Code

Claude Code Workshop · ~2 timer

Målet

Du skal bygge en fullstack webapp fra scratch – uten å skrive en eneste linje kode manuelt. Alt gjøres via Claude Code i terminalen. Målet er å oppleve hele flyten: fra tom mappe til kjørende app.

Forutsetninger

  • Node.js 18+ installert
  • Claude Code installert (npm i -g @anthropic-ai/claude-code)
  • Innlogget (claude → følg auth-flyten)
  • En tom mappe klar

Casen: Personlig dashboard

Du skal bygge et personlig dashboard med vær, oppgaveliste og en klokke/timer. En enkel, men visuelt pen webapp som viser hva Claude Code kan bygge på kort tid. Du velger selv stack – React, Next.js, Vue, vanilla JS – Claude Code fikser det.

Steg-for-steg

~8 min

Sett opp prosjektet

Naviger til en tom mappe og start Claude Code. Be den scaffolde appen.

$ mkdir mitt-dashboard && cd mitt-dashboard
$ claude

Si til Claude Code

"Lag en React-app med Vite og TypeScript. Sett opp en pen dashboard-layout med sidebar og main content area. Bruk Tailwind for styling. Kjør dev-serveren når du er ferdig."

Tips: Spesifiser stack og styling fra starten. Claude Code er bedre jo mer kontekst den får.

~12 min

Legg til vær-widget

Be Claude Code legge til en værkomponent som henter data fra et åpent API.

Si til Claude Code

"Legg til en vær-widget i dashboardet som bruker Open-Meteo API (gratis, ingen nøkkel). Vis temperatur, vind og ikon for Oslo. Oppdater automatisk hvert 10. minutt."

Hvorfor Open-Meteo? Gratis, ingen API-nøkkel, perfekt for demo. URL: api.open-meteo.com

~12 min

Legg til todo-liste

En interaktiv oppgaveliste med local storage, slik at data overlever refresh.

Si til Claude Code

"Legg til en todo-komponent i dashboardet. Den skal ha: legg til oppgave, merk som ferdig, slett, og lagre i localStorage. Lag en ren, pen design."

~10 min

Legg til klokke og polér

Legg til en sanntidsklokke, og be Claude Code polere hele designet.

Si til Claude Code

"Legg til en analog eller digital klokke-widget som oppdateres hvert sekund. Deretter: gå gjennom hele appen og fiks eventuelle design-inkonsistenser. Gjør layouten responsiv. Legg til dark mode toggle."

~8 min

Git commit og demo-klar

La Claude Code initialisere git og lage en pen commit.

# Fortsatt i Claude Code-sesjonen:
"Initialiser et git-repo, lag en .gitignore, og commit alt med en god commit-melding."

Åpne appen i nettleseren og gjør deg klar til å vise de andre!

~5 min

Show & tell

Vis frem appen din til gruppen. Hva fikk du til? Hva overrasket deg? Hva funket ikke som forventet?

Bonusoppgaver (hvis du har tid)

  • Legg til en Pomodoro-timer med lyd-varsling
  • Hent nyhetsoverskrifter fra et RSS-feed
  • Legg til en "motivational quote" med random API
  • La Claude Code skrive unit-tester for komponentene
  • Deploy til Vercel med npx vercel

Hva om jeg sitter fast?

  • 💡 Beskriv problemet for Claude Code – den kan feilsøke seg selv
  • 💡 Bruk /clear og start samtalen på nytt med bedre kontekst
  • 💡 Pipe inn feilmeldinger: npm run dev 2>&1 | claude "fiks dette"
  • 💡 Spør Marius eller sidemannen – vi er her for å hjelpe!

claude