DEVSTORE

Devstore is e-com website. which has products like stickers, mug , hat and bags.

LIVE LINK => (https://devvstore.netlify.app/)

Video Demo:

devstore-react.mp4

Technologies used

• HTML
• CSS
• JavaScript
• ReactJS
• Mockbee (for mock backend)

Features:

This e-commerce app contains following features:

1. Home page

• Contain Hero Section with Shop Now Button
• Contain Category Section with buttons Which will redirect to the Product List Page with category selected.
• Category section also contain image which will navigate to new page of the following category.
• Contain a product section with SEA ALL CTA.

2. ProductListing

• It contain all the available products.
• All products has CTA BUTTON (ADD TO CART, ADD TO WISHLIST)

3. Filters

• Product Listing has Multple filters option
• User can filter by price (RADIO BUTTON => LOW TO HIGH. HIGH TO LOW)
• User can filter By Category and Brands (CHECKBOX BUTTON)
• User can also sort by Rating (SLIDER)

4. Search Functionality

• In DEVSTORE you can also search indvidual products with searchbar.

5. cart Management

• Cart has all the the products with alot of CTA.
• user can increase or decrease the quantity of item.
• User can move it to the wishlist.
• User can delete its product from cart also.

6. Wishlist Management

• In wishlist Mangement user can manage its wishlist items.
• It has three buttons that can help user do specfic things. (REMOVE FROM WISHLIST, ADD TO CART, INCREASE QUANTITY)
• If item is already present in cart than user can increase the quantity of it.
• It also lets user add product to cart and if user clicks it more than once then that product is added to cart and its qty is also increased in cart
• It is also having a feature to let user remove products from wishlist

7. Product details page

• Devstore has Product detail page also which has the following Buttons (ADD TO CART, ADD TO WISHLIST)
• ADD TO CART :-> USER CAN ADD THE PRODUCT INTO CART
• ADD TO WISHLIST :-> USER CAN ADD TO WISHLIST

8. 404 page

• When user goes on any route which is not there in the app, this will show a 404 page.

Run Locally

1. CLONE THIS REPO
2. USE NPM INSTALL
3. Then do NPM Start
4. You are ready to go
5. to use the private Route you can checkout this link (https://mockbee.netlify.app/)

Live link

Let's Connect