Frontend Mentor - Product feedback app solution

This is a solution to the Product feedback app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Users should be able to:

✔️ View the optimal layout for the app depending on their device's screen size
✔️ See hover states for all interactive elements on the page
✔️ Create, read, update, and delete product feedback requests
✔️ Receive form validations when trying to create/edit feedback requests
✔️ Sort suggestions by most/least upvotes and most/least comments
✔️ Filter suggestions by category
✔️Add comments and replies to a product feedback request
✔️ Upvote product feedback requests
✔️ Bonus: Keep track of any changes, even after refreshing the browser (localStorage could be used for this if you're not building out a full-stack app)

My process

Semantic HTML5 markup
SCSS custom properties
SCSS mixin
Flexbox
CSS Grid
Mobile-first workflow
Vue.js - Vue.js Framework
Vuex - It serves as a centralized store for all the components in an application.
Vuetify - For style components
Inline-Svg - To load efficiently svg files
Vue-Screen - Reactive window size and media query states for VueJS.
Vuelidate - For form validations
Include-Media - Simple and elegant media queries in SCSS
PortalVue - A Portal Component for Vuejs, to render DOM outside of a component, anywhere in the document.