From fc12e3cc64ad304fc410fa632fda87ad8e6a50b8 Mon Sep 17 00:00:00 2001 From: janpeter visser Date: Sat, 25 Apr 2026 12:47:32 +0200 Subject: [PATCH] feat: landingspagina met app-uitleg, Scrum-samenvatting en gebruikershandleiding Co-Authored-By: Claude Sonnet 4.6 --- app/page.tsx | 293 ++++++++++++++++++++++++++++++- docs/scrum4me-backlog.md | 1 + docs/scrum4me-functional-spec.md | 2 +- 3 files changed, 287 insertions(+), 9 deletions(-) diff --git a/app/page.tsx b/app/page.tsx index 4c3e167..cd98a5d 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,13 +1,290 @@ -import { Button } from "@/components/ui/button" +import Link from 'next/link' +import { AppIcon } from '@/components/shared/app-icon' -export default function Home() { +export default function LandingPage() { return ( -
-
-

Scrum4Me

-

Scaffolding complete — shadcn/ui Button works.

- -
+
+ + {/* ── Header ─────────────────────────────────────────────────── */} +
+ + + Scrum4Me + + +
+ +
+ + {/* ── Hero ───────────────────────────────────────────────────── */} +
+
+

+ Scrum planner voor solo developers en kleine teams +

+

+ Houd meerdere projecten bij in één overzicht. Plan Product Backlogs, beheer Sprints + met drag-and-drop en laat Claude Code taken oppakken via een REST API. +

+
+ + Account aanmaken + + + Demo bekijken + +
+

+ Demo-login: gebruikersnaam demo · wachtwoord demo1234 +

+
+
+ + {/* ── Wat is Scrum4Me ────────────────────────────────────────── */} +
+
+

Wat is Scrum4Me?

+

+ Scrum4Me is een desktop-first webapplicatie die Scrum lichtgewicht maakt — zonder + de overhead van grote tools als Jira of Linear. Ontworpen voor developers die + zelf de regie willen houden over hun planning. +

+
+
+
Hiërarchisch plannen
+

+ Organiseer werk in producten, Product Backlog Items, stories en taken. + Alles op één plek, gegroepeerd op prioriteit. +

+
+
+
Sprint-beheer
+

+ Start een Sprint met een doel, sleep stories naar de Sprint Backlog en + volg de voortgang per story via taken en statusupdates. +

+
+
+
Claude Code-integratie
+

+ Maak een API-token aan en laat Claude Code de volgende story ophalen, + taken uitvoeren en resultaten vastleggen via de REST API. +

+
+
+
+
+ + {/* ── Scrum samenvatting ─────────────────────────────────────── */} +
+
+

Scrum in Scrum4Me

+

+ Scrum4Me past een lichtgewicht versie van Scrum toe — de essentie zonder ceremony-overhead. + Hieronder staat hoe de kernbegrippen zijn vertaald naar de app. +

+ + {/* Hiërarchie */} +
+

Hiërarchie

+
+ {[ + { label: 'Product', sub: 'Een softwareproject of codebase' }, + { label: 'PBI', sub: 'Product Backlog Item — een feature of verbetering' }, + { label: 'Story', sub: 'Concrete user story binnen een PBI' }, + { label: 'Taak', sub: 'Implementatiestap binnen een story' }, + ].map((item, i, arr) => ( +
+
+
{item.label}
+
{item.sub}
+
+ {i < arr.length - 1 && ( + → + )} +
+ ))} +
+
+ + {/* Terminologie */} +
+

Terminologie

+
+ {[ + { term: 'Product Backlog', def: 'Geordende lijst van alle PBI\'s per product, gesorteerd op prioriteit (kritiek → laag) en positie.' }, + { term: 'Sprint', def: 'Actief tijdblok met een Sprint Goal. Per product is er maximaal één actieve Sprint tegelijk.' }, + { term: 'Sprint Backlog', def: 'De stories die voor deze Sprint zijn geselecteerd. Stories worden vanuit de Product Backlog gesleept.' }, + { term: 'Sprint Planning', def: 'Scherm waar taken per story worden aangemaakt en geordend. Claude Code werkt vanuit dit niveau.' }, + { term: 'Story-status', def: 'OPEN → IN_SPRINT → DONE. Bepaalt zichtbaarheid in backlogs en Sprint-schermen.' }, + { term: 'Taakstatus', def: 'TO_DO → IN_PROGRESS → DONE. Wordt bijgehouden via UI of REST API door Claude Code.' }, + { term: 'Activiteitenlog', def: 'Per story worden implementatieplan, testresultaat en commit vastgelegd via de API of UI.' }, + { term: 'Sprint afronden', def: 'Bij afsluiting wordt per story gekozen: markeer als Done of zet terug naar Backlog.' }, + ].map(({ term, def }) => ( +
+
{term}
+
{def}
+
+ ))} +
+
+ + {/* Rollen */} +
+

Rollen

+
+ {[ + { role: 'Product Owner', desc: 'Bepaalt prioriteit van PBI\'s en beheert de Product Backlog.' }, + { role: 'Scrum Master', desc: 'Bewaakt het Scrum-proces en verwijdert obstakels.' }, + { role: 'Developer', desc: 'Voert stories en taken uit; werkt via UI of Claude Code.' }, + ].map(({ role, desc }) => ( +
+
{role}
+
{desc}
+
+ ))} +
+

+ In v1 is één account gelijk aan één gebruiker met alle rollen. Teamgebruik met rolscheiding volgt in v2. +

+
+
+
+ + {/* ── Gebruikershandleiding ─────────────────────────────────── */} +
+
+

Gebruikershandleiding

+

+ Volg deze stappen om van een leeg account naar een volledig ingeplande Sprint te gaan. +

+ +
+ {[ + { + step: '1', + title: 'Account aanmaken', + desc: 'Ga naar Registreren en kies een gebruikersnaam en wachtwoord. Na registratie word je direct doorgestuurd naar het dashboard. Wil je eerst rondkijken? Log in met de demo-account (alleen leesrechten).', + }, + { + step: '2', + title: 'Product aanmaken', + desc: 'Klik op "Nieuw product" op het dashboard. Vul naam, optionele beschrijving, repo-URL en je Definition of Done in. Het product wordt zichtbaar op het dashboard.', + }, + { + step: '3', + title: 'Product Backlog opbouwen', + desc: 'Open het product en voeg PBI\'s toe via het linkerpaneel. Geef elk PBI een prioriteit (Kritiek / Hoog / Gemiddeld / Laag). Klik op een PBI om in het rechterpaneel stories toe te voegen. Versleep PBI\'s en stories om de volgorde aan te passen.', + }, + { + step: '4', + title: 'Sprint starten', + desc: 'Klik op "Sprint starten" op de productpagina en voer een Sprint Goal in. Per product is er maximaal één actieve Sprint tegelijk. Het Sprint-scherm wordt zichtbaar via de navigatie.', + }, + { + step: '5', + title: 'Sprint Backlog vullen', + desc: 'Ga naar het Sprint-scherm. Sleep stories vanuit de Product Backlog (rechterpaneel) naar de Sprint Backlog (linkerpaneel). Stories krijgen automatisch de status IN_SPRINT.', + }, + { + step: '6', + title: 'Taken aanmaken (Sprint Planning)', + desc: 'Ga naar Sprint Planning. Selecteer een story in het linkerpaneel om taken toe te voegen in het rechterpaneel. Maak concrete implementatiestappen als taken en orden ze met drag-and-drop.', + }, + { + step: '7', + title: 'API-token aanmaken voor Claude Code', + desc: 'Ga naar Instellingen → Tokens. Maak een nieuw token aan en kopieer de waarde direct — die is daarna niet meer zichtbaar. Gebruik het token als Bearer-token in Claude Code of je eigen scripts.', + }, + { + step: '8', + title: 'Claude Code koppelen', + desc: 'Configureer Claude Code met je API-token. Claude haalt via GET /api/products/:id/next-story de hoogst geprioriteerde open story op, werkt taken bij via PATCH /api/tasks/:id en legt het implementatieplan, testresultaten en commits vast via POST /api/stories/:id/log.', + }, + { + step: '9', + title: 'Sprint afronden', + desc: 'Klik op "Sprint afronden" op het Sprint-scherm. Voor elke story kies je: markeer als Done of zet terug naar de Product Backlog. Daarna is een nieuwe Sprint aanmaakbaar.', + }, + ].map(({ step, title, desc }) => ( +
+
+ {step} +
+
+
{title}
+
{desc}
+
+
+ ))} +
+
+
+ + {/* ── API-overzicht ─────────────────────────────────────────── */} +
+
+

REST API voor Claude Code

+

+ Alle API-endpoints vereisen een Authorization: Bearer <token> header. + Tokens beheer je via Instellingen → Tokens. +

+
+ {[ + { method: 'GET', path: '/api/products', desc: 'Lijst van actieve producten' }, + { method: 'GET', path: '/api/products/:id/next-story', desc: 'Hoogst geprioriteerde open story van de actieve Sprint' }, + { method: 'GET', path: '/api/sprints/:id/tasks?limit=10', desc: 'Eerste N taken van de Sprint op volgorde' }, + { method: 'PATCH', path: '/api/stories/:id/tasks/reorder', desc: 'Taakvolgorde aanpassen (body: { task_ids: string[] })' }, + { method: 'POST', path: '/api/stories/:id/log', desc: 'Activiteit vastleggen: implementatieplan, testresultaat of commit' }, + { method: 'PATCH', path: '/api/tasks/:id', desc: 'Taakstatus of implementatieplan bijwerken' }, + { method: 'POST', path: '/api/todos', desc: 'Todo aanmaken (body: { title, product_id })' }, + ].map(({ method, path, desc }) => ( +
+ + {method} + + {path} + {desc} +
+ ))} +
+
+
+ +
+ + {/* ── Footer ─────────────────────────────────────────────────── */} + +
) } diff --git a/docs/scrum4me-backlog.md b/docs/scrum4me-backlog.md index 3165219..f04d89a 100644 --- a/docs/scrum4me-backlog.md +++ b/docs/scrum4me-backlog.md @@ -319,6 +319,7 @@ De MVP is klaar wanneer Lars — de primaire persona — de volledige cyclus kan - [ ] **ST-611** README en lokale setup-documentatie - Schrijf `README.md` met: wat is Scrum4Me, quickstart lokaal (clone → env → prisma push → seed → dev), cloud deployment (Vercel + Neon stappenplan), API-documentatie (alle 7 endpoints met voorbeelden), Claude Code-integratie uitleg + - De in-app landingspagina (`/`) bevat al een gebruikershandleiding, Scrum-samenvatting en API-overzicht — de README richt zich op lokale setup en deployment - Done when: iemand zonder context de app lokaal kan draaien op basis van alleen de README - [ ] **ST-612** End-to-end acceptatietest diff --git a/docs/scrum4me-functional-spec.md b/docs/scrum4me-functional-spec.md index cf430ec..4b0e714 100644 --- a/docs/scrum4me-functional-spec.md +++ b/docs/scrum4me-functional-spec.md @@ -376,7 +376,7 @@ De app is deployable op Vercel + Neon PostgreSQL en lokaal draaibaar met een Neo ## Navigatiestructuur ``` -/ (redirect naar /login als niet ingelogd) +/ (landingspagina — app-uitleg, Scrum-samenvatting, gebruikershandleiding, API-overzicht) /login /register