FEC
Project Atelier (Front-End Capstone)
Group: Lexicon
Description
Front End Capstone (FEC) project requested by HackReactor, developed and designed by team Lexicon, utilizing primarily React and Express, and deployed with the help of Amazon Web Services (AWS). A new sleek retail portal created to be easily adaptable, changed, or adjusted, by any interested companies to update their own out-dated e-commerce websites.
Table of Contents
Product Overview
The product overview is the main hub of the page and the first thing that loads and catches the consumer's eyes. Like any shopping site, the use will be able to sift through different products, showcasing the description, price, images, and interactable features.
- When a product has multiple styles, there will be rows (up to 4) of the styles and their thumbnail icon. a checkmark will be overlayed on the current selected style being shown on the main image.
- The quantity selector will be disabled until a size is chosen for the current selected style, allowing you to choose how much to add to car (if purchasing).
- Stars update upon swapping products, with an available hyperlink taking you down to the review sections.
- Selected style will have the associated images as thumbnails overlaid on the left of the current main, enlarged image. There are arrows to navigate the images, as well as selecting to skip ahead, and a highlighted border for what image it currently being shown.
- Upon clicking the main image, it will bring up a larger version of the image with the thumbnail and arrow functionalities with it. Clicking the image again acts as zooming in or out depending on the current state of the layout, tracking the users mouse movement as well while zoomed in.
Related Products
The related products section has awesome features that allow the user to navigate a list of items that are related to the main product being viewed, with options to see feature comparison and also have the ability to add to an outfit list
- A star button found on the top right of a related card display helps the user make direct comparison between two products.
- When a product is related to many items which won't fit on the user's viewport, the user will have access to carousel that can be navigated using arrow buttons (which remain invisible if all related items fit on users' screen display).
- A persistent outfit carousel presents the user with an option of adding/removing products which may be bought together
Questions and Answers
The Questions & Answers part allows a user to search for a question, to add answers and questions about the product selected. This part consists of four subparts and each subpart has its own unique functionality.
- View questions
- Search for a question
- Asking a question
- Answering a question
- Questions and Answers subcomponent shows list of questions that have been asked about the given product.
- The list of questions and answers can be expanded and collapsed per user's choice. By default, two questions are displayed. The questions are sorted based on their helpfulness rating and user can load more questions by clicking "More Questions" button.
- The list will instantly be changed to search result list based on a key word that user types in search bar. The search result list is generated after third keystoke.
Ratings and Reviews
The ratings and reviews section gives the users an overview of how the product is liked by customers. The section is divided into three parts:
- Ratings: allows users to have a statistics of how the product is generally rated by previous buyers. This section is filterable by the star rating to only show reviews of those specific star types.
- Reviews: highly detailed review items which include personal opinions, review date, helpfulness votes, recommendation, etc. Users can sort the list by order of relevance, helpfulness, and newest. Users can also submit a review on the product.
- Product characteristics: this section displays how the produc performs in terms of quality, comfort, fit, etc.
Installation
- Fork and/or clone the project.
- Install dependencies required to run the project:
npm install
- Initialize Webpack (with Bundle):
npm run webpack
- Launch the local server:
npm start
Contributors
- Ai Lam - Ratings and Reviews
- Filimon Kiros - Related Products
- Jason Novacovici - Main Overview
- Miras Adilov - Questions and Answers