Interface web responsiva e intuitiva para visualização de métricas, configuração de dispositivos e acompanhamento em tempo real do PomoCube IoT
📊 Interface web responsiva e intuitiva para visualização de métricas, configuração de dispositivos e acompanhamento em tempo real do PomoCube.
O frontend do PomoCube é uma aplicação web construída com Next.js e TypeScript, projetada para ser a central de controle e visualização do ecossistema PomoCube IoT. Por meio dela, o usuário acompanha em tempo real suas sessões de estudo, analisa métricas de produtividade através de gráficos interativos e monitora o desempenho ao longo do tempo com um heatmap de atividades estilo GitHub.
- Next.js — Framework React com SSR e roteamento integrado
- TypeScript — Tipagem estática
- React — Biblioteca de interfaces de usuário
- Tailwind CSS — Estilização utilitária
- Node.js 18+
npm,yarn,pnpmoubun
git clone https://github.com/ClarkAshida/pomodoro-web
cd pomodoro-webnpm installCrie o arquivo .env.local na raiz do projeto:
NEXT_PUBLIC_API_BASE_URL=http://localhost:8080
NEXT_PUBLIC_FRONTEND_API_KEY=pomodoro-frontend-secret-key-2025npm run devO aplicativo estará disponível em: http://localhost:3000
Todas as variáveis expostas ao browser devem ser prefixadas com NEXT_PUBLIC_.
| Variável | Descrição |
|---|---|
NEXT_PUBLIC_API_BASE_URL |
URL base da API (ex: http://localhost:8080) |
NEXT_PUBLIC_FRONTEND_API_KEY |
Chave de autenticação para consumo da API |
⚠️ Reinicie o servidor de desenvolvimento sempre que alterar o arquivo.env.local.
npm run buildnpm run startParte do ecossistema PomoCube IoT 🍅