aszurar/tododark

O projeto todo dark é um site de lista de tarefas, com a possibilidade de adicionar, remover, marcar e persistir os dados de forma simples na web. Esse projeto tem o objetivo de praticar os conceitos básicos do desenvolvimento web com React

#2 - React: https://tododark-aszurar.netlify.app

todo dark

• O projeto todo dark é um site de lista de tarefas, com a possibilidade de adicionar, remover, marcar e persistir os dados de forma simples na web.

• O propósito aqui é praticar conceitos básicos de React e seus estados, otimização com memo, uso do TypeScript e date-fns e estilização via CSS modules e Radix UI.

• A acessibilidade também 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.

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

• Acesse em: https://tododark-aszurar.netlify.app

  todo dark

  tododark.mov

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

---

Vídeo no Youtube

---

ℹ️ Sobre

• O projeto todo dark é um site de lista de tarefas, com a possibilidade de adicionar, remover, marcar como concluída e persistir as tarefas por meio do localStorage.

• É o 1º desafio do curso Ignite da trilha React Native 2022 da Rocketseat

• Para a construção da interface desse projeto foi usado React com TypeScript.

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

• A estilização é feita com CSS comum sem nenhuma lib por meio do CSS modules já que a ideia é entender o básico do React em desenvolvimento web.

• Adição de tarefa

---

⁉️ Motivo

• Esse projeto tem o objetivo de praticar os conceitos básicos do desenvolvimento web com React como:

  • Praticar o uso de TypeScript;
  • Lógica de programação com JavaScript;
  • Componentes, componentização e suas propriedades;
  • Variável Estado e manipulações de variável Estado;
  • Otimização simples como memo
  • Formatação de datas com Date FNS
  • Persistência de dados básica com localStorage;
  • Estilização básica com CSS e a aplicação de CSS modules;
  • Boas práticas de acessibilidade com axe-core;
  • Uso de elementos do Radix UI para construção de modais e tooltips com melhor acessibilidade;

• É um projeto simples, mas que trata da base de uma aplicação web com React.

• Temos funcionalidades e práticas como:

  1. Listar tarefas;
  2. Criar novas tarefas;
  3. Excluir tarefas;
  4. Persistir as tarefas por meio do localStorage;
  5. Melhoria de acessibilidade com testes e correções com axe-core e ChromeVox.
  6. Uso do Radix UI para construção de Modais e Tooltips com melhor acessibilidade
  7. Estilização com CSS modules

• Marcando tarefas

  

---

🎨 Design

• O Design do projeto foi fornecido pela Rocketseat no primeiro módulo do Ignite - React por meio do Figma.

todo dark

• Excluindo tarefas

---

🌱 Requisitos Mínimos

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

• Excluindo todas tarefas

  

---

🚀 Tecnologias Utilizadas

• O projeto foi desenvolvido utilizando as seguintes tecnologias:

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

---

🚚 Entrega e distribuição continua

https://tododark-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/tododark

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