# πŸ’œ VibeFinance **Persoonlijk vermogensdashboard** Eigen vermogen Β· Schulden Β· Voortgang Β· Gebruikersbeheer ![React](https://img.shields.io/badge/React_18-20232A?style=flat&logo=react&logoColor=61DAFB) ![Node.js](https://img.shields.io/badge/Node.js_22-339933?style=flat&logo=node.js&logoColor=white) ![PostgreSQL](https://img.shields.io/badge/PostgreSQL_18-4169E1?style=flat&logo=postgresql&logoColor=white) ![Docker](https://img.shields.io/badge/Docker_Compose-2496ED?style=flat&logo=docker&logoColor=white) ![Version](https://img.shields.io/badge/versie-0.0.3-8b5cf6?style=flat) ![Built with Claude](https://img.shields.io/badge/Gebouwd_met-Claude.ai-8b5cf6?style=flat&logo=anthropic&logoColor=white)
--- ## πŸ€– Gebouwd met Claude.ai Deze applicatie is volledig ontworpen en ontwikkeld met behulp van [Claude.ai](https://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: ```env POSTGRES_USER=vibefinance POSTGRES_PASSWORD=kies_een_sterk_wachtwoord JWT_SECRET=minimaal_64_willekeurige_tekens FRONTEND_PORT=3300 ``` ```bash # Genereer een veilige JWT_SECRET openssl rand -hex 64 ``` ```bash docker compose pull && docker compose up -d ``` Navigeer naar `http://:3300` en registreer je account. De **eerste** geregistreerde gebruiker krijgt automatisch de Admin-rol. ### Development (hot reload) ```powershell .\dev.ps1 ``` Frontend bereikbaar op **http://localhost** (poort 80 β†’ Vite dev server op 5173). > **Let op:** `.\dev.ps1 up` en `.\dev.ps1 down` wissen de development-database (volumes). Gebruik voor een gewone herstart `docker compose -f docker-compose.dev.yml down` gevolgd door `docker 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 `. 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](https://claude.ai)