With its limitations own limitations 😅
This is an app created (Originally) with ViteJs for being able to use the incredible feature of HMR (Hot Module Replacement) that makes posible the instant refresh of the app 😱. Unfortunately I couldn't upload the app to Vercel dou to the fact that, at the moment, Chakra-UI isn't working as espected an have problems with ViteJs and Webpack 5.71 so, I have been force to migrate to Create React App 🍌.
Thi App use, as backend, the data from the well-known PokéAPI, so cheers to them for that 👏 .
Preview online live web-app on: Pokédex App 😉
I build this little web-app (and it's really small) just for fun 💪, so feel free to check it out 👀 and use it 👾 for your own businesses carnial! 😉.
Runs the app in the development mode. Open http://localhost:3000 to view it in the browser.
Run Prettier to format all de documents in the proyect.
Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications. I used Chakra to:
- Create the entire UI of the App.
A production-ready motion library for React. Utilize the power behind Framer, the best prototyping tool for teams. Proudly open source. I used Framer Motion to:
- Create transitions between avery page on the app.
- Animate the Mobile-Nav-Button every time you click on it.
Closing in on a decade of client-side routing, React Router v6 takes the best features from previous versions—and its sister project, Reach Router—in a smallest and more powerful package. I used React Router DOM to:
- Make the Navigation of the App.
Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using. I used React Icons to:
- Provide the app with a lot of icons from different libraries.
Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary. I used Prettier to:
- Give consistent format on the code of the app.
Axios is a simple promise based HTTP client for the browser and node.js. Axios provides a simple to use library in a small package with a very extensible interface. I used Axios to:
- Consume the PokéAPI API and provide the app with all the pokemons need it.