Back to projects
Multivendor E-commerce Platform

Multivendor E‑commerce Platform

•
6 min read min read

Multivendor E‑commerce Platform

A comprehensive multivendor e-commerce solution featuring a cross-platform mobile application built with React Native and a robust backend powered by Hono, Better Auth, and PostgreSQL. This platform enables multiple vendors to sell products through a unified marketplace with role-based access control.

Overview

This project represents a complete e-commerce ecosystem that bridges the gap between vendors and customers through a modern, mobile-first experience. The platform supports multiple vendor stores, each with their own product management capabilities, while providing customers with a seamless shopping experience across iOS, Android, and web platforms.

Architecture

Frontend (Mobile/Web)

  • React Native with Expo: Cross-platform development for iOS, Android, and Web
  • NativeWind: Tailwind CSS implementation for React Native styling
  • Expo Router: File-based routing system with type-safe navigation
  • Zustand: Lightweight state management for authentication and global state
  • Lucide React Native: Consistent icon system across platforms

Backend

  • Hono: Fast, lightweight web framework for Node.js
  • Better Auth: Modern authentication solution with OAuth support
  • Drizzle ORM: Type-safe SQL toolkit for PostgreSQL
  • PostgreSQL: Reliable relational database for data persistence
  • Zod: Runtime type validation for API safety
  • Pino: Structured logging with pretty printing

Features

Multi-Role System

  • Customers: Browse products, manage cart, place orders, track shipments
  • Vendors: Manage store profile, upload products, handle orders, view analytics
  • Administrators: Vendor verification, platform management, oversight tools

Core E-commerce Functionality

  • Product Management: Multi-vendor product catalog with categories and search
  • Shopping Cart: Persistent cart across sessions with multi-vendor support
  • Order Processing: Multi-vendor order splitting and fulfillment tracking
  • Payment Integration: Secure payment processing with multiple payment methods
  • Address Management: Shipping and billing address storage
  • Order History: Comprehensive order tracking for all user types

Authentication & Security

  • Email/Password Authentication: Traditional login with secure password handling
  • Social OAuth: Google, Apple, and Discord integration
  • Role-Based Access: Secure role management with appropriate permissions
  • Session Management: SecureStore for native, cookies for web
  • Email Verification: Account verification and password reset flows

Vendor Features

  • Store Profile: Customizable vendor storefronts
  • Product Upload: Bulk product creation with image support
  • Inventory Management: Stock tracking and low-stock alerts
  • Order Fulfillment: Streamlined order processing workflow
  • Analytics Dashboard: Sales performance and customer insights
  • Payout Management: Financial tracking and withdrawal options

Database Schema

The platform utilizes a well-structured PostgreSQL schema with the following key relationships:

  • Users: Core authentication and profile data with role assignment
  • Vendors: Extended user profiles for store management
  • Products: Vendor-linked product catalog with rich metadata
  • Categories: Hierarchical categorization system
  • Orders: Customer orders with multi-vendor line items
  • OrderItems: Individual product orders linked to specific vendors
  • Addresses: Customer shipping and billing information

Tech Stack Details

Mobile App Dependencies

  • expo - React Native development platform
  • expo-router - File-based routing with deep linking
  • nativewind - Tailwind CSS for React Native
  • zustand - State management
  • @better-auth/expo - Authentication client
  • lucide-react-native - Icon library

Backend Dependencies

  • hono - Web framework
  • better-auth - Authentication core
  • drizzle-orm - Database ORM
  • drizzle-kit - Migration tools
  • pg - PostgreSQL driver
  • zod - Schema validation
  • pino - Logging framework

Development Workflow

Environment Setup

  1. Clone the repository and install dependencies across all packages
  2. Configure PostgreSQL database connection
  3. Set up OAuth providers (Google, Apple, Discord)
  4. Run database migrations to create schema
  5. Start development servers for both frontend and backend

Database Management

Terminal window
# Generate migration files
pnpm run db:generate


# Apply migrations
pnpm run db:migrate


# Push schema changes (development)
pnpm run db:push


# Open database studio
pnpm run db:studio

Development Servers

Terminal window
# Backend development server
cd backend && pnpm run dev


# Frontend Metro bundler
cd mobile && npx expo start --tunnel

Key Implementation Details

Authentication Flow

  • Better Auth handles session management with secure token storage
  • Role-based redirects after successful authentication
  • OAuth providers configured with proper callback URLs
  • Session persistence across app restarts using SecureStore

Multi-Vendor Order Processing

  • Orders automatically split by vendor during checkout
  • Each vendor receives notifications for their specific items
  • Unified order tracking for customers with vendor-specific status updates
  • Payout calculation and management for vendor earnings

Mobile-First Design

  • Responsive layouts optimized for various screen sizes
  • Native navigation patterns for iOS and Android
  • Touch-friendly interfaces with proper gesture handling
  • Platform-specific UI components and behaviors

Security Considerations

  • CORS configuration for Expo development origins
  • Input validation using Zod schemas
  • SQL injection prevention through Drizzle ORM
  • Secure session storage and token management
  • Environment variable protection for sensitive data

Performance Optimizations

  • Efficient database queries with proper indexing
  • Image optimization and CDN integration
  • Lazy loading for product catalogs
  • Caching strategies for frequently accessed data
  • Bundle size optimization for mobile applications

Future Enhancements

  • Push Notifications: Real-time order updates and marketing
  • Advanced Analytics: Enhanced vendor insights and platform metrics
  • Payment Gateways: Additional payment method integrations
  • Shipping Integration: Real-time shipping rates and tracking
  • Customer Reviews: Product rating and review system
  • Vendor Verification: Enhanced onboarding and verification processes

Deployment Strategy

  • Backend: Node.js server deployment on cloud platform
  • Mobile App: App Store and Google Play distribution
  • Database: Managed PostgreSQL service (Neon, AWS RDS)
  • File Storage: Cloud storage for product images
  • CDN: Global content delivery for static assets

Troubleshooting Guide

Common Issues

  • OAuth Configuration: Ensure proper redirect URLs and client credentials
  • Database Migrations: Handle enum conflicts by dropping dependent columns first
  • Expo Development: Configure trusted origins for local development
  • Session Management: Clear SecureStore when authentication issues occur

Debug Tools

  • Better Auth debug mode for development
  • Drizzle Studio for database inspection
  • Expo Metro logs for frontend debugging
  • Pino structured logs for backend monitoring

This platform demonstrates modern full-stack development practices with a focus on scalability, security, and user experience across multiple platforms and user roles.