Madhura68
4ff50cb87e
Reframe the landing page around what makes Scrum4Me unique: code execution stays on the developer's own hardware (laptop, NAS or VM). The Vercel UI and Neon DB are a metadata coordination layer; source code never leaves the local worker. Adds a mermaid-rendered architecture diagram (two-zone: Scrum4Me-stack vs Jouw kant) with light/dark variants generated via mmdc. Page changes (app/page.tsx): - Hero: H1 "Plannen in de cloud. Uitvoeren op je eigen machine." + new subhead; CTA "Hoe het werkt" replaces "Demo bekijken" (anchors to #architectuur). - New section §3 "Architectuur" with light/dark SVG and 4 callout-cards (Vercel · Neon · Lokale worker · GitHub) honestly describing what each component stores or runs. - Feature grid: 6 cards (set C) — combines Sprint Board + Solo Paneel, adds Lokale Claude-agents, Realtime updates, Async vraagkanaal, Todo's. LIVE callout removed (folded into Realtime card). - "Twee manieren"-section replaced by a Quickstart with concrete git-clone snippet for the MCP-server. - Handleiding: 9 → 10 steps; MCP recommended in step 8; new step 9 "Story laten uitvoeren" describing the Voer-uit / job-queue flow; step 1 mentions QR-pairing as alternative login. - Footer: adds link to madhura68/scrum4me-mcp alongside the app repo. Tooling: - New docs/diagrams/architecture.mmd (mermaid source). - New npm script "diagrams" generates light + dark SVG via mmdc; output committed to public/diagrams/. No prebuild hook (manual regenerate, like prisma generate / docs:index). - Plan + grilling outcomes captured in docs/plans/landing-local-first.md. Tracked under Scrum4Me story cmoq2qoik0001qa175iynfnaa (PBI Marketing & Landingspagina, cmoq2q50s0000qa174rmrjove). Verified: npm run lint (0 new errors), npm test (379/379), npm run build OK. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
221 lines
10 KiB
Markdown
221 lines
10 KiB
Markdown
---
|
||
title: "Landing v2 — lokaal & veilig + architectuurdiagram"
|
||
status: active
|
||
audience: [maintainer, contributor]
|
||
language: nl
|
||
last_updated: 2026-05-03
|
||
applies_to: [SCRUM4ME]
|
||
story_id: cmoq2qoik0001qa175iynfnaa
|
||
pbi_id: cmoq2q50s0000qa174rmrjove
|
||
---
|
||
|
||
# Landing v2 — lokaal & veilig + architectuurdiagram
|
||
|
||
**Story:** Als bezoeker van de landingspagina wil ik direct begrijpen dat Scrum4Me's unieke propositie is dat code-uitvoering lokaal blijft op mijn eigen hardware, zodat ik weet of dit product bij mijn werkwijze past.
|
||
|
||
**Branch:** `feat/landing-local-first`
|
||
|
||
## Context
|
||
|
||
Sinds de laatste landingspagina-update (commit `feat(landing): highlight realtime updates and beta/desktop-first notice`, 2026-04-27, app v0.4.0) zijn meerdere milestones afgerond of in uitvoering die niet op de pagina staan:
|
||
|
||
- **M5** — Todo's
|
||
- **M8** — Realtime Solo Paneel (Postgres LISTEN/NOTIFY + SSE)
|
||
- **M9** — Active Product selectie
|
||
- **M10** — QR-pairing passwordless login
|
||
- **M11** — Claude question channel
|
||
- **M13** — Claude job queue + worker mode
|
||
- **MCP-server** in losse repo `madhura68/scrum4me-mcp` met 18 tools
|
||
|
||
Belangrijker: het echte unieke aspect — dat **code-uitvoering lokaal blijft op de developer's eigen hardware** — staat nergens prominent op de huidige pagina. De Vercel-app + Neon-DB zijn een coördinatielaag voor metadata; klantcode draait nooit in de cloud. Dat is dé propositie en moet bovenaan staan, ondersteund door een architectuurdiagram dat GitHub + Neon Postgres + Vercel + Lokale worker in samenhang toont.
|
||
|
||
**Genuanceerde claim (geen overpromise).** In Neon staan wél: `Task.implementation_plan`, `StoryLog.content/commit_message`, `ClaudeJob.plan_snapshot/summary/error`, `ClaudeQuestion.question` — vrije-tekstvelden die agents/users zelf invullen. Wat **niet** in de cloud belandt: broncodebestanden, diffs/patches, build-artefacten. De hero claimt dit voorzichtig ("executie + code blijven aan jouw kant"); de architectuur-sectie legt per box uit wat er wél staat.
|
||
|
||
## Doelgroep
|
||
|
||
Mix met zwaartepunt op (a) privacy-bewuste indie devs en (c) kleine teams met homelab/NAS. Compliance-publiek (b) wordt niet expliciet aangesproken (geen SOC2-claims), maar ook niet uitgesloten.
|
||
|
||
## Aanpak — sectievolgorde
|
||
|
||
| # | Sectie | Wijziging |
|
||
|---|---|---|
|
||
| 1 | Header | ongewijzigd |
|
||
| 2 | Hero | herschreven (B+Z, zie hieronder) |
|
||
| 3 | **Architectuur** | **nieuw** — twee-zone mermaid-diagram + 4 callouts |
|
||
| 4 | Tour (screenshots) | ongewijzigd |
|
||
| 5 | Wat is Scrum4Me? | 6 kaarten (set C, zie hieronder) |
|
||
| 6 | **Quickstart: lokale agent in 3 stappen** | **vervangt** "Twee manieren om Claude te koppelen" |
|
||
| 7 | Scrum in Scrum4Me | ongewijzigd |
|
||
| 8 | Gebruikershandleiding | uitgebreid naar 10 stappen, MCP als hoofdroute |
|
||
| 9 | REST API | ongewijzigd |
|
||
| 10 | Footer | + link naar `madhura68/scrum4me-mcp` |
|
||
|
||
LIVE-callout onder de feature-grid vervalt (gaat op in feature-card "Realtime updates").
|
||
|
||
## Sectie-detail
|
||
|
||
### §2 Hero
|
||
|
||
- **H1**: *"Plannen in de cloud. Uitvoeren op je eigen machine."*
|
||
- **Subhead**: *"De UI draait op Vercel, je code draait op jou. Een gedeelde job-queue laat lokale Claude Code agents (laptop, NAS of VM) stories autonoom oppakken — zonder dat je broncode ooit de cloud hoeft te raken."*
|
||
- **CTA's**: *"Account aanmaken"* (primary) · *"Hoe het werkt"* (secondary, anchor naar `#architectuur`). De oude *"Demo bekijken"* vervalt; demo-credentials staan al in de body-tekst eronder.
|
||
- **Beta-notice blok**: ongewijzigd.
|
||
|
||
### §3 Architectuur (nieuw)
|
||
|
||
**Diagrambron**: `docs/diagrams/architecture.mmd` (mermaid). Twee zones via `subgraph`:
|
||
|
||
```mermaid
|
||
flowchart LR
|
||
User([Jij in je browser]):::user
|
||
|
||
subgraph Scrum["Scrum4Me-stack (managed)"]
|
||
direction TB
|
||
Vercel["Vercel<br/>UI · Server Actions · cron"]
|
||
Neon[("Neon Postgres<br/>metadata · jobs · logs")]
|
||
Vercel <-->|Prisma + SSE| Neon
|
||
end
|
||
|
||
subgraph Yours["Jouw kant (lokaal)"]
|
||
direction TB
|
||
Worker["Lokale worker<br/>laptop / NAS / VM<br/>Claude Code + MCP"]
|
||
GitHub[("GitHub<br/>jouw repo")]
|
||
Worker -->|git push| GitHub
|
||
end
|
||
|
||
User -->|HTTPS| Vercel
|
||
Neon <-.->|job claim<br/>+ LISTEN/NOTIFY| Worker
|
||
|
||
classDef user fill:none,stroke-dasharray:3 3
|
||
```
|
||
|
||
**Renderpijp**:
|
||
- Bron in `docs/diagrams/architecture.mmd`.
|
||
- Output naar `public/diagrams/architecture-light.svg` + `architecture-dark.svg` (gecommit in git).
|
||
- Nieuw npm-script: `"diagrams": "mmdc -i docs/diagrams/architecture.mmd -t default -b transparent -o public/diagrams/architecture-light.svg && mmdc -i docs/diagrams/architecture.mmd -t dark -b transparent -o public/diagrams/architecture-dark.svg"`.
|
||
- **Geen** `prebuild`-hook — handmatig draaien bij wijziging.
|
||
- In `page.tsx`: twee `<Image>`-tags, één met `className="dark:hidden"` en één met `className="hidden dark:block"`.
|
||
|
||
**Onder het diagram**, 4 callout-cards "Wat draait waar?":
|
||
|
||
1. **Vercel** — alleen UI, Server Actions en cron. Geen sourcecode, geen build-artefacten.
|
||
2. **Neon Postgres** — Scrum-metadata, plan-tekstvelden, logs en commit-hashes. Geen volledige diffs, geen broncodebestanden.
|
||
3. **Lokale worker** — jouw machine. Claude Code via stdio-MCP, claimt jobs (`FOR UPDATE SKIP LOCKED`), executeert lokaal, commit lokaal, push lokaal. Multi-worker (laptop + NAS) parallel veilig.
|
||
4. **GitHub** — jouw eigen repo. Scrum4Me kent alleen de `repo_url`-string en commit-hashes uit logs.
|
||
|
||
### §5 Feature-kaarten (6 stuks, set C)
|
||
|
||
1. **Hiërarchisch plannen** — Product → PBI → Story → Taak.
|
||
2. **Sprint Board + Solo Paneel** — twee weergaven van dezelfde data: team-bord en persoonlijk Kanban.
|
||
3. **Lokale Claude-agents** — job-queue, "Voer uit"-knop, atomic claim, multi-worker.
|
||
4. **Realtime updates** — SSE + Postgres LISTEN/NOTIFY; UI binnen 1–2s in sync (vervangt LIVE-callout).
|
||
5. **Async vraagkanaal** — Claude vraagt input via bel-icoon zodra plan-ambiguïteit optreedt.
|
||
6. **Todo's** — lichtgewicht notities los van sprint-hiërarchie.
|
||
|
||
QR-login en Active Product selection krijgen géén kaart (QR-login wel genoemd in handleiding stap 1).
|
||
|
||
### §6 Quickstart (vervangt "Twee manieren")
|
||
|
||
Activerende sectie met code-snippet:
|
||
|
||
```bash
|
||
# 1. Clone en installeer de MCP-server
|
||
git clone https://github.com/madhura68/scrum4me-mcp
|
||
cd scrum4me-mcp && npm install
|
||
|
||
# 2. Voeg toe aan Claude Code config (zie repo-README)
|
||
# 3. Start Claude Code en vraag:
|
||
# "pak de volgende job uit de Scrum4Me-queue"
|
||
```
|
||
|
||
Daarnaast korte tekst-bullet: *"Liever zonder MCP? Gebruik de REST API met een Bearer-token (zie API-overzicht hieronder)."*
|
||
|
||
### §8 Handleiding — 10 stappen
|
||
|
||
1. Account aanmaken (+ bijzin: *"of paar je telefoon één keer en log voortaan in via QR"*)
|
||
2. Product aanmaken
|
||
3. Product Backlog opbouwen
|
||
4. Sprint starten
|
||
5. Sprint Board
|
||
6. Solo Paneel
|
||
7. **API-token aanmaken** (nodig voor MCP én REST)
|
||
8. **Claude Code koppelen** — installeer `scrum4me-mcp` (aanbevolen) of gebruik REST API
|
||
9. **Story laten uitvoeren** — klik "Voer uit", lokale agent pakt 'm op via `wait_for_job`, commit + status-update gaan automatisch; NavBar toont actieve workers
|
||
10. Sprint afronden
|
||
|
||
### §10 Footer
|
||
|
||
Voeg link toe naar `https://github.com/madhura68/scrum4me-mcp` naast bestaande Scrum4Me-repo-link. Geen drie-kolommen-layout.
|
||
|
||
## Bestanden
|
||
|
||
**Wijzigen:**
|
||
- `app/page.tsx` — alle sectie-aanpassingen
|
||
- `package.json` — nieuwe `diagrams`-script
|
||
|
||
**Nieuw:**
|
||
- `docs/diagrams/architecture.mmd` — mermaid-bron
|
||
- `public/diagrams/architecture-light.svg` — gegenereerd
|
||
- `public/diagrams/architecture-dark.svg` — gegenereerd
|
||
|
||
**Referentie (geen edits):**
|
||
- `docs/runbooks/mcp-integration.md`
|
||
- `docs/architecture/claude-question-channel.md`
|
||
- `docs/plans/ST-1111-claude-job-trigger.md`
|
||
|
||
## Wat we niet doen
|
||
|
||
- Geen losse `/architecture`-route — diagram blijft op homepage.
|
||
- Geen extracted components onder `components/landing/`.
|
||
- Geen runtime-mermaid (zou ~350KB bundle-impact zijn).
|
||
- Geen `prebuild`-hook.
|
||
- Geen Engelse vertaling.
|
||
- Geen wijziging aan `theme.css` of shadcn-config.
|
||
- Geen LIVE-callout meer onder feature-grid.
|
||
- Geen drie CTA's in hero.
|
||
|
||
## Verificatie
|
||
|
||
```bash
|
||
npm install
|
||
npm run diagrams
|
||
npm run dev # http://localhost:3000 in 1024px+
|
||
```
|
||
|
||
Visueel checken:
|
||
- Hero leest *"Plannen in de cloud. Uitvoeren op je eigen machine."*
|
||
- Architectuur-sectie toont diagram met twee zones; in dark-mode switcht automatisch.
|
||
- Anchor-link `#architectuur` werkt vanuit hero-CTA.
|
||
- Feature-grid toont 6 kaarten in `lg:grid-cols-3` over 2 rijen.
|
||
- Quickstart-codeblock leesbaar en kopieerbaar.
|
||
- Handleiding heeft 10 stappen, MCP staat in stap 8 als aanbevolen.
|
||
- Footer toont MCP-repo én Scrum4Me-repo.
|
||
- Demo-credentials nog steeds zichtbaar onder hero-CTA's.
|
||
|
||
```bash
|
||
npm run lint && npm test && npm run build
|
||
```
|
||
|
||
Daarna pas commit. Niet pushen zonder bevestiging (CLAUDE.md hardstop).
|
||
|
||
## Grilling-uitkomsten (samenvatting)
|
||
|
||
15 vragen via `/grill-me` op 2026-05-03 hebben volgende beslissingen vastgelegd:
|
||
|
||
| # | Onderwerp | Beslissing |
|
||
|---|---|---|
|
||
| 1 | Veiligheidsclaim | Genuanceerd: hero zacht, architectuur-sectie eerlijk over plan-tekstvelden in DB |
|
||
| 2 | Doelgroep | Mix (D), zwaartepunt op privacy-bewuste indie + homelab-team |
|
||
| 3 | Diagram-nodes | 4 boxen + label *"Lokale worker (laptop / NAS / VM)"* |
|
||
| 4 | Renderkeuze | Mermaid via mmdc (al in repo) |
|
||
| 5 | Diagram-zonering | Twee subgraphs (Scrum4Me-stack vs Jouw kant) |
|
||
| 6 | Embedding | `<Image>` x2, light + dark SVG, switch via Tailwind |
|
||
| 7 | Hero-copy | H1 "Plannen in de cloud. Uitvoeren op je eigen machine." + subhead Z |
|
||
| 8 | Sectievolgorde | Architectuur op #3, Tour op #4 |
|
||
| 9 | Feature-cards | Set C: 6 stuks, Sprint+Solo gecombineerd, Todo's erbij |
|
||
| 10 | Handleiding | 10 stappen, MCP als hoofdroute, "Voer uit" als stap 9 |
|
||
| 11 | Diagram-bron | `docs/diagrams/architecture.mmd`, output gecommit |
|
||
| 12 | Twee manieren → Quickstart | Vervangen door code-snippet |
|
||
| 13 | Hero-CTA's | "Account aanmaken" + "Hoe het werkt" (anchor) |
|
||
| 14 | Plan-bestand | Story aangemaakt, plan in `docs/plans/landing-local-first.md` |
|
||
| 15 | Beta + LIVE + Footer | Beta-notice behouden, LIVE-callout schrappen, één extra footer-link |
|