Add analytics and documentation updates

This commit is contained in:
Janpeter Visser 2026-04-25 15:11:51 +02:00
parent e0efb65efb
commit b5e967d8d3
15 changed files with 414 additions and 37 deletions

173
README.md
View file

@ -1,64 +1,199 @@
# Scrum4Me Agile Project Management Tool
## Portfolio samenvatting
Scrum4Me is een moderne fullstack webapplicatie voor agile projectmanagement.
De applicatie is gebouwd als portfolio-project om mijn vaardigheden in moderne softwareontwikkeling, cloud deployment en AI-assisted development te demonstreren.
## Doel
Veel teams missen overzicht en flexibiliteit in agile workflows.
Scrum4Me biedt een lichtgewicht, web-based oplossing voor het beheren van sprints, taken en teamprocessen.
## Mijn rol
- Architectuur en ontwerp
- Fullstack development (frontend + backend)
- Database ontwerp
- Implementatie van authenticatie en APIs
- Implementatie van authenticatie en API's
- CI/CD en deployment
- AI-assisted development workflow
## Functionaliteiten
- Agile dashboards (scrum boards)
- Taakbeheer (create/update/delete)
- Agile dashboards en product backlogs
- PBI-, story-, sprint- en taakbeheer
- Authenticatie en gebruikersbeheer
- Teamtoegang via eigenaar of gekoppelde Developer
- API tokens voor externe integraties
- Drag-and-drop interactie
- Integratie met AI tooling (Claude Code)
- REST API voor Claude Code workflows
- Drag-and-drop interactie voor planning
- Story-activiteitenlog voor plannen, testresultaten en commits
- Profielfoto, bio en rolbeheer
## Technologie stack
- Next.js (App Router)
- React
- Next.js 16 (App Router)
- React 19
- TypeScript
- Prisma ORM
- PostgreSQL (Neon)
- Vercel (hosting)
- GitHub Actions (CI/CD)
- iron-session en bcryptjs
- Zustand
- dnd-kit
- Tailwind CSS en shadcn/ui
- Sharp voor avatarverwerking
- Vercel Analytics
- Vercel hosting
- GitHub Actions / CI-CD
## Architectuur (kort)
- Frontend en backend via Next.js
- Frontend en backend via Next.js App Router
- Server Components voor data loading
- Server Actions voor UI-mutaties
- Route Handlers voor de externe REST API
- Database via Prisma + PostgreSQL
- Auth en API via server routes
- Deployment via Vercel
- Auth via versleutelde sessiecookies
- Producttoegang via eigenaar of `product_members`
- Deployment via Vercel met Neon als database
## Live demo
👉 Voeg hier je Vercel link toe
Voeg hier je Vercel link toe.
## Screenshots
👉 Voeg hier screenshots toe (dashboard, board, etc.)
Voeg hier screenshots toe van dashboard, product backlog, sprint planning en instellingen.
## Wat ik geleerd heb
- Werken met moderne fullstack architectuur
- Integratie van database via Prisma
- Opzetten van CI/CD pipelines
- Structureren van schaalbare webapplicaties
- Werken met moderne fullstack architectuur in Next.js
- Databaseontwerp met Prisma en PostgreSQL
- Server Actions combineren met REST API Route Handlers
- Beveiliging van cross-user en cross-scope toegang
- AI-assisted development integreren in een eigen workflow
- Cloud deployment en verificatie via Vercel
- Documentatie en agent-instructies verbeteren op basis van code review
## Toekomstige verbeteringen
- Multi-user samenwerking verbeteren
- Multi-user samenwerking verder uitbreiden
- Notificaties
- Performance optimalisatie
- Uitbreiding AI-functionaliteit
- Meer integratietests voor autorisatie en API-flows
## Repository
https://github.com/madhura68/Scrum4Me
---
## Technische aanvulling
Deze sectie bevat de praktische projectinformatie die nodig is om de app lokaal te draaien, te deployen en veilig door te ontwikkelen.
### Lokale setup
1. Installeer dependencies:
```bash
npm ci
```
2. Maak lokale environment variabelen:
```bash
cp .env.example .env.local
```
Vul daarna `DATABASE_URL` en `SESSION_SECRET` in. `DIRECT_URL` is optioneel lokaal, maar handig voor migraties in cloudomgevingen.
3. Synchroniseer of migreer de database:
```bash
npx prisma db push
```
4. Seed testdata indien nodig:
```bash
npx prisma db seed
```
5. Start de app:
```bash
npm run dev
```
De app draait standaard op `http://localhost:3000`.
### Scripts
```bash
npm run dev # lokale development server
npm run lint # ESLint
npm test # Vitest test suite
npm run build # productiebuild zoals Vercel die verwacht
```
### Environment variables
Zie [.env.example](.env.example).
| Variabele | Verplicht | Doel |
|---|---:|---|
| `DATABASE_URL` | Ja | PostgreSQL connection string voor Prisma |
| `DIRECT_URL` | Nee | Directe Neon connection string voor migraties |
| `SESSION_SECRET` | Ja | Minimaal 32 tekens; gebruikt door iron-session |
| `NODE_ENV` | Nee | Wordt door Node/Vercel gezet |
Vercel Analytics gebruikt geen project-specifieke environment variabele in deze app; de component staat in `app/layout.tsx`.
### API-overzicht
Alle API-endpoints vereisen:
```http
Authorization: Bearer <token>
```
| Methode | Endpoint | Doel |
|---|---|---|
| `GET` | `/api/products` | Actieve producten waarvoor de tokengebruiker eigenaar of teamlid is |
| `GET` | `/api/products/:id/next-story` | Volgende story uit de actieve sprint |
| `GET` | `/api/sprints/:id/tasks?limit=10` | Eerste taken van een sprint |
| `PATCH` | `/api/stories/:id/tasks/reorder` | Taakvolgorde aanpassen; alle IDs moeten bij de story horen |
| `POST` | `/api/stories/:id/log` | Implementatieplan, testresultaat of commit vastleggen |
| `PATCH` | `/api/tasks/:id` | Taakstatus of implementatieplan bijwerken |
| `POST` | `/api/todos` | Todo aanmaken binnen een productcontext |
### Security-regels
- Server Actions en Route Handlers vertrouwen nooit op losse client-ID's zonder scope-check.
- Producttoegang loopt via eigenaar of `product_members`.
- Bulk-mutaties valideren eerst dat alle IDs bij dezelfde toegankelijke parent horen.
- Denormalized fields zoals `story.product_id` worden afgeleid van de database-parent, niet van form-data.
- Demo-gebruikers krijgen 403 op schrijfoperaties.
### Deployment
De productieomgeving is gericht op Vercel + Neon.
1. Zet `DATABASE_URL`, eventueel `DIRECT_URL`, en `SESSION_SECRET` in Vercel.
2. Zorg dat de Neon-database gemigreerd is.
3. Push naar `main`; Vercel deployt automatisch.
4. Controleer na deployment:
- login en dashboard
- `/api/products` met een API-token
- avatar-upload
- Vercel Analytics in het Vercel dashboard
### Documentatie
- [Functionele specificatie](docs/scrum4me-functional-spec.md)
- [Technische architectuur](docs/scrum4me-architecture.md)
- [Backlog](docs/scrum4me-backlog.md)
- [Agent-instructie audit](docs/agent-instruction-audit.md)