Final Year Project Title

“Smart Job Portal”

Smart Job Portal Site Using React.JS Node.JS and Python

FINAL YEAR PROJECT THESIS

Supervisor Name
Dr. Sadiq Ali Khan

Submitted By

Kaleem Ullah
{EB19102033}

Muhammad Ahsan
{EB19102049}

Department of Computer Science

University Of Karachi.
[24th July 2023]
 Page|2

TABLE OF CONTENTS

ACKNOWLEDGMENT

LETTER OF APPRECIATION

ABSTRACT

1 INTRODUCTION

1.1 Background

1.2 Modern Web Based Library

1.3 Problem Statement

1.4 Proposed Solution

1.5 Objectives

2 LITERATURE REVIEW

2.1 Details of Relevant Theory

2.2 Similar Apps

3 REQUIREMENTS SPECIFICATION

3.1 Functional Requirements

3.1.1 Customer Module

3.1.2 Admin Module
3.2 Non-Functional Requirements

3.3 Use Case

4 SYSTEM DESIGN

4.1 System Architecture

4.1.1 Class Diagram

4.2 Logical Diagram

4.2.1 ER Diagram
4.2.2 Data Flow Diagram
4.3 GUI

4.3.1 Dashboard
4.3.2 Website
5 IMPLEMENTATION

5.1 Algorithm
 Page|3

5.2 Tools and Technologies Used

5.2.1 React.JS
5.2.2 Redux
5.2.3 ES6
5.2.4 Sass
5.2.5 MUI
5.2.6 React Bootstrap
5.2.7 Photoshop & Illustrator
5.2.8 Firebase
5.2.9 Visual Studio Code
5.3 Methodology

5.3.1 Planning
5.3.2 Research
5.3.3 Design and Development
5.3.4 Implementation
5.3.5 Review
6 TESTING AND EVALUATION

6.1 Test Cases

7 CONCLUSION

7.1 Review

7.2 Suggestion for Future Work

8 REFERENCES 45
 Page|4

ACKNOWLEDGMENT

First of all, we would like to thank the almighty ALLAH. Today we are successful in completing
our work with such ease because He gave us the ability, chance, and cooperating supervisor.

A scholarly and quality work like designing of any project can be accomplished by motivation,

guidance and inspiration of certain quarters besides the individual efforts. We express our

heartiest gratitude to those who have helped us in various stages of this study.

We are very much thankful to our FYP Supervisor Dr. Sadiq Ali Khan for providing all

necessary facilities. We extend our sincere thanks to him for giving us opportunity to undergo

this project to learn what we haven’t still and for his valuable guidance and co-operation. also

thankful to our friends and families whose silent support led us to complete our project.

Muhammad Ahsan

EB19102049

Kaleem Ullah EB19102033

 Page|5

LETTER OF APPRECIATION

Dear Dr. Sadiq Ali Khan,

You have been an ultimate source of enragement and guidance for us throughout this project.

Thank you for always being a source of tremendous support and encouragement for us. Every

time we left your office, we had big smiles and hearts full of enthusiasm.

Thank you so much, Sir, for such wonderful and enriching support and motivation all this time.

We consider ourselves lucky to work with you and learn so much from you.

Regards,

Muhammad Ahsan

Kaleem Ullah
 Page|6

ABSTRACT

Today the number of users who search Job from online sites has been increasing on daily basis.

The new generation, the majority of the people are using technology to comfort their lifestyle,

the world has been moving to the web and the growth in the Jobs is due to the emergence of Job

Portal. The use of the internet has given access to applicant to search job from their comfort

zone.

This project is aimed at developing an online search Portal for the Placement Details for job

seekers. The system is an online application that can be accessed throughout the organization

and

outside as well with proper login provided. This system can be used as an Online Job Portal for

User. User logging should be able to upload their information in the form of a CV.

Visitors/Company representatives logging in may also access/search any information put up by

Job aspirants

As in the current world, there are various JavaScript Libraries and Frameworks which has made

the applications more interactive and high performance. React.JS is one of the most demanding

and highly efficient libraries for Frontend development. React makes intelligent portable and

dynamic web applications.

This is web based smart & user-friendly Job Portal application, designed with the help of latest

JavaScript libraries. Users will have unique fast rendering experience which increases the

interactivity. Smart and interactive dashboard for the applicant and recruiter is designed which
 Page|7

will enhance the performance. Our application is developed with the help of React.JS, Node.JS,

Mongo db., Python and some other libraries discussed with detail use in report.
 Page|8

1 Introduction:

1.1 Online Job Portal

A job portal is a website, which helps in the recruitment process by bringing together both the

employer and the job-seeking candidate. An employment website is a website that deals

specifically with employment or careers. Many employment websites are designed to allow

employers to post job requirements for a position to be filled and are commonly known as job

boards. Other employment sites offer employer reviews, career and job-search advice, and

describe different job descriptions or employers. Through a job website a prospective employee

can locate and fill out a job application or submit resumes over the Internet for the advertised

position

1.2 Brief Overview of Work

Now a day, we know that searching of jobs is so difficult in proficient areas the portal developed

for the providing the simple and good job searching. With the help of this portal easily the job

seeker can submit their resume and get the lot of opportunity of the job related to their profile.

And by this website the companies or employer can also find the good and well profiled resume.

1.3 Objective
The online job Portal System that is to be developed provides the members with jobs

information, online applying for jobs and many other facilities. This system provides service to

the job applicants to search for working opportunities. Job Portal will allow job provider to

establish one to one relationship with candidates. This Portal will primarily focus on the posting

and management of job vacancies. This system is designed such that ultimately all vacancies
 Page|9

will be posted online and would offer employers the facilities to post their vacancies online. It

helps to review and manage the resulting applications efficiently through the web. Employer can

also find the jobs according to key skill in very less amount of time.

1.4 Scope
As of Pakistan market, there is sample opportunities for the job portal sites, as a greater number

of educated and skilled young people are coming out each and every year. Also, as the growth

rate of Pakistan is zooming to be at a healthy rate, so it is booming time for corporate also. So, a

greater number of lucrative careers will be available for the job seekers. So, it is now the right

period for the job portal sites to think out of the box, and to make most of the opportunities

available

1.5 Project Main Modules

1.5.1 Registration

Employee or Employer can register with valid details like contact details, experience details,

profile details, education details.

1.5.2 Login

Employee or Employer can Login with valid details like Email, Password.

1.5.3 Search Jobs

In this project we use advance search filter user can Search job according to their interest. And

also apply for that job. Employer search job for their requirements using keywords or skills.
 P a g e | 10

1.5.4 Job Post

Employer post job for their organization. And include job vacancy, salary details, working

hours, designation details, experienced details.

1.5.5 Manage Profile

Employee can also edit his/her account and details anytime. Also, user can manage his/her

information then download our resume any period of time.

1.5.6 Manage Employee

Recruiter can manage employees. And employe designations and employe details can see using

download resume options.

1.5.7 Resume Builder

Resume builder Automatically Work in this Project. On click Download option get your details

and made resume in a given format and then download. This functionality work on both

applicant and recruiters.

1.5.8 Recommendation System

Recommended jobs work on the base of machine learning using artificial intelligence.

1.6 Modern Web Based Library:

React is an open-source front-end JavaScript library developed and managed by Facebook. [2] It

has been popular since its time due to its simplicity and ease as through React developers are

able to make the interactive user interface. It is widely used for single -page web applications as

it renders the exact components to the view of each state and makes the data changes in the

application. [1] There are four main aspects of React.Js which are Virtual DOM, One-Way Data
 P a g e | 11

Flow, React Components and JSX Syntax. Every component in React.JS manages its own state

and composes them to the user interface. One of the main concepts of React which makes it

smart and efficient is Virtual DOM. [2] DOM stands for Document Object Model. In modern

web technologies, DOM

manipulation plays an important role and also refers to it as the core of the modern web. It is an

abstraction of structured text and it basically works slower than the other JS operations, it is

because JS frameworks update the DOM even if there is no need to update it. We can now say

that those updates aren’t required but it is done by default in many of the JavaScript

Frameworks. But as far as the matter of React is concerned when there are some changes in the

state, React creates a Virtual DOM which is very lightweight and it just works on that changed

component or state while other components are not touched Virtual DOM absorbs the changes

and save it in memory, then the algorithms detect the changes mad e in components and then

update the DOM. [3] This makes React more fast and more efficient to others as they have the

concept of Real DOM which changes the whole DOM rather than the component in which

change occurs. It is built in such a way that the data flow is unidirectional which means that the

data flows in a single direction. Through this behavior control between the states and model is

efficient in an application. It also prevents the architecture to be more understandable and not

being complex. [4] Another core feature of React is React Components and it is sometimes

considered as the heart of React as this is the collection of components we use. It is a small

reusable UI element that provides data to the view and changes over time. They are like JS

functions, they perform different tasks but with different approaches and environments. Input is

taken through the props and then return the react components. React components can be used to

build the entire interface or even a part of it. [4] JSX stands for the JavaScript XML in which we
 P a g e | 12

embed valid JS objects into the HTML elements. It is used in React for designing and building

the user interface.

It is safer, easier, and faster as the source code is compiled through JavaScript and the result is

also too optimized. Compared to the equivalent code written in JavaScript, the quality of the

application is way higher when developed with JSX. [4]

1.7 Problem Statement:

As we have seen in a recent pandemic many have gone in major losses, and one of the

major reasons was the expenses of the stores and other costs i.e. labor, large space. At

the same time a customer has to shop at the physical store which he has to manage the

time and transportation cost and due to pandemics now the customer has to maintain

the social distance as well as time has also been shortened.

We have seen online stores take too much time to reload because of not using proper

latest libraries or frameworks which is greatly causing customer experience. As we

have seen many stores are using the latest libraries but only on a few pages of sites.

Let’s have an example of the shopping cart. Consider we have a shopping website with

multiple shopping carts and we want to buy some of the items from the store, we

simply clicked on the required items and then the items stored to the shopping cart and

then checked out. In this, we haven’t even touched many of the items available in the

store but most of the technologies rebuild the whole cart list. This means that the

framework has to work maximum times as the number of lists is available in the cart

but React does not f ollow this concept as it has the core concept of Virtual DOM.
 P a g e | 13

1.8 Proposed Solution:

So these problems required an efficient and smart solution, this is done within this project. An

interactive user interface, fast rendering, smart libraries with the help of JavaScript is used and

the solution we have is crystal clear as we are designing a B2C E-commerce website, our

complete store is on the latest library of JavaScript which is React.JS, by this our site will be fast

and efficient that customers will experien ce a new change.

2 Literature Review:

2.1 Details of Relevant Theory:

The era of the web is continuously updating day by day with modern technologies and the

advancement needs and priorities are also being changed. The modern web has been changing

the globe of the internet world, the commerce industry has now been converted to E -Commerce

on a large scale and by the time it is moving to the latest technologies. We in the 21st century

need to develop interactive web applications and when we say that then a clear picture of

JavaScript opens in front of us as it has been covering the web application globe with its latest

frameworks and libraries. [5] Today JavaScript is the backbone of websites and no one can

imagine a website without using it. Where it has been need and the most important part of the

website, the other side is JavaScript’s libraries and frameworks are the need of today’s web-

based applications as everyone is switching to it. React.JS is one of the most demanding and

highly effici ent libraries for Frontend development. React is an open-source front-end

JavaScript library developed and managed by Facebook. [2] React is all about the components

and it’s the most important aspect of React bases application as the components are reusable, use

as many times any component in your application. It has been popular since its time due to its

simplicity and ease as through React developers are able to make the interactive user interface. It
 P a g e | 14

has been popular since its time due to its simplicity and ease as through React developers are

able to make the interactive user interface. It is widely used for single -page web applications as

it renders the exact components to the view of each state and makes the data changes in the

application. [1] Accord ing to the internet, more than 20 Lac's websites are using React and it’s

been only 8 years to the launch of React. This isn’t wrong to say that the future will be brighter

as Facebook, PayPal and other worldwide companies are using it.

2.2 Similar Apps:

React makes intelligent portable and dynamic web applications. It enables its different

functionalities to adjust into the complex structures without any hazards, this is the best of best

quality of React. [2] Every component in React.JS manages its own state and composes them to

the user interface. The virtual DOM concept has made React ability to compose code in an

efficient way. This concept has been the fundamental and the convincing ability of React. [2] In

React when there are some changes in the stat e, React creates a Virtual DOM which is very

lightweight and it just works on that changed component or state while other components are not

touched Virtual DOM absorbs the changes and save it in memory, then the algorithms detect the

changes made in compo nents and then update the DOM. [3] The changes that occur in the DOM

are observed by an algorithm named diff, this algorithm compares the virtual and the browser

DOM, and then it only updates the required or changed nodes in the browser DOM tree due to

which performance by the web application becomes fast and efficient. [6] React uses the one-

way data flow which is also termed as downstream data flow and the components are coded in

the JSX form that the JavaScript is written with the HTML.

Then we have different node packages for React which are named npm packages. Create React

App, React Router, React Redux, Material UI, React Bootstrap, Axios, and many others. Create
 P a g e | 15

React App is a command -line interface that is basically to start or create your app as it allows

you to interact with the React app and provides you the starting modules without any

configuration by the user. Then we have React Router package which is used to route in a web

application by utilizing dynamic directing and it happens as the application is rendering on your

machine. React Redux is used for the better state management of the app and it’s a free library.

React and Redux are used together but there independent of each other in many perspectives. For

using both we have to tie both of t hem by using ReactRedux library. It runs different

presentation enhancements in your project so the components get re-render when there is need.

The React-Redux works as a wrapper to a container. It allows you to make your components

more reusable. For the customization and response web application we use the

React Bootstrap and Material UI packages offered by the npm. React Bootstrap is library based

UI toolbox and it gives more power to the developers to reuse and coordinates with the UI

segments. Design ers can code smartly, easily and rapidly with the edge of reusable coding

strategies. [2] Whereas MUI is a language of plan developed by Google in 2014 for designing

the complex and responsive applications. To use this library in React based application we have

to install the MUI library in the project. This library leads to the performance enhancement and

interactivity to the application. For the HTTP request we have an Axios library so that we can

get the data from the APIs to show on our sites, it deals with the HTTP responses and requests as

it manages the React promises so it is simple to use. It has get () and post () methods to handle.

Also we can access the data by the fetch API method of React. [2]

React Hooks is now another most used feature in React which was introduced in 16.8 version,

the core concept of this advancement was to use the states in the functional components as

before states were used in the class components only. [5] The most common hooks are useState

(), useEffect (), useContext (), useReducer (), useCallback (), useRef () and useMemo (). [5]
 P a g e | 16

3 Requirements Specification:
The requirements are categorized into two parts functional and nonfunctional requirements

3.1 Functional Requirements:

The functional requirements are categorized into two parts.

3.1.1 Customer Module:

• Customer can easily search and view product without login.

• Customer can also easily add and remove product to shopping cart without login (in case

of add product).

• When customer want to purchase product, then must login to system

first.

• Customer can place order after signup account and login to system.

• Customer order will be place if customer click on checkout button, then their order will

be successfully placed.

• Customer can confirm and check their ordered details by just clicking on button.

• Customer can check the pending and delivered order status.

• Customer can give feedback to admin.

3.1.2 Admin Module:

• Admin can provide admin account with username, email and password.

• Admin can see dashboard after login where admin can see how many customer accounts

is registered how many product are sold and how many order placed.

• Admin can access to add product, delete product, view product and also edit the product.
 P a g e | 17

• Admin can access to view customer details and can edit/delete the

details.

• Admin can view the complete history of orders and also have access to delete the orders.

• Admin can change the order status (pending orders, confirmed order and out for delivery,

delivered).

• Admin can see the feedbacks/complaints of customers and take actions accordingly.

• Admin can see the history of the revenue, expenses and profits of day, week, month and

year.

• Admin can also set the discount offers, manage the pricing of different items.

3.2 Non-Functional Requirements:

Non-functional requirements are stated below:

• Customer will be able to find the product with ease and comfort without contacting to the

admins.

• Adding the product to “Add to Cart” function will not take multiple

steps or any other hazards.

• Customer’s security will be preferred, no data will be accessible to any other except the

administrator.

• The homepage will not take much time to reload, customers will experience a better

experience.

• Any backend problem will be sorted out without experiencing problems to the users.

• Within a year the website performance and scalability will grow more with best customer

experience.
 P a g e | 18

• Products will be highlighted will the local language also so that the customer will be able

to purchase with ease.

• UI will be simple and smart, interactive to the users.

 P a g e | 19

3.3 Use Case:

Login

Register

Manage Products

Manage Order
s

Manage Users

Admin Manage Complaints

View

Register

Login

Place Order User

Make Payment

Feedback
 P a g e | 20

4 System Design:
The system is design in a way that a user when visits the website and aims to buy something then

he has to do following steps; For Users:

• User Registration

• Login

• View Products

• Select Quantity

• Add Products to the Cart

• Place Order

• Checkout For Admins:

• Login

• Create Admin

• Update Admin

• Delete Admin

• Create Products

• Update Products

• Delete Products

• Create Blogs

• Update Blogs

• Delete Blogs

• Manage Orders

• View Users

• View Admins

• View Customers
 P a g e | 21

• View Revenue

• View Profit

• View and Handle Transactions

• Manage and Respond to User Queries

4.1 System Architecture

4.1.1 Class Diagram

 P a g e | 22

4.2 Logical Diagram

4.2.1 ER Diagram

4.2.2 Data Flow Diagram

 P a g e | 23

4.3 GUI

4.3.1 Dashboard
P a g e | 24
P a g e | 25
P a g e | 26
 P a g e | 27

4.3.2 Website
P a g e | 28
P a g e | 29
P a g e | 30
 P a g e | 31

5 Implementation:

5.1 Algorithm:
In React the real DOM and virtual DOM trees are being compared and then the changes are

updated which is termed as Reconciliation.

 P a g e | 32

The algorithm used by the React is Heuristic Algo which is officially termed Diffing Algorithm

used to update the DOM.

5.2 Tools and Technologies Used:

Following are the tools, technologies, and different other packages used to design and develop

this project.

5.2.1 React.JS

React is an open-source front-end JavaScript library developed and managed by Facebook. [2] It

has been popular since its time due to its simplicity and ease as through React developers are

able to make the interactive user interface. It is widely used for single -page web applications as

it renders the exact components to the view of each state and makes the data changes in the

application. [1] There are four main aspects of React.Js which are Virtual DOM, One-Way Data

Flow, React Components, and JSX Syntax. Every component in React.JS manages its own state

and composes them to the user interface. One of the main concepts of React which makes it

smart and efficient is Virtual DOM. [2] The whole web-based application is designed purely by

React.JS.
 P a g e | 33

5.2.2 Redux

React Redux is used for the better state management of the app and it’s a free library. React and

Redux are used together but they’re independent of each other in many perspectives. For using

both we have to tie both of them by using the React-Redux library. It runs different presentation

enhancements in your project so the components get re -render when there is a need. The React-

Redux works as a wrapper for a container. It allows you to make your components more

reusable. For global handling of data like add-to-cart features or users, credentials are stored in

Redux so that users can have a fast, efficient, and smart experience.

5.2.3 ES6

ES6 is the version of JavaScript which brings JS to the world of advancement as it was a second

major update, after this, there were multiple advanced features introduced which evolved the

spectrum of JavaScript. Features like Map(), Reduce(), Filter(), ForEach() methods have

changed the life of JS developer. Use of let, const, arrow function and template literals have also

been the most used features, whereas concepts of destructing, and promises have changed the

globe of JavaScript programming. With the help of these updates , our project has best practice

approaches. Features like products, earnings, and orders are designed with these effective

features.

5.2.4 Sass

Sass is a scripting language that is compiled into CSS, It’s a modern and advanced approach for

styling.
 P a g e | 34

5.2.5 MUI

MUI termed Material Design is a widely used UI library for React, it is very highly rated and a

huge library for customization of components, and is also easy to use. It is used in multiple pages

and components of Dashboard.

5.2.6 React Bootstrap

It is also a UI library for React components, also used by the developers for UI components. It is

used on multiple pages and components of the Website.

5.2.7 Photoshop & Illustrator

For interactive and eye-catching products images, sliders and logo were designed with the help

of designing tools Photoshop and Illustrator.

5.2.8 Firebase

It is a cloud-based platform used for the integration of web and mobile applications, the data

stored in it is stored in collections. It is easy to use and handle, a widely used product of google.

5.2.9 Visual Studio Code

It is an advanced and smart IDE used to code, composes of multiple libraries and packages, and

some other modern extensions for efficient coding practice for developers.

5.3 Methodology:
Methodology involves the following important stages;
 P a g e | 35

5.3.1 Planning

The first and the most important step was to plan the project in the exact direction of our

objectives which includes a smart and efficient web application with a fast rendering concept.

Following the timeline was another main focus in the planning phase.

5.3.2 Research

The second phase was to research out to get the required objectives and goals, it includes

studying research papers, and articles, and going through the different approaches and work to be

done.

5.3.3 Design and Development

Designing the model layout, flows, and structural process. Also designing the website logo,

images, and banners, goin g through the required objectives of the model designed, inputs and

the expected outputs, and approaches to develop the model. Also what and how to implement the

tools and technologies for the required structure.

5.3.4 Implementation

After designing the model we started by creating React App, implementing the layout from

Signup, Login, and the Firebase setup with React and the environment, then the website

homepage components which include the Header, Navbar, Slider, Product Carts, About, Blogs

and the Footer. Created Orders Page, Product Page, Checkout Page, Blogs Page and started

integration from the dashboard for adding Admins, Products, getting orders, and handling the

Order Process from Delivery to Completed Orders.

Developing other components time by time like User Feedback/ Complaints. Creating Widgets

for Customers, Orders, Earnings, Balance, Revenue, and so on. Worked on the layout with the

concept of being user -friendly and interactive. Different packages were used to handle multiple
 P a g e | 36

works like handling users and admin access Public Private Routing is implemented with the help

of react-router-package. React-Redux for use of global methods or variables inside the project

and also for better state management. React Hooks for multiple works like Life cycle co ncepts,

and state management of components. For interactivity packages like a toaster, react-circular-

progress bars. Multiple packages, and libraries were used to handle the different functionalities

and components.

5.3.5 Review

By going through the planned milestones, and goals and implementing the process of review

starts which highlighted multiple lack points and required some more implementations with

some better functionalities

6 Testing and Evaluation:

6.1 Test Cases

Action Description Input Expected Test

Result
Result
 P a g e | 37

Homepage – Display: Test all elements – Click on view and Show Same
add to add cart on
Product there may be image, title, any cart. Deal with
image, title, more
Gallery description, or buttons in the description, Pass

cart

If yes, is it moving you to the

right page and the the right

deal?

Display: Test all elements –

if there may not be an image,
title, description, or buttons
in the cart And if it not
moving you to the right page
and right deal?
 P a g e | 38

Product Check: Image of the product Click on Buy now, Show product
quantity, and add to
Details Price of the product details
cart options.
Page Product specifications & moving you

Quantity of Product Buy now to the right page

and add to cart options. and right deal when

Pass
you clicked on Buy

Check: if incorrect now, quantity, and

Image of the product add to cart options.

Price of the product

Product specifications

Quantity of Product

Sign-In For login: Enter the correct Email Id:

email & password and hit on a [email protected] m Login

Pass
sign-in button &password Success

********

Verify if a user cannot log in

with a valid username and an
invalid password.
 P a g e | 39

Verify if a user cannot enter

the characters more than the

specified range in each field

(Username and Password).

Verify the login page for

both, when the field is blank
and Submit button is clicked.

For a new password: the user Email Id:

Reset can enter the correct email in [email protected] m Password

password
case of changing the change Pass

password or forgetting the Success

password

For new password: if the user

enters incorrect email in case
of change the
 P a g e | 40

password or forgets password

Sign-Up For Signup: The user will User: Abc

insert the correct username, Phone:0316***

phone, country, email, and **** Save the user data

Pass
password for registration. Country: into the

Pakistan Email Id: Database

If the user will insert an [email protected] m

incorrect correct username, &password

phone, country, email, and ********

password for registration

Users cannot proceed

without filling all the

mandatory fields.
 P a g e | 41

Shopping This is the penultimate stage Operation of Product image,

adding shopping name, price,
Cart before the user commits to the cart quantity & product
remove option
purchase. appears in the Pass
shopping cart

If an item is out of stock, a

user cannot add it to the cart.

A user cannot add identical

items if they become

unavailable (out of stock)

during shopping. When a user

removes all items from the

cart, nothing is displayed and

the total price equals zero.

When a user closes a tab with

a shopping cart, the items

should remain in the cart.

 P a g e | 42

Checkout To place an order: Once Input user Same deals order

customers have filled out information information &

their information, Calculate including name, Total costs

the total amount and shipping phone, email, Appears in

Pass
costs. address, city, state, Checkout page

and postal code.

To place an order: if the user Then click on the

enters incorrect include
name, phone, email, address, place order button
city, state, and postal code.

7 Conclusion:

7.1 Review
With the passage of time, the world has become so fast that you have to move towards the virtual

concept for your routine work. We cannot deny that online shopping is now an essential tool in

our lives. Physical stores restrict the domain of the business as you will be targeting some of the
 P a g e | 43

geographical areas but by the concept of E-commerce, you will not be restricted as you can do

your business within the same online stor e in a wide geographical circle. Through this concept,

you can have a maximum reach of your store and within some time you can capture a good

number of consumers. Your budget will reduce as compared to the physical store, as well as the

operational budget. By using electronic tools to speed up the ordering, delivery, and payment

processes, e-commerce businesses can save billions of operating costs and reduce the amount of

inventory. We are now using E-commerce sites for shopping for clothes, groceries, electronic

items, and other daily life products.

Today the number of users who buy from online sites has been increasing on daily basis. The

new generation, the majority of the people are using technology to comfort their lifestyle, the

world has been moving to the web and the growth in the business is due to the emergence of e -

commerce. The use of the internet has given access to customers to purchase anything from their

comfort zone.

There are many web and mobile applications that have made our world so fast. But we need to

have fast internet to have a better experience of the applications with the high performing

devices. Now the trend of desktop base applications has been changing to web-based

applications. Especially after the jump of JavaScript in the modern world, this trend has been at

the fastest pace. As in the current world, there are various JavaScript Libraries and Frameworks

which has made the applications more interactive a nd high performance. React.JS is one of the

most demanding and highly efficient libraries for Frontend development. React makes intelligent

portable and dynamic web applications. It enables its different functionalities to adjust into the

complex structures without any hazards, this is the best of best quality of React. [2] Every

component in React.JS manages its own state and composes them to the user interface. The virt
 P a g e | 44

ual DOM concept has made React ability to compose code in an efficient way. This concep t has

been the fundamental and the convincing ability of React.

An interactive user interface, fast rendering, and smart libraries with the help of JavaScript are

used and we have designed a B2C E -commerce website, our complete store is on the latest libra

ry of JavaScript which is React.JS with Firebase integration and other libraries like Redux for

state management and MUI, Bootstrap, Sass for UI. With these libraries, our site is fast, smart,

and efficient and customers and administrators will experience a new change.

This FYP helps to know the importance of JavaScript and its libraries that why it’s time to move

through the latest and modern approaches in Web Application Development as well as why

having user -friendly and fast rendering concepts is important.

7.2 Suggestion for Future Work

In the future the most priority work should be to develop a smart chat application for the best

user experience, this will surely increase the potential growth of the web application. The next

top priority work is to integrate the Payment Integration method so that users can have an online

transaction facility.

8 References

[1] Q. N. Mai, "E-commerce Application using MERN," Finland, 2018.

[2] A. N. M. Prateek Rawat, "ReactJS: A Modern Web Development Framework," International Journal
of Innovative Science and Research Technology, vol. 5, no. 11, p. 5, 2020.

[3] R. C. a. A. Sandeep, "REACT.JS AND FRONT END DEVELOPMENT," International Research Journal of
Engineering and Technology (IRJET), vol. 7, no. 4, p. 4, 2020.

[4] P. A. PRATIK SHARAD MARATKAR, "React JS – An Emerging Frontend Javascript Library," IRE
Journals, vol. 4, no. 12, p. 4, 2021.
 P a g e | 45

[5] C. NS, "Benchmarking React Library: A Developer Perspective," Chandana NS, Dublin, 2021.

[6] A. K. a. R. K. Singh, "Comparative Analysis of React and Angular," International Journal of Latest
Trends in Engineering and Technology, vol. 7, no. 4, p. 4.

[7] S. Aggarwal, "Modern Web-Development using ReactJS," International Journal of Recent Research
Aspects, vol. 5, no. 1, p. 5, 2018.