192 lines
6.7 KiB
Markdown
192 lines
6.7 KiB
Markdown
<div align="center">
|
||
|
||
# 💜 VibeFinance
|
||
|
||
**Persoonlijk vermogensdashboard**
|
||
|
||
Eigen vermogen · Schulden · Voortgang · Gebruikersbeheer
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
|
||
---
|
||
|
||
## 🤖 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://<server-ip>: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 <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.
|
||
|
||
---
|
||
|
||
<div align="center">
|
||
|
||
Privé gebruik · gebouwd met [Claude.ai](https://claude.ai)
|
||
|
||
</div>
|