An ecommerce ratings and reviews module that features filtering, sorting, searching, voting, and a handy customer photo carousel!
- Overview
- Features
- Built With
- Getting Started
- Contributing
- Contact
- Acknowledgements
- Related Projects
- License
This interactive ratings and reviews module is the ideal solution for displaying customer's feedback. The application has a strong focus on user interaction, allowing reviews to be filtered, sorted, and searched in a variety of different ways (see Features for more info). The component is fully responsive right out of the box, allowing for seamless integration across all media platforms. For further information on how to get started, please see the conveniently named Getting Started section below.
The component features a preloading state animation that runs until all review data has been successfully fetched from the database. This feature is to reduce snapping/popping of information when there are longer than expected query times on the page's initial load.
You can filter reviews by different star ratings - 1 star, 2 star, 3 star, 4! (and 5). When a specific star is clicked, the screen automatically scrolls to the review body section where the corresponding reviews are displayed. You can clear the filter one of four ways: clicking the 'clear' button just above the body of reviews, selecting another star to filter from the list, clicking on the original star rating to toggle off the selection, or filtering reviews by text search. Filtered reviews can also be sorted while still maintaining the filtering condition - see Review Sorting for more information.
The Customer Photo Carousel syncs its images with reviews that included a photo. The carousel makes use of React.createRef() to calculate the current container size to snap images into place. If the screen size is altered mid-transition, the component will recalculate the width and snap the next image back into place: images will always display no matter the user's screen size. If there are no customer photos associated with any reviews, the carousel is automatically hidden; if there aren't enough images to require a scrolling effect, the scroll buttons are hidden.
You can sort reviews by the following criteria: Most Relevant, Includes Customer Photos, Most Recent, and Most Helpful. Sort criteria remain persistent even through review filtering. For example, if you sorted all reviews by Most Helpful then filtered the reviews by a Text Filtering, the newly filtered reviews list would still be sorted by Most Helpful. By default, reviews are sorted using the Most Relevant method.
Each review has it's own Helpful Button. Users can upvote the reviews they find helpful by clicking on the corresponding button. When a Helpful Button is clicked (toggled on), a PUT request gets sent to the server, and the review data inside the database gets updated. If the button is toggled off, another PUT request is sent to update the database. At present, users can only toggle each review on or off: there is no downvoting option. If the page is refreshed, the new helpful total will display.
By typing a word or phrase into the search bar and pressing enter - or clicking on the search button - reviews can be filtered by that word or phrase. Only the review's comment text is searched - you can not filter by reviewer name or location. Words and phrases are not case sensitive; white space is removed from search words/phrases automatically.
Each review displays a handy tooltip that verifies the review was left by an authentic buyer. Hover over the text to display the tooltip message. There is no way to add reviews via the display module: the module's designed so that reviews are left by email requests or via a separate link.
This Reviews & Ratings module is built with the following technologies:
Node.js and npm are required in order to quickly get up and running with this project. Lukily, npm is distributed with Node.js - which means that when you download Node.js, you automatically get npm installed on your computer! You can install Node.js HERE.
MySQL is the database of choice for this project. To install and set up MySQL, please follow the instructions found HERE
- Rename the following files inside
server/database/
RENAME-ME-TO-CONFIG.js = config.js
RENAME-ME-TO-CONNECTION.js = connection.js- Inside of these files, add your
MySQLusername and password.
user: 'USERNAME-HERE',
password: 'PASSWORD-HERE',- Run the following commands from the command line inside the root folder:
npm install
npm run bundle
npm run build
Please note: The current seeding script found inside server/database/databaseSeeder.js will create a brand new database everytime the npm run build script is run, or changes are made and saved while nodemon is running. To change this, you need to modifiy the db.connectAsync() function inside server/database/index.js.
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Website - mattwigg
Professional - LinkedIn
Project Link: https://github.com/homeland-market/reviews/
- https://github.com/homeland-market/fec-main-carousel
- https://github.com/homeland-market/product-detail-carousel
- https://github.com/homeland-market/addToCartService
Distributed under the MIT License.