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 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
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
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
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
This project follows the Airbnb JavaScript Style Guide.
Built with
Styling
Testing frameworks
Deployment
- AWS (EC2 instance)
Binh Nguyen (Product Overview)
Carson Liu (Related Products)
Gian Lazaro (Questions & Answers)
Camden Smith (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"
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