MERN-STACK E-COMMERCE

Internship Industrial Activity Report

Submitted by

MANIKANDAN.S
(Reg. No: 23MC2430)
Under the Guidance of

Dr. P. SRIMANCHARI
Assistant Professor in Computer Science

PG AND RESEARCH DEPARTMENT OF COMPUTER SCIENCE

ERODE ARTS & SCIENCE COLLEGE (Autonomous)

(Affiliated to Bharathiar University, Coimbatore)

Accredited by NACC with A+ Level

ERODE -638 009

OCTOBER– 2024
 CERTIFICATE

Certified that this is a Bonafide Record of the Internship Industrial Activity done by
MANIKANDAN.S Reg.No: 23MC2430 of semester III, MCA in the Department
of Computer Science, Erode Arts and Science College (Autonomous), Erode – 638009

during the Academic year 2024 – 2025.

Signature of the Guide Head of the Department

Signature of the Principal

Viva-Voce Examination held on

Internal examiner
INTERNSHIP COMPLETION CERTIFICATE
 CONTENTS

PAGE
S.No. TITLE
NO.
1 COMPANY PROFILE 01

2 ABSTRACT 02

3 SOFTWARE DESCRIPTION 03

3.1 ABOUT THE PROJECT 03

3.2 OBJECTIVES 04

3.3 SYSTEM SPECIFICATION 06

3.4 FRONTEND(CLIENT-SIDE) 07

3.5 BACKEND(SERVER-SIDE) 07

4 MODULE DESCRIPTION WITH SCREEN SHOTS 10

5 CONCLUSION 22
 CHAPTER - 1
COMPANY PROFILE

1
 CHAPTER - 2
ABSTRACT

The MERN stack (MongoDB, Express.js, React.js, Node.js). The platform

provides a seamless online shopping experience where users can browse and purchase
products across various categories like Home Appliances, Technology, and
Stationary.

The project integrates a fully functional frontend built with React.js, offering
dynamic routing, user authentication, and product display functionality. The backend is
powered by Express.js and Node.js, handling API requests, data management, and
interaction with a MongoDB database. The platform supports user management,
including login, registration, and profile updates, while admins can manage products
and users via a dedicated admin interface.

The project emphasizes modular design, where each section (products, users,
admin panel) is handled by separate components, ensuring maintainability and
scalability. Connectivity between the frontend and backend is secured via API routes
that retrieve user and product data, providing a dynamic and interactive shopping
experience.

The platform is prepared for real-world deployment, with essential features such
as data management, cross-origin support (CORS), and error handling in place.
The combination of a powerful backend and a responsive frontend makes MERN-
STACK an efficient, user-friendly e-commerce solution.

2
 CHAPTER - 3
SOFTWARE DESCRIPTION

3.1 ABOUT THE PROJECT

This e-commerce project is a full-stack web application designed to provide

users with a seamless shopping experience. The platform allows users to browse and
purchase products online, manage their accounts, and view order histories. The website
is developed using modern web technologies to ensure performance, scalability, and
user-friendliness.

The back end is built using Node.js and Express, leveraging the MongoDB
database for storing user and product information. It provides a secure and efficient API
for handling requests related to user authentication, product listings, and order
management.

On the front end, React .js is used to create an interactive user interface that
supports dynamic content rendering, providing a responsive and engaging experience
for users. Additionally, various libraries and tools such as CORS for cross-origin
resource sharing, dotenv for managing environment variables, and Mongoose for
MongoDB interactions are integrated to ensure smooth functionality across different
components of the system.

The project is structured to support future enhancements, such as the inclusion of

advanced features like payment gateways, product reviews, and recommendation
systems, making it a comprehensive solution for modern e-commerce needs.

3
3.2 OBJECTIVES

The primary objectives of this e-commerce project are as follows:

1.Provide a User-Friendly Shopping Experience:

1. Design a responsive and intuitive interface that allows users to easily

browse, search for products, and complete purchases with minimal effort.

2.Seamless User Registration and Authentication:

1. Implement secure user registration, login, and account management

functionalities using token-based authentication to protect user data.

3.Efficient Product Management:

1. Enable administrators to manage product listings, including adding,

editing, and deleting products, while ensuring that product details are
displayed accurately to users.

4.Order Processing and Tracking:

1. Allow users to place orders, view order histories, and track the status of

their purchases, offering a clear and streamlined order processing

workflow.

5.Secure Data Handling and Transactions:

1. Ensure the protection of user data, product information, and transactions

through secure communication protocols, data validation, and

authentication mechanisms.

4
6.Scalability and Performance:

1. Build a scalable architecture using Node.js and MongoDB to handle

growing numbers of users, products, and orders without compromising

performance.

7.Cross-Origin Resource Sharing (CORS) Support:

1. Implement CORS to enable the frontend and backend to communicate

securely while ensuring cross-platform compatibility.

8.Future Expandability:

1. Lay the foundation for future enhancements, including integration with

third-party payment gateways, product reviews, wish lists, and

personalized recommendations.

This project aims to serve as a robust, scalable, and feature-rich e-commerce

platform that can cater to a wide range of users while supporting future business growth
and feature expansion.

5
3.3 SYSTEM SPECIFICATION

SOFTWARE SPECIFICATION

Operating System : Windows 11

Front End : HTML, CSS, TailwindCSS and JavaScript
Back End : Node, Express
Database : MongoDB
Software : Visual Studio Code and Postman

HARDWARE SPECIFICATION

Processor : Intel Core i5

RAM Capacity : 16 GB
Hard Disk : 256 GB
Keyboard : Logitech 107 Keys
Monitor : 14 inch
Mother Board : Intel
Speed : 1.60GHZ

6
3.4 Frontend (Client-Side)

 Technology: React.js
 Description: The frontend is developed using React.js, a popular JavaScript
library for building user interfaces. React's component-based architecture
enables modular and reusable UI elements, making the application scalable and
easy to maintain.
 Key features include:

o Dynamic rendering of product listings and user information.

o Responsive design to support various devices (desktop, tablet, mobile).
o Smooth user navigation through pages such as Home, Product Details,
Cart, and User Dashboard.
o Integration of API calls to interact with the backend, enabling features like
login, product viewing, and order management.

3.5 Backend (Server-Side)

 Technology: Node.js, Express.js

 Description: The backend is powered by Node.js, with Express.js acting as the
web framework to handle HTTP requests, route management, and middleware
integration.
 Key features include:

o API development for user registration, login, product management, and

order processing.
o Middleware for parsing JSON data, managing CORS (Cross-Origin
Resource Sharing), and serving static files.
o Secure authentication using JSON Web Tokens (JWT) for user login and
account protection.
7
 o Error handling and response management to ensure robust and reliable
API communication.

Database

 Technology: MongoDB
 Description: The platform uses MongoDB, a NoSQL database, to store and
manage data. MongoDB is highly scalable and provides flexible schema design,
making it an ideal choice for e-commerce platforms that deal with varied and
evolving product categories and user data.
 Key features include:

o Storing user data, including registration details and order history.

o Managing product information, such as product name, description, price,
and stock availability.
o Querying data efficiently for fast access to products and user accounts.

Environment Variables and Configuration

 Technology: dotenv
 Description: Sensitive configuration settings, such as database connection
strings and JWT secret keys, are managed using dotenv. This allows for secure
handling of environment variables without hardcoding them into the source code.

Cross-Origin Resource Sharing (CORS)

 Technology: CORS middleware

 Description: The backend implements CORS to allow the frontend (client-side)
to communicate with the backend securely. This is critical for ensuring proper
API access while maintaining security restrictions between different domains.

8
File Management and Static Content

 Technology: Express Static Middleware

 Description: Static files such as product images are served using Express's static
middleware. Files uploaded to the server are stored in the /uploads directory,
while public assets are served from the /public directory.

Database Integration

 Technology: Mongoose (ODM)

 Description: Mongoose is used to interact with MongoDB, providing schema-
based solutions to model the application data. It simplifies the process of
querying and interacting with the MongoDB database, handling tasks such as
validation and relationship management.

Version Control and Collaboration

 Technology: Git and GitHub

 Description: The project uses Git for version control, allowing developers to
track changes, collaborate efficiently, and manage multiple versions of the code
base. GitHub is used for remote collaboration, enabling team members to
contribute and review code in a structured manner.

Development Tools

 Node.js: The JavaScript runtime environment used to execute server-side code.

 Express.js: The web framework for Node.js that simplifies routing and server
configuration.
 React.js: The frontend library used for building the user interface.
 MongoDB: The NoSQL database used to store user and product data.

9
 CHAPTER - 4
MODULE DESCRIPTION

1. App.jsx (Frontend - React.js)

This file represents the main frontend structure of the project. It contains the
routing setup and integrates various UI components that make up the e-commerce
platform's user interface.

Modules and Components:

BrowserRouter & Routes:

o Handles navigation between different sections of the website, such as the

homepage, product categories, user authentication, and admin pages.

Home:

o The landing page that serves as the entry point for users visiting the e-
commerce platform. This can include featured products and promotions.

Filesbar:

o A navigation bar or sidebar that allows users to navigate between different

categories, such as Home Appliances, Technology, and Stationary.

Carousel:

o A slider that likely displays promotional images or featured products to

catch the user’s attention on the homepage.

10
 Product Pages:

o HomeAppliances.jsx, Technology.jsx, Stationary.jsx: These

components handle the display of products under respective categories.
They use the images dataset to dynamically display product images.
o ProductDetails.jsx: This module is responsible for rendering detailed
information about a selected product, including specifications, images, and
price.

Authentication Components:

o Login.jsx & Signup.jsx: Handle user login and registration, allowing

users to access personalized content and make purchases.
o Profile.jsx: Manages user profile information, including the ability to
view and update personal details.

11
12
Productdetails components:

The Product Details View module is a crucial part of the user experience in an
e-commerce website. It allows users to view detailed information about a specific
product, including its description, price, reviews, and options for adding the product to
the shopping cart. Below is a detailed review of the Product Details View Module.

Product Information Display:

 Product Image(s):
o High-quality images of the product are displayed prominently.
o Image gallery or slider to view multiple angles or variations of the product.
 Product Name: Displayed in a large font at the top, helping users quickly
identify the product.
 Price: The current price of the product, with any discounts or promotions applied.
 Description: A detailed product description outlining key features, materials,
and any other relevant information.
 Stock Availability: Shows whether the product is in stock or out of stock, along
with the available quantity.
 Product Variants (if applicable): Options to select variants like size, color, or
style.

Product Reviews and Ratings:

 Star Rating System: An average rating based on user reviews, typically out of 5
stars.

13
  Customer Reviews: A section displaying user-submitted reviews with
comments, ratings, and the option to sort reviews by most recent or
highest/lowest rating.
 Write a Review: Logged-in users can submit their own reviews, rating the
product and leaving feedback.

Add to Cart:

 Quantity Selector: Users can choose the number of items they want to add to
their cart.
 Add to Cart Button: A prominent button that allows users to add the selected
quantity to their shopping cart.
 Price Update: If the user changes the quantity or selects different variants (like
size or color), the price updates accordingly.
 Related Products: Below the main product details, there is usually a section
displaying similar or related products to encourage cross-selling.

14
Admin Components:

o AdminPage.jsx: Provides admin users with the functionality to manage

users, products, and potentially orders.
o Deatails_user.jsx: Displays detailed information about individual users,
likely used by admins to manage user profiles.

15
16
Error Handling:

o NoMatch.jsx: A fallback component that handles 404 errors when users

attempt to access a route that doesn't exist.

Footer:

o Displays information at the bottom of the page, likely containing company

details, legal links (privacy policy, terms of service), and possibly social
media links.

Data Flow:

 Images Dataset (images.json): Shared among several components to render

dynamic product images in different categories and carousels.

17
2. index.js (Backend - Node.js, Express.js, MongoDB)

This file sets up the backend for the e-commerce project, creating a robust API that
handles user and product management.

Modules and Components:

Express Server:

o Serves as the foundation for the backend, handling HTTP requests and
routing them to appropriate services.

Database Connection (connectDB.js):

o Establishes a connection to MongoDB, which is the primary database

storing user information, product data, and other relevant details.
18
Middleware:

o express.json(): Handles JSON-formatted requests, allowing the API to

process incoming data.
o CORS: Enables secure communication between the frontend and backend
when they run on different origins.
o Static File Serving: Serves static assets such as images or files that are
uploaded by users or admins.

19
Routing:

o User Routes (userRoute.js): Manages user-related operations, such as

registration, login, and profile updates.
o Product Routes (productroute.js): Handles product-related functionality,
such as fetching product data for display on the frontend.

API Endpoints:

o /api/v1/user: Processes user-related requests, interacting with the user

model in MongoDB to handle tasks like user creation, authentication, and
fetching user details.
o /api/v1/product: Provides product data to the frontend, enabling dynamic
product displays based on the current inventory in the database.

User Model (userModel.js):

o Represents the structure of user data in MongoDB, including fields for

user profile information and authentication details.
20
Error Handling:

o In the case of server errors (e.g., failure to connect to the database), the
API returns appropriate error messages to the frontend.

Server Deployment:

 StartServer Function:

o Connects to MongoDB before starting the server, ensuring the application

is fully prepared to handle API requests once the database connection is
successfully established.
o The server listens on port 3000, responding to API calls from the frontend.

21
 CHAPTER - 5
CONCLUSION

This MERN stack e-commerce project integrates key components to handle

user management, product display, and overall site navigation. The backend (Node.js,
Express, MongoDB) works seamlessly with the frontend (React.js) to provide a
dynamic, responsive, and secure e-commerce platform.

Possible Improvements:

1. State Management: Using Redux or Context API for state management on the

frontend could help handle global states such as user authentication, cart details,
and product filters.
2. Security: Implement JWT (JSON Web Token) authentication to secure API

routes.
3. Scalability: Add pagination and sorting to product listings to improve

performance and user experience for large inventories.

4. Error Logging: Implement better error logging and handling for both frontend

and backend for smoother debugging.

FUTURE ENHANCEMENT:

There are several enhancements you can implement in the Product

Details View module to improve the user experience and functionality. These
enhancements can increase user engagement, streamline the shopping process, and
boost overall sales. Below are some key future enhancement

22