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.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

The challenge

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

Screenshot

Links

• Solution URL: https://www.frontendmentor.io/solutions/responsive-mobilefirst-svelte-web-app-J1c4lMY-_
• Live Site URL: https://fem-product-feedback-app.vercel.app/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• Svelte - Front end Compiler

What I learned

This was my first attempt at using Svelte. Having previously used React I was familiar with how to use frameworks, which allowed me to pick up its ideas relatively quickly. I still have a lot to learn, and am sure I made a lot of mistakes, but I'm happy with my first Svelte project.

Continued development

• Semantic HTML
• Accessibility
• BEM
• Svelte

Useful resources

• Svelte Tutorial - The Svelte website has a fantastic tutorial which runs through its concepts.
• Font-size clamp() Generator - As the name implies, a web app which generates responsive font sizes.

Author

• Website - Jeuri Morel
• Frontend Mentor - @JeuriMorel
• Twitter - @codeToPerdition