#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.

Redux-Zustand App

• 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

  redux-zustand-app.mp4

Sobre |  Motivo |  Design |  Requisitos |  Tecnologias |  CI/CD |  Baixar e Executar 

---

Vídeo no Youtube

---

ℹ️ Sobre

• 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

---

⁉️ Motivo

• 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.

Funcionalidades:

1. Visualização das aulas por meio do React-Player com vídeos do YouTube.
2. 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.
3. Consumo dos dados da aula direto do Redux e Zustand.

O que foi aprendido de novo?

1. 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.

2. 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.

---

🎨 Design

• 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.

---

🌱 Requisitos Mínimos

1. NodeJS
2. ReactJS
3. Vite
4. Yarn(ou NPM)

---

🚀 Tecnologias Utilizadas

• O projeto foi desenvolvido utilizando as seguintes tecnologias:

  1. axe-core/react
  2. JavaScript
  3. Lucide React
  4. Netlify
  5. NodeJS
  6. Radix UI
  7. React
  8. React Player
  9. ReduxJS
  10. React Redux
  11. Redux Toolkit
  12. TailwindCSS
  13. TypeScript
  14. Vite
  15. Yarn
  16. Zustand

---

🚚 Entrega e distribuição continua

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.

---

📦 Como baixar e executar o projeto

Baixar

• 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 do NodeJS
  • Instalação do Yarn

• Instalação das dependências:

  • Execute o comando abaixo dentro da pasta do projeto

      yarn

Execução

• Caso tudo tenha sido instalado com sucesso, basta executar na raiz do projeto:

    yarn dev

---

Desenvolvido por 🌟 Lucas de Lima Martins de Souza.