Pomodoro App using Vite, React, SCSS, and custom React Hooks.
Design comparison
Solution retrospective
This is my first time writing a project in TypeScript and SCSS. I definitely had to do some research on TypeScript for React including seeing how others might have used TypeScript with this project... I LEARNED SO MUCH!
With SCSS ... I am loving writing my CSS this way with nesting and mixins for the media queries.
One thing that bugs me is the Input buttons on the Time Settings. On Safari (in MacOS/iPhone) they show up different. I need to look into fixing this.
Any feedback/comments appreciated! It's how we learn, right? :)
Community feedback
- @JulianKoehlerPosted almost 2 years ago
Hey, great job, this project wasn't easy. But I have found 2 bugs with which I also struggled: I am able to enter negative timers and if applied the app crashed completely and I am only able to use it again if I clear my localStorage from the console. I guess an average user would not be capable of that. And the second thing is that I can change the phase while the timer is running. I have implemented a Modal asking the user if he really wants to skip this phase and then resetting the timer and clearing the Interval. Check out my solution if you like to.
Marked as helpful0@chris-nowickiPosted almost 2 years ago@JulianKoehler Thanks for the feed back Julian. Ooh I didn't even think about putting constraints on the times for negative inputs. Great idea for changing the phase! Another feature I was thinking about adding in was the ability for a user to choose how many pomodoro rounds before going to long break and having the phases automatically switch.
1@JulianKoehlerPosted almost 2 years ago@chris-nowicki Very welcome! Yes I also thought about adding an automated version that just goes through a certain cycle pattern but not sure yet how to implement it without clashing with the ability of the user to change the phases as he wants.
0
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