Note rapide : En 2025, face à l’augmentation de l’insalubrité à Yaoundé, j’ai conçu une application mobile en React Native pour signaler les dépôts sauvages. Ce projet m’a permis de mettre en pratique la capture photo, la géolocalisation et l’intégration Firebase, tout en réfléchissant à l’impact social du numérique. Aujourd’hui, j’applique cette logique de conception orientée données à mes projets Data.
Cette application a d'ailleurs été noté comme étant le meilleur Projet Mobile lors des projets tuteurés du deuxième Semestre en Bachelor 2 avec une note de 17.5/20.
Demo Vidéo CleanSpotMobile 👇
Demo.Video.CleanSpotMobile.mp4
Une application mobile React Native pour signaler les dépôts sauvages d'ordures et contribuer à un environnement plus propre.
Voir aussi l'application Web pour les administrateurs: CleanSpotWeb
- 🔐 Authentification : Inscription et connexion avec Firebase Auth
- 📸 Capture de photos : Prendre des photos ou sélectionner depuis la galerie
- 📍 Géolocalisation : Localisation automatique GPS ou sélection manuelle
- 📝 Signalements : Créer et gérer ses signalements de dépôts sauvages
- 📊 Suivi : Voir l'évolution de ses signalements (en attente, en cours, résolu)
- 🇫🇷 Interface française : Entièrement en français
- React Native avec Expo
- Firebase (Firestore, Auth, Storage)
- Expo Router pour la navigation
- Expo Image Picker pour les photos
- Expo Location pour la géolocalisation
- Open Street Map pour la carte
-
Cloner le projet
-
Installer les dépendances
npm install
-
Configurer Firebase
- Créer un projet Firebase sur https://console.firebase.google.com
- Activer Authentication (Email/Password)
- Créer une base de données Firestore
- Activer Storage
- Remplacer les valeurs dans
config/firebaseConfig.jspar vos vraies clés ;)
-
Lancer l'application
npx expo start or npx expo start --clear
- Aller dans Authentication > Sign-in method
- Activer "Email/Password"
- Créer une base de données en mode test
- Les règles de sécurité seront à configurer selon vos besoins
- Les images seront stockes en base 64 dans firestore database
Remplacer les valeurs dans config/firebaseConfig.js :
export const firebaseConfig = {
apiKey: "votre-api-key",
authDomain: "votre-projet.firebaseapp.com",
projectId: "votre-projet-id",
storageBucket: "votre-projet.appspot.com",
messagingSenderId: "123456789",
appId: "votre-app-id"
};app/
├── (auth)/ # Écrans d'authentification
│ ├── login.jsx # Connexion
│ └── register.jsx # Inscription
├── (tabs)/ # Navigation principale
│ ├── home.jsx # Accueil
│ ├── reports.jsx # Liste des signalements
│ └── profile.jsx # Profil utilisateur
├── report/
│ └── create.jsx # Création de signalement
└── index.jsx # Page d'accueil/landing
components/ # Composants réutilisables
├── CustomButton.jsx
├── CustomInput.jsx
└── LoadingSpinner.jsx
config/
└── firebaseConfig.js # Configuration Firebase
services/
└── firebaseService.js # Services Firebase
utils/
├── imageUtils.js # Utilitaires pour les images
└── locationUtils.js # Utilitaires pour la géolocalisation
- Première utilisation : Créer un compte ou se connecter
- Créer un signalement :
- Appuyer sur "Nouveau signalement"
- Prendre une photo du dépôt sauvage
- Ajouter une description
- Confirmer la localisation
- Envoyer le signalement
- Suivre ses signalements : Voir l'évolution dans "Mes signalements"
- ✅ Application web d'administration pour les collecteurs
- Notifications push pour les mises à jour de statut
- ✅ Sélection manuelle sur carte
- Système de gamification
- Statistiques communautaires
Utiliser Expo Go sur votre téléphone pour tester l'application :
- Installer Expo Go depuis l'App Store/Play Store
- Scanner le QR code affiché après
npm start
Pour toute question ou problème, veuillez créer une issue dans le repository.