0% found this document useful (0 votes)
26 views76 pages

E-Commerce Project Report (C2C)

The document is a project report for 'Sellzy – An E-Commerce Website (C2C)' developed by Abhimanu Pandey as part of his Bachelor in Computer Applications at the International School of Management Patna. It outlines the project's objectives, scope, requirements, and technical specifications, emphasizing a user-friendly platform for direct consumer-to-consumer transactions. The report includes details on the technologies used, project feasibility, and future scalability options for the application.

Uploaded by

himaxraz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
26 views76 pages

E-Commerce Project Report (C2C)

The document is a project report for 'Sellzy – An E-Commerce Website (C2C)' developed by Abhimanu Pandey as part of his Bachelor in Computer Applications at the International School of Management Patna. It outlines the project's objectives, scope, requirements, and technical specifications, emphasizing a user-friendly platform for direct consumer-to-consumer transactions. The report includes details on the technologies used, project feasibility, and future scalability options for the application.

Uploaded by

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

1|Pa ge

International School of Management Patna


(APPROVED BY AICTE, MINISTRY OF HRD GOVT. OF INDIA)

Project Report on

“Sellzy – An E-Commerce Website (C2C)”


(Pager code: 604)

In partial fulfilment of the requirements for the


award of Degree Of
BACHELOR IN COMPUTER APPLICATIONS
(SESSION: 2022-2025)

Report Guide:- Submitted By:


Mr.Sanu Kumar Abhimanu Pandey
Assistant Professor BCA(2022-2025)
Dept. of Computer Application Reg. No. : 22303313132
ISM PATNA

2|Pa ge
International School of Management Patna
(APPROVED BY AICTE, MINISTRY OF HRD GOVT. OF INDIA)

Batch 2022 – 2025

Project Report on

“Sellzy – An E-Commerce Website (C2C)”

Report Guide:- Submitted By:


Mr.Sanu Kumar Abhimanu Pandey
Assistant Professor BCA(2022-2025)
Dept. of Computer Application Reg. No. : 22303313132
ISM PATNA

Internal Examiner External Examiner

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.

Place: Patna Abhimanu Pandey


Date: Reg. No. – 22303313132

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

S No. Contents Page No.

1. Introduction 9 - 12

1.1 Project Introduction

1.2 Objective of the Project

1.3 Scope of the Project

1.4 Applicability of the Project

2 Requirements and Analysis 13 – 22

2.1 Requirements Specification

2.2 Tools, Platforms and language used

2.3 Software and Hardware Requirements

2.4 Use Case Diagram

2.5 Project Category

3 Feasibility Study 13 – 24

4 Software Engineering Paradigm 25

5 System Design 26 - 35

5.1 Basic Module

5.2 Database Design

5.3 Procedural Design

5.3.1 Process Flow

5.3.2 Data Flow Diagram

5.3.3 ER Diagram
5.3.4 Schema

7|Pa ge
6. User Interface Design 36 – 40

7. Security Issues 41 - 43

8. Implementation & Testing 44 - 73

8.1 Implementation

8.2 Coding Details

8.3 Testing Approach

8.4 Modification & Improvement

9 Conclusion 74 - 76

9.1 Conclusion

9.2 Limitation of The Project

9.3 Future Scope of the project

9.4 Bibliography / Reference

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.

The application includes essential features such as:

 User Authentication and Authorization


 Product Listing with Images
 Category-based Search and Filters
 Chat/Contact Options for Buyers & Sellers
 Payment Gateway Integration (Razorpay)
 Admin Panel for Moderation

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:

 Direct Consumer-to-Consumer Interaction:


Facilitate direct communication between buyers and sellers to enhance transparency and negotiation.
 Product Listing and Browsing:
Allow users to list products with detailed descriptions, prices, and images, and enable potential
buyers to browse, filter, and search products based on categories.
 User Authentication and Security:
Implement secure user registration, login, and session handling to ensure that only verified users
can access key features.
 Digital Payment Integration:
Provide a seamless payment experience through Razorpay, allowing buyers and sellers to complete
transactions digitally.
 Admin Monitoring and Moderation:
Include administrative controls for managing listings, handling abuse reports, and maintaining
platform integrity.
 Responsive Design and Accessibility:
Ensure that the platform works across devices (mobile, tablet, desktop) with responsive and
intuitive user interfaces.
 Cloud Deployment:
Host the application using Render/Vercel and manage the database using MongoDB Atlas for
performance, scalability, and reliability.

1.3 Scope of Project:

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:

 Addition of delivery partner APIs


 Product review and rating system
 Chat system for real-time communication
 Mobile application version

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.

Academic and Learning Purpose:

o The project also serves as an educational prototype demonstrating:


o Full-stack web development with real-time database interaction.
o API development and testing using Postman.
o Third-party service integration (e.g., payment gateways).
o End-to-end deployment using cloud platforms.

Scalability for Institutional Use:

 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

2.1 Requirement Specification


The requirement specification outlines both functional and non-functional aspects that the system
must fulfill to ensure it operates as intended. Sellzy, being a C2C marketplace platform, has
requirements aligned with usability, security, and real-time performance.

A. Functional Requirements

These define the core functionalities the system must support:

1. User Registration and Login:


o Users must be able to register with valid credentials.
o Authentication using secure methods like JWT tokens.
2. Product Listing and Management:
o Sellers can create, update, and delete product listings.
o Each product includes a title, category, image, description, and price.
3. Product Browsing and Searching:
o Buyers can browse all listings.
o Filter and search options by category, price range, etc.
4. User Dashboard:
o Users can view and manage their listed products.
o Buyers can track purchased items (optional in future scope).
5. Payment Integration:
o Razorpay integration for secure and seamless transactions.
6. Admin Features:
o Admin can manage reported items and user accounts.
o Admin dashboard to monitor listings and platform activity.

13 | P a g e
B. Non-Functional Requirements

These focus on system performance, reliability, and usability:s

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.

2.2 Tools, Platforms, and Languages Used:

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

B.Tools & Services

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

Software Description / Purpose


Operating Windows 10/11, Linux, or macOS
System
Code Editor Visual Studio Code (VS Code)
Web Browser Chrome, Firefox, or Edge (latest versions)
Node.js & Runtime environment and package manager
npm
MongoDB Cloud-based database for storing application data
Atlas
Postman API development and testing tool
Git & GitHub Version control and code hosting
Render / Cloud deployment platforms for backend/frontend
Vercel
Razorpay For managing and testing payment gateway integration
Dashboard

A. Hardware Requirements

Component Minimum Specification


Processor Intel Core i3 or equivalent
RAM 4 GB (8 GB recommended)
Storage At least 10 GB free space
Display 13” or larger screen with 1366×768 resolution (minimum)
Internet Required for database access, API testing, and cloud
Connection deployment

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:

Category: Web-Based Application (E-Commerce, C2C Model)

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.

Justification for Category Selection

 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.

Relevant Domains Covered

 Web Development (Frontend + Backend)


 Cloud Deployment (Render, Vercel)
 API Development and Testing (Postman)
 Database and Security Management
 E-commerce Platform Workflow

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.

3.3 Technical Feasibility

 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.

Conclusion: Technically feasible with modern tools and frameworks.

3.4 Economic Feasibility

 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.

Conclusion: Economically viable with minimal cost and pay-as-you-grow scalability.

3.5 Operational Feasibility

 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).

Conclusion: Operationally feasible and user-friendly.

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.

Conclusion: Legally sound and ethically compliant.

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.

 Chosen Paradigm: Agile Software Development (Incremental Model)

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.

How It Was Applied in Sellzy

Phase Activities Performed

Initial planning of features like user authentication, product listing,


Requirement Gathering
and payment integration.
Basic structure of database, UI wireframes, and backend routes were
Design
defined.
Features developed in small iterations (e.g., login/signup first, then
Implementation
add listing, then payment).
After each module, testing was performed using Postman and
Testing
browser dev tools.

Deployment Frontend deployed via Vercel and backend via Render in stages.

Feedback & Modifications Changes implemented as per test results and deployment feedback.

Advantages of Agile for This Project

 Quick adaptability to changing requirements.


 Continuous testing ensured each component worked before moving forward.
 Early deployment made real-world testing possible on cloud.
 Helped identify bugs early in development.

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.

5.1 Basic Modules:

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.

5.2 DataBase Design:

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.

Sellzy uses multiple collections, each corresponding to key entities

27 | P a g e
User Schema

Stores all personal and authentication-related data for both customers and admins.

Fields:

Field Name Type Description


_id ObjectId Unique identifier
name String Full name of the user
email String User’s email address
password String Hashed password
phone String User’s phone number
address String User’s address
isVerified Boolean Whether user’s email is verified
role String 'user' or 'admin'
createdAt Date Timestamp when the user was
created

Product Schema

Contains the list of all available products for sale.

Fields:

Field Name Type Description


_id ObjectId Unique identifier
title String Title of the product
description String Full product description
price Number Product price
category String Product category (e.g., electronics, etc.)
images Array URLs of uploaded product images
sellerId ObjectId Reference to User collection (_id)
isApproved Boolean Whether listing is approved by admin
isSold Boolean Flag to show if product is sold
createdAt Date Timestamp of listing creation

28 | P a g e
Payment Schema

Records order information including user, items, shipping, and payment.

Fields:

Field Name Type Description


_id ObjectId Unique identifier
buyerId ObjectId Reference to User (_id)
sellerId ObjectId Reference to User (_id)
productId ObjectId Reference to Product Listing (_id)
amount Number Payment amount
status String 'successful', 'pending', or 'failed'
paymentId String Razorpay payment ID
createdAt Date Payment transaction timestamp

Admin Schema

Stores the items a user has added to their cart before purchasing.

Fields:

Field Name Type Description


_id ObjectId Unique identifier
adminId ObjectId Admin performing the action
actionType String Type of action (e.g., 'approve', 'reject')
targetType String Affected entity type (e.g., 'product', 'user')
targetId ObjectId ID of the affected entity
reason String Optional reason for action
createdAt Date Timestamp of the admin action

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.

5.3.1 Process Flow

Below is a step-by-step breakdown of the primary flows in the system, representing user
interaction and backend control:

5.3.1.1 User Login & Registration Flow

1. User visits the login/signup page.


2. Enters credentials (name, email, password, etc.).
3. Backend receives POST request and:
o Hashes the password using bcryptjs.
o Validates the uniqueness of the email.
o Saves the user to the User collection.
4. Generates a JWT token and sends it in the response.
5. User is logged in and redirected to homepage/dashboard.

5.3.1.2 Product Browsing & Filtering

1. Frontend fetches products using GET /products.


2. Backend fetches from the Product collection.
3. Frontend displays product details (name, price, rating).
4. Optional: Filter by category or search by name.

5.3.1.3 Order History Flow

1. User visits “My Orders” → GET /orders/:userId.


2. Backend fetches all orders for the user.
3. Displays order status, items, and total price.

30 | P a g e
5.3.1.4 Wishlist Functionality

1. User adds product to wishlist → POST /wishlist.


2. Wishlist is updated with product snapshot.
3. Frontend fetches data on wishlist page → GET /wishlist.

5.3.1.5 Admin Flow

1. Admin logs into a secure dashboard.


2. Admin can:
o View all listings and user accounts
o Approve or reject product listings
o Handle abuse reports
o View dashboard analytics

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.

2. Authentication & Authorization


 Tool Used: jsonwebtoken (JWT)

 Purpose: Securely authenticate users and admins.

 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.

3. Role-Based Access Control


 Users vs. Admins:
o Regular users can only view or modify their data.
o Admin routes (like product or user management) are restricted and verified using the isAdmin
flag from the user model.

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:

o Transactions are handled externally via Razorpay’s encrypted APIs.


o Sensitive card/payment data is never stored in the database.
o Razorpay webhooks are validated using signature verification.

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.

8. Protection from Common Attacks

Attack Type Mitigation Strategy


SQL Injection Not applicable (MongoDB), but input is validated.
XSS Escaping inputs, no raw HTML rendering.
CSRF JWTs are stored securely and verified with headers.
Brute Force Login attempt throttling (optional rate limiting).

9. Environment Variable Management


 Sensitive Data (e.g., DB URI, JWT secret, Razorpay keys) are stored in .env files and never exposed
in code or client-side scripts

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

 Frontend was deployed using Vercel.


 Backend API was hosted on Render.
 Environment variables and secrets were securely managed using .env files.

Third-Party Integration

 Payment Gateway: Razorpay API for online transactions.


 Image Hosting: Cloud storage or local image handling for product/user images.

Routing and APIs

 RESTful APIs were created for each module:


o api/users – for authentication, profile management.

o api/products – for listing, detail view, reviews.

o api/orders – for placing and tracking orders.

o api/wishlist – for personal user data management.

44 | P a g e
 Gantt Chart

45 | P a g e
8.2 Coding Details

 Each functionality was split into modular components and services:


o Frontend: Components for login, product list, product detail, cart, checkout, profile.
o Backend: Separate controller, route, and model files for maintainability.
 Coding followed MVC (Model-View-Controller) architecture for clean structure.
 Code was written in JavaScript (ES6) with React hooks, Axios for API calls, and Redux
for state management.

 Best Practices Followed:

 Code linting and formatting using Prettier and ESLint.


 Reusability and DRY principles were emphasized
 Token-based session management using JWT.

46 | P a g e
Folder Structure:

Client Server

47 | P a g e
CLIENT

 App.js

import { BrowserRouter, Routes, Route } from 'react-router-dom';


import './App.css';
import {HomePage} from './pages/Home';
import {Login} from './pages/Login';
import {Signup} from './pages/Signup';
import {About} from './pages/About';
import { Header} from './components/Header/Header';
import { Profile } from './pages/Profile';
import {ProductForm } from './pages/productForm';
import{ProductList} from './pages/productList'
import { ProductDetail } from './pages/productDetails';
import { Footer } from './components/Footer/Footer';
import { Order } from './pages/Order';
import { Transactions } from './pages/Transactions';
import { Wishlist } from './pages/Wishlist';
import { Chat} from './pages/Chat';

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>
);
}

export default App;

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

import React, { useState, useEffect } from 'react';


import { Search, ShoppingCart, User, Heart, Menu, X, Bell } from 'lucide-react';
import './Header.css';
import { Link, Links } from 'react-router-dom';

export const Header = () => {


const [isScrolled, setIsScrolled] = useState(false);
const [searchFocused, setSearchFocused] = useState(false);
const [menuOpen, setMenuOpen] = useState(false);
const [searchQuery, setSearchQuery] = useState('');
const [notifications, setNotifications] = useState(3);

// Categories for the dropdown menu


const categories = [
'Electronics', 'Vehicles', 'Furniture', 'Home & Garden',
'Sports', 'Toys & Games', 'Books & Media', 'Collectibles'
];

// Handle scroll effect


useEffect(() => {
const handleScroll = () => {
if (window.scrollY > 50) {
setIsScrolled(true);
} else {
setIsScrolled(false);
}
49 | P a g e
};

window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);

// Handle search suggestions (simulated)


const [suggestions, setSuggestions] = useState([]);
useEffect(() => {
if (searchQuery.length > 1) {
// Simulate fetching suggestions from API
const demoSuggestions = [
`${searchQuery} in Electronics`,
`Used ${searchQuery}`,
`${searchQuery} near me`,
`Premium ${searchQuery}`
];
setSuggestions(demoSuggestions);
} else {
setSuggestions([]);
}
}, [searchQuery]);

const toggleMenu = () => {


setMenuOpen(!menuOpen);
};

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>

<div className={`header-search-container ${searchFocused ? 'focused' : ''}`}>


<div className="header-search-bar">
<Search className="header-search-icon" size={20} />
<input
type="text"

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>

<button className="header-icon-button notification-button">


<Bell size={22} className="header-icon" />
{notifications > 0 && (
<span className="header-notification-badge">{notifications}</span>
)}
<span className="header-icon-text">Alerts</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>

<button className="header-menu-button" onClick={toggleMenu}>


{menuOpen ? <X size={24} /> : <Menu size={24} />}
</button>
</div>
</div>

<nav className={`header-nav ${isScrolled ? 'compact' : ''}`}>


<ul className="header-nav-list">
{categories.map((category, index) => (
<li key={index} className="header-nav-item">
<a href={`/category/${category.toLowerCase().replace(/\s+/g, '-')}`}
className="header-nav-link">
{category}
</a>
</li>
))}
</ul>
</nav>

{/* Mobile Menu */}


<div className={`header-mobile-menu ${menuOpen ? 'open' : ''}`}>
<div className="header-mobile-menu-header">
<div className="header-logo">
<span className="header-logo-first">Sell</span>
<span className="header-logo-second">zy</span>
</div>
<button className="header-close-menu" onClick={toggleMenu}>
<X size={24} />
</button>
</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>

{menuOpen && <div className="header-menu-overlay" onClick={toggleMenu}></div>}


</header>
</div>
);
};

 Footer.jsx

import React, { useEffect } from 'react';


import './Footer.css';

export const Footer = () => {


useEffect(() => {
// Animation for wave effect
const wave = document.querySelector('.footer .wave');
if (wave) {
let position = 0;
const animateWave = () => {

53 | P a g e
position -= 1;
wave.style.backgroundPosition = `${position}px bottom`;
requestAnimationFrame(animateWave);
};
animateWave();
}

// Animation for link hover effects


const linkContainers = document.querySelectorAll('.footer .footer-links-container');
linkContainers.forEach(container => {
const links = container.querySelectorAll('a');
links.forEach(link => {
link.addEventListener('mouseenter', () => {
link.classList.add('pulse');
setTimeout(() => link.classList.remove('pulse'), 500);
});
});
});
}, []);

// Current year for copyright


const currentYear = new Date().getFullYear();

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>

<div className="footer-section footer-links-container">


<h3 className="footer-title">Quick Links</h3>

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-section footer-links-container">


<h3 className="footer-title">Support</h3>
<ul className="footer-links">
<li><a href="#">Help Center</a></li>
<li><a href="#">Safety Center</a></li>
<li><a href="#">Community Guidelines</a></li>
<li><a href="#">Terms of Service</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>

<div className="footer-section contact-info">


<h3 className="footer-title">Contact Us</h3>
<div className="contact-item">
<i className="fas fa-map-marker-alt"></i>
<span>123 Ecommerce Avenue, Shop City, SC 54321</span>
</div>
<div className="contact-item">
<i className="fas fa-phone-alt"></i>
<span>+1 (555) 123-4567</span>
</div>
<div className="contact-item">
<i className="fas fa-envelope"></i>
<span>support@sellzy.com</span>
</div>
<div className="newsletter">
<input type="email" placeholder="Subscribe to newsletter" />
<button className="subscribe-btn">Subscribe</button>
</div>
</div>
</div>

<div className="footer-bottom">
<p className="copyright">
&copy; {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

import React, { useState, useEffect } from 'react';


import './style.css';
import { Search, ShoppingCart, User, Heart, Package, Award, TrendingUp, Star } from 'lucide-
react';
import {
Smartphone ,
Tag,
Home,
Activity,
Sparkles,
Puzzle
} from 'lucide-react';

export const HomePage = () => {


// State for trending products
const [trendingProducts, setTrendingProducts] = useState([]);
const [categories, setCategories] = useState([]);

// Simulated API call for categories


setCategories([
{ id: 1, name: "Electronics", icon: <Smartphone/>, count: 2540 },
{ id: 2, name: "Furniture", icon: <Tag/>, count: 1830 },
{ id: 3, name: "Home & Garden", icon: <Home/>, count: 1420 },
{ id: 4, name: "Sports & Outdoors", icon: <Activity/>, count: 980 },
{ id: 5, name: "Beauty & Personal Care", icon: <Sparkles/>, count: 1650 },
{ id: 6, name: "Toys & Games", icon: <Puzzle/>, count: 750 }
]);

// Hero animation
const heroElement = document.querySelector('.hero-section');
if (heroElement) {
heroElement.classList.add('animate-in');
}

// Staggered animation for trending products


const productElements = document.querySelectorAll('.product-card');
productElements.forEach((element, index) => {
setTimeout(() => {
element.classList.add('animate-in');
56 | P a g e
}, 100 * (index + 1));
});
}, []);

// Handler for search form submission


const handleSearch = (e) => {
e.preventDefault();
// Search functionality would be implemented here
console.log("Search submitted");
};

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>

{/* Features Section */}


<section className="features-section">
<h2 className="section-title">Why Choose Sellzy?</h2>
<div className="features-grid">
<div className="feature-card">
<div className="feature-icon"><Award size={32} /></div>
<h3>Quality Assurance</h3>
<p>All sellers undergo our strict verification process</p>
</div>
<div className="feature-card">
<div className="feature-icon"><Package size={32} /></div>
<h3>Fast Delivery</h3>
<p>Track your purchases with real-time updates</p>
</div>
<div className="feature-card">
<div className="feature-icon"><TrendingUp size={32} /></div>
<h3>Growing Community</h3>
<p>Join millions of users buying and selling daily</p>
</div>
</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>

{/* Trending Products Section */}


<section className="trending-section">
<div className="section-header">
<h2 className="section-title">Trending This Week</h2>
<button className="view-all-btn">View All</button>
</div>
<div className="products-grid">
{trendingProducts.map((product) => (
<div key={product.id} className="product-card">
<div className="product-image">
<img src={product.image} alt={product.name} />
<button className="wishlist-btn"><Heart size={18} /></button>
</div>
<div className="product-info">
<h3 className="product-name">{product.name}</h3>
<div className="product-meta">
<div className="product-price">₹{product.price}</div>
</div>
<button className="add-to-cart-btn">Buy Now</button>
</div>
</div>
))}
</div>
</section>

{/* Call to Action Section */}


<section className="cta-section">
<div className="cta-content">
<h2>Ready to sell your products?</h2>
<p>Join thousands of sellers who are growing their business on Sellzy</p>
<button className="cta-btn">Start Selling Today</button>
</div>
<div className="cta-decoration">
<div className="decoration-circle decoration-circle-1"></div>
<div className="decoration-circle decoration-circle-2"></div>

58 | P a g e
<div className="decoration-circle decoration-circle-3"></div>
</div>
</section>

{/* Testimonials Section */}


<section className="testimonials-section">
<h2 className="section-title">What Our Users Say</h2>
<div className="testimonials-carousel">
<div className="testimonial-card">
<div className="testimonial-rating">
<Star size={18} /><Star size={18} /><Star size={18} /><Star size={18} /><Star
size={18} />
</div>
<p className="testimonial-text">"Sellzy has transformed my small business. The
platform is easy to use and I've reached customers I never thought possible!"</p>
<div className="testimonial-author">
<div className="author-avatar">
<img src="assets/profile.jpg" alt="Abhi Singh" />
</div>
<div className="author-info">
<h4>Abhi Singh</h4>
<p>Handmade Jewelry Seller</p>
</div>
</div>
</div>
</div>
</section>
</div>
);
};

59 | P a g e
 Login Page

import React, { useState, useEffect } from 'react';


import { useNavigate, Link } from 'react-router-dom';
import axios from 'axios';
import { useAuth } from '../../context/AuthContext';
import { ShoppingBag, Mail, Lock, Coffee, CheckCircle } from 'lucide-react';
import './style.css';

export const Login = () => {


const { setUser, fetchUser } = useAuth();
const [formData, setFormData] = useState({
email: '',
password: ''
});
const [error, setError] = useState('');
const [loading, setLoading] = useState(false);
const [rememberMe, setRememberMe] = useState(false);
const [showPassword, setShowPassword] = useState(false);
const navigate = useNavigate();
const handleLogin = async () => {
try {
const res = await axios.post('http://localhost:5000/api/users/login', {
email : formData.email ,
password : formData.password
});

// ✅ Save token to localStorage


localStorage.setItem('token', res.data.token);

// Optionally save user info if you want


localStorage.setItem('user', JSON.stringify(res.data.user));

// Redirect to profile page


window.location.href = '/profile';

} 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('');
};

const togglePassword = () => {


setShowPassword(!showPassword);
};

const handleSubmit = async e => {


e.preventDefault();

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);

// Success animation before redirect


document.querySelector('.login-page .success-message').classList.add('show');

setTimeout(async () => {
await fetchUser();
navigate('/');
}, 1500);
} catch (err) {
setLoading(false);
setError(err.response?.data?.message || 'Invalid email or password');

// Shake animation for error


const form = document.querySelector('.login-page .login-form');
form.classList.add('shake');
setTimeout(() => {
form.classList.remove('shake');
}, 500);
}
};

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="feature-item animate-in">


<div className="feature-icon">
<ShoppingBag size={24} />
</div>
<div className="feature-text">
<h3>Secure Payments</h3>
<p>Your transactions are always protected</p>
</div>
</div>

<div className="feature-item animate-in">


<div className="feature-icon">
<Coffee size={24} />
</div>
<div className="feature-text">
<h3>Fast Delivery</h3>
<p>Get your products delivered at your doorstep</p>
</div>
</div>
</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>

{error && <div className="error-message animate-in show">{error}</div>}

<form onSubmit={handleSubmit} className="login-form animate-in">


<div className="input-group">
<Mail className="input-icon" size={20} />
<input
type="email"
name="email"
placeholder="Email Address"
62 | P a g e
value={formData.email}
onChange={handleChange}
className="form-input"
/>
<div className="input-highlight"></div>
</div>

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

<Link to="/forgot-password" className="forgot-link">Forgot


Password?</Link>
</div>

<button type="submit" className="submit-btn" disabled={loading}


onSubmit={handleLogin}>
{loading ? "Signing in..." : "Sign In"}
</button>
</form>

<div className="divider animate-in">


<span>OR</span>
</div>
63 | P a g e
<div className="social-login animate-in">
<button className="social-btn google">
<span className="social-icon">G</span>
Sign in with Google
</button>

<button className="social-btn facebook">


<span className="social-icon">f</span>
Sign in with Facebook
</button>
</div>

<div className="signup-link animate-in">


Don't have an account? <Link to="/signup">Sign up</Link>
</div>

<div className="success-message">
<CheckCircle size={50} />
<p>Login successful!</p>
</div>
</div>

<div className="footer animate-in">


<p>Designed by Abhimanu Pandey | &copy; {new Date().getFullYear()}
Sellzy</p>
</div>
</div>
</div>
</div>
);
};

64 | P a g e
 Signup Page

import React, { useState, useEffect } from 'react';


import { useNavigate } from 'react-router-dom';
import axios from 'axios';
import { ShoppingBag, User, Mail, Phone, Lock, CheckCircle } from 'lucide-react';
import './style.css';

export const Signup = () => {


const [formData, setFormData] = useState({
name: '',
email: '',
mobile: '',
password: '',
});

const [agree, setAgree] = useState(false);


const [error, setError] = useState('');
const [loading, setLoading] = useState(false);
const [formStep, setFormStep] = useState(0);
const navigate = useNavigate();

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);
});
}, []);

const handleChange = e => {


setFormData({ ...formData, [e.target.name]: e.target.value });
};

const validateStep = () => {


if (formStep === 0 && !formData.name) {
setError('Please enter your name');
return false;
} else if (formStep === 1 && !formData.email) {
setError('Please enter your email');
return false;
} else if (formStep === 2 && !formData.mobile) {
setError('Please enter your mobile number');
return false;
} else if (formStep === 3 && formData.password.length < 6) {
setError('Password must be at least 6 characters');
return false;
}
setError('');
return true;
65 | P a g e
};

const nextStep = () => {


if (validateStep()) {
setFormStep(prev => prev + 1);
}
};

const prevStep = () => {


setFormStep(prev => prev - 1);
};

const handleSubmit = async e => {


e.preventDefault();
if (!agree) {
setError('You must agree to the terms and conditions.');
return;
}

setLoading(true);
try {
const res = await axios.post('http://localhost:5000/api/users/signup', formData);
localStorage.setItem('token', res.data.token);
setLoading(false);

// Success animation before redirect


document.querySelector('.signup-page .success-message').classList.add('show');

setTimeout(() => {
navigate('/login');
}, 1500);
} catch (err) {
setLoading(false);
setError(err.response?.data?.message || 'Signup failed');
}
};

const renderStep = () => {


switch (formStep) {
case 0:
return (
<div className="form-step animate-in">
<div className="input-group">
<User className="input-icon" size={20} />
<input
type="text"
name="name"
placeholder="Full Name"
value={formData.name}
onChange={handleChange}
className="form-input"
/>
66 | P a g e
</div>
<button onClick={nextStep} className="next-btn">Continue</button>
</div>
);
case 1:
return (
<div className="form-step animate-in">
<div className="input-group">
<Mail className="input-icon" size={20} />
<input
type="email"
name="email"
placeholder="Email Address"
value={formData.email}
onChange={handleChange}
className="form-input"
/>
</div>
<div className="btn-group">
<button onClick={prevStep} className="prev-btn">Back</button>
<button onClick={nextStep} className="next-btn">Continue</button>
</div>
</div>
);
case 2:
return (
<div className="form-step animate-in">
<div className="input-group">
<Phone className="input-icon" size={20} />
<input
type="tel"
name="mobile"
placeholder="Mobile Number"
value={formData.mobile}
onChange={handleChange}
className="form-input"
/>
</div>
<div className="btn-group">
<button onClick={prevStep} className="prev-btn">Back</button>
<button onClick={nextStep} className="next-btn">Continue</button>
</div>
</div>
);
case 3:
return (
<div className="form-step animate-in">
<div className="input-group">
<Lock className="input-icon" size={20} />
<input
type="password"
name="password"
67 | P a g e
placeholder="Password"
value={formData.password}
onChange={handleChange}
className="form-input"
/>
</div>
<div className="btn-group">
<button onClick={prevStep} className="prev-btn">Back</button>
<button onClick={nextStep} className="next-btn">Continue</button>
</div>
</div>
);
case 4:
return (
<div className="form-step animate-in">
<div className="terms-container">
<label className="terms-label">
<input
type="checkbox"
checked={agree}
onChange={e => setAgree(e.target.checked)}
className="terms-checkbox"
/>
<span className="checkmark"></span>
I agree to Sellzy's <a href="#" className="terms-link">Terms of
Service</a> and <a href="#" className="terms-link">Privacy Policy</a>
</label>
</div>
<div className="btn-group">
<button onClick={prevStep} className="prev-btn">Back</button>
<button onClick={handleSubmit} className="submit-btn" disabled={loading
|| !agree}>
{loading ? 'Creating Account...' : 'Create Account'}
</button>
</div>
</div>
);
default:
return null;
}
};

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="progress-bar animate-in">


<div className="progress-steps">
{[0, 1, 2, 3, 4].map(step => (
<div
key={step}
className={`progress-step ${formStep >= step ? 'active' : ''}`}
></div>
))}
</div>
</div>

{error && <div className="error-message animate-in">{error}</div>}

<form onSubmit={e => e.preventDefault()} className="signup-form">


{renderStep()}
</form>

<div className="success-message">
<CheckCircle size={50} />
<p>Account created successfully!</p>
</div>

<div className="login-link animate-in">


Already have an account? <a href="/login">Log in</a>
</div>
</div>

<div className="footer animate-in">


<p>Designed by Abhimanu Pandey | &copy; {new Date().getFullYear()}
Sellzy</p>
</div>
</div>
</div>
</div>);};

69 | P a g e
SERVER

 Server.js

const express = require('express');


const mongoose = require('mongoose');
const cors = require('cors');
const connectDB = require('./config/db');
require('dotenv').config();

const app = express();


app.use(cors());
app.use(express.json());
app.use('/uploads', express.static('uploads')); // to serve images
app.use('/api/products', require('./routes/productRoute'));
// Routes
app.use('/api/users', require('./routes/userRoute'));
app.use('/api/orders', require('./routes/orderRoute'));
app.use('/api/cart', require('./routes/cartRoute'));
app.use('/api/cart', require('./routes/cartRoute'));
app.use('/api/wishlist', require('./routes/wishlistRoute'));

//app.use('/api/products', require('./routes/products'));

const PORT = process.env.PORT || 5000;


connectDB()

.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

 Purpose: To simulate real-world user behavior and interactions.


 Tools Used: Web browser (Chrome), Postman.
 Process:
o Simulated full user journey from account creation to product Ad posting and order placement.
o Checked CRUD operations on wishlist, profile, and products.
o Observed app behavior under slow network using browser dev tools.

2.API Testing (Postman)

 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

Scenario Expected Behavior


Attempt login with Show error toast and prevent token creation
wrong credentials
Register with Show "Email already in use" validation error
existing email
Place product Ad with Block Ad creation and redirect to product Ad creation page
empty details
Update profile with Client-side form errors shown before submit
empty fields
Network failure Payment failure message + Retry button
during checkout
JWT tampering Server rejects request with 401 Unauthorized
(manually)

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.

8.4 Modification & Improvement


After initial completion and test deployment, several improvements were made based on test feedback,
performance audits, and UI/UX reviews.

A. Major Feature Additions

1. Wishlist Functionality
o Users can save products for later.
o One-to-one relation added in DB for wishlist → user.\

2. Profile Image Upload


o Users can personalize their accounts by uploading profile images.
o Default avatar shown if no image uploaded.

3. Admin Panel Enhancements


o Toggle to mark orders as delivered.

4. Razorpay Payment Integration


o Shifted from "dummy payment" to real-time Razorpay gateway.
o Verified using Razorpay test keys and actual payment logs.

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

C. Code & Architecture Improvements

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

Sellzy is a full-stack C2C e-commerce web application designed to provide a seamless


shopping experience for customers while offering essential management tools for
administrators. The platform supports core functionalities such as product browsing, cart
and wishlist management, secure user authentication, profile handling, and real-time
order processing with integrated payment systems like Razorpay.

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.

9.2 Limitations of the Project

Despite the overall success of Sellzy, a few limitations were identified:

 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

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy