Hello! Moi c'est Maïly,

Memory

React.js

⚠️ Projet en développement : l’interface et les visuels sont susceptibles d’évoluer d’ici la version finale.

Dans le cadre de ma formation, j’ai développé un jeu Memory en utilisant la bibliothèque ReactJS. Ce projet individuel m’a permis de découvrir les fondamentaux de React, notamment les composants, les hooks (useState) et la structuration d’un projet front-end moderne.

L’objectif : créer une version interactive du célèbre jeu de cartes Memory, où le joueur doit retrouver des paires d’images. Des fonctionnalités supplémentaires ont été ajoutées, comme un message de victoire, un bouton de relance de la partie et des animations de retournement.

#Préparation & Conception

Avant de coder, une phase de conception a été menée pour structurer l’application :

• Réalisation d’un wireframe pour identifier les différents composants React
• Réflexion sur la charte graphique (palette de couleurs, typographies)
• Sélection des visuels de cartes
• Étude de l’architecture d’un projet React (organisation des fichiers et composants)

Compétences acquises : maquettage UI, préparation graphique, structuration d’un projet React.

#Développement technique

Le développement s’est articulé autour de plusieurs éléments clés :

• Composant principal : App.jsx (logique du jeu)
• Composants secondaires (par exemple GameBoard.jsx gérant le rendu du plateau de jeu et Card.jsx pour la logique des cartes)
• Utilisation du hook useState pour gérer l’état du jeu (cartes retournées, paires trouvées, victoire)
• Animation CSS pour les effets visuels
• Ajout d’un message de victoire
• Option de redémarrage automatique via un bouton

Stack Tech : React.js, JavaScript, LocalStorage, Github, HTML & CSS

Compétences acquises : Développement de composants React, gestion d'états avec les Hooks, structuration modulaire et architecture componentielle, gestion de données en local, conception responsive, versionnage.