Reviewed-on: #2
💜 VibeFinance
Persoonlijk vermogensdashboard
Eigen vermogen · Schulden · Voortgang · Gebruikersbeheer
🤖 Gebouwd met Claude.ai
Deze applicatie is volledig ontworpen en ontwikkeld met behulp van Claude.ai — de AI-assistent van Anthropic. Van architectuur tot gebruikersinterface: alles is stap voor stap tot stand gekomen in samenwerking met Claude.
⚡ Quick Start
Vereisten: Docker Engine 24+ en Docker Compose v2+
.env — kopieer .env.example en vul in:
POSTGRES_USER=vibefinance
POSTGRES_PASSWORD=kies_een_sterk_wachtwoord
JWT_SECRET=minimaal_64_willekeurige_tekens
FRONTEND_PORT=3300
# Genereer een veilige JWT_SECRET
openssl rand -hex 64
docker compose pull && docker compose up -d
Navigeer naar http://<server-ip>:3300 en registreer je account. De eerste geregistreerde gebruiker krijgt automatisch de Admin-rol.
Development (hot reload)
.\dev.ps1
Frontend bereikbaar op http://localhost (poort 80 → Vite dev server op 5173).
Let op:
.\dev.ps1 upen.\dev.ps1 downwissen de development-database (volumes). Gebruik voor een gewone herstartdocker compose -f docker-compose.dev.yml downgevolgd doordocker compose -f docker-compose.dev.yml up -d --build.
🗂️ Functionaliteit
| Scherm | Wat het doet |
|---|---|
| 📊 Dashboard | Overzicht van totaal eigen vermogen, schulden en netto vermogen |
| 💰 Eigen vermogen | Vermogensposten per categorie beheren + geïnvesteerde fiat historiek |
| 📉 Schulden | Schulden bijhouden per blok met afbetalingsoverzicht |
| 📈 Voortgang | Grafieken en trends van EV en schuld over tijd (apart bij te houden) |
| 👥 Gebruikers | Accounts aanmaken, bewerken en beheren (Admin-rol vereist) |
🏗️ Architectuur
vibefinance/
├── docker-compose.yml # Productie orchestratie (pre-built images)
├── docker-compose.dev.yml # Standalone dev stack (hot reload)
├── .env.example # Kopieer naar .env en vul in
├── package.json # Versienummer — single source of truth
├── dev.ps1 # Dev script (bouwen, starten, pushen)
│
├── frontend/ # React / Vite SPA
│ ├── Dockerfile # Multi-stage: dev → build → nginx
│ ├── nginx-spa.conf # SPA fallback binnen de container
│ ├── vite.config.js
│ └── src/
│ ├── App.jsx # Root – wiring + idle-logout
│ ├── main.jsx
│ ├── constants/ # Kleuren, tabs, begindata
│ ├── utils/ # Formatters, helpers
│ ├── hooks/ # useTheme
│ ├── context/ # AppContext (global state + API sync)
│ ├── components/
│ │ ├── ui/ # Primitieve UI (VCard, DonutChart…)
│ │ ├── LoginPage.jsx
│ │ ├── NavBar.jsx
│ │ ├── ProfielPopup.jsx
│ │ └── GebruikersBeheer.jsx
│ └── pages/
│ ├── DashboardTab.jsx
│ ├── EigenVermogenTab.jsx
│ ├── SchuldTab.jsx
│ └── VoortgangTab.jsx
│
└── backend/ # Express REST API
├── Dockerfile # Multi-stage: dev → production (non-root)
└── src/
├── server.js # Entry point
├── db.js # PostgreSQL connectie + schema migraties
├── config/ # Omgevingsvariabelen
├── constants/ # Begindata (initialData.js)
├── middleware/ # auth.js, errorHandler.js
├── routes/ # auth, data, users, health
└── stores/ # userStore, dataStore
Stack: React 18 · Vite · Node.js 22 · Express 4 · PostgreSQL 18 · JWT · bcrypt · Docker Compose v2
🔌 API
Beveiligde endpoints vereisen Authorization: Bearer <token>. Rate limiting: 20 req/15 min op auth-routes, 200 req/15 min globaal.
| Route | Methoden | Omschrijving |
|---|---|---|
/api/auth/register |
POST | Account aanmaken (eerste user = Admin) |
/api/auth/login |
POST | Inloggen, JWT token terug |
/api/auth/me |
GET, PATCH | Profiel ophalen en bijwerken |
/api/auth/me/password |
POST | Wachtwoord wijzigen |
/api/data |
GET, PUT, DELETE | Financiële data per gebruiker |
/api/users |
GET, POST, PATCH, DELETE | Gebruikersbeheer (Admin only) |
/api/health |
GET | Status + uptime |
🗄️ Database
| Tabel | Omschrijving |
|---|---|
users |
Accounts met bcrypt hash, rol, actief-vlag en aanmaakdatum |
user_data |
Financiële data per gebruiker (JSON) |
| Omgeving | Volume | Mount pad |
|---|---|---|
| Productie | vibefinance_pgdata |
/var/lib/postgresql |
| Development | postgres_dev_data |
/var/lib/postgresql |
PostgreSQL 18 gebruikt
PGDATA=/var/lib/postgresql/18/docker— het volume is daarom gemount op/var/lib/postgresql(niet/data).
⚙️ Omgevingsvariabelen
| Variabele | Standaard | Omschrijving |
|---|---|---|
POSTGRES_PASSWORD |
— | Verplicht |
JWT_SECRET |
— | Verplicht — minimaal 64 tekens |
POSTGRES_USER |
vibefinance |
Database gebruikersnaam |
POSTGRES_DB |
vibefinance |
Database naam |
JWT_EXPIRES |
7d |
Geldigheidsduur token |
CORS_ORIGIN |
— | Externe domeinnaam |
FRONTEND_PORT |
3300 |
Externe poort frontend |
🔐 Beveiliging
- Wachtwoorden gehasht met bcrypt (cost factor 12)
- JWT authenticatie met instelbare vervaltijd
- Backend uitsluitend bereikbaar via nginx proxy
- Database bereikbaar alleen binnen het interne Docker netwerk
- Containers draaien als non-root
- Helmet security headers
- Rate limiting op alle endpoints
🛠️ Beheer
Zie BEHEER.md voor commando's voor lokale ontwikkeling, releases, logs en database-toegang.
Privé gebruik · gebouwd met Claude.ai