#4 - React: https://todo-aszurar.netlify.app//

to.do

• O projeto to.do é um projeto focado na aprendizagem e prática do uso do React em conjunto com Tailwind CSS para o desenvolvimento web. Para isso, criamos um aplicação de lista de tarefas.

• O propósito aqui é praticar o conceito da Context API em conjunto do useReducer do React para compartilhamento de dados e métodos, além do uso de TailwindCSS e Radix UI para estilização.

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

• O site foi publicado com CI/CD por meio da plataforma Netlify.

• Acesse e teste o projeto em: https://todo-aszurar.netlify.app

  to.do

  to.do-.-Ignite-React.mov

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

---

Vídeo no Youtube

---

ℹ️ Sobre

• O projeto to.do é uma lista de tarefas simples, mas que foi abordado conceitos importantes para o desenvolvimento de interfaces com tailwindcss e React.

• Praticamos conceitos básicos como componentização, composição, responsividade, acessibilidade, CI/CD, entre outros assim como nos projetos anteriores como o tododark.

• Além disso, abordarmos o uso do useReducer e sua aplicação em conjunto com o Context API do React para o gerenciamento de estado da aplicação e separando a lógica em actions e reducers.

• Usamos bibliotecas que auxiliam na estilização com tailwindcss como tailwind-variants para criarmos variações dos componentes.

• Esse projeto foi reformulado e refeito com tecnologias atuais a partir de um projeto de desafio da trilha de 2021 de React da Rocketseat. Assim, temos algumas adições e incrementos como a criação do tema escuro e a possibilidade de trocar entre eles, a construção do design do projeto no Figma, dentre outros que serão abordados a seguir.

• Usamos React com TypeScript como principais tecnologias.

• A animação da listagem é feita com a lib AutoAnimate.

  Tela inicial

---

⁉️ Motivo

• Esse projeto tem o objetivo ensinar e praticar o uso do React em conjunto tailwindcss assim como outras ferramentas que podem auxiliar no desenvolvimento com essa tecnologia.

Funcionalidades novas em relação ao projeto original:

1. Troca de temas com tailwindcss respeitando o tema escolho no sistema operacional do usuário;
2. Marcação de todas as tarefas como concluídas;
3. Desmarcação de todas as tarefas como concluídas;
4. Remoção de todas as tarefas concluídas;
5. Construção do protótipo completo no Figma com as variações entre tema escuro e claro.
6. Animação na listagem de tarefas com AutoAnimate;
7. Componentes acessíveis com Radix UI e integração com tailwindcss;
8. Uso do useReducer e Context API do React para o gerenciamento de estado da aplicação em conjunto com a divisão da lógica de actions e reducers para o gerenciamento de estado;
9. Entender e praticar construção de interfaces com tailwindcss aplicando responsividade, breakpoints e variações de componentes com tailwindcss-variants e tailwindcss;
10. Acessibilidade com axe-core e ChromeVox;
11. Publicação com CI/CD por meio da plataforma Netlify.

O que foi aprendido de novo?

1. Uso do useReducer e Context API do React para o gerenciamento de estado da aplicação em conjunto com a divisão da lógica de actions e reducers para o gerenciamento de estado;
2. Implementação da troca de temas com tailwindcss respeitando o tema escolho no sistema operacional do usuário;
3. Construção do protótipo completo no Figma com as variações entre tema escuro e claro.

• Campos preenchidos

  _ _

---

🎨 Design

• Apesar de ser um desafio da Rockeseat, o Design no Figma não foi cedido aos alunos.
• Assim, recriei no Figma o design do projeto com base no projeto original e com algumas adições e incrementos como a criação do tema escuro e a possibilidade de trocar entre eles.

to.do

Marcação de todas tarefas

---

🌱 Requisitos Mínimos

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

Remoção de todas tarefas

---

🚀 Tecnologias Utilizadas

• O projeto foi desenvolvido utilizando as seguintes tecnologias:

  1. axe-core/react
  2. AutoAnimate
  3. autoprefixer
  4. Date FNS
  5. JavaScript
  6. Feather Icons
  7. Phosphor Icons
  8. Netlify
  9. NodeJS
  10. Radix UI
  11. React
  12. Sentry
  13. TailwindCSS
  14. TailwindCSS Variants
  15. TypeScript
  16. Vite
  17. Yarn

Responsividade

---

🚚 Entrega e distribuição continua

https://todo-aszurar.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/to.do

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