Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aszurar/redux-and-zustand
Projeto focado em Redux e Zustand, 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
https://github.com/aszurar/redux-and-zustand
autoanimate axe-core css html javascript radix-ui react react-redux redux redux-toolkit reduxjs tailwindcss typescript yarn zustand
Last synced: 24 days ago
JSON representation
Projeto focado em Redux e Zustand, 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
- Host: GitHub
- URL: https://github.com/aszurar/redux-and-zustand
- Owner: Aszurar
- Created: 2023-12-18T20:11:23.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-07T16:58:52.000Z (8 months ago)
- Last Synced: 2024-05-07T17:58:11.759Z (8 months ago)
- Topics: autoanimate, axe-core, css, html, javascript, radix-ui, react, react-redux, redux, redux-toolkit, reduxjs, tailwindcss, typescript, yarn, zustand
- Language: TypeScript
- Homepage: https://redux-zustand-app.netlify.app/
- Size: 585 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# #7 - React: ****
**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](https://github.com/Aszurar/redux-and-zustand/tree/redux-with-asyncthunker)**.
Além disso, a **publicação do projeto** foi feito por meio da branch **[develop](https://github.com/Aszurar/redux-and-zustand/tree/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](https://www.netlify.com/)**.
- Acesse e teste o projeto em: ****
Redux-Zustand App
https://github.com/Aszurar/redux-and-zustand/assets/64987824/9206bf82-d9bc-4c8e-a9a0-93e005027544
[](https://app.netlify.com/sites/redux-zustand-app/deploys) [](https://vitejs.dev/) [](https://react.dev/) [](https://redux.js.org/) [](https://redux.js.org/) [](https://tailwindcss.com/) [](https://www.radix-ui.com/) [](https://www.typescriptlang.org/) [](https://www.javascript.com/) [](https://developer.mozilla.org/pt-BR/docs/Web/HTML) [](https://www.w3schools.com/css/) [](https://yarnpkg.com/)
---
**[Vídeo no Youtube](https://www.youtube.com/watch?v=8NzPfT-74dM)**
---
## :information_source: 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](https://www.npmjs.com/package/@axe-core/react)** para testes e correções de acessibilidade assim como leitor de tela ChromeVox e o uso do **[Radix UI](https://www.radix-ui.com/)** para componentes acessíveis como Modais e Tooltips.
- Esse projeto é derivado do curso de Redux e Zustand da **[Rocketseat](https://www.rocketseat.com.br/)**.
- **Tela inicial**
---
## :interrobang: 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.
---
## :art: 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.
---
## :seedling: Requisitos Mínimos
1. NodeJS
2. ReactJS
3. Vite
4. Yarn(ou NPM)
---
## :rocket: Tecnologias Utilizadas
- O projeto foi desenvolvido utilizando as seguintes tecnologias:
1. **[axe-core/react](https://www.npmjs.com/package/@axe-core/react)**
2. **[JavaScript](https://developer.mozilla.org/pt1.BR/docs/Web/JavaScript)**
3. **[Lucide React](https://lucide.dev/guide/packages/lucide-react)**
4. **[Netlify](https://www.netlify.com/)**
5. **[NodeJS](https://nodejs.org/en/)**
6. **[Radix UI](https://www.radix-ui.com/)**
7. **[React](https://pt1.br.react.dev/)**
8. **[React Player](https://github.com/cookpete/react-player)**
9. **[ReduxJS](https://redux.js.org/)**
10. **[React Redux](https://react-redux.js.org/)**
11. **[Redux Toolkit](https://redux-toolkit.js.org/)**
12. **[TailwindCSS](https://tailwindcss.com/)**
13. **[TypeScript](https://www.typescriptlang.org/)**
14. **[Vite](https://vitejs.dev/)**
15. **[Yarn](https://classic.yarnpkg.com/blog/2017/05/12/introducing-yarn/)**
16. **[Zustand](https://zustand-demo.pmnd.rs/)**
---
## :truck: Entrega e distribuição continua
****
- Para a publicação da aplicação foi por meio da plataforma **[Netlify](https://www.netlify.com/)** 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.
---
## :package: Como baixar e executar o projeto
### Baixar
- Clonar o projeto:
```bash
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](https://nodejs.org/en/)
- [Instalação do Yarn](https://classic.yarnpkg.com/blog/2017/05/12/introducing-yarn/)
- Instalação das dependências:
- Execute o comando abaixo dentro da pasta do projeto
```bash
yarn
```
### Execução
- Caso tudo tenha sido instalado com sucesso, basta executar na raiz do projeto:
```bash
yarn dev
```
---
Desenvolvido por :star2: Lucas de Lima Martins de Souza.