Aplicativo Web que implementa a técnica do Pomodoro, controlando seus ciclos e informando horas trabalhadas.
| 🪧 Vitrine.Dev | |
|---|---|
| ✨ Nome | PomoApp 🍅 |
| 🏷️ Tecnologias | react, typescript, html5, css3, vscode, eslint, prettier |
| 🚀 URL | https://pomodoro-lucassmaniotto.vercel.app/ |
| 🖥 Curso | https://www.udemy.com/course/curso-de-javascript-moderno-do-basico-ao-avancado/ |
PomoApp foi desenvolvido na linguagem Typescript junto a tecnologia React para implementar uma técnica de gerenciamento de tempo conhecida como Pomodoro, amplamente utilizada como uma abordagem eficaz para aumentar a produtividade e evitar a procrastinação, no qual foi desenvolvido no curso da Udemy de Luiz Otávio Miranda, "Curso de JavaScript e TypeScript do básico ao avançado".
Para que o projeto funcione corretamente, é necessário instalar as dependências do projeto. Para isso, basta executar o comando abaixo no terminal:
npm installNo diretório do projeto, você pode executar:
npm startCom o comando acima, você irá rodar o projeto em modo de desenvolvimento que pode ser acessado em http://localhost:3000 no seu navegador.
Para o desenvolvimento foi utilizado algumas bibliotecas do npm sendo elas:
O Pomodoro é uma técnica de gerenciamento de tempo desenvolvida por Francesco Cirillo no final dos anos 1980. O método foi nomeado "Pomodoro" (tomate em italiano) porque Cirillo usou um timer de cozinha em forma de tomate para controlar seu tempo enquanto estudava. O objetivo do método Pomodoro é aumentar a produtividade, dividindo o trabalho em períodos de tempo curtos e cronometrados, chamados de "pomodoros".
A técnica Pomodoro funciona da seguinte maneira:
- Escolha uma tarefa que você deseja realizar.
- Configure um cronômetro para 25 minutos, que é a duração de um "pomodoro".
- Trabalhe intensamente na tarefa escolhida até o cronômetro tocar.
- Faça uma pausa curta de cerca de 5 minutos após cada pomodoro.
- Após completar quatro pomodoros, faça uma pausa mais longa de cerca de 15 a 30 minutos.
O ciclo de trabalho (pomodoro) de 25 minutos seguido por uma pausa curta e depois uma pausa longa é repetido ao longo do dia. A ideia é que os intervalos curtos de descanso ajudem a manter o foco e a concentração durante o período de trabalho. Além disso, o método Pomodoro promove a conscientização sobre como você usa seu tempo, ajudando a identificar quanto tempo leva para concluir diferentes tipos de tarefas.
A técnica Pomodoro é amplamente utilizada como uma abordagem eficaz para aumentar a produtividade, evitar a procrastinação e melhorar a gestão do tempo. Existem até aplicativos e ferramentas online disponíveis que podem ajudá-lo a implementar a técnica Pomodoro em sua rotina diária.
Acessando durante a primeira vez o site, o Pomodoro se encontra em Descanso e marcando 25 minutos no seu contador, informando o próximo ciclo.
Para o controle de Pomodoros, os ciclos se baseiam em botões de ação. Ao acionar o botão "Trabalhar" um som de sino toca, o contrador de tempo de trabalho começa a contar e incrementar no quadro de informações em "Horas trabalhadas", além de mudar o tema da página para cores mais vivas, mostrando um botão novo que pode ser pausado ou iniciado o contador. Também, o título da página muda para o tempo restante de trabalho, para caso utilize o app em segundo plano, possa ser controlado o tempo de trabalhou ou descanso.
Quando o contador de tempo encerra no status de "Trabalhando" um som de sino toca duas vezes informando que o descanso começou. O tema da página e o status mudam novamente, onde o usuário ganha 5 minutos de seu tempo para realizar seu descanso ou outras atividades que não estão relacionadas ao seu tempo de foco. No quadro de informações, "Horas trabalhadas" são pausadas, "Pomodoros concluídos" é incrementado e o próximo ciclo é atualizado para "Trabalho".
Após o usuário terminar 4 Pomodoros, o seu tempo de descanso se torna 15 minutos como recompensa:
O PomoApp possui uma rota '/configurations' que permite que o usuário configure os tempos de Pomodoro conforme desejar que pode ser acessada no cabeçalho da página.
Antes de mudar de rota, um alerta do Sweet Alert surge, informando que caso as configurações forem acessadas, o timer de Pomodoro será reiniciado. Sendo assim, o usuário deve confirmar nos botões se quer continuar com a ação ou não.
Acessando a rota de Configurações, o usuário pode alterar os tempos de Pomodoro nas caixas de texto, sendo necessário informá-los em segundos. Salvando as alterações, os dados são gravados no localStorage do navegador e consumidos pela rota da página inicial
