AppliTrack

A job application pipeline tracker built for developers and job seekers. Manage your entire job search from a visual Kanban board, track every application through its stages, and monitor your search performance through a real-time stats dashboard.

Built for HireFlow HR Solutions — a recruitment and talent management company that needed a lightweight client-facing tool for candidates to track their application pipelines without logging into a full ATS system.

---

Features

• Kanban board — drag and drop applications across six pipeline stages
• List view — sortable table with click-to-sort columns and inline status updates
• Stats dashboard — total applications, interview rate, offer rate, and average response time
• Full application form — company, role, status, location, salary range, apply date, job URL, recruiter name and email, and notes
• Live search — filters across company, role, location, and notes instantly
• Export / Import — back up and restore your data as a JSON file
• All data stored locally in localStorage — no account, no server, no internet required

Pipeline stages

Stage	Description
Applied	Submitted the application
Screening	HR or recruiter reached out
Interview	Technical or HR interview scheduled
Offer	Received a formal offer
Rejected	Position closed or application declined
Withdrawn	You withdrew your application

---

Tech Stack

Layer	Technology
Framework	React 18
Build tool	Vite
Styling	Tailwind CSS
Icons	Lucide React
Drag and drop	Native HTML5 Drag and Drop API
State & storage	React hooks + localStorage

---

Getting Started

Prerequisites

• Node.js 18 or higher
• npm

Setup

# 1. Navigate into the project folder
cd applitrack

# 2. Install dependencies
npm install

# 3. Start the development server
npm run dev

Then open http://localhost:5173 in your browser.

Build for production

npm run build

The output will be in the dist/ folder, ready to deploy on any static host (Vercel, Netlify, GitHub Pages).

---

Project Structure

applitrack/
├── index.html
├── package.json
├── vite.config.js
├── tailwind.config.js
├── postcss.config.js
└── src/
    ├── App.jsx                        # Root layout, state, search, import/export
    ├── main.jsx                       # React entry point
    ├── index.css                      # Tailwind directives and global styles
    ├── utils/
    │   ├── storage.js                 # localStorage CRUD, export/import helpers
    │   └── stats.js                   # Stats computation + STATUSES config
    └── components/
        ├── StatsBar.jsx               # Four metric cards (total, interview rate, offer rate, avg days)
        ├── KanbanBoard.jsx            # Drag-and-drop board orchestrator
        ├── KanbanColumn.jsx           # Individual droppable column
        ├── ApplicationCard.jsx        # Draggable application card
        ├── ListView.jsx               # Sortable table view with inline status select
        └── ApplicationModal.jsx       # Full add / edit modal form

---

Notes

• Drag a card from one column to another to update its status instantly
• Click any card or table row to open the full edit form
• The delete button in the edit form requires a second click to confirm — prevents accidental deletions
• Exported JSON files are compatible with the import feature for backup and device migration
• The stats bar updates in real time as you add or move applications

---

Developed by @TENARX0