A

Diagram,Flowchart&Implementation of Code
Of
Major Project
On
Job Portal

Submitted to

For the partial fulfillment of

Award of the degree

MASTER OF COMPUTER APPLICATION

(MCA-IV SEM) -2025

By
Name:Himanshu Singh Bhadouriya
Roll no. :MCAN1CA23053

Under the Supervision of

Mr.Saurabh Chaturvedi
Assistant Professor, Department of CSA
ITM University
 TABLE OF CONTENTS

Broad Area of Work 1

Introduction 2,3,4

5,6,7

Literature Survey/ Work done in the

field of proposed work

Existing Gaps 8,9

Objectives of the proposed work 10,11

Proposed Methodologies 12,13,14,15

Expected Outcome of the proposed work 16,17

Future scope of the work 18,19,20

References 21,22
Broad Area of Work
This project focuses on developing a dynamic and interactive Job Portal
for bridging job seekers and employers. By leveraging ReactJS for the
front-end and NodeJS with ExpressJS for the back-end, the portal aims to
provide a seamless, responsive, and scalable platform that offers
skillbased job recommendations and advanced user engagement.
Developing a job portal using ReactJS, Node.js, and Express.js involves
several key areas of work. On the frontend, ReactJS is used to design
responsive and intuitive interfaces for job seekers and employers,
incorporating features like job search, filters, user registration, and
dashboards. The backend, built with Node.js and Express.js, handles
server-side logic, including user authentication, job postings, and
application workflows, while integrating external APIs where necessary.
Database management is crucial to organize and secure data for users,
jobs, and applications, ensuring efficient CRUD operations and encryption
of sensitive information. Other essential areas include implementing
robust authentication and authorization systems,
developing a powerful search functionality for job listings and resumes,
and creating workflows for job applications that allow applicants to track
their submissions and employers to manage the hiring process. Additional
features might include real-time notifications, performance optimization
for faster response times, thorough testing, and deployment on platforms
like Netlify or Render. Advanced features could range from , making the
platform more dynamic and user-friendly. Each of these elements
contributes to building a comprehensive and efficient job portal
 1

Inroduction

A job portal is an online platform that connects job seekers with potential
employers. It functions as a bridge between individuals looking for job
opportunities and companies seeking to fill positions. Here's a quick
overview of what a job portal typically offers:

Job Listings: Employers post job vacancies, providing details such as job
descriptions, required qualifications, and application deadlines.

Resume Submission: Job seekers can create and upload their resumes,
making it easier for employers to find and consider them for open
positions.

Application Tracking: Users can keep track of their job applications,

including submission status and interview schedules.

Job Alerts: Job seekers can set up alerts to receive notifications about new
job postings that match their skills and preferences.

Company Profiles: Detailed information about potential employers,

including company culture, mission, and current job openings.
Career Resources: Access to career advice, resume building tips,
interview preparation guides, and other helpful content to support job
seekers.
Job portals are incredibly useful for streamlining the job search process
and providing both employers and job seekers with valuable resources.
2

Tools Used
React.js: A JavaScript library for building user interfaces. It helps you
create dynamic and responsive front-end components.
Node.js: A JavaScript runtime environment that allows you to run
JavaScript on the server side.

Express.js: A web application framework for Node.js, used to build

RESTful APIs and handle server-side logic.

Development Tools
Visual Studio Code (VS Code): A powerful, opensource code editor with
support for various extensions. npm (Node Package Manager:Used to
manage project dependencies and install packages.

Front-End Libraries and Tools

React Router: For handling routing within your React application.

Axios: For making HTTP requests to your backend API.

Redux: For state management within your React application (optional but
helpful for larger projects).
Material-UI or Ant Design: For pre-built UI components and design
consistency.
Formik and Yup: For form handling and validation.

React Hook Form: For managing forms in React with less code.

3
Back-End Libraries and Tools

Mongoose: For interacting with MongoDB, a NoSQL database.

jsonwebtoken: For implementing authentication using JSON Web Tokens
(JWT).
bcryptjs: For hashing and securing passwords.
cors: For enabling Cross-Origin Resource Sharing, which allows your
front-end to communicate with your back-end.

dotenv: For loading environment variables from a

.env file.

Additional Tools
ESLint and Prettier: For code linting and formatting to maintain code
quality.

Postman: For testing and documenting your API endpoints.

Git: For version control and collaboration.
Render or Netlify: For deploying your application.

4
Literature Survey/ Work done in the field of proposed
When building a Job Portal using ReactJS, NodeJS, and ExpressJS, the
literature review focuses on understanding the technological
advancements, methodologies, and tools that have been applied in similar
projects, alongside identifying key gaps that this project can address.

Technologies in Job Portals

1.Frontend Development:
Research highlights that many established platforms use traditional
frameworks for the frontend, limiting interactivity and responsiveness.
ReactJS, with its component-based architecture, offers modularity,
reusability, and dynamic rendering, making it ideal for developing
userfriendly and interactive job portals.
Studies on state management suggest tools like Redux and Context API
for handling application-wide states efficiently, especially in complex
portals with dynamic filters and real-time job updates.
2.Backend Development:
NodeJS is recognized as a non-blocking, event-driven runtime suitable for
high-concurrency applications like job portals. Studies highlight its ability
to handle large-scale data and simultaneous requests efficiently.
ExpressJS, as a lightweight NodeJS framework, provides robust
middleware options for RESTful API design, enabling smooth
communication between the frontend and backend.
5
Research shows that using JSON Web Tokens (JWT)
enhances authentication mechanisms, ensuring secure
sessions for user logins and applications.

3.Database Integration

NoSQL databases such as MongoDB are commonly preferred in job

portals because of their flexibility and scalability. The dynamic nature of
job postings and resumes fits well with MongoDB’s schema-less design.
Literature suggests the use of Mongoose, a NodeJS Object Data Modeling
(ODM) library, to manage database queries and schemas effectively in a
backend system powered by NodeJS.

4.Real-Time Features
Studies emphasize the increasing role of real-time notifications in job
portals for features such as instant job updates or application status
tracking.
Research on WebSockets or Socket.IO demonstrates their effectiveness in
achieving real-time functionality when integrated with NodeJS.
5.User Experience (UX) and Accessibility
Studies on UX design emphasize that responsive, interactive, and
mobilefriendly UIs are critical for user engagement. ReactJS’s virtual
DOM and responsive libraries like Material-UI or Bootstrap simplify
building such interfaces.

6
Accessibility standards like WCAG guidelines ensure inclusivity,
particularly for users with disabilities, which is often lacking in current
job portals.

6.Open-Source Case Studies

Open-source projects on GitHub provide valuable insights into
implementing job boards using ReactJS, NodeJS, and ExpressJS. Analysis
of such projects often reveals common challenges, such as:
API response latency.
Inefficient state management in the frontend.
Database bottlenecks during high traffic.
By reviewing these aspects, this project can leverage the strengths of
ReactJS, NodeJS, and ExpressJS to create an advanced, responsive, and
inclusive job portal while addressing the limitations of existing platforms
 7

Existing Gaps
When analyzing current job portals and considering the advancements
ReactJS, NodeJS, and ExpressJS can bring, the following existing gaps in
traditional systems and applications emerge

1.Skill-Based Matching Deficiency

Current job portals often rely on keyword-based searches, leading to
irrelevant or mismatched results.
Soft skills and cultural fit are usually ignored in the matching process,
which results in unsuitable job recommendations.
2.Lack of Personalization
Portals fail to provide personalized job recommendations based on user
preferences, such as career aspirations, location preferences, or past
applications.
There is little effort in tailoring job suggestions to user profiles using
modern techniques
3.Poor User Experience (UX)
Slow interfaces and outdated designs hamper the user experience,
especially on mobile devices.
Features like responsive design and dynamic interaction are often missing,
making these portals less appealing and harder to navigate.Complex
workflows discourage both job seekers and recruiters from fully utilizing
the platform.

8
4. Limited Real-Time Functionalities
Most portals lack real-time notifications for job openings, application
status updates, or interview alerts.
Real-time capabilities (achievable through Socket.IO or WebSockets) are
underutilized, reducing user engagement.

5.Accessibility Challenges
Insufficient focus on inclusive designs for users with disabilities.
Limited adherence to Web Content Accessibility Guidelines (WCAG),
making portals difficult to use for differently-abled individuals.
6. Inefficient Backend Systems
Many platforms use outdated backend technologies that lead to Higher
latency in API responses.
Poor performance during periods of high traffic.
7.Weak Security Mechanisms
Limited implementation of advanced security measures like JSON Web
Tokens (JWT) for authentication.
Insufficient protection against data breaches or unauthorized access,
which could compromise sensitive user information.

9
Objectives of the Proposed Work
For a Job Portal project built using ReactJS, NodeJS, and ExpressJS, the
objectives focus on leveraging these technologies to address existing gaps
in current systems. The proposed work aims to:
1.Develop a Scalable and Responsive Frontend:
Use ReactJS to design a dynamic, component-based user interface.
Ensure a responsive and mobile-friendly design for seamless user
interaction across all devices.
2.Design a Robust Backend System
Utilize NodeJS and ExpressJS to build a scalable, high-performance
server.
Create RESTful APIs for efficient communication between the frontend
and backend.
3.Offer Personalized User Experiences:Tailor job recommendations
based on individual user profiles, including preferences, past applications,
and skillsets.Include advanced filtering options for customized job
searches.
4..Enable Real-Time Functionalities:Implement real-time notifications
for job alerts and application status using tools like
Socket.IOorWebSockets.

10
5.Enhance Security and Authentication:
Integrate secure login systems using JSON Web Tokens (JWT) for user
authentication.
Protect sensitive user data with strong encryption methods.
6.Improve Inclusivity and Accessibility:
Design the platform to adhere to Web Content Accessibility Guidelines
(WCAG).
Ensure the portal is usable by differently-abled individuals with features
like screen reader support and keyboard navigation.

7.Create a Scalable Database Architecture:

Use MongoDB for flexible and scalable data storage.
Ensure efficient handling of large datasets, including job postings, user
profiles, and applications.
8.Introduce Gamified Skill Development:
Integrate gamification features, such as quizzes and skill-testing tools, to
encourage professional development and career growth.
9.Streamline the Recruitment Process:
Provide tools for employers to post jobs, screen candidates, and manage
applications efficiently.
Facilitate communication between employers and job seekers via
messaging or scheduling tools.

11
Proposed Methodologies
To develop a modern, scalable job portal, the following step-by-step
methodologies are proposed: 1.Requirement Analysis User Needs:
Analyze job seeker needs, such as personalized job recommendations and
career guidance.
Identify employer requirements, such as applicant tracking and job
posting efficiency.
Functional Requirements:
Define features such as job searches, resume uploads, skill-based
recommendations, and real-time notifications.
Plan administrative features like managing user accounts and monitoring
portal performance.
2.Frontend Development (ReactJS)
ComponentBased Design:
Create reusable components for key elements, such as job cards, user
dashboards, search filters, and navigation State Management:
Use Redux or Context API to manage complex states (e.g., user
authentication, job search filters, and application tracking).
Responsive Design:Implement responsive designs using Material-UI,
Bootstrap, or custom CSS for seamless mobile and desktop experiences.
12
3.Backend Development (NodeJS & ExpressJS) API
Development:
Build a set of RESTful APIs using ExpressJS to handle:
User authentication and authorization (e.g., login, registration, session
management).
Job search and retrieval based on skills, location, and preferences.
Resume upload and parsing for dynamic recommendations. Real-time
updates for job postings and application statuses.
Middleware Integration:
Use middleware for logging, error handling, and security.
Database Connection:
Integrate MongoDB via Mongoose for managing job postings, user
profiles, applications, and system logs.
4. Database Design
MongoDB Schema:
Design collections for:
Users: Personal details, skills, preferences, resumes.
Jobs: Job descriptions, requirements, locations, and employer details.
Applications: Candidate job applications with status tracking.
Scalability:
Optimize database queries to handle high traffic and dynamic data.
Recommendation Scalability

13
Real-Time Functionality WebSocket
Integration:
Use Socket.IO to enable real-time notifications for job postings,
application updates, and employer responses.
Chat Features:
Allow direct messaging between job seekers and employers for
smoother communication. Testing & Quality Assurance Frontend
Testing:
Use Jest or React Testing Library to ensure ReactJS components function
correctly.
API Testing:
Test the backend using tools like Postman Load Testing:
Perform scalability tests to ensure the system can handle high traffic
efficiently.
Accessibility Testing:
Validate that the portal meets WCAG guidelines for differently-abled
users.

14

Deployment
Cloud Hosting:
Deploy the application to cloud platforms such as Netlify,Render, AWS,
or Microsoft Azure.
CI/CD Pipelines:
Use tools like GitHub Actions for continuous integration and deployment
to maintain code quality and update processes.
Security Measures Authentication:
Implement JSON Web Tokens (JWT) for secure user authentication.
Data Protection:
Use encryption to secure sensitive user information.
Prevent Unauthorized Access:
Apply rate limiting and secure API endpoints against unauthorized usage.
These methodologies ensure a robust, scalable, and user-friendly job
portal. Each step focuses on solving current limitations in existing systems
while leveraging modern technologies like ReactJS, NodeJS, and
ExpressJS for optimal performance and scalability.
 15

Expected Outcome of the Proposed Work

By implementing the Job Portal project using ReactJS, NodeJS, and

ExpressJS, the following outcomes are expected:

1. Efficient Job-Candidate Matching

The system will achieve accurate and skill-based matchmaking,
connecting job seekers with relevant opportunities based on their
qualifications, skills, and preferences.
AI-powered recommendations will enhance the relevance of search
results, saving time for both employers and candidates.

2.Enhanced User Experience

A highly responsive and mobile-friendly interface powered by ReactJS
will deliver a seamless experience across devices.
Intuitive navigation, personalized dashboards, and dynamic job search
functionality will improve user satisfaction.

Real-Time Notifications
The platform will offer real-time updates for job postings, application
statuses, and interview alerts via Socket.IO, keeping users informed
without delays.
3.Secure and Scalable System
Robust authentication using JSON Web Tokens (JWT) will ensure user
data security.
The system will be scalable, with the ability to handle large datasets and
high traffic effectively, thanks to the non-blocking nature of NodeJS and
efficient database management through MongoDB.
16
4.Improved Inclusivity
Adherence to WCAG accessibility standards will make the platform
inclusive for differently-abled users.
Features like screen reader compatibility and keyboard navigation will
broaden the usability of the portal

5.Time Efficiency for Employers

Employers will benefit from tools for efficient job postings, applicant
tracking, and automated resume parsing.
Recruiters can filter and shortlist candidates quickly, streamlining the
hiring process.

6.Personal and Career Development

Job seekers will gain access to gamified skill improvement tools, such as
skill quizzes and career insights, aiding professional growth.
7. Platform for Growth
A robust backend will enable the system to expand with additional
features like international job markets, multilingual support, and advanced
analytics.
Future integrations, such as psychometric tests or blockchain-based
certificate verification, can be seamlessly added.
This project will address current limitations in job portals, providing a
modern, scalable, and user-centric solution for job seekers and employers
alike.

17

Future Scope of the Work

The Job Portal Project built using ReactJS, NodeJS, and ExpressJS has
immense potential for future expansion and scalability. Here are the
possible areas where this project can grow:

1. Global Expansion
Extend the platform to support international job markets by including
multilingual features and multiple regional settings.
Integrate currency converters, location-based job filters, and time zone
support for users across the globe.

2. Advanced Matching Mechanisms

Incorporate psychometric testing and behavioral analysis to assess
candidates' soft skills and cultural fit with organizations.
Implement more robust AI algorithms to refine job recommendations and
include advanced skill gap analysis.

3. Blockchain Integration
Use blockchain technology to enable secure and tamper-proof verification
of candidates’ certifications and work history.
Introduce smart contracts for automated hiring agreements between
employers and candidates.

4. Virtual Interviewing Features

Develop video conferencing integration for remote interviews directly
within the portal. Add automated interview scheduling tools,
synchronized with employers' and candidates'

18
5. Skill Development Modules
Integrate a learning and development hub with resources for users to
upskill.
Offer online courses, quizzes, and certifications tailored to market
demands.
6. Mobile Application
Launch a dedicated mobile app for both Android and iOS to enhance
accessibility.
Provide offline features, such as resume editing or job browsing, with
automatic synchronization when online.

7. Real-Time Analytics and Insights

Provide employers with data dashboards for recruitment trends,
application metrics, and employee engagement analysis.
Deliver job seekers insights into their performance, such as resume quality
and application success rates.

8. Automation and Chatbots

Develop AI-driven chatbots to assist users with common queries, job
searches, and application tips.
Automate routine tasks for employers, such as initial resume screening
and candidate scoring.

9. Freelance and Gig Economy Integration

Expand the platform to include features for the freelance workforce,
allowing gig workers to find temporary and project-based opportunities.
Introduce payment management systems for short-term contracts.

19
10. Social Networking Features
Add networking capabilities similar to professional social platforms,
enabling candidates to connect and collaborate.
Facilitate employer branding by allowing companies to showcase their
work culture and achievements.
 20

References

1.Documentation and Tutorials ReactJS:

Official React Documentation: https://react.dev/ Tutorials on
React basics, components, and hooks.
NodeJS:
NodeJS Official Documentation: https://nodejs.org/ Guides on
setting up event-driven server-side applications.
ExpressJS:
ExpressJS Official Documentation: https://expressjs.com/ Middleware
integration and RESTful API tutorials.

2. Database Integration MongoDB:

MongoDB Documentation: https://www.mongodb.com/docs/
Tutorials on schema design and NoSQL query handling with Mongoose.

4. Accessibility
WCAG Guidelines:
Official Web Content Accessibility Guidelines:
https://www.w3.org/WAI/standards-guidelines/wcag/
Resources on creating inclusive web designs.

5. Open-Source Projects
Explore GitHub repositories for job boards using the MERN (MongoDB,
ExpressJS, ReactJS, NodeJS) stack to understand realworld implementations:
https://github.com/

21
6. Testing Frameworks React Testing Library:
Official Documentation: https://testing-
library.com/docs/reacttestinglibrary/intro/ Postman:
API testing tutorials and guides.
These references can serve as a foundation for developing, implementing,
and testing the proposed job portal project.
 22
Proposed Model/ System Design
(Flowcharts/Block Diagrams/
Algorithms/DFD/ER or
diagrams)
Implementation of Code

import axios from "axios";

import React, { useContext, useState } from "react"; import
toast from "react-hot-toast"; import { useNavigate,
useParams } from "react-router-dom";
import { Context } from "../../main"; const
Application = () => { const [name, setName] =
useState(""); const [email, setEmail] =
useState(""); const [coverLetter, setCoverLetter] =
useState(""); const [phone, setPhone] =
useState(""); const [address, setAddress] =
useState(""); const [jobname, setJobName] =
useState(""); const [resume, setResume] =
useState(null);

const { isAuthorized, user } = useContext(Context);

const navigateTo = useNavigate();

// Function to handle file input changes const

handleFileChange = (event) => { const
resume = event.target.files[0];
setResume(resume);
};

const { id } = useParams(); const handleApplication

= async (e) => { e.preventDefault();
// console.log(name,email,coverLetter,phone,address,resume) const
formData = new FormData();
 formData.append("name", name); formData.append("email",
email); formData.append("phone", phone);
formData.append("address", address); formData.append("jobname",
jobname); formData.append("coverLetter", coverLetter);
formData.append("resume", resume); formData.append("jobid", id);

try { const { data }

= await
axios.post("/api/post",formData); console.log(data)
setName(""); setEmail(""); setCoverLetter("");
setPhone(""); setAddress(""); setJobName("");
setResume(""); toast.success(data.message);
navigateTo("/job/getall");
} catch (error) {
//console.log(error)
toast.error(error.response.data.message);
}
};

if (!isAuthorized || (user && user.role === "Employer")) {

navigateTo("/");
}

return (
// <section className="application">
// <div className="container">
// <h3>Application Form</h3>
// <form onSubmit={handleApplication}>
// <input
// type="text"
// placeholder="Your Name"
// value={name}
// onChange={(e) => setName(e.target.value)}
// />
// <input
// type="email"
// placeholder="Your Email"
// value={email}
// onChange={(e) => setEmail(e.target.value)}
// />
// <input
// type="number"
// placeholder="Your Phone Number"
// value={phone}
// onChange={(e) => setPhone(e.target.value)}
// />
// <input
// type="text"
// placeholder="Your Address"
// value={address}
// onChange={(e) => setAddress(e.target.value)}
// />
// <textarea
// placeholder="CoverLetter..."
// value={coverLetter}
// onChange={(e) => setCoverLetter(e.target.value)}
// />
// <div>
 // <label
// style={{ textAlign: "start", display: "block", fontSize: "20px"
}}
// >
// Select Resume
// </label>
// <input
// type="file"
// accept=".pdf, .jpg, .png"
// onChange={handleFileChange}
// style={{ width: "100%" }}
// />
// </div>
// <button type="submit">Send Application</button>
// </form>
// </div>
// </section>
<div className="col-md-8 mx-auto px-4">
<h2 className="text-center my-4">Job Application Form</h2>
<form
onSubmit={handleApplication}
className="shadow-lg p-4 rounded bg-light"
>
<div className="mb-3">
<input type="text"
className="form-control" value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Your Full Name" required
 />
</div>
<div className="mb-3">
<input type="email" className="form-control"
value={email} onChange={(e) =>
setEmail(e.target.value)} placeholder="Your
Email"
required />
</div>
<div className="mb-3"> <textarea
className="formcontrol" value={coverLetter}
onChange={(e) => setCoverLetter(e.target.value)}
placeholder="Cover Letter"
rows="4"
required />
</div>
<div className="mb-3">
<input type="tel"
className="form-control"
value={phone} onChange={(e) => setPhone(e.target.value)}
placeholder="Your Phone Number"
required />
</div>
<div className="mb-3">
<textarea
className="form-control" value={address}
onChange={(e) => setAddress(e.target.value)}
placeholder="Your Address"
rows="3"
required
/>

</div>

<div className="mb-3">
<input type="text"
className="formcontrol"
value={jobname}
onChange={(e) => setJobName(e.target.value)}
placeholder="Your jobname"
required
/>
</div>

<div className="mb-3">
<input type="file"
accept=".pdf, .png, .jpg, .jpeg"
className="form-control"
onChange={handleFileChange}
required
/>
{resume && (
<div className="mt-2 text-muted">
<strong>File Selected:</strong> {resume.name}
</div>
)}
</div>
<div className="d-flex justify-content-center mt-4">
 <button type="submit" className="btn btn-primary btn-lg">
Submit Application
</button>
</div>
</form>
</div>
);
};

export default Application;

import React, { useContext, useEffect, useState } from "react";
import { Context } from "../../main"; import axios from
"axios"; import toast from "react-hot-toast"; import {
useNavigate } from "react-router-dom";
import ResumeModal from "./ResumeModal";

const MyApplications = () => { const { user } =

useContext(Context); const [applications, setApplications] =
useState([]); const [modalOpen, setModalOpen] =
useState(false); const [resumeImageUrl,
setResumeImageUrl] = useState("");

const { isAuthorized } = useContext(Context); const

navigateTo = useNavigate();

useEffect(() => { try {

if (user && user.role === "Employer") { axios
.get("/api/employer/getall", {
withCredentials: true,
})
 .then((res) => {
setApplications(res.data.applications);
}); }
else {
axios
.get("/api/jobs
eeker/getall",
{
withCredentia
ls: true,
})
.then((res) => {
setApplications(res.data.applications);
});
}
} catch (error) {
toast.error(error.response.data.message); } },
[isAuthorized]);

if (!isAuthorized) {
navigateTo("/");
}

const deleteApplication = (id) => {

try { axios
.delete(`/api/delete/${id}`, {
withCredentials: true,
})
.then((res) => {
toast.success(res.data.message);
setApplications((prevApplication) =>
 prevApplication.filter((application) => application._id !== id)
);
});
} catch (error) {
toast.error(error.response.data.message);
}
};

const openModal = (imageUrl) => {

setResumeImageUrl(imageUrl);
setModalOpen(true);
};

const closeModal = () => { setModalOpen(false);

};
return (
<section className="my_applications page">
{user && user.role === "Job Seeker" ? (
<div className="container">
<h1>My Applications</h1>
{applications.length <= 0 ? (
<>
{" "}
<h4>No Applications Found</h4>{" "}
</>
):(
applications.map((element) => {
return (
<JobSeekerCard
element={element} key={element._id}
deleteApplication={deleteApplication}
openModal={openModal}
/>
);
})
)}
</div>
):(
<div className="container">
<h1>Applications From Job Seekers</h1>
{applications.length <= 0 ? (
<>
<h4>No Applications Found</h4>
</>
):(
applications.map((element) => { return
(
<EmployerCard
element={element}
key={element._id}
openModal={openModal}
/>
);
})
)}
</div>
)}
{modalOpen && (
 <ResumeModal imageUrl={resumeImageUrl}
onClose={closeModal} />
)}
</section>
);
};

export default MyApplications;

const JobSeekerCard = ({ element, deleteApplication, openModal }) =>

{ return
(
<>
<div className="job_seeker_card">
<div className="detail">
<p>
<span>Name:</span> {element.name}
</p>
<p>
<span>Email:</span> {element.email}
</p>
<p>
<span>Phone:</span> {element.phone}
</p>
<p>
<span>Address:</span> {element.address}
</p>
<p>
 <span>CoverLetter122:</span> {element.coverLetter}
</p>
<p>
<span>JobName:</span> {element.jobname}
</p>

</div>
<div className="resume">
<img src={element.resume.url}
alt="resume" onClick={() =>
openModal(element.resume.url)}
/>
</div>
<div className="btn_area">
<button onClick={() => deleteApplication(element._id)}>
Delete Application
</button>
</div>
</div>
</>
);
};

const EmployerCard = ({ element, openModal }) => { return

(
<>
<div className="job_seeker_card">
<div className="detail">
 <p>
<span>Name:</span> {element.name}
</p>
<p>
<span>Email:</span> {element.email}
</p>
<p>
<span>Phone:</span> {element.phone}
</p>
<p>
<span>Address:</span> {element.address}
</p>
<p>
<span>CoverLetter:</span> {element.coverLetter}
</p>
<p>
<span>JobName:</span> {element.jobname}
</p>
</div>
<div className="resume">
<img
src={element.resume.url} alt="resume"
onClick={() => openModal(element.resume.url)}
/>
</div>
</div>
</>
);
};