FocusTimer is a sleek Pomodoro timer app that helps you stay productive by working in focused intervals and taking regular breaks. Track tasks, customize timers, and maintain daily momentum — all in a beautifully crafted modern UI.
🌐 Live Preview: nesters-pomodoro-omega.vercel.app
- Customizable Timers: Adjust focus, short break, and long break durations.
- Task Tracking: Add tasks to stay organized and associate them with Pomodoro cycles.
- Dark Mode Support: Automatically switch between light and dark themes.
- Statistics (Planned): Track your sessions and visualize focus trends.
- Responsive UI: Works perfectly across desktop, tablet, and mobile.
- Minimalist UX: Built with focus in mind — clean, distraction-free interface.
- Framework: Next.js 15.2.4
- Language: TypeScript
- Styling: Tailwind CSS 3.4.17, tailwindcss-animate
- Form Handling: React Hook Form, Zod, @hookform/resolvers
- UI Components: Radix UI, Lucide React, Sonner
- Animations: Framer Motion
- Carousel: Embla Carousel
- Date Picker: React Day Picker
- Authentication (Planned): Input OTP
- Theme Management: Next Themes
- Utilities: clsx, class-variance-authority, tailwind-merge
-
Clone the repository:
git clone https://github.com/codedpro/Pomodoro.git cd Pomodoro -
Install dependencies:
npm install # or yarn install -
Run the development server:
npm run dev # or yarn devOpen http://localhost:3000 to view it in the browser.
├── components/ # Reusable UI components
├── pages/ # Next.js pages
├── public/ # Static assets
├── styles/ # Global styles and Tailwind configurations
├── utils/ # Utility functions
├── types/ # TypeScript type definitions
├── package.json # Project metadata and scripts
└── tailwind.config.js # Tailwind CSS configurationnpm run dev– Start the development servernpm run build– Build for productionnpm run start– Start the production servernpm run lint– Run ESLint to analyze code quality