dailyfocus
Daily planning with focus, tasks and reflection — Next.js + TypeScript.
git clone https://github.com/fernandofatech/dailyfocus.gitDailyFocus 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.
What the app offers
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.gitand enter the directory withcd 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 athttp://localhost:3000with hot reload enabled. Changes to components and styles reflect immediately in the browser. - 5
Verify the production build
Run
pnpm buildto compile and thenpnpm startto serve the optimised build locally. Useful for checking performance and type errors before pushing.
# 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 · navegador
- Definir Foco · do Dia
- Criar Lista · de Tarefas
- Timer de Foco · (Pomodoro)
- Marcar Tarefas · concluídas
- Reflexão · de Fim de Dia
- Next.js · App Router
- Vercel · Edge Network
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 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 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.