An interactive clone of the boAt website with a focus on showcasing audio products.
- Overview
- Features
- Technologies Used
- Getting Started
- Demo
- Screenshots
- Navigation Bar
- Landing Page Components
- Categories and Product Pages
- FAQ Section
- Adding to Cart
- Search Bar
- Cart Functionality
- Order Process
- Login
- Footer
Welcome to the boAt Clone App! This project aims to replicate the boAt website, providing a user-friendly interface for exploring and discovering audio products.
- Browse and view a variety of audio products.
- Detailed product pages with specifications and images.
- User authentication for personalized experiences.
- Cart functionality for adding products and making purchases.
- Responsive design for a seamless experience across devices.
- HTML
- CSS
- JavaScript
- React
- Chakra UI
- Vercel
-
Clone the repository:
git clone https://github.com/mYashavanth/boAt_Project.git
-
Install dependencies:
npm install
-
Run the application:
npm start
- This will launch the application on http://localhost:3000.
Check out the live demo of the boAt Clone App here. Visit Demo
The navigation bar is available across all pages and includes various elements for easy navigation.
The landing page features an image slider that automatically transitions between images and allows users to manually navigate using next and previous buttons.
A section showcasing product videos. Videos play on hover, providing an engaging preview of featured products.
Hovering over the category section reveals details about all available categories. Clicking on a category redirects to the categories page.
On the category page, each product has a "View Product" button. Clicking on this button redirects users to the product details page.
The product details page provides comprehensive information about a specific product. Users can add the product to their cart if available. If the product is out of stock, a "Notify Me" button is displayed. Clicking on this button prompts users to enter their mobile number, and upon submission, they are notified when the product becomes available.
The products page includes a FAQ section that provides answers to common questions. Users can find detailed information about product-related queries in this section.
From the product details page, users can directly add the product to their cart by clicking the "Add to Cart" button. This streamlines the shopping experience for users interested in purchasing the product immediately.
The search bar allows users to search for specific products. On submitting a search query, users are redirected to the products page, where they can find relevant products based on their search.
Clicking on the cart icon opens a drawer displaying all the products added to the cart. Users can remove items directly from the cart. If the customer is logged in, they can proceed to the order directly. Otherwise, they can log in from the cart and continue with the order process.
After reviewing the cart, customers can click the "Order" button. This redirects them to a page displaying the order summary and asking for customer details. Once the details are provided, customers can place the order, and the products will be delivered to the specified address.
Clicking on the login icon in the navigation bar opens a login modal or page. Users can enter their credentials to log in and access personalized features.
login credentials
"email": "eve.holt@reqres.in",
"password": "cityslicka"
The footer component contains essential links, information, and contact details.