0

ON JOB TRAINING
REPORT
An OJT report
submitted in partial
fulfillment of the
requirements for the award of the degree of

B. Sc. (Hons.) Computer Applications

By

Name: ARYAN RAJ

Exam Roll No.: 20VBCA044479
Paper Code: BCADSE04B
Session: 2020 – 2023
 1

Certificate of Originality

The Project Report entitled “E-COMMERCE WEBSITE”, is hereby

approved as a creditable work and has been presented in satisfactory
manner to meet its acceptance as prerequisite to the degree for which it has
been submitted. It is understood that by this approval, the undersigned do
not necessarily endorse any conclusion drawn or opinion expressed therein,
but approve the Project Report for the purpose for which it is submitted.

(Aryan Raj)

(Internal Examiner) (External Examiner)

(Dr. Swarat Chaudhari)

Head of the Department

Department of Computer Science

St. Xavier’s College, Ranchi

 2

Acknowledgement

I Aryan Raj, would like to thank my Mr. Sarju Kumar

Sharma for his guidance through my course from his
Company Refresh Infratech Pvt.Ltd for his constant
support and supervision in completing this report.
I’d like to extend my special thanks to other members of the
faculty as well for their guidance and help throughout my
academic journey.
Finally, I’d like to thank my parents for their emotional
support and financial backing without which this report
wouldn’t have been possible. I’d also like to mention my
friends Vikash,Nikhil, Ayush who did the most structuring
this report and understanding the course content even
better.

Aryan Raj
20VBCA044479
 3

Table of Contents

Certificate 1
Acknowledgement 2
Table of Content 3

Chapter I: Abstract 4

Chapter II: Introduction 6

Chapter III: SDLC Model 9

Chapter IV: System Requirement Analysis 10

Chapter V: System Design 14

Chapter VI: Technology Used 17

Chapter VII: Source Code 19

Chapter VIII: Output 22

Chapter IX: Future Work 24

Chapter X: Conclusion 26

Chapter IX: References 27

 4

Chapter I: Abstract

E-commerce, or electronic commerce, has become an integral part of the

modern business landscape, allowing businesses to sell products and services
online and customers to shop conveniently from anywhere at any time. E-
commerce websites are the virtual storefronts that enable these transactions,
providing businesses with an online platform to showcase their offerings and
customers with a user-friendly interface for browsing, selecting, and
purchasing products or services.

The objective of this report is to provide an overview of e-commerce

websites, including their purpose, functionality, and significance in the
current market. The report delves into the key components of an e-commerce
website, such as the product or service catalog, shopping cart or basket,
checkout process, and order management.
The report also discusses the tools and technologies commonly used in the
development of e-commerce websites, with a focus on React and Redux,
popular JavaScript libraries for building robust and scalable user interfaces
and managing state in complex web applications. Other tools and libraries
such as React Router are also highlighted for their roles in enhancing the
development process and improving the quality of e-commerce websites.
 5

Furthermore, the report emphasizes the significance of user experience,

website security, and payment processing in the success of an e-commerce
website. It also discusses the challenges and considerations associated with e-
commerce websites, such as competition, data privacy, and customer trust.
In conclusion, e-commerce websites have revolutionized the way businesses
operate and customers shop. They provide businesses with a global online
presence and customers with convenient and personalized shopping
experiences. Understanding the fundamentals of e-commerce websites,
including their components, online marketing techniques, tools, and
challenges, is crucial for businesses aiming to establish or enhance their
online presence and engage with customers in the digital era.
 6

Chapter II: Introduction

E-commerce, or electronic commerce, refers to the buying and selling
of goods and services over the internet. E-commerce websites are
online platforms that facilitate these transactions, allowing businesses
to showcase their products or services, and customers to browse,
select, and purchase items or services online.
E-commerce websites have revolutionized the way businesses
operate, providing opportunities for global reach, increased sales, and
convenient shopping experiences for customers. E-commerce
websites come in various forms, including online marketplaces,
online stores, and service-based platforms.
The key components of an e-commerce website typically include a
product or service catalog, a shopping cart or basket, a checkout
process for making payments, and features for managing orders,
inventory, and customer accounts. E-commerce websites also often
incorporate online marketing techniques such as search engine
optimization (SEO), social media marketing, and email marketing to
attract and retain customers.
The success of an e-commerce website depends on various factors,
including website design, user experience, security, payment
processing, and customer service. Creating an effective e-commerce
website requires a thorough understanding of e-commerce
fundamentals, web design and development, online marketing, and
website security.
In conclusion, e-commerce websites play a significant role in the
modern business landscape, providing businesses with a global online
presence and customers with convenient online shopping experiences.
Understanding the basics of e-commerce websites is essential for
businesses looking to establish or enhance their online presence and
effectively engage with customers in the digital era.
 7

When developing an e-commerce website using React and Redux,

there are several tools that are commonly used to enhance the
development process and improve the overall quality of the project.
Some of the key tools used in a React Redux-based e-commerce
website project include:
React: React is a popular JavaScript library for building user
interfaces, including web applications. It allows developers to create
reusable UI components, manage component state, and handle UI
updates efficiently, making it a core tool for building the front-end of
an e-commerce website.
Redux: Redux is a state management library for JavaScript
applications, often used in conjunction with React. It provides a
centralized state management solution, allowing developers to
manage the state of the application in a predictable and maintainable
way. Redux is particularly useful for handling complex state
interactions in an e-commerce website, such as managing shopping
cart items, user authentication, and order tracking.
Redux Toolkit: Redux Toolkit is an official set of tools and
conventions designed to simplify the process of managing Redux
state. It includes utilities for writing Redux code more efficiently,
such as creating Redux slices for managing different parts of the state,
configuring Redux store, and handling asynchronous actions with
middleware.
React Router: React Router is a popular routing library for React
applications that allows developers to handle client-side routing and
navigation. It enables the creation of multi-page applications with
multiple views or pages, which is often a requirement for e-commerce
websites with different product pages, cart pages, and checkout pages.
Redux DevTools: Redux DevTools is a browser extension that
provides advanced debugging and development tools for Redux-based
applications. It allows developers to inspect and manipulate the
Redux store, track state changes, and replay actions, making it a
 8

valuable tool for debugging and optimizing the state management in

an e-commerce website.

JavaScript is a high-level programming language. It offers several

features like
1. Dynamic typing,
2. Prototype-based object-orientation,
3. Curly-bracket syntax, 5. Just-in-time compilation.
Visual Studio Code by Microsoft is a source-code editor, freely
available for macOS, Windows, and Linux. It provides some great
features like:
1. Intelligent code completion,
2. Code refactoring,
3. Support for debugging,
4. Syntax highlighting, 5. Embedded Git, 8
6. Snippets.
 9

Chapter III: SDLC Model

Iterative Waterfall Model

The iterative waterfall model provides feedback paths from
every phase to its preceding phases, which is the main
difference from the classical waterfall model.

Feedback paths introduced by the iterative waterfall model

are shown in the figure below.

When errors are detected at some later phase, these feedback

paths allow correcting errors committed by programmers
during some phase. The feedback paths allow the phase to be
reworked in which errors are committed and these changes
are reflected in the later phases. But, there is no feedback path
to the stage – feasibility study, because once a project has
been taken, does not give up the project easily.

It is good to detect errors in the same phase in which they are

committed. It reduces the effort and time required to correct
the errors.
 10

Chapter IV: System Requirement Analysis

1. Functional Requirements

1.1 Home Page

● Description: First the user has to visit the website’s
Home Page.
● User: The user is the one who wants to get the news
from the application

Home page is consisting of one section:

1.1.1 Home

● Input: Click on it.

● Output: Shows the home page and different
products listed will be shown.
● Processing: Get the website landing page.

1.2 Products Section

● Input: User has to click.
● Output: Different products available to sell will be
shown.
● Processing: Website updates the page according to the
filtering feature added.

1.3 About Section

● Input: User has to click.
● Output: It shows about us page to the user.
● Processing: page updates with info about the author.

1.4 Contact Page

 11

● Input: User clicks on the link .

● Output: It shows the contact details.
● Processing: Contact details of the author is shown to the
user.

1.5 Login

● Input: User clicks on the link .

● Output: Login form appears.
● Processing: User is logged in if the credentials are
correct.

1.6 Registration

● Input: User clicks on the link .

● Output: Registration form appears
● Processing: User is registered with given data

1.7 Cart

● Input: User clicks on the link.

● Output: Cart items are shown.

2. Non Functional Requirements

Usability Requirement:
The system shall allow the librarian to access the system
from the computer using this application. The desktop system
uses a web browser as an interface. Since all users are
familiar with the general usage of desktop web browsers,
hence, no special training is required. The system is user
friendly which makes the system easy.
Availability Requirement:
 12

The system is available 100% for the user and is used 24 hrs.
a day and 365 days a year. The System shall be operational
24 hours a day and 7 days a week.
Efficiency Requirement:
Mean Time to Repair (MTTR) - Even if the system fails, the
system will be recovered back up within an hour or less.
Accuracy: The system should accurately provide real time
information taking into consideration various concurrency
issues. The system shall provide 100% access reliability.
Performance Requirement:
The information is refreshed depending upon whether some
updates have occurred or not in the application. The system
shall respond to the member in not less than two seconds
from the time of the request submittal. The system shall be
allowed to take more time when doing large processing jobs.
Responses to view information shall take no longer than 5
seconds to appear on the screen.
Reliability Requirement:
The system has to be 100% reliable due to the importance of
data and the damages that can be caused by incorrect or
incomplete data. The system will run 7 days a week, 24 hours
a day.

3. System Requirements

3.1. Software Requirements

● Operating
system- Windows 10 is used as the operating
system as it is stable and supports more features and is
more user friendly.
● Development tools and Programming language-
ReactJS, JavaScript, VS Code.
3.2 Hardware Requirements
 13

1.Intel core i3 is used as a processor. It is fast processors and provide

reliable and stable and we can run our pc for longtime. By using this
processor, we can keep on developing our project without any worries

2. Ram 1 GB is used as it will provide fast reading and writing

capabilities and will in turn support in processing.
 14

Chapter V: System Design

1.Data Flow Diagram

 15

2.Use Case Diagram

 16

3.Flow Chart Diagram

 17

Chapter VI :Technology Used

REACT
React is a JavaScript library for developing user interfaces. React
makes it effortless to create responsive UIs. Design basic views for
every state in any application, and React will accurately update and
render just the correct parts when the user's data updates. React
enables users to construct encapsulated parts that manage their
own state, and then combine them to make dynamic UIs. Since
component logic is constructed in JavaScript instead of templates,
you can easily pass detailed data to any app and keep state out of
the DOM. React has been made from the start for continuous
adoption, and you can use as few or as much React as you need.
Whether you want to get a gist of React or include some features to
a basic HTML page, or start a React-powered app, the links in this
section will help you start.

REDUX:
Redux is a JavaScript state management library that is commonly
used in modern web applications, particularly those built with React.
Redux provides a predictable and centralized way to manage the
state of an application, making it easier to understand, debug, and
maintain complex state interactions.
At its core, Redux follows a unidirectional data flow architecture,
where the state of an application is stored in a single, immutable
object called the store. The store represents the current state of the
application and serves as the single source of truth for the state. All
changes to the state are made through actions, which are plain
JavaScript objects that describe what changes need to be made to
the state. Actions are dispatched to the store, and the store uses a
 18

function called a reducer to handle the action and update the state
accordingly.
REACT-ROUTER:
React Router is a popular routing library for building single-page
applications (SPAs) with React, a JavaScript library for building user
interfaces. React Router allows developers to handle client-side
routing in React applications, enabling navigation between different
views or pages without triggering a full page reload.
React Router provides a declarative way to define the routes in a
React application. Routes are typically defined as components that
represent different views or pages in the application. These
components can be nested to create nested routes, allowing for
complex routing scenarios. React Router also provides features such
as route parameters, query parameters, and redirects, allowing for
dynamic and flexible routing in a React application.
 19

Chapter VII: Source Code

Index.js

import React from 'react';

import ReactDOM from 'react-dom/client';
import '../node_modules/font-awesome/css/font-
awesome.min.css';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { Provider } from 'react-redux';
import store from './redux/store';

import { Home, Product, Products, AboutPage, ContactPage, Cart,

Login, Register, Checkout, PageNotFound } from "./pages"

const root =
ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<Provider store={store}>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/product" element={<Products />} />
<Route path="/product/:id" element={<Product />} />
<Route path="/about" element={<AboutPage />} />
<Route path="/contact" element={<ContactPage />} />
<Route path="/cart" element={<Cart />} />
<Route path="/login" element={<Login />} />
<Route path="/register" element={<Register />} />
 20

<Route path="/checkout" element={<Checkout />} />

<Route path="*" element={<PageNotFound />} />
<Route path="/product/*" element={<PageNotFound />} />
</Routes>
</Provider>
</BrowserRouter>
);

Here I have used react router so I have imported all the files in the
index.js file and used the router here itself.
 21

Files:-

Chapter VIII: Output

22
23
 24

Chapter IX: Future Work

The field of e-commerce is constantly evolving, and there are several potential
areas of future work in e-commerce websites that businesses and developers
can explore to stay competitive and meet the changing needs of consumers.
Some potential future work areas in e-commerce websites include:

Personalization and AI-driven recommendations: E-commerce websites can

leverage artificial intelligence (AI) and machine learning algorithms to provide
personalized product recommendations, tailored offers, and customized
experiences for individual users. This can help businesses enhance customer
engagement, increase conversions, and build long-term customer loyalty.

Mobile commerce (m-commerce): With the increasing use of mobile devices

for online shopping, m-commerce is expected to continue to grow in the
future. E-commerce websites need to prioritize mobile responsiveness,
optimize the user experience for mobile devices, and develop mobile apps to
capture the growing market of mobile shoppers.

Voice commerce: Voice assistants, such as Amazon's Alexa or Apple's Siri, are
becoming increasingly popular, and voice commerce is expected to grow in the
future. E-commerce websites can explore voice commerce capabilities, such as
voice search, voice-enabled product browsing, and voice-based checkouts, to
cater to users who prefer using voice commands for online shopping.

Social commerce: Social media platforms are increasingly becoming a channel

for online shopping, with features such as shoppable posts and social
commerce integrations. E-commerce websites can leverage social media
platforms to drive traffic, engage with customers, and enable seamless
shopping experiences within social media environments.
 25

Sustainability and ethical practices: Consumers are becoming more conscious

of sustainability and ethical practices, and e-commerce websites can
incorporate features such as eco-friendly product labels, fair trade
certifications, and sustainability initiatives to appeal to environmentally and
socially conscious consumers.

Enhanced security and data privacy: As online threats and data breaches
continue to be a concern for consumers, e-commerce websites need to
prioritize robust security measures, such as SSL encryption, two-factor
authentication, and regular security audits, to protect customer data and build
trust.

Internationalization and localization: E-commerce websites can explore

expanding their reach to international markets by implementing features such
as multi-language support, localized pricing and payment options, and
international shipping options to cater to global customers and increase sales
in different regions.

Enhanced customer service and support: Providing excellent customer service

and support is crucial in the competitive e-commerce landscape. E-commerce
websites can invest in features such as live chat support, chatbots, self-service
portals, and proactive order tracking to enhance customer satisfaction and
loyalty.
 26

Chapter X: Conclusion

In conclusion, e-commerce websites have become an integral part of modern

retail, providing businesses with a global platform to sell products and services
online. E-commerce websites offer numerous advantages, such as increased
reach, convenience, and flexibility for both businesses and consumers. They
have also evolved significantly over time, with advancements in technology,
user experience, and security.
E-commerce websites require careful planning, design, and development to
create a seamless and user-friendly online shopping experience. Important
considerations include responsive design for mobile devices, effective product
categorization and search functionality, secure payment gateways, efficient
order management, and reliable shipping and fulfillment processes.
Furthermore, e-commerce websites can benefit from incorporating additional
features such as personalized recommendations, social commerce
integrations, voice commerce capabilities, and sustainability initiatives, among
others, to stay competitive and meet the changing needs of consumers.
As the e-commerce landscape continues to evolve, it is important for
businesses to keep up with the latest trends, technologies, and customer
expectations. Regular updates, performance optimization, and continuous
improvement of the user experience can help e-commerce websites thrive in
the competitive online retail market.
Overall, e-commerce websites have transformed the way businesses conduct
online transactions, and they continue to shape the future of retail. With
proper planning, design, and continuous improvements, e-commerce websites
can be highly effective in generating revenue, building customer relationships,
and expanding businesses in the digital world.
 27

Chapter XI: References

[1] "React – A JavaScript library for building user interfaces", Reactjs.org.

[Online]. Available: https://reactjs.org/.
[2] "React Card component - Material-UI", Material-ui.com.
[3] “Redux” : https://react-redux.js.org/
[4] “Redux-toolkit” : https://redux-toolkit.js.org/
[5] “javascript” : javascript help from https://www.w3schools.com/js/