Hello There! This little project is about trying to build an app like pokedex using node and react!
I tried to recreate the pokedex in the web. Writing on a search bar will lead to filter the pokemons retrieved form pokeAPI. I didn't want to do 954 requests for each pokemon, so I've added buttons for pagination. Each page retrieves a limit of 3 pokemon on mobile and up to 6 on desktop. I am not a big fan of css, so I tried to push a little further and make a mobile first design based on the pokedex from kanto (my favorite haha). On the desktop, it is like a card-grid design.
To run the aplication you need to go through this steps:
- git clone repo
- at /back & /front npm i
- npm run dev at /back foulder to run the server
- npm start at /front foulder to run the app.
Structure
/
|_/controllers
|_/services
|_routes.js
|_server.js
I tried to follow the MVC model, but with only the C part. My controller consume my microservice. I've made this choice for organization purposes and to try to learn it. I've never worked with this kind of model before so I wanted to try it!
Structure
_/src
|_/calls
|_/components
|_PaginationButtons.js
|_Pokedex.js <- Main logic of the app
|_PokemonList.js
|_SearchBar.js
|_App.js
|_App.css
Since I chose react for the front, I based my app with react boilerplate. Also, I've decided to use hooks
for the development of this aplications because I wanted to keep learning the future of react.
And thats it! If you got here, thanks for reading!