💰 Balse Finance

Persoonlijke finance-app voor Bart & Ilse.

Modules

Pagina	Beschrijving
Dashboard	Overzicht inkomsten, uitgaven, nettovermogen en budgetstatus
Transacties	Inkomsten en uitgaven bijhouden per categorie
Begroting	Maandbudgetten met voortgang en rollover
Contracten	Vaste lasten en abonnementen beheren
Planning	12-maanden cashflow + spaardoelen
Beleggingen	Portefeuille + rendementsprognose tot 30 jaar

Tech stack

• Framework: Next.js 14 (App Router)
• Taal: TypeScript
• Styling: Tailwind CSS
• Grafieken: Recharts
• Database: Supabase (nog te koppelen)
• Iconen: Lucide React

Lokaal draaien

git clone https://github.com/BartGrootveld1337/balse-finance.git
cd balse-finance
npm install
cp .env.example .env.local  # vul Supabase-gegevens in zodra je ze hebt
npm run dev

Open http://localhost:3000.

Deployen op Vercel

1. Ga naar vercel.com en importeer deze repo
2. Voeg de omgevingsvariabelen toe uit .env.example
3. Deploy — klaar

Supabase koppelen

1. Maak een project aan op supabase.com
2. Kopieer de URL en anon key naar .env.local
3. Uncomment de Supabase client in lib/supabase.ts
4. Vervang de mock data in lib/mock-data.ts stap voor stap door echte queries

Projectstructuur

app/
  layout.tsx          ← Sidebar + bottom nav
  page.tsx            ← Dashboard
  transacties/
  begroting/
  contracten/
  planning/
  beleggingen/
  loading.tsx         ← Skeleton loader
  error.tsx           ← Error boundary
  not-found.tsx       ← 404 pagina
components/
  Navigation.tsx      ← Sidebar + mobile nav
  BudgetBar.tsx       ← Voortgangsbalk per categorie
  ui/Card.tsx
lib/
  mock-data.ts        ← Testdata (NL context)
  supabase.ts         ← Klaar voor koppeling
  utils.ts            ← Formatters (euro, datum)