Video Demo
Gallery
NexVendor interface gallery
A closer look at the marketplace, user areas, and dashboard workflows.
01 / 17
Storefront overview
Project Overview
NexVendor is a full-featured multi-vendor e-commerce platform where multiple sellers can create their own shops and offer products through a shared storefront. It includes role-based dashboards for customers, sellers, and administrators. The platform supports real-time messaging, coupon and event systems, refund handling, and detailed order management to provide a smooth experience for every user type.
Built using the MERN stack, the application focuses on modular design, secure authentication, and real-time interactivity powered by Socket.IO. It offers payment integration through Stripe and Cash on Delivery, with business logic for commission tracking. Cloudinary handles image storage and management, while the admin panel provides complete visibility into platform operations.
NexVendor showcases strong full-stack development skills across authentication, messaging, database modeling, and deployment. The project reflects a deep understanding of building real-world scalable systems with modern tools, responsive design, and structured state management.
Architecture Design
Frontend
- React
- Material UI
- Tailwind CSS
- Redux Toolkit
- Socket.IO Client
Backend
- Node.js
- Express.js
- MongoDB
- Socket.IO
- JWT
Integrations
- Cloudinary
- Stripe
- Nodemailer
- Vercel
- Render
ER Diagram
The ER diagram illustrates entites: Users, Sellers, Products, Orders, Coupons, Events, Conversations, Messages, Withdrawls.
System Flow
The flow diagram illustrates user flow journey, seller flow journey and admin flow journey.
Key Features
Challenges & Solutions
Challenge: Authentication with Email Activation
Solution: Implemented one-time activation links using time-limited JWT tokens sent via SMTP. Verified token before account/shop creation to ensure security.
Challenge: Real-Time Chat with Role Awareness
Solution: Used Socket.IO to handle dynamic sender-receiver pairing, message delivery, and message seen status with manual state syncing across roles.
Challenge: Image Uploads and File Handling
Solution: Started with Multer for local uploads but migrated to Cloudinary for scalable cloud storage. Added base64 conversion, type validation, and size limits.
Challenge: Frontend State Not Reflecting Changes
Solution: Manually triggered Redux state updates after key actions like cart updates, product reviews, and wishlist modifications to ensure real-time UI sync.
Challenge: Deployment Issues with Cookies and Routing
Solution: Switched backend from Vercel to Render for better session handling. Fixed React Router reload errors using vercel.json rewrite config.