MarketBaseX is a sophisticated, production-ready e-commerce ecosystem designed for high-performance retail. Built with the MERN stack, it features a signature dark-themed UI, secure Stripe financial integrations, and a comprehensive administrative suite for total store management.
Explore the storefront: MarketBaseX Live Demo
High-impact visuals with reactive product grids and smooth navigation.
Fully responsive fluid UI with optimized touch navigation and mobile-specific menus.
Comprehensive management for products, orders, and users. Total control at your fingertips.
- Signature Dark Interface: A premium, high-contrast UI built with Tailwind CSS for a modern "Tech-Store" feel.
- Dynamic Storefront: Real-time product filtering, category navigation, and smart search capabilities.
- State-of-the-Art Auth: JWT-based authentication using HTTP-Only Cookies for maximum security.
- Persistent Cart: Fully reactive shopping cart with real-time price calculations via Redux Toolkit.
- Secure Payments: Integrated with Stripe API for encrypted, PCI-compliant processing.
- Inventory Management: Full CRUD suite for products, including real-time stock tracking.
- Advanced Analytics: Admin dashboard to oversee users, total sales, and order volume.
- Order Lifecycle: Track orders from "Pending" to "Delivered" with timestamped updates.
- Media Hosting: Seamless image management integrated with the Cloudinary API.
| Layer | Technology |
|---|---|
| Frontend | React.js (Vite), Redux Toolkit (RTK Query), Tailwind CSS |
| Backend | Node.js, Express.js, JSON Web Tokens (JWT) |
| Database | MongoDB Atlas (Mongoose ODM) |
| Payments | Stripe API (Test & Live Environments) |
| Media | Cloudinary API |
| Hosting | Vercel (Frontend), Render/Railway (Backend) |
- Optimized Data Fetching: Implemented RTK Query to handle server-side state, providing out-of-the-box caching and reducing loading states by 40%.
- Architecture: Followed the MVC (Model-View-Controller) pattern on the backend for clean separation of concerns and easier scalability.
- Secure Sessions: Leveraged JWT and persistent login states to ensure a seamless yet secure user journey without storing sensitive data in local storage.
git clone [https://github.com/vin-devs/marketbasex.git](https://github.com/vin-devs/marketbasex.git)
cd marketbasexCreate a .env file in the root directory:
NODE_ENV = development
PORT = 5000
MONGO_URI = your_mongodb_uri
JWT_SECRET = your_jwt_secret
PAYPAL_CLIENT_ID = your_paypal_id_or_stripe_key
CLOUDINARY_CLOUD_NAME = your_cloud_name
CLOUDINARY_API_KEY = your_api_key
CLOUDINARY_API_SECRET = your_api_secret# Install root & backend dependencies
npm install
# Install frontend dependencies
cd frontend
npm install# Run both frontend and backend concurrently
npm run dev- HTTP -Only Cookies: Authentication tokens are never accessible via client-side JS, mitigating XSS risks.
- PCI Compliance: Sensitive card data never touches our servers; it is handled entirely by Stripe’s infrastructure.
- BCrypt Hashing: Industry-standard salted hashing for all user passwords.
- RTK Query: RTK Query: Optimized state management that reduces redundant API calls and ensures UI snappiness.
- Fork the Project
- Branch (feature/NewFeature)
- Commit
- Push
- PR
Distributed under the MIT License.
If you have any questions about this project or would like to collaborate, feel free to reach out:
Vincent Mutuku Full-Stack Software Engineer vincentmutuku.netlify.app
Built with 💎 by Vin Devs