- Setup Expo project with TypeScript - Implement authentication (Login/Signup/Logout) - Create Dashboard, Transactions, Subscriptions, and Analysis screens - Add Firebase services (Auth, Firestore, Storage) - Implement real-time synchronization - Add charts and analytics - Create reusable components (Button, InputText, TransactionCard, SubscriptionCard) - Configure React Navigation with bottom tabs - Add Firestore security rules - Create comprehensive documentation (README, FIREBASE_SETUP, TESTING)
5.2 KiB
💰 WalletTracker
Application mobile de gestion de budget développée avec React Native et Firebase.
📱 Fonctionnalités
- Authentification : Inscription et connexion sécurisées avec Firebase Auth
- Gestion des transactions : Ajout et suivi des dépenses et revenus par catégorie
- Abonnements récurrents : Gestion des abonnements avec rappels automatiques
- Tableau de bord : Vue d'ensemble mensuelle du budget avec statistiques
- Analyses visuelles : Graphiques et statistiques détaillées par catégorie
- Synchronisation temps réel : Partage des données entre plusieurs utilisateurs
- Multi-plateforme : Fonctionne sur iOS et Android
🛠️ Stack Technique
- Frontend : React Native avec Expo
- Langage : TypeScript
- Backend : Firebase (Authentication, Firestore, Storage)
- Navigation : React Navigation (Stack & Bottom Tabs)
- Stockage local : AsyncStorage
- Graphiques : react-native-chart-kit
- Gestion d'état : React Hooks
📦 Installation
Prérequis
- Node.js (v16 ou supérieur)
- npm ou yarn
- Expo CLI
- Compte Firebase
Étapes d'installation
-
Cloner le projet
git clone <votre-repo> cd WalletTracker -
Installer les dépendances
npm install -
Configurer Firebase
a. Créez un projet sur Firebase Console
b. Activez les services suivants :
- Authentication (Email/Password)
- Firestore Database
- Storage
c. Copiez vos identifiants Firebase dans
src/config/firebase.ts:const firebaseConfig = { apiKey: "VOTRE_API_KEY", authDomain: "VOTRE_AUTH_DOMAIN", projectId: "VOTRE_PROJECT_ID", storageBucket: "VOTRE_STORAGE_BUCKET", messagingSenderId: "VOTRE_MESSAGING_SENDER_ID", appId: "VOTRE_APP_ID" }; -
Configurer les règles Firestore
Copiez les règles du fichier
firestore.rulesdans la console Firebase -
Lancer l'application
npm startPuis scannez le QR code avec l'application Expo Go sur votre téléphone
📱 Utilisation
Démarrage rapide
- Créer un compte : Utilisez l'écran d'inscription avec votre email et mot de passe
- Ajouter une transaction : Cliquez sur le bouton "+" pour ajouter une dépense ou un revenu
- Gérer les abonnements : Accédez à l'onglet "Abonnements" pour suivre vos dépenses récurrentes
- Consulter les analyses : Visualisez vos dépenses par catégorie dans l'onglet "Analyses"
Catégories par défaut
Dépenses :
- Courses 🛒
- Logement 🏠
- Transport 🚗
- Loisirs 🎮
- Restaurant 🍽️
- Santé 💊
- Vêtements 👕
- Éducation 📚
- Abonnements 📱
- Autre 📦
Revenus :
- Salaire 💰
- Freelance 💼
- Investissement 📈
- Cadeau 🎁
- Autre 💵
🗂️ Structure du projet
WalletTracker/
├── src/
│ ├── components/ # Composants réutilisables
│ │ ├── Button.tsx
│ │ ├── InputText.tsx
│ │ ├── TransactionCard.tsx
│ │ └── SubscriptionCard.tsx
│ ├── config/ # Configuration Firebase
│ │ └── firebase.ts
│ ├── hooks/ # Hooks personnalisés
│ │ └── useAuth.ts
│ ├── navigation/ # Configuration de la navigation
│ │ └── AppNavigator.tsx
│ ├── screens/ # Écrans de l'application
│ │ ├── LoginScreen.tsx
│ │ ├── SignupScreen.tsx
│ │ ├── DashboardScreen.tsx
│ │ ├── TransactionScreen.tsx
│ │ ├── SubscriptionScreen.tsx
│ │ └── AnalysisScreen.tsx
│ ├── services/ # Services Firebase
│ │ ├── authService.ts
│ │ ├── transactionService.ts
│ │ ├── subscriptionService.ts
│ │ └── categoryService.ts
│ ├── types/ # Définitions TypeScript
│ │ └── index.ts
│ └── utils/ # Utilitaires
├── App.tsx # Point d'entrée
├── package.json
└── README.md
🔐 Sécurité
- Les mots de passe sont gérés par Firebase Authentication
- Les règles Firestore protègent les données de chaque utilisateur
- Les données sont synchronisées uniquement pour les utilisateurs autorisés
- Stockage sécurisé des tokens avec AsyncStorage
🚀 Déploiement
Build pour production
iOS :
eas build --platform ios
Android :
eas build --platform android
📝 Fonctionnalités futures
- Notifications push pour les rappels d'abonnements
- Partage multi-utilisateurs avancé
- Export des données en CSV/PDF
- Objectifs budgétaires mensuels
- Mode sombre
- Support multilingue
- Reconnaissance de tickets avec OCR
- Widgets pour l'écran d'accueil
🤝 Contribution
Les contributions sont les bienvenues ! N'hésitez pas à ouvrir une issue ou une pull request.
📄 Licence
Ce projet est sous licence MIT.
👨💻 Auteur
Développé avec ❤️ pour une meilleure gestion de budget.
📞 Support
Pour toute question ou problème, veuillez ouvrir une issue sur GitHub.