https://github.com/jgcarrillo/react-redux-tailwindcss
PokeApi now with React, Redux and Tailwind CSS
https://github.com/jgcarrillo/react-redux-tailwindcss
javascript netly reactjs redux tailwindcss
Last synced: about 2 months ago
JSON representation
PokeApi now with React, Redux and Tailwind CSS
- Host: GitHub
- URL: https://github.com/jgcarrillo/react-redux-tailwindcss
- Owner: jgcarrillo
- License: gpl-3.0
- Created: 2022-08-11T06:55:08.000Z (almost 4 years ago)
- Default Branch: develop
- Last Pushed: 2022-08-13T16:38:13.000Z (almost 4 years ago)
- Last Synced: 2025-03-23T18:15:47.399Z (about 1 year ago)
- Topics: javascript, netly, reactjs, redux, tailwindcss
- Language: JavaScript
- Homepage: https://react-redux-tailwindcss-poke.netlify.app/
- Size: 313 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React - Redux - TailwindCSS
This is a **dummy application** to improve my React and Redux skills. I'm sure it has several errors and it needs to be improved but for me it was worth it because I learned a lot doing it.
### 🚩 Main goal
The aim was to create an app that used _Redux_ as a state manager for share data between components such as the number of Pokémons added. I have created **two reducers**, one for the Pokémons and other for the cart.
Once the Pokémon list is fetched from the [API](https://pokeapi.co/) the data is displayed in a table. Then, you can add Pokémons (without repetition) inside the cart.
In the cart view, you can see the details of a specific Pokémons or you can remove it from the cart.
The Home view will show the image of Pokémons added to the cart or a message if the cart is empty.
### 🚀 Improvements
This is an on-the-fly list of all the cool things to improve on the app.
- Add a spinner for the Pokémon fetch data.
- Improve the add button. When you add a new Pokémon to the cart, the add button will be disabled.
- Add a spinner for the Pokémon details.
### 💣 About Redux devtools
To install Redux DevTools as a NPM execute: `npm install --save-dev redux-devtools-extension` and move inside **dependencies**.
### 💛 Contact
If you have some doubts or need to ask something about the project, feel free to reach me here:
- Twitter: [https://twitter.com/jgcarrillo](https://twitter.com/jgcarrillo_)
- LinkedIn: [https://es.linkedin.com/in/jgcarrilloweb](https://es.linkedin.com/in/jgcarrilloweb)
- Website: [https://jgcarrillo.com/](https://jgcarrillo.com/)