Skip to content

[Project] Recruitment & Applicant Tracking System (ATS) #1141 #1144

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cu-sanjay merged 1 commit into from
Jun 15, 2026
Merged

[Project] Recruitment & Applicant Tracking System (ATS) #1141 #1144

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions Projects/Recruitment And Applicant Tracking System/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
# Recruitment And Applicant Tracking System

A sleek, intuitive Applicant Tracking System (ATS) designed to streamline the hiring process for HR teams and recruiters. It features a pipeline view for tracking candidates and a dashboard for managing open job postings.

## Features
- **Kanban Pipeline**: Track candidates as they move through different stages of the hiring process (Applied, Interview, Offered).
- **Candidate Database**: View detailed information about applicants, including their roles and current status.
- **Job Postings**: Manage active job postings, track applicant counts, and close filled positions.
- **Interactive UI**: Seamlessly switch between the Candidate Pipeline and Job Postings views using the sidebar.
- **Responsive Design**: Built with pure CSS for a clean, accessible layout on mobile and desktop screens.

## Run It
No backend or build process required. Simply open `index.html` in your web browser.

## Tech Stack
- HTML5
- CSS3 (Vanilla, CSS Grid & Flexbox)
- Vanilla JavaScript

## Credits
Developed by MistryVishwa.
139 changes: 139 additions & 0 deletions Projects/Recruitment And Applicant Tracking System/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Applicant Tracking System</title>
<link rel="stylesheet" href="style.css">
<script src="https://unpkg.com/@phosphor-icons/web"></script>
</head>
<body>

<div class="app-container">

<!-- Sidebar -->
<aside class="sidebar">
<div class="brand">
<i class="ph-fill ph-briefcase text-primary"></i> <span>HireTrack</span>
</div>

<nav class="sidebar-menu">
<button class="nav-btn active" data-target="pipeline"><i class="ph ph-kanban"></i> Candidate Pipeline</button>
<button class="nav-btn" data-target="jobs"><i class="ph ph-suitcase-simple"></i> Job Postings</button>
<button class="nav-btn" data-target="interviews"><i class="ph ph-calendar"></i> Interviews</button>
</nav>

<div class="user-profile">
<img src="https://ui-avatars.com/api/?name=HR+Admin&background=2563eb&color=fff" alt="User">
<div>
<div class="user-name">HR Admin</div>
<div class="user-status">Recruitment Lead</div>
</div>
</div>
</aside>

<!-- Main Content -->
<main class="main-content">

<!-- Topbar -->
<header class="topbar flex-between">
<div class="search-box">
<i class="ph ph-magnifying-glass"></i>
<input type="text" placeholder="Search candidates, jobs, or emails...">
</div>
<button class="primary-btn"><i class="ph ph-plus"></i> Add Candidate</button>
</header>

<div class="scroll-area">

<!-- Pipeline View -->
<section id="pipeline" class="view active">
<div class="page-heading flex-between mb-3">
<div>
<h1>Candidate Pipeline</h1>
<p class="text-muted">Track applicants across active job postings.</p>
</div>
<select class="custom-select">
<option>Frontend Developer</option>
<option>Product Manager</option>
<option>UX Designer</option>
</select>
</div>

<div class="kanban-board" id="kanban-board">
<!-- Applied Column -->
<div class="kanban-col">
<div class="col-header border-blue">
<h3>New Applied <span class="badge">3</span></h3>
</div>
<div class="col-body" id="col-applied">
<!-- JS Injected -->
</div>
</div>

<!-- Interviewing Column -->
<div class="kanban-col">
<div class="col-header border-orange">
<h3>Interviewing <span class="badge">2</span></h3>
</div>
<div class="col-body" id="col-interview">
<!-- JS Injected -->
</div>
</div>

<!-- Offered Column -->
<div class="kanban-col">
<div class="col-header border-green">
<h3>Offered <span class="badge">1</span></h3>
</div>
<div class="col-body" id="col-offered">
<!-- JS Injected -->
</div>
</div>
</div>
</section>

<!-- Jobs View -->
<section id="jobs" class="view hidden">
<div class="page-heading flex-between mb-3">
<div>
<h1>Job Postings</h1>
<p class="text-muted">Manage active listings and departmental needs.</p>
</div>
<button class="primary-btn"><i class="ph ph-plus"></i> New Job</button>
</div>

<div class="jobs-grid" id="jobs-grid">
<!-- JS Injected -->
</div>
</section>

<!-- Interviews View -->
<section id="interviews" class="view hidden">
<div class="page-heading mb-3">
<h1>Upcoming Interviews</h1>
<p class="text-muted">Your schedule for the next 7 days.</p>
</div>

<div class="panel">
<div class="panel-body p-0">
<table class="custom-table">
<thead>
<tr><th>Candidate</th><th>Role</th><th>Interviewer</th><th>Date & Time</th><th>Status</th></tr>
</thead>
<tbody id="interviews-tbody">
<!-- JS Injected -->
</tbody>
</table>
</div>
</div>
</section>

</div>
</main>

</div>

<script src="script.js"></script>
</body>
</html>
14 changes: 14 additions & 0 deletions Projects/Recruitment And Applicant Tracking System/project.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
{
"title": "Recruitment And Applicant Tracking System",
"description": "A streamlined applicant tracking system for managing job postings, candidates, and interview schedules.",
"author": {
"name": "MistryVishwa",
"github": "MistryVishwa"
},
"tags": [
"management",
"ats",
"vanilla-js"
],
"entry": "index.html"
}
121 changes: 121 additions & 0 deletions Projects/Recruitment And Applicant Tracking System/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
// --- Mock Data ---
const candidates = [
{ id: 1, name: "Alice Johnson", role: "Frontend Developer", date: "Oct 15", stage: "applied", rating: "unrated", avatar: "Alice+Johnson", color: "ef4444" },
{ id: 2, name: "Robert Chen", role: "Product Manager", date: "Oct 14", stage: "applied", rating: "unrated", avatar: "Robert+Chen", color: "3b82f6" },
{ id: 3, name: "Elena Gomez", role: "UX Designer", date: "Oct 12", stage: "interview", rating: "4.5", avatar: "Elena+Gomez", color: "8b5cf6" },
{ id: 4, name: "Marcus Webb", role: "Frontend Developer", date: "Oct 10", stage: "interview", rating: "4.0", avatar: "Marcus+Webb", color: "10b981" },
{ id: 5, name: "Sarah Smith", role: "Backend Developer", date: "Oct 05", stage: "offered", rating: "5.0", avatar: "Sarah+Smith", color: "f59e0b" }
];

const jobs = [
{ title: "Frontend Developer", dept: "Engineering", type: "Full-time", location: "Remote", applicants: 45, new: 12 },
{ title: "Product Manager", dept: "Product", type: "Full-time", location: "New York, NY", applicants: 28, new: 5 },
{ title: "UX Designer", dept: "Design", type: "Contract", location: "Remote", applicants: 64, new: 18 }
];

const interviews = [
{ candidate: "Elena Gomez", role: "UX Designer", interviewer: "Design Team", date: "Tomorrow, 10:00 AM", status: "Scheduled" },
{ candidate: "Marcus Webb", role: "Frontend Dev", interviewer: "Tech Lead", date: "Oct 20, 2:00 PM", status: "Pending Confirmation" }
];

// --- Core Logic ---
document.addEventListener('DOMContentLoaded', () => {
const navBtns = document.querySelectorAll('.nav-btn');
const views = document.querySelectorAll('.view');

// Initialization
renderKanban();
renderJobs();
renderInterviews();

// Navigation Switching
navBtns.forEach(btn => {
btn.addEventListener('click', () => {
const targetId = btn.getAttribute('data-target');

navBtns.forEach(b => b.classList.remove('active'));
btn.classList.add('active');

views.forEach(v => {
v.classList.add('hidden');
if (v.id === targetId) {
v.classList.remove('hidden');
}
});
});
});

function renderKanban() {
const colApplied = document.getElementById('col-applied');
const colInterview = document.getElementById('col-interview');
const colOffered = document.getElementById('col-offered');

if(!colApplied || !colInterview || !colOffered) return;

const createCard = (c) => `
<div class="candidate-card">
<div class="cand-header">
<img src="https://ui-avatars.com/api/?name=${c.avatar}&background=${c.color}&color=fff">
<div>
<div class="cand-name">${c.name}</div>
<div class="cand-role">${c.role}</div>
</div>
</div>
<div class="cand-footer">
<span><i class="ph-fill ph-calendar-blank"></i> ${c.date}</span>
<span>${c.rating !== 'unrated' ? `<i class="ph-fill ph-star text-orange"></i> ${c.rating}` : 'Unrated'}</span>
</div>
</div>
`;

colApplied.innerHTML = candidates.filter(c => c.stage === 'applied').map(createCard).join('');
colInterview.innerHTML = candidates.filter(c => c.stage === 'interview').map(createCard).join('');
colOffered.innerHTML = candidates.filter(c => c.stage === 'offered').map(createCard).join('');
}

function renderJobs() {
const grid = document.getElementById('jobs-grid');
if(!grid) return;

grid.innerHTML = jobs.map(j => `
<div class="job-card">
<div class="flex-between">
<div class="job-title">${j.title}</div>
<button class="icon-btn" style="width:32px; height:32px;"><i class="ph ph-dots-three"></i></button>
</div>
<div class="job-dept">${j.dept} • ${j.type}</div>
<div class="text-muted mb-3" style="font-size: 0.85rem;"><i class="ph-fill ph-map-pin"></i> ${j.location}</div>

<div class="job-stats">
<div class="job-stat-item">
<div class="job-stat-val">${j.applicants}</div>
<div class="job-stat-lbl">Total</div>
</div>
<div class="job-stat-item">
<div class="job-stat-val text-primary">${j.new}</div>
<div class="job-stat-lbl">New</div>
</div>
</div>
<button class="btn outline-btn w-full" style="width:100%">View Applicants</button>
</div>
`).join('');
}

function renderInterviews() {
const tbody = document.getElementById('interviews-tbody');
if(!tbody) return;

tbody.innerHTML = interviews.map(i => {
let badgeCls = i.status === 'Scheduled' ? 'primary' : 'warning';
return `
<tr>
<td><strong>${i.candidate}</strong></td>
<td>${i.role}</td>
<td>${i.interviewer}</td>
<td>${i.date}</td>
<td><span class="badge ${badgeCls}">${i.status}</span></td>
</tr>
`;
}).join('');
}
});
Loading
Loading