/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

Primary LanguageTypeScript

#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

Netlify Status Vite React Radix UI TypeScript JavaScript HTML5 CSS3 Yarn

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

Design

  • Excluindo tarefas

🌱 Requisitos Mínimos

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

  • Excluindo todas tarefas

🚀 Tecnologias Utilizadas

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