Placement Cell WebApp

A project submitted in partial fulfilment of the

requirements for the award of the degree of

Master of Technology
in
COMPUTER SCIENCE ENGINEERING

Submitted by:
Mr. Ravi Sehrawat
Roll No. : 23038504005

Supervised by:
Ms. Anita

SHRI RAM COLLEGE OF ENGINEERING & MANAGEMENT,

70 KM STONE, NH-19, PALWAL, HARYANA, INDIA
 ACKNOWLEDGEMENT

The satisfaction that accompanies on the successful completion of any task would be
incomplete without the mention of people whose ceaseless cooperation made it possible, whose
constant guidance and encouragement crown all efforts with success. I would like to thank
Professor Ms Anita - SCREM for giving me the opportunity to undertake this project. Also I
would like to thank my batchmates who guided me, helped me and gave ideas and motivation
at each step.

2
 SELF DECLARATION

I hereby declare that work contained in the project titled “Placement Cell WebApp” is
original. I have followed the standards of project ethics to the best of my abilities. I have
acknowledged all sources of information which I have used in the project.

Name: Ravi Sehrawat

Roll No.: 23038504005
Department of Computer Science Engineering,
SHRI RAM COLLEGE OF ENGINEERING & MANAGEMENT,
70 KM STONE, NH-19, PALWAL, HARYANA, INDIA.

3
 ABSTRACT

Name of the student Ravi Sehrawat, Roll No. 23038504005 Degree for which he submitted
M.Tech (CSE)., Department of Computer Science Engineering, SRCEM, Palwal.

Project Title: Placement Cell WebApp

Name of the thesis supervisor: Ms. Anita

The purpose of Placement Cell WebApp[1] is to automate the existing manual system by the
help of computerised equipment and full-fledged computer software, fulfilling their
requirements, so that their valuable data/information can be stored for a longer period with easy
accessing and manipulation of the same. The required software and hardware are easily
available and easy to work with.

Training and Placement Management System[2], as described above, can lead to error free,
secure, reliable and fast management systems. It can assist the user to concentrate on their other
activities rather than concentrating on the record keeping. Thus it will help organisations in
better utilisation of resources. The organisation can maintain computerised records without
redundant entries. That means that one need not be distracted by information that is not
relevant, while being able to reach the information.

The aim is to automate its existing manual system by the help of computerised equipment and
full-fledged computer software, fulfilling their requirements, so that their valuable
data/information can be stored for a longer period with easy accessing and manipulation of the
same. Basically the project describes how to manage for good performance and better services
for the clients.

4
 LIST OF ABBREVIATIONS

Web app Web Application

GUI Graphical user interface

NVM Node Version Manager

NPM Node Package Manager

JS JavaScript

API Application Programming Interface

JSON JavaScript Object Notation

5
 LIST OF FIGURES

Figure’s No. Name of Figures Page

Nos.
Figure 3.1 Node Setup In Terminal 16
Figure 3.2 NPM to install dependencies 17

Figure 3.3 React Project Start 17

Figure 3.4 Visual Studio Environment 18

Figure 3.5 Cloud Firestore 18

Figure 3.6 Firebase Authentication 19

Figure 3.7 Landing Page 20

Figure 3.8 Add Drives 20

Figure 3.9 Add Students 21

6
 TABLE OF CONTENTS

Acknowledgement 2

Self Declaration 3

Abstract 4

List of Abbreviations 5

List of Figures 6

CHAPTER 1 INTRODUCTION 9-12

1.1 Introduction 9

1.2 Problem Outline 9

1.3 Project Objectives 10

1.4 Project Methodology 10

1.5 Scope of Project 10

1.6 Proposed Functionalities 11

1.7 Software Requirement Specification 12

CHAPTER 2 Building The Dapp 13-15

2.1 Building The Structure 13

2.2 Installing Required Dependencies 13

2.3 Getting Started With Application Building 14

7
CHAPTER 3 Setting Up All Required Dependencies And Packages 16-20

3.1 Installation And Setup 16

3.2 Start The Development Environment 16

3.3 Outcomes For The Development 16

3.3.1 Terminal Outcome 16

3.3.2 Visual Studio Environment 17

3.3.3 Firebase Setup 18

3.3.4 Outcome Of UI 20

CHAPTER 4 CONCLUSION AND FUTURE SCOPE 22

4.1 Conclusion 22

4.2 Significance 22

4.3 Limitations 22

4.4 Future Scope 22

References 23

8
 CHAPTER 1 : INTRODUCTION

1.1 Introduction
The 'Training and Placement Management System" has been developed to override the
problems prevailing in the practising manual system. This software is supported to eliminate
and in some cases reduce the hardships faced by this existing system. Moreover this system is
designed for the particular need of the company to carry out operations in a smooth and
effective manner[3].

The application is reduced as much as possible to avoid errors while entering the data. It also
provides an error message while entering invalid data. No formal knowledge is needed for the
user to use this system. Thus by this all it proves it is user-friendly. Training and Placement
Management System, as described above, can lead to error free, secure, reliable and fast
management systems. It can assist the user to concentrate on their other activities rather than
concentrating on the record keeping. Thus it will help organisations in better utilisation of
resources.

Every organisation, whether big or small, has challenges to overcome and manage the
information of Placement, Training, Colleges, Users, Registration. Every Training and
Placement Management System has different Training needs, therefore we design exclusive
employee management systems that are adapted to your managerial requirements. This is
designed to assist in strategic planning, and will help you ensure that your organisation is
equipped with the right level of information and details for your future goals. Also, for those
busy executives who are always on the go, our systems come with remote access features,
which will allow you to manage your workforce anytime, at all times. These systems will
ultimately allow you to better manage resources.

1.2 Problem Outline

Problem Statement
The main objective of the Project on Training and Placement Management System is to manage
the details of Training. Placement, Company, Colleges, Registration. It manages all the
information about Training. Users, Registration, Training. The project is totally built at the
administrative end and thus only the administrator is guaranteed the access. The purpose of the
project is to build an application program to reduce the manual work for managing the Training,

9
Placement, Users, Company. It tracks all the details about the Company, Colleges,
Registration.
1.3 Project Objectives
Functionalities Proposed:
● Provides the searching facilities based on various factors. Such as Training, Company,
Colleges, Registration
● Training and Placement Management System also manage the Users details online for
Colleges details, Registration details, Training.
● It tracks all the information of Placement, Users, Colleges ect
● Manage the information of Placement
● Shows the information and description of the Training, Company
● To increase efficiency of managing the Training, Placement It deals with monitoring
the information and transactions of Colleges.
● Manage the information of Training
● Editing, adding and updating of Records is improved which results in proper resource
management of Training data.
● Manage the information of Colleges.
● Integration of all records of Registration.
1.4 Project Methodology
The project is developed using react and firebase and the code is written in javascript
programming language. The project will consist of various object oriented classes to generate
the outcome.
To fulfil this project, npm will be used to fulfil the dependencies, for running on localhost use
react-script[7].
Hot reloading will help while developing the application to have real time knowledge of how
the outcome is coming and debug if any exists.

1.5 Scope Of Project

It may help collect perfect management in detail. In a very short time, the collection will be
obvious, simple and sensible. It will help a person to know the management of the past year
perfectly and vividly. It also helps in current work relative to the Training and Placement
Management System. It will also reduce the cost of collecting the management & collection
procedure will go on smoothly.

10
The project aims at Business process automation, i.e. we have tried to computerise various
processes of Training and Placement Management System.
● In the computer system the person has to fill the various forms & number of copies of
the forms can be easily generated at a time.
● In a computer system, it is not necessary to create the manifest but we can directly print
it, which saves our time.
● To assist the staff in capturing the effort spent on their respective working areas.
● To utilise resources in an efficient manner by increasing their productivity through
automation.
● The system generates types of information that can be used for various purposes.
● It satisfy the user requirement
● Be easy to understand by the user and operator
● Be easy to operate
● Have a good user interface
● Be expandable
● Delivered on schedule within the budget.
1.6 Proposed Functionalities
● Product and Component based
● Creating & Changing Issues at ease
● Query Issue List to any depth
● Reporting & Charting in more comprehensive way
● User Accounts to control the access and maintain security
● Simple Status & Resolutions
● Multi-level Priorities & Severities.
● Targets & Milestones for guiding the programmers
● Attachments & Additional Comments for more information
● Robust database back-end
● Various level of reports available with a lot of filter criteria
● It contains better storage capacity.
● Accuracy in work.
● Easy & fast retrieval of information.
● Well designed reports.
● Decrease the load of the person involved in the existing manual system.

11
 ● Access of any information individually.
● Work becomes more speedy.
● Easy to update information.
1.7 Software Requirement Specification
The Software Requirements Specification is produced at the culmination of the analysis task.
The function and performance allocated to software as part of system engineering are refined
by establishing a complete information description, a detailed functional and behavioural
description, an indication of performance requirements and design constraints, appropriate
validation criteria, and other data pertinent to requirements.
The proposed system requirements:
● System needs to store information about the new entry of Training.
● System needs to help the internal staff to keep information about Placement and find
them as per various queries.
● Systems need to maintain a quantity record.
● System needs to keep the record of Company.
● System needs to update and delete the record.
● System also needs a search area.
● It also needs a security system to prevent data..

12
 CHAPTER 2 : Building The Dapp

2.1 Building The Structure

Starting the application needs a good structure and that is why an online repository was set up
which also came with a version control i.e., git[13]. A remote git control system helps in this
process and the most famous service provider here is Github, and hence a GitHub repository
with collaborators as the team members is set with the meaningful name. A clone of the
repository made on the terminal using the Command Prompt command “git clone ‘URL of git
repo’”.
2.2 Installing Required Dependencies
The Required Dependencies are:

● "@chakra-ui/icons": "^2.0.13",
● "@chakra-ui/react": "^2.4.3",
● "@emotion/react": "^11.10.5",
● "@emotion/styled": "^11.10.5",
● "@reduxjs/toolkit": "^1.9.1",
● "@testing-library/jest-dom": "^5.14.1",
● "@testing-library/react": "^13.0.0",
● "@testing-library/user-event": "^13.2.1",
● "@types/jest": "^27.0.1",
● "@types/node": "^16.7.13",
● "@types/react": "^18.0.0",
● "@types/react-dom": "^18.0.0",
● "admin": "^1.4.1",
● "clsx": "^1.2.1",
● "firebase": "^9.14.0",
● "firebase-admin": "^11.3.0",
● "framer-motion": "^7.6.19",
● "react": "^18.2.0",
● "react-dom": "^18.2.0",
● "react-icons": "^4.7.1",
● "react-redux": "^8.0.5",
● "react-router-dom": "^6.4.4",
● "react-scripts": "5.0.1",

13
 ● "typescript": "^4.4.2",
● "web-vitals": "^2.1.0"

2.3 Getting Started With Application Building

A directory for web applications named ‘web app' is created inside which React and Node[4]
projects are started using the command line terminal.
An IDE was needed to write codes and Microsoft Visual Studio works well so it was installed
using a GUI installer and then an app inside the web application started using the command
line terminal.
For the React application to work, it should know when to call the applications so ‘npm run’
inside the local host needs to be edited with the information of the applications for all URLs.
Some more edits were required to be made such as is edited with the required imports, installed
applications, templates, URLs, databases, and method.
Bootstrap 4 was installed using npm in the command line terminal for easier and responsive
styling and designing of the pages to make the application easy to use for the users and provide
an interesting and interactive look which with responsive architecture is adaptive with the
screen size.
So these directories and bootstrap4 were added by editing by updating the section of installed
applications and with the information on static and template directories in the respective
classes.
For a better setting of the web application ‘dashboard’ is written in React that will specify the
name of the particular application.

And then dashboard is created with information on what and how the data shall be processed
for the templates to show on the URLs, validation and responding to the generated requests
from the user, and validating the data received from the client end at the server end and
managing with the dedicated classes and using mixins for the classes to organise and process
the data properly.
After this, the URLs for the dashboard app need to be written so the dashboard is created for
specifying the URLs that access the application and uses classes from views consisting of
templates for rendering on the screen of the browser.
So now as the dashboard app is ready it is to be included in webApp by editing webApp and
webApp specifying in installed applications and the URLs of the dashboard[9].
Now the landing page is required and that usually is referred to as ‘dashboard’ and for that,
meta URL in the dashboard is added already so an HTML template file is to be created in
‘templates’ and adding the application ‘dashboard’[10] in webApp.
So, some edits were required to be made for the static files and templates. A dashboard page
is needed where the authenticated user can only reach so its HTML with React is written in the
file templates\dashboard.html.

Later for adding patients in the database a template ‘templates’ is created by writing HTML
codes with React and adding the form for the same with the post method to send the data to the

14
database. And similarly for adding or viewing scans template ‘templates\scans.html is written
in HTML with React consisting of the list of all scans of a particular patient, the option of
adding a new scan, and editing the remarks of old scans from the user. But for updating the
remarks on the scans by diagnostician an option is needed so extra templates for that too is
required and that should update the database with the diagnostician’s opinions or observation
so now the template ‘templates\updatescan.html’ is created by writing in HTML with React
consisting of the form with update command and post method for sending the data for the
update action on the selected row in the database and this update is later reflected and can be
accessed in the scans page of the particular patient for further references. The class for this
action in view part is hence given a particular mixin for this task and also a validation of the
data sent from the page is done in the class and to prevent duplicacy of the row SQLite update
statement dedicated function is used in views. Almost all pages are completed and designed
with bootstrap and jQuery[11] implying the completion of the web Application building part
with authenticating backend and minimal frontend.

15
 CHAPTER 3 : Setting Up All Required Dependencies And
Packages
3.1 Installation And Setup
All the dependencies are defined in the package.json file in the project directory which can be
installed easily with a single command “npm install” or “yarn” dending what package
manager of node is installed globally on the machine. In this particular case the dependencies
are installed with yarn[8].

3.2 Start The Development Environment

Start of the project is handled with the help of NVM[5] and NPM[6] in the working directory,
which works with a hot reload feature that will automatically reload the web app[12] in the
browser window whenever a change is saved in any file within the working directory.

3.3 Outcomes For The Development

3.3.1 Terminal Outcome

Figure 3.1

16
Figure 3.2

Figure 3.3

17
3.3.2 Visual Studio Environment

Figure 3.4

3.3.3 Firebase Setup

Figure 3.5

18
Figure 3.6

19
3.3.4 Outcome Of UI

Figure 3.7

Figure 3.8

20
Figure 3.9

21
 CHAPTER 4 : CONCLUSION AND FUTURE SCOPE

4.1 Conclusion
The main conclusion of the Project on Training and Placement Management System is to
manage the details of Training, Placement, Company, Colleges, Registration. It manages all
the information about Training, Users, Registration, Training. The project is totally built at the
administrative end and thus only the administrator is guaranteed the access. The purpose of the
project is to build an application program to reduce the manual work for managing the Training
Placement, Users, Company. It tracks all the details about the Company, Colleges,
Registration.

4.2 Significance
This app will make traditional education more fun and interactive. It will help in easy
understanding of concepts and teachers would be able to explain difficult concepts more
efficiently. Also, this app can be accessed by anyone and view the concepts anywhere, it helps
in expanding on the concept of education for all.

4.3 Limitations
The following functions have not been implemented yet

● Student Portal
● Company Portal
● Student Dashboard

4.4 Future Scope

The functions that are listed as limitation are the future scope for the same. The project shall
be developed to support student support through student portal and dashboard and make the
hiring process smoother with the help of company portal where companies can apply to do
recruitment in the college campus for defined criteria.

22
References
1. W3school, www.w3school.com.

2. Wikipedia, www.wikipedia.com.

3. Tutorialspoint, www.tutorialspoint.com.

4. Node.js, https://nodejs.org/en/.

5. NVM, freecodecom.com, https://www.freecodecamp.org/news/node-version-manager-nvm-

install-guide/.

6. NPM, https://www.npmjs.com/.

7. Recat.js, https://reactjs.org/.

8. Typescript, https://www.typescriptlang.org/.

9. Chakra UI, https://chakra-ui.com/.

10. Redux, https://redux.js.org/.

11. Firebase, https://firebase.google.com/.

12. React Router, https://reactrouter.com/en/main.

13. Github.com, https://github.com.

23