A Aplicação para te auxiliar nas suas tarefas, e aumentar a produtividade de seu trabalho! Cronômetro para técnicas Pomodoro.
A aplicação consiste em um formulário que deve ser preenchido com o nome da tarefa que irá realizar e o tempo que será destinado. O intervalo de tempo é definido de 5 em 5 minutos e nao pode ser maior que 60 minutos e nem menor que 5 minutos.
O site foi construído utilizando Vite com React para a construção das páginas. Para a criação das rotas das páginas foi utilizada a biblioteca react-router-dom, e para a estilização dos componentes foi utilizado styled-componentes, onde aprendi muito nesse módulo do ignite como criar componentes base para outros e construir estilizações condicionais de acordo com as propriedades recebidas.Também aprendi muito sobre Contexts e Reducers que foram utilizados para fornecer e manusear as informacoes necessárias para lidar com o array de ciclos do usuário. Todos os ciclos do usuário são registrados no local storage do navegador e podendo ser consultados na página de histórico, podendo visualizar o nome da tarefa, a duração, quando foi seu início e o seu status.
Funcionalidades Adicionais. Como adicionais nesse projeto que não estavam no curso eu apliquei:
- Responsividade em todos os dispositivos
- Recursos para avisar o usuário o término do Ciclo:
- Som emitido ao concluir uma tarefa
- Componente em tela na Home que informa que o ciclo foi concluído
- Título da Página alterado ao finalizar o Ciclo
Typescript
React
Vite
Styled Components
PhosphorIcons
date-fns
React Router DOM
Zod
React Hook Form
Immer
Eslint
- Instale os pacotes com
npm i
. - Execute
npm run dev
para iniciar o cliente web Vite.