← Al het werk
Project — 06

CarbWatch

Zoek ingrediënten, bereken koolhydraten en schat insuline op basis van gebruikersinstellingen.

Website bezoeken
DisciplineAngular frontend
Jaar2025
RolFrontend developer · Scrum Master
SectorGezondheidseducatie
CarbWatch product interface screenshotCARBWATCH· HERO · 16:9
Overzicht

Angular frontend-eindproject, oorspronkelijk koolyhealth genoemd en in de UI gebrand als CarbWatch. Gebruikers kunnen registreren, inloggen, koolhydraat/insuline-instellingen beheren, ingrediënten zoeken via Spoonacular, lijsten met geconsumeerde ingrediënten bouwen, koolhydraattotalen berekenen, insulinedosering schatten en receptpagina's vanuit een backend bekijken.

Gebouwd in een agile/Scrum studententeam waar ik werkte als frontend developer en Scrum Master. Mijn werk omvatte de Angular scaffold, routes, auth guard, login/register/settings-flows, ingrediëntenzoekfunctie, calculator-wiring, Tailwind/Flowbite UI-pass, dark mode en veel van de finale template cleanup.

Uitdaging & Aanpak
De Uitdaging

Wat in de weg stond.

De app moest accountinstellingen, voedingsdata van ingrediënten, geconsumeerde hoeveelheden, receptpagina's en insulineberekening combineren op een manier die begrijpelijk bleef binnen de frontend-scope van een schoolproject.

De Aanpak

Hoe ik het opgelost heb.

Ik bouwde protected routes met Angular Router guards, een tweestaps reactieve registratieflow voor account- en insuline-instellingen, localStorage-backed sessie/settings-state, Spoonacular ingrediëntnormalisatie, signal-driven koolhydraattotalen, gedeelde calculator service calls, Flowbite/Tailwind layouts en persistente dark mode. Het project is bewust gekaderd als educatieve frontend, niet als klinisch gevalideerd medisch hulpmiddel.

Stack — volledig overzicht
Frontend
Angular 19TypeScript 5.6Standalone componentsAngular Router
UI / formulieren
Tailwind CSS 3.4Flowbite AngularReactive FormsAngular Signals
Data
Angular HttpClientSpoonacular APILocal API backend
State
localStorageAuth tokenUser settingsSelected ingredients
Kwaliteit
Angular CLIKarmaJasmine smoke specs
Geselecteerde schermen
← Vorige

Temporal Workers

Volgende →

Movie Index App