A simple web app (SPA) that paginate and show all pokémons from PokéAPI (https://pokeapi.co/) in card format. The app is completely responsible and can used in mobile devices. This frond-end application was made to pratique react programming's, web API consuming with axios.
- The project use modern technologies such React.Js and Tailwind CSS and axios. React.Js is a front-end web framework for modularization of html elements with jsx (HTML in javascript), state managing and others features that are useful for front-end development. Tailwind CSS works with fast development and styling of html elements and react componentes. Axios was used to api consuming and asynchrony programing.
- The most difficulty problem encountered is the asynchrony programing (JavaScript promises) with pagination of the cards. This was solved using a isolate pagination component, using a external library (react-paginating), with state managing such way the app make just the needed requests to show Pokémon's information.
- The main propose is to train and pratique asynchrony programing, paginating data, react state management and make beautiful responsible user interfaces.
- HTML
- CSS
- JavaScript
- React
- Tailwind CSS
- react-paginating
- axios
- SCSS
- Search Pokémons
- Pagination with items per page mutable
- Mobile and responsive desing
- Smooth loading animation
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Completed
