Project Overview

The Product Catalog System is a full-stack web application built using the MERN stack that allows users to create, manage, and view products with images.
It provides a clean and modern interface where all products are displayed publicly (no login required). Admins can easily add, edit, or delete products, upload product images, and maintain an organized catalog.
Images are uploaded directly to the backend server using Multer, stored in an /uploads folder, and their URLs are saved in the MongoDB database for efficient retrieval.

Screenshots

Key Features

• Full CRUD Operations: Add, edit, delete, and view products seamlessly.
• Multer Integration: Handles file uploads efficiently and securely.
• Modern UI: Built with TailwindCSS v4.1 for a clean, responsive, and fast user interface.
• Dynamic Product Grid: Auto-updating product list with responsive layout.
• Optimized Data Storage: Only image paths stored in DB to reduce load.
• Vite + React: Superfast frontend build and development environment.
• No Auth Complexity: Simple global data view—perfect for demos or learning CRUD.

Functionality

• Add Products
  • Add new products with name, price, description, and image upload.
• Edit / Update Products
  •  Update existing product details and optionally replace the image.
• Delete Products
  •  Remove any product instantly from the catalog.
• Image Upload & Storage
  •  Uploaded images are stored locally in the backend’s /uploads folder.
  •  Only the image URL is stored in MongoDB for lightweight database management.
• Product Listing
  •  Displays all products in a modern, responsive card layout with image, description, and price.
• No Authentication Needed
  •  A global catalog view – products are publicly visible without login/register.
• Instant UI Updates
  •  Real-time product updates using Axios API calls without page reloads.

Technology Used

• Frontend
  • React.js (Vite): Fast and modular UI development.
  • React Router DOM: Client-side routing between pages.
  • Axios: Handles API requests and image uploads.
  • Tailwind CSS v4.1: Modern, responsive, utility-first CSS styling.
• Backend
  • Node.js + Express.js: RESTful API server and routing.
  • MongoDB (Local): Stores product data and image URLs.
  • Mongoose: Schema modeling and data validation.
  • Multer: Handles file/image uploads efficiently.
  • CORS: Enables safe API communication between frontend and backend.

Why This Project Is Useful

• Practical Learning Project: Perfect for mastering file uploads, CRUD operations, and frontend-backend integration in MERN.
• Real-World Application: Mimics how real e-commerce platforms handle product data and images.
• Portfolio-Ready: Showcases React UI design, backend API development, and image handling in one project.
• Scalable Foundation: Can easily be extended into a full E-commerce system with authentication and cart features.
• No External Dependencies: Works entirely offline using local MongoDB and local uploads.

Deployment and Environment Setup

1. Environment Variables Setup:
   • backend/.env
     • PORT: 3000
     • MONGO_URI: mongodb_url_string
     • JWT_SECRET: your_jwt_secret_key_here (if needed)
   • frontend/.env
     • VITE_API_URL: backend_url
2. Deployment Overview:
   • Render or Railway for backend hosting
   • Vercel or Netlify for frontend hosting
   • MongoDB Atlas for the database
3. Backend Deployment:
   • Push your code to GitHub.
   • Go to Render.com or Railway.app.
   • Create a new Web Service and connect your GitHub repository.
   • Choose “backend/” as the root directory.
   • Add the following environment variables on Render:
   • PORT=10000
   • MONGO_URI=your MongoDB Atlas URI
   • JWT_SECRET=your JWT secret
   • Start command: npm start (Ensure your backend/package.json includes “start”: “node server.js”)
   • After deployment, note your backend URL, e.g. https://your-backend-name.onrender.com
4. Frontend Deployment:
   • Go to Vercel.com or Netlify.com.
   • Create a new project and connect the GitHub repo.
   • Select the “frontend/” folder as root.
   • In environment variables, set:
   • VITE_API_URL=https://your-backend-domain.com/api (or REACT_APP_API_URL if using CRA)
   • Deploy.
5. MongoDB Atlas Setup:
   • Go to https://cloud.mongodb.com
   • Create a free cluster.
   • Add your current IP address in Network Access.
   • Create a database user and password.
   • Copy the connection string and replace username, password, and database name in MONGO_URI in backend/.env

Download Source Code

Project Setup Instructions

Note: This project is for educational purposes only. Not for commercial sale.