Frontend Mentor - Product feedback app

This is a solution to the Product feedback app challenge on Frontend Mentor.

📑 Table of contents

• Overview 👁‍🗨
  • Requirements
  • Screenshots 📸
  • Links 🔗
• My process ⚙
  • Built with 🛠
  • What I learned 📚
  • Useful resources 🔍
• Author 🖋

Overview

Requirements

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)

Screenshots

Links

• Solution URL: Repo
• Live Site URL: GH-Pages

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• React - JS library

What I learned

This was a fun project to build, and the whole process was a huge learning experience, from managing state, conditional rendering, passing props, routing, working with arrays, and more.

• Note: Some of the problems in this challenge are brute force solutions and I am awere that I could have avoided some prop drilling issues with context.

Useful resources

• SPA with GH-Pages - This was a handy resource when deploying a SPA to GH-Pages since it does not support React SPA's natively. Huge props to the author; this repository helped me figure out many of my questions during the deployment process.

Author

• LinkedIn - Alkin Maystorov
• Frontend Mentor - @SirDev97
• Website - alkinmaystorov.com