Comments Section w/ Vue 3 + Pinia + TS + SCSS + Toasts

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

What I am proud of:

• The templates (mixins) created with SCSS, particularly the ones to style button themes and the one to create the classes for Vue.js' Transition classes. It is a cool feature but it kind of becomes a pain to write after a while.

• The use of slots to maintain scalability (ModalBase component); clean code & readability (CommentItemLayout component); and to avoid repetition (ButtonWithLoading component)

• The first clear and effective use of Grid layout, personally speaking

• Dynamic load of SVGs using Vue 3's defineAsyncComponent and Vite's SVG loader (This resource is GOLD)

• Toasts feature created from scratch, and working surprisingly well

• The "Backend" using local storage, the composable useFakeStorage, which (kind of) simulates a database and a RESTful API behavior. I'm kind of proud of using the Promises well to simulate the asynchronous actions and the setTimeout to simulate latency. That was pretty cool, even if not being the prettiest and most performant of codes.

What I'd do differently: The "Backend" again. At the same time that I'm proud of doing so, perhaps could be faster and less difficult if I just created some instance of MongoDB or whatever.

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

I had lots of challenges since I tried to achieve too much stuff, but the most painful one was to type the results from the "fake API".

My approach used the try / catch blocks to handle errors, as I always did with old plain JS and with PHP, but I didn't know how it could be a pain with TS. I kind of handled with the help of some articles like this one, but I still need some improvements.

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

First of all, please have fun playing with the layout. It was pretty fun to code and I am quite satisfied with the outcome. Then as always, any feedback is welcome.

But the most important thing(s) that I want help:

[TypeScript] Do you recommend some good resources or do you have some tips for typing error handling in catch block? And what about API responses? This would help me a lot

[Tests] I started some testing in project with vitest + vue-test-utils, but I didn't have the patience to write every test case I was thinking of, and one of the main reasons that I stopped trying is that I was spending too much time looking for references and usage examples in their documentation (I'm kind of new to automated tests).So if you may recommend any resources, cheatsheet, alternative documentation or something like that, I would greatly appreciate it