Skip to content

xtrasee/pokemon-game

Repository files navigation

Pokemon Memory Game

React+Vite Application that tests users on their memory and observation skills through Pokemon decks. Players must not click on the same pokemon card twice! Enjoy.

Tech Stack

  • HTML
  • CSS
  • React JS
  • PokeAPI

Features

  • Responsive Design
  • Multiple Difficulty Levels
  • Incorporates PokeAPI
  • Loading screen

Process

I first took some time to look at other coders' submissions through The Odin Project to find inspiration on how I wanted to design the application and what components I wanted to include in my game.

After looking over a few examples, I skimmed over the PokeAPI documentation and decided to retrieve data using the fetch method.

While incorporating the API, I had to thoroughly think about what states I had too keep track of and when to update it throughout the code.

After I completed most of the game functionality, I quickly decided to add an addition pop-up component to explain in detail what the instructions of the game are.

Finally, I had to do quite a lot of trial and errors to test out and make the design responsive on mobile.

Learnings

  • Retrieving data from API using the fetch method
  • Link usage for React JS
  • UseState and UseEffect

Improvements

  • Mobile responsive design for card deck
  • More visually appealing ending Game component (You Won! and Game Over page)
  • Incorporate some type of click effect for each Card

Demo

pokemon.game.mov

About

Resources

Stars

0 stars

Watchers

1 watching

Forks

Releases

No releases published

Packages

 
 
 

Contributors