Retour aux projets
PokeBattle

PokeBattle

Formation React Fastify Socket.io MariaDB

Contexte

Dans le cadre de ma formation, une de nos intervenante (génialissime bien qu'un brin sadique) a fusionné deux modules pour la réalisation d'une application de jeu au tour par tour. De passion, j'ai alors choisis de partir sur un jeu de combat Pokémon ! 

 

Les contraintes techniques ? Utiliser la librairie React pour le développement front end et Socket.io pour la communication en temps réel entre les joueurs du jeu. L'intervenante nous a fournis une api backend propulsé par Fastify qu'il m'a fallu adapter au besoin de mon jeu.  Pour compléter, l'application devait être entièrement responsive et embarqué une gestion de thème "Light / Dark" dont l'utilisation de Tailwind et DaisyUI m'a paru pertinente pour créer une application au style moderne. 

 

Après une première phase de développement, je me suis rapidement rendu compte que certaines données commencées rapidement à se dupliquer, j'ai alors crée un package npm pour partager mes différentes interfaces entre mon repository frontend et backend. 

 

Résultat

Un échec. Il faut l'accepter, tous les projets ne peuvent pas être des réussites ! Bien que le développement de l'application avec React est une belle réussite et la compréhension des échanges dans avec socket.io acquise, j'ai pu accomplir :

  • La création de composant réutilisable
  • L'usage du pattern Atomic Design
  • Une application entièrement responsive
  • Une gestion du thème efficace

Le principal blocage fut la mise en relation du dynamisme des composants React avec la consommation des évènements émis par le serveur socket.io. Le débogage m'a couté une perte de temps colossale et a mis un frein net à la réussite du projet. A l'origine de ce blocage, c'est ma compréhension du cycle de vie des composants React et sa mauvaise gestion lors du développement. 

La création de lobby, sa gestion et l'invitation à participer à un autre joueur étaient fonctionnelle mais le jeu en lui même s'est transformé en un gros sac a bug que je n'ai pas eu le temp de corriger à temps. 

 

Malgré tout, bien que le projet n'est pas aboutis, je ne suis pas mécontent de ce que j'ai pu réaliser :

  •  M'exercer sur React
  • Créer un package npm
  • Découvrir socket.io
  • L'utilisation de Sequelize
  • Le développement d'une API Rest sur la plateforme NodeJS (réutilisé ensuite pour des projets avec Hono ou NestJS)

 

Gallerie du projet

Retour aux projets