Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

React and TypeScript in Action: A Pomodoro Timer

P

@evengene

Desktop design screenshot for the Pomodoro app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
4advanced
View challenge

Design comparison


SolutionDesign

Solution retrospective


  • This app was developed using React, TS and MUI. This combination allows for a fast and responsive app as well as a clean and maintainable codebase.
  • Utilized useContext for state management in the app, eliminating the need for prop drilling.
  • Paid attention to component naming and structure, as well as the use of hooks and the separation of concerns.
  • Applied linting and formatting rules to ensure a clean and consistent codebase.

Question to community:

  • How did you handle the 'Apply' button? I struggled with it a bit because of the <Dialog> component handling overflow property and hiding child component beyond it's boundaries. I would like to know how you handled it.
  • How would you handle the timer? I used setInterval because it's simple, and it works, but I'm not sure if it's the best way to handle it.

Community feedback

Craig 190

@cchivers

Posted

Awesome job and looks amazing. My only feedback is against the design but would be that you could click anywhere in the starting circle to start and stop. That was the first I did was click in the middle on the time with no changes and it was not till later that I noticed the Start button.

It would also be cool if the color of the time ring changed depending on factors, whether that be on a break, or what not.

Another thing about the responsive to your site was that if viewing on a tablet or wide screen but not much height the page kind of breaks a little and I had to find the settings button by scrolling down. I think a single page site with one function like this should have everything viewable at all times, no matter the size of the screen.

Over all it was a great looking site.

Marked as helpful

0

P

@evengene

Posted

Thank you @cchivers, I appreciate your comments, I'll double check the responsiveness in more devices and consider enlarging the button area.

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord