Finance Tracker

Application de gestion des finances personnelles développée avec React Native et Expo.

Fonctionnalités

• Suivi des dépenses et revenus
• Catégorisation des dépenses
• Vue d'ensemble du solde
• Conversion automatique des devises
• Notifications pour les transactions
• Authentification sécurisée
• Compatible Web, iOS et Android

Technologies

• React Native
• Expo
• TypeScript
• Expo Router
• Axios
• SecureStore
• FileSystem
• Notifications

Installation

Prérequis

1. Node.js

   • Version 16.0.0 ou supérieure
   • Téléchargement : nodejs.org
   • Vérification : node --version

2. npm ou yarn

   • npm est installé avec Node.js
   • Vérification : npm --version

3. Expo CLI

   npm install -g expo-cli

4. Expo Go sur mobile

   • App Store pour iOS
   • Google Play pour Android

Configuration du Projet

1. Cloner le projet

   git clone https://github.com/votre-username/finance-tracker.git
   cd finance-tracker

2. Installer les dépendances

   npm install

3. Configuration des variables d'environnement

   • Copier le fichier .env.example vers .env

   cp .env.example .env

   • Modifier les variables dans .env :

   EXPO_PUBLIC_API_URL=votre_url_api
   EXPO_PUBLIC_EXCHANGE_RATE_API_KEY=votre_clé_api
   

Lancement du Projet

1. Démarrer en mode développement

   npm run dev

2. Accéder à l'application

   • Web : Ouvrir http://localhost:8081
   • Mobile : Scanner le QR code avec l'app Expo Go

Scripts Disponibles

• npm run dev : Démarre le serveur de développement
• npm run build:web : Construit la version web de production
• npm run lint : Vérifie le code avec ESLint
• npm run test : Lance les tests unitaires

Résolution des Problèmes Courants

1. Port déjà utilisé

   kill -9 $(lsof -ti:8081)

2. Cache Expo

   expo start -c

3. Dépendances

   rm -rf node_modules
   npm install

Structure du Projet

app/
├── (tabs)/                 # Routes principales
│   ├── _layout.tsx        # Navigation
│   ├── index.tsx          # Accueil
│   ├── expenses.tsx       # Dépenses
│   └── profile.tsx        # Profil
├── context/               # Contextes React
├── services/             # Services API
├── types/                # Types TypeScript
├── utils/                # Utilitaires
├── _layout.tsx           # Layout principal
├── login.tsx             # Connexion
├── addExpense.tsx        # Ajout dépense
└── addTransaction.tsx    # Ajout transaction

Fonctionnalités Détaillées

Gestion des Devises

• Support de multiples devises (EUR, USD, GBP, JPY, CHF, CAD, AUD)
• Conversion automatique des montants
• Taux de change mis à jour quotidiennement
• Mise en cache des taux de change
• Changement de devise à la volée

Authentification

• Connexion email/mot de passe
• Stockage sécurisé
• Session persistante

Transactions

• Ajout dépenses/revenus
• Historique
• Catégorisation
• Calcul du solde

Catégories de Dépenses

• Alimentation
• Transport
• Shopping
• Factures
• Divertissement
• Santé
• Éducation
• Autres

Cache et Performance

• Cache des transactions
• Cache des taux de change
• Cache des images
• Stockage optimisé

Notifications

• Notifications push
• Notifications locales pour les nouvelles transactions

Sécurité

• JWT pour l'authentification
• Stockage sécurisé des données sensibles
• Validation des données

Compatibilité

• iOS
• Android
• Web

Déploiement

Web

npm run build:web

Mobile

Voir Documentation Expo

Génération d'un APK signé

1. Générer une clé de signature (à faire une seule fois) :

keytool -genkeypair -v -storetype PKCS12 -keystore my-finance-key.keystore -alias my-finance-alias -keyalg RSA -keysize 2048 -validity 10000

2. Configurer les variables d'environnement dans app.json :

{
  "expo": {
    "android": {
      "package": "com.mycompany.finance",
      "versionCode": 1
    }
  }
}

3. Créer un fichier eas.json à la racine du projet :

{
  "build": {
    "preview": {
      "android": {
        "buildType": "apk"
      }
    },
    "production": {
      "android": {
        "buildType": "app-bundle"
      }
    }
  }
}

4. Installer EAS CLI :

npm install -g eas-cli

5. Se connecter à Expo :

eas login

6. Configurer les credentials :

eas credentials

7. Lancer la build :

# Pour un APK de test
eas build -p android --profile preview

# Pour un bundle de production
eas build -p android --profile production

8. Récupérer l'APK :

• Une fois la build terminée, EAS fournira un lien pour télécharger l'APK
• L'APK peut être installé directement sur les appareils Android
• Le bundle (.aab) doit être soumis sur le Play Store

Notes importantes :

• Conservez la clé de signature (.keystore) en lieu sûr
• Sauvegardez le mot de passe de la clé
• Utilisez la même clé pour toutes les mises à jour
• Ne partagez jamais la clé de signature

Tests

npm run test

Conventions

• TypeScript strict
• Composants fonctionnels
• StyleSheet.create
• Context API

Licence

MIT