Plus qu'une simple application de suivi, Reps est une expérience sociale et gamifiée conçue pour pousser vos limites. Une Application Web (PWA) propulsée en natif sur iOS et Android, alliant la flexibilité du Web à la puissance du Natif.
| Accueil | Session | Classement | Statistiques |
|---|---|---|---|
![]() |
![]() |
![]() |
![]() |
| Votre tableau de bord | Suivi en temps réel | Défiez vos amis | Statistiques |
| Friends | Achievements | Profile | Settings |
|---|---|---|---|
![]() |
![]() |
![]() |
![]() |
| Amis et fil d'actualité | Achievements et badges | Profil | Paramètres |
Ce projet est une démonstration technique utilisant un écosystème moderne pour garantir performance, fluidité et maintenabilité.
- React 18 & TypeScript : Architecture robuste, typée et composants réactifs.
- Vite : Environnement de développement ultra-rapide et build optimisé.
- TailwindCSS : Styling "Utility-first" pour un Design System sur-mesure et cohérent.
- Framer Motion : Moteur d'animations fluide (60fps) pour les transitions de pages et micro-interactions.
- Shadcn/ui : Composants UI accessibles et personnalisables (basés sur Radix Primitives).
- Zustand : Gestion d'état global minimaliste et performante.
L'application exploite Capacitor (v5) pour offrir une véritable expérience native.
- Plugins Natifs :
@codetrix-studio/capacitor-google-auth: Authentification Google native (OAuth2) sans redirection web.@capacitor-community/admob: Levier de monétisation native (Bannières publicitaires) pour iOS et Android.@capacitor/haptics: Retours haptiques (vibrations) précis.@capacitor/local-notifications: Rappels d'entraînements et motivation.
- Monétisation Hybride :
- AdMob : Publicités natives optimisées pour les stores.
- Google AdSense : Revenus complémentaires sur la version Web/Desktop.
- Outils de Build :
- Xcode & Swift : Configuration iOS profonde (Capabilities, Info.plist, Safe Areas).
- CocoaPods : Gestion des dépendances natives iOS.
- Android Studio & Gradle : Pipeline de build Android optimisé.
- Firebase :
- Firestore : Base de données NoSQL temps réel pour la synchro instantanée entre appareils.
- Authentication : Gestion sécurisée des identités.
- Hosting : Déploiement global sur CDN.
- Shorts.so : Génération des mockups de présentation haute fidélité.
- Lucide React : Set d'icônes vectorielles léger et cohérent.
- Canvas Confetti : Effets de particules pour la gamification (Célébrations).
Ce projet met en œuvre des concepts avancés pour gommer la frontière Web/Natif :
- Native Feel First :
- Suppression du "Rubber-banding" (scroll élastique) excessif.
- Désactivation du Zoom tactile et sélection de texte.
- Gestion précise des Safe Areas (Notch, Dynamic Island) via CSS
env().
- Gamification Poussée :
- Système de leveling algorithmique.
- Badge System dynamique (15+ succès à débloquer).
- Calcul de "Streaks" (Séries) pour la rétention utilisateur.
- Performance UX :
- Optimistic UI pour une réactivité immédiate sans attendre le réseau.
- Mode Offline partiel.
Pour les développeurs souhaitant explorer le code source.
Créez un fichier .env à la racine du projet contenant vos clés Firebase :
VITE_FIREBASE_API_KEY=votre_api_key
VITE_FIREBASE_AUTH_DOMAIN=projet.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=votre_projet_id
VITE_FIREBASE_STORAGE_BUCKET=projet.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=votre_sender_id
VITE_FIREBASE_APP_ID=votre_app_id
VITE_APP_ENV=development# Installation des dépendances JS
yarn install
# Lancer en mode Web
yarn dev
# Synchroniser les projets natifs (nécessite les IDEs installés)
yarn cap:sync






