Focus Timer

Inspiration

The idea for Focus Timer came from personal struggles with staying concentrated during online work and study sessions. Most existing productivity tools felt too complex or cluttered. I wanted something clean and simple — a timer that reminds me every minute of the time I’m spending. That small nudge can help a lot when you're trying to stay in the zone.

What it does

Focus Timer is a minimalistic countdown web app that: Starts a visible timer (e.g., 25 minutes). Sends browser notifications every minute to remind you how long you’ve been focusing. Includes start, pause, and reset controls. Helps users build awareness and stay productive in short focused sprints.

How we built it

Frontend Stack: HTML, CSS, and JavaScript (optionally React.js + Tailwind CSS). Used setInterval() to update the countdown in real time. Integrated the Web Notifications API to push notifications every minute. Built with a mobile-first, distraction-free layout.

Challenges we ran into

Making the Notification API work consistently across different browsers and devices. Handling permission prompts and ensuring fallback behavior if permission is denied. Syncing the timer correctly even when the tab is inactive or minimized. Designing a layout that is both clean and functionally intuitive

Accomplishments that we're proud of

Accomplishments that we're proud of A fully working countdown timer with notification logic. Simple and intuitive UI that doesn’t overwhelm the user. Minute-by-minute feedback that actually helps build focus habits. Learning how to combine timers and browser notifications in a smooth workflow.

What we learned

How to use the Web Notifications API effectively. Timer logic with JavaScript using setInterval and clearInterval. Building a responsive layout and managing simple app state. The power of building small, focused tools that solve one problem really well.

What's next for Focus Timer

Add custom timer options (e.g., user sets the duration). Add sound notifications along with visual ones. Track session history and completed focus intervals. Add dark mode toggle and keyboard shortcuts. Package it as a PWA (Progressive Web App) so users can install it.

Built With

• react