Shoptopia is a front-end focused, fully functional e-commerce application. Our project was constructed by a team of 4 engineers following the guidelines and specifications of a strict Business Requirement Document (BRD) for each component.
| Name | Component | Github Handle |
|---|---|---|
| Dillon | Product Details | Dillon |
| Andrew | Related Items | Andrew |
| Benji | Questions And Answers | Benji |
| Tammam | Ratings And Reviews | Tammam |
- Install node and npm
- Run
npm installin terminal - Create a copy of example.env file & rename copy as
.env - Enter GitHub Token on
API_TOKENfield - Run
npm run buildto build webpack - Run
npm run devto start up the server - Go to
localhost:3000in browser
Product details section allows users to scroll through images, select a specific style, size and quantity of a product, and then add it to their cart. This module consists of four main components:
- Image Gallery
- Product Information
- Style Selector
- Add to Cart
Functionalites
* Image gallery with interactive thumbnails and an expanded view * The gallery updates based on each new style and thumbnail selection * Users can change to the next or previous image in the gallery * Users can toggle between different styles * Dynamic rendering of prices and styles * Ability to select a quantity of a style and size to add to cart * Sharing the product through social media accounts
Functionalites
- Contains a list of product cards that is dynamically rendered
- Utilizes a Carousel slider
- The left and right buttons on the carousel are displayed conditionally
- Each product card contains a 'comparison modal' button on the top right corner
- Upon click, a pop-up modal is displayed comparing the features and values of the main product and the related product
- If available, each product card displays a list of small thumbnail images (4 max) upon hover
- The left and right arrow buttons are displayed conditionally
- Upon clicking the title of the product card, the main page is updated to the target product, and a new list of related products is rendered
| Related Products List | Modal Windows |
|---|---|
 |
 |
Functionalities
- Contains a list of products cards that is unique to each user
- Also utilizes a Carousel slider
- Clicking the 'Add an Oufit' button utilizes local storage to store and render user-specific product cards
- Product cards that are added to this list persist upon page navigation, refresh, and exit.
- Users can remove a product card by clicking the 'X' button on the top right corner
| Questions and Answers List | Modal Windows |
|---|---|
 |
 |
Questions
* Utilized React’s to create a **real-time responsive Search Bar** as text is typed into field * More Questions functionality built with overflow to provide good UX with more control over visible page content * Displays metadata of each questionAnswers
* Implemented conditional rendering to limit user’s reported/helpful response to each Q&A * More Answers functionality built to conditionally render additional customer responses to provide user control of page content * Displays metadata of each answerModals & Posting Questions/Answers
* Modal Forms to Add Your Answer or Ask Your Question to API * Modal Forms dynamically respond to user input to reinforce valid vs. invalid actions
| Review Component | Modal Window | Add-Review-Modal |
|---|---|---|
 |
 |
 |