🎯 Contexte et objectif

Ce projet, réalisé en troisième année de BUT MMI, constituait notre premier développement mobile en React Native. L’objectif était de concevoir une application connectée à une API locale via JSON Server, intégrant plusieurs écrans : ouverture de boosters, collection de cartes et profil utilisateur.

J’ai assuré la mise en place de la logique applicative et la communication entre l’app et l’API, en concevant un système de tirage aléatoire et de persistance des données inspiré du jeu Pokémon TCG Pocket.

💡 Problématique et contraintes

Le principal défi concernait la gestion de l’aléatoire et des raretés à partir d’une API Pokémon très limitée. L’API ne permettait ni tirage aléatoire direct, ni sélection précise de cartes. J’ai donc imaginé une logique interne de distribution : à chaque ouverture de booster, l’application génère 9 cartes (6 communes, 2 peu communes et 1 rare ou plus), avec une chance d’obtenir un “God Pack” composé uniquement de cartes ultra rares.

Cette contrainte m’a conduit à concevoir un système local de tirage, combinant probabilités, filtrage par rareté et récupération ciblée des cartes via leurs ID, afin de simuler une expérience réaliste pour l’utilisateur.

Le projet a été mené en deux semaines, en parallèle de l’apprentissage de React Native, de JSON Server et des bases du back-end mobile, ce qui m’a permis d’acquérir rapidement une autonomie technique complète sur la conception et le déploiement d’une application mobile connectée.

⚙️ Méthodologie et organisation

Après avoir défini les trois écrans principaux — Lobby, Collection et Profil — nous avons conçu une navigation fluide pour prioriser la logique applicative plutôt que le design. J’ai structuré le projet sur Git avec des branches dédiées à chaque fonctionnalité et une architecture modulaire claire :

/screens : pages principales gérées par la navigation stack de React Navigation,
/components : éléments réutilisables (boutons, cartes, filtres),
/services : appels API, authentification et persistance des données (api.ts, auth.ts),
db.json : base locale simulant le back-end via JSON Server.

Cette structure m’a permis d’assurer une séparation des responsabilités et un flux de données maîtrisé entre front-end et API.

Chaque utilisateur pouvait se connecter, ouvrir des boosters et gérer sa collection grâce à un système d’authentification local et un stockage persistant via AsyncStorage. Les cartes obtenues étaient enregistrées en local et filtrables par rareté ou catégorie, grâce à une logique de tri dynamique gérée côté front. L’application était fonctionnelle en mode hors ligne, les données étant synchronisées avec l’API uniquement lors des tirages, assurant ainsi une expérience fluide et continue même sans connexion.

🧠 Choix techniques et architecture

J’ai développé toute la logique de tirage en TypeScript, structurée autour de trois fonctions principales :

getRarity() : définit les probabilités de rareté selon le set sélectionné, avec un cas particulier pour les God Packs composés uniquement de cartes ultra rares.
openBooster() : orchestre la génération du booster, la sélection aléatoire des cartes et leur récupération asynchrone via l’API.
addCollection() : gère la persistance locale des cartes obtenues, en vérifiant les doublons avant l’ajout.

Les données utilisateur et de collection sont stockées via AsyncStorage, assurant une progression persistante hors ligne et une synchronisation fluide lors du retour en ligne — une logique inspirée des applications mobiles natives.

🧩 Résultat

L’application finale offrait un ensemble de fonctionnalités complètes :

Ouverture de boosters avec génération probabiliste et affichage dynamique des cartes,
Gestion de collection avec tri et filtrage local par rareté,
Ajout de favoris via stockage persistant et mise à jour instantanée de l’état global,
Espace profil centralisant les données utilisateur et les statistiques.

L’interface, volontairement sobre, reposait sur une architecture fluide et optimisée pour mobile, garantissant des interactions rapides, stables et réactives grâce à la gestion asynchrone des données et à la modularité du code React Native.

📚 Retours et apprentissages

Ce projet m’a permis d’approfondir ma compréhension des APIs REST et d’apprendre à concevoir des logiques alternatives face à leurs limitations. J’y ai renforcé mes compétences en architecture mobile, en structuration de code modulaire et typé, ainsi qu’en gestion de back-end local avec JSON Server.

Cette expérience a consolidé mon attrait pour le développement mobile natif et m’a sensibilisé à l’importance de la performance, de la fluidité et de la réactivité tactile dans la conception d’interfaces modernes.

Salut, je suis kilian votre