colin/triqura-ecd
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Content loader utility, Content directory structuur

Browse Source
This commit is contained in:
colinislit
2025-11-15 22:06:48 +01:00
parent dbde412465
commit 690e7b7c43
37 changed files with 9447 additions and 1035 deletions
Download Patch File Download Diff File Expand all files Collapse all files

756
docs/templates/aispeedrun-manifesto.html vendored Normal file
View File

@@ -0,0 +1,756 @@
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Speedrun - Het Software Manifesto</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;900&family=Playfair+Display:wght@400;700;900&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
<style>
:root {
/* Core colors from UX stylesheet */
--primary-blue: #3B82F6;
--primary-blue-hover: #2563EB;
--green-accent: #16A34A;
--yellow-accent: #F59E0B;
--text-primary: #0F172A;
--text-secondary: #475569;
--background: #F8FAFC;
--surface: #FFFFFF;
--border-color: #E2E8F0;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::selection {
background: var(--yellow-accent);
color: white;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
color: var(--text-primary);
background: white;
overflow-x: hidden;
line-height: 1.6;
}
/* Manifesto Typography */
.manifesto-statement {
font-family: 'Inter', sans-serif;
font-weight: 900;
font-size: clamp(3rem, 8vw, 7rem);
line-height: 0.9;
letter-spacing: -0.04em;
text-transform: uppercase;
}
.manifesto-subtitle {
font-family: 'Playfair Display', serif;
font-weight: 400;
font-size: clamp(1.5rem, 3vw, 2.5rem);
line-height: 1.3;
font-style: italic;
}
.mono-accent {
font-family: 'JetBrains Mono', monospace;
font-weight: 600;
background: var(--yellow-accent);
color: white;
padding: 0.2em 0.4em;
white-space: nowrap;
}
/* Navigation - Minimal */
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
padding: 2rem 3rem;
background: transparent;
mix-blend-mode: difference;
}
.nav-inner {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1600px;
margin: 0 auto;
}
.logo {
font-weight: 900;
font-size: 1.2rem;
color: white;
text-decoration: none;
letter-spacing: -0.02em;
}
.nav-action {
display: flex;
gap: 2rem;
align-items: center;
}
.nav-action a {
color: white;
text-decoration: none;
font-weight: 600;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Opening Statement */
.opening {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: var(--text-primary);
color: white;
position: relative;
overflow: hidden;
}
.opening::before {
content: '2024';
position: absolute;
top: -10%;
right: -5%;
font-size: 30rem;
font-weight: 900;
opacity: 0.03;
letter-spacing: -0.05em;
}
.opening-content {
max-width: 1200px;
padding: 4rem 2rem;
z-index: 1;
position: relative;
}
.opening .manifesto-statement {
margin-bottom: 2rem;
}
.opening .manifesto-subtitle {
opacity: 0.7;
max-width: 600px;
}
.scroll-indicator {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.1em;
opacity: 0.5;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(-10px); }
}
/* The Problem Statement */
.problem {
padding: 8rem 2rem;
background: white;
}
.problem-content {
max-width: 1400px;
margin: 0 auto;
}
.problem-header {
margin-bottom: 6rem;
}
.problem-header h2 {
font-size: clamp(2.5rem, 6vw, 5rem);
font-weight: 900;
line-height: 1;
margin-bottom: 2rem;
letter-spacing: -0.03em;
}
.highlight-yellow {
background: linear-gradient(180deg, transparent 60%, var(--yellow-accent) 60%);
padding: 0 0.2em;
}
.problem-grid {
display: grid;
grid-template-columns: 1fr 1px 1fr;
gap: 4rem;
margin-bottom: 6rem;
position: relative;
}
.divider-vertical {
background: var(--border-color);
width: 1px;
height: 100%;
}
.problem-column h3 {
font-size: 1.8rem;
margin-bottom: 2rem;
font-weight: 700;
}
.problem-list {
list-style: none;
font-size: 1.1rem;
line-height: 2;
}
.problem-list li {
padding-left: 2rem;
position: relative;
margin-bottom: 0.5rem;
}
.problem-list li::before {
content: '→';
position: absolute;
left: 0;
color: var(--yellow-accent);
font-weight: 700;
}
/* Cost Statement */
.cost-statement {
background: var(--text-primary);
color: white;
padding: 4rem;
text-align: center;
position: relative;
overflow: hidden;
}
.cost-statement::after {
content: '€€€';
position: absolute;
bottom: -20%;
right: -5%;
font-size: 20rem;
opacity: 0.05;
font-weight: 900;
}
.cost-amount {
font-size: clamp(4rem, 10vw, 8rem);
font-weight: 900;
letter-spacing: -0.04em;
margin-bottom: 1rem;
}
/* Personal Story */
.story {
padding: 8rem 2rem;
background: var(--background);
}
.story-content {
max-width: 900px;
margin: 0 auto;
font-size: 1.3rem;
line-height: 1.8;
}
.story-content p {
margin-bottom: 2rem;
}
.story-highlight {
font-size: 2rem;
font-weight: 700;
color: var(--green-accent);
margin: 3rem 0;
text-align: center;
}
/* The Solution */
.solution {
padding: 8rem 2rem;
background: white;
}
.solution-header {
text-align: center;
margin-bottom: 6rem;
}
.solution-header h2 {
font-size: clamp(3rem, 7vw, 6rem);
font-weight: 900;
margin-bottom: 1rem;
background: linear-gradient(135deg, var(--primary-blue), var(--green-accent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.solution-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 3rem;
max-width: 1200px;
margin: 0 auto;
}
.solution-card {
padding: 2rem;
background: white;
border: 2px solid var(--border-color);
position: relative;
transition: all 0.3s;
}
.solution-card:hover {
border-color: var(--primary-blue);
transform: translateY(-5px);
}
.solution-number {
position: absolute;
top: -20px;
left: 20px;
background: var(--yellow-accent);
color: white;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
font-size: 1.2rem;
}
/* Timeline */
.timeline {
padding: 8rem 2rem;
background: linear-gradient(135deg, var(--text-primary) 0%, #1e3a5f 100%);
color: white;
position: relative;
}
.timeline-content {
max-width: 1200px;
margin: 0 auto;
}
.week-blocks {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
margin-top: 4rem;
}
.week-block {
background: rgba(255,255,255,0.1);
backdrop-filter: blur(10px);
padding: 2rem;
text-align: center;
position: relative;
border: 2px solid transparent;
transition: all 0.3s;
}
.week-block.active {
border-color: var(--yellow-accent);
background: rgba(255,255,255,0.15);
}
.week-number {
font-size: 3rem;
font-weight: 900;
opacity: 0.3;
margin-bottom: 1rem;
}
.week-block.active .week-number {
opacity: 1;
color: var(--yellow-accent);
}
/* Call to Action */
.cta-section {
padding: 12rem 2rem;
background: white;
text-align: center;
position: relative;
}
.cta-content h2 {
font-size: clamp(3rem, 8vw, 7rem);
font-weight: 900;
margin-bottom: 2rem;
line-height: 0.9;
letter-spacing: -0.04em;
}
.cta-buttons {
display: flex;
gap: 2rem;
justify-content: center;
margin-top: 4rem;
}
.btn-primary {
background: var(--primary-blue);
color: white;
padding: 1.5rem 3rem;
font-size: 1.2rem;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: all 0.3s;
border: 3px solid var(--primary-blue);
}
.btn-primary:hover {
background: var(--primary-blue-hover);
transform: scale(1.05);
}
.btn-secondary {
background: transparent;
color: var(--text-primary);
padding: 1.5rem 3rem;
font-size: 1.2rem;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: all 0.3s;
border: 3px solid var(--text-primary);
}
.btn-secondary:hover {
background: var(--text-primary);
color: white;
}
/* Footer */
footer {
padding: 4rem 2rem;
background: var(--text-primary);
color: white;
text-align: center;
}
.footer-content {
max-width: 800px;
margin: 0 auto;
}
.footer-content p {
opacity: 0.7;
margin-bottom: 1rem;
}
.signature {
margin-top: 2rem;
font-size: 1.2rem;
font-weight: 700;
}
/* Responsive */
@media (max-width: 768px) {
.problem-grid {
grid-template-columns: 1fr;
}
.divider-vertical {
display: none;
}
.week-blocks {
grid-template-columns: 1fr;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
}
/* Animations */
.fade-in {
opacity: 0;
animation: fadeIn 1s ease-out forwards;
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
</style>
</head>
<body>
<!-- Minimal Navigation -->
<nav>
<div class="nav-inner">
<a href="#" class="logo">AI SPEEDRUN</a>
<div class="nav-action">
<a href="#manifesto">Manifesto</a>
<a href="#timeline">Build</a>
<a href="#demo">Demo →</a>
</div>
</div>
</nav>
<!-- Opening Statement -->
<section class="opening">
<div class="opening-content">
<h1 class="manifesto-statement">
Software<br>
is<br>
<span style="color: var(--yellow-accent);">Kapot.</span>
</h1>
<p class="manifesto-subtitle">
En iedereen weet het.
</p>
</div>
<div class="scroll-indicator">↓ Scroll</div>
</section>
<!-- The Problem -->
<section class="problem" id="manifesto">
<div class="problem-content">
<div class="problem-header">
<h2>
Ik werk al <span class="highlight-yellow">15 jaar</span> in de GGZ.
</h2>
<p style="font-size: 1.5rem; color: var(--text-secondary);">
PinkRoccade, Nedap, Zorgdomein, Caress—ik heb ze allemaal voorbij zien komen.
</p>
</div>
<div class="problem-grid">
<div class="problem-column">
<h3>De Belofte</h3>
<ul class="problem-list">
<li>€100.000/jaar licentiekosten</li>
<li>6 maanden implementatie</li>
<li>€50.000 setup & training</li>
<li>5-jarig contract</li>
<li>"Alles wat je nodig hebt"</li>
</ul>
</div>
<div class="divider-vertical"></div>
<div class="problem-column">
<h3>De Realiteit</h3>
<ul class="problem-list">
<li>Behandelaren haten de workflow</li>
<li>IT worstelt met integraties</li>
<li>200 features, 20 gebruikt</li>
<li>18 maanden voor een "kleine" aanpassing</li>
<li>Vendor lock-in tot in de eeuwigheid</li>
</ul>
</div>
</div>
<div class="cost-statement">
<div class="cost-amount">€500.000+</div>
<p style="font-size: 1.5rem;">Over 5 jaar. Voor software die niet past.</p>
</div>
</div>
</section>
<!-- Personal Story -->
<section class="story">
<div class="story-content">
<p>
<strong>Als behandelaar</strong> vulde ik formulieren in die niemand las.
</p>
<p>
<strong>Als product owner</strong> probeerde ik systemen te fixen die fundamenteel broken waren.
</p>
<p>
<strong>Als consultant</strong> zag ik organisaties worstelen met exact dezelfde problemen.
</p>
<div class="story-highlight">
"Dit moet toch sneller kunnen?"
</div>
<p style="text-align: center; font-size: 1.5rem;">
Telkens dezelfde vraag. Telkens hetzelfde antwoord: <strong>"Nee, zo werkt het nu eenmaal."</strong>
</p>
<p style="text-align: center; font-size: 2rem; font-weight: 900; color: var(--text-primary); margin-top: 3rem;">
Bullshit.
</p>
</div>
</section>
<!-- The Solution -->
<section class="solution">
<div class="solution-header">
<h2>NU KAN HET WEL</h2>
<p style="font-size: 1.5rem; color: var(--text-secondary);">
4 weken. €50/maand. Klaar.
</p>
</div>
<div class="solution-grid">
<div class="solution-card">
<span class="solution-number">1</span>
<h3 style="margin-bottom: 1rem; margin-top: 1rem;">AI-Powered Intake</h3>
<p>45 minuten gesprek → 2 minuten samenvatting</p>
<code class="mono-accent" style="display: inline-block; margin-top: 1rem;">WEEK 1</code>
</div>
<div class="solution-card">
<span class="solution-number">2</span>
<h3 style="margin-bottom: 1rem; margin-top: 1rem;">DSM-5 Suggesties</h3>
<p>Automatische diagnose-ondersteuning</p>
<code class="mono-accent" style="display: inline-block; margin-top: 1rem;">WEEK 2</code>
</div>
<div class="solution-card">
<span class="solution-number">3</span>
<h3 style="margin-bottom: 1rem; margin-top: 1rem;">Behandelplannen</h3>
<p>AI genereert, jij verfijnt</p>
<code class="mono-accent" style="display: inline-block; margin-top: 1rem;">WEEK 3</code>
</div>
<div class="solution-card">
<span class="solution-number">4</span>
<h3 style="margin-bottom: 1rem; margin-top: 1rem;">Live & Werkend</h3>
<p>Geen jarenlange implementatie</p>
<code class="mono-accent" style="display: inline-block; margin-top: 1rem;">WEEK 4</code>
</div>
</div>
</section>
<!-- Timeline -->
<section class="timeline" id="timeline">
<div class="timeline-content">
<h2 style="font-size: 3rem; font-weight: 900; margin-bottom: 1rem;">
Build in Public
</h2>
<p style="font-size: 1.3rem; opacity: 0.9;">
Geen geheimen. Alles op LinkedIn. Live.
</p>
<div class="week-blocks">
<div class="week-block active">
<div class="week-number">01</div>
<h3>Setup</h3>
<p style="opacity: 0.7;">Database, Auth, UI</p>
</div>
<div class="week-block active">
<div class="week-number">02</div>
<h3>AI Core</h3>
<p style="opacity: 0.7;">Claude integratie</p>
</div>
<div class="week-block">
<div class="week-number">03</div>
<h3>Workflows</h3>
<p style="opacity: 0.7;">Intake → Plan</p>
</div>
<div class="week-block">
<div class="week-number">04</div>
<h3>Launch</h3>
<p style="opacity: 0.7;">Live demo</p>
</div>
</div>
</div>
</section>
<!-- Call to Action -->
<section class="cta-section">
<div class="cta-content">
<h2>
Stop met<br>
<span style="color: var(--text-secondary);">wachten op</span><br>
verandering
</h2>
<p style="font-size: 1.5rem; max-width: 600px; margin: 2rem auto; color: var(--text-secondary);">
Bouw hem gewoon zelf. In 4 weken.
</p>
<div class="cta-buttons">
<a href="#demo" class="btn-primary">Watch Live Demo</a>
<a href="https://linkedin.com" class="btn-secondary">Volg de Build</a>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="footer-content">
<p>Dit is geen startup pitch.</p>
<p>Dit is geen vendor lock-in.</p>
<p>Dit is een statement.</p>
<div class="signature">
Colin Lindo<br>
<span style="opacity: 0.7; font-weight: 400;">15 jaar GGZ. 10 jaar development.</span><br>
<span style="color: var(--yellow-accent);">4 weken to change everything.</span>
</div>
</div>
</footer>
<script>
// Smooth scroll
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// Fade in on scroll
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('fade-in');
}
});
}, observerOptions);
document.querySelectorAll('.solution-card, .week-block').forEach(el => {
observer.observe(el);
});
</script>
</body>
</html>

394
docs/templates/prd_template.md vendored
View File

@@ -1,10 +1,4 @@
# 🚀 Mission Control — Bouwplan Template
💡 **Tip:** Dit document kun je samenstellen met hulp van AI-tools zoals **ChatGPT, Claude, Cursor** of **Gemini**.
Gebruik ze als **sparringpartner** om de bouw van je software te plannen, te documenteren en te verbeteren — zelfs als je geen ontwikkelaar bent.
Afhankelijk van de **complexiteit van je software** bepaal je zelf hoe gedetailleerd je elk onderdeel uitwerkt. Voor kleine prototypes volstaat een beknopt overzicht; voor grotere projecten kun je per fase en subfase inzoomen.
---
# 📄 Product Requirements Document (PRD) – Template
**Projectnaam:** _[vul in]_
**Versie:** _v1.0_
@@ -13,357 +7,103 @@ Afhankelijk van de **complexiteit van je software** bepaal je zelf hoe gedetaill
---
## 1. Doel en context
🎯 **Doel:** Leg uit wat je gaat bouwen en waarom.
📘 **Toelichting:** Beschrijf kort de aanleiding voor het project en hoe het past binnen je organisatie of productstrategie. Verwijs hier naar het PRD of FO voor achtergrond.
## 1. Doelstelling
🎯 **Doel van deze sectie:** Beschrijf waarom dit product of prototype wordt gebouwd en wat het beoogde resultaat is.
📘 **Toelichting:** Geef een korte samenvatting van het *waarom* van dit project. Wat wil je aantonen, oplossen of verbeteren? Benoem ook of het om een demo, MVP of productieversie gaat.
**Voorbeeld:**
> Het doel is een werkend MVP te bouwen van de AI-assistent voor zorgdossiers. We tonen de meerwaarde van AI binnen de intake → profiel → plan workflow.
> Een werkend prototype dat de waarde van AI toont binnen het zorgdossierproces: intake → analyse → behandelplan. De focus ligt op snelheid, eenvoud en AI-toepasbaarheid.
---
## 2. Uitgangspunten
### 2.1 Technische Stack
🎯 **Doel:** Benoem de technologieën en frameworks die worden gebruikt.
📘 **Toelichting:** Denk aan frontend, backend, database, hosting en externe services.
## 2. Doelgroep
🎯 **Doel:** Schets wie de eindgebruikers, stakeholders en testers zijn.
📘 **Toelichting:** Omschrijf de primaire doelgroepen (bijv. zorgprofessionals, developers, managers) en hun belangrijkste behoeften of problemen. Vermeld eventueel persona’s of gebruikersscenario’s.
**Voorbeeld:**
- **Frontend:** SvelteKit + Tailwind CSS + Lucide Icons
- **Backend:** Firebase Functions / Next.js API Routes
- **Database:** Firestore / PostgreSQL
- **AI/ML:** Vertex AI (Gemini) / OpenAI API
- **Hosting:** Vercel / Firebase Hosting
- **Auth:** Firebase Auth / Supabase Auth
> - **Product Owners & Managers:** inzicht in AI als hulpmiddel.
> - **Developers:** inspiratie voor AI-integratie.
> - **Zorgprofessionals:** herkenbare workflows met directe meerwaarde.
### 2.2 Projectkaders
🎯 **Doel:** Benoem de vaste kaders waarbinnen het project wordt ontwikkeld.
📘 **Toelichting:** Denk aan beperkingen (tijd, budget, resources) en aannames.
---
## 3. Kernfunctionaliteiten (MVP-scope)
🎯 **Doel:** Afbakenen van de minimale werkende functies.
📘 **Toelichting:** Maak een genummerde lijst van functies die in deze versie moeten werken. Beschrijf elke functie kort (input, output, interactie) en markeer *stretch-features* of optionele uitbreidingen.
**Voorbeeld:**
- **Tijd:** 3 weken bouwtijd voor MVP
- **Budget:** €X voor externe services (API calls, hosting)
- **Team:** 1 developer + 1 consultant/sparringpartner
- **Data:** Geen productiegegevens (alle data fictief voor demo)
- **Doel:** Demo op AI-inspiratiesessie
### 2.3 Programmeer Uitgangspunten
🎯 **Doel:** Vastleggen van code-kwaliteit principes en development best practices.
📘 **Toelichting:** Deze principes gelden voor alle code die in dit project wordt geschreven.
**Code Quality Principles:**
- **DRY (Don't Repeat Yourself)**
- Herbruikbare componenten en functies
- Centrale configuratie voor herhaalde waarden
- Utility functions voor gemeenschappelijke logica
- **KISS (Keep It Simple, Stupid)**
- Eenvoudige oplossingen boven complexe architectuur
- Duidelijke naamgeving (spreekt voor zich)
- Vermijd premature optimization
- **SOC (Separation of Concerns)**
- UI-componenten gescheiden van business logic
- API-calls in dedicated service layers
- Database queries in repository/model layers
- Styling gescheiden van functionaliteit
- **YAGNI (You Aren't Gonna Need It)**
- Bouw alleen wat nu nodig is
- Geen features "voor later"
- Iteratief uitbreiden op basis van feedback
**Development Practices:**
- **Code Organization**
- Consistent folder structure (`/components`, `/lib`, `/routes`, `/api`)
- Één component/functie per file waar logisch
- Index files voor clean imports
- **Error Handling**
- Try-catch blocks op alle async operaties
- User-friendly foutmeldingen in UI
- Logging van errors naar console/monitoring
- **Security**
- Nooit API keys in frontend code
- Input validation op alle user input
- Firestore/database rules voor data access control
- CORS configuratie voor API endpoints
- **Performance**
- Lazy loading waar mogelijk
- Debounce op search/input handlers
- Optimized images en assets
- Minimal bundle size (tree-shaking)
- **Testing**
- Unit tests voor kritieke business logic
- Integration tests voor API endpoints
- Smoke tests voor belangrijkste flows
- Manual testing checklist voor demo
- **Documentation**
- README met setup instructies
- Inline comments voor complexe logica
- JSDoc/TypeScript types voor public APIs
- Architecture Decision Records (ADR) voor belangrijke keuzes
**Voorbeeld implementatie:**
```typescript
// ❌ NIET - Violation of DRY
if (user.role === 'admin') { /* ... */ }
if (user.role === 'admin') { /* ... */ }
// ✅ WEL - DRY principle
const isAdmin = (user) => user.role === 'admin';
if (isAdmin(user)) { /* ... */ }
// ❌ NIET - Violation of SOC
<button onClick={() => {
fetch('/api/data').then(r => r.json()).then(data => {
setState(data);
});
}}>
Load
</button>
// ✅ WEL - SOC principle
// In /lib/api.ts
export const loadData = async () => {
const response = await fetch('/api/data');
return response.json();
};
// In component
<button onClick={handleLoad}>Load</button>
```
1. **Cliëntbeheer:** aanmaken, bekijken en selecteren.
2. **Intakeverslag:** rich text editor met AI-samenvatting.
3. **Probleemprofiel:** AI-extractie van categorie/severity.
4. **Behandelplan:** AI-genereerbare doelen/interventies.
5. *(Stretch)* PDF-export en mini-agenda.
---
## 3. Epics & Stories Overzicht
🎯 **Doel:** De bouw opdelen in logische epics (fases) met stories (subfases).
📘 **Toelichting:** Elke epic bevat het doel, afhankelijkheden en status. Stories zijn de uitvoerbare taken binnen een epic.
## 4. Gebruikersflows (Demo- of MVP-flows)
🎯 **Doel:** Laten zien hoe de gebruiker stap-voor-stap door het systeem gaat.
📘 **Toelichting:** Beschrijf 2–4 concrete "flows" in stappen (input → actie → resultaat).
**Epic Structuur:**
| Epic ID | Titel | Doel | Status | Stories | Opmerkingen |
|---------|-------|------|--------|---------|-------------|
| E0 | Setup & Configuratie | Repo, omgeving, dependencies | ✅ Gereed | 4 | Config getest |
| E1 | Data & Database | Datamodel en demo-data | 🔄 In Progress | 3 | Rules nog aanvullen |
| E2 | UI & Layout | Interface, navigatie, componenten | ⏳ To Do | 3 | Wireframes gereed |
| E3 | AI-integratie | AI endpoints en prompt engineering | ⏳ To Do | 3 | Test met Gemini model |
| E4 | Testing & Deploy | QA, demo prep en deployment | ⏳ To Do | 3 | |
**Voorbeeld:**
1. Nieuwe cliënt aanmaken → Intake invullen → AI-samenvatten.
2. Intake analyseren → AI-suggestie → Probleemprofiel genereren.
3. Profiel bevestigen → AI-behandelplan genereren → Publiceer v1.
---
## 4. Epics & Stories (Uitwerking)
🎯 **Doel:** Verdeel complexe epics in beheersbare stories voor meer overzicht.
📘 **Toelichting:** Je bepaalt zelf het detailniveau. Kleine projecten kunnen volstaan met 2-3 stories per epic; grotere implementaties kunnen tot 10 stories bevatten.
## 5. Niet in Scope
🎯 **Doel:** Duidelijk maken wat (nog) niet wordt gebouwd.
📘 **Toelichting:** Noem features of modules die bewust buiten deze versie vallen. Dit voorkomt ruis en scope creep.
### Epic 0 — Setup & Configuratie
**Epic Doel:** Werkende development omgeving met alle benodigde tools en dependencies.
| Story ID | Beschrijving | Acceptatiecriteria | Status | Afhankelijkheden | Story Points |
|----------|--------------|---------------------|--------|------------------|--------------|
| E0.S1 | Repository aanmaken | GitHub repo + lokale clone, `.gitignore` config | ✅ | — | 1 |
| E0.S2 | Project initialisatie | `npm create` draait, dev server start | ✅ | E0.S1 | 2 |
| E0.S3 | Dependencies installeren | Tailwind, Firebase, TypeScript geïnstalleerd | 🔄 | E0.S2 | 2 |
| E0.S4 | Environment variables | `.env.local` + Vercel vars geconfigureerd | ⏳ | E0.S3 | 1 |
**Technical Notes:**
- Gebruik `pnpm` voor snellere installs
- `.env.example` committen voor team onboarding
**Voorbeeld:**
> Rollenbeheer, koppelingen met externe systemen (Teams, ECD), productie-grade beveiliging.
---
### Epic 1 — Data & Database
**Epic Doel:** Werkend datamodel met seed data voor development en demo.
## 6. Succescriteria
🎯 **Doel:** Objectieve meetlat voor een geslaagde oplevering.
📘 **Toelichting:** Formuleer concrete, toetsbare criteria.
| Story ID | Beschrijving | Acceptatiecriteria | Status | Afhankelijkheden | Story Points |
|----------|--------------|---------------------|--------|------------------|--------------|
| E1.S1 | Datamodel ontwerpen | ERD/schema gedocumenteerd, collections defined | 🔄 | E0.S4 | 3 |
| E1.S2 | Security Rules implementeren | Firestore rules geschreven en getest | ⏳ | E1.S1 | 3 |
| E1.S3 | Demo-data seeden | 3+ testcliënten met complete intake data | ⏳ | E1.S1 | 2 |
**Technical Notes:**
- Collections: `clients`, `intakes`, `plans`, `ai_events`
- Demo user heeft `all access` voor development
- Seed script: `npm run seed`
**Voorbeeld:**
- Demo duurt ≤ 10 minuten.
- AI-output zichtbaar en bewerkbaar.
- Geen fouten bij standaardflows.
- Minimaal 1 live testgebruiker.
---
### Epic 2 — UI & Layout
**Epic Doel:** Gebruiksvriendelijke interface volgens UX/FO specificatie.
## 7. Risico’s & Mitigatie
🎯 **Doel:** Risico’s vroeg signaleren en plannen hoe ermee om te gaan.
📘 **Toelichting:** Beschrijf de belangrijkste risico’s en hoe je ze voorkomt of opvangt.
| Story ID | Beschrijving | Acceptatiecriteria | Status | Afhankelijkheden | Story Points |
|----------|--------------|---------------------|--------|------------------|--------------|
| E2.S1 | Layout skelet bouwen | Topbalk + linker navigatie responsive | ⏳ | E1.S3 | 5 |
| E2.S2 | Component library setup | Herbruikbare buttons, cards, forms | ⏳ | E2.S1 | 3 |
| E2.S3 | Routing & navigatie | `/clients/[id]` structuur werkt, breadcrumbs | ⏳ | E2.S1 | 3 |
**Technical Notes:**
- shadcn/ui componenten of custom Tailwind components
- Keyboard shortcuts: Ctrl+S (save), Cmd+K (search)
- Mobile-first approach
**Voorbeeld:**
| Risico | Impact | Mitigatie |
|--------|---------|------------|
| AI-output inconsistent | Hoog | Prompts testen, fallback responses voorbereiden |
| Scope creep | Middel | Scope afbakenen in PRD en Mission Control |
| Privacy | Laag | Alleen demo-data gebruiken |
---
### Epic 3 — AI-integratie
**Epic Doel:** Werkende AI-features voor samenvatten, extraheren en plannen genereren.
## 8. Roadmap / Vervolg (Post-MVP)
🎯 **Doel:** Richting geven aan toekomstige uitbreidingen.
📘 **Toelichting:** Beschrijf logische vervolgstappen na de MVP.
| Story ID | Beschrijving | Acceptatiecriteria | Status | Afhankelijkheden | Story Points |
|----------|--------------|---------------------|--------|------------------|--------------|
| E3.S1 | Vertex AI configuratie | GCP project + SA key, test call succesvol | ⏳ | E0.S4 | 3 |
| E3.S2 | API endpoints bouwen | `/api/summarize`, `/extract`, `/plan` werken | ⏳ | E3.S1, E1.S3 | 8 |
| E3.S3 | Logging & monitoring | AI calls loggen naar `ai_events` collection | ⏳ | E3.S2 | 2 |
**Technical Notes:**
- Model: `gemini-1.5-pro` of `gemini-2.0-flash`
- Prompt templates in `/lib/prompts/`
- Error handling voor rate limits en API failures
- Response caching voor repeated calls
**Voorbeeld:**
- Rollen & rechtenbeheer
- Auditlog + versiebeheer
- Trendanalyse
- Integratie met bestaande zorgsystemen (PinkRoccade, Nedap, etc.)
---
### Epic 4 — Testing & Deployment
**Epic Doel:** Stabiele, geteste applicatie live op productie omgeving.
## 9. Bijlagen & Referenties
🎯 **Doel:** Bronnen koppelen voor context en consistentie.
📘 **Toelichting:** Verwijs naar ondersteunende documenten of interne kennisbestanden.
| Story ID | Beschrijving | Acceptatiecriteria | Status | Afhankelijkheden | Story Points |
|----------|--------------|---------------------|--------|------------------|--------------|
| E4.S1 | Smoke tests uitvoeren | Alle happy flows werken zonder crashes | ⏳ | E3.S3 | 3 |
| E4.S2 | Demo dry-run | Volledige demo in max 10 minuten | ⏳ | E4.S1 | 2 |
| E4.S3 | Productie deployment | Live op Vercel, environment vars gezet | ⏳ | E4.S2 | 2 |
**Technical Notes:**
- Test scenarios gedocumenteerd in `/docs/test-plan.md`
- Vercel deployment: EU region (Amsterdam)
- Rollback plan als deployment faalt
---
## 5. Kwaliteit & Testplan
🎯 **Doel:** vastleggen hoe de kwaliteit van het project wordt geborgd.
📘 **Toelichting:** Licht toe welke tests je uitvoert en hoe je weet dat de build stabiel is.
### Test Types
| Test Type | Scope | Tools | Verantwoordelijke |
|-----------|-------|-------|-------------------|
| Unit Tests | Business logic, utilities | Vitest / Jest | Developer |
| Integration Tests | API endpoints, database | Playwright / Supertest | Developer |
| Smoke Tests | Kritieke user flows | Manual checklist | QA / Developer |
| Performance Tests | Load times, API response | Lighthouse, Network tab | Developer |
| Security Tests | Auth, data access, XSS | Manual + OWASP checklist | Developer |
### Test Coverage Targets
- **Unit tests:** 80%+ coverage op `/lib` folder
- **Integration tests:** Alle API endpoints
- **Smoke tests:** 3 happy flows + 2 error scenarios
### Manual Test Checklist (voor demo)
- [ ] User kan inloggen
- [ ] Nieuwe cliënt aanmaken werkt
- [ ] Intake formulier opslaan werkt
- [ ] AI samenvatting genereert binnen 5 sec
- [ ] Behandelplan wordt gegenereerd
- [ ] Navigatie werkt zonder errors
- [ ] Mobile view is responsive
- [ ] Error states tonen user-friendly messages
---
## 6. Demo & Presentatieplan
🎯 **Doel:** beschrijven hoe de demo wordt gepresenteerd of getest.
📘 **Toelichting:** Vermeld wat je laat zien, wie betrokken is en welk scenario wordt gevolgd.
### Demo Scenario
**Duur:** 10 minuten
**Doelgroep:** Zorgorganisatie stakeholders + management
**Locatie:** Live op Vercel (backup: localhost)
**Flow:**
1. **Intro** (1 min): Context en doel van de AI-assistent
2. **Nieuwe cliënt** (2 min): Aanmaken + intake invullen
3. **AI in actie** (4 min):
- Samenvatting genereren
- Belangrijkste punten extractie
- Behandelplan voorstel
4. **Interactie** (2 min): Aanpassingen maken, opslaan
5. **Afsluiting** (1 min): Vragen + next steps
**Backup Plan:**
- Lokale versie klaar bij internet issues
- Pre-seeded data als AI API niet reageert
- Screenshots als complete fallback
---
## 7. Risico's & Mitigatie
🎯 **Doel:** risico's vroeg signaleren en voorzien van oplossingen.
📘 **Toelichting:** Gebruik dit als dynamische checklist.
| Risico | Kans | Impact | Mitigatie | Owner |
|--------|------|--------|-----------|-------|
| AI-output inconsistent | Hoog | Hoog | Snapshot tests, prompt versioning, fallback responses | Developer |
| API rate limits tijdens demo | Middel | Hoog | Caching, pre-warmed responses, backup data | Developer |
| Firebase regels te open | Middel | Hoog | Strikte rules voor productie, security audit | Developer |
| Tijdsdruk deadline | Hoog | Middel | Prioriteer MVP features, cut scope indien nodig | PM |
| Browser compatibility issues | Laag | Middel | Test op Chrome, Safari, Firefox | QA |
| Environment vars niet gezet | Middel | Hoog | `.env.example` + deployment checklist | DevOps |
---
## 8. Evaluatie & Lessons Learned
🎯 **Doel:** reflecteren op het proces en verbeteringen vastleggen.
📘 **Toelichting:** noteer inzichten na elke sprint of oplevering.
**Te documenteren na project:**
- Wat ging goed? Wat niet?
- Welke AI-tools waren het meest effectief?
- Welke prompts werkten het beste?
- Waar liepen we vertraging op?
- Wat doen we volgende keer anders?
- Herbruikbare componenten voor volgende projecten
---
## 9. Referenties
🎯 **Doel:** koppelen aan de overige Mission Control-documenten.
**Mission Control Documents:**
- **PRD** — Product Requirements Document
- **FO** — Functioneel Ontwerp
- **TO** — Technisch Ontwerp
- **UX/UI** — Design specificatie
- **API Access** — Authenticatie en endpoints documentatie
**External Resources:**
- Repository: `https://github.com/[org]/[project]`
- Deployment: `https://[project].vercel.app`
- Design: Figma link
- Documentation: `/docs` folder in repo
---
## 10. Glossary & Abbreviations
| Term | Betekenis |
|------|-----------|
| Epic | Grote feature of fase in development (bevat meerdere stories) |
| Story | Kleine, uitvoerbare taak binnen een epic |
| Story Points | Schatting van complexiteit (Fibonacci: 1, 2, 3, 5, 8, 13) |
| MVP | Minimum Viable Product |
| DRY | Don't Repeat Yourself |
| KISS | Keep It Simple, Stupid |
| SOC | Separation of Concerns |
| YAGNI | You Aren't Gonna Need It |
| SA | Service Account (GCP) |
| ADR | Architecture Decision Record |
---
**Versiehistorie:**
| Versie | Datum | Auteur | Wijziging |
|--------|-------|--------|-----------|
| v1.0 | [datum] | [naam] | Initiële versie |
**Voorbeeld:**
- FO (Functioneel Ontwerp)
- TO (Technisch Ontwerp)
- UX/UI-specificatie
- Mission Control / Build Plan
- API Access Document