# dailyfocus Daily planning with focus, tasks and reflection — Next.js + TypeScript. - URL: https://fernando.moretes.com/open-source/dailyfocus - Markdown: https://fernando.moretes.com/open-source/dailyfocus/guide.md?lang=en - 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 is a Next.js + TypeScript productivity web app that walks you through a complete daily planning cycle: set a main focus, break it into tasks, run timed work sessions, and close the day with a short reflection. ## Why this project exists Generic productivity tools tend to accumulate features until the tool itself becomes a source of distraction. What I wanted was something different: an opinionated, minimal flow that forces me to answer three questions each day — *what is my focus today?*, *what are the concrete tasks?* and *how did the day go?* The project was born as part of the **moretes.com** ecosystem, a set of applications published under my personal domain that also serves as an engineering showcase. Each app in the ecosystem is built with a modern stack, deployed on Vercel and publicly documented on GitHub — not as a tutorial, but as a real portfolio artifact. The choice of Next.js with TypeScript and Tailwind CSS is deliberate: it is the stack I use in product projects for clients, so maintaining a personal project on it lets me validate patterns, test project structure approaches and keep a coding cadence outside the corporate context. The repository is MIT, the code is public and the deployment is always live at [dailyfocus.moretes.com](https://dailyfocus.moretes.com). ## What the app offers - **Daily planning** — set a main focus before the day starts, creating explicit intention instead of reacting to demands. - **Task management** — break the focus into discrete, trackable tasks within the same interface. - **Focus timer** — timed work sessions (Pomodoro-style) integrated into the task flow. - **End-of-day reflection** — structured closing that completes the cycle and creates a minimal record of what was accomplished. - **Distraction-free UI** — clean interface built with Tailwind CSS, no complex side menus or notifications. - **Continuous deployment on Vercel** — every push to the main branch updates the production environment automatically. ## Stack and technical decisions The foundation is **Next.js** with the App Router, meaning routes are defined by directories inside `app/`, server components are the default and client-side hydration is opt-in via `'use client'`. This keeps the initial bundle small and loading fast — relevant for an app that should open without friction early in the morning. **TypeScript** is enabled in strict mode. I do not use `any` as an escape hatch — explicit types on props, state and utilities are part of the project's quality contract. **Tailwind CSS** handles all styling: no CSS modules, no styled-components, no separate theme files. Visual consistency comes from utility classes and the central `tailwind.config`. The chosen package manager is **pnpm**, which is more disk-efficient and faster in CI than npm or yarn for typical Next.js projects. The main scripts are `pnpm dev` for local development and `pnpm build` followed by `pnpm start` to verify the production build locally before pushing. The project structure follows a modular organisation: components, hooks and utilities separated by responsibility, not by file type. This scales better than grouping everything in a flat components folder as the project grows. ## How to install and run locally 1. **Prerequisites** — Node.js 18 or higher and pnpm installed globally (`npm install -g pnpm`). There are no database dependencies or mandatory environment variables to run locally. 2. **Clone the repository** — Run `git clone https://github.com/fernandofatech/dailyfocus.git` and enter the directory with `cd dailyfocus`. 3. **Install dependencies** — Run `pnpm install`. pnpm will create the lockfile if it does not exist and install packages into the local store. 4. **Run in development mode** — Run `pnpm dev`. Next.js starts at `http://localhost:3000` with hot reload enabled. Changes to components and styles reflect immediately in the browser. 5. **Verify the production build** — Run `pnpm build` to compile and then `pnpm start` to serve the optimised build locally. Useful for checking performance and type errors before pushing. _Full sequence from zero to local server_ ```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) ``` ## How the app works — usage flow DailyFocus daily cycle across three phases: planning, execution and reflection. ### 👤 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) ### Flows - user -> focus_input: opens app - focus_input -> task_list: sets focus - task_list -> timer: starts session - timer -> task_check: session ends - task_check -> reflection: all done - nextjs -> vercel: continuous deploy - vercel -> user: serves the app > **Data persistence:** Based on the declared stack (plain Next.js, no explicit backend mentioned in the README), app state is likely maintained client-side — `localStorage` or in-memory React state. This means daily data is not synced across devices and is lost if the browser cache is cleared. For personal use on a single device, this is sufficient and keeps the architecture simple. ## Frequently asked questions ### Do I need an account or API key to use it? No. The app runs entirely in the browser without authentication. Open [dailyfocus.moretes.com](https://dailyfocus.moretes.com) and start using it. ### Can I deploy my own fork on Vercel? Yes. Fork the repository, connect it to your Vercel account and deployment happens automatically. No mandatory environment variables are documented, so the default deployment should work without additional configuration. ### Does the project accept external contributions? Yes, with caveats. The README asks that significant changes be discussed in an issue before a PR. For small fixes or documentation improvements, a direct PR is reasonable. ### What is the project roadmap? The README lists three open items: continuous improvements and refactors, expanded test coverage and documentation enhancements. No date or version is associated with these items — it is an active personal project, not a product with formal releases. ## Who this project is for DailyFocus is useful in two distinct contexts. The first is direct use: if you want a daily planning tool without sign-up, subscription or feature bloat, the app at [dailyfocus.moretes.com](https://dailyfocus.moretes.com) is available now. The second is as a technical reference: if you are learning Next.js with App Router and strict TypeScript, or want to see how to structure a real product project with Tailwind CSS and Vercel deployment, the source code is a concrete, working example. What this project **is not**: a full SaaS with a backend, cloud sync, team collaboration or calendar integrations. It solves a specific problem — structuring the workday with minimal friction and explicit intention — and does not try to be more than that. For my use, that is precisely the point. ## Links and references - [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)