Karby — koolhydratenteller PWA voor zwangerschapssuiker
3422b09214
- Remove navTussendoortjes button HTML, class toggle, and click listener
- Remaining nav items (Zoeken, Dagboek, Maaltijden) auto-distribute via flex:1
- Expose window.switchTab for test access (was IIFE-scoped)
- Update e2e tests: first test verifies button is gone, rest use
page.evaluate(() => switchTab('tussendoortjes'))
- Update inspiratie.spec.js helper to use switchTab via evaluate
- Sync docker/index.html with index.html
Resolves: t_3c830823
|
||
|---|---|---|
| data | ||
| docker | ||
| test-results | ||
| tests | ||
| .gitignore | ||
| index.html | ||
| package-lock.json | ||
| package.json | ||
| playwright.config.js | ||
| README.md | ||
| test-suggest.js | ||
![Karby logo]()
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:
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
# 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 |
🟠 Staging (develop) |
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