Spaces:
Running
Running
| # 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 |