#4 - React: https://todo-aszurar.netlify.app//
-
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-.-Ignite-React.mov
Sobre | Motivo | Design | Requisitos | Tecnologias | CI/CD | Baixar e Executar
-
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
- 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.
- Troca de temas com tailwindcss respeitando o tema escolho no sistema operacional do usuário;
- Marcação de todas as tarefas como concluídas;
- Desmarcação de todas as tarefas como concluídas;
- Remoção de todas as tarefas concluídas;
- Construção do protótipo completo no Figma com as variações entre tema escuro e claro.
- Animação na listagem de tarefas com AutoAnimate;
- Componentes acessíveis com Radix UI e integração com tailwindcss;
- 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;
- Entender e praticar construção de interfaces com tailwindcss aplicando responsividade, breakpoints e variações de componentes com tailwindcss-variants e tailwindcss;
- Acessibilidade com axe-core e ChromeVox;
- Publicação com CI/CD por meio da plataforma Netlify.
- 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;
- Implementação da troca de temas com tailwindcss respeitando o tema escolho no sistema operacional do usuário;
- Construção do protótipo completo no Figma com as variações entre tema escuro e claro.
-
Campos preenchidos
- 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.
Marcação de todas tarefas
- NodeJS
- React
- Vite
- Yarn(ou NPM)
Remoção de todas tarefas
-
O projeto foi desenvolvido utilizando as seguintes tecnologias:
Responsividade
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.
-
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 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.