Pokédex consists of 3 pages:
- All Pokémons, which provides you all Pokémon sorted from the smallest ID
- My Pokémon, provides you a list of Pokémon you have catched with unique name. You can also release your Pokémon if you do not like them anymore
- Detail of each Pokémon after you click one of the Pokémon on the 'All Pokémon' page. The details include general information about them such as height, weight, types, followed by the stats, evolution, and their moves
You can have a full experience of this project here.
This project was built using React.js with React Router to make them as an SPA (Single Page Application). This project was bootstrapped with Create React App.
This section will explain more about how to run, test, and built this project in the development mode
- Clone the repo
git clone https://github.com/azkanab/pokedex.git
- Open the repo's folder on your terminal
- Install NPM Packages
npm install
- Run the app
npm start
- Open http://localhost:3000 to view it your browser.The page will reload if you make edits
Launches the test runner in the interactive watch mode by running this command on your terminal:
npm test
and you will find this
Deploy this project on the github pages by running this command on your terminal:
npm run deploy
Here are some screenshot of this project once it is built or deployed in desktop mode or mobile mode
- All Pokémon Page, you can scroll to the bottom of the page to load more
- After you click one of the Pokémon, the detail of that Pokémon will come out like these
On the picture above, at the 'About' section, you can see that there is a tooltip when you click '?' mark, contains a brief explanation of what those abilities can do
- You can also try to catch the Pokémon with a 50% possibility of success and give them a nickname
Oops! You can not have two Pokémons with a same nickname
- After you add a Pokémon or some Pokémons, you can go to 'My Pokémon' page to see your Pokédex
- You can release or set your Pokémon in your Pokédex free if you do not want them anymore