130 lines
4.9 KiB
Markdown
130 lines
4.9 KiB
Markdown
# <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' rx='20' fill='%23E8B730'/%3E%3Ctext y='.75em' x='50' text-anchor='middle' font-size='60' font-weight='bold' font-family='system-ui' fill='%23191919'%3EK%3C/text%3E%3C/svg%3E" width="36" height="36" alt="Karby logo" align="top"> Karby — Koolhydratenteller
|
||
|
||
Een Nederlandse **Progressive Web App** om snel en eenvoudig koolhydraten te tellen per eetmoment.
|
||
|
||
> Gemaakt voor **Chavalie**, die haar koolhydraatinname wil bijhouden.
|
||
> Gebaseerd op de officiële **NEVO-dataset** van het RIVM met 2.328 voedingsmiddelen.
|
||
|
||
---
|
||
|
||
## ✨ Features
|
||
|
||
### 🔍 Zoeken & Vinden
|
||
- **2.328 NEVO-voedingsmiddelen** met koolhydraten per 100g
|
||
- **Infinite scroll** — soepel door duizenden resultaten bladeren
|
||
- **Fuzzy search** — vindt ook meervoud/enkelvoud varianten
|
||
- **Categorie-filter** (🍞 brood, 🥛 zuivel, 🥩 vlees, 🍎 fruit, etc.)
|
||
- **Voedingscentrum-link** per product — direct doorklikken naar voedingsinfo
|
||
|
||
### 📅 Dagboek
|
||
- **6 eetmomenten**: Ontbijt, Lunch, Avondeten, Tussendoor 1/2/3
|
||
- **Datumnavigatie** — terug- en vooruitbladeren door dagen
|
||
- **Koolhydraten-totaal** per eetmoment met visuele voortgangsbalk
|
||
- **LED-kleuren**: groen ✅ / oranje ⚠️ / rood 🚫 (aanpasbare daglimiet)
|
||
- **Glucose-metingen** inline per eetmoment — nuchter + 2u na maaltijd
|
||
- **Infinite scroll** — soepel door duizenden resultaten bladeren
|
||
|
||
### 🧑🍳 Maaltijden
|
||
- **Maaltijden opslaan** — combineer 2+ ingrediënten tot herbruikbare maaltijd
|
||
- **Slimme naamsuggestie** op basis van gekozen ingrediënten
|
||
- **Checkbox-selectie** — kies welke items je wilt opslaan
|
||
- **Geneste weergave** in dagboek — maaltijden uitklappen voor detail
|
||
- **Eenmalig/permanent aanpassen** — wijzig porties zonder recept te veranderen
|
||
- **Bulk-delete** via checkboxes met bevestigingsdialoog
|
||
|
||
### ⚖️ Porties
|
||
- **Intuïtieve portiekeuze**: 1 snee 🍞, 1 glas 🥛, 100g, 50g
|
||
- **Portie-steppers** (+/−) voor snelle aanpassing
|
||
- **Directe koolhydraten-berekening** — zie meteen hoeveel kh je toevoegt
|
||
|
||
### 🎨 UX
|
||
- **Amber/goud Vorteq-thema** — warm en toegankelijk
|
||
- **Animaties**: fade/slide op modals, tabs, toasts, meal-groups
|
||
- **Haptic feedback** bij knoppen en checkboxes
|
||
- **Bottom sheets** met swipe-down sluiten
|
||
- **Toast-meldingen** op exacte klik-positie
|
||
- **Dark mode via systeemvoorkeur** (geen handmatige toggle)
|
||
|
||
### 📱 PWA
|
||
- **Installeerbaar** op iOS en Android (Add to Home Screen)
|
||
- **Offline-ready** via Service Worker
|
||
- **Sticky header + zoekbalk** — blijft in beeld bij scrollen
|
||
- **Touch-optimized** — minimale knoppen 44×44px, geen hover-afhankelijkheid
|
||
|
||
---
|
||
|
||
## 🧪 Tests
|
||
|
||
**39 Playwright e2e-tests** — 38 passing, 1 legitiem skipped:
|
||
|
||
```bash
|
||
npm install
|
||
npx playwright install chromium
|
||
npx playwright test
|
||
```
|
||
|
||
Tests dekken: zoeken, dagboek CRUD, maaltijden opslaan/bewerken, portie-aanpassing, bulk-delete, glucose-metingen, en UX-flow.
|
||
|
||
---
|
||
|
||
## 🏗️ Tech Stack
|
||
|
||
| Laag | Technologie |
|
||
|---|---|
|
||
| Frontend | Vanilla HTML/CSS/JS — single `index.html` (SPA) |
|
||
| Styling | CSS Custom Properties, Flexbox, geen framework |
|
||
| Iconen | Font Awesome 6.5 (gratis set) |
|
||
| Data | NEVO-2023 via RIVM, verwerkt tot JSON |
|
||
| Tests | Playwright (Chromium, headless) |
|
||
| Deploy | Docker + Nginx op homelab NAS |
|
||
| CI/CD | Git push → handmatige `scp` + `docker cp` |
|
||
|
||
---
|
||
|
||
## 🚀 Deploy
|
||
|
||
```bash
|
||
# Build & run locally
|
||
cd docker
|
||
docker compose up -d
|
||
|
||
# Deploy main → productie
|
||
scp index.html core@homelab:/opt/stacks/eetdagboek/
|
||
ssh core@homelab "docker cp /opt/stacks/eetdagboek/index.html eetdagboek:/usr/share/nginx/html/"
|
||
|
||
# Deploy develop → staging
|
||
scp index.html core@homelab:/opt/stacks/eetdagboek/
|
||
ssh core@homelab "docker cp /opt/stacks/eetdagboek/index.html eetdagboek-dev:/usr/share/nginx/html/"
|
||
```
|
||
|
||
| Environment | URL |
|
||
|---|---|
|
||
| 🔵 Productie (`main`) | **[eetdagboek.vantwout.dev](https://eetdagboek.vantwout.dev)** |
|
||
| 🟠 Staging (`develop`) | **[dev.eetdagboek.vantwout.dev](https://dev.eetdagboek.vantwout.dev)** |
|
||
|
||
---
|
||
|
||
## 📄 Licentie
|
||
|
||
MIT — wordt binnenkort geopensourcet.
|
||
|
||
---
|
||
|
||
## 📝 Changelog
|
||
|
||
### v1.0.0 — 25 juli 2026
|
||
|
||
**Eerste productie-release 🎉**
|
||
|
||
- 🔍 Zoekfunctie met 2.328 NEVO-voedingsmiddelen + infinite scroll + fuzzy search
|
||
- 📅 Dagboek met 6 eetmomenten, datumnavigatie, koolhydraten-teller
|
||
- 🩸 Glucose-metingen per eetmoment (nuchter + postprandiaal)
|
||
- 🧑🍳 Maaltijden opslaan, herbruiken, aanpassen — nested in dagboek
|
||
- ⚖️ Portie-steppers met intuïtieve maten (snee, glas, 100g, 50g)
|
||
- 🗑️ Bulk-delete met checkbox-selectie + confirmatiedialoog
|
||
- 📊 Dagelijkse koolhydratenlimiet met progressbar (groen/oranje/rood)
|
||
- 🔗 Voedingscentrum-links per product
|
||
- 🎨 Amber/goud thema, animaties, haptic feedback, touch-optimized
|
||
- 📱 PWA — installeerbaar, offline-ready
|
||
- 🧪 39 Playwright e2e-tests (38 passing)
|
||
- 🐳 Dockerized deployment op homelab NAS
|