An

INTERNSHIP REPORT
on

SHOP SMART - YOUR DIGITAL GROCERY STORE EXPERIENCE

(FULL STACK DEVELOPMENT-MERN)

Submitted in partial fulfillment of the requirements for the award of the degree of

BACHELOR OF TECHNOLOGY
in
ARTIFICIAL INTELLIGENCE & MACHINE LEARNING

By
[Link] NIKHIL
(Roll No. 23AK5A3310)

under the Mentorship of

Mr. P. Sudheer, MCA,
Assistant Professor, AI&ML Department

DEPARTMENT OF ARTIFICIAL INTELLIGENCE & MACHINE LEARNING

ANNAMACHARYA INSTITUTE OF TECHNOLOGY AND SCIENCES , TIRUPATI

(AUTONOMOUS)

Approved by AICTE , New Delhi & Permanent Affiliation to JNTUA, Anantapuramu .

Five [Link] Programmes ( ECE, CSE, EEE, CE, M ) are accredited by NBA, New Delhi .
Accredited by NAAC with 'A' Grade, Bangalore. Accredited by Institution of Engineers (India) KOLKATA .
A-grade awarded by AP Knowledge Mission . Recognized under sections 2(f) & 12(B) of UGC Act 1956 .
Venkatapuram (V), Renigunta (M), Tirupati, Tirupati District, Andhra Pradesh – 517520.
2025-2026
 ANNAMACHARYA INSTITUTE OF TECHNOLOGY AND SCIENCES ,
TIRUPATI (AUTONOMOUS)

DEPARTMENT OF ARTIFICIAL INTELLIGENCE & MACHINE

LEARNING

This is to certify that [Link] NIKHIL (23AK5A3310) has carried out Virtual Internship
on “Shop Smart – your digital grocery store experience” in (FULL STACK
DEVELOPMENT–MERN)” and submitted to the Department of ARTIFICIAL
INTELLIGENCE & MACHINE LEARNING of Annamacharya Institute of Technology and
Sciences, in partial fulfilment of the requirements for the award of the Degree of Bachelor of
Technology in Artificial Intelligence & Machine Learning is meeting the Academic
Regulations.

Signature of Internship Mentor Signature of HOD

 DECLARATION

I am [Link] NIKHIL (23AK5A3310), Studying Final year B. Tech in Artificial

Intelligence & Machine Learning of Annamacharya Institute of Technology and Sciences,
hereby declare that this Internship report titled “Shop Smart – your digital grocery store
experience” in (Full Stack Development-MERN) has been done by me. The Internship
work carried out is original and has not been submitted to any other University or Institution
for the award of any credits. I promise to meet all the mandatory requirements as specified by
the Academic regulations.

PLACE :

DATE : SIGNATURE
 ACKNOWLEDGEMENT
The needs and deeds of a particular person are only satisfied with the support and endurance
of many.
I would like to express my deepest appreciation for All India Council for Technical
Education, AICTE New Delhi for their commitment to the betterment of technical education
and the opportunities they have made available to our students. I am deeply grateful to
Andhra Pradesh State Council of Higher Education (APSCHE) and SmartBridge
Educational Services Pvt. Ltd. for organizing the internship program.
I would like to extend my heartfelt thanks to Principal [Link] Reddy for his
constant encouragement and support during the Internship period.
I would like to express my heartfelt thanks to Dr.C. Siva Balaji Yadav, Professor and HOD,
Department of AI&ML during the progress of Internship for her timely suggestions and help
in spite of her busy schedule.
I would like to extend my heartfelt thanks to our department Internship Coordinator Mr.K.R.
Rohith Kumar, Assistant Professor, Department of AI&ML for providing consistent
support for us to complete the course modules in order to complete my internship.
My heartfelt thanks to Internship mentor [Link], Assistant Professor, Department of
AI&ML for her valuable guidance and suggestions in analysis and testing throughout the
period, till the end of Internship work completion.
Finally, I would like to express my sincere thanks to faculty members of AI Department, Lab
Technicians, Internship company trainers and friends, one and all that have helped me to
complete the Internship successfully.

[Link] NIKHIL
Roll No : 23AK5A3310
 Full Stack Development-MERN

DEPT OF AI&ML, AITS, TIRUPATI PAGE 5

 Full Stack Development-MERN

DEPT OF AI&ML, AITS, TIRUPATI PAGE 6

 Full Stack Development-MERN

ABSTRACT

ShopSmart – your digital grocery store experience is a full-stack MERN (MongoDB,

[Link], React, [Link]) web application designed to transform traditional grocery shopping

into a seamless digital experience. The platform enables customers to browse, search, and filter

products, manage a shopping cart and wishlist, and place orders with ease. In parallel,

administrators are provided with a secure dashboard for managing products, inventory, and

customer orders through role-based authentication.

The system integrates a responsive React frontend, a [Link]/[Link] backend, and a cloud-

hosted MongoDB Atlas database, ensuring scalability, security, and performance. JWT-based

authentication and RESTful APIs strengthen data security and enable smooth communication

between client and server. Testing was carried out using Postman and browser DevTools to

validate functionality and user flows.

While the current version does not yet include payment gateway integration or real-time delivery

tracking, these are identified as key opportunities for future enhancement alongside product

ratings, reviews, and a dedicated mobile application. By combining robust full-stack development

practices with a user-friendly design, ShopSmart demonstrates how digital platforms can

effectively modernize grocery shopping and meet the evolving needs of consumers in an

interconnected world.

DEPT OF AI&ML, AITS, TIRUPATI PAGE 7

 Full Stack Development-MERN

CONTENTS
Page No.

1 Chapter1 ................................................................................................... 9

Introduction

2 Chapter 2 ............................................................................................... 10

Weekly Overview

3 Chapter 3 ............................................................................................... 11

Modules

4 Chapter 4 ................................................................................................ 18

Project

5 Chapter 5 ............................................................................................... 38

Result and Conclusions

6 Chapter 6 ............................................................................................... 40

Verifiable Credentials

DEPT OF AI&ML, AITS, TIRUPATI PAGE 8

 Full Stack Development-MERN
CHAPTER-1

INTRODUCTION
INTRODUCTION

In today’s fast-paced digital world, technology has transformed the way people shop and access
essential services. With the increasing demand for convenience, online grocery platforms have
gained significant importance, enabling customers to purchase daily essentials from the comfort
of their homes. Traditional grocery shopping often requires physical visits to stores, which can
be time-consuming and inconvenient, especially for working professionals, students, and
elderly individuals. To address these challenges, ShopSmart was developed as a digital grocery
store solution.

ShopSmart is a full-stack MERN (MongoDB, [Link], React, [Link]) based web application
that provides a seamless and user-friendly grocery shopping experience. The platform allows
customers to browse, search, and filter grocery products, manage their shopping cart and
wishlist, and place orders efficiently. In addition, the application includes an Admin
Dashboard, enabling administrators to manage product listings, monitor inventory, and process
customer orders securely.

The need for ShopSmart arises from the growing trend of digital commerce and the necessity
for reliable, accessible, and scalable online solutions. By integrating modern technologies such
as JWT- based authentication, RESTful APIs, and a cloud-hosted database, ShopSmart ensures
data security, smooth functionality, and scalability. The application caters to both customers and
administrators, offering a complete ecosystem that bridges the gap between traditional shopping
and modern e- commerce practices.

Thus, ShopSmart not only addresses the limitations of traditional shopping but also showcases
the effective implementation of full-stack development principles to create a practical, secure,
and scalable web solution for everyday use.

DEPT OF AI&ML, AITS, TIRUPATI PAGE 9

 Full Stack Development-MERN
CHAPTER-2

WEEKLY OVERVIEW

Introduction to ShopSmart project; Understanding the app

Week 1 concept, objectives, and target users.

Week 2
Requirement gathering and planning; Designing the system

architecture and tech stack selection (MERN).

Week 3
Setting up backend—[Link] and [Link]; Creating database
schemas and APIs with MongoDB.

Week 4
Frontend development—[Link] components, routing, and UI
design; Integration with backend APIs.

Week 5
Implementing key features—user authentication, product listing, cart,
and checkout functionality.

Week 6
Advanced functionalities—search, filters, payment integration, and
order management; Testing and debugging.

Week 7 Project work—finalizing all modules, ensuring smooth end-to-end

functionality; Preparing for deployment.

Week 8
Final compilation, testing, and submission of the full project along
with the project report.

CHAPTER-3

DEPT OF AI&ML, AITS, TIRUPATI PAGE 10

 Full Stack Development-MERN

MODULES
Modules of ShopSmart – Your Digital Grocery Store Experience
The ShopSmart application is designed to provide users with a seamless, interactive, and efficient
online shopping experience. To ensure smooth functionality and organized development, the
project has been divided into several key modules, each focusing on a specific aspect of the
application.

Module 1: Home Page

The Home Page serves as the main entry point of the application and is designed to provide users
with a comprehensive overview of the store. It displays featured products, trending categories, and
ongoing promotional offers, creating an engaging and visually appealing interface. The page also
facilitates easy navigation to other sections such as product listings, the cart, orders, and user
profiles, ensuring a smooth and intuitive browsing experience.

Module 2: Login and Registration

The Login and Registration module manages user authentication and account creation. It allows
new users to register by providing essential details and existing users to log in securely. This
module implements input validation, password encryption, and secure session management to
safeguard user data. Features like password recovery and account management further enhance
usability while maintaining robust security.

DEPT OF AI&ML, AITS, TIRUPATI PAGE 11

 Full Stack Development-MERN

Module 3: Cart
The Cart module manages the items that users intend to purchase. It allows users to add, remove,
or modify the quantity of products in their cart. Additionally, it calculates the total cost and
prepares users for a smooth checkout process. This module ensures a convenient shopping
experience by keeping track of selected items and providing a clear overview before purchase.

DEPT OF AI&ML, AITS, TIRUPATI PAGE 12

 Full Stack Development-MERN

Module 4: Orders
The Orders module maintains a record of all user purchases and provides detailed order history. It
displays essential information such as order status (pending, shipped, delivered), payment
confirmation, and shipping details. This module enhances user satisfaction by keeping users
informed about their purchases and expected delivery timelines.

Module 5: Admin Dashboard

The Admin Dashboard is designed to provide comprehensive control to the administrators of the
platform. It allows managing users, products, and orders efficiently. Additionally, the dashboard
provides analytical insights such as total sales, inventory levels, and product performance,
enabling informed decision-making. Admins can also add, edit, or remove products and manage
user accounts to maintain smooth operations of the store.

DEPT OF AI&ML, AITS, TIRUPATI PAGE 13

 Full Stack Development-MERN

Module 6: Wishlist

The Wishlist module allows users to save products they are interested in purchasing later.
Instead of immediately adding an item to the cart, users can mark it as a favorite, ensuring they
do not lose track of it. This feature improves the shopping experience by enabling customers to
revisit saved items without searching for them again.
The module stores product IDs linked to the user’s account in the database, ensuring that the
wishlist is persistent across sessions. Users can easily move items from the wishlist to the cart,

DEPT OF AI&ML, AITS, TIRUPATI PAGE 14

 Full Stack Development-MERN
or remove them if no longer interested. From a business perspective, this module is beneficial
as it highlights customer preferences, helping administrators identify popular products and plan
promotions accordingly.

Module 7: Profile

The Profile module provides users with access to their personal account details. It displays
basic information such as the user’s name and email address, which are stored in the database
during registration. Users are allowed to update their name if necessary, ensuring that their
profile remains accurate and up to date.
In addition to viewing and updating details, the profile module includes a logout option, which
securely ends the user session and prevents unauthorized access. This makes the module not
only useful for personalization but also essential for maintaining account security.

DEPT OF AI&ML, AITS, TIRUPATI PAGE 15

 Full Stack Development-MERN

Module 8: Search Bar

The Search Bar module allows users to quickly find products within the digital store. Instead
of browsing through categories, users can type keywords related to a product’s name, brand, or
category, and the system instantly displays relevant results.
This module improves efficiency and user convenience by enabling direct navigation to desired
products. On the backend, the search query is matched with the product database in MongoDB
Atlas, retrieving accurate and real-time results. It also supports partial matches, ensuring that
even if the user types only part of a product’s name, relevant suggestions are displayed. The
Search Bar enhances overall usability, reduces time spent in navigation, and ensures that users
can locate items with minimal effort—making it one of the most valuable features in improving
the online shopping experience.

DEPT OF AI&ML, AITS, TIRUPATI PAGE 16

 Full Stack Development-MERN

DEPT OF AI&ML, AITS, TIRUPATI PAGE 17

 Full Stack Development-MERN
CHAPTER-4

PROJECT
Project Objective
The objective of the ShopSmart project is to develop a modern, user-friendly digital store
application that allows users to browse, search, and purchase products online efficiently. The
application aims to combine functionality with simplicity, ensuring a seamless shopping
experience for users of all ages. By integrating features such as secure payment options,
interactive dashboards, and an organized product management system, the project seeks to
provide a fully functional e-commerce platform that can simulate real-world online shopping.
Additionally, it is designed to support future scalability, allowing the addition of more features
such as product reviews, wishlist, and personalized recommendations.

Purpose of the Project

With the rapid growth of e-commerce, there is a growing demand for applications that provide a
convenient, engaging, and secure shopping experience. ShopSmart addresses this need by
offering the following benefits:

• Simplifying Online Shopping for Users: Users can browse products, compare options,
and make purchases without visiting a physical store.
• Providing Real-Time Access to Products, Offers, and Order Information: The system
ensures that product availability, prices, and promotions are updated dynamically, giving
users accurate information at all times.
• Enabling Administrators to Efficiently Manage Products, Users, and Orders: Admins
can monitor the platform, manage inventory, and ensure smooth operations through a
centralized dashboard.
• Improving Overall Online Shopping Experience: Interactive and responsive design
elements enhance usability, while features such as search, filters, and notifications improve
engagement and convenience.

The purpose of ShopSmart is not just to create an application but to simulate a complete digital
shopping ecosystem that benefits both users and administrators.

DEPT OF AI&ML, AITS, TIRUPATI PAGE 18

 Full Stack Development-MERN
Technologies / Languages Used
The project leverages modern web development technologies to ensure high performance, scalability,
and maintainability:

• Frontend: [Link] – for building dynamic, interactive, and responsive user interfaces.
It allows component-based development, enabling easier updates and maintenance.
• Backend: [Link] and [Link] – for creating RESTful APIs, managing server-side logic,
and ensuring smooth communication between the frontend and database.
• Database: MongoDB – for storing user data, product details, order history, and other
essential information. Its flexible schema allows handling complex data structures
efficiently.
• Other Tools:
o HTML, CSS, JavaScript – for basic structure, styling, and interactivity.
o Redux (optional) – for managing complex frontend state across multiple components.
o Payment Gateway APIs – for secure and seamless online transactions.
o Nodemailer or similar – for sending notifications, order updates, and promotional
emails.

These technologies are combined in a MERN stack architecture, providing a robust, scalable, and
modern full-stack development solution.

Project Architecture and How It Is Built

ShopSmart follows a three-layer architecture to separate concerns, improve
maintainability, and enhance performance:

1. Frontend Layer:
o Built using [Link] to provide a responsive and interactive interface.
o Includes all visible components: Home Page, Login/Register, Product Listing, Cart,
Orders, and Admin Dashboard.
o Ensures smooth user interactions with real-time updates for products, offers, and cart
changes.

DEPT OF AI&ML, AITS, TIRUPATI PAGE 19

 Full Stack Development-MERN

2. Backend Layer:
o [Link] and [Link] handle all server-side operations.
o Manages API requests, user authentication, order processing, and other business logic.
o Ensures secure communication with the database and validates all inputs to maintain
data integrity.

3. Database Layer:
o MongoDB stores all essential information, including users, products, orders, and
admin data.
o Uses a flexible schema, allowing the addition of new features and data types without
major changes.
o Supports efficient queries and indexing to ensure fast retrieval of product listings and
user information.

DEPT OF AI&ML, AITS, TIRUPATI PAGE 20

 Full Stack Development-MERN

CODE:

[Link]
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<title>ShopSmart - Home</title>

<link rel="icon" type="image/png" href="images/[Link]"/>

<link href="[Link]
rel="stylesheet"/>

<link rel="stylesheet" href="styles/[Link]"/>

</head>

<body>

<!-- ✅ Sticky Navbar -->

<nav class="navbar navbar-expand-lg navbar-dark bg-dark px-4 shadow-sm fixed-top">

<a class="navbar-brand fw-bold text-success" href="[Link]">

DEPT OF AI&ML, AITS, TIRUPATI PAGE 21

 Full Stack Development-MERN
<img src="images/[Link]" alt="ShopSmart Logo" style="height: 48px; margin-right: 8px;">

ShopSmart

</a>

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-

target="#navbarButtonsCollapse">

<span class="navbar-toggler-icon"></span>

</button>

<div class="collapse navbar-collapse" id="navbarButtonsCollapse">

<ul class="navbar-nav me-auto">

<li class="nav-item">

<a href="[Link]" class="nav-link text-white">🏠 Home</a>

</li>

</ul>

<div class="ms-auto d-flex flex-column flex-lg-row align-items-start align-items-lg-center gap-2"

id="navbarButtons">

<!-- JS inserts user buttons here -->

</div>

</div>

</nav>

<!-- ✅ Spacer for fixed navbar -->

<div style="height: 40px"></div>

<!-- Header -->

<header class="bg-light text-center p-5">

<h1>Welcome to ShopSmart</h1>

<p>Your digital grocery store for daily needs</p>

</header>

DEPT OF AI&ML, AITS, TIRUPATI PAGE 22

 Full Stack Development-MERN
<!-- Search + Products -->

<div class="container mt-4">

<!-- Search -->

<div class="row mb-3">

<div class="col-md-6 mx-auto">

<input

type="text"

id="categorySearch"

class="form-control form-control-lg"

placeholder="Q Search by category or

name" oninput="handleCategorySearch()"

/>

</div>

</div>

<!-- Products -->

<div id="product-list" class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-4"></div>

</div>

<!-- Bootstrap JS -->

<script src="[Link]

<!-- Navbar Buttons Script -->

<script>

const navbarButtons =

[Link]("navbarButtons"); const user =

[Link]([Link]("user")); if (user) {

[Link] = `

DEPT OF AI&ML, AITS, TIRUPATI PAGE 23

 Full Stack Development-MERN
<span class="fw-bold text-white">Welcome, ${[Link]}!</span>

<a href="[Link]" class="btn btn-outline-success btn-sm">Cart</a>

<a href="[Link]" class="btn btn-outline-warning btn-sm">Wishlist</a>

<a href="[Link]" class="btn btn-outline-info btn-sm">Orders</a>

<a href="[Link]" class="btn btn-outline-primary btn-sm">Profile</a>

<button class="btn btn-sm btn-danger" onclick="logout()">Logout</button>

`;

} else

{ [Link] = `

<a href="[Link]" class="btn btn-outline-success btn-sm">Cart</a>

<a href="[Link]" class="btn btn-outline-warning btn-sm">Wishlist</a>

<a href="[Link]" class="btn btn-outline-success btn-sm">Login</a>

<a href="[Link]" class="btn btn-outline-primary btn-sm">Register</a>

`;

function logout()

{ [Link]();

[Link] =

"[Link]";

</script>

<!-- Product Logic -->

<script>

const API = "[Link] let

allProducts = []; function isLoggedIn() { const user =

DEPT OF AI&ML, AITS, TIRUPATI PAGE 24

 Full Stack Development-MERN
[Link]([Link]("user")); if (!user) {

alert("⚠️ Please login to continue.");

[Link] = "[Link]"; return false;

return true;

function renderProducts(products) {

const container = [Link]("product-list");

[Link] = '';

if ([Link] === 0) {

[Link] = '<p class="text-danger">No products found.</p>';

return;

[Link](product => {

const card = [Link]("div");

[Link] = "col";

[Link] = `

<div class="card h-100">

<img src="${[Link]}" class="card-img-top" alt="${[Link]}">

<div class="card-body">

<h5 class="card-title">${[Link]}</h5>

<p class="card-text">₹${[Link]} per ${[Link] || "piece"}</p>

<p class="card-text"><small class="text-muted">${[Link] || ""}</small></p>

<div class="d-flex gap-2">

<button class="btn btn-primary btn-sm" onclick='addToCart(${[Link](product)})'>Add to
Cart</button>

DEPT OF AI&ML, AITS, TIRUPATI PAGE 25

 Full Stack Development-MERN

<button class="btn btn-outline-danger btn-sm" onclick='addToWishlist($

{[Link](product)})'>❤️</button>

<button class="btn btn-success btn-sm" onclick='buyNow(${[Link](product)})'>Buy

Now</button>

</div>

</div>

</div>
`;

[Link](card);

});

function fetchProducts() {

fetch(`${API}/products`)

.then(res => [Link]())

.then(data =>

{ allProducts = data;

renderProducts(allProducts);

})

.catch(err => {

[Link]("❌ Failed to load products:", err);

[Link]("product-list").innerHTML = "<p class='text-danger'>Failed to load

products.</p>";

});

function handleCategorySearch() {

const query = [Link]("categorySearch").[Link]();

const filtered = [Link](p =>

DEPT OF AI&ML, AITS, TIRUPATI PAGE 26

 Full Stack Development-MERN
[Link]().includes(query) ||

([Link] && [Link]().includes(query)) ||

([Link] && [Link]().includes(query))

);

renderProducts(filtered);

function addToCart(product)

{ if (!isLoggedIn()) return;

let cart = [Link]([Link]('cart')) || [];

const existing = [Link](item => item._id === product._id);

if (existing) {

[Link] += 1;

} else

{ [Link]

= 1;

[Link](product);

[Link]('cart', [Link](cart)); alert(`$

{[Link]} added to cart!`);

function addToWishlist(product) { if (!isLoggedIn()) return;

let wishlist = [Link]([Link]('wishlist')) ||

[]; const exists = [Link](item => item._id ===

product._id); if (!exists) { [Link](product);

DEPT OF AI&ML, AITS, TIRUPATI PAGE 27

 Full Stack Development-MERN
[Link]('wishlist', [Link](wishlist)); alert(`$

{[Link]} added to wishlist!`);

} else {

alert(`${[Link]} is already in your wishlist.`);

function buyNow(product) { if (!isLoggedIn()) return; const

singleItemOrder = [{ ...product, quantity: 1 }];

[Link]("instantOrder",

[Link](singleItemOrder)); [Link] =

"[Link]";

// Initial product load

fetchProducts();

</script>

<div style="height: 50px;"></div>

<div class="fixed-bottom text-center text-white py-2 shadow" style="background-color:

#28a745;">

Enjoy shopping at <strong>ShopSmart</strong> 🛒

</div>

</body>

</html>
[Link]

<!DOCTYPE html>

<html lang="en">

<head>

DEPT OF AI&ML, AITS, TIRUPATI PAGE 28

 Full Stack Development-MERN
<meta charset="UTF-8" />

<title>Admin Dashboard - ShopSmart</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<link href="[Link]
rel="stylesheet"/>

<link rel="stylesheet" href="styles/[Link]" />

</head>

<body>

<!-- Navbar -->

<nav class="navbar navbar-dark bg-dark px-4">

<span class="navbar-brand"> ShopSmart Admin</span>

<button class="btn btn-danger btn-sm" onclick="logout()">Logout</button>

</nav>

<!-- Main Container -->

<div class="container mt-4">

<div class="row g-4">

<!-- Dashboard Cards -->

<div class="col-md-6 col-lg-4">

<div class="card text-bg-primary shadow">

<div class="card-body">

<h5 class="card-title">Manage Products</h5>

<p class="card-text">View, add, update, or delete products.</p>

<a href="[Link]" class="btn btn-light btn-sm">Go</a>

</div>

</div>

DEPT OF AI&ML, AITS, TIRUPATI PAGE 29

 Full Stack Development-MERN
</div>

<div class="col-md-6 col-lg-4">

<div class="card text-bg-success shadow">

<div class="card-body">

<h5 class="card-title">Manage Orders</h5>

<p class="card-text">View all user orders and update status.</p>

<a href="[Link]" class="btn btn-light btn-sm">Go</a>

</div>

</div>

</div>

<div class="col-md-6 col-lg-4">

<div class="card text-bg-warning shadow">

<div class="card-body">

<h5 class="card-title">Analytics</h5>

<p class="card-text">Coming soon: View insights & reports.</p>

<button class="btn btn-light btn-sm" disabled>Coming Soon</button>

</div>

</div>

</div>

</div>

</div> <script> const admin = [Link]([Link]("admin")); if (!admin || [Link] !

== "admin@[Link]") { alert("Access denied. Please login as admin."); [Link]

= "[Link]";

DEPT OF AI&ML, AITS, TIRUPATI PAGE 30

 Full Stack Development-MERN
function logout() { [Link]("admin"); [Link] = "admin-

[Link]";

</script>

</body>

</html>

[Link] /* General Body */ body { font-family: 'Segoe UI', sans-serif;

background-color: #f8f9fa;

/* Navbar */

.navbar {

background-color: #198754 !important;

.navbar .navbar-brand,
.navbar .nav-link, .navbar .btn { color: white !

important; .navbar .btn-outline-success,

.navbar .btn-outline-warning,

.navbar .btn-outline-primary { border: none;

/* Header */ header { background: linear-gradient(to right, #198754, #28a745); color: white; border-

radius: 10px;

/* Search Bar */ #categorySearch { border-radius: 10px; padding:

10px; border: 1px solid #ccc;

DEPT OF AI&ML, AITS, TIRUPATI PAGE 31

 Full Stack Development-MERN

/* Product Cards */

.card { border: none;

transition: transform 0.2s ease, box-shadow 0.3s ease;

.card:hover { transform: translateY(-5px); box-shadow: 0 4px 20px

rgba(0,0,0,0.1); .card img { object-fit: cover; height: 200px;

border-radius: 10px 10px 0 0;

/* Product Buttons */

.card .btn {

font-size: 0.9rem; border-radius: 20px;

.btn-outline-danger { color: #dc3545;

border: 1px solid #dc3545;

.btn-outline-danger:hover { background-color: #dc3545; color: white;

.btn-primary {

background-color: #198754;

border-color: #198754;

.btn-primary:hover { background-color: #146c43; border-color:

#146c43;

DEPT OF AI&ML, AITS, TIRUPATI PAGE 32

 Full Stack Development-MERN
.btn-success { background-

color: #20c997; border-color:

#20c997;

.btn-success:hover

{ background-color: #17a589;

border-color: #17a589;

/* Footer (if you want one later) */

footer { background-color:

#198754; color: white; padding:

1rem; text-align: center; margin-top:

3rem;

DEPT OF AI&ML, AITS, TIRUPATI PAGE 33

 Full Stack Development-MERN

How to Run the Project

To run the ShopSmart MERN Application, the following steps are followed:

1. Install Prerequisites o Install [Link] (v16 or higher recommended).

o Install MongoDB Atlas account and configure cluster (or use local MongoDB if
required).
o Install npm (comes with [Link]).
o Install a code editor such as Visual Studio Code (VS Code).
2. Clone or Set Up Project Files
o Place the project folder in the desired location.
o Open it in VS Code or any code editor.
3. Install Dependencies o Open the terminal and run:
o cd backend o npm install o cd ../frontend o npm install o This installs
all required libraries (Express, React, Mongoose, etc.).

4. Configure Environment Variables o In the backend folder, create a .env file with keys
such as:
o MONGO_URI = <your MongoDB Atlas connection string> o PORT = 5000

o JWT_SECRET = <your secret key>

5. Start the Backend Server

6. cd backend
7. npm start o The server will run on [Link] by default.

8. Go to the project folder on your system.

9. Open the frontend folder.

10. Locate the file [Link].

DEPT OF AI&ML, AITS, TIRUPATI PAGE 34

 Full Stack Development-MERN

11. Right-click on it and choose Open with → Browser (Chrome, Edge, Firefox, etc.).
12. The application will run directly in the browser using the path:

[Link]

13. From there, you can access all modules such as Home Page, Login/Register, Cart,
Wishlist, Orders, Profile, and Admin Dashboard.

Key Features and Functionality

• User Registration & Login: Secure authentication system with password encryption,
session management, and password recovery options.
• Product Listing & Details: Dynamic product display with images, descriptions, ratings,
and prices; search, filter, and sorting functionalities for easy navigation.
• Cart & Checkout: Manage items, update quantities, and complete purchases with secure
payment integration.
• Order Management: Track order history, view status updates, and receive real-time
notifications.
• Admin Dashboard: Manage users, products, and orders efficiently; view analytics for
sales, inventory, and product performance.
• Notifications: Keep users informed about order updates, promotional offers, and new
arrivals through email or in-app messages.

DEPT OF AI&ML, AITS, TIRUPATI PAGE 35

 Full Stack Development-MERN
Why This Project Is Useful

• Convenient Shopping: Users can browse, select, and purchase products from anywhere at
any time.
• Efficient Administration: Admins can monitor and manage all aspects of the store
efficiently from a single dashboard.
• Automation & Productivity: Automates order tracking, inventory management, and
notifications, reducing manual effort.
• Enhanced Engagement: Interactive dashboards, dynamic product listings, and timely
notifications keep users engaged.
• Scalable and Future-Ready: The architecture allows easy addition of new features like
reviews, ratings, and advanced analytics.

DEPT OF AI&ML, AITS, TIRUPATI PAGE 36

 Full Stack Development-MERN
CHAPTER-5

Results and Conclusions

Results
The ShopSmart project successfully achieved its objectives of developing a fully functional,
modern e-commerce application. The key results of the project are:

1. Functional Digital Store:

o Users can browse, search, filter, and view detailed product information seamlessly.
o The cart and checkout system allows smooth addition, removal, and modification
of products, leading to successful order placement.
2. Secure User Management:
o User authentication, registration, and session management are implemented
securely, ensuring user data protection.
o Password encryption and validation mechanisms prevent unauthorized access.
3. Order Tracking and Notifications:
o Users can track their orders in real-time, view order history, and receive
notifications regarding status updates, promotions, and offers.
4. Admin Dashboard Efficiency:
o Administrators can manage products, users, and orders efficiently from a single
dashboard.
o Analytical insights like total sales, product performance, and inventory status help
in better decision-making.
5. Responsive and Interactive Design:
o The application provides a consistent user experience across devices (desktop,
tablet, mobile).
o Interactive elements like dynamic dashboards, product filters, and sorting enhance
usability and engagement.
6. Integration of Technologies:
o The MERN stack architecture (MongoDB, [Link], [Link], [Link]) ensures
smooth data flow between frontend, backend, and database.
o Payment gateway integration allows secure and reliable online transactions.

DEPT OF AI&ML, AITS, TIRUPATI PAGE 37

 Full Stack Development-MERN
Conclusions
The ShopSmart project demonstrates the successful implementation of a modern digital store
with end-to-end functionality. Key conclusions drawn from the project include:

• The application provides a convenient and efficient shopping experience, meeting the
needs of users for easy product browsing, selection, and purchase.
• The admin dashboard simplifies product and order management, enhancing operational
efficiency.
• The use of the MERN stack enables a scalable, maintainable, and high-performance
solution, suitable for future upgrades and feature additions.
• Secure user authentication and payment systems ensure data safety and trust, which is
crucial for e-commerce applications.
• Overall, the project demonstrates the practical application of full-stack development
skills, combining frontend, backend, and database management into a cohesive platform.

DEPT OF AI&ML, AITS, TIRUPATI PAGE 38

 Full Stack Development-MERN

CHAPTER-6

VERIFIABLE CREDENTIALS

Verifiable Link for Certificate

[Link]

GitHub Repository Link

[Link]

QR-CODE FOR CERTIFICATE

DEPT OF AI&ML, AITS, TIRUPATI PAGE 39