Focus Timer

• 

  This image shows how it works for mobile.

• 

  This picture shows what it looks like in the beginning.

Inspiration As students, we often struggle to stay focused and manage our study time efficiently. We wanted to create something that helps us focus better while also keeping us motivated. That’s why we built Focus Timer – a simple yet powerful timer with motivational quotes and daily study stats.

What it does

Focus Timer allows users to:

Set study timers to improve focus.

View random motivational quotes to stay inspired.

Track daily study statistics and analyze their focus patterns.

How we built it

We built Focus Timer using:

React and TypeScript for frontend logic.

useState and useEffect hooks to manage timer functionality.

JSON to store motivational quotes and display them randomly.

Figma to design a clean and minimalist user interface.

Challenges we ran into

Some challenges we faced included:

Fixing bugs when stopping and restarting the timer.

Understanding the cleanup function in useEffect to prevent memory leaks.

Making sure motivational quotes do not repeat frequently when displayed randomly.

Accomplishments that we're proud of

We are proud that we:

Successfully built a fully working timer with motivational quotes.

Created a clean, user-friendly design.

Learned advanced React hooks and state management.

What we learned

Through this project, we learned:

How to build timer logic efficiently using React hooks.

How to design and implement random quote features from a JSON file.

The importance of testing UI components on different devices for responsiveness.

What's next for Focus Timer

In the future, we plan to:

Add customizable timer durations.

Allow users to add their own favorite motivational quotes.

Implement productivity graphs to visualize long-term focus patterns.

Built With

• css3
• react
• typescript