# dailyfocus Planejamento diário com foco, tarefas e reflexão — Next.js + TypeScript. - URL: https://fernando.moretes.com/open-source/dailyfocus - Markdown: https://fernando.moretes.com/open-source/dailyfocus/guide.md?lang=pt - GitHub: https://github.com/fernandofatech/dailyfocus - Homepage: https://dailyfocus.moretes.com - Language: TypeScript - Topics: focus, moretes, nextjs, pomodoro, portfolio, productivity, tasks, typescript, vercel - Stars: 0 - Forks: 0 - Updated: 2026-05-16T02:26:52Z --- DailyFocus é uma aplicação web de produtividade construída com Next.js e TypeScript que guia o usuário por um ciclo completo de planejamento diário: definir um foco principal, dividir em tarefas, executar sessões de trabalho cronometradas e encerrar o dia com uma reflexão. ## Por que este projeto existe Ferramentas de produtividade genéricas tendem a acumular funcionalidades até o ponto em que a própria ferramenta vira fonte de distração. O que eu queria era algo diferente: um fluxo opinativo e mínimo que me forçasse a responder três perguntas por dia — *no que vou focar hoje?*, *quais são as tarefas concretas?* e *como foi o dia?* O projeto nasceu como parte do ecossistema **moretes.com**, um conjunto de aplicações publicadas sob meu domínio pessoal que também serve como vitrine de engenharia. Cada app do ecossistema é construído com stack moderna, implantado na Vercel e documentado publicamente no GitHub — não como tutorial, mas como artefato real de portfólio. A escolha de Next.js com TypeScript e Tailwind CSS não é acidental: é a stack que uso em projetos de produto para clientes, então manter um projeto próprio nela me permite validar padrões, testar abordagens de estrutura de projeto e manter o ritmo de escrita de código fora do contexto corporativo. O repositório é MIT, o código é público e o deploy está sempre ao vivo em [dailyfocus.moretes.com](https://dailyfocus.moretes.com). ## O que o app oferece - **Planejamento diário** — defina um foco principal antes de começar o dia, criando intenção explícita em vez de reagir a demandas. - **Gerenciamento de tarefas** — quebre o foco em tarefas discretas e rastreáveis dentro da mesma interface. - **Timer de foco** — sessões de trabalho cronometradas (estilo Pomodoro) integradas ao fluxo de tarefas. - **Reflexão de fim de dia** — encerramento estruturado que fecha o ciclo e cria um registro mínimo do que foi feito. - **UI sem distração** — interface limpa construída com Tailwind CSS, sem menus laterais complexos ou notificações. - **Deploy contínuo na Vercel** — cada push na branch principal atualiza o ambiente de produção automaticamente. ## Stack e decisões técnicas A base é **Next.js** com o App Router, o que significa que as rotas são definidas por diretórios dentro de `app/`, os componentes de servidor são o padrão e a hidratação client-side é opt-in via `'use client'`. Isso mantém o bundle inicial pequeno e o carregamento rápido, algo relevante para um app que deve abrir sem atrito logo cedo pela manhã. **TypeScript** está habilitado em modo estrito. Não uso `any` como escape hatch — tipos explícitos em props, estados e utilitários são parte do contrato de qualidade do projeto. **Tailwind CSS** cuida de todo o estilo: sem CSS modules, sem styled-components, sem arquivos de tema separados. A consistência visual vem das classes utilitárias e da configuração central do `tailwind.config`. O gerenciador de pacotes escolhido é **pnpm**, que é mais eficiente em disco e mais rápido em CI do que npm ou yarn para projetos Next.js típicos. Os scripts principais são `pnpm dev` para desenvolvimento local e `pnpm build` seguido de `pnpm start` para verificar o build de produção localmente antes de fazer push. A estrutura do projeto segue uma organização modular: componentes, hooks e utilitários separados por responsabilidade, não por tipo de arquivo. Isso escala melhor do que agrupar todos os componentes numa pasta plana quando o projeto cresce. ## Como instalar e rodar localmente 1. **Pré-requisitos** — Node.js 18 ou superior e pnpm instalado globalmente (`npm install -g pnpm`). Não há dependências de banco de dados ou variáveis de ambiente obrigatórias para rodar localmente. 2. **Clonar o repositório** — Execute `git clone https://github.com/fernandofatech/dailyfocus.git` e entre no diretório com `cd dailyfocus`. 3. **Instalar dependências** — Execute `pnpm install`. O pnpm vai criar o lockfile se não existir e instalar os pacotes no store local. 4. **Rodar em modo de desenvolvimento** — Execute `pnpm dev`. O Next.js sobe em `http://localhost:3000` com hot reload ativo. Alterações em componentes e estilos refletem imediatamente no browser. 5. **Verificar o build de produção** — Execute `pnpm build` para compilar e depois `pnpm start` para servir o build otimizado localmente. Útil para checar performance e erros de tipagem antes de fazer push. _Sequência completa do zero ao servidor local_ ```bash # 1. Clone git clone https://github.com/fernandofatech/dailyfocus.git cd dailyfocus # 2. Install dependencies (requires pnpm) pnpm install # 3. Start development server pnpm dev # → http://localhost:3000 # 4. (Optional) Production build check pnpm build && pnpm start # → http://localhost:3000 (production mode) ``` ## Como o app funciona — fluxo de uso O ciclo diário do DailyFocus em três fases: planejamento, execução e reflexão. ### 👤 Usuário - Usuário navegador (user) ### 🌅 Fase 1 — Planejamento - Definir Foco do Dia (frontend) - Criar Lista de Tarefas (frontend) ### ⏱️ Fase 2 — Execução - Timer de Foco (Pomodoro) (compute) - Marcar Tarefas concluídas (frontend) ### 🌙 Fase 3 — Reflexão - Reflexão de Fim de Dia (frontend) ### ☁️ Infraestrutura - Next.js App Router (compute) - Vercel Edge Network (edge) ### Fluxos - user -> focus_input: abre o app - focus_input -> task_list: define foco - task_list -> timer: inicia sessão - timer -> task_check: sessão termina - task_check -> reflection: todas concluídas - nextjs -> vercel: deploy contínuo - vercel -> user: serve o app > **Persistência de dados:** Com base na stack declarada (Next.js puro, sem backend explícito mencionado no README), o estado do app provavelmente é mantido no lado do cliente — `localStorage` ou estado React em memória. Isso significa que os dados do dia não são sincronizados entre dispositivos e são perdidos se o cache do browser for limpo. Para uso pessoal num único dispositivo, isso é suficiente e mantém a arquitetura simples. ## Perguntas frequentes ### Preciso de uma conta ou API key para usar? Não. O app roda completamente no browser sem autenticação. Abra [dailyfocus.moretes.com](https://dailyfocus.moretes.com) e comece a usar. ### Posso fazer deploy do meu próprio fork na Vercel? Sim. Faça fork do repositório, conecte-o à sua conta Vercel e o deploy acontece automaticamente. Não há variáveis de ambiente obrigatórias documentadas, então o deploy padrão deve funcionar sem configuração adicional. ### O projeto aceita contribuições externas? Sim, com ressalvas. O README pede que mudanças significativas sejam discutidas em uma issue antes de um PR. Para correções pequenas ou melhorias de documentação, um PR direto é razoável. ### Qual é o roadmap do projeto? O README lista três itens abertos: melhorias e refatorações contínuas, expansão da cobertura de testes e aprimoramentos de documentação. Não há data ou versão associada a esses itens — é um projeto pessoal ativo, não um produto com releases formais. ## Para quem é este projeto DailyFocus é útil em dois contextos distintos. O primeiro é o uso direto: se você quer uma ferramenta de planejamento diário sem cadastro, sem assinatura e sem excesso de funcionalidades, o app em [dailyfocus.moretes.com](https://dailyfocus.moretes.com) está disponível agora. O segundo é como referência técnica: se você está aprendendo Next.js com App Router e TypeScript em modo estrito, ou quer ver como estruturar um projeto de produto real com Tailwind CSS e deploy na Vercel, o código-fonte é um exemplo concreto e funcional. O que este projeto **não é**: um SaaS completo com backend, sincronização em nuvem, colaboração em equipe ou integrações com calendário. Ele resolve um problema específico — estruturar o dia de trabalho com intenção mínima de fricção — e não tenta ser mais do que isso. Para o meu uso, isso é exatamente o ponto. ## Links e referências - [DailyFocus — repositório GitHub](https://github.com/fernandofatech/dailyfocus) - [DailyFocus — app ao vivo (dailyfocus.moretes.com)](https://dailyfocus.moretes.com) - [Next.js — documentação oficial](https://nextjs.org/docs) - [Tailwind CSS — documentação oficial](https://tailwindcss.com/docs) - [pnpm — documentação oficial](https://pnpm.io) - [Vercel — plataforma de deploy](https://vercel.com) ## Links - [GitHub repository](https://github.com/fernandofatech/dailyfocus) - [Homepage](https://dailyfocus.moretes.com)