From ccf7f349e023233e0fb360213c2972980633c9eb Mon Sep 17 00:00:00 2001 From: Janpeter Visser Date: Fri, 24 Apr 2026 20:14:58 +0200 Subject: [PATCH] Revise README for project overview and features Updated README to reflect changes in project scope, features, and technology stack. --- README.md | 214 ++++++++++++++---------------------------------------- 1 file changed, 56 insertions(+), 158 deletions(-) diff --git a/README.md b/README.md index c9a4ba9..51085e1 100644 --- a/README.md +++ b/README.md @@ -1,172 +1,70 @@ -# Inspannings Monitor +# Inspannings Monitor – Energie Management Tool -Wellness-first webapp voor volwassen individuele gebruikers die hun energie -willen plannen, uitvoeren en evalueren. +## Portfolio samenvatting +De Inspannings Monitor is een webapplicatie gericht op het inzichtelijk maken van energieverbruik en belastbaarheid. +De applicatie is ontwikkeld als praktijkgericht project om moderne webdevelopment en gebruikersgerichte oplossingen te combineren. -## Productrichting +## Doel +Gebruikers hebben vaak onvoldoende inzicht in hun energieverdeling gedurende de dag. +Deze applicatie helpt bij: +- plannen van activiteiten +- monitoren van energie +- voorkomen van overbelasting -`Inspannings Monitor` wordt bewust gebouwd als `wellness/self-management` -product, niet als medisch hulpmiddel. Release 1 blijft smal: +## Belangrijk +Deze applicatie is een **wellness tool** en geen medisch hulpmiddel. -- alleen individuele gebruikers -- alleen Nederlands -- geen delen met zorgverleners of naasten -- geen AI of medische workflows in de MVP +## Mijn rol +- Concept en ontwerp +- Fullstack development +- UX/UI ontwerp +- Database en authenticatie +- Deployment -## Huidige scope +## Functionaliteiten +- Gebruikerslogin (Supabase Auth) +- Dagplanning en activiteitenbeheer +- Energie-check-ins +- Overzicht van belasting vs herstel +- Dashboard weergave +- Server-side sessiebeheer -- e-mail/wachtwoord-auth via Supabase -- protected dashboard met server-side sessiecontrole -- ochtendcheck-in voor energiescore en slaapkwaliteit van vandaag -- eenvoudig dagbudget en energieniveau op basis van de ochtendscore -- dashboardweergave van check-instatus, energieniveau en dagbudget -- planningsfundering met activiteitenmodel, categorieën en skip-redenen in Supabase -- planningpagina voor vandaag met activiteit toevoegen en directe lijstweergave -- statusflows voor activiteiten van vandaag (`gepland`, `uitgevoerd`, `overgeslagen`, `aangepast`) -- contextuele evaluatievelden voor overgeslagen en aangepaste activiteiten -- dagoverzicht op planning met gepland versus werkelijk en statusverdeling -- autocomplete op basis van eerdere eigen activiteiten voor sneller hergebruik in planning -- energiemeter met lopend totaal ten opzichte van het dagbudget -- niet-blokkerende waarschuwing bij budgetoverschrijding in planning en dashboard -- eerste unit tests voor budget- en meterlogica via `Vitest` -- korte onboardingflow voor eerste voorkeuren -- instellingen voor profieltekst, avatar, taal, timezone, reminders en zichtbaarheid van energiepunten -- `shadcn/ui` foundation voor knoppen, formulieren, kaarten en meldingen -- `Dusk`-theme met dark-mode prioriteit, semantische oppervlakken en verbeterde focus-/toegankelijkheidsstijlen - -## Stack - -- Next.js 16 App Router -- React 19 +## Technologie stack +- Next.js +- React - TypeScript -- Tailwind CSS -- shadcn/ui component foundation -- Vercel als hostingdoel -- Supabase voor database en authenticatie +- Supabase (auth + database) +- Vercel (hosting) -## Snel lokaal starten +## Architectuur (kort) +- Next.js frontend + server routes +- Supabase voor auth en data +- Server-side validatie van sessies +- Cloud deployment via Vercel -1. Kopieer `.env.example` naar `.env.local` -2. Vul in: - - `NEXT_PUBLIC_SUPABASE_URL` - - `NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY` - - optioneel: `NEXT_PUBLIC_ENABLE_TEST_WIZARD=true` voor de interne wizard-testpagina -3. Installeer dependencies met `npm install` -4. Start lokaal met `npm run dev` +## Live demo +👉 Voeg hier je Vercel link toe -## Scripts +## Screenshots +👉 Voeg hier screenshots toe (dashboard, check-in, etc.) -- `npm run dev` -- `npm run build` -- `npm run start` -- `npm run lint` -- `npm run test` -- `npm run seed:demo-users` +## Privacy & security +- Authenticatie via Supabase +- Server-side sessiebeheer +- Geen medische claims +- (Toekomst) row-level security (RLS) -## Supabase Auth configuratie +## Wat ik geleerd heb +- Integratie van Supabase in moderne apps +- Werken met gebruikersauthenticatie +- Opzetten van een data-driven applicatie +- UX voor laagdrempelige interactie -1. Zet in Supabase Dashboard aan: - - Email/password auth - - Self-signup - - Email confirmation verplicht -2. Voeg redirect URLs toe voor: - - `http://localhost:3000/auth/confirm` - - je Vercel productie-URL - - eventuele preview-URL's die je wilt testen +## Toekomstige verbeteringen +- Uitbreiding dashboard +- Betere data-analyse +- Notificaties +- Mobile optimalisatie -## Omgevingsbestanden - -Gebruik alleen `.env.example` als template. Lokale bestanden zoals `.env` en -`.env.local` horen niet in git thuis. - -## Supabase database migraties - -De huidige app gebruikt onder meer deze migraties: - -- `supabase/migrations/20260418_create_profiles_and_user_settings.sql` -- `supabase/migrations/20260418_add_onboarding_seen_to_profiles.sql` -- `supabase/migrations/20260418_create_morning_check_ins.sql` -- `supabase/migrations/20260418_add_budget_fields_to_morning_check_ins.sql` -- `supabase/migrations/20260419_create_activities_and_reference_data.sql` -- `supabase/migrations/20260419_add_profile_details_and_avatar_storage.sql` - -Voer deze SQL uit in de Supabase SQL Editor of via de Supabase CLI voordat je -de profile-, check-in- en budgetlagen lokaal test. - -## Demo-gebruikers seeden - -Er staat nu een seedscript klaar voor fictieve demo-gebruikers op basis van de -persona-set in [inspannings-monitor-08-gebruikerspersonas-v01.docx](/Users/janpetervisser/Development/third/docs/inspannings-monitor-08-gebruikerspersonas-v01.docx). - -Benodigd: - -- `NEXT_PUBLIC_SUPABASE_URL` -- `SUPABASE_SECRET_KEY` voorkeur -- `SUPABASE_SERVICE_ROLE_KEY` mag nog als legacy alias -- `DEMO_USER_PASSWORD` - -Uitvoeren: - -1. zorg dat de profiel- en storage-migraties al in Supabase zijn uitgevoerd -2. zet de drie env-vars lokaal -3. run `npm run seed:demo-users` - -Voor bestaande lokale setups accepteert het script tijdelijk ook: -- `NEXT_PUBLIC_SUPABASE_SERVICE_KEY` - -Maar mijn advies is om voor seedscripts alleen deze nette niet-public adminnaam te gebruiken: -- `SUPABASE_SECRET_KEY` - -De seeddata zelf staat in: -- [demo-personas.mjs](/Users/janpetervisser/Development/third/scripts/seed/demo-personas.mjs) - -Een dry run kan ook: -- `npm run seed:demo-users -- --dry-run` - -## UI foundation - -De app gebruikt `shadcn/ui` bovenop `Tailwind CSS` als herbruikbare basis voor -knoppen, formulieren, kaarten en meldingen. De theme tokens staan centraal in -`app/globals.css`, zodat kleur, focus-states en componentgedrag consistenter blijven. -Voor feedback na redirects of server actions krijgt de app nu standaard de voorkeur -voor `sonner`-toasts boven losse inline statusmeldingen. - -De actuele visuele richting is `Dusk`: warme paper-achtergronden, gedempte indigo -als primaire kleur, dark mode als standaard en semantische `success`/`warning` -tokens voor rustige, niet-medische feedback. - -## Navigatie - -De app gebruikt nu een gedeelde topnavigatie: - -- links: `About`, `Dashboard`, `Planning`, `Check-in` -- rechts: `Account` en `Theme` - -`/` is de publieke `About`-pagina met informatie over de maker en de scope van -de app. In het `Account`-menu komen ingelogde gebruikers bij `Instellingen` en -`Uitloggen`; uitgelogde gebruikers zien daar `Inloggen` en `Account aanmaken`. - -## Interne wizard-test - -Er is een interne testwizard beschikbaar op `/wizard-test` om een toekomstige -generieke wizard-core te valideren. Deze route en de dashboardknop worden alleen -zichtbaar als `NEXT_PUBLIC_ENABLE_TEST_WIZARD=true` staat. - -## CI/CD - -- `CI`: GitHub Actions draait automatisch `lint`, `test` en `build` op pull requests en op `main` -- `CD`: Vercel deployt automatisch previews voor branches/PR's en productie vanaf `main` -- Uitwerking: [docs/inspannings-monitor-cicd-en-deploy.md](/Users/janpetervisser/Development/third/docs/inspannings-monitor-cicd-en-deploy.md) - -## Documentatie - -- Hoofdset specificaties en plannen: [docs/README.md](/Users/janpetervisser/Development/third/docs/README.md) -- Dusk theme-specificatie: [inspannings-monitor-09-dusk-theme-specificatie-v01.md](/Users/janpetervisser/Development/third/docs/inspannings-monitor-09-dusk-theme-specificatie-v01.md) -- Technische architectuur: [inspannings-monitor-05-technische-architectuur-en-implementatie-v01.docx](/Users/janpetervisser/Development/third/docs/inspannings-monitor-05-technische-architectuur-en-implementatie-v01.docx) -- Implementatieplan en backlog: [inspannings-monitor-06-implementatieplan-en-backlog-v01.docx](/Users/janpetervisser/Development/third/docs/inspannings-monitor-06-implementatieplan-en-backlog-v01.docx) - -## Eerstvolgende bouwstappen - -1. `ST-105` RLS-policy tests en hardening afronden -2. logging en monitoring toevoegen -3. rate limiting op kritieke mutaties +## Repository +https://github.com/madhura68/inspannings-monitor