B2B wholesale platform - (B2Bridge)

In this Web App, you can post a product for sale and also buy a product.

Live Link

• Please Visit B2Bridge !

🚀 Key Features of B2Bridge

• 🛒 B2B Wholesale Marketplace
  Connects manufacturers, brands, and wholesalers with retailers and bulk buyers in a streamlined online selling platform.

• 🔍 Smart Product Filtering
  Easily filter products by category, brand, rating, price, and more to quickly find exactly what you're looking for.

• 🔐 JWT Authentication System
  All private routes are protected using JSON Web Tokens (JWT), with support for email/password and Google sign-in.

• 👥 User Role Detection in Navbar
  Dynamically shows or hides options in the navigation bar based on whether the user is logged in or not.

• 📦 View Product Details with Order Modal
  See full product specifications and open a modal to place orders with quantity selection and minimum validation.

• 📉 Real-Time Inventory Update
  Product quantities are instantly updated in MongoDB using $inc during orders or when products are removed from cart.

• ➕ Add New Products Easily
  Authenticated users can add detailed product listings including image, price, brand, category, and quantity.

• ✏️ Edit Products (Any User)
  Any logged-in user can edit any product, updating fields like category, rating, price, description, and more.

• 🛒 Cart with Stock Reversal
  Items removed from the cart will restore stock to the product in the database using secure MongoDB updates.

• 🔄 Card/Table View Toggle for Products
  Users can toggle between a grid-based card view and a table view to browse all listed products more efficiently.

• 🎯 Show Products with High MOQ
  A special filter shows only products with a minimum selling quantity over 100, ideal for large-scale buyers.

• 📱 Responsive UI Design
  Built with Tailwind CSS and DaisyUI to ensure optimal experience on both mobile and desktop devices.

• 🧠 Dynamic Page Titles
  Each page dynamically updates the browser tab title to reflect the current view, improving navigation and SEO.

• ⚠️ Custom 404 Error Page
  Clean and branded error page when users access undefined routes, with an option to return to the home page.

• 🔔 SweetAlert & Toast Notifications
  Provides user feedback for key actions like login, logout, add/edit product, and form errors using alert/toast libraries.

npm packages in Client Side

• Use Babel for Fast Refresh
• Uses SWC for Fast Refresh
• Uses Tailwind for building custom user interfaces.
• Uses daisyUI for building web pages quickly and easily
• Uses React Router for handling routing and navigation within React applications
• Uses Firebase for backend services: auth, database, storage, hosting, functions.
• Uses React-Toastify for displays customizable toast notifications easily
• Uses Swiper for creating modern, touch-friendly sliders and carousels efficiently
• Uses lottie-react for renders lightweight, interactive animations in React web apps.
• Uses react-simple-typewriter for animates text with typewriter effect in React apps.
• Uses SweetAlert2 for creating beautiful, customizable, and responsive alert popups in web applications easily.
• Uses react-tooltip for adding customizable, accessible, and interactive tooltips to React components and elements.
• Uses react-helmet-async for for managing dynamic changes to the document head (like title, meta tags) in React.
• Uses motion to add smooth, declarative animations and transitions to React components with minimal code.
• Uses Axios for making HTTP requests from client to server.
• Uses Netlify for deploys, hosts websites.

Technologies Used

• 
• 
• 
• 
• 
• 
• 
• 

🛠️ Installation & Setup Instructions

Follow the steps below to set up the B2Bridge application locally:

---

1. Clone the Repositories

git clone https://github.com/Arman3747/B2Bridge-client.git
git clone https://github.com/Arman3747/B2Bridge-server.git

---

2. Client Setup

cd B2Bridge-client
npm install

Create a .env.local file in the root of the client folder and add the following:

VITE_apiKey=your_firebase_key
VITE_authDomain=your_auth_domain
VITE_projectId=your_project_id
VITE_storageBucket=your_storage_bucket
VITE_messagingSenderId=your_sender_id
VITE_appId=your_app_id

Then start the client:

npm run dev

---

3. Server Setup

cd B2Bridge-server
npm install

Create a .env file in the root of the server folder and add the following:

btobridge_DB_USER=your_mongodb_admin_username
btobridge_DB_PASS=your_mongodb_admin_password
JWT_ACCESS_SECRET=your_jwt_access_token

Then start the server:

nodemon index.js

---

Thank you for Reading!