CESIZEN-APP

Application mobile CESIZen pour iOS et Android.

Stack technique

Technologie	Version	Rôle
React Native	0.81.5	Framework mobile
Expo	54.0.33	Plateforme de développement
Expo Router	6.0.23	Routing basé sur les fichiers
TypeScript	5.9.2	Langage
Tailwind CSS + Uniwind	4.2.0 / 1.3.2	Styles (React Native)
Axios	1.11.0	Client HTTP
Expo Secure Store	14.2.0	Stockage sécurisé des tokens
React Native Gifted Charts	1.4.68	Graphiques (tracker)
React Native Render HTML	6.3.4	Affichage du contenu HTML
Lucide React Native	0.564.0	Icônes

Prérequis

• Node.js >= 20.x
• npm >= 10.x
• CESIZEN-API en cours d'exécution (accessible depuis l'appareil/simulateur)

Installation

1. Se placer dans le dossier

cd CESIZEN-APP

2. Installer les dépendances

npm install

3. Configurer les variables d'environnement

Créer un fichier .env à la racine du dossier :

cp .env.example .env

Éditer .env :

EXPO_PUBLIC_API_BASE_URL=http://localhost:3000/api

Important : sur un appareil physique ou un émulateur Android, localhost ne pointe pas vers votre machine hôte. Utilisez l'adresse IP locale de votre machine :

# Exemple avec une IP locale
EXPO_PUBLIC_API_BASE_URL=http://192.168.1.10:3000/api

---

Démarrage

Démarrer le serveur Expo

npm start
# ou
npx expo start

Un QR code s'affiche dans le terminal. Vous pouvez ensuite :

Ouvrir sur iOS (simulateur)

npm run ios
# ou appuyer sur 'i' dans le terminal Expo

Ouvrir sur Android (émulateur)

npm run android
# ou appuyer sur 'a' dans le terminal Expo

Ouvrir sur un appareil physique

1. Installer Expo Go sur l'appareil (App Store / Google Play)
2. Scanner le QR code affiché par npm start
3. L'application se charge directement

L'appareil physique et votre machine doivent être sur le même réseau Wi-Fi.

---

Scripts disponibles

Commande	Description
npm start	Démarre le serveur Expo
npm run ios	Lance sur simulateur iOS
npm run android	Lance sur émulateur Android
npm run web	Lance dans le navigateur

---

Structure du projet

CESIZEN-APP/
├── app/                           # Expo Router — routing par fichiers
│   ├── _layout.tsx                # Layout racine (ToastProvider)
│   ├── index.tsx                  # Page d'accueil / splash
│   ├── gdpr-consent.tsx           # Écran consentement RGPD
│   ├── (auth)/                    # Groupe routes d'authentification
│   │   ├── _layout.tsx
│   │   ├── login.tsx              # Connexion
│   │   └── signup.tsx             # Inscription
│   └── (app)/                     # Groupe routes protégées
│       ├── _layout.tsx            # Layout avec navigation
│       ├── index.tsx              # Accueil / tableau de bord
│       ├── tracker.tsx            # Tracker d'émotions
│       ├── account.tsx            # Compte / paramètres
│       └── resources/             # Ressources / articles
│           ├── _layout.tsx
│           ├── index.tsx          # Liste des articles
│           └── [id].tsx           # Détail d'un article
├── components/
│   ├── auth/                      # Composants login / signup
│   ├── home/                      # Composants page d'accueil
│   ├── tracker/                   # Composants tracker émotions
│   ├── account/                   # Composants compte utilisateur
│   ├── privacy/                   # Composants RGPD / confidentialité
│   └── ui/                        # Composants UI réutilisables
├── lib/
│   ├── auth/                      # Logique auth + gestion tokens
│   ├── http/                      # Client Axios configuré
│   ├── services/                  # Appels API (services métier)
│   ├── hooks/                     # Hooks React personnalisés
│   ├── data/                      # Utilitaires de données
│   └── toast/                     # Contexte notifications toast
├── assets/                        # Icônes, splash screen
├── app.json                       # Configuration Expo
├── metro.config.js                # Configuration Metro bundler
├── tsconfig.json                  # Configuration TypeScript
├── global.css                     # Styles globaux
├── .env.example                   # Modèle de variables d'environnement
└── package.json