This project is for a 3SC Web Developer Test.

myPokedex is an app that will allow you to view all the pokemons of the pokemon universe. Opening the app will display a grid of pokemon cards split into multiple pages. A fetch request is sent to the Poke API which will then respond with all the pokemon data. Pagination feature has been implemented for better user experience. The Search input will allow you to search any pokemon in the database. Save or remove pokemon to/from your Favourites just by clicking on the Heart icon on the pokemon card. Saved pokemon will save the ID of each pokemon in the local storage. View your favourite pokemons by clicking on the Favourites button. Activate the "compare mode" which will allow you to start comparing pokemon to one another. Clicking on the Compare button will add extra buttons on the pokemon card which will allow you to selecct pokemon 1 or pokemon 2 for comparing.

View Project

Fork the project or download the zip folder. With the terminal open the project directory and run the following commands:

npm install

npm start

• React
• React Hooks
• useContext/useReducer/useState (State Management)
• High Order Functions (Map, Filter)
• Fetch API
• Async/Await (Asyncronous Programming)
• CSS Animations
• CCS Pseudo Elements
• CSS Variables

Note:   I chose to use React rather than Vanilla JavaScript because of how smooth React applications are and how easy it is to insert HTML elements with JSX instead of the long process of creating elements an appending text and classes to them with plain JS. Also with this project it was important to manage state and keep things syncronized. React does a great job with that with hoooks such as useContext, useReducer and useState.

• The pagination implementation was quite tricky and I had to format the data in a way that it was easier to work with.
• Fetching all the pokemon id's and fetching once again to get the data for every pokemon id.

• Clicking on the card will show the details of that specific pokemon. Clicking on it again will revert to showing the name and type.
• Toast notifications when adding/removing pokemon to/from favourites.
• Button that can allow users to view only the classic pokemon, the new generation of pokemon or all of them together.

  View Project