Skip to content

Latest commit

 

History

History
196 lines (128 loc) · 9.45 KB

README.md

File metadata and controls

196 lines (128 loc) · 9.45 KB
Raw

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

Banner

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

Netlify Status Vite React Redux Zustand TailwindCSS Radix UI TypeScript JavaScript HTML5 CSS3 Yarn

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

Gif mostrando o projeto

ℹ️ 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

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

🚚 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.
Projeto publicado no Netlify

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