MoraMart is a full-stack, feature-rich e-commerce application built for speed and scalability. It features a modern UI with Framer Motion animations, secure payments via Stripe, real-time admin analytics, and a robust caching system using Redis.
👉 Click here to visit MoraMart Live
Home Page and Product Category
Shopping Cart
Admin Dashboard
Checkout Success
Mobile View
- Secure Authentication: Sign up and Login using JWT (Access & Refresh Tokens) with HTTP-Only cookies.
- Browse & Filter: Explore products by categories (Jeans, Shoes, Glasses, etc.) with a beautiful, responsive UI.
- Featured Products: Carousel slider highlighting top products.
- Smart Recommendations: "People also bought" section powered by MongoDB aggregation.
- Shopping Cart:
- Add/Remove items
- Adjust quantities in real-time
- Persistent Cart: Cart items are saved to the database, so you never lose them even if you switch devices
- Coupon System: Apply discount codes at checkout.
- Stripe Checkout: Secure, PCI-compliant payment processing.
- Confetti Celebration: Fun animation upon successful purchase.
- Product Management:
- Create new products with image uploads (handled via Cloudinary)
- Delete products
- Toggle "Featured" status (Updates the homepage slider instantly)
- Analytics Dashboard:
- Visual Line Charts (Recharts) showing Daily Sales and Revenue trends
- Quick stats: Total Users, Total Products, Total Sales, Total Revenue
- Redis Caching: Featured products are cached for lightning-fast load times.
| Technology | Purpose |
|---|---|
| React (Vite) | Fast UI framework with instant module replacement |
| Tailwind CSS | Utility-first CSS framework for styling |
| Zustand | Lightweight global state management (Cart, User, Products) |
| Framer Motion | Smooth, production-ready animations |
| Lucide React | Beautiful, consistent SVG icons |
| Recharts | Composable charting library for analytics |
| Axios | Promise-based HTTP client |
| React Hot Toast | Elegant notifications and alerts |
| Technology | Purpose |
|---|---|
| Node.js & Express | Server and API routing |
| MongoDB & Mongoose | NoSQL database with object modeling |
| Redis (Upstash) | In-memory caching for featured products |
| Cloudinary | Cloud-based image storage and optimization |
| Stripe API | Secure payment processing |
| JWT & bcryptjs | Authentication and password hashing |
To run this project locally, create a .env file in the backend directory with the following variables:
# Server Configuration
PORT=5000
MONGO_URI=your_mongodb_connection_string
NODE_ENV=development
# Authentication Secrets
ACCESS_TOKEN_SECRET=your_super_secret_access_key
REFRESH_TOKEN_SECRET=your_super_secret_refresh_key
# Redis (Caching)
REDIS_URL=your_redis_connection_string
# Cloudinary (Image Uploads)
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret
# Stripe (Payments)
STRIPE_SECRET_KEY=your_stripe_secret_key
CLIENT_URL=http://localhost:5173
# Frontend Keys (If needed in .env or strictly in Vite config)
# VITE_STRIPE_PUBLISHABLE_KEY=your_stripe_publishable_keygit clone https://github.com/yourusername/moramart.git
cd moramartBackend:
npm installFrontend:
cd frontend
npm installTerminal 1 (Backend):
# From root
npm run dev
# Server will start on http://localhost:5000Terminal 2 (Frontend):
# From frontend folder
cd frontend
npm run dev
# App will start on http://localhost:5173This project is configured for Single Deployment. The frontend is built into static files and served by the Express backend.
npm run buildThis command:
- Installs backend dependencies
- Enters the frontend folder
- Installs frontend dependencies
- Builds the React app
- Moves the
distfolder to the backend
npm startmoramart/
├── backend/
│ ├── models/
│ ├── routes/
│ ├── controllers/
│ ├── middleware/
│ ├── server.js
│ └── package.json
├── frontend/
│ ├── src/
│ │ ├── components/
│ │ ├── pages/
│ │ ├── store/
│ │ ├── App.jsx
│ │ └── main.jsx
│ ├── vite.config.js
│ └── package.json
├── .env
├── .gitignore
├── package.json
└── README.md
- JWT Authentication: Secure token-based authentication with refresh tokens
- HTTP-Only Cookies: Prevents XSS attacks
- Password Hashing: bcryptjs for secure password storage
- PCI Compliance: Stripe handles all sensitive payment data
- CORS Protection: Configured to accept requests only from trusted origins
- Input Validation: Server-side validation on all endpoints
POST /api/auth/signup- Register a new userPOST /api/auth/login- Login userPOST /api/auth/logout- Logout userPOST /api/auth/refresh- Refresh access token
GET /api/products- Get all productsGET /api/products/:id- Get single productPOST /api/products- Create product (Admin)DELETE /api/products/:id- Delete product (Admin)
GET /api/cart- Get user's cartPOST /api/cart- Add to cartPUT /api/cart/:id- Update cart itemDELETE /api/cart/:id- Remove from cart
POST /api/orders- Create orderGET /api/orders- Get user's orders
GET /api/admin/analytics- Get sales analytics (Admin)
Contributions are welcome! Here's how to contribute:
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See LICENSE for more information.
[Your Name]
- GitHub: @https://github.com/code0era/
- LinkedIn: www.linkedin.com/in/shubham-yadav-38a467267/
- Email: [email protected]
- MongoDB for the database
- Stripe for payment processing
- Cloudinary for image hosting
- Framer Motion for animations
- Recharts for charting
If you have any questions or issues, please feel free to:
- Open an issue on GitHub
- Contact me via email
- Reach out on LinkedIn
Happy Coding! 🎉
Build With love💖 @code0era 🎉