Revise README for project overview and features
Updated the README to reflect new features, technology stack, and project goals.
This commit is contained in:
GitHub
parent
671e58948c
commit
aea278eed7
1 changed files with 60 additions and 246 deletions
306
README.md
306
README.md
|
|
@ -1,250 +1,64 @@
|
||||||
# Scrum4Me
|
# 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
|
||||||
|
|
||||||
|
## Functionaliteiten
|
||||||
|
- Agile dashboards (scrum boards)
|
||||||
|
- Taakbeheer (create/update/delete)
|
||||||
|
- Authenticatie en gebruikersbeheer
|
||||||
|
- API tokens voor externe integraties
|
||||||
|
- Drag-and-drop interactie
|
||||||
|
- Integratie met AI tooling (Claude Code)
|
||||||
|
|
||||||
|
## Technologie stack
|
||||||
|
- Next.js (App Router)
|
||||||
|
- React
|
||||||
|
- TypeScript
|
||||||
|
- Prisma ORM
|
||||||
|
- PostgreSQL (Neon)
|
||||||
|
- Vercel (hosting)
|
||||||
|
- GitHub Actions (CI/CD)
|
||||||
|
|
||||||
|
## Architectuur (kort)
|
||||||
|
- Frontend en backend via Next.js
|
||||||
|
- Database via Prisma + PostgreSQL
|
||||||
|
- Auth en API via server routes
|
||||||
|
- Deployment via Vercel
|
||||||
|
|
||||||
|
## Live demo
|
||||||
|
👉 Voeg hier je Vercel link toe
|
||||||
|
|
||||||
|
## Screenshots
|
||||||
|
👉 Voeg hier screenshots toe (dashboard, board, etc.)
|
||||||
|
|
||||||
|
## Wat ik geleerd heb
|
||||||
|
- Werken met moderne fullstack architectuur
|
||||||
|
- Integratie van database via Prisma
|
||||||
|
- Opzetten van CI/CD pipelines
|
||||||
|
- Structureren van schaalbare webapplicaties
|
||||||
|
|
||||||
|
## Toekomstige verbeteringen
|
||||||
|
- Multi-user samenwerking verbeteren
|
||||||
|
- Notificaties
|
||||||
|
- Performance optimalisatie
|
||||||
|
- Uitbreiding AI-functionaliteit
|
||||||
|
|
||||||
|
## Repository
|
||||||
|
https://github.com/madhura68/Scrum4Me
|
||||||
|
|
||||||
Lichtgewicht Scrum-planner voor solo developers en kleine teams die meerdere softwareprojecten parallel beheren.
|
|
||||||
|
|
||||||
**Functies:**
|
|
||||||
- Hiërarchisch werkbeheer: Product → PBI → Story → Taak
|
|
||||||
- Gesplitste planningsschermen met drag-and-drop
|
|
||||||
- Sprint Backlog: stories slepen vanuit de Product Backlog naar de Sprint en terug
|
|
||||||
- Sprint Planning: taken beheren per story
|
|
||||||
- REST API voor integratie met Claude Code
|
|
||||||
- Demo-modus (alleen lezen) — inclusief actieve sprint met voorbeelddata
|
|
||||||
- Statusbalk met versienummer en builddatum
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Lokale quickstart
|
|
||||||
|
|
||||||
### Vereisten
|
|
||||||
- Node.js 20+
|
|
||||||
- npm
|
|
||||||
- Een Neon PostgreSQL database ([neon.tech](https://neon.tech) — gratis tier volstaat)
|
|
||||||
|
|
||||||
### Stappen
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# 1. Clone de repository
|
|
||||||
git clone <repo-url>
|
|
||||||
cd scrum4me
|
|
||||||
|
|
||||||
# 2. Installeer dependencies
|
|
||||||
npm install
|
|
||||||
|
|
||||||
# 3. Configureer omgevingsvariabelen
|
|
||||||
cp .env.example .env.local
|
|
||||||
# Vul de volgende waarden in .env.local:
|
|
||||||
# DATABASE_URL — Neon pooled connection string
|
|
||||||
# DIRECT_URL — Neon direct connection string
|
|
||||||
# SESSION_SECRET — genereer met: openssl rand -base64 32
|
|
||||||
|
|
||||||
# 4. Database schema aanmaken en migraties uitvoeren
|
|
||||||
npx prisma migrate deploy
|
|
||||||
|
|
||||||
# 5. Testdata inladen
|
|
||||||
npx prisma db seed
|
|
||||||
|
|
||||||
# 6. Start de ontwikkelserver
|
|
||||||
npm run dev
|
|
||||||
```
|
|
||||||
|
|
||||||
Open [http://localhost:3000](http://localhost:3000).
|
|
||||||
|
|
||||||
**Demo-account:** gebruikersnaam `demo` / wachtwoord `demo1234` (alleen lezen — inclusief actieve sprint met 3 voorbeeldstories)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Omgevingsvariabelen
|
|
||||||
|
|
||||||
| Variabele | Beschrijving |
|
|
||||||
|---|---|
|
|
||||||
| `DATABASE_URL` | Neon pooled connection string |
|
|
||||||
| `DIRECT_URL` | Neon direct connection string (voor migraties) |
|
|
||||||
| `SESSION_SECRET` | Minimaal 32 tekens — genereer met `openssl rand -base64 32` |
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Cloud deployment (Vercel + Neon)
|
|
||||||
|
|
||||||
### 1. Database aanmaken op Neon
|
|
||||||
|
|
||||||
1. Maak een account op [neon.tech](https://neon.tech)
|
|
||||||
2. Maak een nieuw project en database
|
|
||||||
3. Kopieer de connection strings:
|
|
||||||
- **DATABASE_URL**: de pooled connection string
|
|
||||||
- **DIRECT_URL**: de directe (niet-gepoolde) connection string
|
|
||||||
|
|
||||||
### 2. Deployen op Vercel
|
|
||||||
|
|
||||||
1. Push de code naar GitHub
|
|
||||||
2. Importeer het project in [vercel.com](https://vercel.com)
|
|
||||||
3. Voeg de volgende environment variables toe in Vercel:
|
|
||||||
- `DATABASE_URL` (Neon pooled URL)
|
|
||||||
- `DIRECT_URL` (Neon direct URL)
|
|
||||||
- `SESSION_SECRET` (random string >= 32 tekens)
|
|
||||||
4. Deploy
|
|
||||||
|
|
||||||
### 3. Database migraties uitvoeren
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# Eenmalig na deploy:
|
|
||||||
npx prisma migrate deploy
|
|
||||||
npx prisma db seed
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## REST API
|
|
||||||
|
|
||||||
Alle endpoints vereisen `Authorization: Bearer <token>`.
|
|
||||||
Maak een token aan via **Instellingen -> API Tokens** in de app.
|
|
||||||
|
|
||||||
### Endpoints
|
|
||||||
|
|
||||||
#### `GET /api/products`
|
|
||||||
Haal alle actieve producten op.
|
|
||||||
|
|
||||||
```bash
|
|
||||||
curl -H "Authorization: Bearer <token>" \
|
|
||||||
https://your-app.vercel.app/api/products
|
|
||||||
```
|
|
||||||
|
|
||||||
**Response:**
|
|
||||||
```json
|
|
||||||
[
|
|
||||||
{ "id": "clx...", "name": "Mijn Product", "repo_url": "https://github.com/..." }
|
|
||||||
]
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
#### `GET /api/products/:id/next-story`
|
|
||||||
Haal de hoogst geprioriteerde open story uit de actieve sprint op.
|
|
||||||
|
|
||||||
```bash
|
|
||||||
curl -H "Authorization: Bearer <token>" \
|
|
||||||
https://your-app.vercel.app/api/products/<product-id>/next-story
|
|
||||||
```
|
|
||||||
|
|
||||||
**Response:** story-object inclusief taken.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
#### `GET /api/sprints/:id/tasks?limit=10`
|
|
||||||
Haal de eerste N taken uit de sprint op (standaard 10, max 50).
|
|
||||||
|
|
||||||
```bash
|
|
||||||
curl -H "Authorization: Bearer <token>" \
|
|
||||||
"https://your-app.vercel.app/api/sprints/<sprint-id>/tasks?limit=5"
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
#### `POST /api/stories/:id/log`
|
|
||||||
Voeg een logvermelding toe aan een story.
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# Implementatieplan:
|
|
||||||
curl -X POST -H "Authorization: Bearer <token>" \
|
|
||||||
-H "Content-Type: application/json" \
|
|
||||||
-d '{"type":"IMPLEMENTATION_PLAN","content":"Aanpak: ..."}' \
|
|
||||||
https://your-app.vercel.app/api/stories/<story-id>/log
|
|
||||||
|
|
||||||
# Testresultaat:
|
|
||||||
curl -X POST -H "Authorization: Bearer <token>" \
|
|
||||||
-H "Content-Type: application/json" \
|
|
||||||
-d '{"type":"TEST_RESULT","content":"Alle tests geslaagd","status":"PASSED"}' \
|
|
||||||
https://your-app.vercel.app/api/stories/<story-id>/log
|
|
||||||
|
|
||||||
# Commit:
|
|
||||||
curl -X POST -H "Authorization: Bearer <token>" \
|
|
||||||
-H "Content-Type: application/json" \
|
|
||||||
-d '{"type":"COMMIT","content":"feat: ST-001","commit_hash":"abc123","commit_message":"feat: ST-001 scaffolding"}' \
|
|
||||||
https://your-app.vercel.app/api/stories/<story-id>/log
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
#### `PATCH /api/stories/:id/tasks/reorder`
|
|
||||||
Pas de taakvolgorde aan binnen een story.
|
|
||||||
|
|
||||||
```bash
|
|
||||||
curl -X PATCH -H "Authorization: Bearer <token>" \
|
|
||||||
-H "Content-Type: application/json" \
|
|
||||||
-d '{"task_ids":["id-1","id-2","id-3"]}' \
|
|
||||||
https://your-app.vercel.app/api/stories/<story-id>/tasks/reorder
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
#### `PATCH /api/tasks/:id`
|
|
||||||
Werk de status van een taak bij.
|
|
||||||
|
|
||||||
```bash
|
|
||||||
curl -X PATCH -H "Authorization: Bearer <token>" \
|
|
||||||
-H "Content-Type: application/json" \
|
|
||||||
-d '{"status":"IN_PROGRESS"}' \
|
|
||||||
https://your-app.vercel.app/api/tasks/<task-id>
|
|
||||||
```
|
|
||||||
|
|
||||||
**Status waarden:** `TO_DO` - `IN_PROGRESS` - `DONE`
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
#### `POST /api/todos`
|
|
||||||
Maak een todo aan.
|
|
||||||
|
|
||||||
```bash
|
|
||||||
curl -X POST -H "Authorization: Bearer <token>" \
|
|
||||||
-H "Content-Type: application/json" \
|
|
||||||
-d '{"title":"Mijn nieuwe todo"}' \
|
|
||||||
https://your-app.vercel.app/api/todos
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Claude Code integratie
|
|
||||||
|
|
||||||
Scrum4Me integreert met [Claude Code](https://claude.ai/claude-code) via de REST API.
|
|
||||||
|
|
||||||
1. Maak een API token aan via **Instellingen -> API Tokens**
|
|
||||||
2. Gebruik de API om implementatieplannen, testresultaten en commits automatisch te loggen in stories
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Scripts
|
|
||||||
|
|
||||||
| Script | Beschrijving |
|
|
||||||
|---|---|
|
|
||||||
| `npm run dev` | Lokale ontwikkelserver |
|
|
||||||
| `npm run build` | Productie-build |
|
|
||||||
| `npm run lint` | ESLint |
|
|
||||||
| `npm test` | Beveiligingstests uitvoeren |
|
|
||||||
| `npx tsc --noEmit` | TypeScript-check |
|
|
||||||
| `npx prisma migrate deploy` | Migraties uitvoeren |
|
|
||||||
| `npx prisma db seed` | Testdata inladen |
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Tech stack
|
|
||||||
|
|
||||||
- **Next.js 15** (App Router) + **React 19**
|
|
||||||
- **TypeScript** strict
|
|
||||||
- **Tailwind CSS** + **shadcn/ui** (Base UI)
|
|
||||||
- **Zustand** (client state)
|
|
||||||
- **dnd-kit** (drag-and-drop, inclusief cross-panel drag)
|
|
||||||
- **Prisma v7** (ORM)
|
|
||||||
- **PostgreSQL** via **Neon** (zowel lokaal als productie)
|
|
||||||
- **iron-session** (auth)
|
|
||||||
- **Sonner** (toasts)
|
|
||||||
- **Zod** (validatie)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Wijzigingslog
|
|
||||||
|
|
||||||
### v0.2.0
|
|
||||||
- **Drag-and-drop Sprint Backlog**: stories slepen vanuit de Product Backlog (rechts) naar de Sprint Backlog (links) en terug — vervangt de voormalige "+ Sprint" knop
|
|
||||||
- **Statusbalk**: sticky balk onderaan met copyright, versienummer (`package.json`) en builddatum (ingesteld op het moment van de Vercel-build)
|
|
||||||
- **Demo-sprint**: seed maakt automatisch een actieve sprint aan voor de demo-gebruiker zodat de Sprint Backlog direct te verkennen is
|
|
||||||
- **CI/CD**: GitHub Actions pipeline met TypeScript-check, ESLint en automatische Prisma-generatie
|
|
||||||
- **Vercel + Neon deployment**: productie-omgeving actief op PostgreSQL
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue