Hello Everyone! This documentation provides an overview of Boat Website. The Boat website clone is a fully responsive and modern e-commerce platform designed to mimic the look and functionality of the official Boat website. It showcases various electronic products such as headphones, speakers, wearables, and other accessories. The clone features an interactive product grid, advanced filtering options, detailed product pages with reviews, and a dynamic cart system. Built with React and styled using Tailwind CSS, the platform provides a smooth and seamless shopping experience across all devices. Features like smooth scrolling, responsive navigation, and theme customization have also been integrated to enhance user interaction.
- Project Name: Boat Website Clone (https://boat-website-3bio.vercel.app/)
- Real website: boat-lifestyle.com (https://www.boat-lifestyle.com/)
- Project Duration: 18 Days
- Usage Tools: HTML5, CSS3, Javascript, React JS, Tailwind CSS , JSON-Server, Firebase, Firebase Auth Paypal
- User Registration and Authentication:
- Users can create accounts and securely login to Boat website.
- Logout Functionality:
- Users can logout from this website and After logging out, User can not access Product and Description Page.
- The user interface dynamically updates upon logout, hiding protected content and redirecting users to the login or home page.
- Cart Functionality:
- Users can add products to their shopping cart for a convenient shopping experience.
- The cart displays a summary of the selected items, including the total price.
- Filtering:
- Filtering options allow users to refine their search results based on best selling, price low to high and high to low, alphabetically A-Z and Z-A.
- Fully Responsive Design:
- users can also view this website in mobile, tablet, laptop and computer.
- Dynamic Search Functionality:
- Real-time search with instant filtering of products based on user input, with the search query updating in the URL for easy sharing and bookmarking.
- Responsive Navbar with Dropdowns:
- A multi-level navigation bar that collapses on smaller devices and includes dropdown menus for quick access to product categories.
- Custom Animations and Transitions:
- Animations using GSAP and CSS transitions provide a smooth, visually appealing user interaction across the site.
- Color Selection Feature:
- Users can view products in different available colors directly on the product description page, enhancing the shopping experience.
- When a color is selected, the product images automatically update to reflect the chosen color variant.
- PayPal Payment Functionality:
- Configured PayPal API/SDK for secure payment transactions within the app.
- Allows users to make payments via PayPal, supporting various transaction types like one-time payments or subscriptions.
Here are some screenshots of the Boat website for you to preview.
Home Page
Banner Page
Lifestyle Page
Navtabs Page
All Products Page
Description Page
Search Products Page
Login Page
After Login
Add to cart Page
