Skip to content
Submitted 9 months ago

React and TypeScript in Action: A Pomodoro Timer

Elina Shelest•150
@evengene
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Pomodoro app
  • HTML
  • CSS
  • JS
4advanced

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
    @cchiversPosted 9 months ago

    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
    Elina Shelest•150
    @evengenePosted 9 months ago

    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

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