Moda 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 |
|---|---|---|
| Seguy | Product Details | seguyy |
| Ben | Related Items | beanjermin |
| Jin | Questions and Answers | yoko-8 |
| David | Ratings and Reviews | davidguy3237 |
- 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
- 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
- Clicking on a main image opens up an expanded view
- Detailed zoom in with mouse movements and zoom out of an image
- 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
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 |
|---|---|
 |
 |
View QA Dynamic Search Demo (gif)
- 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 question
- 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 answer
- 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 |
|---|---|
 |
 |
- Display all of the reviews for a product
- Sort reviews by relevance, newest, helpful
- Search for specific reviews
- Mark reviews as helpful
- Report reviews to stop them from being displayed
- Click 'More Reviews' to display additional reviews
- Display a breakdown of ratings by number of stars
- Filter reviews by star ratings
- Display a breakdown of each characteristic for a product
- Click 'Add A Review' to display a form inside a modal window to submit a review
- Upload photos along with your review