Controle diário de água e cafeína, com identidade visual Neon Pop Glass.
HYDRO+ZAP ajuda a manter o consumo diário de água e cafeína equilibrado. Registre doses com um toque, acompanhe o progresso em tempo real e revise seu histórico em um calendário — tudo salvo localmente, sem servidor.
- Registro rápido — presets reais de volume (água) e cafeína (espresso, coado, energético)
- Metas configuráveis — defina seus próprios limites diários
- Desfazer / zerar — corrija registros sem deixar dado inconsistente
- Alertas visuais — aviso quando o consumo de cafeína passa do limite
- Histórico em calendário — visão mensal com status por dia
- Dark mode — troca instantânea, sem flash, respeitando a preferência do sistema
- Acessível — navegação por teclado, contraste WCAG AA, suporte a leitor de tela
| Camada | Tecnologia |
|---|---|
| Framework | Next.js (App Router) |
| Linguagem | TypeScript |
| Estilo | styled-components |
| Persistência | localStorage |
git clone https://github.com/PatricAugusto/Hydro-Caffeine.git
cd hydro-caffeine-tracker
npm install
npm run devAcesse http://localhost:3000.
npm run build
npm run startsrc/
├── app/ # rotas e layout raiz
├── components/ # componentes de UI
├── hooks/ # useTracker, useThemeMode, useLocalStorage...
├── styles/ # tema, estilos globais, tokens de cor
├── types/ # tipos compartilhados
└── utils/ # funções puras (data, calendário)
Painéis de vidro fosco (glassmorphism), brilho neon por métrica e fundo escuro com profundidade — sobre essa base, sobrevive a energia do conceito original em HQ: onomatopeias animadas (GLUG!, ZAP!) e feedback exagerado a cada registro, agora expressos como badges de luz em vez de balões de papel.
Feito para uso pessoal e estudo de arquitetura frontend.