dora821 / project_atelier

FEC Project Hack Reactor

Project Atelier

Software Team: Dennis Cao, Andy Chan, Francesco Garofalo, Dong Hyoung Kim

Project.Atelier.Overview.mov

Project Overview

This Hack Reactor front-end project is a multi-page e-commerce website retrieving all product information from an API database. Given a wireframe design, our group of four software engineers developed a front-end project reflecting the design and following a list of features requirements. We deployed the site to an AWS EC2 Instance

Tech Stack

Built with

• Javascript, CSS, HTML
• React
• React Styled Components
• Node.js
• Express
• Axios
• Babel
• Webpack
• Jest
• npm
• react-testing-library
• AWS

Description

Our application allows the user to click through products and styles to add a product to their shopping carts. Related products will populate under and be shown in a carousel, the user can add the current product to his outfit. In addition, users can see the current questions asked for the selected product as well as add their own questions & answers. At the very bottom, users can view reviews written by other customers. There is a star rating for each product. The user can add their own rating and review to the products. Overall, there is a click tracker that logs the users’ click interactions into an API.

Main components include adding an Overiew, Related Products + Outfits, Questions & Answers and Reviews.

Main Components

1. Product Overview The Product Overview module is top-most module on the Product Detail page. Product Overview displays a selected product with the following product information:

   • A gallery of product images.
   • A variety of styles to select for each product.
   • A product's slogan, description, features, and pricing.
   • Size and quantity available.

2. Related Products & Outfits 2.1 Related Products

   • Related items to the current product are shown as seperate cards.
   • Each related item card has a thumbnail photo, category, name, price, and averaged star rating
   • Additionally, each card has an action button star that pops out a modal which compares features of the current product to the selected related product.
   • At most 4 related items are shown, if more exist a carousel feature will emerge to help the user flip through.

   2.2 Outfit List

   • An "Add To Outfit" button allows users to add or delete the currently selected product/style to their outfits list.
   • A carousel feature shows only the last 3 items added to the outfit.
   • This list persists after the user visits other pages.

3. Questions & Answers

   • The Questions & Answers module displays previous entries made by others and allows asking and answering of questions for the current product selected and providing feedback.
   • The list of questions & answers is contained within a scrollable container that adds 2 more questions or 2 more answers when their respective buttons are present.
   • This module extends the ability to view and search previous entries, ask questions, answer questions through a modal popup.
   • Feedback options include marking the question/answer as helpful which is what the entries are sorted by (top -> down) and report an entry which will flag it so it's no longer shown in the lists.

4. Ratings & Reviews

   4.1 Ratings

   • Average Rating of the current product is shown in a left column with star rating, which corresponds the average rating.
   • The total recommendation percentage and percenage for each rating data is shown.
   • Characteristics bar shows how each characteristic of the product is based on each review's rating.

   4.2 Reviews

   • It shows all the review that have submitted with each rating and characteristics rating (this part does not show in the review, but adds on to the database). You cac filter the reviews based on dropdown options provided. Also, you can increment the value of "helpful" if the review is helpful and report if the review was inappropriate, then it will disappear.
   • New review can be added by clicking the button. Photos may be uplaoded along with summary, rating for the current product and charactertics, nickname, email address, and body text.

Installation

1. Fork project and clone to local repository

2. Install all packages by running the following commands in your terminal.

npm install

3. Start the server(runs Nodemon on server>index.js). In the terminal type

npm run server-dev

4. Start webpack (webpack serve --open). In the terminal type

npm run start

5. Rename the example.config.js file to config.js

6. Insert your own GitHub token into the config.js file.

7. Open the project in your web browser. http://localhost:8080

LightHouse Audit Results

Page performance goals:

• Time to First Paint: 0.8 seconds
• Time to First Meaningful Paint: 2.0 seconds
• Time to Interactive: 2.5 seconds

Future Enhancemenets

• CSS overhaul to have each component's CSS style align better
• Login/User creation - Store user data associated to a certain user
• Database integration with user data via MongoDB
• Adding security certificate to allow for ‘https’ access