#7 - React: https://redux-zustand-app.netlify.app
OBS: Essa é a branch main, aqui simulamos uma API REST com json-server para consumir os dados de aulas direto do Zustand. Assim, para ver a versão com Redux usando async thunk para consumir dados de APIs, acesse a branch redux-with-asyncthunker. Além disso, a publicação do projeto foi feito por meio da branch develop pois nela usamos dados locais e não simulamos a API, a fim de facilitar a publicação no Netlify.
-
O projeto Redux-Zustand App simula um clone da plataforma de aulas da Rocketseat, onde é possível acessar módulos, aulas desses módulos e progredir automaticamente para a próxima aula.
-
O objetivo do projeto é entender e praticar o uso do Redux e Zustand para o gerenciamento de estado em uma aplicação React com TypeScript e como podemos consumir APIs REST com essas bibliotecas por meio de funções assíncronas com Zustand e async thunk com Redux.
-
O site foi publicado com CI/CD por meio da plataforma Netlify.
-
Acesse e teste o projeto em: https://redux-zustand-app.netlify.app
redux-zustand-app.mp4
Sobre | Motivo | Design | Requisitos | Tecnologias | CI/CD | Baixar e Executar
-
O projeto Redux-Zustand App tem o intuito de simular um clone da plataforma de aulas da Rocketseat, onde é possível acessar módulos, aulas desses módulos e progredir automaticamente para a próxima aula.
-
O objetivo desse projeto é entender e praticar o uso do Redux e Zustand para o gerenciamento de estado da aplicação em uma aplicação React com TypeScript e como podemos consumir APIs REST com essas bibliotecas.
-
A acessibilidade foi levada em consideração, com o uso da lib axe-core para testes e correções de acessibilidade assim como leitor de tela ChromeVox e o uso do Radix UI para componentes acessíveis como Modais e Tooltips.
-
Esse projeto é derivado do curso de Redux e Zustand da Rocketseat.
-
Tela inicial
- Esse projeto tem o objetivo de praticar o uso do Redux e Zustand para o gerenciamento de estado da aplicação em uma aplicação React com TypeScript e como podemos consumir APIs REST com essas bibliotecas.
- Visualização das aulas por meio do React-Player com vídeos do YouTube.
- Navegação automática para a próxima aula quando a atual terminar. - Caso seja a última aula, permanecerá nela caso termine o vídeo.
- Consumo dos dados da aula direto do Redux e Zustand.
- Gerenciamento de Estados com Zustand:
- Usar o Zustand para gerenciar estados de forma mais simples e eficiente.
- Consumir APIs REST com Zustand com funções assíncronas.
- Resgatar dados do Zustand de forma mais performática.
- Gerenciamento de Estados com Redux:
- Usar o Redux para gerenciar estados de forma escalável.
- Consumir APIs REST com Redux com Async Thunk.
- Resgatar dados do Redux de forma mais performática.
- Integração do Redux com React por meio do: React-Redux e Redux Toolkit.
- Debugar o Redux com a extensão do Redux DevTools para o navegador.
- O design do projeto foi feito com base na plataforma de aulas da Rocketseat, com um visual limpo e intuitivo.
- Não teve um design específico feito no Figma ou algo do tipo, foi feito com base no design da plataforma da Rocketseat em aula do curso.
- NodeJS
- ReactJS
- Vite
- Yarn(ou NPM)
-
O projeto foi desenvolvido utilizando as seguintes tecnologias:
https://redux-zustand-app.netlify.app
- Para a publicação da aplicação foi por meio da plataforma Netlify onde é possível publicar de forma rápida, fácil e simples projetos React que estão hospedados no GitHub, GitLab, dentre outras plataformas de repositório remoto de graça.
- Com isso, o CI/CD já é aplicado automaticamente por meio dessa plataforma definindo a branch de produção, sempre que houver uma atualização nela, será gerado uma nova versão do projeto e já publicado.
- Além disso, podemos customizar o próprio endereço do site, adicionar ferramentas dentre outras funcionalidades facilmente.
-
Clonar o projeto:
git clone https://github.com/Aszurar/redux-and-zustand
-
É necessário ter o Node.js e um gerenciador de pacotes, como o Yarn, instalados em seu sistema. Se você ainda não os tem, siga estas instruções:
-
Instalação das dependências:
-
Execute o comando abaixo dentro da pasta do projeto
yarn
-
-
Caso tudo tenha sido instalado com sucesso, basta executar na raiz do projeto:
yarn dev
Desenvolvido por 🌟 Lucas de Lima Martins de Souza.