luispellizzon / feedback-UI-json-server

Feedback UI built with React and Motion-animation library and Json-server-mock back end.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Feedback UI React app

This is a feedback app project using a Javascript library called React to build the app interface.

You can check the DEMO here: https://peppy-unicorn-894eab.netlify.app/

New Features: Json-server back-end

  • It is a NPM package created for front-end developers to create a quick back-end for prototyping and mocking taking advantage of a full (fake) REST API.

Features:

  • Write reviews and select a number from 1 to 10 to rate the service/product.
  • Real-time validation:
    • The review can`t be under 10 characters, otherwise a message will appear and the button Send will remain disabled.
  • Editing review
  • Route to go to about page after clicking the ? icon, and route to go to main page if clicked on Feedback UI title or back to home page button
  • Average Rating
  • Reviews counter

Screenshot 2022-08-03 at 13 04 29

Screenshot 2022-08-03 at 13 27 41

Screenshot 2022-08-03 at 13 29 09

Concepts:

  • Hooks (useState, useContext, useEffect)
  • Context API ( managing Global State )
  • Routes & Links
  • Components, Forms, Validation & Simple Animation using a package called Framer-motion
  • Fetch data from a json-server

To run:

git clone git@github.com:lhpellizzon/feedback-UI-json-server.git
cd feedback-UI
npm install
npm run dev (to run both front-end and json-server mock back-end)

About

Feedback UI built with React and Motion-animation library and Json-server-mock back end.


Languages

Language:JavaScript 76.8%Language:CSS 19.2%Language:HTML 4.0%