BoAt Lifestyle Clone

This is a clone of BoAt Lifestyle website which i created for my Construct Week Project.

Features

Login button on navbar

• I've added a login feature based on the user mobile number which will accept only 10 digit numbers to verify in the navbar .

Add to cart Button right next to the login button

• Add to cart feature is added while listing all product and also the cart button is added on the top right in the navbar

  • if any user click on the particular product to add in the cart it will open the cart drawer and display the product details with remove button and Confirm order button to buy the product.

  • if user wants to remove any of the single product from the cart page he'll be able to delete from cart.

Auto SlideShow Feature onto the UI

• I've added Auto Slide-Show Effect as well to display the trending products onto the UI

Listed All Products from the Mock Server

• I created my own mock-server to store data.

• run my mock-server and made network request to get the data and store it in the State Variable.

• listed all the products on to the UI

  • with product name.
  • with product image.
  • with product price.
  • with product rating
  • with Add to cart Button.

Navbar

• it has some Links to navigate the user to other pages.

• A BoAt logo that will redirect to the home page.

• It has search bar

• It has Login icon-button from there user can login

• It also has Cart-icon-button to have look on to the add products on the cart page.

Footer

• In the footer, there is another signup Feature where user can register with Email Id.

• there are lists of all products details.

• At last there is a short description.

Tech Stack

-> React

Tools

### Vite
### Chakra-UI Library 
### React-Router-Dom Library
### React-Slide-Show-Image Library
### Axios Library

Local Storage

Deadline

-> 5-Days