🚀 Smart Job Tracker Dashboard

A professional-grade SaaS frontend productivity tool designed to help users track, monitor, and analyze their job search process. Built to fulfill a comprehensive Product Requirements Document (PRD), this application demonstrates advanced React architecture, complex state management, and an award-worthy dual-theme user interface.

---

🎯 The Problem & Target Audience

The Problem

Job seekers today apply to dozens or even hundreds of jobs across platforms such as LinkedIn, company career pages, referrals, and job boards. Managing this volume manually leads to critical failures:

• Forgetting application details and locations.
• Missing interview schedules and follow-ups.
• Lacking visibility into job search progress (e.g., Conversion rates).
• Having difficulty comparing offers or salary ranges geographically.

Most candidates rely on spreadsheets or physical notes, which lack automation, rapid filtering, visual analytics, and proper stage organization.

The Solution

This project centralizes the job tracking experience into a highly responsive, visually stunning React dashboard. It simulates a real SaaS productivity tool by offering dynamic searches, rich dashboard metrics, status categorizations, and persistent data storage.

Who is this for?

• University Students applying for campus placements.
• Professionals / Developers switching jobs or tracking curated leads.
• Freelancers monitoring multiple concurrent project inquiries.

---

✨ Core Functional Requirements & Features

The application fulfills 8 specific functional pillars mandated by the PRD:

1. Add Job Application

A robust form engine built with react-hook-form and validated by yup.

• Fields Captured: Company Name, Job Role, Location, Salary Range, Platform, Status, Dates, and customized Markdown Notes.
• Validation Guards: Enforces rigid rules for required fields (Company, Role, Date).

2. View Applications List

A dynamic layout displaying all applications.

• Features semantic UI cards showing Company initialization logic, roles, and status badges.
• Integrated actions on every card: Edit, Delete (via customized Framer Motion warning modals), and Bookmark.

3. Modular Search Architecture

Users can search by Company Name or Role through a dedicated, isolated search engine.

• Component Extraction: Search logic is encapsulated in a standalone SearchBar component for better separation of concerns.
• Search Performance: Implements a custom useDebounce hook (500ms) to drastically reduce render cycles, ensuring filtering only happens after the user pauses typing.

4. Advanced Filtering & Sorting

• Filters: Isolates views by Status (Applied, Interviewing, Offer, Rejected), Platform, and Location Types.
• Sorting Engine: Sort applications dynamically by Applied Date, Salary (High/Low), or Alphabetically by Company Name.

5. Categorized Job Pipeline (Tabs)

Applications can be isolated using Pipeline Tabs directly in the UI, separating the noise of rejected roles from critical active interviews.

6. Dashboard Analytics

A dedicated analytics view acting as the control center.

• Key Metrics: Total applications, Interview rates, Offer conversion rates, and Maximum vs Average Salaries.
• Visual Data: Integrated Recharts library rendering Pie Charts (Application Stages) and Bar Charts (Monthly application cadence).
• Mock API Integration: Seeds the environment with initial sample data fetched asynchronously from https://dummyjson.com/products using Axios, transforming external brand/product data into job application contexts.

7. Dual-Aesthetic UI Engine (Bonus Feature)

• 🌙 Cyber-Terminal Dark Mode: Custom data-heavy design featuring layered green depth.
• ☀️ Editorial Neo-Brutalism Light Mode: Highly contrasting borders and harsh shadows.

8. Distraction-Free Markdown Reader (Bonus Feature)

Dedicated Details page with Markdown support to render long-form external Job Descriptions beautifully.

---

🧠 React Concepts Used (And What They Mean)

This project was built to master modern React architecture. Here are the precise concepts utilized:

1. The Context API (ApplicationContext.jsx)

• What it means: Normally in React, to pass data from a parent component to a deeply nested child, you have to pass it through every component in between (called "Prop Drilling"). The Context API creates a "global broadcast" bubble.
• How it's used: We use ApplicationContext to hold our grand array of job data and the current Theme setting. Now, the Sidebar can access the total application count, and the Dashboard can access the charts data, without passing props.

2. Custom Hooks (useLocalStorage, useApplications, useDebounce)

• What it means: Hooks are functions that let you "hook into" React state and lifecycle features. Custom hooks let you package complex logic into a single reusable function.
• How it's used:
  • useLocalStorage intercepts all calls to update our React applications state and automatically saves a duplicate stringified copy to the browser's persistent localStorage.
  • useDebounce limits how often a search query updates the UI, preventing lag while typing.

3. Deep Component Composition

• What it means: Breaking a massive user interface into tiny, hyper-focused puzzle pieces that combine to make the whole.
• How it's used: Instead of putting 200 lines of chart code inside Dashboard.jsx, we built <PipelineDonut /> and <MonthlyBarChart />. This makes the Dashboard file clean and allows us to reuse the exact same Pie chart on the Analytics.jsx page.

4. Dynamic Routing & useParams

• What it means: React Router swaps out components based on the URL in the browser bar.
• How it's used: We created a dynamic route: /applications/:id. When the user clicks a job card, the JobDetails component reads that :id from the URL using the useParams() hook, looks up that specific job, and renders the data.

5. Asynchronous Data Fetching & Web APIs

• What it means: React applications often need to pull data from external servers. This happens "asynchronously" so the screen doesn't freeze while waiting for the internet.
• How it's used: We use Axios within an useEffect hook to pull 12 sample products from the DummyJSON API. We then "map" this product data (Brand, Title, Price) into our Job Application format to seed the dashboard with realistic data on first load.

6. Advanced useCallback & Performance

• What it means: useCallback caches a function so it isn't wastefully recreated every time the screen updates.
• How it's used: Wrapped our global search and form submission handlers to guarantee maximum React performance and avoid infinite rendering loops.

---

🏗️ The Making of JobTracker (How to build this project)

If you are learning React and want to understand how this application was constructed from scratch, here is the architectural sequence:

Phase 1: Skeleton & Routing

1. Bootstrapped the application using Vite (npm create vite@latest).
2. Installed react-router-dom.
3. Created a basic layout (App.jsx) with a static <Sidebar /> on the left and a dynamic <main> area filling the remaining space using CSS Flexbox.
4. Mapped routes (/dashboard, /applications, /analytics, etc.) to empty placeholder components.

Phase 2: The Global Brain & Persistence

1. Created ApplicationContext.jsx to hold the master applications array.
2. Built the useLocalStorage.js hook to ensure the array is read from and saved to window.localStorage automatically on every state change.
3. Created a robust API utility (api.js) to format dates, parse currencies, and hold the initial seed logic.

Phase 3: Total Design System Architecture

1. Constructed index.css strictly using CSS Variables (Tokens).
2. Defined explicit variables for Backgrounds, Accents, text, and standard Borders.
3. Added the [data-theme="light"] wrapper in CSS to aggressively overwrite the variables purely via CSS, completely decoupled from Javascript logic.

Phase 4: Building the Engines (Views)

1. Forms: Created the AddApplication form utilizing react-hook-form.
2. The Components: Built JobCard to render individual entries, passing specific application data down as props.
3. The Data Views: Wired Recharts into Dashboard and Analytics. Filtered the Context array using logic like applications.filter(a => a.status === 'Offer').length.
4. Dynamic Detail Page: Built the JobDetails.jsx component integrating react-markdown to parse formatted job descriptions.

Phase 5: Polish & Motion

1. Installed framer-motion and react-icons.
2. Wrapped the router in AnimatePresence for smooth page transitions.
3. Applied motion.div with spring mechanics to our custom ConfirmModal to make dangerous actions feel weighty and premium.

---

🧭 Page Architecture & Routing Map

Route	Component	Purpose
/dashboard	Dashboard.jsx	High-level widgets, recent activity, tip-of-the-day.
/applications	Applications.jsx	Master list featuring search, filter, and sort implementations.
/applications/new	AddApplication.jsx	Reusable Form interface for creating entries.
/applications/:id	AddApplication.jsx	Overloaded Form interface for editing existing entries.
/applications/:id/details	JobDetails.jsx	Distraction-free reading view for Markdown job descriptions.
/analytics	Analytics.jsx	Deep charts and KPI breakdowns.
/bookmarks	Bookmarks.jsx	Filtered aggregate of all favored roles.

---

💾 Data Model

The application utilizes the following strict JSON schema structure for every logged job:

{
 "id": "GOOGLE-SWE-1",
 "company": "Google",
 "role": "Software Engineer",
 "location": "Remote",
 "salary": 140000,
 "currency": "USD",
 "platform": "LinkedIn",
 "status": "Interviewing",
 "appliedDate": "2026-03-15",
 "interviewDate": "2026-03-30",
 "notes": "**Focus heavily on System Design**\n- Need to review load balancing.",
 "bookmarked": true
}

---

📦 NPM Packages & Tech Stack

Package	Purpose in Project
react-router-dom	Handles all SPA view transitions and URL parameter extraction (useParams).
react-hook-form	Registers inputs securely without triggering hundreds of re-renders per keystroke.
yup	Intercepts form submissions to enforce strict schema validation.
recharts	Transforms raw job data into dynamic, responsive SVG graphics.
framer-motion	Drives the liquid transitions, modal springing, and physical element behaviors.
react-icons	Injects infinitely scalable, colorable SVG icons directly into components.
react-markdown	Parses users' raw text notes into beautiful formatted lists and bold text.
date-fns	Safely parses and formats date strings natively.
axios	Preconfigured for API integrations defined in phase 2.

---

📂 Project Folder Structure

src/
├── components/
│   ├── Charts/
│   │   ├── MonthlyBarChart.jsx
│   │   └── PipelineDonut.jsx
│   ├── ConfirmModal.jsx
│   ├── JobCard.jsx
│   ├── SearchBar.jsx
│   ├── Filters.jsx
│   └── Sidebar.jsx
├── context/
│   └── ApplicationContext.jsx
├── hooks/
│   ├── useApplications.js
│   ├── useDebounce.js
│   └── useLocalStorage.js
├── pages/
│   ├── AddApplication.jsx
│   ├── Analytics.jsx
│   ├── Applications.jsx
│   ├── Bookmarks.jsx
│   ├── Dashboard.jsx
│   └── JobDetails.jsx
├── services/
│   └── api.js                  (Mock data generator / Axios routing)
├── utils/
│   └── helpers.js              (ID generator, Date formatters)
├── App.jsx                     (Layout logic & Router wrapper)
├── index.css                   (Total CSS Variable Design System)
└── main.jsx

---

🚀 Upcoming Features (Roadmap)

Future developments to turn this frontend into a Full-Stack monolith:

• Backend Database Migration: Replace browser localStorage with a Node.js/Express + PostgreSQL backend.
• Authentication: Secure Login/Signup via JWT logic or OAuth (Google/GitHub).
• Kanban Board View: A drag-and-drop Trello-style board (Applied ➔ Interviewing ➔ Offer).
• Browser Extension: A companion Chrome Extension to automatically scrape job details directly from LinkedIn.
• AI Resume Alignment: Allowing the user to upload a PDF Resume and compare it to Job Descriptions for an "Alignment Score".

---

🏆 Project Evaluation Criteria Addressed

This project successfully fulfills the standard Software Engineering evaluation metrics outlined in the primary PRD:

• React Architecture (25%): Implemented strict context separation, custom hooks, and isolated component folders.
• Feature Completeness (25%): 100% of PRD mandates fulfilled, including Asynchronous Mock API fetching and Markdown Support.
• State Management (20%): Eliminated manual prop-drilling with Context API synced smoothly with Local Storage.
• UI/UX Quality (15%): Constructed a premium dual-identity, accessible CSS architectural system. Added framer-motion for UX weight.
• Code Quality (15%): Clean separation of utility logic, reusable styling tokens, and strongly enforced linting rules.

---

💻 Running the Project Locally

1. Clone the repository:

git clone https://github.com/yourusername/job-tracker.git

2. Navigate & Install dependencies:

cd Job-Tracker
npm install

3. Run the blazing fast development server:

npm run dev