Hack Reactor front end capstone. We are approached by our client with the tasks on updating an old ecommerce front end to boost the site's sales. As a team of three, we built four main components which were the Overview, Related Products, Questions & Answers, and Ratings & Reviews. To accelarate our development time and enriche the e-commerce browsing experience, we implemented React hooks, Context, and HOC into our production.
The Overview section provides a quick insight on the current product. Showing the different styles available, current price, description, and features of the product. The Overview displays the hero image front and center. Selecting the icons will update the hero image to the selected style. Toggling the heart icon will add/remove the currently selected style of the product from the Outfit List.
Related Products widgets consist of two parts. One is the Related products which are related to the current item displayed in Overview. The user can scroll through the carousel of cards and navigate to that particular item. And, upon clicking on a star button a modal would pop up which compares the feature between the related card and the current prodcut. Once a card is clicked, it will update the Overview item and all components accordingly. The second part is the Your Outfits section, which is unique to each user. It gives the user the ability to save the current style of the product by clicking the Add to Outfit card or clicking the heart icon in Overview. The Outfit List will persist after refresh so the user maintans access to previously added items.
Questions and Answers consist of three parts. The first one is the Search bar. When user input more than 3 characters, the filter will be activated, and when user clear the input to 2 characters or less, the filter will be stopped. The second part is the Question list, the page will display two questions by default, users are able to load more questions, vote for helpfulness, and add specific questions. The third part is the Answer, for each question, the page will display two answers by default. User can load more answers, vote helpfulness and report the answers. User can also submit their own answers with photos.
The Ratings and Reviews widget show a break-down in rating and review information on the given product, all of which information is provided by users of the site. On page load the widget will request information from the api to dynamically render the correct information on the DOM. You can also interact with the widget to sort, report, vote helpful and add reviews. In adding reviews, the users can put in ratings on the product as well as each related characteristics, upload review photos and more to share. Upon submission, all entries will be validated.
To optimize user experience, our team used React to achieve dynamic-rendering. On server-side, we used Express.routers to connect to API and Axios for HTTP Requests. Styling were done in pure CSS with some icons from react-icons.
To increase performance, we used react-compression, react-lazy-load and Webpack-production for optimization. We also focused on our accesibility scores, making sure all images and buttons have alt text description. Below is a screenshot of Lighthouse result of our site after deployed onto AWS using EC2.
Performance results generated by Lighthouse
To improve our user experience, we've uesd conditional styling to allow users to toggle between light mode and dark mode.
- Install the project with npm
- Run the below commands:
npm install
npm run server-dev