AIM
To build a basic e-commerce web application using the MERN stack (MongoDB, Express, React,
Node.js) that allows users to register, browse products, add items to the cart, and checkout. The app
includes role-based access for admin and customers to manage products and orders.
PROCEDURE
1. Setup Project Structure:
- Initialize separate projects for backend (Node.js + Express) and frontend (React.js).
- Connect backend to MongoDB Atlas or a local MongoDB database.
2. Backend Development:
- Configure Express server and establish connection with MongoDB.
- Define Mongoose schemas/models for User, Product, and Order.
- Implement REST API routes for user authentication, product CRUD operations, and order
processing.
3. Frontend Development:
- Create React components/pages for Home (product listing), Product Details, Login/Register,
Cart, Checkout, and Admin Dashboard.
- Use Axios for making HTTP requests to backend APIs.
- Implement role-based UI rendering for Admin and Customer.
4. Styling:
- Apply Bootstrap classes and custom CSS for a responsive and user-friendly interface.
5. Testing and Deployment:
- Test the application for functionalities such as user login, product browsing, cart actions, and
admin product management.
- Optionally deploy backend and frontend on platforms like Heroku, Netlify, or Vercel.
MAIN CODE
Backend (Express + MongoDB):
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const app = express();
app.use(cors());
app.use(express.json());
mongoose.connect('mongodb://localhost/ecommerceDB', { useNewUrlParser: true,
useUnifiedTopology: true });
const productSchema = new mongoose.Schema({
name: String,
price: Number,
image: String,
category: String,
});
const Product = mongoose.model('Product', productSchema);
app.get('/api/products', async (req, res) => {
const products = await Product.find();
res.json(products);
});
app.listen(5000, () => console.log('Server running on port 5000'));
Frontend (React Product Listing):
import React, { useEffect, useState } from 'react';
import axios from 'axios';
function ProductList() {
const [products, setProducts] = useState([]);
useEffect(() => {
axios.get('http://localhost:5000/api/products')
.then(res => setProducts(res.data))
.catch(err => console.error(err));
}, []);
return (
<div className="container">
<h2>Products</h2>
<div className="row">
{products.map(p => (
<div key={p._id} className="col-md-4 card m-2">
<img src={p.image} alt={p.name} className="card-img-top" />
<div className="card-body">
<h5>{p.name}</h5>
<p>Price: Rs.{p.price}</p>
</div>
</div>
))}
</div>
</div>
);
export default ProductList;
OUTPUT
On launching the app, users can view a list of available products with images, names, and prices.
Customers can register/login, add products to their cart, and proceed to checkout. Admins can
manage products and view orders via a dashboard.
RESULT
The e-commerce web application successfully demonstrates core functionalities including user
authentication, product browsing, cart management, and order processing. The system supports
role-based access and provides a responsive UI for both customers and admins.
