Overview

Shoposphere is a comprehensive multi-seller e-commerce marketplace built with modern web technologies. The platform connects buyers with verified sellers, featuring a full-stack architecture with React frontend, Express.js backend, and PostgreSQL database. The application supports customer registration and shopping, seller account management, product catalog management, order processing, and administrative functions.

User Preferences

Preferred communication style: Simple, everyday language.

System Architecture

Frontend Architecture

Framework: React 18 with TypeScript for type safety and modern development
Routing: Wouter for lightweight client-side routing
UI Components: Shadcn/ui component library with Radix UI primitives for accessibility
Styling: Tailwind CSS with custom CSS variables for theming
State Management:
- TanStack Query for server state management and caching
- React Context for authentication and cart state
- React Hook Form with Zod validation for form handling
Build Tool: Vite for fast development and optimized production builds

Backend Architecture

Framework: Express.js with TypeScript for API development
Database: PostgreSQL with connection pooling via Neon serverless
ORM: Drizzle ORM for type-safe database operations and migrations
Authentication: JWT-based authentication with role-based access control (users, sellers, admin)
File Uploads: Multer middleware for image upload handling
API Design: RESTful API with consistent error handling and logging

Database Design

Users Table: Customer account information with complete address details
Sellers Table: Admin-created seller accounts with minimal profile data
Categories Table: Product categories with optional icons
Stores Table: Seller store information with banner and profile images
Products Table: Product catalog with pricing, inventory, and image support
Orders/OrderItems Tables: Order management with line item details
CartItems Table: Shopping cart persistence for authenticated users

Authentication & Authorization

Multi-tier Access: Separate authentication flows for customers, sellers, and admin
JWT Tokens: Stateless authentication with role-based permissions
Protected Routes: Middleware-based route protection on both frontend and backend
Session Management: Client-side token storage with automatic logout

File Management

Upload Strategy: Local file storage with Multer middleware
Image Processing: Support for multiple product images and store branding
Static Serving: Express static middleware for uploaded file delivery

External Dependencies

Database Services

Neon Database: Serverless PostgreSQL hosting with connection pooling
Drizzle Kit: Database migration and schema management tools

UI/UX Libraries

Radix UI: Accessible component primitives for complex UI elements
Lucide React: Icon library for consistent iconography
Embla Carousel: Touch-friendly carousel components
React Day Picker: Calendar and date selection components

Development Tools

TanStack Query: Server state synchronization and caching
React Hook Form: Form validation and state management
Zod: Runtime type validation and schema definition
Class Variance Authority: Type-safe component variant management

Build & Development

Vite: Fast build tool with HMR and optimized bundling
TypeScript: Static typing for improved developer experience
ESBuild: Fast JavaScript bundler for production builds
PostCSS: CSS processing with Tailwind CSS integration

Authentication & Security

bcrypt: Password hashing for secure user authentication
jsonwebtoken: JWT token generation and verification
connect-pg-simple: PostgreSQL session store (configured but using JWT)

Utility Libraries

date-fns: Date manipulation and formatting
clsx/tailwind-merge: Conditional CSS class composition
nanoid: Unique ID generation for various entities