← All work
  • Personal project
  • AI
  • Product

A budget tool for our family, built with Claude Code

Det här är inget kunduppdrag. Det är en app som min partner och jag använder varje vecka, och den ersätter ett Excelark som bara visade planen, aldrig utfallet. Jag ägde frågorna, designen och besluten. Claude Code skrev koden, och jag granskade den. Alla namn och siffror i bilderna är påhittade.

  • Claude Code
  • Next.js och Supabase
  • Enable Banking och Vercel
Roll
Produktägare, designer och byggare (personligt projekt)
Period
2026
Verktyg
Claude Code, Next.js, Supabase, Enable Banking (PSD2), Vercel

This case is only available in Swedish for now.

Tre skärmar ur appen: översikt, budget och inkorg
Appen i mobilen. Påhittad data.

Utgångsläget

Kalkylbladet vi redan hade

Under min partners föräldraledighet gjorde vi en budget i Excel. Lön och räkningar går via ett konto i en bank, och ett gemensamt konto i en annan bank används för kort, lån och avgifter. Budgeten visade vad vi skulle göra. Den sa ingenting om vad som faktiskt hände.

Vi ville ha svar på fyra frågor:

  1. Hur ligger vi till mot budgeten den här månaden?
  2. Har de fasta kostnaderna dragits, och med rätt belopp?
  3. Vad har vi spenderat på det gemensamma utgiftskontot?
  4. Hur mycket ska var och en föra över varje månad så att vi har lika mycket kvar?

Upptäckt

Frågor före kod

Jag övervägde ett färdigt budgetverktyg och att bygga själv, och valde att bygga, av tre skäl: kontrollen över bankuppgifterna, att budgeten skulle följa vår logik (två konton med olika roller) och att löpande kostnad skulle bli nära noll.

Bankkopplingen sker via PSD2 med en tjänst som bara får läsa. Appen kan alltså aldrig flytta pengar. Den ser bara de fyra konton jag själv har länkat.

Schema som visar hur konton, regler och fördelning hänger ihop
Så hänger delarna ihop.

Designbeslut

Översikten: spenderat, inte "kvar"

Översikten är appens viktigaste vy, och jag lade mest tid på den. Första versionen hade en stor siffra, "Kvar att spendera". Vi insåg snabbt att det lät som en uppmaning. Det intressanta är inte hur mycket vi får spendera, utan hur det ligger till jämfört med budgeten.

Före och efter: huvudsiffran Kvar att spendera bredvid huvudsiffran Spenderat
Samma konto, två sätt att säga det. "Före" är en rekonstruktion av den första versionen. Påhittad data.

Därför ser den ut så här i dag:

  • Utgiftskontot överst, eftersom det är det som avgör om vi går plus eller minus. Fasta-kontot ligger under och visar bara utfallet, för att kontrollera att vi budgeterade rätt.
  • Huvudsiffran är "spenderat", med budgeten som dämpad text bredvid: 3 741 kr av 5 600 kr.
  • En markering för "idag" på varje stapel, så att man ser om man ligger före eller efter takten i månaden.
  • Inget larm när det inte behövs. Första dagen i månaden varnade appen för att saldot inte täckte månadens utgifter, trots att överföringarna inte hade gjorts än. Jag tog bort varningen.
  • Ingen brusig status. Obetalda poster har ingen etikett. Bara "Betald", "Delvis betald" och "Försenad" visas, så att en lugn månad ser lugn ut.
Översikt för Utgiftskontot mitt i en månad: spenderat jämfört med budget, med en markering för idag
Spenderat mot budget. Påhittad data.
Översikt för Fasta-kontot där poster har etiketterna Betald och Delvis betald
Bara det som hänt får en etikett. Påhittad data.

Arbetssättet

Vad Claude Code gjorde, och vad jag gjorde

Jag arbetade i korta varv: jag beskrev beteendet i vanliga ord, Claude Code föreslog och byggde, och jag granskade resultatet i webbläsaren innan nästa steg. Hemligheterna ligger utanför koden och versionshanteringen, och produktionsnycklarna la jag själv in i hostingtjänsten.

Ett exempel på varför granskningen behövs: en regel som kategoriserade alla "Överföring" som bolån fick interna flyttar mellan våra egna konton att räknas som lånebetalningar. Bolånet såg ut som ofullständigt betalt trots att det var rätt dragit. Felet låg i hur reglerna prioriteras. Jag lät verktyget visa beviset med den riktiga regelmotorn innan något ändrades, och byggde därefter en parmatchning som känner igen interna överföringar (lika belopp, motsatt tecken, nära i tid, aldrig över ägargränser).

Beräkningen

"Lika mycket kvar" – fördelningen

Vi vill ha lika mycket pengar kvar var varje månad, trots olika inkomster. Appen räknar ut det, och formeln är enkel:

Kvar per person = (summa inkomster − egna fasta kostnader − gemensamma behov) ÷ 2

Exempel med påhittade tal: inkomster 30 000 och 15 000 kr, egna fasta kostnader 2 000 och 1 000 kr och gemensamma behov 30 000 kr ger 6 000 kr kvar var. Den ena för då över 22 000 kr och den andra 8 000 kr. Under föräldraledigheten räknas beloppen om när inkomsten ändras.

Budgetsidan med fördelningen lika mycket kvar, uppställd steg för steg
Beräkningen visas steg för steg. Påhittad data.

Åtkomst

Två inloggningar, två olika vyer

Båda har sin egen inloggning och ser sin egen vy. Gemensamma konton ser vi båda. Privata konton och kategorier syns bara för ägaren, och det avgörs i databasen, inte bara i gränssnittet. Beräkningen av fördelningen får se summan av den andras egna fasta kostnader, men aldrig raderna.

Inloggningen kräver lösenord och en kod från en autentiseringsapp. Utan koden nekar även databasen åtkomst.

Granskning

Säkerhetsgranskning före publicering

Eftersom appen hanterar bankdata granskade jag den två gånger: först med Claude Codes egen genomgång, sedan med en fristående granskning av koden av en annan instans. Den andra hittade bland annat att lösenordet var enda spärren (därav tvåstegsverifieringen), att några meddelanden kunde hamna i adressfältet och att två kolumner i databasen gick att läsa utan att behövas. Allt rättades innan publicering. Jag testade också den publicerade sidan utan att vara inloggad: alla sidor skickar vidare till inloggningen och den automatiska synken avvisar anrop utan nyckel.

Tre saker som inte fungerade

När det gick snett

  • Bankens dagsgräns. Banken tillåter bara ett fåtal automatiska hämtningar per konto och dygn. Jag körde slut på dem tidigt och byggde om synken: saldon hämtas sällan, och en manuell synk går bara att göra med några minuters mellanrum.
  • Konton som saknades. En av bankerna returnerade först inga konton. Det visade sig att konton måste länkas hos kopplingstjänsten innan de syns.
  • Publiceringen gav bara en 404. Bygget såg grönt ut men ingenting visades. Projektet låg inställt på fel ramverk i hostingtjänsten. Det tog en stund att hitta och en inställning att rätta.

Ej byggt än

Det som fortfarande är manuellt

  • Nya motparter kategoriseras för hand första gången, och sedan tar regler över.
  • Bankmedgivandet måste förnyas var 90:e dag.
  • Min partners egna konton är inte kopplade än.
  • Inga notiser om att vi går över budget. Jag väntar med dem tills vi har följt en hel månad, så att vi vet vilka gränser som är värda ett larm.
Inkorgen med okategoriserade transaktioner
Regler gör att det mesta kategoriseras själv. Påhittad data.

Resultatet så här långt

Vi ser hur vi ligger till mot budgeten utan att öppna Excel, och vi ser direkt om något har dragits fel. Första hela månaden är pågående, och den ger oss facit på hur väl budgeten stämmer. Jag skriver gärna en uppföljning när vi har det.

”Det viktigaste var inte hastigheten utan att jag kunde granska varje steg.”

Appen i mobilen, tre skärmar
Fungerar som app på hemskärmen. Påhittad data.
Get in touch if you want to know more →