Compare commits
1 commit
main
...
madhura68-
| Author | SHA1 | Date | |
|---|---|---|---|
| 608b88a20c |
1 changed files with 56 additions and 158 deletions
214
README.md
214
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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue