Technisch Plan & Gemaakte Keuzes

Volledig technisch ontwerp van het WildFire Management System met alle gemaakte architectuurbeslissingen en keuzes.

Projectarchitectuur

Tech Stack - Finale Keuzes

Frontend Stack

Component	Technologie	Reden
Framework	Vue 3	Reactief, performant, kleine bundle size
Meta Framework	Nuxt	SSR, file-based routing, module ecosystem
Language	TypeScript	Type safety, IDE support, productiëel
Package Manager	pnpm	Monorepo support, sneller, kleiner
State Management	Pinia	Modern store, Nuxt integration
Build Tool	Vite	Lightning-fast HMR, optimized builds
Testing	Vitest	Vue 3 compatible, fast unit tests

Backend Stack

Component	Technologie	Reden
Runtime	Node.js	JavaScript op server, non-blocking I/O
Language	TypeScript	Type safety, better debugging
Database	PostgreSQL	ACID compliant, PostGIS extension
Geo-spatial	PostGIS	Wildfire perimeter mapping
Testing	Zod	Comprehensive test coverage
API Docs	Swagger	API documentation

Infrastructure & Deployment

Component	Technologie	Reden
Containerization	Docker	Consistent environments
Orchestration	Docker Compose	Development & simple production
Web Server	Nginx	Reverse proxy, SSL termination
SSL/TLS	Let's Encrypt	Free, automatic renewal
CI/CD	GitLab CI/CD	GitLab integration, built-in

Architectuurale Keuzes

1. Monorepo Structuur

Beslissing: Monorepo met pnpm workspaces

Redenen:

• Gedeelde componenten tussen Admin Portal en User Dashboard
• Eén versie van dependencies
• Atomaire commits voor gerelateerde features
• Gedeelde configuratie en types

Structuur:

monorepo/
├── projects/
│   ├── adminportal/      # Admin interface
│   └── userdashboard/    # Public viewer
└── shared/               # Shared code
   ├── components/       # Vue components
   ├── composables/      # Vue 3 composables
   ├── types/           # Shared TypeScript types
   ├── utils/           # Utilities
   └── api/             # API integration

2. API Design: REST met JSON

Beslissing: RESTful API met JSON payloads

Redenen:

• Eenvoudig, goed begrepen patroon
• Browser native support
• Gemakkelijk debuggen (dev tools, Postman)
• Stateless, scalable

API Endpoints Structure:

/api/v1/
├── /fires          # Fire management
└── /users          # User management

3. Authentication & Authorization

Beslissing: JWT tokens + Role-Based Access Control (RBAC)

Implementatie:

• Login endpoint genereert JWT token
• Token bevat user ID, role, permissions
• Frontend slaat token op in secure cookie (httpOnly)
• Elke request stuurt token in Authorization: Bearer <token>
• Backend valideert token en controleert permissions

Roles:

• admin - Volledige toegang
• member - Read/Write fires

4. Database Schema

Beslissing: Relationele database (PostgreSQL) met PostGIS

Redenen:

• ACID guarantees voor data integriteit
• PostGIS extension voor geo-spatial queries
• Relationele integriteit met foreign keys
• Powerful voor complexe queries

Kernentiteiten:

users (id, email, password_hash, role)
fires (id, name, location, status)

5. Frontend Rendering Strategy

Beslissing: Hybrid SSR + Client-Side Rendering

Implementatie:

• Initial Load (SSR): Server genereert HTML voor SEO + performance
• Navigation (CSR): Client-side routing voor snelle transitions
• Data Fetching: Async data loading met loading states

Voordelen:

• Beter SEO
• Snellere initial paint
• Smooth navigatie

6. State Management

Beslissing: Pinia (Vue 3 Store)

Redenen:

• Official Vue state management
• Reactive, composable
• Great DevTools integration
• Automatic TypeScript support

Stores:

• authStore - User authentication & session
• fireStore - Active fires & data
• userStore - User management

7. Security Measures

Implementatie:

Laag	Maatregel	Implementatie
Authentication	JWT Tokens	Secure, httpOnly cookies
Authorization	RBAC	Role-based permissions
Transport	HTTPS/TLS	Let's Encrypt certificates
Input Validation	Server-side validation	Express middleware
SQL Injection	Parameterized queries	TypeORM queries
XSS Protection	Content Security Policy	CSP headers
CSRF	CSRF tokens	For state-changing operations
Rate Limiting	API rate limiting	Prevent brute force
Logging	Audit trails	All actions logged

8. Performance Optimisations

Frontend:

• Code splitting per route
• CSS/JS minification
• Browser caching

Backend:

• Database indexing op frequently queried fields
• Caching van geo-spatial queries

Infrastructure:

• Monitoring dashboard

Deployment Architecture

Development Environment

• Local Docker Compose setup
• Hot reloading voor frontend
• Backend auto-restart

Staging Environment

• Replica van production
• Testing van deployments
• Performance testing

Production Environment

• Load-balanced frontend
• Redundant backend instances
• Database replication

Design Decisions - Why They Matter

1. Monorepo: Snellere development cycles, shared code
2. TypeScript: Fewer bugs in production, better maintainability
3. PostGIS: Accurate wildfire mapping capabilities
4. Containerization: Works everywhere, easy scaling
5. JWT Auth: Stateless, scalable authentication
6. Pinia: Vue 3 native, less boilerplate

Scalability Considerations

• Horizontal Scaling: Backend servers behind load balancer
• Database: Read replicas, connection pooling
• Caching: Redis for frequent queries
• CDN: Static assets globally distributed

---

Laatst bijgewerkt: 17 januari 2026
Status: Technisch plan goedgekeurd