Gramer Bazar is a full-featured e-commerce platform designed to connect local businesses with online customers, providing a seamless shopping experience for buyers and powerful management tools for sellers. Built with modern web technologies including React, Node.js, and MongoDB, this platform delivers a smooth and intuitive commerce experience across devices.
The platform features smart product discovery with category-based filtering and search, flexible payment integration supporting Cash on Delivery and online payment gateways, and a comprehensive admin dashboard with real-time analytics and order tracking. Security is ensured through JWT authentication with multi-layer protection and httpOnly cookies.
Gramer Bazar includes powerful admin features such as product management with image upload via Cloudinary, order management with status tracking, customer management, promo code support with percentage and fixed discounts, and inventory tracking. The mobile-first design ensures an optimal shopping experience across all devices.
Developed by Mhr Rony, Gramer Bazar empowers local sellers to reach a wider audience online, modernizing traditional commerce with digital solutions, enhancing user experience with intuitive interfaces, and giving small businesses enterprise-level e-commerce capabilities at an affordable scale.
Watch the full project demo and walkthrough
Challenge
The primary challenge was bridging the gap between local village-level sellers and online buyers in Bangladesh, including limited digital reach, payment barriers, poor mobile experience, and building a trustworthy platform for small local businesses.
Product Discovery & Management
Implementing smart product filtering and search capabilities allowing customers to filter by category, color, size, and price range. Creating complex product variant system supporting multiple size and color combinations, building comprehensive product management with image upload to dual storage (Cloudinary and Cloudflare R2), and developing inventory tracking system with real-time stock updates.
Payment & Security Integration
Integrating SSL Commerz payment gateway for secure online payments supporting multiple payment methods (bKash, Nagad, credit/debit cards), implementing Cash on Delivery option for flexible payment choices, establishing JWT authentication with httpOnly cookies for enhanced security, and creating multi-layer security with Helmet middleware, rate limiting, and input validation.
E-commerce Features & Analytics
Building shopping cart system with size and color variant selection, developing promo code management with percentage and fixed amount discounts, creating manual sales tracking system for recording offline transactions, implementing professional PDF invoice generation for orders, and establishing real-time analytics dashboard with revenue, sales, and inventory metrics.
Mobile-First Design & Performance
Creating mobile-first responsive design optimized for all screen sizes, implementing Progressive Web App (PWA) functionality with offline capabilities, optimizing page load times with code splitting and lazy loading, and ensuring cross-browser compatibility across Chrome, Firefox, Safari, and Edge.
System Design
Frontend Architecture
Built with React 18 and TypeScript utilizing Vite for fast development builds and hot module replacement, Tailwind CSS for utility-first responsive design, shadcn/ui component library built on Radix UI for accessible components, React Router v6 for client-side routing, React Hook Form with Zod validation for form handling, Framer Motion for smooth animations, and Recharts for data visualization.
Backend Architecture
RESTful API built with Node.js and Express.js featuring JWT authentication with httpOnly cookies, role-based access control for admin and customer permissions, MongoDB with Mongoose ODM for flexible data modeling, Multer for file upload handling, bcryptjs for secure password hashing, and comprehensive error handling middleware.
Database Schema
User collection with authentication credentials and profile information, Product collection with variants (size, color) and inventory tracking, Order collection with items, shipping details, and payment information, Cart collection for user shopping carts, ManualSale collection for offline transaction tracking, PromoCode collection with discount rules and usage limits, and Category, Banner, and Newsletter collections for content management.
Payment Processing
SSL Commerz integration supporting sandbox and production environments, secure payment flow with server-to-server validation, support for multiple payment methods (mobile banking, cards, internet banking), transaction monitoring with real-time status updates, payment callback handling for success, failure, and cancellation scenarios, and Cash on Delivery option for customers preferring offline payment.
File Storage Strategy
Dual storage system with Cloudinary as primary storage for image optimization and transformation, Cloudflare R2 as backup storage for redundancy, automatic image upload to both services, WebP format optimization for faster loading, lazy loading implementation for improved performance, and CDN delivery through Cloudflare for global content distribution.
Security Measures
JWT authentication with access tokens stored in httpOnly cookies, bcrypt password hashing with salt rounds, Helmet middleware for security headers, CORS configuration for cross-origin resource sharing, Express Rate Limit for API protection, input validation and sanitization on all endpoints, and HTTPS enforcement for all communications.
Results
Successfully delivered a production-ready e-commerce platform that revolutionizes the online fashion shopping experience in Bangladesh with modern features and exceptional user experience.
Customer Shopping Experience
Advanced product filtering and search enabling customers to quickly find desired items, category-based navigation (Men, Women, Kids) with subcategories, product detail pages with image galleries and size charts, shopping cart with size and color variant selection, wishlist functionality for saving favorite products, promo code support for discounts, multiple payment methods (Cash on Delivery and Online Payment), user account with profile management and order history, and responsive mobile-first design optimized for all devices.
Admin Management System
Comprehensive dashboard with revenue, sales statistics, order tracking, and customer insights. Product management featuring add/edit/delete operations, image upload with dual storage (Cloudinary and Cloudflare R2), category and tag management, inventory tracking, and featured products control. Order management with listing, filtering, status updates (Pending, Confirmed, Delivered, Returned), customer information, and PDF invoice generation.
Manual Sales & Offline Tracking
Record offline sales with custom item entry, discount and shipping management, sales statistics showing total orders, items sold, revenue, discounts, and pending amounts, status-wise order counts for comprehensive reporting, and professional invoice generation for manual sales transactions.
Marketing & Promotions
Promo code management supporting percentage or fixed amount discounts, usage limits and expiry dates for promotional campaigns, minimum order amount requirements, maximum discount caps, activation and deactivation controls, banner management for homepage carousel and promotional banners, newsletter subscriber management, and category-specific size chart management.
Performance & Reliability
Average API response time under 150ms through optimized queries, page load time under 2 seconds on 3G connection, Lighthouse performance score of 90+, code splitting and lazy loading for improved initial load, WebP image format with lazy loading implementation, browser caching for static assets, CDN delivery via Cloudflare, database indexing for fast queries, and 99.5% uptime availability.
Security & Compliance
JWT authentication with httpOnly cookies preventing XSS attacks, bcrypt password hashing with salt rounds, Helmet middleware for security headers, rate limiting preventing abuse and DDoS attacks, input validation and sanitization, HTTPS enforcement, PCI DSS compliance for payment processing, and comprehensive error logging with monitoring.
Business Impact
Platform supports up to 500 concurrent users, processes orders efficiently with automated workflows, provides real-time analytics for business decisions, enables seamless inventory management across products, supports both online and offline sales tracking, offers flexible payment options increasing conversion rates, and delivers enterprise-level e-commerce capabilities to small fashion businesses in Bangladesh.
