Créer une application mobile

Voici le cahier des charges détaillé de l'application demandé par notre l'association :

# APPLICATION CARTEL NANCY

## Vue d'ensemble

**Application mobile et web** développée pour l'événement sportif et culturel "Cartel 2026" à Nancy.

**Type :** PWA (Progressive Web App) + Application native (Android/iOS)
**Framework :** React 18 + TypeScript
**Backend :** Firebase (Realtime Database, Storage, Cloud Messaging)
**Mobile :** Capacitor 6 (cross-platform)

---

## Fonctionnalités principales

### 1. Carte interactive (Leaflet)
- Géolocalisation en temps réel
- Marqueurs d'événements (venues, matchs)
- Plans de salles (Parc Expo, Zenith)
- Contrôles de zoom et navigation
- Optimisation des performances (virtualisation des marqueurs)

### 2. Gestion d'événements
- Liste des événements avec filtres avancés (date, sport, type)
- Calendrier popup interactif
- Détails complets (équipes, horaires, résultats)
- Virtualisation de liste pour performance
- Filtres par date, sport, type d'événement

### 3. Chat temps réel
- Messages en temps réel via Firebase Realtime Database
- Notifications push (FCM) pour nouveaux messages
- Abonnement aux topics Firebase
- Interface optimisée mobile
- Gestion des permissions notifications

### 4. Mode administrateur
- Authentification par compte google
- CRUD complet sur :
- Venues (lieux d'événements)
- Matchs (création, modification, suppression)
- Fichiers de planning (upload PDF/images)
- Historique des actions avec système d'undo
- Logs Firebase pour debugging

### 5. Informations pratiques
- Sections dynamiques (restauration, transport, hébergement)
- Lignes de bus avec horaires
- Fichiers de planning téléchargeables
- Plans des sites (images)

### 6. Signalements VSS (Violences Sexuelles et Sexistes)
- Formulaire sécurisé avec validation
- Envoi via Telegram Bot
- **Système anti-spam :**
- Rate limiting (5 signalements/heure max)
- Détection de contenu suspect
- Blocage automatique après 3 violations (24h)
- Alertes Telegram pour tentatives de spam
- Validation des participants (nom/prénom/téléphone)

### 7. Système de paris
- Activation unique par bracelet (deviceId)
- Validation bracelet via Firebase
- Un bracelet = un seul appareil (sécurité)
- Interface de paris sur les matchs
- Système de points

### 8. Charte HSE (Hygiène, Sécurité, Environnement)
- Affichage obligatoire au premier lancement
- Case à cocher pour acceptation
- Stockage localStorage
- Conformité événementiel

### 9. Fonctionnalités natives (Capacitor)
- Notifications push natives (Android/iOS)
- Géolocalisation avec permissions
- Verrouillage orientation écran
- Gestion du clavier (overlay/resize)
- Safe areas (encoches iPhone/Android)
- Status bar personnalisée
- Splash screen

### 10. Design System
- Tokens CSS centralisés (couleurs, spacing, z-index)
- Architecture mobile-first
- Responsive design (mobile/tablette/desktop)
- Support iOS et Android (styles spécifiques)
- Variables CSS pour thème

---

## Architecture technique

### Frontend
- **React 18** (Functional Components + Hooks uniquement)
- **TypeScript** (strict mode)
- **Vite** (build tool)
- **React Router 7** (navigation)
- **Leaflet** (cartes interactives)
- **React Window** (virtualisation listes)

### Backend & Services
- **Firebase Realtime Database** (données temps réel)
- **Firebase Storage** (fichiers PDF/images)
- **Firebase Cloud Messaging** (notifications push)
- **Telegram Bot API** (signalements VSS)
- **Firebase Functions** (Cloud Functions)

### Mobile
- **Capacitor 6** (wrapper natif)
- **Plugins Capacitor :**
- Push Notifications
- Local Notifications
- Geolocation
- Screen Orientation
- Keyboard
- Status Bar
- Splash Screen
- App (lifecycle)
- Browser

### Build & Déploiement
- **Android :** Gradle (APK + App Bundle)
- **iOS :** Xcode (App Store)
- **Web :** Netlify Pages (PWA)
- Scripts automatisés pour build/sync

---

## Pages principales

1. **Home** (`/home`) : Liste événements avec filtres
2. **Map** (`/map`) : Carte interactive
3. **Info** (`/info`) : Menu informations pratiques
4. **InfoSection** (`/info/:section`) : Sections dynamiques
5. **Parie** (`/info/parie`) : Activation bracelet et paris
6. **PlanningFilesPage** : Répertoire fichiers

---

## Sécurité & Conformité

### RGPD
- Politique de confidentialité (`/privacy-policy.html`)
- Conditions d'utilisation (`/terms-of-service.html`)
- Gestion des données personnelles

### Sécurité fonctionnelle
- Authentification admin sécurisée
- Validation bracelet unique par appareil
- Protection anti-spam VSS (rate limiting + détection)
- Validation participants (Firebase)

### Conformité événementiel
- Charte HSE obligatoire
- Signalements VSS conformes législation
- Gestion des permissions (notifications, géolocalisation)