/checkout

A Simple Review form along with Graph of trending products created using React

Primary LanguageJavaScript

alt text

alt text

About the project

  • A Review form along with a graph of all the trending products.
  • The project was built using the best React practices and EcmaScript Standards
  • SASS was used for styling - Why SASS? Because of its convenient to create mixins, variables and other benefits it provides.
  • React Hooks was used to create the complete logic
  • Bar Chart was built using custom javascript (react) and sass instead of using a package because of its simplicity.
  • Includes basic Form Validation
  • Cypress was used for testing - Why? Because cypress gives a visual representation of the navigation and interaction which a user will possible go through. If any of the test cases fails, that shows something has gone wrong or changed.

How to run the project

  • npm install
  • npm start

How to run the test cases

  • npm run test

Tech Stack:

  • React - Js Library
  • SASS - Styling
  • Cypress - End to End Testing

What could have been improved?

  • Load More button for all comments, when there are 100's of comments.
  • Character limit in the Comment field
  • Animation on hover on the graph or even use Chart.js for better interaction
  • Animation over the rating star on hover
  • Custom Form Validation for each fields
  • Use Styled Components or CSS/SASS Modules instead of plain sass