English below
Este projeto foi desenvolvido com o objetivo de aprofundar os conhecimentos em state management utilizando diferentes abordagens. Para isso, foi criado um mini ecommerce que consome a Marvel API, permitindo a listagem de personagens, HQs e outros conteúdos do universo Marvel.
✅ React + TypeScript para um código mais seguro e escalável.
✅ Vite para um ambiente de desenvolvimento rápido e eficiente.
✅ React Router para navegação entre páginas de forma dinâmica e otimizada.
✅ TanStack Query + Axios para o gerenciamento e cache de requisições à API.
✅ Context API, Redux Toolkit e Zustand para explorar diferentes formas de gerenciamento de estado.
Este repositório conta com três branches, cada uma implementando um método diferente de gerenciamento de estado:
context-api
→ Implementação utilizando Context API.redux-toolkit
→ Implementação utilizando Redux Toolkit.zustand
→ Implementação utilizando Zustand.O projeto também utiliza o React Router para permitir uma experiência de navegação fluida entre as diferentes páginas do mini ecommerce.
Este projeto é ideal para quem deseja comparar e entender os prós e contras de cada solução de state management dentro do ecossistema React. 🚀
Sinta-se à vontade para explorar, contribuir e aprimorar o código! 😃
🔗 Marvel API → developer.marvel.com
Para rodar este projeto você precisará da Marvel Api key. Acesse o site oficial e tenha acesso a elas.
This project was developed to deepen knowledge in state management using different approaches. For this purpose, a mini ecommerce was created that consumes the Marvel API, allowing the listing of characters, comics, and other content from the Marvel universe.
✅ React + TypeScript for safer and more scalable code.
✅ Vite for a fast and efficient development environment.
✅ React Router for dynamic and optimized page navigation.
✅ TanStack Query + Axios for managing and caching API requests.
✅ Context API, Redux Toolkit, and Zustand to explore different state management approaches.
This repository includes three branches, each implementing a different state management method:
context-api
→ Implementation using Context API.redux-toolkit
→ Implementation using Redux Toolkit.zustand
→ Implementation using Zustand.The project also uses React Router to provide a smooth navigation experience between different pages of the mini ecommerce.
This project is perfect for those who want to compare and understand the pros and cons of each state management solution within the React ecosystem. 🚀
Feel free to explore, contribute, and improve the code! 😃
🔗 Marvel API → developer.marvel.com
To run this project, you will need a Marvel API key. Visit the official website and generate your access keys.