PROJECTS         ABOUT          LAB  



JobTrip


2025
Website






JobTrip is an intelligent job application tracking system that helps job seekers manage their job search in a structured and efficient way.
It combines a browser extension and a web application to automatically capture job postings from major recruitment platforms and centralize all application data in one place.

The project includes:
  • a user-friendly UI for reviewing, editing, and tracking application progress,
  • a robust backend for data storage, synchronization, and business logic,
  • support for JSON export and API output to enable integration with external tools, dashboards, or analytics workflows,
  • and a testing setup to ensure reliability and maintainability across core features.

By automating job data collection and providing clear tracking and export capabilities, JobTrip helps users stay organized, reduce manual work, and make better decisions throughout their job search journey.

My contribution:
In this project, I drove the end-to-end development of both the JobTrip browser extension and its backend infrastructure. On the extension side, I built the side panel UI (search filters, location selectors, progress overlay, and result cards), implemented the multi-platform scraping workflows, and developed the data export pipeline for local JSON downloads and secure API submissions with token-based authentication.

For the backend, I architected the RESTful APIs (Express) and designed the MongoDB database schemas to manage robust job data ingestion and retrieval. Additionally, I wrote and maintained comprehensive Jest test suites for key modules—including panel logic, background/content scripts, and core services—to ensure high system reliability.



🔗 Live Demo: https://jobtrip.draven.best/
︎ Github: https://github.com/DravenTJU/Job-Trip/tree/main


Role in the project: Full-stack Developer ,Chrome extension Developer







JobTrip Chrome Extension



Landing Page
Job Tracking Page


AI CV & Cover Letter Page




Extension Internal Architecture



This diagram illustrates the data flow architecture of our browser extension.

First, a content script is injected into job platforms such as LinkedIn. The script executes jobScrapers.js to extract structured job information directly from the webpage DOM.

The extracted data is then transmitted to the background service using chrome.runtime.sendMessage. The background script manages the application state, persists the job data, and forwards the processed information to the side panel interface.

Finally, panel.js receives the data payload and dynamically updates the UI, enabling users to view and interact with the extracted job listings in real time.



Data Export Flow & Backend Integration


Export flow (Extension ↔ Backend Communication)
  1. User scrapes jobs in the Side Panel (panel.js stores results in scrapedJobs).
  2. storageService.getUserToken() reads localStorage.token from an open JobTrip frontend tab (via chrome.scripting.executeScript).
  3. If no token is found, the extension opens the frontend login page and prompts the user to sign in.
  4. Side Panel sends a batch request to the backend.
  5. On success, a new tab opens the frontend job list (/jobs).

API endpoint
Method
POST
Path
/api/v1/jobs
Auth
Authorization: Bearer <JWT>

All job routes are protected by protect middleware.


other projects:
Copyright © 2024 KUOCHUNGHSUAN.COM
z0935323866@gmail.com    ︎ ︎