Frontend Mentor - Pomodoro app solution

This is a solution to the Pomodoro app challenge on Frontend Mentor.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • Continued development
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

• Set a pomodoro timer and short & long break timers
• Customize how long each timer runs for
• See a circular progress bar that updates every minute and represents how far through their timer they are
• Customize the appearance of the app with the ability to set preferences for colors and fonts
• (bonus) app is keyboard friendly
• (bonus) the app is PWA complaint

Screenshot

Links

• Solution URL
• Live Site URL

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library
• TypeScript - Types for JS
• tailwindcss - For styles
• react-hook-form - For managing forms
• Web workers
• PWA (progressive web app support)

Continued development

I might redo all the state part with some state manger eg: zustand or joti

Useful resources

• web workers - This helped me manage my set intervals when chrome tab is not active.

Author

• Frontend Mentor - @Omar-Elmassry