Structure du projet
Arborescence complète avec explications de chaque dossier et fichier dans l'app ScaleRocket Mobile.
Structure du projet
ScaleRocket Mobile suit les conventions d'Expo Router avec une séparation claire des responsabilités.
Arborescence
scalerocket-mobile/
├── app/ # Écrans Expo Router (routage basé sur les fichiers)
│ ├── _layout.tsx # Layout racine (providers, garde d'auth)
│ ├── index.tsx # Redirection d'entrée
│ ├── (auth)/ # Groupe de routes auth (pas de barre d'onglets)
│ │ ├── _layout.tsx # Layout auth (navigateur stack)
│ │ ├── login.tsx # Écran de connexion
│ │ ├── register.tsx # Écran d'inscription
│ │ └── forgot-password.tsx
│ ├── (tabs)/ # Groupe de routes principal (barre d'onglets)
│ │ ├── _layout.tsx # Configuration des onglets
│ │ ├── index.tsx # Accueil / Tableau de bord
│ │ ├── profile.tsx # Profil utilisateur
│ │ └── settings.tsx # Écran de paramètres
│ └── modal.tsx # Exemple d'écran modal
├── components/ # Composants UI réutilisables
│ ├── ui/ # Composants de base (Button, Input, Card...)
│ └── screens/ # Composants spécifiques aux écrans
├── lib/ # Utilitaires et configurations
│ ├── auth.ts # Helpers d'authentification
│ ├── theme.ts # Contexte de thème et couleurs
│ └── utils.ts # Utilitaires généraux
├── assets/ # Ressources statiques
│ ├── images/ # Images de l'app
│ ├── fonts/ # Polices personnalisées
│ └── splash.png # Image d'écran de démarrage
├── app.json # Configuration Expo
├── tsconfig.json # Configuration TypeScript
└── package.json # DépendancesFichiers spécifiques au backend
lib/
├── supabase.ts # Initialisation du client Supabase
├── auth.ts # Auth avec Supabase Auth
└── storage.ts # Helpers Supabase StorageLe client Supabase est initialisé avec expo-secure-store pour la persistance des tokens.
convex/ # Fonctions backend Convex
├── _generated/ # Types et API auto-générés
├── auth.ts # Configuration d'authentification
├── schema.ts # Schéma de base de données
└── functions/ # Fonctions serveur (queries, mutations)
lib/
├── convex.ts # Provider client Convex
└── auth.ts # Helpers d'auth wrappant Convex AuthLe répertoire convex/ contient votre logique backend. Les types sont auto-générés.
Le répertoire app/
Chaque fichier dans app/ devient une route. Les dossiers entre parenthèses () sont des groupes de routes qui définissent des layouts sans ajouter de segment d'URL.
| Chemin | Route | Objectif |
|---|---|---|
app/index.tsx | / | Point d'entrée, redirige vers login ou accueil |
app/(auth)/login.tsx | /login | Écran de connexion |
app/(tabs)/index.tsx | / (avec onglets) | Tableau de bord |
app/(tabs)/profile.tsx | /profile | Profil |
app/modal.tsx | /modal | Présenté comme modal |
Le répertoire components/
Les composants sont divisés en deux catégories :
components/ui/— Composants génériques réutilisables (Button, Input, Card, Avatar). Pas de logique métier.components/screens/— Composants liés à des écrans spécifiques (DashboardChart, ProfileForm). Peuvent contenir de la logique métier.
Le répertoire lib/
Utilitaires et configurations partagés :
| Fichier | Objectif |
|---|---|
auth.ts | Helpers de connexion, inscription, déconnexion |
theme.ts | Contexte de thème, jetons de couleur, hook useTheme |
utils.ts | Formatage de dates, validation, helpers généraux |
Le répertoire assets/
Fichiers statiques embarqués dans l'app :
images/— PNG, SVG utilisés dans l'appfonts/— Fichiers de polices personnalisées (chargés viaexpo-font)splash.png— L'image d'écran de démarrage (1284x2778 recommandé)icon.png— L'icône de l'app (1024x1024)
Alias de chemin
L'alias @ résout vers la racine du projet via tsconfig.json :
{
"compilerOptions": {
"paths": {
"@/*": ["./*"]
}
}
}Utilisez @/components/ui/Button au lieu de ../../../components/ui/Button.