product-feedback-app-fe

KO | EN

gitlite — search

#hacktoberfest #react #go #golang #deep-learning #linux #docker #macos #java #awesome #cli #awesome-list #openai #ios

product-feedback-app-fe

(★ 11)

A full-stack application that allows users to create, update and delete feedback suggestions. A Frontend Mentor challenge.

product-feedback-app-fe Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Frontend Mentor - Product feedback app solution

This is a solution to the [Product feedback app challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/product-feedback-app-wbvUYqjR6). Frontend Mentor challenges help you improve your coding skills by building realistic projects.

This is a Full Stack Application, you can view the backend code here -> [Backend](https://github.com/KXLAA/product-feedback-app)

## Table of contents

- [Frontend Mentor - Product feedback app solution](#frontend-mentor---product-feedback-app-solution)
  - [Table of contents](#table-of-contents)
  - [Overview](#overview)
    - [The challenge](#the-challenge)
    - [Demo](#demo)
    - [Links](#links)
  - [My process](#my-process)
    - [Built with](#built-with)
    - [What I learned](#what-i-learned)
    - [Continued development](#continued-development)
  - [Author](#author)

## Overview

### The challenge

Users should be able to:

- [x] View the optimal layout for the app depending on their device's screen size
- [x] See hover states for all interactive elements on the page
- [x] Create, read, update, and delete product feedback requests
- [x] Receive form validations when trying to create/edit feedback requests
- [x] Sort suggestions by most/least upvotes and most/least comments
- [x] Filter suggestions by category
- [x] Add comments and replies to a product feedback request
- [x] Upvote product feedback requests

### Demo

![](https://raw.githubusercontent.com/KXLAA/product-feedback-app-fe/master/demo/project-demo.gif)

### Links

- Solution URL: [Github](https://your-solution-url.com)
- Live Site URL: [Product Feedback App](https://product-feedback-fem.herokuapp.com/)

## My process

### Built with

- [React](https://reactjs.org/) - JS library
- [Styled Components](https://styled-components.com/) - For styles
- [React Responsive](https://www.npmjs.com/package/react-responsive) - For responsive design
- [React Router](https://reactrouter.com/) - For page routing
- [React Query](https://react-query.tanstack.com/) - For data fetching, caching & state management
- [Axios](https://axios-http.com/docs/intro) - For Api calls
- [Mongo DB](https://www.mongodb.com/) & [Mongoose](https://mongoosejs.com/)
- [Node js](https://nodejs.org/en/) & [Express](https://expressjs.com/)
- [Jest](https://jestjs.io/) for Backend integration Tests
- [JWT](https://jwt.io/) for authentication

### What I learned

This was my first full-stack application as a front end developer. I have to say the full-stack world is fascinating. This project definitely took me out of my comfort zone. I learnt how to work with data and databases. I also learn how to create Api's that connected my database to my front end application. It was quite fun.

### Continued development

I plan to add a drag and drop functionality on the roadmap page, I have made a branch for that feature, it's quite a challenge but I think I would be able to implement it.

## Author

- Website - [KXLAA](https://kxlaa.com/)
- Frontend Mentor - [@KXLAA](https://www.frontendmentor.io/profile/KXLAA)
- Twitter - [@KXLAA\_](https://twitter.com/KXLAA_)

product-feedback-app-fe

product-feedback-app-fe Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

product-feedback-app-fe

product-feedback-app-fe Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README