Atelier Maïs

Contributors

Stephanie Chen, Josh Garza, Hieu Ngo, Scott Matsuda

Built with:

About the Project

Our team built a fully functional front-end for a product page of an eCommerce site that meets the specifications and requirements outlined by project stakeholders and utilized an API provided by the client.

This project includes the following sections:

1. Overview
2. Related Products
3. Questions and Answers
4. Ratings and Reviews

(back to top)

App Features

Product Overview:

The overview section includes an image gallery with a sidebar that contains the product information, style selectors and add to cart capabilities. The image gallery will rerender when a different style is selected and the sidebar will rerender when a new product is selected.

Expanded View: The expanded view modal will open when the image within the image gallery is clicked. The expanded view also includes a zoomed view with a zoom and pan feature, where users can zoom into the image and pan with the movement of their cursor.

(back to top)

Related Products:

Users can scroll through the related products carousel to see suggested products. Each related product card contains the name, image, price, and rating for the product. Users can also add the current product to the outfit list. Their outfits will persist upon refreshing the browser.

Compare Products: A user can click on the card of a related product to compare its features with the current product. A modal popup allows a user to compare without leaving the page.

(back to top)

Questions and Answers:

Questions and answers related to the product are shown in this section. Only 2 sets of questions and answers are shown by default, but users can click expand to see additional questions and answers. Users can post their own questions and answers. They can also mark specific questions and answers as helpful. Marking as helpful will move it toward the top of the list, allowing other users to locate helpful data more easily. Users can also report questions and answers to remove them from the list. Users can search for specific question or answer with the search bar.

	Search Bar: This feature allows user to look up questions and answers based on at least 3 keywords typed. The search is not case sensitive.
	Add Questions: Clicking on "ASK A QUESTION +" button will open a modal that allows the user to fill in their question. The user must fill out the question box, their name, and a valid email address in order to press the submit button.
	Add Answer: Clicking on "ADD ANSWER" button will open a modal that allows the user to write an answer to the given question. The user must fill out the answer box, their name, and a valid email address in order to press the submit button. The user has the option to upload up to 5 photos. Uploading photos uses an outside source called Cloudinary to render the images as a url.

(back to top)

Ratings and Reviews:

Users can see how other customers have rated a given product from a scale of 1-5. A composite average of all scores is shown, as well as the breakdown by rating. Up to 2 reviews is shown by default but users can click to see more. Users can also add their own review for a given product, including their own rating. Like questions and answers, users can also mark reviews as helpful to increase visibility.

Write Reviews: A modal popup allows a user to add a review for the selected product without leaving the page.

(back to top)

Getting Started:

1. Install Dependencies: npm install

2. Make a copy of example.env and rename to .env

3. Create a .gitignore file and place in: -node_modules -client/dist -.env

4. npm run server-dev

5. npm run client-dev: -listens on PORT set in .env or 3000

6. Launch site: http://localhost:3000

(back to top)