Pomodoro app with Storybook, Svelte, TailwindCSS

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.