BazaarBharosa: Where The Trust Seals The Deal Project Overview BazaarBharosa is a modern, responsive e-commerce platform built with React, designed to connect vendors with customers, primarily focusing on spices and produce. The application emphasizes a user-friendly experience with features like multilingual support, order tracking, and a streamlined purchasing process.
Features This application includes a wide range of functionalities to provide a rich user experience:
Responsive Navigation Bar:
Dynamic Navbar that adapts to desktop and mobile views.
On mobile, a Hamburger Menu (60% width, dynamic height) appears from the right, containing most navigation links, language selection, location selection, cart, and sign-in options.
The main Navbar always displays the Logo, Search Bar, and Hamburger Icon (on mobile).
Multilingual Support:
Language Selector (English, Hindi, Bengali) in the Navbar.
Dynamically translates product names, button texts, modal titles, and all static content across the application (Basic, Cart, My Orders, Track Shipment, Help, Buy Now Address Modals).
Location Selection: Allows users to select a nearest location from a dropdown.
Product Listing (Vendor Section):
Displays a grid of products with images, names, and prices.
"Add to Cart" Button: Adds items to the shopping cart.
"Buy Now" Button: Initiates a direct purchase flow, prompting for an address before placing the order.
Shopping Cart Modal:
Accessible via the cart icon in the Navbar..
Displays items currently in the cart with quantity controls (increase/decrease/remove).
"Proceed to Checkout": Prompts for a shipping address before finalizing the order.
Order Placement & Confirmation:
Orders are placed from both "Buy Now" and "Cart Checkout" flows.
A discreet Order Placed Confirmation Toast appears temporarily upon successful order placement.
"My Orders" Section:
Accessible from the Navbar.
Displays a list of all placed orders with details like Order ID, Date, Total Amount, Status, Source (Buy Now/Cart Checkout), and Shipping Address.
Includes translated status indicators and icons.
"Track Shipment" Modal:
Accessible from the Navbar.
Allows users to enter an Order ID to retrieve simulated tracking details (status, last update, location, estimated delivery).
Displays shipping address if available for the order.
Login/Signup Modals:
Separate login forms for "Vendor Login" and "Supplier Login" via the "Sign In" dropdown.
Includes options for new user signup and forgot password.
"Help" Section:
A dedicated modal providing Frequently Asked Questions (FAQs) and Contact Information.
Product Search/Filtering:
Allows users to search for products by name (English or translated name).
Dynamically filters the product list in the Vendor section.
Technologies Used React.js: Frontend JavaScript library for building user interfaces.
CSS: For styling and responsiveness, including media queries for adaptive layouts.
React Icons (react-icons/fa, react-icons/io): For scalable vector icons.
Setup Instructions Follow these steps to get the project up and running on your local machine:
Prerequisites Node.js: Make sure you have Node.js installed (LTS version recommended). You can download it from nodejs.org.
npm (Node Package Manager) or Yarn: These come with Node.js.
Git: For cloning the repository. Download from git-scm.com.
Installation Clone the repository:
git clone https://github.com/emcc2302/BazaarBharosa.git
Navigate into the project directory:
cd BazaarBharosa
Install dependencies:
npm install
yarn install
Running the Development Server To start the development server and view the application in your browser:
npm start
yarn start
This will typically open the application at http://localhost:3000 (or another available port) in your default web browser.
Usage Browse Products: The main page displays a list of products.
Add to Cart: Click "Add to Cart" to add an item to your shopping cart. The cart icon in the Navbar will update.
Buy Now: Click "Buy Now" to directly purchase an item. You will be prompted to enter a shipping address.
View Cart: Click the shopping cart icon in the Navbar to view your cart items, adjust quantities, or proceed to checkout (which also requires an address).
Change Language: Use the "English" / "हिंदी" / "বাংলা" dropdown in the Navbar to switch the application's language.
Select Location: Use the "Select Location" dropdown in the Navbar to choose a location.
Search Products: Type into the search bar in the Navbar and press Enter or click the search icon to filter products.
My Orders: Click "My Orders" in the Navbar to view a list of all your placed orders.
Track Shipment: Click "Track Shipment" in the Navbar and enter an Order ID (from "My Orders") to see its simulated status.
Help: Click "Help" in the Navbar for FAQs and contact information.
Sign In: Use the "Sign In" dropdown to access Vendor or Supplier login/signup forms.
Project Structure BazaarBharosa/ ├── public/
│ └── assets/
│ └── your-logo.png (Placeholder for your logo) ├── src/
│ ├── App.css
│ ├── App.jsx
│ ├── index.css
│ ├── main.jsx
│ └── Components/
│ ├── AuthModal/
│ │ ├── AuthModal.css
│ │ └── AuthModal.jsx
│ ├── Basic/
│ │ ├── Basic.css
│ │ └── Basic.jsx
│ ├── BuyNowAddressModal/
│ │ ├── BuyNowAddressModal.css
│ │ └── BuyNowAddressModal.jsx
│ ├── CartModal/
│ │ ├── CartModal.css
│ │ └── CartModal.jsx
│ ├── Footer/
│ │ ├── Footer.css
│ │ └── Footer.jsx
│ ├── HelpModal/
│ │ ├── HelpModal.css
│ │ └── HelpModal.jsx
│ ├── MyOrdersModal/
│ │ ├── MyOrdersModal.css
│ │ └── MyOrdersModal.jsx
│ ├── Navbar/
│ │ ├── Navbar.css
│ │ └── Navbar.jsx
│ ├── OrderConfirmationToast/
│ │ ├── OrderConfirmationToast.css
│ │ └── OrderConfirmationToast.jsx
│ ├── Signin/
│ │ ├── Signin.css
│ │ └── Signin.jsx
│ ├── Slogan/
│ │ ├── Slogan.css
│ │ └── Slogan.jsx
│ └── TrackShipmentModal/
│ ├── TrackShipmentModal.css
│ └── TrackShipmentModal.jsx
├── .gitignore
├── package.json
├── README.md
└── ... (other project files)
Future Enhancements Backend Integration: Connect to a real backend for user authentication, order management, and product data.
Database: Implement a database (e.g., Firestore, MongoDB, PostgreSQL) to persist user data, orders, and product information.
Payment Gateway: Integrate a secure payment gateway for actual transactions.
User Profiles: Allow users to manage their profiles, addresses, and past orders.
Vendor/Supplier Dashboards: Create dedicated interfaces for vendors and suppliers to manage their products, orders, and inventory.
Advanced Search & Filtering: Implement more robust search capabilities with categories, price ranges, etc.
Product Details Pages: Dedicated pages for each product with more information.
Routing: Use react-router-dom for proper page navigation.