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
| Gallery/Styles |
|---|
 |
Built by Aaron Pan
Features
- Image gallery carousel with 2.5x zoom functionality
- Style selector that dynamically renders based on each product's available styles
- Size Selector that changes based on selected product's availability
- Add to cart functionality
- Social media sharing buttons
| Product Carousel | Comparison Modal |
|---|---|
 |
 |
Built by Clayton Chin
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
| Add a Question Modal | Navigating the Q&A List |
|---|---|
 |
 |
Built by Jasper Bucad
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
Built by David Arredondo
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
This project follows the Airbnb JavaScript Style Guide.
Built with
Styling
Testing frameworks
Deployment
- AWS (EC2 instance)
Aaron Pan (Product Overview)
Clayton Chin (Related Products)
Jasper Bucad (Questions & Answers)
David Arredondo (Ratings & Reviews)
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"
GITHUB_TOKEN="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!
© Strings 2022