This project is a brand-based website that allows users to explore and add products from various renowned brands. The website is built using the MERN (MongoDB, Express.js, React.js, Node.js) stack and incorporates features such as user authentication, product management, and cart functionality.
- Homepage: The homepage features a navbar, banner, footer, and sections displaying brand names with their images.
- Add Product: Users can add products through a form on the "Add Product" page. The form includes fields for image, name, brand name, type, price, short description, and rating.
- Brand Pages: Clicking on a brand redirects the user to a page displaying products associated with that brand. Each product includes details like image, name, brand name, type, price, and rating.
- Product Details: Users can view detailed information about a product, including an "Add to Cart" button. The product detail route is private and redirects to the login page if the user is not logged in.
- Cart Page: The "My Cart" page displays all added products, allowing users to delete items. This page is private/protected.
- Update Product: Clicking the "Update" button redirects users to a form where they can update product information. This route is also private/protected.
- Authentication: Email and password-based authentication with registration and login pages. Additionally, users can log in with social media accounts (Facebook, GitHub, etc.).
- Navbar: Once logged in, the user's name, profile picture, and a logout button appear on the navbar.
- 404 Page: A custom 404 page is implemented for not found routes.
- Dark/Light Theme Toggle: Optional feature to toggle between dark and light themes on the home page.
- Responsive Design: The website is designed to be responsive, ensuring a seamless user experience across devices.