🏗️Bouwen met Claude

# Na het genereren van de bestanden:
git init
git add .
git commit -m "feat: initiële website build"

# Push naar GitHub en koppel aan Vercel
gh repo create mijn-website --public --push

# Deploy via Vercel CLI
vercel --prod

# Maak een nieuwe React app met Vite
npm create vite@latest mijn-app -- --template react-ts
cd mijn-app
npm install

# Start Claude Code
claude

# Laat Claude Tailwind CSS toevoegen
> Installeer en configureer Tailwind CSS in dit project

# Maak een Next.js project aan
npx create-next-app@latest mijn-nextjs-app

# De setup wizard vraagt:
# TypeScript? → Yes
# ESLint? → Yes
# Tailwind CSS? → Yes
# src/ directory? → No
# App Router? → Yes (gebruik de nieuwe App Router)
# Import alias? → No

cd mijn-nextjs-app
npm run dev  # Open http://localhost:3000

mijn-nextjs-app/
├── app/                    # App Router: pagina's en layouts
│   ├── layout.tsx          # Root layout (geldt voor alle pagina's)
│   ├── page.tsx            # Homepage (/)
│   ├── over-ons/
│   │   └── page.tsx        # /over-ons
│   └── api/                # Backend API routes
│       └── contact/
│           └── route.ts    # POST /api/contact
├── components/             # Herbruikbare React componenten
├── lib/                    # Utility functies
├── public/                 # Statische bestanden (afbeeldingen)
└── next.config.ts          # Next.js configuratie

import { NextRequest, NextResponse } from 'next/server'

export async function POST(req: NextRequest) {
  const { naam, email, bericht } = await req.json()
  
  // Validatie
  if (!naam || !email || !bericht) {
    return NextResponse.json(
      { error: 'Alle velden zijn verplicht' },
      { status: 400 }
    )
  }
  
  // Stuur e-mail via Resend of een andere service
  // await sendEmail({ naam, email, bericht })
  
  return NextResponse.json({ success: true })
}

# Installeer Prisma
npm install prisma @prisma/client
npx prisma init

# Definieer je datamodel in prisma/schema.prisma
# (Claude kan dit volledig voor je schrijven)

# Synchroniseer met database
npx prisma db push

# Genereer TypeScript types
npx prisma generate

# Open Prisma Studio (visuele database editor)
npx prisma studio

# Factuurtools.be

SaaS applicatie voor Belgische freelancers om snel en eenvoudig
facturen te genereren en te beheren.

## Kernfunctionaliteiten (MVP)
1. Gebruikersregistratie/login (NextAuth.js + Google)
2. Bedrijfsprofiel instellen (naam, BTW-nummer, adres, logo)
3. Klanten beheren (CRUD)
4. Facturen aanmaken (klant, items, BTW-tarieven: 0/6/12/21%)
5. PDF genereren van facturen (Puppeteer of jsPDF)
6. Factuuroverzicht (open/betaald/vervallen)
7. Dashboard met statistieken (omzet per maand)

## Tech Stack
Next.js 15, TypeScript, Tailwind CSS, Prisma, PostgreSQL (Supabase),
NextAuth.js, jsPDF voor PDF generatie, Recharts voor grafieken

## Design
Professioneel, clean, blauw-wit kleurenschema, mobile-responsive