FocusTimerWidget

• 

  Break Time: 5 minutes

• 

  Shareable history

• 

  Focus Time: 25 minutes

Made By

Name: Drestanto Muhammad Dyasputro Student ID: 1450107 Student Email: [email protected]

Inspiration

The inspiration for FocusTimerWidget stemmed from the need to enhance productivity and maintain deep focus during work sessions. The Pomodoro Technique, which involves working in short, focused intervals followed by brief breaks, served as the foundational concept.

What it does

FocusTimerWidget is a widget that implements the Pomodoro Technique. It offers features:

• Tab Switch Detection: Monitors browser tab activity to prevent distractions; switching tabs restarts the session with an alert.
• Automatic Focus & Break Cycles: Alternates between 25-minute focus sessions and 5-minute breaks to promote sustained concentration. (in this code, we only provide 25 seconds and 5 seconds just to demo the code)
• Progress Tracking: Records each completed session with timestamps, allowing users to monitor their productivity over time.
• Shareable Progress: Generates a downloadable history of sessions that users can share.
• Dynamic UI: Changes background color based on session type (Focus: Yellow, Break: Green) to visually distinguish between work and rest periods.

How we built it

The application was developed using hackiethon project (provided): React Then, we add widget (jsx and css)

Challenges we ran into

One of the primary challenges encountered was ensuring accurate timer functionality, especially when the application was running in the background or when the browser tab was not active. Timers would sometimes experience delays or inaccuracies.

Accomplishments that we're proud of

• Successfully integrating the Pomodoro Technique into a user-friendly application that actively promotes productivity was a significant accomplishment
• The tab switch detection feature effectively minimizes distractions, and the dynamic UI enhances user engagement by providing visual cues based on session types.
• The progress tracking and shareable history features offer users valuable insights into their productivity patterns

What we learned

Throughout the development process, we gained a deeper understanding of creating widget within react app. We also learned the importance of user feedback in iterative design, leading to continuous improvements in functionality and user experience.

What's next for FocusTimerWidget

• Customizable Session Durations: Allowing users to adjust focus and break intervals to suit their individual work styles.
• Dark Mode: Implementing a dark theme to improve accessibility and provide a comfortable viewing experience in low-light environments.
• Advanced Analytics: Providing more detailed insights into productivity trends, such as session frequency and duration over time.
• Cross-Platform Synchronization: Enabling users to sync their progress across multiple devices for a seamless experience.

Built With

• javascript
• jsx
• widget