You are on page 1of 60

MADHAV INSTITUTE OF TECHNOLOGY & SCIENCE, GWALIOR

(A Govt. Aided UGC Autonomous & NAAC Accredited Institute Affiliated to RGPV, Bhopal)

Project Report

on

Praedico Virtual office (Employee)

Submitted By:
Nikhil Agrawal
0901CA191012

Mentor:
Adhish Goyal, Software Engineer
Dr. Anshu Chaturvedi, Professor
Faculty Coordinator

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING


MADHAV INSTITUTE OF TECHNOLOGY & SCIENCE
GWALIOR - 474005 (MP) est. 1957

MAY-JUNE 2022
MADHAV INSTITUTE OF TECHNOLOGY & SCIENCE, GWALIOR
(A Govt. Aided UGC Autonomous & NAAC Accredited Institute Affiliated to RGPV, Bhopal)

Project Report

on

Praedico Virtual office (Employee)

A project report submitted in partial fulfillment of the requirement for the degree of

MASTER OF COMPUTER APPLICATION

in

COMPUTER SCIENCE AND ENGINEERING

Submitted By:
Nikhil Agrawal
0901CA191012

Mentor:
Adhish Goyal, Software Engineer
Dr. Anshu Chaturvedi, Professor
Faculty Coordinator

Submitted to:
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
MADHAV INSTITUTE OF TECHNOLOGY & SCIENCE
GWALIOR - 474005 (MP) est. 1957
MAY-JUNE 2022
ORGANISATION CERTIFICATE
MADHAV INSTITUTE OF TECHNOLOGY & SCIENCE, GWALIOR
(A Govt. Aided UGC Autonomous & NAAC Accredited Institute Affiliated to RGPV, Bhopal)

CERTIFICATE

This is certified that Nikhil Agrawal (0901CA191012) has submitted the project report titled
Praedico Virtual Office (Employee) under the mentorship of Adhish Goyal, in partial
fulfillment of the requirement for the award of degree of Master of Computer Application of
Computer Science and Engineering from Madhav Institute of Technology and Science,
Gwalior.

Dr. Anshu Chaturvedi Dr. Manish Dixit


Faculty Coordinator Professor and Head,
Professor Computer Science and Engineering
Computer Science and Engineering
MADHAV INSTITUTE OF TECHNOLOGY & SCIENCE, GWALIOR
(A Govt. Aided UGC Autonomous & NAAC Accredited Institute Affiliated to RGPV, Bhopal)

DECLARATION

I hereby declare that the work being presented in this project report, for the partial
fulfillment of requirement for the award of the degree of Master of Computer
Application in Computer Science and Engineering at Madhav Institute of Technology
& Science, Gwalior is an authenticated and original record of my work under the
mentorship of Mr. Adhish Goyal, Software Engineer, Praedico Virtual Office
Pvt. Ltd.

I declare that I have not submitted the matter embodied in this report for the award of
any degree or diploma anywhere else.

Nikhil Agrawal
0901CA191012
3rd Year,
Master of Computer Application,
Computer Science and Engineering
MADHAV INSTITUTE OF TECHNOLOGY & SCIENCE, GWALIOR
(A Govt. Aided UGC Autonomous & NAAC Accredited Institute Affiliated to RGPV, Bhopal)

ACKNOWLEDGEMENT

The full semester project has proved to be pivotal to my career. I am thankful to my institute,
Madhav Institute of Technology and Science to allow me to continue my disciplinary
project. I extend my gratitude to the Director of the institute, Dr. R. K. Pandit and Dean
Academics, Dr. Manjaree Pandit for this.

I would sincerely like to thank my department, Department of Computer Science and


Engineering, for allowing me to explore this project. I humbly thank Dr. Manish Dixit,
Professor and Head, Department of Computer Science and Engineering, for his continued
support during the course of this engagement, which eased the process and formalities
involved.

I am sincerely thankful to my faculty coordinator. I am grateful to the guidance of Dr. Anshu


Chaturvedi, Professor, Computer Science and Engineering, for her continued support and
guidance throughout the project. I am also very thankful to the faculty and staff of the
department.

Nikhil Agrawal
0901CA191012
3rdYear,
Master of Computer Application,
Computer Science and Engineering
ABSTRACT

Praedico Virtual Office is an online working web portal. It is basically focused on


Finance department of the company. The purpose of this project is to create an
interactive online web portal. The objective of this project is to provide the company
virtual space for employees and team heads to work efficient and to manage data. The
main objective of Virtual Office is to digitalize the work environment which termed
as Online Office. This system has been developed for company employees to give
update of task assigned to them and managing products of company.

Praedico Virtual Office gives business a physical address and office related services
without the overhead of a long lease and administrative staff. It is portable web office
where employees can work from any suitable place whether remote or locally.

This project has three major module Admin module, Employee module and Team
Head module. In Employee module, there has Task, Customer, Sold Product,
Meeting and Feedback as sub-module. In this project, I have done the Employee
module. In this module, Employee adds Customers to who they sell company
products. Employee adds meetings to in order to sell make sell employee take
meetings with multiple organizations. We use JavaScript that is popular this time in
the web development field. For we used React as it is one of the popular library of
JavaScript. For back-end, we used Node, it is also a library file of JavaScript that it is
the popular and latest general-purpose scripting language that is especially suited to
web development. For the Database, we use MongoDB. This project is feasible for
all types of feasibility like technically, behaviorally and economically because the
technology we used for this project is very popular, most people know about it and
the project operation is very simple so the everyone can easily access it and
understand the functionality
TABLE OF CONTENTS

TITLE PAGENO.

Chapter 1: Introduction 1-7


1.1 About Company 1
1.2 About Project 2
1.2.1 Scope 2
1.2.2 Project objectives 3
1.2.3 Benefits of Project 3
1.3 Hardware Specifications 4-5
1.4 Software Specifications 6-7

Chapter 2: System Analysis 8-18


2.1 Requirement Identification 9
2.1.1 Study of existing system 9
2.1.2 problem and weakness of existing system 9
2.1.3 Proposed system requirement 10-11
2.2 Feasibility Study 12
2.2.1 Technical Feasibility 12
2.2.2 Economical Feasibility 13
2.2.3 Behavioral Feasibility 13-15
2.3 Data Flow Diagram
2.3.1 Data Flow Diagram Level 0 16
2.3.2 Data Flow Diagram Level 1 (Employee) 17-18
Chapter 3: System Design 19-26
3.1 System Flow Chart 20
3.2 Entity Relationship Diagram 21
3.3 Table Design 22-26

Chapter 4: Testing and Implementation 27-33


4.1 Importance of code 28
4.2 Testing 29-30
4.3 Implementation details 31-33
Chapter 5: Sample forms and reports 34-43

Chapter 6: Conclusion 44-45

Chapter 7: Bibliography 46-47


LIST OF FIGURES

Figure Number Figure caption Page No.

2.3.1 Data Flow Diagram Level 0 15


2.3.2 Data Flow Diagram level 1 19-20
3.1 System Flow Chart 23
3.2 Entity Relationship Diagram 24
LIST OF TABLES

Table Number Table Title Page No.

1.3 Hardware Specification 12

3.2.1 Employee Table 25

3.2.2 Category Table 25

3.2.3 Team Head Table 26

3.2.4 Product PPT Table 26

3.2.5 Customer Table 27

3.2.6 Our Product table 27

3.2.7 Meeting Table 28

3.2.8 Sold Product Table 28

3.2.9 Task Table 29

3.2.10 Feedback Table 29

3.2.11 Employee Rating Table 29


LIST OF ABBREVIATIONS

Abbreviation Description

MERN MongoDB
Expres
React
Node
Chapter 1
INTRODUCTION
1.1 About Company

Praedico Global Research Private Limited is a private company which was founded on 09
April 2018. They deal in stock market training, Stock Market Predictive Softwares, Robotic
Stock Trading, Global Equity Research, Portfolio Designing, Financial literacy, and Stock
Market Research Using Deep Learning.

The registered number of the company is 045496. The working office of the company is
situated in Udyog vihar, phase 4, Gurugram. Its authorized capital is 1,000,000 and paid up
capital is 100,000. Their industry code is 74999.

Praedico Global Research Pvt. Ltd. Is India’s First


“coordinated worldwide research cum preparing
company”. They take a shot at model of spreading
financial literacy all over the globe and have their own
exploration for India and worldwide stock trades.

Praedico Global Research focuses on artificial


intelligence to forecast the trends in the stock markets
across the globe. The company has achieved many successes within the limited period of
time it has been in existence.

With Praedico Global Research, robust Softwares are built to be sensitive and identify trend
on the stock market and make a high probable prediction with at least 80% confidence level.

The company also conduct's financial related workshops all over the globe. They offer their
services to clients trading on stock markets all around the world. They use Financial Research
and Neural Network Programming to develop hybrid products which can be used by traders
and investors for better prediction of their investments.

Page 1
1.2 About Project

This project is developed for the web portal of Praedico Global Research Pvt. Ltd. Praedico
Virtual Office is an online web office which stores data of all employees and customers of
this company. A virtual office is a service that allows company to work remotely while still
maintaining a presence in a specific area without having to pay physical rent.

Praedico Virtual Office gives businesses a physical address and office-related services
without the overhead of a long lease and administrative staff. Praedico Virtual Office can be
operated used as one unit to serve customers but do not exist in fixed location. The cost of
operating a virtual office is much less than traditional office, it has none of the maintenance
and upkeep costs nor does it need to be staffed.

A Virtual Office can lead greater productivity, as its services free workers from
administration tasks, as well as commutes. Each employee can work from the location that is
most convenient, and the business is not restricted to hire employees who live locally. As
more people finds to work remotely, the benefits to virtual office are immediately noticeable.

1.2.1 Scope

Environmental-friendly - From an ecological standpoint Praedico virtual office offer quite a


compelling reason to hop on aboard. With climate change take place at a burgeoning pace,
Praedico Virtual Office can cut commuting time and hassles of traveling, there by saving
travel cost and fuel charges.

Work-life equilibrium - One of the major factor of stress is to find the right work-life
balance.

Diverse Employees- Most employees do not take corporate jobs because of huge distances.
This also allows employers to employees from a diverse pool of talent and skills.

Page 2
1.2.2 Project Objectives

 The main objective of the Praedico Virtual Office is to store all the data of employees,
customers, products and administration.

 To manage and to get all the informative data at one place.

1.2.3 Benefits of Project

 Build a presence in new location.

 Enjoy flexible terms.

 Pay only for what you need.

 Save time on commuting.

 Decrease company overhead.

 Access global talent.

 Increases productivity.

Page 3
1.3 Hardware Specifications

Basic hardware requirements to Implement this Project –

• Disk Space: 1GB+

• Web Server: NodeJS and ExpressJS

• Database: MongoDB version 5.0 or any greater version.

• RAM: 512MB+

• Node: Version 18 or greater.

• Processor: 1.0GHz+

It's recommended that your host supports React version 18.1.0 or above, MongoDB version
5.0 or above, and HTTPS support.

NodeJS and ExpressJS are the most robust and feature-abundant servers for running ReactJS
but any server that supports NodeJS and MongoDB will do.

If we only have older NodeJS or MongoDB versions, ReactJS also works with Bootstrap 5.1
and MongoDB 5.0.

Basic hardware requirements to run this Project-

• Stable internet connection with speed up to 512 Kbps for every individual system.

• And installation of any web browser these are minimum hardware requirements-

Page 4
Requirements Internet Firefox Opera Chrome
Explorer

Processor 233 MHz Pentium 4 Pentium II Pentium 4


Windows

Processor Mac Intel Intel Intel Intel

Minimum RAM 64 MB (XP) 128MB 128 MB 128 MB

Recommended 512 MB 512 MB 256 MB 512 MB

RAM

Minimum Disk 150 MB (XP), 70 100 MB 20 MB 100 MB


space (Vista)

Rec. Disk space 70 MB 200 MB 100 MB 200 MB

Rec. Disk space 120 MB 300 MB 200 MB 300 MB


64-bit

Windows Windows XP Windows Windows Windows XP


2000 SP2
XP SP2 (FF
13)

OSX OS X 10.5 Mac OS X Mac OS X 10.6


10.5

Linux Any recent Any recent Ubuntu 10.04

Page 5
1.4 Software Specifications

The technology used in the project is MERN (MongoDB, ExpressJS, ReactJS, NodeJS)

MongoDB -

MongoDB is an open source NoSQL database management program. NoSQL is used as an


alternative to traditional relational databases. NoSQL databases are quite useful for working
with large sets of distributed data. MongoDB is a tool that can manage document-oriented
information, store or retrieve information.

ExpressJS -

Express.js is a web application framework for Node.js. It provides various features that
make web application development fast and easy which otherwise takes more time using
only Node.js.

Express.js is based on the Node.js middleware module called connect which in term
uses http module. So, any middleware which is based on connect will also work with
Express.js.

ReactJS –

React is a library for building compostable user interfaces. It encourages the creation of
reusable UI components, which present data that changes over time. Lots of people use React
as the V in MVC architecture. React abstracts away the DOM from you, offering a simpler
programming model and better performance.

React can also render on the server using Node, and it can power native apps using React
Native. React implements one-way reactive data flow, which reduces the boilerplate and is
easier to reason about than traditional data binding.

Page 6
NodeJS –

Node.js runs the V8 JavaScript engine, the core of Google Chrome, outside of the browser.
This allows Node.js to be very performative Node.js provides a set of asynchronous I/O
primitives in its standard library that prevent JavaScript code from blocking and generally,
libraries in Node.js are written using non-blocking paradigms, making blocking behavior the
exception rather than the norm.

Basic software requirements to run this project-

• Any web browser with HTML5.

• Any windows based operating system

Page 7
Chapter 2
SYSTEM ANALYSIS

Page 8
2.1 Requirement identification

2.1.1 Study of existing software

Initially, we collected all the information and the working of the current system. We
noted the limitation of that system, which motivated us to develop new system. With
the help of these information, we got basic ideas about the existing system. we tried to
implement those ideas to develop the proposed system.

The most important thing is to study system thoroughly. Here we are studying both
existing system and proposed system so that advantages and disadvantages of both
system can be understood.

2.1.2 Problems and weakness of existing system

 Since, the existing system is made on the outdated technology and technology
upgradation is must in software world. The app and web development industries
have moved on to a powerful era. It is going to give people hundreds of different
innovative web designs that they would be able to work on. MERN stack will be
the most common stack.

 PHP has been one of the expert scripting languages for the creation of functional
websites with much less cost and time-consuming involvement of programmers.

 Over the years, the concerns regarding the security of PHP-based products still
persist due to several reasons. One of them is the open-source nature of PHP,
which means that the possible code vulnerabilities become the common
knowledge after they have been found.

Page 9
2.1.3 Proposed system requirement

 The proposed system is built on latest technology which is used by many popular
websites such as Paypal, Airbnb, BBC, Dropbox, Facebook, etc.

 The MERN stack is an excellent choice for this company Praedico Global Research
Pvt. Ltd. Which is wishing to develop high quality web applications. Indeed, this stack,
in addition to using high-performance and customized technologies, allows for web
applications and software to be developed very quickly!

 The whole system, including the front-end, the back-end and the database, uses the
REST API, which acts as a ‘middleware’ and is reusable for any other application:
mobile software etc., very easily.

 The REST API allows you to connect applications to each other like pieces in a puzzle.
The REST APIs are based on HTTP and imitate web communication styles, making
them very advantageous to use in the MERN stack.

 A quick back-end means that users of this application will have access to their data much
faster, and that is very advantageous indeed. This is especially the case when considering
that today, the average acceptable time for a user to wait for a web page to load is less
than 1 second.

 React is based on the Single Page Application (SPA) which involves having a web
application accessed from a single web page. This avoids loading a new page with each
action, and makes for a greatly streamlined user experience, which was the basic
requirement of the proposed system.

Page 10
To implement the proposed system, these are the basic needs, which are required
to develop the system :

 Products-

To make sales by company employees of products, product are sure


necessary requirement.

 Customers-

Those products must have some purchasers, the customers basic need so that
the company can sell their products.

 Employees-

Company always holds employees for growth and to make sell of products.

 Tasks-
Tasks with deadlines are assigned to employees to make their work move
faster.

 Meetings-
Employees need to take meetings with the organizations to sell their
products.

Page 11
2.2 Feasibility Study

Preliminary investigation examines project feasibility, the likelihood the system will
be useful to organization. The main objective was to meet all the necessary
requirements of the proposed system within the estimated costing of the system. Since
the feasibility study is to test the technical , operational and economical feasibility for
adding new modules and debugging old running system. All system is feasible if the
have unlimited resources and infinite time:

The following was undertaken for the proposed system:

2.2.1 Technical Feasibility

The technical issue usually raised during the feasibility stage of the investigation of
the system includes the following:

 Does the necessary technology exist to do what is suggested?

 Will the proposed system provide adequate response to inquiries, regardless of


the number or location of users?

 Can the system be upgraded if developed?

 Are there technical guarantees of accuracy, reliability, ease of access and data
security?

Page 12
2.2.2 Economic Feasibility

The system is financially feasible. It does not require any addition hardware or
software. Since the interface for this system is developed using the existing resources
and technologies, there is nominal expenditure and economic feasibility for certain.
There have aspects which is define why this project is economically feasible.

 This is very important aspect to be considered while developing a project. We


decided the technology based on minimum possible factor.

 Overall we have estimated that, the benefits to the organization is going to


receive from the proposed system, will surely overcome the initial costs and the
on running cost for system.

 So this project is economically feasible.

2.2.3 Behavioral Feasibility

Behavior feasibility is a term used to describe people's attitudes towards different


things. It also studies how people react to things. If the system meets the requirements
of the customers and the administrator, we can say that the system is operationally
feasible. The proposed system will be beneficial only if it can be turned into a system
which will meet the requirements of the project when it is developed and installed,
and there is sufficient support from the users.

The proposed projects will be beneficial for the client then only. When they will test
the operational feasibility of the project, to implement this system, then some
important issue may arise, includes the following:

Page 13
 Is there sufficient support from their management team for the users?

Ans. Yes, there have sufficient support from the management team for the client.

We are providing some services to the user which will be beneficial for the client and
it will attract the client. Some services will be like this: we will be providing technical
and maintenance support till the 1 year, where we will help during this period if client
face problems or bugs in the project. We will provide free hosting and domain to the
user, with which they will be able to implement the project without any extra cost.

 Will the system be beneficial, if it will be developed and implemented?

Ans. If client implement this project in future, so it is beneficial for the client's
business purpose, because most of the users wants all facilities in single platform, like:
manage products, employees, meeting tasks and so many office related works.

This virtual office will meet all these employees requirements in one platform, which
will attract more employees and this will directly help to capture the virtual office to
the employees.

Following tasks are performed by the behavioral feasibility for users:

 It checks that the project is user friendly or not.

 Its interface should be simple so that everyone should be able to use it.

 The proposed system will improve the total performance.

Page 14
 The proposed system will be available to the customers throughout the

globe.

 The proposed system will provide a better market for different users.

In the proposed system, we are planning to develop a system which interface will user
friendly and interactive. In this website, User can easily interact with the host through
the easy mechanism of the website. This website will also help the employees to
improve their performance where he can introduce with new culture of office
environment and with the use of this culture, they can save time. It also provides the
global accessibility feature, which will help the employees to access it online in any
place and platform. Proposed system will help to the employees and host to gain
better opportunities and meet with more customers and know about different culture.
So, finally we can say that, our proposed system will behaviorally feasible.

Page 15
2.3 Data flow Diagram

2.3.1 Data flow Diagram Level 0

Page 16
2.3.2 Data flow Diagram Level 1

Page 17
Page 18
Chapter 3
SYSTEM DESIGN

Page 19
3.1 System Flow Chart

Page 20
3.2 Entity Relationship Diagram

p_id pname pptid p_id

Our_product have Product_ppt

has
validity price ppttitle
pptfile
sodate
cuemail

Sold_product manage Customer

e_id
cuname cuadd
p_id cu_id
s_id e_id hid epwd
cu_id
e_id cmon_no
sdate
email caadhar
ename
aadhar
give
Employee
egen manage
t_id
e_id mob_no
post m_id
_id eadd
ttitle
mdate
status mmob_no

Task have
Meeting

tdesc tdate mdesc e_id


cname memail
tfile c_id
mname

Category hsdate
Feedback
hname
hid hpwd
f_id
feedback cdesc hemail
e_id hadd
haadhar
e_id give Teamhead
Employee_rating

r_id hmob_no hgen hpost


rating
himg
Page 21
3.2 Database Design

1. Employee table

Column Name Type Null Key Extra

e_id String Not null Primary key

ename String Null

email String Null

epwd String Null

aadhar String Null

post String Null

img String Null

mob_no String Null

egen String Null

sdate Datetime Null

eadd String Null

hid String Not Null Foreign key

2. Category table

Column Name Type Null Key Extra

c_id String Not null Primary key

cname String Null

e_id String Not Null Foreign key

Page 22
3. Team head table

Column Name Type Null Key Extra

h_id String Not null Primary key

hname String Null

hemail String Null

hpwd String Null

haadhar String Null

hpost String Null

himg String Null

hmob_no String Null

hgen String Null

hsdate Datetime Null

hadd String Null

4. Product_ppt table

Column Name Type Null Key Extra

ppt_id String Not null Primary key

ppttitle String Null

pptfile String Null

p_id String Not Null Foreign key

Page 23
5. Customer table

Column Name Type Null Key Extra

cu_id String Not null Primary key

cuname String Null

cuemail String Null

epwd String Null

cuaadhar String Null

cuadd String Null

cumob_no String Null

e_id String Not null Foreign key

6. Our_product table

Column Name Type Null Key Extra

p_id String Not null Primary key

pname String Null

validity String Null

price String Null

Page 24
7. Meeting table

Column Name Type Null Key Extra

m_id String Not null Primary key

mdate Datetime Null

mmob_no String Null

mname String Null

mdesc String Null

memail String Null

e_id String Not null Foreign key

8. Sold_product table

Column Name Type Null Key Extra

so_id String Not null Primary key

P_id String Not null Foreign key

e_id String Not null Foreign key

cu_id String Not null Foreign key

Page 25
9. Task table

Column Name Type Null Key Extra

t_id String Not null Primary key

ttitle String Null

e_id String Not Null Foreign key

tdate Datetime Null

tdesc String Null

tfile String Null

status String Null

10. Feedback table

Column Name Type Null Key Extra

f_id Varchar(50) Not null Primary key

feedback Varchar(50) Null

p_id Varchar(50) Not Null Foreign key

11. Employee_rating table

Column Name Type Null Key Extra

r_id String Not null Primary key

rating String Null

e_id String Not Null Foreign key

Page 26
Chapter 4
TESTING AND
IMPLEMENTATION

Page 27
4.1 Importance of code

 What is the importance of software testing?

Project testing is important or better to use the word critical for a project because nobody
likes a software with defects.

Just to take an example: If you an employee is added by team head and if this virtual office
has been full of defects or if you keep received a server error every time, when you are trying
to add an employee on this virtual office. Would you prefer this software?

I think answer would be NO.

So when this virtual office will be complete then we have to ensure that every module
(features or functionalities) is free from error. That is why project testing is important part of
project.

 What is the importance of software implementation?

In the project implementation phase, I faced a lot of issues like everything operating properly
in its environment, including analyzing requirements, installation, configuration,
customization, execution, testing, systems integration, user training, and delivery and making
necessary changes. If these all are successfully work in the then that means your project is
properly setup, otherwise user will face some problems when the project is used, that is why
the software implementation is important part for all projects.

Page 28
4.2 Testing

Testing is a process, to evaluate the functionality of a software application with an intent to


find whether the developed software met the specified requirements or not and to identify the
defects to ensure that the product is defect-free in order to produce the quality product.

So here we are using three testing approaches to check that the developed system met the
specified requirements or not.

 Unit Testing:

This is the testing process, which we can do manually because in this testing program is a
tested individually using live record, to see whether that program produce satisfied output as
the company or not. In this testing, we checked the individual modules of the project will be
working properly or not . i.e. we tested each and every unit of the application separately in
developer’s environment.

 Integration Testing:

In integration testing, system consists different modules, where in each module can arise
problems during the testing. Integration testing should be developed from the system
specification. Firstly, a minimum configuration must be integrated and then tested.

In our project we have done integration testing. In our project we can integrate all module
and then we have tested each module with each other, like a user visit on our virtual office,
how the user will react when they saw our virtual office so, each module is tested by me and
our development team.

Page 29
 Validation Testing:

Validation testing provides final assurance that software meets all behavioral and
performance requirements. Validation can be defining in many ways but a simple definition
is that validation succeeds when software function in a manner that canbe reasonably by the
customer. In this testing we had tested the connectivity or data transfer between a couple of
unit tested modules.

Page 30
4.3 Implementation Details

 Setting up React:

Installing React is quite easy because nowadays web hosting servers have a quick
installation for web applications. The author did not want to use quick installation,
instead he installed React manually.

1. First, you have to download the newest version of React in project with the
simple command “npm install react”.

2. Then you need to unzip the downloaded file and move it to the web server
via the FTP client.

3. Then you have to create the project with the command “npm create-react-
app <project name>”

4. And run react with “npm start” command.

 Setting up Node:

For installation of Node you need to visit website https://nodejs.org/en/and


download the package LTS. Run the simple command in the respective project
folder “npm install” and then run the server in your local device with “npx
nodemon <main file name>”

Page 31
Page 32
 Installation of theme:

After a successful installation of React, it was time to implement the created design
on the website. At first, it was needed a React theme, which was set up on
Bootstrap. Thankfully, react have bootstrap library as react-bootstrap we just have
install package. The most basic Bootstrap theme on available was downloaded
because the style of the template needed to be customized radically.

Page 33
Chapter 5
SAMPLE FORMS AND
REPORTS

Page 34
Login Form:-

Dashboard:-

Page 35
Our Customers:-

Add Customers:-

Page 36
Edit Customer Details:-

Sold Products:-

Page 37
Add Sold Products:-

Edit Sold Product Details:-

Page 38
Our Meetings:-

Add New Meeting:-

Page 39
Edit Meeting Details:-

Our Products:-

Page 40
Feedback:-

Edit Feedback:-

Page 41
Give Feedbacks to Teamhead:-

Change Password:-

Page 42
Rating:-

Page 43
Chapter 6
CONCLUSION

Page 44
CONCLUSION

The shift to the remote workplace has helped many business owners continue their
operations during these uncertain times. People wanted to stay safe at homes but work
must go on. Before the pandemic, many businesses didn't have a clear understanding
of what a virtual office is employees have embraced a flexible work schedule and
found that it's helped improve their work-life balance, even if they're working from
home. Employee morale is important to overall output. Even if there's a return to the
office after COVID-19, the ability to work in a virtual office space is something many
employees would like to continue.

The solution of the existing problem is to provide “praedicoglobalresearch.com” with


a user-friendly web portal, that will provide multiple facilities like: Product selling,
Customer making, Task managing, in a wide range of devices like: desktops, laptops,
mobile devices, tablets.

The project entitled “office.praedicoglobalresearch.com” was completed successfully.


The system has been developed with much care and try to free of errors and at the
same time it is efficient and less time consuming. A Virtual Office can lead greater
productivity, as its services free workers from administration tasks, as well as
commutes. Each employee can work from the location that is most convenient, and
the business is not restricted to hire employees who live locally. As more people finds
to work remotely.

This project helped me in gaining valuable information and practical knowledge on


several topics like designing web pages using HTML & CSS, React, usage of
responsive Packages, and management of back-end and database using Express as
middleware.

The entire system is secured, and this project helped us to understand about the
development phases of a project and system development life cycle. We learned how
to test different features of a project and lot of things.

Page 45
Chapter 7
BIBLIOGRAPHY

Page 46
PROJECT REFERENCES

 https://react-bootstrap.github.io/

 https://nodejs.org/en/

 https://www.youtube.com/

 https://www.stackoverflow.com/

 https://www.tutorialspoint.com/

 https://www.w3schools.com/

 https://www.mongodb.com/

 https://reactjs.org/

 https://expressjs.com/

Page 47

You might also like