Real-time Content Updates: WebSocket-gebaseerde real-time synchronisatie
Zone-specifieke Content: Verschillende content per zone (receptie, restaurant, skibaan, etc.)
Content Planning: Plan content voor specifieke tijden en data
Meerdere Content Types: Ondersteuning voor afbeeldingen, video's en livestreams
Weer Widget: Actuele weersinformatie met winterse styling
Responsive Design: Werkt op alle schermformaten
Offline Capable: Blijft functioneren tijdens verbindingsproblemen

🏗️ Systeem Architectuur

┌─────────────┐    ┌─────────────┐    ┌─────────────┐
│   Backend   │    │   Admin     │    │   Client    │
│   Server    │◄──►│  Dashboard  │    │   Display   │
│  (Node.js)  │    │  (Browser)  │    │  (Browser)  │
└─────────────┘    └─────────────┘    └─────────────┘

🚀 Snelle Start

Vereisten

Node.js 18+
npm 8+
Moderne web browser

Installatie

# Clone het project
git clone [repository-url]
cd snowworld-narrowcasting

# Installeer backend dependencies
cd backend
npm install

# Installeer admin dashboard dependencies
cd ../admin
npm install

Opstarten

# Start de backend server
cd backend
npm start

# Start de admin dashboard (in nieuw terminal venster)
cd admin
npm start

# Open client display in browser
# Open client/index.html of ga naar:
# http://localhost:3000/client/index.html?zone=reception

📁 Project Structuur

snowworld-narrowcasting/
├── backend/                 # Node.js backend server
│   ├── server.js           # Hoofd server bestand
│   ├── database/           # Database management
│   ├── services/           # Business logic
│   └── package.json        # Backend dependencies
├── admin/                  # Admin dashboard
│   ├── index.html          # Hoofd HTML bestand
│   ├── styles.css          # Styling
│   ├── js/                 # JavaScript modules
│   └── package.json        # Admin dependencies
├── client/                 # Client display
│   ├── index.html          # Display HTML
│   ├── styles.css          # Display styling
│   └── js/                 # Display JavaScript
├── database/               # SQLite database bestanden
├── public/uploads/         # Geüploade media bestanden
│   ├── images/            # Afbeeldingen
│   └── videos/            # Video's
└── docs/                   # Documentatie

🎮 Gebruik

Admin Dashboard

Ga naar http://localhost:8080
Klik op "Content Toevoegen" om nieuwe media te uploaden
Gebruik de "Planning" tab om content te plannen
Beheer zones via de "Zones" tab

Client Display

Standaard zone: http://localhost:3000/client/index.html
Specifieke zone: http://localhost:3000/client/index.html?zone=reception
Beschikbare zones: reception, restaurant, skislope, lockers, shop

Keyboard Shortcuts (Client)

F5: Content verversen
Escape: Zone selector tonen
F1: Systeem informatie

🔧 Configuratie

Backend Configuratie

// backend/server.js
const PORT = process.env.PORT || 3000;
const MAX_FILE_SIZE = 50 * 1024 * 1024; // 50MB

Zone Configuratie

// Standaard zones beschikbaar:
- reception: Receptie
- restaurant: Restaurant  
- skislope: Skibaan
- lockers: Kluisjes
- shop: Winkel

🌐 API Endpoints

Content Management

POST /api/content/upload - Upload content
GET /api/content - Haal content op
DELETE /api/content/:id - Verwijder content

Schedule Management

POST /api/schedule - Maak planning
GET /api/schedule/:zone - Haal planning op

Zones

GET /api/zones - Haal zones op

Weather

GET /api/weather - Haal weersdata op

🎨 Styling

Het systeem gebruikt een winterse kleurenschema:

Primair: #0066cc (blauw)
Secundair: #e6f3ff (licht blauw)
Accent: #00a8ff (helder blauw)
Achtergrond: Gradient van blauw naar paars

📱 Responsive Design

Werkt op schermen van 320px tot 4K displays
Touch-friendly interface
Adaptive layouts voor verschillende oriëntaties
High contrast mode support

🔒 Beveiliging

File type validatie
Bestandsgrootte limieten
Input sanitization
CORS configuratie
SQL injection preventie

🚨 Foutafhandeling

Graceful degradation bij connection issues
Fallback content bij errors
User-friendly error messages
Automatic retry mechanisms

📊 Performance

Content caching
Lazy loading voor media
WebSocket voor real-time updates
Optimized for low bandwidth

🔍 Debugging

Development Mode

cd backend
npm run dev  # Met nodemon voor auto-restart

Logging

Console logging in development
SQLite logs tabel voor events
Error tracking en reporting

🧪 Testing

# Unit tests (indien geïmplementeerd)
npm test

# Manual testing endpoints
curl http://localhost:3000/api/zones
curl http://localhost:3000/api/weather

📦 Deployment

Production Setup

Gebruik PM2 voor Node.js process management
Configureer nginx als reverse proxy
SSL/TLS certificaten installeren
Database backups instellen

Environment Variables

PORT=3000
NODE_ENV=production

🔄 Updates

# Update dependencies
cd backend && npm update
cd admin && npm update

# Database migrations (indien nodig)
# Zie docs/TECHNICAL_DOCUMENTATION.md

🆘 Troubleshooting

Veelvoorkomende Problemen

Server start niet:

Controleer of Node.js geïnstalleerd is
Controleer poort 3000 beschikbaarheid

Content wordt niet weergegeven:

Controleer zone parameter in URL
Verifieer content is geüpload via admin
Check browser console voor errors

WebSocket connectie faalt:

Controleer firewall settings
Verifieer server draait op poort 3000
Check CORS configuratie

File upload errors:

Controleer bestandsgrootte (< 50MB)
Verifieer bestandstype wordt ondersteund
Check server logs voor details

📞 Ondersteuning

Voor technische ondersteuning:

Check deze README eerst
Raadpleeg docs/TECHNICAL_DOCUMENTATION.md
Check browser console voor errors
Controleer server logs

📄 Licentie

Dit project is ontwikkeld voor SnowWorld als onderdeel van een MBO challenge.

❄️ SnowWorld Narrowcasting System - "Waar het altijd sneeuwt, ook in de zomer!" ❄️