janpeter/Scrum4Me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
Scrum4Me/README.md

5.6 KiB
Raw Blame History

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 API's
  • CI/CD en deployment
  • AI-assisted development workflow

Functionaliteiten

  • Agile dashboards en product backlogs
  • PBI-, story-, sprint- en taakbeheer
  • Authenticatie en gebruikersbeheer
  • Teamtoegang via eigenaar of gekoppelde Developer
  • API tokens voor externe integraties
  • 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 16 (App Router)
  • React 19
  • TypeScript
  • Prisma ORM
  • PostgreSQL (Neon)
  • 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 App Router
  • Server Components voor data loading
  • Server Actions voor UI-mutaties
  • Route Handlers voor de externe REST API
  • Database via Prisma + PostgreSQL
  • 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.

Screenshots

Voeg hier screenshots toe van dashboard, product backlog, sprint planning en instellingen.

Wat ik geleerd heb

  • 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 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:
npm ci
  1. Maak lokale environment variabelen:
cp .env.example .env.local

Vul daarna DATABASE_URL en SESSION_SECRET in. DIRECT_URL is optioneel lokaal, maar handig voor migraties in cloudomgevingen.

  1. Synchroniseer of migreer de database:
npx prisma db push
  1. Seed testdata indien nodig:
npx prisma db seed
  1. Start de app:
npm run dev

De app draait standaard op http://localhost:3000.

Scripts

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.

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:

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