Gerenciador de Tarefas
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
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
Clone o repositório na sua Máquina
Navegue até a pasta clonada
Abra o painel de comandos dentro da pasta e rode a instalação de dependencias do Node com npm
npm install
- Após a instalação das dependências, rode o comando abaixo para iniciar o servidor React
npm start
▶️ Como usar
:30::30::30::30::30::30::30::30::30::30::30::30::30::30::30::30::30::30::30::30::30::30::30::30::30:00)
Depois selecione a tarefa que deseja iniciar o cronometro
Clique em começar para iniciar a contagem
Assim que o tempo é zerado automáticamente a aplicação marca como concluída
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.