A Modern Full-Stack E-Commerce Platform Built with MERN Stack
- Overview
- Screenshots
- Features
- Tech Stack
- Architecture
- Getting Started
- Project Structure
- Environment Variables
- Usage Guide
- API Documentation
- Deployment
- Roadmap
- Contributing
- License
- Contact
SCATCH MART is a cutting-edge, full-featured e-commerce platform built with the MERN stack (MongoDB, Express.js, React, Node.js). This modern web application delivers a seamless online shopping experience with secure authentication, advanced product management, dynamic cart functionality, and a comprehensive admin panel.
The platform features a responsive, mobile-first design built with React 19, Vite, and Tailwind CSS v4, ensuring optimal performance and user experience across all devices.
- Modern Architecture: Built with React 19 and latest web technologies
- Performance First: Optimized with code splitting, lazy loading, and skeleton screens
- Secure: JWT-based authentication with role-based access control
- Scalable: Modular design with Context API and reducer pattern
- Developer Friendly: Clean code, ESLint configuration, and comprehensive documentation
Modern, responsive landing page with hero section and featured products
Advanced product filtering and search with category-based navigation
Detailed product view with image gallery, specifications, and related products
Dynamic cart with quantity management and real-time price calculations
User Login |
User Registration |
Password Recovery |
User Profile |
Comprehensive admin dashboard with analytics and user activity tracking
Product Management |
Order Management |
Fill your Shipping Details |
Choose Your Payment method |
Order Confirmed |
Optimized mobile experience with touch-friendly interface
- Secure JWT-based Authentication with token management
- User Registration & Login with comprehensive form validation
- Password Recovery System with OTP verification
- Role-based Access Control (User/Admin)
- Session Management with React Context API
- Protected Routes with authentication guards
- Secure Password Hashing and validation
- Product Catalog with advanced filtering and search
- Product Details with image galleries and specifications
- Category-based Organization for easy navigation
- Related Products suggestions
- Product Reviews and ratings (planned)
- Real-time Inventory tracking
- Smart Shopping Cart with dynamic updates
- Quantity Management with real-time price calculations
- Cart Persistence across sessions
- Add/Remove Items with instant feedback
- Price Summary with tax and shipping calculations
- Checkout Process (payment integration planned)
- Complete Dashboard with analytics and insights
- Product Management - Add, edit, delete, and view products
- User Management - View and manage user accounts
- Analytics Dashboard with user activity tracking
- Role Verification and access control
- Bulk Operations for efficient management
- Responsive Design optimized for all devices
- Mobile-First Approach with touch-friendly interface
- Skeleton Loading for improved perceived performance
- Toast Notifications for user feedback
- Error Boundaries for graceful error handling
- Smooth Transitions and animations
- Dark Mode Support (planned)
| Technology | Version | Purpose |
|---|---|---|
 |
19.x | UI Library with concurrent features |
 |
5.x | Next-generation build tool |
 |
7.x | Advanced routing with nested routes |
 |
4.x | Utility-first CSS framework |
 |
6.x | CSS-in-JS library |
 |
5.x | React component library |
 |
1.6.x | HTTP client for API calls |
- React Context API with
useReducerpattern - Custom Hooks for API interactions
- Local Storage/Session Storage for persistence
- ESLint - Code linting and formatting
- Vite Dev Server - Fast development experience
- Git & GitHub - Version control and collaboration
- Node.js - Runtime environment
- Express.js - Web application framework
- MongoDB - NoSQL database
- Mongoose - ODM for MongoDB
- JWT - Token-based authentication
┌─────────────────────────────────────────────────────────┐
│ React Application │
├─────────────────────────────────────────────────────────┤
│ Pages Layer │
│ ├── Home, Login, Product Details, Cart, Admin Panel │
│ │
│ Components Layer │
│ ├── Shared: Navbar, Footer, SearchBar │
│ ├── Product: ProductCard, AddToCart, Filters │
│ ├── Admin: AdminPanel, AddProduct, UserManagement │
│ ├── Common: SkeletonLoader, ErrorBoundary │
│ │
│ State Management Layer (Context API + Reducers) │
│ ├── AuthContext → authReducer │
│ ├── ProductContext → productReducer │
│ ├── CartContext → cartReducer │
│ ├── AdminContext → adminReducer │
│ └── FilterContext → filterReducer │
│ │
│ API Layer (Custom Hooks) │
│ ├── useAuthApi() │
│ ├── useProductAPI() │
│ ├── useCartApi() │
│ └── useAdminApi() │
│ │
│ Utils Layer │
│ ├── axios.js (HTTP client config) │
│ ├── priceFormat.js (Formatting utilities) │
│ └── ErrorBoundary.jsx (Error handling) │
└─────────────────────────────────────────────────────────┘
│
▼
Backend REST API
Before you begin, ensure you have the following installed:
- Node.js (v18 or higher) - Download
- npm or yarn - Package manager
- Git - Version control
- Backend API - Running instance of the backend server
- Clone the Repository
git clone https://github.com/EgaleCoder/SCATCH_MART.git
cd SCATCH_MART- Install Dependencies
npm install
# or
yarn install- Configure Environment Variables
Create a .env file in the root directory:
cp .env.development .envUpdate the .env file with your configuration (see Environment Variables)
- Start Development Server
npm run dev
# or
yarn devThe application will be available at http://localhost:5173
- Build for Production
npm run build
# or
yarn build# Build and run with Docker
docker build -t scatch-mart .
docker run -p 5173:5173 scatch-martscatch-mart/
├── public/ # Static assets
│ └── assets/ # Images, icons, etc.
│
├── src/
│ ├── Components/ # React components
│ │ ├── Admin/ # Admin-specific components
│ │ │ ├── ActiveUser.jsx
│ │ │ ├── AddProduct.jsx
│ │ │ ├── AdminDetails.jsx
│ │ │ ├── AdminNavbar.jsx
│ │ │ ├── AdminPanel.jsx
│ │ │ ├── Home.jsx
│ │ │ ├── ShowProducts.jsx
│ │ │ └── Sidebar.jsx
│ │ │
│ │ ├── Common/ # Shared components
│ │ │ └── SkeletonLoader.jsx
│ │ │
│ │ ├── Home/ # Main user interface
│ │ │ ├── Buttons/
│ │ │ │ ├── Pay.jsx
│ │ │ │ └── ViewCart.jsx
│ │ │ ├── CategoryCard.jsx
│ │ │ ├── Footer.jsx
│ │ │ ├── Navbar.jsx
│ │ │ ├── Profile.jsx
│ │ │ ├── SearchBar.jsx
│ │ │ └── ShowProduct/
│ │ │ ├── AddToCart.jsx
│ │ │ ├── CardLoader.jsx
│ │ │ ├── ConfirmationCard.jsx
│ │ │ ├── FeatureSection.jsx
│ │ │ ├── FillterComponent.jsx
│ │ │ ├── MyImg.jsx
│ │ │ ├── Navigation.jsx
│ │ │ ├── ProductCard.jsx
│ │ │ ├── QuantitySelector.jsx
│ │ │ └── RelatedProducts.jsx
│ │ │
│ │ └── User/
│ │ └── UserProfile.jsx
│ │
│ ├── Pages/ # Route components
│ │ ├── AdminLogin.jsx
│ │ ├── Cart.jsx
│ │ ├── ForgetPassword.jsx
│ │ ├── Home.jsx
│ │ ├── Login.jsx
│ │ ├── PageNotFound.jsx
│ │ ├── ProductDetails.jsx
│ │ ├── ShowProducts.jsx
│ │ └── Signin.jsx
│ │
│ ├── context/ # React Context providers
│ │ ├── adminContext.jsx
│ │ ├── authContext.jsx
│ │ ├── cartContext.jsx
│ │ ├── fillterContext.jsx
│ │ └── productContext.jsx
│ │
│ ├── Hooks/ # Custom hooks
│ │ ├── useAdminApi.js
│ │ ├── useAuthApi.js
│ │ ├── useCartApi.js
│ │ └── useProductAPI.js
│ │
│ ├── reducer/ # Reducer functions
│ │ ├── adminReducer.js
│ │ ├── authReducer.js
│ │ ├── cartReducer.js
│ │ ├── fillterReducer.js
│ │ └── productReducer.js
│ │
│ ├── Routes/
│ │ └── ProtectedRoutes.jsx
│ │
│ ├── utils/ # Utility functions
│ │ ├── axios.js
│ │ ├── ErrorBoundary.jsx
│ │ └── priceFormat.js
│ │
│ ├── App.jsx # Main app component
│ ├── main.jsx # Entry point
│ ├── App.css
│ └── index.css
│
├── ProjectSS/ # Documentation
│ └── screenshots/ # Application screenshots
│
├── .env.development # Development environment variables
├── .env.production # Production environment variables
├── .gitignore
├── eslint.config.js
├── index.html
├── package.json
├── README.md
├── vite.config.js
└── LICENSE
Create a .env file in the root directory with the following variables:
# API Configuration
VITE_API_BASE_URL=http://localhost:5000/api
VITE_API_TIMEOUT=10000
# Authentication
VITE_JWT_SECRET=your_jwt_secret_key
VITE_JWT_EXPIRY=7d
# Application
VITE_APP_NAME=SCATCH MART
VITE_APP_VERSION=1.0.0
VITE_APP_ENV=development
# Features (Optional)
VITE_ENABLE_ANALYTICS=false
VITE_ENABLE_ERROR_REPORTING=false
# Payment Gateway (Coming Soon)
# VITE_STRIPE_PUBLIC_KEY=your_stripe_public_key
# VITE_RAZORPAY_KEY_ID=your_razorpay_key_id- Development:
.env.development - Production:
.env.production
// Navigate to signup page
/signup
// Fill registration form with:
- Full Name
- Email Address
- Password (min 8 characters)
- Confirm Password
// After registration, login with credentials
/login- Visit the home page to see featured products
- Use the search bar for specific items
- Apply filters (category, price range, ratings)
- Click on a product card for detailed view
- Add products to cart from product details page
- Manage quantities in cart
- Review cart before checkout
- Proceed to payment (integration coming soon)
- Access profile from navbar
- Update personal information
- View order history (coming soon)
- Manage addresses (coming soon)
// Navigate to admin login
/admin/login
// Use admin credentials provided by system administrator- Add Product: Fill product details form with images
- Edit Product: Update existing product information
- Delete Product: Remove products from catalog
- View Products: See all products with management options
- View all registered users
- Monitor user activity
- Manage user roles and permissions
- View user activity metrics
- Track sales and revenue (coming soon)
- Monitor popular products
- Analyze customer behavior
// User Registration
POST /api/auth/register
Body: { name, email, password }
// User Login
POST /api/auth/login
Body: { email, password }
Response: { token, user }
// Password Recovery
POST /api/auth/forgot-password
Body: { email }
// Verify OTP
POST /api/auth/verify-otp
Body: { email, otp }
// Reset Password
POST /api/auth/reset-password
Body: { email, newPassword, token }// Get All Products
GET /api/products
Query: ?page=1&limit=10&category=electronics
// Get Single Product
GET /api/products/:id
// Create Product (Admin)
POST /api/products
Headers: { Authorization: Bearer <token> }
Body: { name, description, price, category, images }
// Update Product (Admin)
PUT /api/products/:id
Headers: { Authorization: Bearer <token> }
// Delete Product (Admin)
DELETE /api/products/:id
Headers: { Authorization: Bearer <token> }// Get User Cart
GET /api/cart
Headers: { Authorization: Bearer <token> }
// Add to Cart
POST /api/cart/add
Headers: { Authorization: Bearer <token> }
Body: { productId, quantity }
// Update Cart Item
PUT /api/cart/update/:itemId
Headers: { Authorization: Bearer <token> }
Body: { quantity }
// Remove from Cart
DELETE /api/cart/remove/:itemId
Headers: { Authorization: Bearer <token> }
// Clear Cart
DELETE /api/cart/clear
Headers: { Authorization: Bearer <token> }// Get All Users (Admin)
GET /api/admin/users
Headers: { Authorization: Bearer <admin-token> }
// Get User Activity (Admin)
GET /api/admin/analytics/users
Headers: { Authorization: Bearer <admin-token> }
// Delete User (Admin)
DELETE /api/admin/users/:id
Headers: { Authorization: Bearer <admin-token> }For complete API documentation, visit the API Docs
- Install Vercel CLI:
npm install -g vercel- Deploy:
vercel- Configure environment variables in Vercel dashboard
- Build the project:
npm run build-
Deploy
distfolder to Netlify -
Configure environment variables in Netlify dashboard
# Dockerfile
FROM node:18-alpine as build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]Deploy:
docker build -t scatch-mart .
docker run -p 80:80 scatch-mart- User authentication and authorization
- Product catalog with filtering
- Shopping cart functionality
- Admin panel with product management
- Responsive design
- Skeleton loading states
- Payment gateway integration (Stripe/Razorpay)
- Order management system
- Product reviews and ratings
- Email notifications
- Advanced search with autocomplete
- Wishlist functionality
- Real-time inventory tracking
- Multi-vendor support
- Advanced analytics dashboard
- AI-powered product recommendations
- PWA features for offline support
- Multi-language support (i18n)
- Microservices architecture
- WebSocket integration for real-time updates
- Advanced caching strategies
- Mobile app (React Native)
- Performance monitoring
- A/B testing framework
Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
- 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
- Follow the existing code style and conventions
- Write meaningful commit messages
- Add tests for new features
- Update documentation as needed
- Ensure all tests pass before submitting PR
Please read our Code of Conduct before contributing.
Distributed under the MIT License. See LICENSE file for more information.
Abhinav Mishra - Developer
- GitHub: @EgaleCoder
- Email: ironabhi728@gmail.com
- Portfolio: My Portfolio
- LinkedIn: Abhinav Mishra
Project Link: https://github.com/EgaleCoder/SCATCH_MART
- React Documentation
- Vite Documentation
- Tailwind CSS
- Material-UI
- React Router
- Axios
- Font Awesome for icons
- All contributors who helped shape this project
SCATCH MART - Where Modern Technology Meets Exceptional Shopping Experience 🛒✨
Made with ❤️ by Abhinav Mishra