FINAL YEAR PROJECT

WEB DEVELOPMENT USING MERN STACK

E-COMMERCE

Jyoti Shaw (10900220014)

Pradeep Kumar (10900220021)
Nitish Kumar (10900220024)
Hardik Kumar (10900220048)
Minakshi Sarkar (10900220097)
Under the guidance of
Prof. Sukanta Bose
DEPARTMENT OF INFORMATION TECHNOLOGY
NETAJI SUBHASH ENGINEERING COLLEGE
TECHNO CITY, GARIA, KOLKATA – 700 152
Academic year 2023-24
Purpose of the Project:

The purpose of this project is to develop and implement an

innovative e-commerce platform that addresses specific
challenges within the industry. The goal is to create a seamless
and secure online shopping experience for user’s while
incorporating advanced features and technologies to stay
competitive in the dynamic e-commerce landscape.
WHAT IS E-COMMERCE?

Electronic commerce (e-commerce) refers to companies and

individuals that buy and sell goods and services over the internet.
E-commerce operates in different types of market segments and
can be conducted over computers, tablets, smartphones, and other smart devices.
Nearly every imaginable product and service is available through
e-commerce transactions, including books, music, plane tickets,
and financial services such as stock investing and online
banking. As such, it is considered a very disruptive technology.
WHY E-COMMERCE?

Now a days, people are more inclined towards shopping using internet. For Seller it also cut cost of
middleman Unlike offline Market. It is very convenient for Sellers and Buyers both to sell and buy
using, services over the internet that provides
• Low Entry Cost
• Reduces Translation Costs
• Access To the Global Market
• Secure Market Share
INTRODUCTION:
• E-commerce, or electronic commerce, refers to the buying and
selling of goods and services over the internet. E-commerce
has transformed the traditional way of conducting business,
providing a platform for global transactions, improved
efficiency, and enhanced customer experiences.
Scope and Objectives of the Project:
Scope:
• Design and implement a user-friendly e-commerce platform.
• integrate secure payment gateways for smooth transactions.

• Ensure compatibility with various devices for an inclusive user base.

• Implement robust security measures to protect user data.

Objectives:
• Enhance User Experience: Develop an intuitive and visually appealing user interface to improve the
overall shopping experience.
• Secure Transactions: Implement state-of-the-art security protocols to safeguard user information and
financial transactions.
• Scalability: Design the platform to handle a growing number of users and transactions without
compromising performance.
• Innovative Features: Integrate cutting-edge features such as personalized recommendations, real-
time inventory updates, and interactive product visualization.
Tools, Technologies, and Software used:
Frontend Development:

• React.js, Bootstrap, Tailwind CSS: For building a dynamic and responsive user interface.

• HTML5, CSS3,JavaScript: Standard technologies for web development.

Backend Development:

• Node.js: For server-side development.

• Express.js: As a web application framework for Node.js.

Database:

• MongoDB: A NoSQL database for storing product

information, user data, and order details.

• Cloudinary : Cloud Media Storage.

Security:

• SSL/TLS Encryption: To secure data transmission.

• JSON Web Token : For secure user authentication.

Payment Integration:

• Razor pay: To integrate secure payment gateways.

Version Control:

• Git & Github: For version control and collaborative development.

Development Environment:

• Visual Studio Code: An integrated development environment for coding.

Deployment:

• Netlify: Cloud platforms for hosting the application.

• Render.com: Cloud platforms for hosting the application.

DATA FLOW DIAGRAM (DFD):

LEVEL 0:
LEVEL 1:
LEVEL 2 :
Components of System &Their Interaction:

Client Interface:
• Description: The client interface represents the user-facing side of the e-commerce platform, accessible through web
browsers or mobile applications.
• Explanation: Users interact with the system through a user friendly interface, where they can browse products, add items
to their cart, and proceed with the checkout process.
Web/Application Server:
• Description: The web/application server handles the business logic, processes user requests, and communicates with
the database server.
• Explanation: It receives requests from the client interface, processes them, retrieves or updates data from the database,
and sends the appropriate response back to the client.
Database Server (MongoDB):
• Description: The database server stores and manages product information, user profiles, order details, and other
relevant data.
• Explanation: MongoDB, a NoSQL database, is used for its flexibility and scalability, accommodating the dynamic nature
of e-commerce data.
Authentication and Authorization System:
• Description: This component ensures secure user authentication and authorizes access to
protected resources.
• Explanation: It verifies user credentials during login, manages user sessions, and authorizes
access to specific features based on user roles and permissions.
Payment Gateway:
• Description: The payment gateway facilitates secure online transactions by encrypting sensitive
financial information and communicating with external payment processors.
• Explanation: When a user makes a purchase, the payment gateway securely handles the
transaction, ensuring the confidentiality of payment details and confirming successful payments.
Application Programming Interface (API):
• Description: The API serves as a bridge between different components, allowing them to
communicate and share data.
• Explanation: It enables communication between the web/application server and external services,
such as payment gateways or third-party integrations, ensuring seamless functionality.
Security Layer (SSL/TLS):
• Description: The security layer, implemented using SSL/TLS encryption, protects data transmitted
between the client and the server.
• Explanation: It secures sensitive information, such as login credentials and payment details,
preventing unauthorized access and ensuring the confidentiality of user data.

Load Balancer:
• Description: The load balancer evenly distributes incoming network traffic across multiple web
servers to optimize resource utilization and prevent server overload.
• Explanation: By balancing the load, this component enhances system scalability, improves
response time, and ensures high availability.
• Hardware Requirements:
The selection of hardware is important for proper working of any software.

Processor Intel Core i5

RAM 4 Gb / 8 Gb
Hard Disk Drive 500 Gb

• Software Requirements:
Number Description
1 Windows 7,8,10,11

2 HTML5, CSS3, JavaScript, Bootstrap, React

3 Compiler: VS Code
4 MongoDB
5 Node.js, Express.js
Functional Requirements:
User Registration and Account Management:
• Description: Users can create accounts, manage personal information, and track order history.
• Contribution: Enables personalized experiences, order tracking, and streamlined future transactions.
Product Search and Filtering:
• Description: Users can search for products and filter results based on various criteria.
• Contribution: Improves product discoverability and helps users find what they are looking for efficiently.
Product Catalog Management:
• Description: Allows administrators and sellers to add, update, and remove products from the catalog.
• Contribution: Ensures an up-to-date and well-organized product selection for users.
Shopping Cart:
• Description: Users can add products to a virtual cart before proceeding to checkout.
• Contribution: Facilitates a convenient and consolidated view of selected items, reducing the number of steps
in the purchasing process.
Security Measures:
• Description: Implements SSL/TLS encryption, secure payment gateways, and user authentication.
• Contribution: Safeguards user data, protects financial transactions, and builds trust in the security of the
platform.
Wishlist and Save for Later:
• Description: Enables users to save products for future consideration.
• Contribution: Enhances user engagement, allows for thoughtful consideration of purchases, and can
lead to future conversions.
Checkout Process:
• Description: Guides users through the steps of completing a purchase, including providing shipping
details and payment information.
Contribution: Ensures a smooth and secure transaction process, minimizing user drop-offs and cart
abandonment.
Multiple Payment Options:
• Description: Offers various payment methods such as credit cards, digital wallets, and other online payment
options.
• Contribution: Expands accessibility for users, accommodating different preferences and increasing the likelihood
of successful transactions.
User Reviews and Ratings:
• Description: Allows users to leave reviews and ratings for products.
• Contribution: Builds trust, provides valuable insights to other users, and helps in making informed purchasing
decisions.
Order Tracking and History:
• Description: Enables users to track the status of their orders and view past purchase history.
• Contribution: Enhances transparency and customer satisfaction by keeping users informed about their orders.
Mobile Responsiveness:
• Description: Ensures the platform is optimized for various devices, including smartphones and tablets.
• Contribution: Provides a consistent and user-friendly experience across different devices, catering to a broad user
base.
HOMEPAGE:
LOGIN / SIGN-UP PAGE:
PRODUCT LISTING:
SEARCH USING KEYWORD:
PRODUCT FILTER PAGE :
PRODUCT DETAILING:
ITEMS LISTING IN CART:
ADMIN INTERFACE:
ADMIN/ALL USERS:
DATABASE :
PRODUCT IMAGE STORAGE -ON CLOUDINARY :
PRODUCT UPLOAD :
PAYMENT GATEWAY:
PAYMENT
AFTER PAYMENT-ORDER SUCCESSFUL:
Future Work:
1. Augmented Reality (AR) Integration:
Enhancement: Implement AR features for virtual product try-ons or visualization.
Benefits: Users can visualize products in their real-world environment, improving their confidence in purchasing items like furniture,
clothing, or accessories.
2. Voice Search and Navigation:
Enhancement: Integrate voice-activated search and navigation.
Benefits: Allows users to search for products and navigate the platform using voice commands, catering to users who prefer hands-
free interactions.
3. Subscription Services:
Enhancement: Introduce subscription-based services for regularly purchased items.
Benefits: Users can subscribe to receive products at regular intervals, providing convenience and ensuring a consistent revenue
stream for the platform.
4. Blockchain for Supply Chain Transparency:
Enhancement: Implement blockchain technology for enhanced supply chain transparency.
Benefits: Users can track the entire journey of products from manufacturing to delivery, ensuring authenticity and ethical sourcing.
• 5. Dynamic Pricing Algorithms:

Enhancement: Develop algorithms for dynamic pricing based on user behaviour, demand, and external factors.
Benefits: Optimizes pricing strategies to maximize revenue, offering personalized discounts and promotions to users.
6. Social Commerce Integration:
Enhancement: Enhance social media integration to facilitate direct purchasing through platforms like Instagram or Facebook.
Benefits: Utilizes the popularity of social media for seamless shopping experiences and expands the platform's reach.
7. Personalized Virtual Assistants:
Enhancement: Implement AI-driven virtual assistants for personalized customer support.
Benefits: Provides users with personalized recommendations, answers queries, and guides them through the shopping
process, enhancing the overall user experience.
8. Sustainable Shopping Features:
Enhancement: Introduce features that highlight eco-friendly or sustainable products.
Benefits: Appeals to environmentally conscious consumers, contributing to corporate social responsibility efforts.
9. Localized and Multilingual Support:
Enhancement: Expand platform accessibility by providing support for multiple languages and localized content.
Benefits: Attracts a global user base and improves the platform's usability for non-native English speakers.
Conclusion:
Enhanced User Experience: This project is successfully designed an intuitive and visually appealing user
interface, improving the overall experience for users.
• Should allow users to browse through different product categories.

• Should allow users to save items to the cart and also to view detailed information about a particular item.

• Should allow users to check out the items.

• System users should be able to place the order by filling out the order form.

Secure Transactions: Robust security measures, including SSL/TLS encryption and secure payment
gateways, were implemented to ensure the confidentiality and integrity of user data and transactions. The
platform prioritizes user trust and data protection.
Scalability and Performance: The architecture was designed with scalability in mind, allowing the platform to
handle increased traffic and a growing product catalog without compromising performance. Load balancing
and a Content Delivery Network (CDN) were instrumental in achieving optimal system performance.
THANK YOU