# 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