MBF Shop is a full-stack single-page e-commerce website built with the MERN stack. This project allows users to browse through products with features like pagination, search, filtering, and sorting. The project also includes authentication using Firebase.
- Pagination: Efficient loading and browsing of products with next/previous navigation.
- Search: Users can search for products by name.
- Categorization: Filter products by brand name, category, and price range.
- Sorting: Sort products by price (low to high, high to low) and by date added (newest first).
- Authentication: Google and Email/Password authentication using Firebase.
- Responsive Design: Mobile-first design with a responsive layout.
- Fixed-Size Product Cards: Consistent display of product information with fixed-size cards.
- Frontend: React, Flowbite, Skeleton, Tiptap, Tanstack Table, Tanstack Query
- Backend: Node.js, Express.js, MongoDB
- Authentication: Firebase Authentication
Firebase Authentication is used to manage user authentication and provide a secure login/register experience. Users can sign up with their email or through social media accounts. Firebase also handles password recovery and user session management.
Flowbite is a component library for Tailwind CSS, providing pre-designed components that can be easily integrated into our project to enhance the user interface and user experience.
Skeleton is a simple, responsive boilerplate for quickly building web interfaces. It provides a basic structure and responsive grid system, ensuring that the website looks good on all devices.
To set up the project locally, follow these steps:
- Clone the repository:
git clone https://github.com/Faysalgreen35/mbf-online-shop-client cd mbf-online-shop-client