panlord / sdc-muppets-qna

The Questions and Answers parts of the backend

Project Atelier

A modern reimagining of an eCommerce products page.

Motivation and Story

Tasked by a client to recreate their products page to be more in line with modern design ideas, we took on the task and created a brand new user interface for their website.

All components in this repo have been written from scratch using React and Styled Components

Features

Product Overview

Gallery/Styles

Built by Binh Nguyen

Features

• Image gallery carousel with the ability to zoom and expand the photo
• Styles Selector dynamically lists out styles based on the item
• Size Selector dynamically fills out based on product's stock availability
• Add to cart feature
• Share to social media buttons
• Read all reviews link that will scroll to the Ratings & Reviews section upon clicking

Related Items & Your Outfit

Product Carousel	Comparison Modal

Built by Carson Liu

Features

• Related items that dynamically generated based on the item currently being viewed
• If an item is clicked on, a modal will appear with a comparison of the features of the current item and the item selected
• A 'Your Outfit' section which allows you to save the currently viewed item into a list that persists while traversing the site

Questions & Answers

Add a Question Modal	Navigating the Q&A List

Built by Gian Lazaro

Features

• The questions and answers load two at a time, every time the respective buttons are clicked on
• Search functionality to look for a specific question
• Add questions and answers through filling out a form in a custom modal

Ratings & Reviews

Built by Camden Smith

Features

• Reviews load two at a time
• Searching the reviews allows for the ability to search by keyword
• Sorting reviews by the star rating
• Sorting by Helpfulness, Newest, Relevance
• The ability to Add a new review as well as upload review photos by utilizing the Cloudinary API
• All portions are dynamically generated based on the current product being viewed

Code Styles

This project follows the Airbnb JavaScript Style Guide.

Tech Stack

Built with

• ReactJS (with hooks)
• Webpack
• NodeJS
• ExpressJS
• Axios

Styling

• Styled Components

Testing frameworks

• Jest
• React Testing Library
• Jest DOM Testing Library

Deployment

• AWS (EC2 instance)

Contributors

Binh Nguyen (Product Overview)

Carson Liu (Related Products)

Gian Lazaro (Questions & Answers)

Camden Smith (Ratings & Reviews)

Instructions for how to deploy the webpage:

Fork this repo into your local machine and do the following.

Generate your own github api key with these settings:

• read:org
• user
• read:user
• user:email
• user:follow

Create a .env file and add the following keys and values. Your .env file should end up looking something like this:

PORT="3000"
GITKEY="GITHUB_API_KEY_HERE"

-NOTE don’t include the apostrophes

After finishing your .env file and saving it, you can now npm install in the root directory.

Once that finishes you can run npm run server-dev which should start up the server and also webpack.

Navigate in your browser to localhost:(PORT_THAT_YOU_CHOSE_HERE) and you should see the webpage!

© Soulful 2022