ShopO
Multivendor E-commerce platform
A full marketplace where independent sellers run their own shops, customers buy across all of them in one checkout, and admins keep the whole platform healthy. It ships with real-time buyer and seller chat, Stripe payments and transactional email.
- 3
- User roles
- 10
- Route modules
- 9
- Data models
- Real-time
- Messaging
Demo video
Demo video coming soon
A full walkthrough of ShopO will be added here.
Customer, seller and admin walkthrough.
Overview
ShopO is a multi-vendor e-commerce platform that brings customers, sellers and administrators into a single ecosystem. Instead of one store with one catalog, every seller owns a shop, a product catalog and an order pipeline, while the customer sees one unified storefront.
Customers
Browse products, join promotional events, place orders and message sellers directly.
Sellers
Create a shop, manage the catalog, process orders, run coupons and events, and talk to buyers.
Administrators
Oversee platform operations, manage users and sellers, and monitor system health.
The platform combines real-time communication, secure payment processing and automated email notifications so the experience feels complete from sign-up to delivery.
Goals of the Project
The aim was a complete, scalable marketplace that works equally well for the people selling and the people buying.
True multi-vendor functionality
Multiple independent sellers create and manage their own shops, each with a dedicated interface for shop settings, product listings and order processing.
A complete shopping experience
Customers browse, add to cart or wishlist, pay through Stripe and track every order through the fulfilment cycle.
Real-time communication
Built-in chat lets buyers and sellers talk directly, which covers product questions and customer support without leaving the platform.
System Architecture
ShopO is built on a modern full-stack JavaScript architecture. A React single-page app talks to an Express REST API, with a separate Socket.io channel for live messaging and third-party services for payments, media and email.
| Layer | Technology | Purpose |
|---|---|---|
| Frontend | React 18 + Vite | User interface and build tooling |
| State management | Redux Toolkit | Global application state |
| Backend | Express.js 5.1 | REST API server |
| Database | MongoDB + Mongoose 8 | Document storage and ODM |
| Real-time | Socket.io | Live messaging |
| Authentication | JWT + bcrypt | Token-based auth with password hashing |
| Payments | Stripe | Payment processing |
| File storage | Cloudinary + Multer | Image upload and storage |
| Nodemailer | Transactional emails | |
| Deployment | Vercel | Production hosting |
Key Features
Functionality is organised around three interfaces: customer shopping, seller management and admin oversight.
Multi-role user system
Three distinct roles, each with a dedicated interface and protected routing.
- Customer interface: shopping, cart, order tracking and messaging
- Seller dashboard: product management, order processing and shop analytics
- Admin panel: user management, order oversight and platform administration
Product management and shopping
A full catalog experience with search and categorisation.
- Real-time product search with dropdown results
- Grid-based category browsing with visual icons
- Cart with stock validation and duplicate prevention
- Wishlist to save and remove products
Payment processing
Secure checkout through Stripe Elements, rendered conditionally so the app degrades gracefully when no API key is configured.
Real-time messaging
A built-in customer and seller inbox over Socket.io, with image attachments and live updates on both sides.
Seller dashboard
The tools a seller needs to run a shop day to day.
- Account balance tracking with service charge calculations
- Order management for every shop order
- Product analytics and performance metrics
- Coupon creation and management
- Promotional events and withdrawal requests
Storefront value propositions
The storefront leads with customer-facing benefits rather than features.
- Free shipping on orders over $100
- Daily surprise offers with up to 25% savings
- Factory-direct pricing
- Secure payment protection
API Architecture
The REST API is versioned and split by business domain, so each area of the product can evolve without touching the others.
| Domain | Endpoints |
|---|---|
| User authentication and profiles | /api/v2/user/* |
| Shop and seller management | /api/v2/seller/* |
| Product catalog | /api/v2/product/* |
| Order processing | /api/v2/order/* |
| Stripe payments | /api/v2/payment/* |
| Messaging | /api/v2/conversation/*, /api/v2/messages/* |
| Coupons | /api/v2/coupons/* |
| Promotional events | /api/v2/events/* |
| Seller withdrawals | /api/v2/withdraw-request/* |
Tech Stack
Backend
- Node.js and Express.js for a fast, minimal API server
- MongoDB with Mongoose for flexible document modelling
- JWT and bcrypt for authentication and password hashing
- Nodemailer for activation and notification emails
- Stripe for payments
Frontend
- React for the interface
- Vite for the build tool and dev server
- Redux Toolkit for predictable global state
Media and real-time
- Multer for upload handling
- Cloudinary for cloud media storage
- Socket.io for chat and live notifications
Tooling and deployment
- Nodemon and dotenv for local development
- Vercel for hosting
Database Design
Nine collections model the marketplace. Shops own products, coupons, events and withdrawal requests, while users place orders and take part in conversations.
Application Flow
A request travels through four layers. The frontend holds UI and Redux state, a communication layer handles CORS, JWT cookies and the WebSocket connection, the Express server routes by domain, and the data layer persists to MongoDB, Cloudinary and Stripe.
User, Seller and Admin Flows
Each role follows its own journey. Customers and sellers both go through email activation before an account is created, so no unverified record ever reaches the database.
Challenges and Solutions
Most of the real learning came from the problems that only showed up once the pieces were wired together.
| Challenge | Solution |
|---|---|
| Sign-up activation tokens expiring for users and sellers | Traced it to React Strict Mode double-invoking the activation effect, and adjusted the setup so the token is consumed exactly once. |
| Modelling errors in the database schema | Reviewed and corrected the Mongoose schemas and relationships to match the backend logic, restoring proper validation and storage. |
| Redux state not receiving data | Rebuilt the async actions and state slices in Redux Toolkit so data flows cleanly from the API to the UI. |
| Stripe payment integration issues | Debugged and validated the full payment flow in Stripe's sandbox environment before going to production. |
| Image uploading | Started with local folder uploads, then moved to Cloudinary for scalable cloud-based storage and delivery. |
| Production errors on Vercel with Node.js | Adjusted the deployment configuration, verified environment variables and resolved server reload issues for stable builds. |
| LocalStorage management | Added consistent get and set logic with JSON parsing to store and restore sessions and app state reliably. |
| Fetching backend data and rendering it | Standardised API calls with error handling and used React hooks to render data accurately. |
| Middleware configuration | Ordered and configured the Express middleware for authentication, error handling and body parsing correctly. |
Best Practices
Authentication and security
- JWT tokens in HTTP-only cookies, which keeps them out of reach of XSS
- Password hashing with bcrypt
- Sensitive fields such as passwords excluded from queries by default
- Role-based authorisation restricting admin-only operations
Component architecture
- Separation of concerns through modular React components
- Clean state management across customer, seller and admin flows
- Protected routes enforcing access control per role
Error handling and user experience
- Graceful error handling for cart and product operations
- Stock validation so unavailable products cannot be added
- Toast notifications for immediate feedback
- Duplicate prevention in the cart
Conclusion
ShopO is a complete, production-deployed marketplace rather than a storefront demo. It unites customers, sellers and administrators in one ecosystem, and pairs a rich feature set with secure authentication, a modular architecture and real deployment practices, which leaves it well prepared for real-world use and future growth.