This project shows a list of pokemon, with an individual card for each one, with relevant information, such as name, types and an image. The pokemon information is obtained from an array of data that we include in the state of the App component.
Another functionally is that if you click on the card it will appear on the favorite section.
This is what you have to do:
- Download or clone the project repository.
- Install dependencies with
$ npm install
. - Run the project with
$ npm start
.
src
├── components
│ ├── App.js
│ ├── PokeList.js --> (render the card list)
│ └── Pokemon.js --> (renders the card of each pokemon)
├── data
│ └── data.json
├── images
├── styleSheets
│ ├── App.scss
│ ├── index.scss
│ ├── PokeList.scss
│ └── Pokemon.scss
└── index.js
I used React to make this SPA, and here's is the final result.