Pomodoro App using Astro, Sass, Tailwind and Vanilla JS

What are you most proud of, and what would you do differently next time?

I am most proud of successfully implementing a fully functional Pomodoro app with a focus on accessibility and user experience. The integration of ARIA attributes to enhance accessibility and the use of local storage to persist user settings were significant achievements. If I were to do this project again, I would start by planning a more modular code structure to make the application easier to maintain and extend. Additionally, I would explore using a framework like react.

What challenges did you encounter, and how did you overcome them?

One of the main challenges I encountered was managing the layout and styling of the number inputs when adding the max attribute, which caused unexpected shrinking. I overcame this by setting the dialog's width to 100% and applying flex: 1; to the input's parent container, ensuring consistent sizing. Another challenge was ensuring the app's accessibility, which I addressed by incorporating ARIA attributes and seeking guidance from accessibility experts in the community.

What specific areas of your project would you like help with?

I would like help with optimizing the performance of the app, particularly in terms of reducing any potential layout shifts or flickers when loading user settings. Additionally, guidance on implementing a more robust state management solution would be beneficial, as it could improve the scalability and maintainability of the application. Lastly, any advice on further enhancing the app's accessibility features would be greatly appreciated.