Gkanawati / ignite-timer

⏱️🚀 A Aplicação para te auxiliar nas suas tarefas, e aumentar a produtividade de seu trabalho! Cronômetro para técnicas Pomodoro.

Home Page:https://ignite-timer-gk.vercel.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Capa

🚀 Projeto

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

💡 Tecnologias:

  • Typescript
  • React
  • Vite

📚 Bibliotecas:

  • Styled Components
  • PhosphorIcons
  • date-fns
  • React Router DOM
  • Zod
  • React Hook Form
  • Immer
  • Eslint

⚙️ Executar o projeto:

  • Instale os pacotes com npm i.
  • Execute npm run dev para iniciar o cliente web Vite.

💻📱 Telas

Ignite-Timer-Web1

Ignite-Timer-Web2

Ignite-Timer-Web3

Ignite-Timer-Web4

Ignite Timer - Mobile



About

⏱️🚀 A Aplicação para te auxiliar nas suas tarefas, e aumentar a produtividade de seu trabalho! Cronômetro para técnicas Pomodoro.

https://ignite-timer-gk.vercel.app


Languages

Language:TypeScript 97.6%Language:HTML 2.4%