Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted about 2 years ago

Pomodoro timer using Tailwind, React, Typescript and SVG voodoo

animation, react, tailwind-css, typescript, vite
Jose Monge•340
@josemongedev
A solution to the Pomodoro app challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


Well I didn't expect this to be this challenging, I enjoyed it a lot though. I had to rewrite the timer hooks to be able to setup the different timers accordingly and reset the controls when any change happens. The SVG animation was also hard, at the end I just tailored it for tablet and desktop dimensions and scaled it down for the mobile screen size using scale class in tailwind. It's probably better to try regular CSS for animations, rather than trying to use tailwind for everything.

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Jose Monge's solution.

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License