Gerenciador de Tarefas

Plataforma de Gerenciamento de Tarefas onde você pode fazer sua lista de tarefas do dia e ter auxilio de um cronometro para controlar o tempo de cada atividade

🪧 Vitrine.Dev	https://cursos.alura.com.br/vitrinedev/franklindrw
✨ Nome	Gerenciador de Tarefas
🏷️ Tecnologias	React, Typescript
🚀 URL	http://gerenciador-de-tarefas-chi.vercel.app
🔥 Desafio	Criar uma página para marcar lista de tarefas e controlar por um cronometro

🧭 Índice

• Sobre o Projeto
  • UseStade e Props
  • Linguagens Usadas
• Instalação
  • Requisitos
  • Instalar a aplicação Web
• Como usar
• Autor
• Licença

🔎 Sobre o Projeto

plataforma de Gerenciamento de Tarefas onde você pode fazer sua lista de tarefas do dia e ter auxilio de um cronometro para controlar o tempo de cada atividade.

Com essa aplicação consegui por em prática os conhecimentos aprendidos, onde fui capaz de aprender como criar um projeto do zero com React e Typescript e como ele funciona por debaixo dos panos.

Também criei componentes com class-component e function component, como usar SCSS e o CSS-Modules que ajuda a não ter sobreposição de classes. Sem contar a comunicação entre componentes com props e como funciona o State para renderizar o componente para sempre atualizar de forma dinamica.

UseStade e Props

Como o React não é Reativo e sim Declarativo, foi utilizado a função UseStade para atualizar de forma dinamica a lista assim que é adicionado uma nova tarefa pelo formulário, e então é feita a comunicação de dados pelos componentes usando Props.

Pelo props foi possível montar a comunicação através do componente "pai" para que os outros componentes consigam receber e enviar dados, como por exemplo o cronometro. Assim que a tarefa é selecionada é enviado o tempo e convertido para segundos pelo componente, e quando o cronometro é zerado ele retorna para lista que a tarefa está completa, e a lista atualiza o componente novamente.

Tudo isso de forma dinamica sem que o Javascript precise recarregar a página já que o React atualiza os componentes de forma individual e dinâmica.

🔨 Construido com

📥 Instalação

É possível usar a aplicação através do link: https://gerenciador-de-tarefas-chi.vercel.app

Requisitos

Para instalar essa aplicação na máquina é preciso ter instalado o Node.js

saiba mais em https://nodejs.org/en/download/

Instalar a aplicação Web

1. Clone o repositório na sua Máquina

2. Navegue até a pasta clonada

3. Abra o painel de comandos dentro da pasta e rode a instalação de dependencias do Node com npm

npm install

4. Após a instalação das dependências, rode o comando abaixo para iniciar o servidor React

npm start

▶️ Como usar

1. Para adicionar na lista de tarefas, preencha o formulário com a atividade e o tempo (no máximo 1:30:00)

2. Depois selecione a tarefa que deseja iniciar o cronometro

3. Clique em começar para iniciar a contagem

4. Assim que o tempo é zerado automáticamente a aplicação marca como concluída

5. Após a conclusão não pode selecionar a tarefa novamente, somente criando outra

🖊 Autor

_{Franklin Campos}

Feito por Franklin Campos 👋🏻
Entre em contato!

📋 Licença

Copyright 2022 © Franklin Campos
This project is MIT licensed.