All solutions

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

This was a great challenge to get myself familiar with Nuxt 3 and Trpc. It was quite a bit of fun and I've got to say that Trpc is amazing when it comes to end-to-end safety

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

Finding the proper way to compose Nuxt's useAsyncData into custom composables for the sake of being concise and hide the verbosity of useAsyncData was tricky and I ended up just using useAsyncData as is.

Styling the app was actually the major challenge I faced when working on this app and to be fair I'm still working on it because it's still not pretty enough. I had to sprinkle some javascript but I wish I could stick to CSS.

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

Nuxt can catch http responses and I wanted to rely on that especially when toggling between boards and only trigger a fetch when some change occurred. I didn't successfully find a way to make this happen and I guess this is more of a skill issue. I would like to get some insight on how to leverage Nuxt to make this happen and avoid extraneous http requests

Also, I really wanted to make only the boards area scrollable and everything else would just fit within the screen. I couldn't quite do that and it's quite frustrating. This caused the end result not to be as nice as it would've been because there's some excess scrollbars. Some insight on how to make this happen would be very appreciated

First solution long overdue on frontend mentor. I like this platform a lot and I evolved in the shadows for a year without submitting something for the community to see and respond. Better late than never.

I built is as a full stack app (without auth however). Feel free to play with it and generate your own invoice.

Essentially, I used Vue JS for the frontend and I'm still learning the framework. What I found difficult was composability especially using the Options API. I've been on the React Wagon for a while and hooks are such an integral part of my workflow but it was quite difficult to achieve the same result using the Options API with Vue. I know that the composition API is meant to remediate to this shortcomings which I will be using going forward. Still, I would appreciate any feedback around how to use Vue JS in a more composable manner.

I would like feedback on is the backend especially with form validation. Now, I used Next JS API routes for my endpoints just because I'm used to it and it can also be used as a backend albeit a bit overkill I agree. I used Yup to validate the user inputs on the frontend with Vee-Validate and I used those same values bundled in the request body as is. My question is, do I still need to sanitize those inputs on the backend as well although I used Yup to do that very same thing in the frontend? If so, how exactly? Because most resource I found would end up using Zod or Yup even on the backend?

Of course, any other feedback is gladly appreciated!!