E-Commerce Project Report (C2C)
E-Commerce Project Report (C2C)
Project Report on
2|Pa ge
International School of Management Patna
(APPROVED BY AICTE, MINISTRY OF HRD GOVT. OF INDIA)
Project Report on
3|Pa ge
DECLARATION
I hereby declare that the Project Work titled “Sellzy-E-commerce Website”, has been carried out by me
under the guidance of Mr. Sanu Kr (Assistant Professor), at International School of Management, Patna.
The work is original and has not violated any of plagiarism norms.
I also declare that this Project has not been submitted to any University/ Institute for the award of any
Degree/Diploma.
4|Pa ge
CERTIFICATE
This is to certify that the Project Work titled “Sellzy : E-commerce Website” has been accomplished by
Abhimanu Pandey , Reg. No. – 22303313132, BCA under my guidance and supervision. This project is
being submitted by him/her as the partial fulfilment of requirements for the award of BCA from
International School of Management Patna, Affiliated unit of Aryabhata Knowledge University, Patna.
This work has not been submitted by him/her anywhere else for the award of any degree or diploma. All
sources of information and help have been duly mentioned and acknowledged.
Report Guide:-
Mr.Sanu Kumar
Assistant Professor
Dept. of Computer Application
ISM PATNA
5|Pa ge
ACKNOWLEDGEMENT
The most awaited moment of successful completion of endeavour is always a result of persons involved
explicitly or implicitly there in. It is impossible without the help and guidance of the people around to carry
on this project work. I take the opportunity to express my sincere gratitude to each and every person who
gave me the guidance and help for preparing the report.
I take this opportunity to thanks to (Management), International School of Management for providing me an
opportunity to work for this Project.
I am also desirous of placing on record profound indebtedness to Mr. Sanu Kumar and all the members of
faculty of International School of Management, Patna, for the valuable advice, guidance and support that
they offered.
Last but not the least; I would also like to thanks all the respondents for giving me their time and relevant
information.
My strength and inspiration are the blessings of my parents and my friends. I owe all my success and
achievements to them.
~ Abhimanu Pandey
6|Pa ge
Table of Content
1. Introduction 9 - 12
3 Feasibility Study 13 – 24
5 System Design 26 - 35
5.3.3 ER Diagram
5.3.4 Schema
7|Pa ge
6. User Interface Design 36 – 40
7. Security Issues 41 - 43
8.1 Implementation
9 Conclusion 74 - 76
9.1 Conclusion
8|Pa ge
1. INTRODUCTION
1.1 Project Introduction:
Sellzy is a Consumer-to-Consumer (C2C) web application developed using the MERN stack
(MongoDB, Express.js, React.js, and Node.js). It is designed to provide a seamless online platform
for users to buy and sell products directly with each other, similar to OLX. Sellzy removes
intermediaries and allows users to create listings, communicate with potential buyers or sellers, and
complete transactions with ease and security.
The main aim behind developing Sellzy is to digitize the second-hand market and offer a user-
friendly, secure, and efficient marketplace for individuals. With the integration of modern web
technologies and third-party services like Razorpay for payments, MongoDB Atlas for database
hosting, Render/Vercel for deployment, and Postman for API testing, Sellzy brings a modern
and scalable solution for peer-to-peer commerce.
Sellzy is built to scale and can be extended to include features such as delivery integration, product
review systems, and advertisement promotions.
9|Pa ge
1.2 Objective of the Project:
The main objective of the Sellzy project is to develop a user-friendly, scalable, and secure online
platform where individuals can directly buy and sell products without involving third-party
resellers or intermediaries. The application aims to replicate and improve upon the functionality of
popular C2C platforms like OLX, with a focus on ease of use, quick listings, and safe transactions.
Key Objectives:
The scope of Sellzy encompasses the development and deployment of a full-fledged web-based
C2C (Consumer-to-Consumer) marketplace, enabling users to interact, list, and transact with
minimal friction. The project leverages the MERN stack, ensuring a modern and scalable
architecture suitable for real-world usage.
10 | P a g e
Functional Scope:
User Roles:
o Buyers: Can browse listings, contact sellers, and make purchases.
o Sellers: Can create and manage product listings.
o Admin: Can moderate content, manage users and oversee the platform.
Core Features:
o Product Listing with images, price, description, and category.
o Secure user registration and login system with authentication.
o Search and filter functionality for quick discovery of products.
o Integration with Razorpay for secure digital payments.
o Admin Dashboard for monitoring user activity and listings.
o Responsive frontend for seamless usage on all device sizes.
Technical Scope:
Frontend: Built with React.js using a modular folder structure for scalability.
Backend: Node.js with Express.js, organized into routes, controllers, and models following
MVC architecture.
Database: MongoDB Atlas used for cloud-hosted, scalable data storage.
Hosting & Tools:
o Frontend deployed on Vercel or Render
o Backend API deployed via Render
o APIs tested using Postman
o Source code managed via GitHub
Future Scalability:
11 | P a g e
1.4 Applicability of Project:
The Sellzy platform is designed to serve a wide range of users who seek a reliable, easy-to-use
medium for buying and selling goods without relying on intermediaries. Its applicability spans
across various domains, regions, and user needs, making it highly relevant in today’s digital
economy.
Real-World Applicability:
Second-Hand Marketplaces:
o Ideal for individuals looking to sell used or surplus items such as electronics, vehicles,
clothing, books, furniture, etc.
o Enables cost-effective buying options for students, households, and small businesses.
Local and Regional Commerce:
o Sellzy can be tailored for specific localities, cities, or states to promote hyper-local trade,
helping users discover nearby deals and interact in person if needed.
Niche Marketplaces:
o Can be extended to support niche markets such as handmade crafts, agricultural goods, or
digital products.
Startups and Small Businesses:
o Useful for small sellers or local entrepreneurs to test and sell their products online without
building a dedicated website or app.
Educational institutions can use similar models for internal book exchange, lost and found systems,
or project material sharing platforms among students.
12 | P a g e
2. REQUIREMENTS AND ANALYSIS
A. Functional Requirements
13 | P a g e
B. Non-Functional Requirements
1. Scalability:
o Built using MERN stack to support high traffic and database scalability.
2. Security:
o Passwords stored using hashing.
o Secure API communication using HTTPS and authentication middleware.
3. Performance:
o Fast loading with optimized queries and efficient frontend routing.
o Responsive design for all devices.
4. Reliability & Availability:
o Hosted using cloud services (Render, Vercel) to ensure minimal downtime.
5. Maintainability:
o Modular architecture (MVC pattern) with clean separation of concerns.
6. Usability:
o Simple UI/UX for easy navigation by non-technical users.
Sellzy is built using modern web development technologies and tools that ensure efficiency,
scalability, and maintainability. The project follows the MERN stack architecture and utilizes
several supporting platforms and tools for development, testing, deployment, and payment
integration.
14 | P a g e
A. Programming Languages & Frameworks
Technology Purpose
HTML5, Structure and styling of frontend pages
CSS3
JavaScript Main language for both frontend and backend logic
(ES6+)
React.js Frontend framework for building UI components
Node.js Backend JavaScript runtime
Express.js Web framework for handling server-side routing and
middleware
MongoDB NoSQL database used to store user and product data
Tool/Platform Purpose
Visual Studio Code (VS Code editor used for development
Code)
Postman API testing and development tool
GitHub Version control and code repository
Razorpay Payment gateway integration for secure
online payments
MongoDB Atlas Cloud-hosted MongoDB database
Render / Vercel Deployment platforms for backend and
frontend respectively
15 | P a g e
B. Additional Libraries/Dependencies
Library/Package Purpose
Mongoose Object Data Modeling (ODM) for MongoDB
JWT User authentication and authorization
(jsonwebtoken)
bcryptjs Password hashing
Multer File upload handling for product images
Axios HTTP client for API requests in frontend
React Router Navigation and routing in frontend
DOM
dotenv Managing environment variables
These technologies were chosen to ensure a modern, full-stack, cloud-deployable application that
is both developer- and user-friendly.
16 | P a g e
2.3 Software and Hardware Requirements:
This section outlines the necessary software and hardware configurations required for
developing, running, and maintaining the Sellzy application efficiently.
A.Software Requirements
A. Hardware Requirements
17 | P a g e
B.Hosting & Deployment Environment
Environment Tools/Platforms
Frontend Vercel (React-based deployment)
Hosting
Backend Render (Express.js/Node server)
Hosting
Database MongoDB Atlas (free-tier or paid cluster)
Hosting
This setup ensures that both development and production environments can run Sellzy smoothly,
with the flexibility to scale as required.
18 | P a g e
2.4 Use Case Diagram
USERS
19 | P a g e
ADMIN
20 | P a g e
2.5 Project Category:
The Sellzy project falls under the web-based application development category, specifically
focusing on the Consumer-to-Consumer (C2C) e-commerce model. It is designed to enable
end-users to directly interact and conduct transactions with each other without a central seller
entity.
C2C Functionality: The platform supports user-driven product listing, buying, and selling,
similar to OLX or eBay.
Full Stack Application: Sellzy uses the MERN Stack (MongoDB, Express.js, React, Node.js),
making it a full-stack JavaScript application.
Real-Time Features: Integration with Razorpay for secure online payments and MongoDB
Atlas for cloud-hosted databases provides real-world transactional capability.
Role-Based Operations: Both Users and Admins have clearly defined operations, making it a
multi-role web application.
21 | P a g e
Type
Attribute Details
Application Web Application
Type
Architecture MERN Stack (React + Node.js + Express + MongoDB)
Database Cloud NoSQL (MongoDB Atlas)
Payment Razorpay
Gateway
Deployment Vercel (Frontend), Render (Backend)
This classification helps in understanding the technical boundaries and the real-world relevance of
the project within current digital commerce solution.
22 | P a g e
3 FEASIBILITY STUDY
The Feasibility Study is a critical component of any software project. It assesses whether the proposed
system is technically, economically, operationally, and legally viable. For Sellzy, this analysis
confirms that the system can be implemented efficiently and effectively.
Technology Stack: The project uses the MERN stack, which is modern, scalable, and widely
supported.
Developer Skills: The technologies used (React, Node.js, MongoDB, Express) are open-source and
have vast documentation and community support.
Tool Support: Tools like VS Code, Postman, GitHub, Render, Vercel, and Razorpay provide seamless
development and integration.
Development Cost: Since most technologies used (MERN stack, Postman, GitHub, etc.) are open-
source or offer generous free tiers, the cost of development is very low.
Hosting Cost: Vercel and Render offer free plans suitable for small to mid-scale deployment.
Payment Gateway: Razorpay provides a free test environment and charges only per successful
transaction in production.
User Perspective: The user interface is intuitive and responsive, allowing users to easily list products,
browse, and communicate.
Admin Operations: Admin has necessary controls to manage platform activities without technical
intervention.
Platform Independence: Being web-based, Sellzy works across all platforms (desktop, mobile,
tablet).
23 | P a g e
3.6 Legal and Ethical Feasibility
Privacy and Security: Sensitive data like payments are processed via Razorpay, which is PCI-DSS
compliant.
Terms and Conditions: Basic user agreements and listing rules can be enforced to comply with legal
e-commerce practices.
Copyright Compliance: All software libraries used are under MIT or compatible open-source
licenses.
Final Verdict:
The Sellzy platform is fully feasible in terms of technical, economic, operational, and legal aspects.
24 | P a g e
4 SOFTWARE ENGINEERING PARADIGM
The software engineering paradigm defines the methodology and structured approach adopted during
the development of the Sellzy platform. It ensures that the software is built efficiently, maintainably,
and systematically.
Why Agile?
The Agile model is well-suited for Sellzy because:
Requirements evolved during development (new features like payment gateway, admin control
panel).
It supported incremental delivery and continuous improvement.
Easy integration of feedback from testing and deployment phases.
Deployment Frontend deployed via Vercel and backend via Render in stages.
Feedback & Modifications Changes implemented as per test results and deployment feedback.
Summary
The Agile software engineering paradigm provided a flexible and iterative approach to building Sellzy.
It supported continuous development, real-time testing, and smooth collaboration between different
modules.
25 | P a g e
5 SYSTEM DESIGN
System Design focuses on how the project is structured in terms of its modules, data, processes, and
interactions. It includes the architectural layout of the system and how its components work together.
Sellzy is divided into two major user roles: User and Admin. Each role has access to a set of
modules that fulfill specific functions.
User Modules
Module Description
User
Registration & Enables users to create accounts and authenticate.
Login
Product
Allows users to post products for sale.
Listing
Browse/Search Users can search or filter listings.
Chat or contact functionality for buyer-seller
Contact Seller
communication.
Make
Integrated Razorpay for online transactions.
Payment
Manage Own
Edit or delete user’s own product listings.
Listings
26 | P a g e
Admin Modules
Module Description
Admin
Secure admin access.
Login
Manage
View, block, or remove users if necessary.
Users
Approve
Approve or reject user-submitted product listings.
Listings
Manage
View and resolve reports on abusive content or users.
Reports
Dashboard View stats like number of users, listings, payments, etc.
Summary
The system is modular, meaning each component (login, product listing, admin controls) can
function and be maintained independently. This aligns with best practices in full-stack application
design using the MERN stack.
This section describes how data is structured and stored in the Sellzy system using MongoDB
(NoSQL). The database design ensures proper organization of user data, product listings,
transactions, and admin operations.
27 | P a g e
User Schema
Stores all personal and authentication-related data for both customers and admins.
Fields:
Product Schema
Fields:
28 | P a g e
Payment Schema
Fields:
Admin Schema
Stores the items a user has added to their cart before purchasing.
Fields:
29 | P a g e
5.3 Procedural Design:
Procedural Design focuses on the step-by-step logic of how each feature in Sellzy operates, how users
interact with the system, and how data is passed between components. It helps visualize the backend
logic, database interactions, and flow of control in the application.
Below is a step-by-step breakdown of the primary flows in the system, representing user
interaction and backend control:
30 | P a g e
5.3.1.4 Wishlist Functionality
31 | P a g e
5.3.2 Data Flow Diagram (DFD)
USER
32 | P a g e
ADMIN
33 | P a g e
5.3.3 E-R Diagram
34 | P a g e
5.3.4 Schema
35 | P a g e
6 USER INTERFACE DESIGN
HOME PAGE (Responsive UI):
36 | P a g e
SIGNUP PAGE:
LOGIN PAGE:
37 | P a g e
PROFILE PAGE:
38 | P a g e
PRODUCT PAGE:
39 | P a g e
PRODUCT AD PAGE:
WISHLIST PAGE:
40 | P a g e
7. SECURITY ISSUES
Security plays a crucial role in the success and trustworthiness of a C2C (Customer-to-Customer)
marketplace like Sellzy. This section outlines the key security practices and concerns considered during
development.
1. Password Hashing
Tool Used: bcryptjs
Purpose: Ensures that user passwords are never stored in plaintext in the database.
Implementation: Passwords are hashed during user registration and re-verified using hash
comparison during login.
Details:
o After login or registration, a JWT token is generated and sent to the client.
o Protected routes check the validity of the token before granting access.
4. Input Validation
Technique: Server-side and client-side validation for all forms.
Tools: Custom validation logic, MUI field validation, and backend schema constraints.
Goal: Prevent invalid/malicious data from entering the system (e.g., missing fields, invalid email
format).
41 | P a g e
5. Secure Payment Integration
Tool Used: Razorpay
Security:
6. Database Security
Access Control:
o MongoDB access is restricted using environment-specific credentials.
o Only the backend server can access the database; no public access is allowed.
Constraints:
o Email is unique.
o Password, email, and other required fields are validated using Mongoose.
7. HTTPS Deployment
Platform: Render or Vercel
Purpose: All frontend/backend communications are encrypted using HTTPS to protect data
in transit.
42 | P a g e
10. Backup Strategy
Frequency: Periodic database backups are recommended to prevent data loss.
Method: MongoDB collections can be backed up using tools like mongodump, or automated cloud
backups.
Storage: Backup files are stored in a secure external cloud environment with restricted access.
43 | P a g e
8. IMPLEMENTATION & TESTING
This section outlines the development lifecycle of Sellzy, including the actual implementation strategy, coding
process, testing techniques, and post-development improvements.
8.1 Implementation
Development Workflow
The application was built using the MERN Stack (MongoDB, Express.js, React.js, Node.js).
Version control and collaboration were managed through GitHub.
VS Code served as the primary development environment.
Deployment
Third-Party Integration
44 | P a g e
Gantt Chart
45 | P a g e
8.2 Coding Details
46 | P a g e
Folder Structure:
Client Server
47 | P a g e
CLIENT
App.js
function App() {
return (
<BrowserRouter>
<Header />
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/login" element={<Login />} />
<Route path="/signup" element={<Signup />} />
<Route path="/about" element={<About />} />
<Route path="/products" element={<ProductList />} />
<Route path= "/products/new" element={<ProductForm />}/>
<Route path="/products/:id" element={<ProductDetail />} />
<Route path="/profile" element={<Profile /> } />
<Route path="/orders" element={<Order />} />
<Route path="/Transactions" element={<Transactions />} />
<Route path="/Wishlist" element={<Wishlist />} />
<Route path="/chat" element={<Chat />} />
</Routes>
<Footer/>
</BrowserRouter>
);
}
48 | P a g e
Dependencies
"dependencies": {
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.0",
"@testing-library/dom": "^10.4.0",
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/react": "^16.3.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^1.9.0",
"framer-motion": "^12.12.1",
"lucide-react": "^0.509.0",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"react-icons": "^5.5.0",
"react-router-dom": "^7.5.3",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
Components
Header.jsx
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
return (
<div className="header">
<header className={`header-container ${isScrolled ? 'scrolled' : ''}`}>
<div className="header-announcement">
<span className="announcement-text">Sell your items faster with Premium
Listings!</span>
</div>
<div className="header-main">
<Link to='/'>
<div className="header-logo-container">
<div className="header-logo">
<span className="header-logo-first">Sell</span>
<span className="header-logo-second">zy</span>
</div>
<span className="header-tagline">Buy & Sell Anything</span>
</div>
</Link>
50 | P a g e
placeholder="Search for anything..."
className="header-search-input"
onFocus={() => setSearchFocused(true)}
onBlur={() => setTimeout(() => setSearchFocused(false), 200)}
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
/>
</div>
{searchFocused && suggestions.length > 0 && (
<div className="header-search-suggestions">
{suggestions.map((suggestion, index) => (
<div key={index} className="header-suggestion-item">
<Search size={14} className="header-suggestion-icon" />
<span>{suggestion}</span>
</div>
))}
</div>
)}
</div>
<div className="header-actions">
<button className="header-action-button header-sell-button">
<span className="header-sell-plus">+</span>
<span className="header-sell-text">Sell</span>
</button>
<div className="header-icon-buttons">
<Link to='/wishlist'>
<button className="header-icon-button">
<Heart size={22} className="header-icon" />
<span className="header-icon-text">Wishlist</span>
</button>
</Link>
<button className="header-icon-button">
<ShoppingCart size={22} className="header-icon" />
<span className="header-icon-text">Cart</span>
</button>
<Link to='/profile'>
<button className="header-icon-button" onClick={toggleMenu}>
<User size={22} className="header-icon" />
<span className="header-icon-text">Account</span>
</button>
51 | P a g e
</Link>
</div>
<div className="header-mobile-menu-user">
<div className="header-mobile-menu-avatar">
<User size={24} />
</div>
<div className="header-mobile-menu-user-info">
<p className="header-mobile-menu-greeting">Hello, Guest</p>
<span className="header-mobile-menu-login">< Link to="/login">Sign In</Link> /
<Link to='/signup'>Register</Link></span>
</div>
</div>
<div className="header-mobile-menu-actions">
<a href="/sell" className="header-mobile-menu-sell">
<span className="header-sell-plus">+</span> Sell an Item
</a>
<a href="/wishlist" className="header-mobile-menu-link">
<Heart size={18} /> Wishlist
52 | P a g e
</a>
<a href="/notifications" className="header-mobile-menu-link">
<Bell size={18} /> Notifications
{notifications > 0 && <span className="header-mobile-menu-
badge">{notifications}</span>}
</a>
<a href="/cart" className="header-mobile-menu-link">
<ShoppingCart size={18} /> Cart
</a>
</div>
<div className="header-mobile-menu-categories">
<h3 className="header-mobile-menu-title">Categories</h3>
<ul className="header-mobile-menu-list">
{categories.map((category, index) => (
<li key={index} className="header-mobile-menu-item">
<a href={`/category/${category.toLowerCase().replace(/\s+/g, '-')}`}
className="header-mobile-menu-category">
{category}
</a>
</li>
))}
</ul>
</div>
<div className="header-mobile-menu-footer">
<p className="header-mobile-menu-credits">
Developed & Designed by Abhimanu Pandey
</p>
</div>
</div>
Footer.jsx
53 | P a g e
position -= 1;
wave.style.backgroundPosition = `${position}px bottom`;
requestAnimationFrame(animateWave);
};
animateWave();
}
return (
<footer className="footer">
<div className="footer-wave-container">
<div className="wave"></div>
</div>
<div className="footer-content">
<div className="footer-section company-info">
<div className="logo-container">
<h2 className="logo">Sellzy</h2>
<span className="tagline">Connect. Shop. Thrive.</span>
</div>
<p className="about-text">Sellzy is a C2C marketplace where individuals can buy and
sell products directly with each other in a trusted environment.</p>
<div className="social-icons">
<a href="#" className="social-icon" aria-label="Facebook"><i className="fab fa-
facebook-f"></i></a>
<a href="#" className="social-icon" aria-label="Twitter"><i className="fab fa-
twitter"></i></a>
<a href="#" className="social-icon" aria-label="Instagram"><i className="fab fa-
instagram"></i></a>
<a href="#" className="social-icon" aria-label="LinkedIn"><i className="fab fa-
linkedin-in"></i></a>
</div>
</div>
54 | P a g e
<ul className="footer-links">
<li><a href="#">Home</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Categories</a></li>
<li><a href="#">Sell Your Items</a></li>
<li><a href="#">Deals & Promotions</a></li>
</ul>
</div>
<div className="footer-bottom">
<p className="copyright">
© {currentYear} Sellzy | All Rights Reserved
</p>
<p className="developer-info">
Designed & Developed by Abhimanu Pandey
</p>
<div className="payment-methods">
<i className="fab fa-cc-visa"></i>
<i className="fab fa-cc-mastercard"></i>
55 | P a g e
<i className="fab fa-cc-amex"></i>
<i className="fab fa-cc-paypal"></i>
</div>
</div>
</footer>
);
};
Pages
Home Page
// Hero animation
const heroElement = document.querySelector('.hero-section');
if (heroElement) {
heroElement.classList.add('animate-in');
}
return (
<div className="home-page">
{/* Hero Section */}
<section className="hero-section">
<div className="hero-content">
<h2 className="hero-title">Discover Unique Items from Sellers Worldwide</h2>
<p className="hero-subtitle">Join millions of buyers and sellers on Sellzy's secure
marketplace</p>
<div className="hero-buttons">
<button className="primary-btn">Start Selling</button>
<button className="secondary-btn">Explore Trending</button>
</div>
</div>
<div className="hero-image">
<img src="assets/banner2.jpg" alt="banner" />
</div>
</section>
57 | P a g e
{/* Categories Section with Animation */}
<section className="categories-section">
<h2 className="section-title">Popular Categories</h2>
<div className="categories-grid">
{categories.map((category, index) => (
<div key={category.id} className="category-card" style={{animationDelay: `${index
* 0.1}s`}}>
<div className="category-icon">{category.icon}</div>
<h3>{category.name}</h3>
<p>{category.count.toLocaleString()} items</p>
</div>
))}
</div>
</section>
58 | P a g e
<div className="decoration-circle decoration-circle-3"></div>
</div>
</section>
59 | P a g e
Login Page
} catch (err) {
console.error('Login failed:', err.response?.data?.message || err.message);
alert('Invalid credentials');
}
};
useEffect(() => {
// Animation for elements when component mounts
const tl = document.querySelectorAll('.login-page .animate-in');
tl.forEach((el, i) => {
setTimeout(() => {
el.classList.add('show');
}, 100 * i);
});
}, []);
60 | P a g e
const handleChange = e => {
setFormData({ ...formData, [e.target.name]: e.target.value });
// Clear error when user starts typing again
if (error) setError('');
};
if (!formData.email || !formData.password) {
setError('Please fill in all fields');
return;
}
setLoading(true);
try {
const res = await axios.post('http://localhost:5000/api/users/login', formData);
localStorage.setItem('token', res.data.token);
setTimeout(async () => {
await fetchUser();
navigate('/');
}, 1500);
} catch (err) {
setLoading(false);
setError(err.response?.data?.message || 'Invalid email or password');
return (
<div className="login-page">
<div className="login-container">
<div className="left-panel animate-in">
<div className="brand-container">
<ShoppingBag className="brand-icon" size={36} />
<h1 className="brand-name">Sellzy</h1>
</div>
61 | P a g e
<div className="welcome-message">
<h2>Welcome Back!</h2>
<p>Sign in to access your account and continue your shopping journey</p>
</div>
<div className="features-container">
<div className="feature-item animate-in">
<div className="feature-icon">
<Coffee size={24} />
</div>
<div className="feature-text">
<h3>Easy Shopping</h3>
<p>Browse thousands of products from trusted sellers</p>
</div>
</div>
<div className="right-panel">
<div className="form-container">
<h2 className="form-title animate-in">Sign In</h2>
<p className="form-subtitle animate-in">Please login to your account</p>
<div className="input-group">
<Lock className="input-icon" size={20} />
<input
type={showPassword ? "text" : "password"}
name="password"
placeholder="Password"
value={formData.password}
onChange={handleChange}
className="form-input"
/>
<button
type="button"
className="password-toggle"
onClick={togglePassword}
>
{showPassword ? "Hide" : "Show"}
</button>
<div className="input-highlight"></div>
</div>
<div className="form-options">
<label className="remember-label">
<input
type="checkbox"
checked={rememberMe}
onChange={e => setRememberMe(e.target.checked)}
className="remember-checkbox"
/>
<span className="checkmark"></span>
Remember me
</label>
<div className="success-message">
<CheckCircle size={50} />
<p>Login successful!</p>
</div>
</div>
64 | P a g e
Signup Page
useEffect(() => {
// Animation for elements when component mounts
const tl = document.querySelectorAll('.signup-page .animate-in');
tl.forEach((el, i) => {
setTimeout(() => {
el.classList.add('show');
}, 100 * i);
});
}, []);
setLoading(true);
try {
const res = await axios.post('http://localhost:5000/api/users/signup', formData);
localStorage.setItem('token', res.data.token);
setLoading(false);
setTimeout(() => {
navigate('/login');
}, 1500);
} catch (err) {
setLoading(false);
setError(err.response?.data?.message || 'Signup failed');
}
};
return (
<div className="signup-page">
<div className="signup-container">
<div className="left-panel animate-in">
<div className="brand-container">
<ShoppingBag className="brand-icon" size={36} />
<h1 className="brand-name">Sellzy</h1>
</div>
<div className="illustration">
{/* SVG illustration would go here in a real implementation */}
68 | P a g e
<div className="illustration-placeholder"></div>
</div>
<div className="testimonial">
<p>"Sellzy transformed how I buy and sell items online. The community is
amazing!"</p>
<span className="testimonial-author">- Happy Customer</span>
</div>
</div>
<div className="right-panel">
<div className="form-container">
<h2 className="form-title animate-in">Join Sellzy Community</h2>
<p className="form-subtitle animate-in">Connect, Buy, and Sell with
ease</p>
<div className="success-message">
<CheckCircle size={50} />
<p>Account created successfully!</p>
</div>
69 | P a g e
SERVER
Server.js
//app.use('/api/products', require('./routes/products'));
.then(() => {
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));
}).catch(err => console.log(err));
Dependencies
"dependencies": {
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.0",
"@mui/icons-material": "^7.0.2",
"bcryptjs": "^3.0.2",
"cors": "^2.8.5",
"dotenv": "^16.5.0",
"express": "^5.1.0",
"jsonwebtoken": "^9.0.2",
"mongoose": "^8.14.1",
"multer": "^1.4.5-lts.2",
"set-script": "^1.0.1"
},
70 | P a g e
8.3 Testing Approach
Thorough testing was essential to ensure Sellzy functions reliably under various user interactions
and data conditions. The testing phase covered API reliability, frontend behavior, form validation,
security responses, and UI responsiveness.
A. Types of Testing
1.Manual Testing
Objective: Ensure all backend routes return the correct data and error responses.
Endpoints Tested:
o POST /api/users/register– Tested user creation with and without required fields.
o POST /api/users/login – Checked with valid/invalid credentials.
o GET /api/products/:id – Verified product detail fetch.
o POST /api/orders – Simulated full order payload with cart and shipping details.
Validation Criteria:
o Status codes (200, 201, 400, 401, 404, 500).
o Correct data schema in JSON responses.
o Authorization headers for protected routes.
2. Frontend Testing
Functional Testing:
o Button click events (Add to Wishlist).
o Form field validations on Register, Login, Checkout.
o Order total calculations and updates.
UI/UX Testing:
o Responsive design across screen sizes using dev tools.
o User flows tested with dummy users (e.g., guest checkout attempts).
o Disabled states on buttons until fields are valid.
Component Testing:
o Image lazy loading, loading indicators.
o Conditional rendering for logged-in vs. guest users.
71 | P a g e
B. Edge Case Testing
C. Bug Tracking
Bugs were tracked using a GitHub issues board.
Each bug was categorized (Frontend, Backend, Data, UI).
Resolved via patches and regression tests after each fix.
1. Wishlist Functionality
o Users can save products for later.
o One-to-one relation added in DB for wishlist → user.\
72 | P a g e
B. UI and UX Enhancements
Improvement Description
Area
Responsiveness MUI Grid system and Bootstrap utilities were used to fix mobile layout.
Error Consistent toast notifications via MUI Snackbar and Axios interceptors.
Messaging Enhanced user interactions through Messaging functionality.
Skeleton Skeleton components added while data loads (for smoother transitions).
Loading
Dark Mode Added toggle for light/dark theme using MUI ThemeProvider.
Support
1. Code Modularization
o Divided large components into subcomponents (e.g., ProductList → ProductCard).
o Separated API services using axiosInstance.js.
2. Reusable Hooks
o Created custom hooks like useAuth(), useCart() for cleaner logic.
3. Better State Management
o Shifted from prop drilling to centralized Redux for auth, cart, orders, and UI state.
4. Error Handling Middleware
o Backend errors are caught and passed to an errorHandler middleware for consistent JSON
responses.
D. Performance Optimizations
Reduced image sizes and used srcSet for responsive image loading.
Enabled React lazy loading for non-critical pages
Cached product list data with React Query (optional enhancement).
73 | P a g e
9. CONCLUSION
This section presents a comprehensive summary of the Sellzy e-commerce project, its observed
limitations during development, and the potential directions it can take in future enhancements.
9.1 Conclusion
Built using the MERN stack, the application follows modern software engineering
practices including modular design, API-driven architecture, and secure authentication
protocols. The development process incorporated testing, user feedback, and iterative
refinement to deliver a stable and scalable solution.
Through this project, significant learning was achieved in full-stack development, API
design, database modeling, UI/UX structuring, deployment strategies, and third-party
integration.
No Real-Time Notifications: Users are not notified in real-time (e.g., order status updates).
Limited Filtering Options: Product listing lacks advanced filters like brand, price range, rating,
etc.
74 | P a g e
9.3 Future Scope of the Project
Sellzy has immense potential to be extended into a production-ready platform with the following
enhancements:
Admin Dashboard UI: A full React-based dashboard to manage users, orders, and products
visually
Email & SMS Notifications: Use of services like SendGrid or Twilio for order
and account notifications.
Cloud Image Uploads: Integrating Cloudinary or AWS S3 for secure and optimized media
storage
AI-based Recommendations: Product suggestions based on user behavior and order history.
Advanced Filtering & Search: Addition of multi-faceted filters, sorting logic, and fuzzy search.
Mobile App Development: Building a mobile version using React Native or Flutter
for broader access.
Inventory and Logistics Tracking: Live tracking of order shipments and automated
inventory updates.
Chat Support Integration: Real-time user support using chatbots or human agents via sockets.
75 | P a g e
9.4 Bibliography / References
MongoDB Documentation
Express.js Guide
React.js Documentation
Node.js Documentation
Razorpay Developer API
JWT Authentication
Bcrypt.js GitHub
PlantUML Language Reference
Postman API Testing Tool
Vercel Deployment Platform
Render Deployment Platform
76 | P a g e