Scribd
Upload
3 views4 pages

E-Commerce Web App Practical Report

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
3 views4 pages

E-Commerce Web App Practical Report

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/ 4

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