| Name | Component | Github Handle |
|---|---|---|
| Xintong Mi | Overview | XintongTheCoder |
| Tyler O'Neill | Related Products | jtoneill |
| Aliyah Indra | Questions and Answers | aliyahindra |
| Noriel Flores | Reviews | nflo78 |
This is an e-commerce project created with React, Node.js, Express.js, Amazon AWS, Jest, Webpack, and Babel. It is designed to deliver a seamless online shopping experience.
Some of the challenges encountered while building this project include setting up the Amazon AWS infrastructure and ensuring the application is responsive.
This project uses the following technologies:
To install the project, clone the repository and install the dependencies:
git clone https://github.com/fec-apricot/e-commerce.git
cd e-commerce
npm install
To run the project:
npm start
PORT=3000 TOKEN='github token'
This project was successful in creating a user-friendly e-commerce application that is easy to use and provides a great user experience. The Amazon AWS infrastructure was successfully set up and deployed. The application is also responsive.
Some improvements that could be made include adding more features such as a payment gateway, creating more tests, and improving the user experience.
- General information about the product, including product rating, name, category, price, slogan, description and features
- A list of styles. Users can toggle between styles, the selected style will be displayed in the image gallery
- Size and quantity selector, add to cart button
- Image gallery with a list of thumbnails
- Clicking on the main image will open the expanded view of the current image
- Clicking on the expanded view will toggle zoom in and zoom out of the image
- The OverviewCarousel can be used by both ImageGallery.jsx and ExpandedView.jsx. It will take the following props:
- defaultViewIndex is the index of the default view image.
- setDefaultViewIndex will set the index of the default view image.
- thumbnailViewIndexStart is the index of the first image in the thumbnail view.
- setThumbnailIndexStart will set the index of the first image in the thumbnail view.
- isExpandedView shows whether the current overview carousel is the default view or the expanded view.
- handleClick is setShowExpandedView in the default view and setShowMagnifier in the expanded view.
-
The open prop takes the openModal function which gathers the feature information to display in the comparison modal.
-
The onClose prop takes a callback function that contains setModalOpen(false). This sets the boolean which the modal uses to conditionally render.
The carousel module requires six props to be passed to it. (rpMode, dataStore, related, burn, outfitList, outfitToggle)
- The rpMode prop takes a boolean to determine which mode the carousel will render. Setting rpMode to true puts the carousel into Related Products mode. This mode renders a list of products that are related to the main product. Setting rpMode to false renders the carousel in Outfit List mode. This renders a carousel of empty cards that the user can add products to.
- The dataStore prop passes all the stored product info down to the product cards.
- The related prop is an array of product ids that are related to the main product.
- The burn prop is used to trigger rerenders after certain events.
- The outfitList prop is an array, pulled from local storage if its there, that stores the product ids that users have saved for later.
- The outfitToggle prop is a function that adds and removes products from the outfit list.
The comparison modal module requires six props to be passed to it. (relatedID, outfitButton, outfitToggle, burn, rpMode, dataStore)
- The relatedID prop is set to the id number of the product that the card will display.
- The outfitButton prop takes a boolean. Only used to set the first card in the outfit list as a button.
- The outfitToggle, burn, rpMode, and dataStore props are the same as their carousel counterparts (above).
- The Questions module doesn't require any props
- The QuestionList module requires the {questions} as a prop
- Then it maps over an array of questions.
- The QuestionListEntry module requires the {answer} as a prop
- Then it keys into to the answer object
- It make a get request to the API to get the list of answers
- It maps answers and passes a answer to the AnswerListEntry module
- The AnswerListEntry module requires the {question} as a prop
- Then it keys into to the question obj
- It make a get request to the API using the answer id to update helpfulness
- The QuestionForm module requires the {setIsOpen} as a prop passed from Questions as well as the productId and product passed from the Global Context
- It sets state for the form submissions and make a post request to update the API
- The AnswerForm module requires the {setOpenForm, question, setBurn, burn} as a prop passed from Questions as well as the product passed from the Global Context
- It sets state for the form submissions and make a post request to update the API
- The Search module requires the {setQuestions, setAllQuestions} as a prop
- It sets state and updates the list with the input from the search.
- This file contains all of the children components needed to render the reviews and ratings of a certain product.
- It makes a get request to set an initial review list, to set a total review list to be filtered on, and to get metadata of a specific product.
- This file inherits the props for the product ID, sort parameter, review list, total review list, review modal switch, and a sort switch for filtering.
- The review modal prop allows for a review submission modal to be rendered when the “ADD A REVIEW” button is clicked. The sort switch prop, which invokes the filtering in ReviewBreakdown.jsx, is changed whenever the sort parameter is changed from the drop down menu.
- This file is mapped out from ReviewList.jsx and requires a single review prop to render out the pertinent information.
- If there are any photos in the review it will also pass the url and photo modal prop to TilePhoto.jsx.
- This file allows for a modal to appear rendering a bigger version of the picture whenever a photo is clicked on in the ReviewTile.
- This file inherits the props for product ID, review list, total reviews, sort parameters, and sort switch.
- Filtering occurs whenever a breakdown bar is clicked, the sort switch is changed in ReviewList.jsx.
- This file only requires the props product ID and characteristics of the product from metadata.
- It maps out these characteristics as details for DetailBar.jsx
- This file requires a detail prop from a single characteristic of that item and displays it as a dynamic bar rating in the Product Breakdown.
- This file represents the review submission modal that appears whenever the “ADD A REVIEW” button is clicked.
- It inherits the props for the product, the review modal switch, and the characteristics from the metadata.
- It also maps out radio buttons from the characteristic props.
- This file takes in a single detail and the detail object that is needed to be sent as a GET request in WriteReview.jsx.
- It renders five buttons for a single detail with a scale being different for a specific detail.
- The ratings prop should be an object that has keys 1 through 5 representing review star ratings, and each keys value should be a number in a string, representing the number of reviews that gave a 'key' star rating. The
- The size prop is a number to adjust the size of the stars module.
- The interactive prop is a true or false value which determines which mode the stars module will render in. Pass in false will cause the stars module to render the non-interactive mode which displays the average star rating based on the ratings object. Passing in true renders the star module in an interactive mode which allows the user to click on the stars to set their rating during the review process. The interactive mode also has hover effects that highlight the stars when the cursor hovers over them.
- The cb prop should be a basic callback function that has a useState set function in it. The stars module will trigger this function and update the state whenever a user clicks on the star. The useState will be updated with a number representing the users chosen star rating for the review.