Focus & Grow
A calm focus companion. Run deep-work sessions, grow your streak, and study smarter with built-in learning tools.
| Tool | What it does | |
|---|---|---|
| ⏱ | Focus Timer | 25-minute deep-work and 5-minute break sessions with a Pomodoro-style cycle. |
| 📊 | Focus Stats | A live dashboard of today's minutes, streak, and rank progress that updates with every session. |
| 🌧 | Ambient Rain | An optional rain toggle for a calmer background. |
| 🧠 | Learning Tools | Feynman Mode, ELI5, Flashcards, and Planner — a growing suite of study companions. |
| ✦ | Story Export | A minimal, share-ready card of your own focus stats — hours, streak, and rank. |
The learning tools are currently placeholders and marked Coming soon.
Requirements: Node.js >= 20 and pnpm (version pinned in package.json).
# 1. Install dependencies
pnpm install
# 2. Start the development server
pnpm devOpen http://localhost:3000 with your browser.
| Command | Description |
|---|---|
pnpm dev |
Starts the dev server with hot reload. |
pnpm build |
Creates a production build. |
pnpm start |
Serves the production build. |
.
├── app/ # App Router pages & root layout
│ ├── layout.tsx # metadata, favicon/logo, fonts, theme
│ ├── page.tsx # entry point → <SynapseApp />
│ └── globals.css # dark forest theme + animation keyframes
├── components/
│ ├── ui/ # base UI primitives
│ └── synapse/ # timer, growth visual, streaks, navigation, tools
├── hooks/ # focus-timer & ambient-rain state
├── lib/ # shared helpers
└── public/ # static assets (favicon, logo)
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router) |
| UI | React 19, Tailwind CSS 4, shadcn/ui |
| Language | TypeScript |
| Package manager | pnpm 12 |
| Hosting | Vercel |
This project deploys on Vercel. Vercel installs dependencies with a frozen pnpm install, so keep pnpm-lock.yaml in sync after changing dependencies:
pnpm install --lockfile-onlyBuilt for calm, focused work. All rights reserved.