kavi report 2_merged
kavi report 2_merged
APPLICATION
A major project submitted in partial fulfillment of the requirements for the degree
of
MASTER OF SCIENCE
IN
COMPUTER SCIENCE
By
KAVIYARASAN S
[Reg. No: U23PG507CSC013]
PERIYAR UNIVERSITY
NAAC 'A++' Grade with
CGPA3.61(Cycle-3)
Professor,
Periyar University,
Salem-636011.
CERTIFICATE
This is to certify that the report of major project entitled as
Place: Salem
Date:
First, I would think God Almighty for providing me with everything that
I required in completing this project.
Date: [KAVIYARASAN S]
DECLARATION
I hereby, declare that the major project report entitled as “KS SMART
ONLINE GROCERY SHOPPING WEB APPLICATION” submitted to
Periyar University in partial fulfillment of their requirements for the award of
Degree of MASTER OF SCIENCE IN COMPUTER SCIENCE in the record
work carried out by me, under the supervision of Dr.I LAURENCE AROQUIARAJ
M.Sc., M.Phil., M.Tech., M.C.A., Ph.D. Professor, Department of Computer
Science, Periyar University, Salem-11, during the year 2023-2025. To the best of
my Knowledge, the work reported here in not part of which a degree or award
was conferred on an earlier to one or any other candidate.
Date: [KAVIYARASAN S]
CONTENTS
1 INTRODUCTION 2
SYSTEM CONFIGURATION
2 2.1 HARDWARE REQUIREMENTS 3
4 IMPLEMENTATION 8
5 DEPENDENCIES 11
6 USAGE AND LIMITATIONS OF THE SYSTEM 13
18
7 TESTING
21
8 CONCLUSION
9
FUTURE ENHANCEMENT 22
10
BIBLIOGRAPHY 24
APPENDIX
11 11.1 FLOWCHART AND CASE DIAGRAM 25
11.2 SOURCE CODE
11.3 RESULT
ABSTRACT
The grocery e-commerce system is a web-based platform designed to provide users with a
seamless online shopping experience for groceries and household essentials. Built using
modern technologies such as React, Vite, and TailwindCSS for the frontend, and Node.js
with Express for the backend, the system offers an intuitive interface for product browsing,
filtering, and purchasing.
The integration of Context API ensures efficient state management, particularly for the
shopping cart functionality. Secure authentication is implemented using JSON Web
Tokens (JWT) and password hashing with bcrypt. Users can add products to their cart,
update quantities, and proceed to checkout, with order details stored securely in a MySQL
database.
While the system currently lacks a payment gateway for online transactions, it supports
essential features for managing orders and tracking their status. Future enhancements may
include payment gateway integration, AI-powered product recommendations, real-time
notifications, and enhanced security features.
The grocery e-commerce system serves as a scalable and user-friendly solution, providing
a solid foundation for further development and expansion in the e-commerce sector.
1
CHAPTER - 1
INDRODUCTION
The grocery e-commerce system is a web-based platform designed to simplify the online
shopping experience for users by providing a convenient and efficient way to browse,
select, and purchase groceries. With the growing demand for online shopping, especially
in the grocery sector, this system addresses the need for a user-friendly platform that offers
seamless product discovery, secure transactions, and efficient order management.
The system consists of a frontend built using React and Vite, offering a responsive and
interactive user interface. TailwindCSS is used to ensure a clean and modern design. The
backend is powered by Node.js and Express, managing user authentication, product data,
and order processing. Secure authentication is achieved using JWT (JSON Web Tokens),
while bcrypt ensures password hashing for user data protection. Data management and
storage are handled using a MySQL database.
Key functionalities of the system include product listing, category filtering, and a shopping
cart feature using Context API for state management. Users can add products to their cart,
modify quantities, and proceed to checkout. Additionally, the system supports order
tracking, allowing users to monitor their purchases. Although a payment gateway is not
currently integrated, the architecture is designed to support future enhancements such as
payment processing, real-time notifications, and AI-driven product recommendations.
This project aims to provide a scalable and robust solution for grocery shopping, offering
both convenience to customers and operational ease for administrators. The grocery e-
commerce system serves as a foundation for further development, ensuring adaptability to
meet evolving user and business requirements.
2
CHAPTER - 2
SYSTEM CONFIGURATION
1. Hardware Requirements
• Processor: Intel Core i5 or equivalent (Minimum)
• RAM: 8 GB (Minimum), 16 GB (Recommended for smooth
development)
• Storage: 100 GB of free space for development and database storage
• Graphics: Integrated or dedicated GPU for UI testing (Optional)
• Network: Stable internet connection for API testing and package
management
🛠 2. Software Requirements
Frontend:
• Operating System: Windows, macOS, or Linux
• IDE/Code Editor: Visual Studio Code or any compatible editor
• Node.js: Version 18 or later
• Vite: Version 6 or later
• React: Version 19
• TailwindCSS: Latest version for UI styling
• Axios: For API integration
• NPM or Yarn: For package management
3
Backend:
• Node.js: Version 18 or later
• Express: Latest version for backend server management
• MySQL: Version 8.0 or later for database management
• Bcrypt: For password hashing
• JWT (JSON Web Tokens): For authentication
• Nodemon: For real-time server monitoring during development
3. Database Configuration
• Database Management System: MySQL
• Database Name: grocery_db
• User Management: Configured with secure credentials
• Tables: Users, Products, Orders, Cart, Categories
• Connection: Backend uses mysql2 library for database interaction
4. Development Tools
• Postman or Insomnia: For API testing
• Git: For version control and collaboration
• Docker (Optional): For containerized deployment
• Jest or Mocha: For unit and integration testing
4
5. Additional Configurations
• Environment Variables:
o .env file for storing sensitive data like database credentials and JWT
secret keys.
• API Base URL: Configured in the frontend for API requests.
• Port Configuration:
o Frontend: Typically runs on localhost:5173
o Backend: Typically runs on localhost:3000
• CORS: Enabled for cross-origin requests using Express middleware.
5
CHAPTER - 3
SYSTEM STUDY
The system study is a crucial phase in the development of any software application,
including the grocery e-commerce system. It involves understanding the existing
problems, analyzing user requirements, identifying system objectives, and proposing an
effective solution. Here's a breakdown of the system study for this project:
Feasibility Study
• Technical Feasibility: Uses well-supported technologies (React, Node.js,
MySQL) ensuring a stable system.
• Economic Feasibility: Reduces overhead costs of physical operations and reaches
a wider market.
• Operational Feasibility: Easy to use and maintain, even for non-technical users
and admins.
• Schedule Feasibility: Modular development allows implementation within a
reasonable timeframe.
7
CHAPTER - 4
IMPLEMENTATION
4. API Communication
• Frontend uses Axios to communicate with the Express API.
• All user, product, and order actions are done through RESTful API endpoints.
• JWT token is stored in local storage and attached to requests that require
authentication.
9
5. Security Features
• Passwords are hashed before being stored using bcrypt.
• Protected routes (like order placement) require a valid JWT token.
• User input is validated on both frontend and backend to prevent SQL injection or
malformed data.
10
CHAPTER - 5
DEPENDENCIES
There are numerous package.json files, most of which are from
node_modules, which are not what we are looking for. However, it seems like
the main project directories are /grocery/grocery-ecommerce and
/grocery/server. I'll check the package.json in those locations to find the actual
dependencies.
I found both the frontend and backend package.json files. I'll extract and
display the dependencies from them now.
Frontend Dependencies
• @google/generative-ai: ^0.24.0
• autoprefixer: ^10.4.20
• axios: ^1.8.0
• postcss: ^8.5.3
• react: ^19.0.0
• react-dom: ^19.0.0
• react-router-dom: ^7.2.0
• tailwindcss: ^3.4.17
DevDependencies:
• @eslint/js: ^9.19.0
11
• @types/react: ^19.0.8
• @types/react-dom: ^19.0.3
• @vitejs/plugin-react: ^4.3.4
• eslint: ^9.19.0
• eslint-plugin-react: ^7.37.4
• eslint-plugin-react-hooks: ^5.0.0
• eslint-plugin-react-refresh: ^0.4.18
• globals: ^15.14.0
• vite: ^6.1.0
Backend Dependencies
• bcrypt: ^5.1.1
• cors: ^2.8.5
• express: ^4.21.2
• jsonwebtoken: ^9.0.2
• mysql2: ^3.12.0
• nodemon: ^3.1.9
DevDependencies:
• @types/bcrypt: ^5.0.2
• @types/express: ^5.0.0
• @types/jsonwebtoken: ^9.0.
12
CHAPTER - 6
USAGE
Development Tools
1. vite, @vitejs/plugin-react
o Vite is a fast build tool and development server.
o Plugin for supporting React in Vite.
2. eslint, eslint-plugin-react, eslint-plugin-react-hooks
o For code linting and maintaining code quality.
3. @eslint/js, globals
13
o Provides ESLint rules and configuration.
4. @types/react, @types/react-dom
o TypeScript type definitions for React and DOM.
14
LIMITATIONS OF THE SYSTEM
1. Functional Limitations
• Basic Cart Management:
o While the cart feature is implemented, it may lack advanced
functionalities like product recommendations, wishlists, or
abandoned cart recovery.
• No Payment Gateway Integration:
o If there's no payment gateway, it can’t process online payments,
limiting transactions to cash on delivery.
• Limited Product Customization:
o Users may not be able to customize orders (e.g., selecting product
variants or quantities easily).
• Lack of Real-Time Updates:
o Without WebSocket or polling, the cart or product availability might
not reflect real-time changes.
2. Technical Limitations
• Client-Side Heavy:
o Relying on React and Vite without server-side rendering (SSR) may
impact SEO and initial load time.
• API Dependency:
o If the backend APIs are down or fail, the frontend has no offline
mode or graceful error handling.
• Limited Scalability:
o Using a single MySQL database without sharding or load balancing
may lead to performance issues under high traffic.
15
• No Caching Mechanism:
o Without caching, frequent database queries may increase server load
and response time.
3. Security Limitations
• Weak Authentication:
o JWT-based authentication is useful but may lack features like multi-
factor authentication (MFA).
• Password Management:
o While bcrypt ensures password hashing, no additional security
measures like rate limiting or account lockout are mentioned.
• Data Exposure:
o Lack of encryption for sensitive data transmission can lead to
potential data leaks.
16
5. Future Expansion Limitations
• No Multi-Vendor Support:
o The system seems designed for a single vendor. Supporting multiple
vendors would require significant architectural changes.
• Lack of Analytics:
o No tools for tracking user behavior, product performance, or sales
analytics are integrated.
• No Notification System:
o Users may not receive order updates, promotions, or notifications
without a real-time notification feature.
17
CHAPTER - 7
TESTING
✅ 1. Unit Testing
• Purpose: Test individual components, functions, or modules.
• Tools:
o Frontend: Jest, React Testing Library
o Backend: Mocha, Chai, Supertest
• Examples:
o Test React components like ProductCard, Cart, or Filters.
o Verify API endpoints using mock requests.
o Test utility functions like price calculations.
🧪 2. Integration Testing
• Purpose: Test interactions between components and services.
• Tools:
o Jest with Mock Service Worker (MSW)
o Supertest for API testing
• Examples:
o Test the communication between the frontend and backend.
o Verify if product data is fetched and displayed correctly.
o Check if the cart updates correctly when items are added.
18
• Examples:
o Simulate a user browsing products, adding items to the cart, and
completing a checkout.
o Verify error handling when APIs fail.
🔐 4. Security Testing
• Purpose: Identify vulnerabilities and ensure data protection.
• Tools:
o OWASP ZAP, Postman for API security testing
• Examples:
o Test JWT token validation for authentication.
o Perform SQL injection and XSS attack tests.
📊 5. Performance Testing
• Purpose: Ensure the system handles traffic efficiently.
• Tools:
o Apache JMeter, k6
• Examples:
o Simulate thousands of concurrent users to test backend API
performance.
o Monitor response time and server resource consumption.
19
🧰 7. Recommended Tools for Your Tech Stack
• Frontend: Jest, React Testing Library, Cypress
• Backend: Mocha, Chai, Supertest
• API: Postman, Insomnia
• CI/CD: GitHub Actions, CircleCI for automated testing
20
CHAPTER - 8
CONCLUSION
21
CHAPTER - 9
FUTURE ENHANCEMENT
Real-Time Updates:
Implement WebSocket or similar technologies for dynamic cart updates,
inventory tracking, and order status notifications.
AI-Driven Recommendations:
Provide personalized product suggestions based on user preferences and
shopping behavior.
Review and Rating System:
Allow users to rate and review products to enhance customer trust and
decision-making.
Multi-Vendor Support:
Expand the platform to support multiple sellers, increasing product variety
and competition.
Enhanced Security:
Implement multi-factor authentication (MFA), role-based access control
(RBAC), and improved API security.
Analytics and Reporting:
Integrate tools for real-time data analysis, generating insights into user
behavior and sales performance.
Microservices Architecture:
Improve scalability and maintainability by breaking the system into
smaller, independent services.
Caching Mechanisms:
Use solutions like Redis to reduce database load and improve response
times.
22
Progressive Web App (PWA):
Develop a PWA version to ensure a seamless, app-like experience on
mobile and desktop devices.
Order Tracking and Notifications:
Provide real-time order tracking with push notifications to keep users
informed.
Loyalty and Reward Programs:
Implement a point-based loyalty system to encourage repeat purchases and
customer retention.
23
CHAPTER - 10
BIBLIOGRAPHY
24
CHAPTER - 11
APPENDIX
11.1 FLOWCHART :
25
CASE DIAGRAM :
ARCHITECTURE :
26
11.2 SOURCE CODE :
Index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css
" rel="stylesheet" integrity="sha384-
QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6h
W+ALEwIH" crossorigin="anonymous">
<link rel="icon" type="image/svg+xml" href="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcSjcCHQfg7G7N-
8mR_UGJqqnq0ebvLY9e_HhgNrOEBaebV8TZp2_BSBWXgHuyIrabSHEtI
&usqp=CAU" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Grocery online shop</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
App.jsx:
const images = [
'https://t4.ftcdn.net/jpg/10/12/78/81/240_F_1012788183_sTeQ5erXIWN
djXCD9vxbOL6DD7VCIVi0.jpg',
'https://as2.ftcdn.net/v2/jpg/02/08/39/07/1000_F_208390795_ZJCAgG8i
Z02jp1PgN7oAHfiK76Qbmc9B.jpg',
'https://t3.ftcdn.net/jpg/06/94/61/54/240_F_694615457_lquEGMmKewy
MjAfoQKo5zsTMS92iW6U4.jpg',
'https://t3.ftcdn.net/jpg/00/81/83/04/240_F_81830420_ewjyAWnwt1XS
2dpiaMWW9KJwQ4KjsQkM.jpg',
'https://t3.ftcdn.net/jpg/09/49/50/86/240_F_949508651_9WrpT5CRmPx
J7DJH53i8MHjc6GVMb5WI.jpg'
];
useEffect(() => {
29
const scrollContainer = scrollContainerRef.current;
let scrollAmount = 0;
const scrollStep = 500;
setIsLoading(true);
try {
const genAI = new
GoogleGenerativeAI(import.meta.env.VITE_GEMINI_API_KEY);
const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash"
});
const result = await model.generateContent(msg);
const newMessages = [
30
...messages,
{ sender: "user", text: msg },
{ sender: "bot", text: result.response.text() },
];
setMessages(newMessages);
setisResponseScreen(true);
setMessage("");
} catch (error) {
console.error("Gemini API Error:", error);
setMessages([...messages, { sender: "bot", text: "Oops! Something went
wrong. Please try again." }]);
} finally {
setIsLoading(false);
}
};
useEffect(() => {
const chatContainer = document.querySelector('.chatbot-messages');
if (chatContainer) {
chatContainer.scrollTop = chatContainer.scrollHeight;
}
}, [messages, isLoading]);
useEffect(() => {
if (isResponseScreen) {
setTimeout(() => {
document.querySelector(".chatbot-input input")?.focus();
}, 0);
}
}, [isResponseScreen]);
return (
<>
<div>
<header className="header">
<h1 class="modern-heading">Welcome to Our Grocery Store!</h1>
<link
31
href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display
=swap" rel="stylesheet">
</link>
<div className='para'>
<main className="main-content">
<section className="horizontal-scroll">
<h2>Our Best Picks</h2>
<hr />
<div className="carousel-wrapper">
<div className="scroll-container" ref={scrollContainerRef}>
{images.concat(images).map((src, index) => (
<img key={index} src={src} alt={`Product ${index +
1}`} />
))}
</div>
<button className="shop-now-overlay" onClick={() =>
navigate('/products')}>
Shop Now
</button>
</div>
</section>
</main>
</div>
{isResponseScreen && (
<div className="chatbot-popup">
<div className="chatbot-header">
<h4>Chatbot</h4>
<button onClick={() =>
setisResponseScreen(false)}>✖</button>
</div>
<div className="chatbot-messages">
{messages.map((msg, index) => (
<div key={index} className={`chat-message
${msg.sender}`}>
{msg.text}
</div>
))}
{isLoading && <div className="chat-message
bot">Typing...</div>}
</div>
<div className="chatbot-input">
<input
type="text"
value={message}
onChange={(e) => setMessage(e.target.value)}
onKeyDown={(e) => e.key === "Enter" && hitRequest()}
placeholder="Type your message..."
/>
<button onClick={hitRequest}>Send</button>
</div>
</div>
)}
</div>
</>
);
};
33
export default HomePage;
Register.jsx:
try {
const response = await axios.post('http://localhost:3000/auth/register',
values);
if (response.status === 201) {
navigate('/login');
}
34
} catch (err) {
setErrorMsg('Registration failed. Try again.');
console.log(err.message);
}
};
return (
<div className="register-bg">
<div className="glass-card">
<h2 className="glass-title">Create Account</h2>
{errorMsg && <p className="glass-error">{errorMsg}</p>}
<form onSubmit={handleSubmit}>
<input
type="text"
name="username"
placeholder="Username"
className="glass-input"
onChange={handleChanges}
/>
<input
type="email"
name="email"
placeholder="Email"
className="glass-input"
onChange={handleChanges}
/>
<input
type="password"
name="password"
placeholder="Password"
className="glass-input"
onChange={handleChanges}
/>
<button type="submit" className="glass-button">
Register
</button>
</form>
35
<div className="glass-footer">
<span>Already have an account?</span>
<Link to="/login" className="glass-link">
Login
</Link>
</div>
</div>
</div>
);
};
Login.jsx:
if (!values.email || !values.password) {
setErrorMsg('All fields are required.');
return;
}
36
try {
const response = await axios.post('http://localhost:3000/auth/login', values);
if (response.status === 201) {
localStorage.setItem('user', JSON.stringify(response.data));
navigate('/');
}
} catch (err) {
setErrorMsg('Invalid email or password.');
console.log(err.message);
}
};
return (
<div className="login-bg">
<div className="glass-card">
<h2 className="glass-title">Welcome Back</h2>
{errorMsg && <p className="glass-error">{errorMsg}</p>}
<form onSubmit={handleSubmit}>
<input
type="email"
name="email"
placeholder="Email Address"
className="glass-input"
onChange={handleChanges}
/>
<input
type="password"
name="password"
placeholder="Password"
className="glass-input"
onChange={handleChanges}
/>
<button type="submit" className="glass-button">
Sign In
</button>
</form>
37
<div className="glass-footer">
<span>New here? </span>
<Link to="/register" className="glass-link">
Create an account
</Link>
</div>
</div>
</div>
);
};
AdminPage.jsx:
try {
const response = await axios.post("http://localhost:3000/auth/add-product",
product);
alert(response.data.message);
setProduct({ name: "", category: "", price: "", image: "", description: "" });
} catch (error) {
console.error("Error adding product:", error);
alert("Failed to add product");
}
};
return (
<div className="admin-bg">
<div className="admin-page">
<h2>Admin Page - Add Product</h2>
<form onSubmit={handleSubmit} className="admin-form">
39
<input type="text" name="name" placeholder="Product Name"
value={product.name} onChange={handleChange} />
<select name="category" value={product.category}
onChange={handleChange}>
<option value="">Select Category</option>
<option value="Fruits">Fruits</option>
<option value="Vegetables">Vegetables</option>
<option value="Dairy">Dairy</option>
<option value="Bread & Baked goods">Bread & Baked goods</option>
<option value="Meat & Fish">Meat & Fish</option>
<option value=" Cans & Jars">Cans & Jars</option>
<option value=" Pasta,rice & cereals">Pasta,rice & cereals</option>
<option value=" Sauces & Condiments">sauces & condiments</option>
<option value=" Herbs & Spices">Herbs & Spices</option>
<option value="Frozen Foods">Frozen Foods</option>
<option value=" Drinks">Drinks</option>
<option value="Household & Cleaning">Household &
Cleaning</option>
</select>
<input type="text" name="measurement"
placeholder="measurementPrice" value={product.measurement}
onChange={handleChange} />
<input type="number" name="price" placeholder="Price"
value={product.price} onChange={handleChange} />
<input type="text" name="image" placeholder="Image URL"
value={product.image} onChange={handleChange} />
<textarea name="description" placeholder="Product Description"
value={product.description} onChange={handleChange}></textarea>
<button type="submit">Add Product</button>
</form>
<br></br>
<h2>Search Orders by User Name</h2>
<input
type="text"
placeholder="Enter user name"
value={searchName}
onChange={(e) => setSearchName(e.target.value)}
40
/>
Server .env:
DB_HOST="localhost"
DB_USER="root"
DB_PASSWORD=""
DB_NAME="grocery"
PORT=3000
JWT_KEY="jwt-secret-key"
[email protected]
eMAIL_PASS=Pw-Kavi@2003
users Table:
1.Home page
2.Product Page
43
3.Cart Page
4.Register Page
44
5.Login Page
6.Order Summery
45
7.Place Order Successfully
8.Admin Page
46
9.Contact Page
47
10. Contact us Message Received For Admin
48