MVP d'une plateforme permettant aux citoyens de signaler des problèmes urbains et aux administrateurs de les gérer via un dashboard simple.

Permettre aux citoyens de signaler des problèmes urbains (nids de poule, éclairage défectueux, dépôts sauvages, etc.) et aux administrateurs de les visualiser sur une carte et de gérer leur statut.

• React 18 - Bibliothèque UI
• TypeScript - Typage statique
• Vite - Build tool et dev server
• React Router - Navigation
• React Leaflet - Carte interactive avec OpenStreetMap
• Tailwind CSS - Styling
• React Toastify - Notifications toast
• EmailJS - Envoi d'emails (temporaire, à remplacer par un backend)
• Vitest - Tests unitaires
• LocalStorage - Stockage temporaire (pas de backend pour le MVP)

src/
├── components/        # Composants réutilisables
│   ├── Map.tsx       # Carte interactive
│   ├── ReportCard.tsx # Card d'un signalement
│   ├── ReportForm.tsx # Formulaire de création
│   └── StatusBadge.tsx # Badge de statut
├── pages/            # Pages de l'application
│   ├── Home.tsx      # Page d'accueil avec carte
│   ├── NewReport.tsx # Formulaire de signalement
│   ├── ReportDetail.tsx # Détail d'un signalement
│   └── Admin.tsx     # Dashboard administrateur
├── services/         # Services
│   └── emailService.ts # Service d'envoi d'emails
├── config/           # Configuration
│   └── emailjs.ts    # Config EmailJS
├── types/            # Types TypeScript
│   └── report.ts     # Types des signalements
├── data/             # Données mockées
│   └── mockReports.ts # 10 signalements de test
├── utils/            # Utilitaires
│   └── storage.ts    # Gestion du LocalStorage
└── test/             # Tests
    └── setup.ts      # Configuration Vitest

• 🗺️ Carte interactive avec marqueurs des signalements
• 📊 Statistiques rapides (total, nouveaux, résolus)
• 📋 Liste des 5 derniers signalements
• ➕ Bouton "Signaler un problème"

• 📝 Catégorie (Nid de poule, Éclairage, Dépôt sauvage, Autre)
• ✍️ Titre et description (obligatoires)
• 📷 Upload de photo avec preview (optionnel)
• 📍 Sélection de localisation (géolocalisation auto ou clic sur carte)
• ✅ Validation du formulaire
• 💾 Sauvegarde dans LocalStorage
• 📧 Envoi automatique d'email à la mairie (via EmailJS)

• 🖼️ Photo du signalement (si disponible)
• ℹ️ Toutes les informations (titre, description, catégorie, statut)
• 🗺️ Carte avec le marqueur de localisation
• 🏷️ Badge de statut coloré
• 📅 Date de création

• 📊 Statistiques détaillées par statut
• 🔍 Filtrage par statut
• 📋 Tableau de tous les signalements
• 🔄 Changement de statut en temps réel
• 🖼️ Miniatures des photos

• Node.js 16+ et npm

# Installer les dépendances
npm install

# Démarrer le serveur de développement
npm run dev

L'application sera accessible sur http://localhost:5173

# Créer un build de production
npm run build

# Prévisualiser le build
npm run preview

Pour activer l'envoi d'emails à la mairie lors de la création d'un signalement :

1. Consultez le guide détaillé : EMAIL_SETUP.md
2. Créez un compte gratuit sur emailjs.com
3. Configurez le service et le template
4. Modifiez src/config/emailjs.ts avec vos clés

Note : L'application fonctionne sans EmailJS (les emails ne seront simplement pas envoyés).

# Lancer les tests en mode watch
npm run test

# Lancer les tests une fois
npm run test:run

# Lancer l'interface UI des tests
npm run test:ui

• Primaire : Bleu (#3B82F6)
• Succès : Vert (#10B981)
• Warning : Orange (#F59E0B)
• Nouveau : Badge bleu clair
• En cours : Badge orange
• Résolu : Badge vert

L'application est entièrement responsive et optimisée pour :

• 📱 Mobile
• 📱 Tablette
• 💻 Desktop

Pour ce MVP, les données sont stockées dans le LocalStorage du navigateur :

• ✅ Persistance locale
• ✅ Initialisation automatique avec 10 signalements mockés
• ✅ Pas besoin de backend
• ⚠️ Les données sont perdues si le cache du navigateur est vidé

1. Citoyen : Accède à / → Clique sur "Signaler un problème" → Remplit le formulaire → Soumet
2. Admin : Accède à /admin → Visualise tous les signalements → Change les statuts

Ce qui N'est PAS dans le MVP :

• ❌ Authentification utilisateur
• ❌ Backend / API
• ❌ Base de données
• ❌ Notifications
• ❌ Envoi d'emails
• ❌ Filtres avancés
• ❌ Recherche textuelle
• ❌ Export des données

• Backend avec API REST
• Base de données PostgreSQL
• Authentification utilisateur
• Système de notifications
• Upload de photos sur serveur
• Filtres et recherche avancés
• Export CSV/PDF
• Tableau de bord analytics

Projet MVP - 2024