Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/iamnaveen8851/boat-life-style-clone
This is my first ever React Project using Vite tool, cloning the BoAt Lifestyle, I have crafted an online electronic products shopping app named Boat Lifestyle, allowing users to browse and purchase items.
https://github.com/iamnaveen8851/boat-life-style-clone
chakraui localstorage react react-router-dom react-slideshow-image
Last synced: 16 days ago
JSON representation
This is my first ever React Project using Vite tool, cloning the BoAt Lifestyle, I have crafted an online electronic products shopping app named Boat Lifestyle, allowing users to browse and purchase items.
- Host: GitHub
- URL: https://github.com/iamnaveen8851/boat-life-style-clone
- Owner: iamnaveen8851
- Created: 2024-02-27T15:38:34.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-03-06T09:11:06.000Z (11 months ago)
- Last Synced: 2024-11-19T08:12:15.410Z (3 months ago)
- Topics: chakraui, localstorage, react, react-router-dom, react-slideshow-image
- Language: JavaScript
- Homepage: https://boat-life-style-clone.vercel.app/
- Size: 116 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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