https://github.com/faysalgreen35/mbf-online-shop-client

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.
https://github.com/faysalgreen35/mbf-online-shop-client

express-js firebase-auth javsacript node-js reactjs

Last synced: 15 days ago
JSON representation

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.

• Host: GitHub
• URL: https://github.com/faysalgreen35/mbf-online-shop-client
• Owner: Faysalgreen35
• Created: 2024-08-17T08:18:09.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-09-12T14:52:07.000Z (4 months ago)
• Last Synced: 2024-11-09T22:45:04.191Z (about 2 months ago)
• Topics: express-js, firebase-auth, javsacript, node-js, reactjs
• Language: JavaScript
• Homepage: https://mbf-shop.web.app
• Size: 7.9 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# MBF Online Shop

## Introduction

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.

## Frontend Live Link

[MBF Online Shop Frontend](https://mbf-shop.web.app/)

## Backend Link

[MBF Online Shop Backend](https://spw-app-server.vercel.app/)

## Features

- **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.

## Technologies Used

- **Frontend**: React, Flowbite, Skeleton, Tiptap, Tanstack Table, Tanstack Query

- **Backend**: Node.js, Express.js, MongoDB

- **Authentication**: Firebase Authentication

 

## Authentication in Firebase

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

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

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.

 

## Installation and Setup

To set up the project locally, follow these steps:

1. **Clone the repository**:

   ```bash

   git clone https://github.com/Faysalgreen35/mbf-online-shop-client

   cd mbf-online-shop-client