💼 Job Application Tracker

A modern, feature-rich web application to help job seekers organize and track their job applications. Built with TypeScript, HTML5, and CSS3, featuring a beautiful dark/light theme and interactive data visualizations.

✨ Features

Core Functionality

• ✅ Add Applications - Track company, role, status, date applied, and notes
• ✅ Edit Applications - Update any application details
• ✅ Delete Applications - Remove applications with confirmation
• ✅ Filter by Status - View applications by Applied, Interview, Offer, or Rejected
• ✅ Data Persistence - All data saved in browser's localStorage

UI/UX Features

• 🎨 Dark/Light Theme Toggle - Switch between themes with smooth transitions
• 📊 Interactive Statistics - Real-time stats cards showing application counts
• 📈 Data Visualization - Animated bar chart showing status distribution
• 🎯 Click-to-Filter - Click on stat cards to filter applications
• 📱 Responsive Design - Works beautifully on desktop, tablet, and mobile
• ✨ Modern Glassmorphism UI - Beautiful backdrop blur effects and gradients

Status Types

• 🕐 Applied - Initial application submitted
• 📅 Interview - Interview scheduled or completed
• ✅ Offer - Job offer received
• ❌ Rejected - Application rejected

📋 Prerequisites

• Modern web browser (Chrome, Firefox, Safari, Edge)
• TypeScript compiler (optional, for development)
• Basic understanding of HTML, CSS, and TypeScript/JavaScript

🛠️ Installation

Option 1: Quick Start (No TypeScript Compilation)

1. Clone or download the project

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

2. Open index.html in your browser

# On Windows
start index.html

# On macOS
open index.html

# On Linux
xdg-open index.html

Option 2: Development Setup (With TypeScript)

1. Install Node.js and npm (if not already installed)

   • Download from: https://nodejs.org/

2. Install TypeScript globally

npm install -g typescript

3. Clone the repository

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

4. Compile TypeScript

tsc app.ts

5. Open in browser

open index.html

Option 3: Auto-Compile During Development

# Watch for changes and auto-compile
tsc app.ts --watch

📁 Project Structure

job-application-tracker/
│
├── index.html          # Main HTML structure
├── styles.css          # All styling and themes
├── app.ts             # TypeScript source code
├── app.js             # Compiled JavaScript (generated)
├── README.md          # Project documentation
└── .gitignore         # Git ignore file (optional)

🎯 Usage Guide

Adding a New Application

1. Click the "➕ Add Application" button in the header
2. Fill in the required fields:
   • Company name (e.g., Google, Microsoft)
   • Role title (e.g., Software Engineer)
   • Status (Applied, Interview, Offer, Rejected)
   • Date Applied
   • Optional notes
3. Click "Add Application" to save

Editing an Application

1. Click the ✏️ edit icon on any application card
2. Modify the fields you want to change
3. Click "Update Application" to save changes

Deleting an Application

1. Click the 🗑️ delete icon on any application card
2. Confirm deletion in the popup dialog

Filtering Applications

Method 1: Click on any of the status filter buttons:

• All | Applied | Interview | Offer | Rejected

Method 2: Click directly on a statistics card to filter by that status

Switching Themes

• Click the ☀️/🌙 theme toggle button in the header
• Theme preference is automatically saved

💾 Data Storage

Where is Data Stored?

All application data is stored in your browser's localStorage:

• Storage Location: Local to your browser and device
• Capacity: Up to 5-10MB (more than enough for thousands of applications)
• Persistence: Data remains even after closing the browser
• Privacy: Data never leaves your computer

Viewing Stored Data

Chrome/Edge:

1. Press F12 → Application tab → Local Storage
2. Look for key: jobApplications

Firefox:

1. Press F12 → Storage tab → Local Storage
2. Look for key: jobApplications

⚠️ Important Notes

• Data is browser-specific (Chrome data won't show in Firefox)
• Data is device-specific (not synced across devices)
• Clearing browser data will delete all applications
• Use incognito/private mode cautiously (may not persist data)

🔧 Configuration

Customizing Colors

Edit styles.css to change theme colors:

/* Dark mode gradient */
body.dark-mode {
    background: linear-gradient(135deg, #0f172a 0%, #581c87 50%, #0f172a 100%);
}

/* Light mode gradient */
body.light-mode {
    background: linear-gradient(135deg, #dbeafe 0%, #fae8ff 50%, #fce7f3 100%);
}

/* Status colors */
.status-applied { color: #60a5fa; }
.status-interview { color: #facc15; }
.status-offer { color: #4ade80; }
.status-rejected { color: #f87171; }

Adding New Status Types

1. Update TypeScript interface in app.ts:

type Status = 'Applied' | 'Interview' | 'Offer' | 'Rejected' | 'YourNewStatus';

2. Add to HTML select in index.html:

<option value="YourNewStatus">Your New Status</option>

3. Add styling in styles.css:

.status-yournewstatus { 
    background: rgba(123, 456, 789, 0.2); 
    color: #yourcolor; 
}

🧪 TypeScript Types

Main Interfaces

interface JobApplication {
    id: string;
    company: string;
    role: string;
    status: 'Applied' | 'Interview' | 'Offer' | 'Rejected';
    dateApplied: string;
    notes?: string;
}

interface Stats {
    Applied: number;
    Interview: number;
    Offer: number;
    Rejected: number;
}

🎨 Design Features

• Glassmorphism Effects - Modern frosted glass aesthetic
• Smooth Animations - Transition effects on all interactions
• Gradient Backgrounds - Beautiful color gradients
• Hover States - Interactive feedback on all clickable elements
• Responsive Grid Layout - Adapts to any screen size
• Color-Coded Status - Visual status identification
• Icon Integration - Emoji icons for better UX

📱 Browser Compatibility

• ✅ Chrome 90+
• ✅ Firefox 88+
• ✅ Safari 14+
• ✅ Edge 90+
• ✅ Opera 76+

🚀 Future Enhancements

Potential features to add:

• Export data to CSV/JSON
• Import data from file
• Search functionality
• Salary tracking
• Application deadlines with reminders
• Interview rounds tracking
• Company research notes
• Contact person details
• Application timeline view
• Backend integration (Firebase/Supabase)
• Multi-device sync
• Email notifications
• Statistics and insights dashboard

🤝 Contributing

Contributions are welcome! Here's how you can help:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

My Contact

• GitHub: @Yatochi17
• LinkedIn: Muhamad Aqil Danial Bin Shahnizam

🙏 Acknowledgments

• Inspired by the job hunting process
• Built to help job seekers stay organized
• Designed with modern web development best practices

📧 Contact

Have questions or suggestions? Feel free to reach out:

• Email: aqildanial.17@gmail.com
• Create an issue on GitHub
• Connect on LinkedIn

---

⭐ If you find this project helpful, please give it a star on GitHub!

Made with ❤️ by Aqil