Submitted over 2 years ago

Pomodoro app with Storybook, Svelte, TailwindCSS

Alexander Morse•610

@Sakeran

Preview site View code

This is a solution for...Pomodoro app

HTML
CSS
JS

4advanced

Design comparison

SolutionDesign

Solution retrospective

One of the overarching goals I’ve set for myself with these advanced-tier projects is to cultivate a single, reusable technology stack that I can apply to any project without needing to learn anything new. As fun as it is to explore new libraries and frameworks, I’ve got a bad habit of being too accepting of new ideas at times, which (in a larger project) leads to a lot of lost time in documentation and troubleshooting.

This project, I decided to add Storybook to that stack. I tend to approach front-end development from a CDD perspective anyway, so a tool to standardize that workflow made a lot of sense. Some troubleshooting issues aside, designing my components with Storybook was a lot more comfortable than my usual approach of “stuff everything into a single HTML file and call it a library”, so I’ll be using it again in my future projects. With that said, I feel like I don’t really “get” the tool just yet. It seems to want to be used in a much more holistic manner, with features like documentation and testing that I’ve so far overlooked.

As for the app itself, I set a few additional goals for the final product, such as adding support for sound effects, notifications, and keyboard shortcuts. As usual, I made accessibility a priority, although certain decisions in the design made it difficult to achieve complete parity for all users. Notably, this was the first FEM project where I felt that additional components were necessary to improve usability — the settings modal now has a tabbed interface to fit additional options, and I added an icon for a help screen.

Community feedback

Elaine•11,400
@elaineleungPosted over 2 years ago
Hey Alexander, I really love what you've done here, and I'm going to bookmark it so I can actually use it as a timer and also for reference. There's so much thought that went into this, from the design to the execution. I just got some UX comments: When I hit the "apply" button after changing a setting, the pop up closes on its own. For me I'd feel its better to have it kept open instead because I might have other things I want to change. You can also consider having a short confirm message appear/pop up whenever changes are made (e.g., "Changes applied").

Once again, great job, and looking forward to seeing more work!
Marked as helpful
0
Alexander Morse•610
@SakeranPosted over 2 years ago
Hi @elaineleung ,

Thanks for the feedback! I agree with your point on the Apply button's behavior being confusing (I'd been staring at that modal for so long that I just got used to it), so I went ahead and removed the auto-close feature. This was actually another point where I didn't necessarily agree with the given design - since none of the options are particularly destructive or irreversible, I feel like it would be a better experience to simply bind the app settings directly to the inputs, rather than requiring an application step. But the 'application-required' flow is described quite clearly in the mockup (and implementing it was a non-trivial part of the challenge), so I wasn't comfortable deviating from it.

Thanks again!
1
Elaine•11,400
@elaineleungPosted over 2 years ago
@Sakeran I think I do understand why having the application step would suffice and that it'd be OK to have auto close enabled. The timer settings all have to do with changing the styles and numbers, which the user wouldn't be able to see since the modal is covering it (unless the style involves something visible even with the modal present, like a background color), and so it would make sense to immediately close the modal after applying the setting. But you also have a system settings, and those changes can be experienced without closing the modal, and with that, there's the chance where after applying the change the user would want the change reverted without needing to open the modal again, so that's kinda the tricky part. But I think what you have now works for me, so all is well (for me at least) 🙃

By the way, really love your work and have been checking out your other challenges!
1

Please log in to post a comment

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