JobTrackr is a full-stack MERN application engineered to streamline the entire job search workflow. From application submission to interview scheduling and final outcomes, JobTrackr delivers real-time analytics, status pipelines, customizable filtering, and a modern user experience with seamless dark and light mode support.
-
📊 Comprehensive Analytics & Data Visualizations
- Interactive monthly application trends with toggleable Area Charts and Bar Charts.
- Real-time Doughnut / Status Breakdown Charts comparing pending, interview, accepted, and declined counts.
- KPI Stat summary cards with responsive hover elevation.
-
💼 End-to-End Application Tracking
- Create, view, edit, and delete job applications with company, position, status, job location, and job type.
- Distinct status pill badges with subtle dot indicators (
Pending,Interview,Accepted,Declined).
-
🔍 Smart Search & Multi-Parametric Filtering
- Instant debounced keyword search across job titles and companies.
- Multi-criteria filtering by Status (
all,pending,interview,accepted,declined), Type (all,full-time,part-time,internship), and Sort Order (latest,oldest,a-z,z-a). - One-click filter reset.
-
🌓 Dynamic Dark & Light Mode
- Seamless theme switcher with persistent local storage preferences and smooth transitions.
- Custom-tailored slate palettes and glassmorphic UI elements across all themes.
-
🔐 Robust Authentication & Security
- Secure JWT authentication stored in HTTP-only cookies.
- Password hashing via
bcryptjs, request validation, and sanitization. - Interactive password visibility toggles on login and registration forms.
-
🛡️ Advanced System Administration & Platform Intelligence
- Executive KPI Dashboard: Total registered candidates, tracked jobs, interviews scheduled, and pending submissions.
- Platform Application Velocity: Monthly interactive trend visualization with Area/Bar toggle.
- Global Status & Contract Breakdown: Real-time Doughnut chart distribution and percentage progress metrics.
- Recruitment Insights Leaderboards: Top target companies and top application locations.
- User & Activity Directory: Candidate registry roster and live platform-wide application feed.
- Report Exporting: One-click print/export summary reports.
-
👤 User Profile & Avatar Uploads
- Update personal information and profile photos with cloud storage powered by Cloudinary and Multer.
-
📱 Fully Responsive Design
- Tailored for all viewports from mobile smartphones to ultra-wide desktop monitors.
- Framework: React 18 with Vite
- Styling: Styled Components + Modern CSS3 Design Tokens
- State & Server Cache: @tanstack/react-query
- Routing: React Router DOM v6 (Data APIs & loaders/actions)
- Charts & Data Viz: Recharts
- Icons: React Icons (Feather, FontAwesome, Bootstrap, Material Design)
- Notifications: React Toastify
- Dates: Day.js
- Runtime: Node.js & Express.js
- Database: MongoDB via Mongoose ODM
- Authentication: JSON Web Tokens (JWT) & bcryptjs
- Security: Helmet, express-mongo-sanitize, express-rate-limit, cookie-parser
- File Uploads: Multer, Cloudinary, Datauri
- Validation: express-validator
Make sure you have installed:
- Node.js (v16.0 or higher recommended)
- MongoDB (Local instance or MongoDB Atlas cluster connection URI)
- Cloudinary Account (Free account for profile avatar uploads)
git clone https://github.com/Timothy970/Job-Tracker.git
cd Job-Tracker# Install root (backend) dependencies
npm.cmd install
# Install client (frontend) dependencies
npm.cmd --prefix client install# Convenience script to install both root and client dependencies
npm run setup-projectCreate a .env file in the root directory:
cp .env.example .envConfigure the following variables in your .env file:
PORT=5100
NODE_ENV=development
MONGO_URL=mongodb+srv://<username>:<password>@cluster.mongodb.net/JobTrackr?retryWrites=true&w=majority
JWT_SECRET=your_jwt_super_secret_key_here
JWT_EXPIRES_IN=1d
CLOUD_NAME=your_cloudinary_cloud_name
CLOUD_API_KEY=your_cloudinary_api_key
CLOUD_API_SECRET=your_cloudinary_api_secretRun both the backend server and frontend development server simultaneously with hot reloading:
# Windows
npm.cmd run dev
# macOS / Linux
npm run dev- Frontend Client: http://localhost:5173
- Backend API Server: http://localhost:5100
To populate your dashboard with mock jobs data for testing:
- Register a new user in the app with the email:
john@gmail.com. - Stop the running server (
Ctrl + C). - Run the seed script:
node populate.js
- Restart the server (
npm.cmd run devornpm run dev) and sign in asjohn@gmail.comto explore the populated dataset.
To build the client bundle and run the unified Express production server:
# Build frontend and prepare production dependencies
npm.cmd run setup-production-app # On Windows
# or: npm run setup-production-app # On Linux/macOS
# Start unified server
npm.cmd startThe full application will be served at http://localhost:5100/.
| Method | Endpoint | Description | Access |
|---|---|---|---|
POST |
/api/v1/auth/register |
Register a new user | Public |
POST |
/api/v1/auth/login |
Authenticate user & issue JWT cookie | Public |
GET |
/api/v1/auth/logout |
Clear auth token cookie | Authenticated |
GET |
/api/v1/users/current-user |
Get logged-in user profile | Authenticated |
PATCH |
/api/v1/users/update-user |
Update profile info & avatar | Authenticated |
GET |
/api/v1/users/admin/app-stats |
Get overall user and job counts | Admin Only |
GET |
/api/v1/jobs |
Get paginated & filtered jobs list | Authenticated |
POST |
/api/v1/jobs |
Create a new job application | Authenticated |
GET |
/api/v1/jobs/:id |
Get single job details | Authenticated |
PATCH |
/api/v1/jobs/:id |
Update job application details | Authenticated |
DELETE |
/api/v1/jobs/:id |
Remove a job application | Authenticated |
GET |
/api/v1/jobs/stats |
Get application metrics & monthly trends | Authenticated |
Job-Tracker/
├── client/ # Frontend React application (Vite)
│ ├── public/ # Static public assets
│ ├── src/
│ │ ├── assets/ # Wrappers (styled-components), images, SVG icons
│ │ ├── components/ # Reusable UI components (Navbar, Sidebar, Charts, etc.)
│ │ ├── pages/ # Route pages (Landing, Login, Register, Dashboard, Stats, etc.)
│ │ ├── utils/ # Axios customFetch instance, nav links, constants
│ │ ├── App.jsx # React Router configuration & query client provider
│ │ ├── index.css # Modern design tokens, variables, & global styling
│ │ └── main.jsx # React root entry point
│ ├── index.html # HTML shell & font imports
│ ├── package.json # Client dependencies
│ └── vite.config.js # Vite configuration & backend proxy
├── controllers/ # Express request handlers (auth, jobs, user)
├── errors/ # Custom error classes (Bad Request, Unauthenticated, etc.)
├── middleware/ # Auth verification, error handling, validation, multer
├── models/ # Mongoose schemas (JobModel, UserModel)
├── routes/ # Express route declarations (auth, jobs, user)
├── utils/ # Constants, password hashing, token creation
├── .env.example # Sample environment configuration
├── populate.js # Mock database seeding script
├── server.js # Main Express application entry point
├── package.json # Backend dependencies & root run scripts
└── README.md # Project documentation
-
Short Description:
🚀 A modern full-stack MERN application to organize, monitor, and visualize job search pipelines with real-time analytics, filtering, and light/dark mode.
-
Repository Topics / Tags:
react,nodejs,express,mongodb,mern-stack,vite,styled-components,react-query,recharts,job-tracker,job-search,dashboard,jwt-authentication,data-visualization,dark-mode
This project is licensed under the ISC License.