Spaces:
Running
Running
File size: 4,152 Bytes
b89a86e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
# 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 |