🍞 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 naar homelab
scp index.html core@homelab:/opt/stacks/eetdagboek/
ssh core@homelab "docker cp /opt/stacks/eetdagboek/index.html eetdagboek:/usr/share/nginx/html/"

Live op: 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

4.2 KiB Raw Blame History Unescape Escape