A Project Report

On

“PLACEMENT PORTAL”

Submitted in partial fulfillment of the requirements for Enterprise

Computing Project Lab for 3rd Semester

MASTER OF COMPUTER APPLICATION(PG)

Submitted by
Tanmay Nityanand Nayak 22MCAB56
Prajwal Kumar 22MCAB43

Under the guidance of

 CERTIFICATE

This is to certify that the project titled “Placement Portal” has been
satisfactorily completed by Mr. Tanmay Nityanand Nayak with Reg. No.
22MCAB56., in partial fulfilment of the requirements for Enterprise
Computing Project Lab with course code MCC2P2B31, for the 3rd Semester
MCA courseduring the academic year 2023-2024 as prescribed by Bangalore
North University.

Faculty In-charge Head of the Department

Valued by
Examiner 1: _______________________ Date :

Examiner 2: _______________________ Centre: Kristu Jayanti College

 ACKNOWLEDGEMENT

First of all, we would like to thank the God Almighty for all the blessingshe
has showered on us. Our spiritual quotient gave us more strength and
motivation that helped immensely.

We would like to thank Rev. Fr. Dr. Augustine George, our esteemed
Principal, for providing us their constant guidance and support. I would also
liketo thank Rev. Fr. Lijo P Thomas, our Vice-Principal and Chief Finance
Officer,for providing us with the best facilities.

We are extremely thankful to our Dr. Kumar R, Head, Department of

Computer Science (PG) for giving us the essential support in the form of
allocating comfortable project hours and necessary software resources.

We would like to extend our heartfelt thanks to Staff Name, our project
guide for providing us the necessary details related to project developmentand
process identification enabling us to finish the project within the stipulated
time.

We thank all other faculty members who helped us a lot in completing this
project.

We thank our classmates, who have pointed out errors and guided us a
lotand we thank each and every one who has helped us.
 Synopsis
Abstract

From a student’s perspective, placements can bring a wide range of benefits and
opportunities. Training and management of placement is a crucial part of an educational
institution in which most of the work is done manually. Manual system in the colleges
requires a lot of manpower and time. With this project we aim to develop a web portal to
solve this issue. The project is aimed at developing an application for the placement
department of the college. The system is an application which will be accessed and
effectively used throughout the organization with proper login enabled. It can also be used as
an application for the Placement Officers in the college to manage the student information
about placement thus reducing the manual work and consumes less paperwork. The system
also provides the facility of viewing the personal and academic information of the student.
The system gets the requested list of candidates for the companies who would like to recruit
the people according to their eligibility criteria. Laravel framework is used to facilitate the
process of making the program.

INTRODUCTION

In today's competitive job market, connecting qualified students with prospective employers
is crucial. The Placement Portal project addresses this challenge by creating a robust online
platform tailored for students, companies, and administrators involved in the placement
process. This innovative portal serves as a bridge between eager, capable students seeking
employment opportunities and companies in search of skilled talent. By offering a
streamlined and user-friendly interface, the Placement Portal simplifies the intricate process
of job hunting, application management, and event coordination.

Designed with a focus on efficiency and accessibility, this portal empowers students to create
comprehensive profiles, explore a diverse array of job listings, apply for positions seamlessly,
and engage in meaningful interactions with potential employers. For companies, the portal
provides a platform to showcase their organizations, post job openings, manage applications,
and conduct interviews efficiently. Additionally, administrators benefit from comprehensive
oversight, ensuring that the platform operates smoothly while facilitating events, collecting
feedback, and generating insightful reports.
The Placement Portal project not only enhances the employability prospects of students but
also assists companies in identifying and recruiting the best talent for their organizations. By
embracing cutting-edge technology and intuitive design, this platform revolutionizes the
placement experience, making it more efficient, transparent, and rewarding for all
stakeholders involved. Through this initiative, we aim to create a vibrant ecosystem where
talent meets opportunity, fostering a future workforce that is both skilled and successful.

PURPOSE

Placement Management System manages student information in the college with regard to
placement. It improves existing system. It has the facility of maintaining the details of the
student, thereby reducing the manual work. It will save time and energy which are spending
in making reports and collecting data. Placement Management System can be accessed
throughout the college with proper login provided.

SCOPE

The project has a wide scope. Our project mainly helps in improving productivity and makes
use of utilization of resources. There is no duplication of work as this was not the case when
done manually. Thus it reduces labour and increases morale. The system intends user-friendly
operations which may resolve ambiguity. The project is a total management and informative
system, which provides the up- to-date information of all the students in the college. Our
system also helps the college to overcome the difficulty in keeping records of hundreds of
students and searching for a student eligible for recruitment criteria from the whole thing. It
helps in effective and timely utilization of resources. The project facilitates user friendly,
reliable and fast management system. The placement officer itself can carry out operations in
a smooth and effective manner. They need not concentrate on record keeping. The college can
maintain computerized records thus reducing paper work, time and money.

PROJECT OBJECTIVE

The main objective of the placement management system is to reduce manual work and time.
It is difficult and time-consuming to collect all the details from each student. To avoid this
problem, we have planned to develop a web-based placement management system.
Easy to find out the list of eligible students attending the drives.
 It manages the details of student records, placement training, different placements
happening in and out of the college.
Saves the time of placement officer and faculties.
Reduces the manual works.
This system makes student information more secure.

EXISTING SYSTEM

In colleges the records were stored in excel sheets hence sorting the data is always a problem.
The excel sheets are also less advanced. Hence sorting and searching problems arises.
Updating Records is another tedious task. Due to the above problems the updating was very
difficult and ambiguous. Data redundancy also occurs due to the duplication of files and
records. The files were not stored in a hierarchical format, hence searching the eligible
students was the greatest problem. The placement officer has to find out the eligible students
by looking at the excel sheet. He/she has to see the marks of every student and their
eligibility.
Another problem students face is that they are not made aware of the Training and Placement
activity held in their institutions, hence there might have been a loss of opportunities. There is
also a large communication gap between students and the placement officers as it is difficult
to maintain coordination between them. The existing system is also inefficient as it could not
take acknowledgment from the students attending a particular drive. Hence lots of confusion
at the last moment also arises. As all this is done manually, there is a lot of workload on the
placement officer.
The existing method used for placement management is not computerized. All the records are
maintained manually. The departments or the management carry out this job manually
making it more complicated and tedious most of the time. The best solution here is to
computerize the current environment.

PROPOSED SYSTEM

"The proposed placement portal system is designed to cater to the needs of students,
companies, and administrators involved in the placement process. Students will have the
ability to create profiles by registering through their email or social media accounts. They can
browse job listings, filter them based on preferences, and apply directly to the openings. The
system will implement a verification process to ensure the authenticity of student
registrations. On the other hand, companies can register and create detailed profiles
showcasing their organization. They can post job listings, specifying job titles, descriptions,
requirements, and application deadlines. Additionally, companies can manage applications
received, schedule interviews, and view student profiles to make informed hiring decisions.
The administrator, acting as the overseer of the portal, will have access to a range of
functionalities. They can manage both student and company profiles, ensuring the accuracy
of the information provided. The admin will monitor job listings, applications, and facilitate
the scheduling of events such as placement drives and seminars. Moreover, the system will
incorporate a feedback and review mechanism, allowing students to provide feedback on
interviews and events, and companies to receive reviews from students. This comprehensive
system will empower students in their job search, assist companies in finding suitable
candidates, and provide administrators with the tools to streamline and enhance the entire
placement process."

SYSTEM DESIGN

The system contains 4 modules as Admin module, Student module, Job Listings, Company
Profiles. Each module has the same login page. The login page has a login id and password
field. By entering values in that field users should log in to the system.

Admin Module
The Placement officer is the administrator of the system. Admin plays a very crucial role in
the system. Admin can log in through a username and password. He/she can maintain the
placement activities via the system. Admin can add departments, create new batches, add
/delete drives. Students can directly join in the placement drive if interested. Admin can
manage the training programs conducted in the college. Admin is also able to analyse the
placement activities of each student.

Student Module
Every student is given a default username and password, using this he/she can enter the
system. Students can fill the necessary details like 10th grade etc. if interested, students can
register for the upcoming drives. The student is also able to attend the online aptitude test
being conducted in the system. Based on this aptitude test and other criteria the placement
probabilities of a particular student are been predicted.

Job Listings
Job Listings serve as the core feature connecting students with employment opportunities.
Companies can post detailed job descriptions, including job titles, responsibilities,
qualifications, and application deadlines. These listings provide students with crucial insights
into available positions, helping them make informed decisions about their career paths. The
feature allows for easy browsing, search, and filtration, ensuring that students can find
relevant job openings based on their skills, preferences, and career objectives.

Company Profiles
Company Profiles provide a comprehensive overview of participating organizations.
Companies can showcase their culture, values, mission, and job opportunities. Detailed
profiles help students understand the ethos of prospective employers, allowing them to align
their aspirations with companies that resonate with their values. Rich company profiles
enhance transparency and assist students in making well-informed decisions about the
organizations they wish to apply to

CONCLUSION

Maximum work goes manually in the present placement system which makes it take time to
avail changes. This includes main problems like searching for the data of students and sorting
them along with it. Also, updating student data is a cumbersome job and does not have a
method to notify the student in time which makes the management of the placements very
difficult. In the proposed system, all of these problems become automated. The registration of
the student for an upcoming placement, the addition of a new user, notifying students, sharing
information, the privacy of the student, etc. is all met. The admin validates the information
and gives the student list based on the criteria required which otherwise would have been
very difficult to manage.
 CONTENTS

SI. No. Particulars Pg. No

1. Introduction

1.1 System Definition

1.2 Project Description

2. System Study

2.1 Existing System

2.2 Proposed System

2.3 Data Flow Diagram

2.4 ER Diagram

3. System Configuration

3.1 Hardware Configuration

3.2 Software Configuration

4.
Details of Software

4.1 Overview of Front End

4.2 Overview of Back End

5.
System Design

5.1 Architectural Design

5.2 Input Design

5.3 Output Design

5.4 Database Design

6. Source Code

7. Testing

Implementation
8.

9. Screen Shot

10. Conclusion

11. Bibliography
 1. INTRODUCTION

1.1 System Definition

The Placement Portal is a transformative web-based system designed to modernize and

streamline the placement process within educational institutions. This dynamic platform
replaces manual methods with automation, significantly reducing the time and effort
traditionally spent on placement management. Students benefit from a user-friendly interface,
allowing them to create profiles, access job listings, and register for placement drives
seamlessly. Meanwhile, placement officers gain efficient tools to organize drives, analyze
student data, and manage training programs effortlessly. The system ensures data security
through a robust verification process, and a comprehensive feedback mechanism fosters
transparency and communication between students and companies. Overall, the Placement
Portal enhances the efficiency, transparency, and user experience of the placement process,
creating a modern ecosystem where talent meets opportunity within the academic realm.

1.1 Project Description

The Placement Portal project is a comprehensive and innovative web-based system devised
to revolutionize the conventional placement procedures within educational institutions.
Acknowledging the drawbacks of manual processes, the system aims to introduce efficiency
and streamline the entire placement lifecycle.

Student-Centric Features:
Students gain access to a user-friendly interface where they can effortlessly create and
manage detailed profiles. The portal facilitates seamless interaction with potential employers
by providing access to a diverse array of job listings. Through a straightforward registration
process, students can express their interest in upcoming placement drives, maximizing their
exposure to diverse career opportunities.

Efficient Placement Officer Tools:

Placement officers, functioning as administrators, enjoy a suite of tools for effective
management of placement activities. They can add departments, create batches, and
orchestrate placement drives. The system empowers placement officers to analyze student
placement data, ensuring a data-driven approach to optimize the matching of students with
suitable job opportunities.

Robust Security Measures:

To ensure the integrity of the information, the system incorporates a thorough verification
process. This guarantees the authenticity of student registrations and safeguards sensitive
data, providing a secure environment for both students and companies participating in the
placement process.
Transparent Communication:
The Placement Portal establishes a transparent communication channel between students,
companies, and administrators. Students receive timely notifications about upcoming
placement drives and training programs. Additionally, a comprehensive feedback
mechanism facilitates communication, enabling students to provide insights on interviews
and events, while companies can receive valuable reviews from students.

Data-Driven Decision-Making:
The system facilitates informed decision-making for companies by offering detailed job
listings, including responsibilities, qualifications, and application deadlines. This data-driven
approach enables companies to make well-informed hiring decisions, fostering a more
efficient and mutually beneficial recruitment process.

Streamlined Company Engagement:

Participating companies can create detailed profiles that showcase their culture, values,
mission, and job opportunities. This transparency allows students to align their career
aspirations with organizations that resonate with their values, creating a more meaningful
connection between students and potential employers.
 2. System Study

2.1 Existing System

In the existing placement system within educational institutions, processes heavily rely on
manual methods, leading to inefficiencies and challenges. Student records are typically
stored in Excel sheets, resulting in difficulties in sorting and searching for specific data.
Updating records is a time-consuming and tedious task, often prone to errors and data
redundancy due to duplication of files.

The manual placement management system lacks a hierarchical storage structure, making it
challenging for placement officers to identify eligible students for specific recruitment
criteria. Placement officers face the cumbersome task of manually reviewing each student's
academic performance and eligibility, contributing to increased workload and the potential
for oversight.

Moreover, communication between students and placement officers is hindered, resulting in

a significant gap. Students are often not adequately informed about training and placement
activities, potentially leading to missed opportunities. The absence of a systematic
acknowledgment process for student attendance in placement drives adds to the overall
inefficiency of the existing system.

The existing method relies on a non-computerized approach, where all records are
maintained manually. This manual handling makes the entire placement process complicated
and time-consuming for both the placement officers and the administrative staff. The lack of
a computerized system also hinders the ability to collect acknowledgment from students
attending specific drives, leading to confusion and inefficiencies, especially during critical
moments.

In essence, the existing placement system faces challenges related to manual record-keeping,
data accessibility, communication gaps, and the inability to adapt to the demands of a
modern, technology-driven environment. These limitations necessitate a shift towards a
more advanced and automated approach, as proposed by the Placement Portal project.
2.1 Proposed System
The proposed Placement Portal system is a forward-thinking solution designed to address
the shortcomings of the existing manual placement management system within educational
institutions. This innovative web-based platform introduces automation, efficiency, and
enhanced communication, revolutionizing the entire placement process.

Key Features of the Proposed System:

1. User-Friendly Interface:
- The system introduces a user-friendly interface accessible to students, placement officers
(administrators), and companies participating in placement activities.

2. Automated Student Profiles:

- Students can create and manage comprehensive profiles through a straightforward
registration process. This includes academic information, personal details, and the option to
express interest in upcoming placement drives.

3. Efficient Placement Officer Tools:

- Placement officers, acting as administrators, gain access to tools that streamline
placement activities. They can add departments, create batches, manage placement drives,
and analyze student placement data for informed decision-making.

4. Verification Process:
- A robust verification process is implemented to ensure the authenticity of student
registrations, enhancing the overall security and reliability of the system.

5. Transparent Communication:
- The system establishes transparent communication channels by providing timely
notifications to students about upcoming placement drives and training programs. This
bridges the communication gap that existed in the manual system.

6. Feedback Mechanism:
- A comprehensive feedback mechanism is incorporated, allowing students to provide
insights on interviews and events. Similarly, companies can receive reviews from students,
fostering transparency and continuous improvement.

7. Job Listings and Company Profiles:

- The system facilitates detailed job listings for companies, including job titles,
responsibilities, qualifications, and deadlines. Participating companies can create
comprehensive profiles, showcasing their culture, values, and job opportunities.

8. Data Security:
- Stringent data security measures are implemented to safeguard student information,
ensuring privacy and compliance with data protection standards.
 9. Scalability and Adaptability:
- The system is designed to be scalable, accommodating a growing number of students,
companies, and placement activities. It is adaptable to the evolving needs of educational
institutions.

10. Efficient Record Keeping:

- The proposed system eliminates the manual record-keeping challenges of the existing
system, offering efficient storage, retrieval, and management of student and placement-
related data.

In summary, the Placement Portal project proposes a modern, automated system that
addresses the limitations of the existing manual placement management system. By
introducing user-friendly features, automation, and enhanced communication, the proposed
system aims to create a seamless and efficient placement ecosystem for students, placement
officers, and participating companies within educational institutions.
 3.System Configuration

3.1 Hardware Requirements (MINIMUM)

Processor Intel Pentium Dual Core

RAM 512 MB

Hard Disk 160 GB Space

3.2 Software Requirements (MINIMUM)

Server – Side:

Operating System Windows 10/9/8/iOS/Unix

Front End HTML, CSS, Java Script, ReactJs

Back End Firebase

Web Browser IE/Google Chrome/Firefox

Scripting Language JavaScript

 4.Details of Software
4.1 Overview of Front End

HTML: - HTML serves as the foundational building block of the front-end

development process, playing a crucial role in shaping the visual and structural
aspects of web pages. Asthe primary markup language used for creating content on the
internet, HTML provides thestructure and framework that allows web browsers to
render information in a coherent and organized manner. By employing a system of
tags and elements, developers can define the components of a web page, such as
headings, paragraphs, images, links, forms, and more.

Front-end developers utilize HTML to craft the layout and arrangement of content,
ensuring aclear and logical presentation that aligns with the intended user experience.
HTML tags delineate the hierarchy of information, from the overall page structure down
to the minutiae of individual text formatting and multimedia embedding. This
hierarchical structure facilitates accessibility, search engine optimization, and user
navigation, as it enables screen readers and search engines to interpret and understand
the content’s significance.

CSS: -Cascading Style Sheets (CSS) occupies a pivotal role in front-end web
development, providing the means to breathe life and artistry into the structural skeleton
forged by HTML.CSS is the language that governs the presentation and aesthetics of
web pages, enabling developers to define the visual aspects that users perceive and
interact with. Through CSS, developers can control layout, colors, typography, spacing,
animations, and responsiveness, thereby transforming raw HTML content into engaging
and visually captivating experiences.

Java Script: -JavaScript serves as a dynamic and powerful front-end tool that
significantly enhances the interactivity and user experience of web applications. As a
versatile scripting language, JavaScript is executed directly within web browsers,
enabling developers to manipulate HTML content, respond to user actions, and create
dynamic and real-time effects.It complements HTML and CSS by introducing a layer of
behavior and functionality, transforming static web pages into dynamic and interactive
applications.

React.js
React.js, developed by Facebook, is an open-source JavaScript library designed for
constructing user interfaces, particularly for single-page applications (SPAs). Notable for its
component-based architecture, React facilitates the creation of modular, reusable UI
components. The library optimizes performance through its use of a virtual DOM, updating
only the necessary parts of the actual DOM when data changes. JSX, a syntax extension for
JavaScript, enables a more intuitive representation of UI components. React enforces a
unidirectional data flow, enhancing predictability in handling data. With concepts like state,
props, and lifecycle methods, React provides a structured approach to building interactive and
efficient web applications. Introduced in React 16.8, Hooks allow functional components to
manage state and lifecycle features, further enhancing development flexibility. React.js is
widely embraced for its flexibility, performance optimization, and its role in fostering the
development of modern and scalable web applications.

4.2 Overview of Back End

Firebase
Firebase is a versatile mobile and web application development platform developed by
Google. This platform encompasses various services to simplify and enhance the
development process. Key components include a real-time database for live data
synchronization, authentication support for various methods, a scalable NoSQL database
called Cloud Fire store, and the ability to run server-side code using Cloud Functions.
Firebase also includes cloud storage for user-generated content, a hosting service for
deploying web applications, and Cloud Messaging for push notifications. Additional features
include performance monitoring, analytics for user behavior insights, and seamless
integration with other Google Cloud services. Known for its ease of use and scalability,
Firebase is widely adopted for its ability to streamline application development and reduce
the complexities of backend infrastructure management.
 6.Source Code

Company Details

import React, { useState } from "react";

const CompanyDetails = () => {

const [show, setShow] = useState(false);
const [show2, setShow2] = useState(false);

return (
<div className="min-h-screen bg-gray-100 flex justify-center items-center p-6">
<div className="bg-white rounded-lg p-8 shadow-lg max-w-2xl w-full">
<h1 className="text-3xl font-bold mb-4">React.js Developer</h1>
<p className="text-gray-600 mb-4">Company Name</p>
<p className="text-gray-600 mb-6">Location: [Location] | Type: [Full-time/Part-
time/Contract]</p>

<div className="mb-6">
<h2 className="text-xl font-bold mb-2">Job Description:</h2>
<p className="text-gray-800">
[Company Name] is seeking a talented React.js Developer to join our dynamic
team.
The ideal candidate should have a strong passion for web development and be
proficient
in React.js, JavaScript, and related technologies...
</p>
</div>

<div className="mb-6">
<h2 className="text-xl font-bold mb-2">Key Responsibilities:</h2>
<ul className="list-disc pl-6 text-gray-800">
<li>Develop new user-facing features using React.js</li>
<li>Build reusable components and front-end libraries for future use</li>
{/* Add more responsibilities as needed */}
</ul>
</div>

<div className="mb-6">
<h2 className="text-xl font-bold mb-2">Requirements:</h2>
<ul className="list-disc pl-6 text-gray-800">
 <li>Strong proficiency in JavaScript, including DOM manipulation and the
JavaScript object model</li>
<li>Thorough understanding of React.js and its core principles</li>
{/* Add more requirements as needed */}
</ul>
</div>

<div className="mb-6">
<h2 className="text-xl font-bold mb-2">Benefits:</h2>
<ul className="list-disc pl-6 text-gray-800">
<li>Competitive salary</li>
<li>Health, dental, and vision insurance</li>
{/* Add more benefits as needed */}
</ul>
</div>

<div>
<h2 className="text-xl font-bold mb-2">How to Apply:</h2>
<p className="text-gray-800">
To apply for this position, please send your resume and portfolio to{' '}
<a href="mailto:email@example.com" className="text-blue-500
hover:underline">email@example.com</a> with the subject line "React.js Developer
Application - [Your Full Name]."
</p>
</div>
</div>
</div>
);
};

export default CompanyDetails;

Dashboard

import React from "react";

const Dashboard = () => {

return (
<div className="stats shadow flex justify-center ml-32 my-24">
<div className="stat">
<div className="stat-figure text-primary">
 <svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
className="inline-block w-8 h-8 stroke-current"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-
6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
></path>
</svg>
</div>
<div className="stat-title text-2xl">Total Companys</div>
<div className="stat-value text-primary">05</div>

</div>

<div className="stat">
<div className="stat-figure text-secondary">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
className="inline-block w-8 h-8 stroke-current"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M13 10V3L4 14h7v7l9-11h-7z"
></path>
</svg>
</div>
<div className="stat-title">Eligible for Apply</div>
<div className="stat-value text-secondary">4</div>

</div>
 <div className="stat">

<div className="stat-title text-2xl">Total Apply</div>

<div className="stat-value text-primary">03</div>

</div>
</div>
);
};

export default Dashboard;

Home

import React from 'react'

import Company from '../components/Company'

const Home = () => {

const arr = [
{ logo: "image", id: "1", name: "Home",to:"Home" },
{ logo: "image", id: "2", name: "jobs",to:"jobs" },
{ logo: "image", id: "3", name: "result",to:"result" },
{ logo: "image", id: "4", name: "setting",to:"setting" },
{ logo: "image", id: "5", name: "rules",to:"rules" },
];
return (
<div>
{arr.map((item) =>{
return <Company />
})}
</div>
)
}

export default Home

Jobs

import React from 'react'

 const Jobs = () => {
return (
<div>Jobs</div>
)
}

export default Jobs

Results

import React from 'react'

const Result = () => {

return (
<div>Result</div>
)
}

export default Result

Settings

import React from 'react'

const Setting = () => {

return (
<div>Setting</div>
)
}

export default Setting

Cards
import React from "react";
import {Link} from "react-router-dom"
import one from '../assets/one.png'
import two from '../assets/two.png'
import third from '../assets/third.png'
// import blue_coding from '../assets/blue_coding.png'

const Card = ({name,to}) => {

console.log(name)
return (
<Link to={`/${to}`}>
<div className=" flex flex-col justify-center items-center w-64 bg-white shadow-xl
hover:scale-110 hover:transition-all duration-500 ">
<figure className="pt-5">
<img
src={third}
alt="Shoes"
className=" h-auto w-auto object-fit"
/>
</figure>
<div className="card-body items-center text-center text-black ">
<h2 className="card-title font-bold">{name}</h2>
</div>
</div>
</Link>
);
};

export default Card;

Company
import React from "react";
import third from '../assets/third.png'
import { Link } from "react-router-dom";

const Company = () => {

return (
<div className="card card-side bg-base-100 shadow-xl border h-[100px] w-[60%] m-
3">
<figure>
 <img
src={third}
alt="Movie"
className="h-[100px] w-[100px]"
/>
</figure>
<div className="card-body mt-[-20px]">
<h2 className="card-title">Company:Infosys</h2>
<p>Click the button to watch on Jetflix app.</p>
<div className="card-actions justify-end">
<Link to='/cd' className="btn btn-primary mt-[-50px]">Watch</Link>
</div>
</div>
</div>
);
};

export default Company;

Hero
import React from "react";
import Card from "./Card";

const Hero = () => {

const arr = [
{ logo: "image", id: "1", name: "Home",to:"Home" },
{ logo: "image", id: "2", name: "jobs",to:"jobs" },
{ logo: "image", id: "3", name: "result",to:"result" },
{ logo: "image", id: "4", name: "setting",to:"setting" },
{ logo: "image", id: "5", name: "rules",to:"rules" },
];

return (
<div>
<div className=" h-[45vh] bg-gradient-to-r from-cyan-700 to-blue-300">
<div className=" text-center text-neutral-content flex justify-center items-start pt-6">
<div className="max-w-md text-white">
<h1 className="mb-3 text-4xl font-bold">Hello prajwal,</h1>
<h1 className="mb-5 text-2xl font-medium">
Welcome To the Mishra Hotel{" "}
</h1>
 <button className="btn btn-primary">Get Started</button>
</div>
</div>
</div>
<div className="sm:flex justify-center mt-[-130px] flex-wrap h-full ">
{arr.map((item,i) => {
return <Card {...item} key={i} />;
})}
</div>
</div>
);
};

export default Hero;

Navbar
import React from "react";

const Navbar = () => {

return (
<div className="navbar bg-gradient-to-r from-cyan-700 to-blue-300">
<div className="flex-1">
<a className="btn btn-ghost normal-case text-xl">daisyUI</a>
</div>
<div className="flex-none gap-2">
<div className="form-control">
<input
type="text"
placeholder="Search"
className="input input-bordered w-24 md:w-auto"
/>
</div>
<div className="dropdown dropdown-end">
<label tabIndex={0} className="btn btn-ghost btn-circle avatar">
<div className="w-10 rounded-full">
<img src="/images/stock/photo-1534528741775-53994a69daeb.jpg" />
</div>
</label>
<ul
tabIndex={0}
 className="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100
rounded-box w-52"
>
<li>
<a className="justify-between">
Profile
<span className="badge">New</span>
</a>
</li>
<li>
<a>Settings</a>
</li>
<li>
<a>Logout</a>
</li>
</ul>
</div>
</div>
</div>
);
};

export default Navbar;

Side Bar
import React, { useState } from "react";
import { Outlet,Link } from "react-router-dom";
import { useAuthContext } from "../hooks/useAuthContext";
import useGetData from "../hooks/useGetData";

export default function SideBar() {

const { user, authIsReady } = useAuthContext();

const [show, setShow] = useState(false);

const [profile, setProfile] = useState(false);
const [menu, setMenu] = useState(false);
const [menu1, setMenu1] = useState(false);
const [menu2, setMenu2] = useState(false);
const [menu3, setMenu3] = useState(false);
 const { result } = useGetData("users",user.uid);
console.log(result)

if (!result) {
return <p>Loading</p>;
}

const { displayName,photoURL,gmailId} =result

return (
<>
<div className="w-full h-full bg-gray-200">
<div className="flex flex-no-wrap">
{/* Sidebar starts */}
<div className="absolute lg:relative w-64 h-screen shadow bg-gray-100 hidden
lg:block">
<div className="h-16 w-full flex items-center px-8">
<h3 className="text-2xl text-center mt-6 text-blue-700 font-extrabold">Placement
Poratl</h3>
</div>
<ul aria-orientation="vertical" className=" py-6">
<li className="pl-6 cursor-pointer text-white text-sm leading-3 tracking-normal
pb-4 pt-5 text-indigo-700 focus:text-indigo-700 focus:outline-none">
<div className="flex items-center">
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-grid"
width={20}
height={20}
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" />
<rect x={4} y={4} width={6} height={6} rx={1} />
<rect x={14} y={4} width={6} height={6} rx={1} />
<rect x={4} y={14} width={6} height={6} rx={1} />
 <rect x={14} y={14} width={6} height={6} rx={1} />
</svg>
</div>
<Link to="/" className="ml-2">Dashboard</Link>
</div>
</li>
<li className="pl-6 cursor-pointer text-gray-600 text-sm leading-3 tracking-
normal mt-4 mb-4 py-2 hover:text-indigo-700 focus:text-indigo-700 focus:outline-none">
<div className="flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-puzzle"
width={20}
height={20}
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" />
<path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1
1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2
2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0
0 1 -1 -1v-3a1 1 0 0 1 1 -1" />
</svg>
<Link to="/jobs" className="ml-2">Jobs</Link>
</div>
</li>
<li className="pl-6 cursor-pointer text-gray-600 text-sm leading-3 tracking-
normal mb-4 py-2 hover:text-indigo-700 focus:text-indigo-700 focus:outline-none">
<div className="flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-compass"
width={20}
height={20}
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
fill="none"
 strokeLinecap="round"
strokeLinejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" />
<polyline points="8 16 10 10 16 8 14 14 8 16" />
<circle cx={12} cy={12} r={9} />
</svg>
<Link to="/profile" className="ml-2">Profile</Link>
</div>
</li>
<li className="pl-6 cursor-pointer text-gray-600 text-sm leading-3 tracking-
normal py-2 hover:text-indigo-700 focus:text-indigo-700 focus:outline-none">
<div className="flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-code"
width={20}
height={20}
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" />
<polyline points="7 8 3 12 7 16" />
<polyline points="17 8 21 12 17 16" />
<line x1={14} y1={4} x2={10} y2={20} />
</svg>
<Link to="rules" className="ml-2">Rules</Link>
</div>
</li>
</ul>
</div>
{/Mobile responsive sidebar/}
<div
className={
show
? "w-full h-full absolute z-40 transform translate-x-0 "
: " w-full h-full absolute z-40 transform -translate-x-full"
 }
id="mobile-nav"
>
<div
className="bg-gray-800 opacity-50 absolute h-full w-full lg:hidden"
onClick={() => setShow(!show)}
/>
<div className="absolute z-40 sm:relative w-64 md:w-96 shadow pb-4 bg-gray-
100 lg:hidden transition duration-150 ease-in-out h-full">
<div className="flex flex-col justify-between h-full w-full">
<div>
<div className="flex items-center justify-between px-8">
<div className="h-16 w-full flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
width={144}
height={30}
viewBox="0 0 144 30"
>
<path
fill="#5F7DF2"
d="M80.544 9.48c1.177 0 2.194.306 3.053.92.86.614 1.513 1.45 1.962
2.507.448 1.058.673 2.247.673 3.568 0 1.303-.233 2.473-.699 3.51-.465 1.037-1.136 1.851-
2.012 2.444-.876.592-1.885.888-3.028.888-1.405 0-2.704-.554-3.897-
1.663v4.279h2.64v3.072h-9.14v-3.072h2.26V12.78H70.45V9.657h6.145v1.663l.209-
.21c1.123-1.087 2.369-1.63 3.74-1.63zm17.675 0c1.176 0 2.194.306 3.053.92.859.614
1.513 1.45 1.961 2.507.449 1.058.673 2.247.673 3.568 0 1.303-.233 2.473-.698 3.51-.466
1.037-1.136 1.851-2.012 2.444-.876.592-1.886.888-3.028.888-1.405 0-2.704-.554-3.898-
1.663v4.279h2.64v3.072h-9.14v-3.072h2.26V12.78h-1.904V9.657h6.144v1.663l.21-
.21c1.122-1.087 2.368-1.63 3.739-1.63zM24.973 1c1.13 0 2.123.433 2.842 1.133 0 .004 0
.008.034.012 1.54 1.515 1.54 3.962-.034 5.472-.035.029-.069.058-.069.089-.719.65-1.712
1.05-2.773 1.05-.719 0-1.37.061-1.985.184-2.363.474-3.8 1.86-4.28 4.13-.114.489-.18 1.02-
.2 1.59l-.003.176.001-.034.002.034c.022.505-.058 1.014-.239 1.495l-.076.182.064-
.157c.106-.28.18-.575.217-.881l.008-.084-.026.195c-.286 1.797-1.858 3.188-3.754 3.282l-
.204.005h-.103l-.103.002h-.034c-.65.012-1.232.072-1.78.181-2.328.473-3.765 1.863-4.279
4.139-.082.417-.142.863-.163 1.339l-.008.362v.23c0 2.02-1.603 3.681-3.661 3.861L4.16
29l-.48-.01c-.958-.073-1.849-.485-2.499-1.113-1.522-1.464-1.573-3.808-.152-5.33l.152-
.154.103-.12c.719-.636 1.677-1.026 2.704-1.026.754 0 1.404-.062 2.02-.184 2.362-.475 3.8-
1.86 4.28-4.126.136-.587.17-1.235.17-1.942 0-.991.411-1.896 1.027-2.583.069-.047.137-
.097.172-.15.068-.051.102-.104.17-.159.633-.564 1.498-.925 2.408-.978l.229-
.007h.034c.068 0 .171.003.274.009.616-.014 1.198-.074 1.746-.18 2.328-.474 3.766-1.863
4.279-4.135.082-.44.142-.912.163-1.418l.008-.385v-.132c0-2.138 1.78-3.872 4.005-
3.877zm-.886 10c1.065 0 1.998.408 2.697
1.073.022.011.03.024.042.036l.025.017v.015c1.532 1.524 1.532 3.996 0 5.52-.034.03-
.067.06-.067.09-.7.655-1.665 1.056-2.697 1.056-.7 0-1.332.062-1.932.186-2.298.477-3.696
1.873-4.163 4.157-.133.591-.2 1.242-.2 1.95 0 1.036-.399 1.975-1.032 2.674l-.1.084c-
.676.679-1.551 1.055-2.441 1.13l-.223.012-.366-.006c-.633-.043-1.3-.254-1.865-.632-.156-
.096-.296-.201-.432-.315l-.2-.177v-.012c-.734-.735-1.133-1.72-1.133-2.757 0-2.078 1.656-
3.793 3.698-3.899l.198-.005h.133c.666-.007 1.266-.069 1.832-.185 2.265-.476 3.663-1.874
4.163-4.161.08-.442.139-.916.159-1.424l.008-.387v-.136c0-2.153 1.731-3.899 3.896-
3.904zm3.882 11.025c1.375 1.367 1.375 3.583 0 4.95s-3.586 1.367-4.96 0c-1.345-1.367-
1.345-3.583 0-4.95 1.374-1.367 3.585-1.367 4.96 0zm94.655-12.672c1.405 0 2.628.323
3.669.97 1.041.648 1.843 1.566 2.406 2.756.563 1.189.852 2.57.87 4.145h-
9.954l.03.251c.132.906.476 1.633 1.03 2.18.605.596 1.386.895 2.343.895 1.058 0 2.09-.525
3.097-1.574l3.301 1.066-.203.291c-.69.947-1.524 1.67-2.501 2.166-1.075.545-2.349.818-
3.821.818-1.473 0-2.774-.277-3.904-.831-1.13-.555-2.006-1.34-2.628-2.355-.622-1.016-
.933-2.21-.933-3.58 0-1.354.324-2.582.971-3.682s1.523-1.961 2.628-2.583c1.104-.622
2.304-.933 3.599-.933zm13.955.126c1.202 0 2.314.216 3.339.648v-.47h3.034v3.91h-
3.034l-.045-.137c-.317-.848-1.275-1.272-2.875-1.272-1.21 0-1.816.339-1.816 1.016 0
.296.161.516.483.66.321.144.791.262 1.409.355 1.735.22 3.102.536 4.1.946 1 .41
1.697.919 2.095 1.524.398.605.597 1.339.597 2.202 0 1.405-.48 2.5-1.441 3.282-.96.783-
2.266 1.174-3.917 1.174-1.608 0-2.7-.321-3.275-.964V23h-3.098v-
4.596h3.098l.032.187c.116.547.412.984.888 1.311.53.364 1.183.546 1.962.546.762 0
1.324-.087 1.688-.26.364-.174.546-.476.546-.908 0-.296-.076-.527-.228-.692-.153-.165-
.447-.31-.883-.438-.435-.127-1.102-.27-2-.431-1.997-.313-3.433-.82-4.31-1.517-.875-.699-
1.313-1.64-1.313-2.825 0-1.21.455-2.162 1.365-2.856.91-.695 2.11-1.042 3.599-1.042zm-
69.164.178v10.27h1.98V23h-8.24v-3.072h2.032V12.78h-2.031V9.657h6.259zm-16.85-
5.789l.37.005c1.94.05 3.473.494 4.6 1.335 1.198.892 1.797 2.185 1.797 3.878 0 1.168-.273
2.15-.819 2.945-.546.796-1.373 1.443-2.482 1.943l3.085 5.776h2.476V23h-5.827l-4.317-
8.366h-2.183v5.116h2.4V23H39.646v-3.25h2.628V7.118h-2.628v-3.25h10.918zm61.329
0v16.06h1.892V23h-8.24v-3.072h2.082v-13h-2.082v-3.06h6.348zm-32.683 9.04c-.812 0-
1.462.317-1.949.951-.486.635-.73 1.49-.73 2.565 0 1.007.252 1.847.756 2.52.503.673 1.161
1.01 1.974 1.01.838 0 1.481-.312 1.93-.934.448-.622.672-1.504.672-2.647 0-1.092-.228-
1.942-.685-2.552-.457-.61-1.113-.914-1.968-.914zm17.675 0c-.813 0-1.463.317-1.95.951-
.486.635-.73 1.49-.73 2.565 0 1.007.253 1.847.756 2.52.504.673 1.162 1.01 1.974 1.01.838
0 1.481-.312 1.93-.934.449-.622.673-1.504.673-2.647 0-1.092-.229-1.942-.686-2.552-.457-
.61-1.113-.914-1.967-.914zM14.1 0C16.267 0 18 1.743 18 3.894v.01c0 2.155-1.733 3.903-
3.9 3.903-4.166 0-6.3 2.133-6.3 6.293 0 2.103-1.667 3.817-3.734 3.9l-.5-.009c-.933-.075-
1.8-.49-2.433-1.121C.4 16.134 0 15.143 0 14.1c0-2.144 1.733-3.903 3.9-3.903 4.166 0 6.3-
2.133 6.3-6.294C10.2 1.751 11.934.005 14.1 0zm108.32 12.184c-.76 0-1.372.22-1.834.66-
.46.44-.75 1.113-.87 2.018h5.561c-.118-.795-.442-1.44-.97-1.936-.53-.495-1.158-.742-
1.886-.742zM49.525 7.118h-2.26v4.444h1.829c2.023 0 3.034-.754 3.034-2.26 0-.728-.233-
1.274-.698-1.638-.466-.364-1.1-.546-1.905-.546zm15.821-3.593c.635 0 1.183.231
1.644.692.462.462.692 1.01.692 1.644 0 .677-.23 1.238-.692 1.682-.46.445-1.009.667-
1.644.667-.643 0-1.195-.23-1.656-.692-.462-.461-.692-1.013-.692-1.657 0-.634.23-
1.182.692-1.644.46-.461 1.013-.692 1.656-.692zM5.991 1.171c1.345 1.563 1.345 4.095 0
5.658-1.374 1.561-3.585 1.561-4.96 0-1.375-1.563-1.375-4.095 0-5.658 1.375-1.561 3.586-
1.561 4.96 0z"
/>
</svg>
</div>
<div
id="closeSideBar"
className="flex items-center justify-center h-10 w-10"
onClick={() => setShow(!show)}
 >
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-x"
width={20}
height={20}
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" />
<line x1={18} y1={6} x2={6} y2={18} />
<line x1={6} y1={6} x2={18} y2={18} />
</svg>
</div>
</div>
<ul aria-orientation="vertical" className=" py-6">
<li className="pl-6 cursor-pointer text-white text-sm leading-3 tracking-
normal pb-4 pt-5 text-indigo-700 focus:text-indigo-700 focus:outline-none">
<div className="flex items-center">
<div className="w-6 h-6 md:w-8 md:h-8">
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-grid"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" />
<rect x={4} y={4} width={6} height={6} rx={1} />
<rect x={14} y={4} width={6} height={6} rx={1} />
<rect x={4} y={14} width={6} height={6} rx={1} />
<rect x={14} y={14} width={6} height={6} rx={1} />
</svg>
</div>
 <span className="ml-2 xl:text-base md:text-2xl text-base">
Dashboard
</span>
</div>
</li>
<li className="pl-6 cursor-pointer text-gray-600 text-sm leading-3 tracking-
normal mt-4 mb-4 py-2 hover:text-indigo-700 focus:text-indigo-700 focus:outline-none">
<div className="flex items-center">
<div className="w-6 h-6 md:w-8 md:h-8">
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-puzzle"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" />
<path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0
0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -
1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-
1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" />
</svg>
</div>
<span className="ml-2 xl:text-base md:text-2xl text-base">
Products
</span>
</div>
</li>
<li className="pl-6 cursor-pointer text-gray-600 text-sm leading-3 tracking-
normal mb-4 py-2 hover:text-indigo-700 focus:text-indigo-700 focus:outline-none">
<div className="flex items-center">
<div className="w-6 h-6 md:w-8 md:h-8">
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-compass"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
fill="none"
 strokeLinecap="round"
strokeLinejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" />
<polyline points="8 16 10 10 16 8 14 14 8 16" />
<circle cx={12} cy={12} r={9} />
</svg>
</div>
<span className="ml-2 xl:text-base md:text-2xl text-base">
Performance
</span>
</div>
</li>
<li className="pl-6 cursor-pointer text-gray-600 text-sm leading-3 tracking-
normal py-2 hover:text-indigo-700 focus:text-indigo-700 focus:outline-none">
<div className="flex items-center">
<div className="w-6 h-6 md:w-8 md:h-8">
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-code"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" />
<polyline points="7 8 3 12 7 16" />
<polyline points="17 8 21 12 17 16" />
<line x1={14} y1={4} x2={10} y2={20} />
</svg>
</div>
<span className="ml-2 xl:text-base md:text-2xl text-base">
Deliverables
</span>
</div>
</li>
</ul>
</div>
<div className="w-full">
 <div className="flex justify-center mb-4 w-full px-6">
<div className="relative w-full">
<div className="text-gray-500 absolute ml-4 inset-0 m-auto w-4 h-4">
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-search"
width={16}
height={16}
viewBox="0 0 24 24"
strokeWidth={1}
stroke="#A0AEC0"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" />
<circle cx={10} cy={10} r={7} />
<line x1={21} y1={21} x2={15} y2={15} />
</svg>
</div>
<input
className="bg-gray-200 focus:outline-none rounded w-full text-sm text-
gray-500 pl-10 py-2"
type="text"
placeholder="Search"
/>
</div>
</div>
<div className="border-t border-gray-300">
<div className="w-full flex items-center justify-between px-6 pt-1">
<div className="flex items-center">
<img
alt="profile-pic"
src={photoURL}
className="w-8 h-8 rounded-md"
/>
<p className="md:text-xl text-gray-800 text-base leading-4 ml-2">
{displayName}
</p>
</div>
<ul className="flex">
 <li className="cursor-pointer text-white pt-5 pb-3">
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-messages"
width={24}
height={24}
viewBox="0 0 24 24"
strokeWidth={1}
stroke="#718096"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" />
<path d="M21 14l-3 -3h-7a1 1 0 0 1 -1 -1v-6a1 1 0 0 1 1 -1h9a1 1 0 0 1 1
1v10" />
<path d="M14 15v2a1 1 0 0 1 -1 1h-7l-3 3v-10a1 1 0 0 1 1 -1h2" />
</svg>
</li>
<li className="cursor-pointer text-white pt-5 pb-3 pl-3">
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-bell"
width={24}
height={24}
viewBox="0 0 24 24"
strokeWidth={1}
stroke="#718096"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" />
<path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0
2 -3v-3a7 7 0 0 1 4 -6" />
<path d="M9 17v1a3 3 0 0 0 6 0v-1" />
</svg>
</li>
</ul>
</div>
</div>
 </div>
</div>
</div>
</div>
{/Mobile responsive sidebar/}
{/* Sidebar ends */}
<div className="w-full">
{/* Navigation starts */}
<nav className="h-16 flex items-center lg:items-stretch justify-end lg:justify-
between bg-white shadow relative z-10">
<div className="hidden lg:flex w-full pr-6">
<div className="w-1/2 h-full hidden lg:flex items-center pl-6 pr-24">
<div className="relative w-full">
<div className="text-gray-500 absolute ml-4 inset-0 m-auto w-4 h-4">
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-search"
width={16}
height={16}
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" />
<circle cx={10} cy={10} r={7} />
<line x1={21} y1={21} x2={15} y2={15} />
</svg>
</div>
<input
className="border border-gray-100 focus:outline-none focus:border-indigo-
700 rounded w-full text-sm text-gray-500 bg-gray-100 pl-12 py-2"
type="text"
placeholder="Search"
/>
</div>
</div>
<div className="w-1/2 hidden lg:flex">
<div className="w-full flex items-center pl-8 justify-end">
 <div className="h-full w-20 flex items-center justify-center border-r border-
l">
<div className="relative cursor-pointer text-gray-600">
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-bell"
width={28}
height={28}
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" />
<path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2
-3v-3a7 7 0 0 1 4 -6" />
<path d="M9 17v1a3 3 0 0 0 6 0v-1" />
</svg>
<div className="w-2 h-2 rounded-full bg-red-400 border border-white
absolute inset-0 mt-1 mr-1 m-auto" />
</div>
</div>
<div className="h-full w-20 flex items-center justify-center border-r mr-4
cursor-pointer text-gray-600">
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-messages"
width={28}
height={28}
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" />
<path d="M21 14l-3 -3h-7a1 1 0 0 1 -1 -1v-6a1 1 0 0 1 1 -1h9a1 1 0 0 1 1
1v10" />
<path d="M14 15v2a1 1 0 0 1 -1 1h-7l-3 3v-10a1 1 0 0 1 1 -1h2" />
 </svg>
</div>
<div
className="flex items-center relative cursor-pointer"
onClick={() => setProfile(!profile)}
>
<div className="rounded-full">
{profile ? (
<ul className="p-2 w-full border-r bg-white absolute rounded left-0
shadow mt-12 sm:mt-16 ">
<li className="flex w-full justify-between text-gray-600 hover:text-
indigo-700 cursor-pointer items-center">
<div className="flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-user"
width={18}
height={18}
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" />
<circle cx={12} cy={7} r={4} />
<path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
</svg>
<span className="text-sm ml-2">My Profile</span>
</div>
</li>
<li className="flex w-full justify-between text-gray-600 hover:text-
indigo-700 cursor-pointer items-center mt-2">
<div className="flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-logout"
width={20}
height={20}
viewBox="0 0 24 24"
strokeWidth="1.5"
 stroke="currentColor"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" />
<path d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2
2h7a2 2 0 0 0 2 -2v-2" />
<path d="M7 12h14l-3 -3m0 6l3 -3" />
</svg>
<span className="text-sm ml-2">Sign out</span>
</div>
</li>
</ul>
):(
""
)}
<div className="relative">
<img
className="rounded-full h-10 w-10 object-cover"
src={photoURL}
alt="avatar"
/>
<div className="w-2 h-2 rounded-full bg-green-400 border border-white
absolute inset-0 mb-0 mr-0 m-auto" />
</div>
</div>
<p className="text-gray-800 text-sm mx-3">{displayName}</p>
<div className="cursor-pointer text-gray-600">
<svg
aria-haspopup="true"
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-chevron-down"
width={20}
height={20}
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
 >
<path stroke="none" d="M0 0h24v24H0z" />
<polyline points="6 9 12 15 18 9" />
</svg>
</div>
</div>
</div>
</div>
</div>
<div
className="text-gray-600 mr-8 visible lg:hidden relative"
onClick={() => setShow(!show)}
>
{show ? (
""
):(
<svg
aria-label="Main Menu"
aria-haspopup="true"
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-menu cursor-pointer"
width={30}
height={30}
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" />
<line x1={4} y1={8} x2={20} y2={8} />
<line x1={4} y1={16} x2={20} y2={16} />
</svg>
)}
</div>
</nav>
{/* Navigation ends */}
{/* Remove class [ h-64 ] when adding a card block */}
<div className="container overflow-auto scrollbar-hide mx-auto py-10 h-[90vh]
">
 {/* Remove class [ border-dashed border-2 border-gray-300 ] to remove dotted
border */}
<Outlet />
</div>
</div>
</div>
</div>
</>
);
}
 7. TESTING
The code is tested at various levels in software testing. Unit, system and user
acceptance testing’sare often performed. This is a grey area as many different opinions exist
as to what the stages of testing are and how much if any iteration occurs. Iteration is
not generally part of the waterfall model, but usually some occur at this stage.

Software testing is the execution of a program to find its faults. The testing process
focuses on the logical internals of the software, ensuring that all statements have been
testedand on the functional externals, that is conducting test to uncover errors and
ensure that defined inputs will produce actual results agreed with required results. The
following test strategies were adopted to test the system.

Testing Objectives

• Testing is a process of executing a program with the intent of finding an error.

• A good test case is one that has a probability of finding a yet undiscovered error.

• A successful test is one that uncovers an undiscovered

errorTesting Principles

• All tests should be traceable to end user requirements.

• Tests should be planned long before testing begins.

• Testing should begin on a small scale and progress towards testing in large.

• Exhaustive testing is not possible.

• To be most effective testing should be conducted by a independent third party.

Test Approaches
i. Black Box Testing

This method focuses on the functional requirements of the software. This testing
enables us to derive set input conditions that will fully exercise all functional
requirements of the program.

Black Box Testing attempts to find errors in the following category.

• Incorrect or missing functions.

• Interface errors.

• Performance errors.

• Initialization and Termination errors.

ii. White Box Testing

This is performed early in the testing process, while Black Box testing is applied during
thelast stage of testing. In this test cases are generated on the logic of each module by
drawing flow graphs of that module and logical decisions are tested on all the cases. It
has been usedto generate the test case in the following test cases:

• Guarantee that all independent paths have been executed.

• Execute all logical decisions from their True and False side.

• Execute all loops at their boundaries and within their operational

bounds.Testing strategies

A strategy for software testing must accommodate low-level tests that are
necessary to verify that all small source code segments have been correctly
implemented as well as high-level tests that validate major system functions against
customer requirements.

There are two general strategies for testing software. They are as follows:

Code Testing: This examines the logic of the program. To follow this test,
cases aredeveloped such that every path of program is tested.

Specification Testing: Specification Testing examines the specification, starting what

the program should do and how it should perform under various conditions. Then test
cases aredeveloped for each condition and combinations of conditions and to be
submitted for processing.
 8. IMPLEMENTATION

The implementation of a Placement Portal involves translating the design and requirements
into a functional and operational system. Below are key steps and considerations in the
implementation process:

1. Environment Setup:
- Set up the development environment with the required tools and frameworks. For a web-
based system like the Placement Portal, this may involve setting up a development server,
installing a code editor, and ensuring all dependencies are in place.

2. Backend Development:
- Develop the backend of the system, including server-side logic, database design, and
APIs. Use a suitable backend technology stack, such as Node.js with Express, Django, or
Spring Boot, depending on your preferences and requirements.

3. Database Integration:
- Integrate the chosen database system (e.g., Firebase Fire store, MySQL, MongoDB) to
store and manage data related to students, placement drives, companies, and other relevant
information.

4. Authentication and Authorization:

- Implement a secure authentication system to allow students, placement officers, and
administrators to access the portal securely. Consider using Firebase Authentication or other
identity management solutions.

5. Frontend Development:
- Develop the user interface (UI) components using a frontend library or framework.
React.js is a popular choice for building dynamic and responsive UIs. Implement the
features such as user registration, login, dashboard views, and forms.

6. Integrate Backend with Frontend:

- Connect the frontend and backend components, ensuring seamless communication
through APIs. Implement data fetching and updating mechanisms to enable real-time
interactions between users and the system.

7. User Authentication in Frontend:

- Implement client-side authentication to manage user sessions, handle login/logout
functionalities, and control access to different parts of the portal based on user roles.

8. Testing:
- Conduct thorough testing, including unit testing, integration testing, system testing, and
other relevant testing types. Address any issues or bugs identified during the testing phase.
 9. Deployment:
- Deploy the application to a hosting platform or server. Firebase Hosting, Netlify, or
platforms like AWS, Heroku, or Google Cloud can be used based on your preferences.

10. Monitoring and Analytics:

- Implement tools for monitoring the application's performance and collecting analytics
data. Firebase Analytics or external services like Google Analytics can provide insights into
user behavior.

11. Security Measures:

- Implement security measures to protect against common web vulnerabilities, such as
cross-site scripting (XSS), cross-site request forgery (CSRF), and secure data transmission
using HTTPS.

12. Documentation:
- Create comprehensive documentation for developers, administrators, and users. Include
information about system architecture, API endpoints, data models, and user guides.

13. User Training and Onboarding:

- Provide training sessions or documentation to familiarize users, especially
administrators and placement officers, with the functionalities of the Placement Portal.

14. Feedback and Iteration:

- Gather feedback from users and stakeholders. Use this feedback to make improvements,
fix any issues, and iterate on the system to enhance its usability and effectiveness.

15. Scale and Maintenance:

- Plan for scalability as the user base grows. Monitor system performance and address any
scalability issues that may arise. Regularly update and maintain the system to incorporate
new features, security patches, and improvements.

Throughout the implementation process, collaboration between developers, designers, and

stakeholders is crucial to ensure the successful development and deployment of the
Placement Portal.
 10. CONCLUSION

The implementation of the Placement Portal represents a significant leap forward in

optimizing the management of student placements within educational institutions. By
leveraging a robust technology stack, including React.js for the frontend and Firebase for the
backend, the portal successfully addresses the limitations of manual placement processes.
The system's key features, such as real-time data synchronization, secure authentication, and
efficient data management, contribute to its effectiveness in streamlining placement
activities.

The user-friendly interface and seamless integration of various modules, including student
profiles, job listings, and company profiles, enhance the overall user experience for students,
placement officers, and administrators. The implementation also ensures scalability,
adaptability, and data security, aligning with the evolving needs and standards of the
educational environment.

Through automation, the Placement Portal significantly reduces manual workloads,

minimizes the potential for errors, and improves the overall efficiency of the placement
process. The incorporation of features like feedback mechanisms fosters transparent
communication and continuous improvement.

Scope of Future Work

While the current implementation marks a significant advancement, there are several
avenues for future enhancements and expansions:

1. AI-Driven Matching Algorithms:

- Explore the integration of artificial intelligence (AI) to enhance the matching algorithms,
providing more accurate recommendations for job opportunities based on student profiles
and company requirements.

2. Advanced Analytics and Reporting:

- Develop advanced analytics and reporting functionalities to provide administrators with
deeper insights into placement trends, student performance, and company engagement. This
can inform strategic decisions for future placement activities.

3. Mobile Application Development:

- Consider the development of dedicated mobile applications for both students and
administrators, allowing for greater accessibility and convenience in accessing the
Placement Portal on various devices.

4. Integration with Learning Management Systems (LMS):

- Explore integration with existing Learning Management Systems to incorporate
academic performance data, providing a more comprehensive view of a student's
qualifications.
 5. Enhanced Communication Features:
- Implement additional communication features, such as chat functionalities or
notifications, to facilitate better interaction between students, placement officers, and
companies.

6. Globalization and Multi-language Support:

- Extend the system's reach by incorporating globalization and multi-language support,
enabling educational institutions with diverse language requirements to benefit from the
Placement Portal.

7. Extended Company Engagement Tools:

- Enhance tools for participating companies, allowing them to engage more effectively
with students. This could include features for scheduling webinars, conducting virtual
company presentations, or interacting with students through the platform.

8. Blockchain for Credential Verification:

- Investigate the use of blockchain technology for secure and transparent verification of
student credentials, providing an added layer of trust for companies engaging with the
Placement Portal.

9. Accessibility and Inclusivity Features:

- Ensure the portal adheres to accessibility standards, making it inclusive and usable for
individuals with diverse abilities.

10. Continuous Security Audits:

- Conduct regular security audits and stay updated on emerging security threats to fortify
the system against potential vulnerabilities.

By addressing these areas in future iterations, the Placement Portal can continue to evolve as
a cutting-edge solution, meeting the dynamic needs of educational institutions, students, and
recruiting companies in the ever-changing landscape of placements and career development.