A simple web application built with CSS, and React that loads Pokémon data from an external RESTful API. The modal in the project was also made from CSS.
Project: Pokédex
- Data is loaded from the Pokémon API
- Each Pokémon is rendered to the DOM as a list of buttons with moving sprites
- A custom CSS modal is used to show additional details about the Pokémon you clicked on with certain features dynamically changing based on Pokémon characteristics
- useEffect hook is used to avoid side effects while fetching JSON data
- React
- JSX
- Node
- CSS
- Kanban (Trello)
I built this project to really solidify my understanding of the basic functions, syntax and methods of React. I was traditionally taught with class components, so I wanted to try my hand at using functional components. I found that I much prefer this method and it greatly improved my productivity.
I also chose not to use any styling frameworks (like Bootstrap) to further practice my CSS skills. In the future, however, it would save a lot of time to utilize a modal dependency, as the functionality was very difficult to learn as a purely CSS created component of the project.
I really prefer to use hooks over the traditional methods of class component structure. I organized my code in a way that made sense to me at the time where most of the main functions live on the parent App.js component.
2.0.0