Inventiva Timer

Aplicação web de gerenciamento de tempo para sessões de trabalho focado. O usuário define uma tarefa e uma duração, inicia a contagem regressiva e acompanha o histórico de ciclos concluídos ou interrompidos.

Funcionalidades

• Criar ciclo — informe o nome da tarefa e a duração (5 a 60 minutos, em passos de 5)
• Contagem regressiva — exibe o tempo restante em formato MM:SS em tempo real
• Interromper ciclo — cancela o ciclo em andamento a qualquer momento
• Conclusão automática — ao zerar o tempo, o ciclo é marcado como concluído
• Histórico persistido — todos os ciclos ficam salvos no localStorage e são restaurados ao recarregar a página
• Status visual — cada ciclo exibe um indicador colorido: verde (concluído), vermelho (interrompido) ou amarelo (em andamento)
• Título dinâmico — o título da aba do navegador exibe o tempo restante durante o ciclo

Tecnologias

Tecnologia	Versão	Uso
React	18	Framework de UI
TypeScript	5	Tipagem estática
Vite	5	Build e dev server
Styled Components	6	Estilização CSS-in-JS com tema
React Router DOM	7	Navegação entre páginas
React Hook Form	7	Gerenciamento de formulários
Zod	4	Validação de schema
date-fns	4	Formatação de datas
Phosphor React	1	Ícones

Pré-requisitos

• Node.js 18+
• npm 9+

Instalação e Execução

# Instalar dependências
npm install

# Iniciar servidor de desenvolvimento
npm run dev

Acesse http://localhost:5173 no navegador.

# Build de produção
npm run build

# Pré-visualizar build de produção
npm run preview

# Verificar lint
npm run lint

Estrutura de Pastas

src/
├── contexts/
│   └── CyclesContext.tsx      # Estado global: ciclos, timer, persistência
├── reducers/
│   └── cycles/
│       ├── actions.ts         # Action types e creators
│       └── reducer.ts         # Reducer com lógica de estado
├── pages/
│   ├── Home/
│   │   ├── index.tsx          # Página principal com formulário e timer
│   │   ├── styles.ts          # Estilos da página Home
│   │   └── components/
│   │       ├── Countdown/     # Componente de contagem regressiva
│   │       └── NewCycleForm/  # Formulário de criação de ciclo
│   └── History/
│       ├── index.tsx          # Página de histórico de ciclos
│       └── styles.ts          # Estilos da página History
├── components/
│   └── Header/                # Navegação principal
├── layouts/
│   └── DefaultLayout/         # Layout base com Header e Outlet
├── styles/
│   ├── global.ts              # Reset e estilos globais
│   └── themes/
│       └── default.ts         # Tokens de cor do tema
└── @types/
    └── styled.d.ts            # Tipos TypeScript para Styled Components

Fluxo da Aplicação

Usuário preenche tarefa + duração → Clica "Começar"
    → Countdown inicia (setInterval a cada 1s)
    → Título da aba atualiza com MM:SS restante
    → Formulário fica desabilitado

Ao zerar o tempo:
    → Ciclo marcado como "Concluído" no histórico

Ao clicar "Interromper":
    → Ciclo marcado como "Interrompido" no histórico

Histórico → lista todos os ciclos (mais recentes primeiro) com:
    - Nome da tarefa
    - Duração configurada
    - Tempo decorrido desde o início (ex: "há 5 minutos")
    - Status com indicador de cor

Licença

GNU General Public License v3.0 — veja o arquivo LICENSE para detalhes.