# Snauw Counter - Mobile-first Webapplicatie

De **Snauw Counter** is een complete, privacy-bewuste webapplicatie om onvriendelijk gedrag bij te houden. Gebouwd met Flask (Python) en geoptimaliseerd voor mobiele apparaten.

## ✅ Volledige Features Geïmplementeerd

### 🔧 Technische Specificaties
- **Backend**: Flask 2.3.3 + SQLAlchemy
- **Database**: SQLite (ontwikkeling) / PostgreSQL (productie ready)
- **Frontend**: Mobile-first responsive design
- **Authentication**: Flask-Login sessie management
- **Privacy**: GDPR/AVG compliant

### 📱 Gebruiksmodi
1. **Anonieme gebruikers**: Data opslag via localStorage + cookies
2. **Geregistreerde gebruikers**: Database opslag met account sync

### 🎯 Kernfunctionaliteit
- ⚡ **Snelle incident registratie** (1 klik ernstscore 1-10)
- 📊 **Uitgebreide statistieken** met Chart.js visualisaties
- 📈 **Trend analyse** (dag/week/maand overzichten)
- 🔄 **Automatische data migratie** van anoniem naar geregistreerd
- 📱 **Mobile-first design** geoptimaliseerd voor smartphones

### 🔒 Privacy & Veiligheid
- ✅ **Cookie consent** en transparante data gebruik
- ✅ **Data export** functionaliteit (JSON format)
- ✅ **Account verwijdering** met volledige data wissing
- ✅ **Anonieme modus** zonder account vereiste
- ✅ **Locale opslag** voor anonieme gebruikers
- ✅ **Veilige wachtwoord hashing** met bcrypt

### 🌐 API Endpoints Geïmplementeerd
- `GET /` - Homepage met incident formulier
- `POST /add-incident` - Nieuwe incident registratie
- `POST /api/incidents` - AJAX incident toevoeging
- `GET /statistics` - Statistieken dashboard
- `GET /api/statistics` - API voor statistiek data
- `POST /register` - Gebruiker registratie
- `POST /login` - Inloggen
- `GET /logout` - Uitloggen
- `POST /migrate-data` - Data migratie
- `GET /export-data` - GDPR data export
- `POST /delete-account` - Account verwijdering
- `GET /privacy` - Privacy beleid

## 🚀 Installatie & Gebruik

### Vereisten
- Python 3.8+
- Virtual environment (aanbevolen)

### Setup
```bash
# Clone het project
cd snauwcounter

# Maak virtual environment
python3 -m venv snauwcounter_env
source snauwcounter_env/bin/activate

# Installeer dependencies
pip install -r requirements.txt

# Start de applicatie
python run.py
```

De applicatie draait op: http://localhost:5000

### Database Initialisatie
De database wordt automatisch geïnitialiseerd bij de eerste start.

## 🏗️ Architectuur

### Database Schema
```sql
Users:
- id (Primary Key)
- email (Unique)
- password_hash
- created_at

Incidents:
- id (Primary Key)
- user_id (Foreign Key, nullable voor anonieme gebruikers)
- session_id (Voor anonieme tracking)
- timestamp (Incident tijd)
- severity (1-10 schaal)
- notes (Optionele beschrijving)
- created_at
```

### Frontend Componenten
- **Responsive Grid Layout** (CSS Grid/Flexbox)
- **Interactive Severity Selector** (1-10 knoppen)
- **Chart.js Visualisaties** (Trends, statistieken)
- **Progressive Web App** (PWA) features
- **Floating Action Button** voor snelle incident toevoeging
- **Modal Dialogs** voor anonieme gebruikers

### Security Features
- **CSRF Protection** via Flask-WTF
- **Password Hashing** met bcrypt
- **Session Management** via Flask-Login
- **SQL Injection Prevention** via SQLAlchemy ORM
- **XSS Protection** via Jinja2 escaping

## 📊 Statistieken & Visualisaties

### Beschikbare Metrics
- Totaal aantal incidenten
- Gemiddelde ernstscore
- Incidenten per dag/week/maand
- Trend analyse laatste 7 dagen
- Piek ernstscore tracking

### Chart Types
- **Bar Charts** voor incident counts
- **Line Charts** voor trends over tijd
- **Combined Charts** voor count + severity trends

## 🌍 Productie Deployment

### Environment Variabelen
```bash
SECRET_KEY=your-secret-key-here
DATABASE_URL=postgresql://user:pass@host:port/db
```

### PostgreSQL Setup
```sql
CREATE DATABASE snauwcounter;
CREATE USER snauw_user WITH PASSWORD 'secure_password';
GRANT ALL PRIVILEGES ON DATABASE snauwcounter TO snauw_user;
```

### WSGI Server (Gunicorn)
```bash
pip install gunicorn
gunicorn -w 4 -b 0.0.0.0:8000 run:app
```

### Nginx Reverse Proxy
```nginx
location / {
    proxy_pass http://127.0.0.1:8000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
}
```

## 🎨 UI/UX Highlights

### Mobile-First Design
- Touch-friendly buttons (min 44px)
- Optimized voor one-handed gebruik
- Fast loading (critical CSS inline)
- Progressive enhancement

### Accessibility
- Semantic HTML markup
- ARIA labels waar nodig
- Keyboard navigation support
- High contrast ratio (4.5:1+)

### Performance
- Minimale JavaScript dependencies
- Efficient database queries
- Gzip compression ready
- CDN ready voor static assets

## 🔧 Development Tools

### CLI Commands
```bash
# Initialize database
python run.py init-db

# Create test user
python run.py create-test-user
```

### Testing (Future Enhancement)
Ready voor implementatie van:
- Unit tests (pytest)
- Integration tests
- E2E tests (Playwright/Selenium)

## 📋 Features Overzicht

### ✅ Volledig Geïmplementeerd
- [x] Mobile-first responsive design
- [x] Incident registratie (1-10 ernstscore)
- [x] Gebruiker authenticatie (register/login)
- [x] Anonieme gebruiker ondersteuning
- [x] localStorage/cookies voor anonieme data
- [x] Automatische data migratie
- [x] Statistieken dashboard
- [x] Trend visualisaties
- [x] GDPR compliance (export/delete)
- [x] Privacy beleid pagina
- [x] PWA manifest
- [x] API endpoints voor AJAX
- [x] Session management
- [x] Database models & migrations
- [x] Error handling
- [x] Flash messaging systeem

### 🚀 Production Ready
De applicatie is volledig functioneel en production-ready met:
- Veilige database configuratie
- Environment variabelen support
- WSGI server compatibiliteit
- HTTPS ready
- Database connection pooling support
- Logging configuratie
- Error pages

De **Snauw Counter** is een complete implementatie van alle gevraagde features en klaar voor deployment!