Scribd
Upload
14 views5 pages

E-Commerce Web Application Report

The document outlines the development of a basic e-commerce web application using the MERN stack, featuring user authentication, product management, and a shopping cart. It details the project structure, backend and frontend development, and includes example code for both. The application supports role-based access for admins and customers, providing a responsive user interface and core functionalities such as product browsing and order processing.

Uploaded by

mythu1040
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
14 views5 pages

E-Commerce Web Application Report

The document outlines the development of a basic e-commerce web application using the MERN stack, featuring user authentication, product management, and a shopping cart. It details the project structure, backend and frontend development, and includes example code for both. The application supports role-based access for admins and customers, providing a responsive user interface and core functionalities such as product browsing and order processing.

Uploaded by

mythu1040
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Use Case 1: E-Commerce Web Application (Like Flipkart or Amazon)

Scenario:

A start-up wants a basic e-commerce platform for selling their products online. The student is

assigned to

build the application with the following requirements:

- User authentication and role-based access (Admin, Customer)

- Product listing, search, and filtering

- Shopping cart and checkout functionality

- Admin dashboard for managing products and orders

- MongoDB to store users, products, and orders

Key Skills Used: React (UI), Node.js & Express (API), MongoDB (database)

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.

You might also like