timer

TypeScript

⏱️ Progressive Timer (Temporizador Minimalista)

Banner

Um temporizador moderno, elegante e altamente personalizável construído com React Router v7 e Tailwind CSS v4. Projetado para produtividade, foco e beleza visual.

Aesthetics Tech Stack UI

✨ Funcionalidades

  • 🕒 Modos Versáteis:
    • Modo Progressivo: Cronômetro clássico para acompanhar tempo de tarefas.
    • Modo Regressivo: Temporizador para prazos específicos.
  • 🍅 Ciclo Pomodoro: Integração completa com tempos de foco e pausa configuráveis e modo de loop automático.
  • 🎨 Personalização Premium:
    • Temas: 10+ temas selecionados (Nord, Rose Pine, Cyberpunk, Drácula, etc.).
    • Tipografia: Suporte a diversas fontes modernas e decorativas com estabilidade monospaçada para evitar o "efeito sanfona".
    • Sons: Alarmes sintetizados via Web Audio API (Zen, Natureza, Retro, etc.).
  • 📊 Histórico Local: Acompanhe suas sessões passadas com persistência automática.
  • 🖥️ Modo Fullscreen: Interface imersiva para foco total.
  • 🔔 Notificações Visuais: Títulos dinâmicos e animações de pulso para alertas de tempo esgotado.

🚀 Tecnologias

  • Framework: React Router 7 (antigo Remix)
  • Estilização: Tailwind CSS v4 (configuração baseada em CSS)
  • Ícones: Lucide React
  • Áudio: Web Audio API (Sintetização programática)
  • Tipagem: TypeScript (Strict mode)

📦 Instalação e Uso

  1. Clone o repositório:

    git clone <url-do-repositorio>
    cd progressive-timer
    
  2. Instale as dependências (recomendado usar

    pnpm
    ):

    pnpm install
    
  3. Inicie o servidor de desenvolvimento:

    pnpm run dev
    

🏗️ Estrutura do Projeto

O projeto segue uma arquitetura modular e organizada por responsabilidades:

  • /app/components
    : Componentes de UI divididos por contexto (timer, modals, layout, feedback).
  • /app/hooks
    : Lógica de negócio encapsulada em hooks customizados (
    useTimer
    ,
    useAlarm
    ,
    useTheme
    , etc.).
  • /app/utils
    : Funções utilitárias para manipulação de áudio e tempo.
  • /app/constants
    : Definições de temas e configurações globais.

📄 Licença

Distribuído sob a licença MIT. Consulte LICENSE para mais detalhes.

🤝 Contribuição

Contribuições são bem-vindas. Antes de abrir uma issue ou pull request, consulte:


Desenvolvido com ❤️ para uma experiência de foco superior.