The app emulates an e-commerce site with 4 sub-components:
- Image Gallery with expand view mode, arrow buttons, responsive thumbnails.
- Cart icon will open a pop-up window to display all the products has been added.
- Star rating component and link to review section.
- Product category, name, overview and features.
- Product price with discount display feature if current product is on sale.
- Style selector allow user to select between different style, and always will have a style been selected.
- Size selector allow user to select between different size.
- Quantity selector allow user to select a quantity up to 15, defualt to 1 once size has been selected.
- Add to bag button will be used to place the style, size and quantity of the product selected into the user’s cart. If size hasn't been selected, dropdown will open and a message will appear above the dropdown stating "Please select size".
- Share icons provide user a method to share current product to social media.
- Related Products displays a list of products that is determined by the API.
- Each product is formatted into a card.
- The cards display a product thumbnail, category, name, price, and rating.
- The cards also have an action button in the top right corner. This button will open a modal that has a comparison table. It compares the features between the clicked product, and the current product being viewed at the top of the page.
- The modal can be closed by clicking the backdrop.
- Outfit displays a list of products that is determined by the user.
- To add a product to the Outfit, the user should click the 'Add the Outfit Card'.
- To remove a product from the Outfit, the user should click the action button on the top right corner of an Outfit card.
- The Outfit will consist even if the user exits the page.
-
Overall User Rating Section
- Dynamically calculates average user rating to one decimal place
- Dynamically calculates percentage of users who recommend the product
- Shows number of users who gave a particular rating
- Clicking on a star value filters out the reviews shown in the reviews section
- Reset filter removes all filters
-
Product Factors section
- Moves yellow indicator to display the average thoughts about a particular product factor
-
Sort dropdown
- Sorts the review tiles by relevance, newest, or helpful
-
Review Tile
- Shows all reviews for a particular product ID with images, review title, review body, reviewer name, starts, and date
- Clicking on image opens up a modal view
- clicking helpful marks an item as helpful and sends a post request
- clicking report displays "thanks for reporting" and removes tile after a 1 sec and sends a request
- Clicking more reviews will display 2 more reviews if available
- Reviews list will prerender at least 2 review tiles to avoid needing to make API calls so user doesn't have to wait
- Review tiles will work with cacheing so avoid unnecessary calls to the API
- More reviews button will disappear if no more reviews are present
# clone
git clone https://github.com/RFCTeamSaturn/BestestBuy.gitmodule.exports = {
API_KEY: 'YOUR TOKEN',
}export const API_KEY = '';
export const headers = {
headers: {
Authorization: API_KEY,
},
};
export const url = '';- In root folder, install all server side dependencies.
npm install- In client folder, install all client side dependencies.
npm install- In client folder, install dependencies, then build webpack transpiling react
npm install
npm run build- In root folder, install dependencies, then open localhost server
npm install
npm run start
open browser and type in http://localhost:8080/- ReactJS
- Sass
- Webpack
- Express server
- Jest
- Axios
- ESLint
- Sass
- Jest
- dotenv
- fortawesome
- js-cookie
- moment
- react-image-magnifiers
- react-lazyload
- react-router-dom
- react-select
- react-share
- sweetalert
- regenerator-runtime