O Ignite Timer é uma aplicação desenvolvida com React, utilizando Styled Components para estilização e gerenciamento de tema. O projeto implementa funcionalidades de temporizador, histórico de ciclos e gerenciamento de estado com useReducer e context API. A persistência de dados é realizada com localStorage, garantindo que as informações sejam mantidas entre sessões.
- React: Biblioteca JavaScript para construção de interfaces de usuário.
- Styled Components: Estilização de componentes com suporte a temas.
- React Hook Form: Gerenciamento de formulários de forma simples e eficiente.
- Zod: Validação e tipagem de dados.
- Immer: Manipulação imutável de estados.
- Phosphor Icons: Conjunto de ícones para aplicações web.
- Date-fns: Manipulação de datas.
- React Router: Gerenciamento de rotas.
-
Temporizador
- Criação de ciclos de tarefas com tempo pré-definido.
- Pausa e interrupção do ciclo.
- Contagem regressiva com exibição dinâmica no título da aba do navegador.
-
Histórico
- Registro de tarefas realizadas, interrompidas ou em andamento.
- Cálculo de tempo decorrido desde o início de cada ciclo.
-
Gerenciamento de Estado
- Uso de
useReducerecontext APIpara armazenar ciclos e estado ativo. - Persistência de dados no
localStorage.
- Uso de
-
Validação de Dados
- Validação de campos do formulário com regras pré-definidas.
- Node.js versão 16 ou superior
- Gerenciador de pacotes (npm ou yarn)
git clone https://github.com/WigorCosta21/ignite-timer.git
cd ignite-timernpm install
# ou
yarn installnpm run dev
# ou
yarn devA aplicação estará disponível em: http://localhost:5173
O arquivo styles/themes/default.ts contém as configurações de cores da aplicação. É possível adicionar novos temas ou alterar o tema existente.