Ari-Design is the client side of an e-commerce site for clothing and accessories. The product page is composed of a product overview component, a questions and answers component, and a ratings and reviews component.
Users can cycle through the photo carousel using the arrows or by clicking on a photo directly. They can also choose from multiple styles for each available item.
Choosing a size dynamically updates the quanity menu to reflect the current quantity available. Users can share their favorite items on Facebook, Twitter, or Pintrest.
Search bar dynamically filters questions. Users can ask a question or add an answer to an existing question.
Clicking Helpful for a question or an answer will dynamically increment the helpful count. If a question or answer is reported, it will be removed on the next re-render.
Users can add a review to a product. They can also mark a review as helpful to increment the helpfulness count or report a review.
Reviews can be sorted by relevance, helpfulness, or date posted. The reviews list can be expanded to show more reviews.
- Axios : 0.24.0
- Express : 4.17.1
- Moment : 2.29.1
- Nodemon : 2.0.14
- React : 17.0.2
- React-dom : 17.0.2
- @babel/core : 7.15.8
- @babel/preset-env : 7.15.8
- @babel/preset-react : 7.14.5
- babel-jest : 27.3.1
- babel-loader : 8.2.3
- css-loader : 6.5.0
- eslint : 8.1.0
- jest : 27.3.1
- style-loader : 3.3.1
- url-loader : 4.1.1
- webpack : 5.61.0
- webpack-cli : 4.9.1
$ git clone https://github.com/Ari-Design/Modern-Shopping-Site.git
From the root directory, run ...
$ npm install
$ npm run watch
$ npm start