Merge pull request #6 from madhura68/madhura68-patch-1
Revise README for project overview and features
This commit is contained in:
GitHub
commit
c7654add24
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
|
## Portfolio samenvatting
|
||||||
willen plannen, uitvoeren en evalueren.
|
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`
|
## Belangrijk
|
||||||
product, niet als medisch hulpmiddel. Release 1 blijft smal:
|
Deze applicatie is een **wellness tool** en geen medisch hulpmiddel.
|
||||||
|
|
||||||
- alleen individuele gebruikers
|
## Mijn rol
|
||||||
- alleen Nederlands
|
- Concept en ontwerp
|
||||||
- geen delen met zorgverleners of naasten
|
- Fullstack development
|
||||||
- geen AI of medische workflows in de MVP
|
- 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
|
## Technologie stack
|
||||||
- protected dashboard met server-side sessiecontrole
|
- Next.js
|
||||||
- ochtendcheck-in voor energiescore en slaapkwaliteit van vandaag
|
- React
|
||||||
- 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
|
|
||||||
- TypeScript
|
- TypeScript
|
||||||
- Tailwind CSS
|
- Supabase (auth + database)
|
||||||
- shadcn/ui component foundation
|
- Vercel (hosting)
|
||||||
- Vercel als hostingdoel
|
|
||||||
- Supabase voor database en authenticatie
|
|
||||||
|
|
||||||
## 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`
|
## Live demo
|
||||||
2. Vul in:
|
👉 Voeg hier je Vercel link toe
|
||||||
- `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`
|
|
||||||
|
|
||||||
## Scripts
|
## Screenshots
|
||||||
|
👉 Voeg hier screenshots toe (dashboard, check-in, etc.)
|
||||||
|
|
||||||
- `npm run dev`
|
## Privacy & security
|
||||||
- `npm run build`
|
- Authenticatie via Supabase
|
||||||
- `npm run start`
|
- Server-side sessiebeheer
|
||||||
- `npm run lint`
|
- Geen medische claims
|
||||||
- `npm run test`
|
- (Toekomst) row-level security (RLS)
|
||||||
- `npm run seed:demo-users`
|
|
||||||
|
|
||||||
## 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:
|
## Toekomstige verbeteringen
|
||||||
- Email/password auth
|
- Uitbreiding dashboard
|
||||||
- Self-signup
|
- Betere data-analyse
|
||||||
- Email confirmation verplicht
|
- Notificaties
|
||||||
2. Voeg redirect URLs toe voor:
|
- Mobile optimalisatie
|
||||||
- `http://localhost:3000/auth/confirm`
|
|
||||||
- je Vercel productie-URL
|
|
||||||
- eventuele preview-URL's die je wilt testen
|
|
||||||
|
|
||||||
## Omgevingsbestanden
|
## Repository
|
||||||
|
https://github.com/madhura68/inspannings-monitor
|
||||||
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
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue