From Tab Chaos to Clarity: Building an AI-Powered Job Application Tracker

The Problem That Made Me Build This

Job hunting is exhausting, you spent hours searching for jobs, open 10+ tabs and hit apply to the jobs you think good for you, but then you come back the other day and don't even know where you applied.
Then you suddenly got an email that you are shortlisted (sometimes fraud) and you sit to recall when and where I applied for this job, don't have any idea about the job description, type, location or anything.
Sometimes you miss opportunities just because you didn't opened that particular one platform out of 15,
I was hanging in the same loop every day, every week.
I tried everything spreadsheets, online tool and many more (even the txt file at first) so then I realized I have to bring my dev instincts back, and I really built something useful that I use daily, JobFlow AI.

🛡️ What is JobFlow AI

JobFlow AI is like your relatives who keep eyes on everything you do using their connections (As jobFlow has it's Groq powered extension with multiple features) basically, it watches your job hunt so you don't have to.
It's a tool where you can save your jobs instantly keeping there records, from company name, role to the status and many more (Even the posted jobs URL).
It has an Extension that has AI features like,

• AI Match Score that compares your resume to the job description by just one click.
• Auto Scrapping that scraps all the details about the jobs by one click so we don't manually have to write everything.
• Cold email based on the Job role and your resume it generates a personalized cold email, so just copy and send it to the Founder, HR...

🔨 Building the Chrome Extension (the hardest part)

First of all why do I have to make an extension? Going to the main site every time I want to save a job and saving it manually is equals to writing them in a txt file, boring and time consuming, you might choose to not track the jobs over adding everything manually, so I needed to find a way so it can be a one click tool and actually time saving.


Then the easiest way to perform operations being on another site is extension just open click and save EASYYY.
well not that easy, it was the most difficult part of the entire project for me.
It has multiple features like AI Match Score, Auto Scrap and Cold email generator,
but the most difficult to build was AUTO SCRAPP.

Auto Scrap:

The feature scraps all the important information like job title, role, type, location and every important info so we don't have to type manually.


I looked at APIs like Jsearch and Serpapi but they either cost money, had rate limits, or returned garbage data I'd still have to clean. So I thought — why not just scrape it directly from the page the user is already on?
And decided to create everything from scratch,
so the question was how will I even make it? the first approach was using

• 1. CSS Selectors and DOM and it worked 😀, (Just for linkedin 😐). the problem was these selectors varies from site to site different on different platforms.

• 2. AI sending the entire page to AI can give you accurate information but it's not an efficient as it also sends some garbage and non essential stuff with your JD and it might mess with the token limit of the AI.

• SO I had to choose something, I Decided to go with the hybrid approach.
  CSS Selectors + AI that made it possible to work on any platforms.
  It sends just the header and description from the page (CSS Scrapping), so It doesn't scrap each field like #job-title (Nah bad Idea). It just sends header and description to AI, Thus no garbage just pure information that gives AI less data but important information so the AI can give accurate responses.
  And that's how I got 95%+ accuracy in scrapping jobs ;)
  
  

  🫂 Two Bodies one soul (JobFlow + Extension and One Backend)

  Now there are 2 frontend and one backend, so if user login to the main site the extension has no clue. So should I create a 2 different sign in system for both? or should I store the token in the local Storage?
  Both sounds terrible, because local Storage doesn't provide any security so javascript can easily get the information about the token, and that's not a user will expect.
  SO what can help? Cookies ,cookies aren't allowed to get via javascript and solves the problem and provide shared session using sameSite: none and secure: true.
  so we don't have to login to twice, just login once in main and the extension will get the token from cookies.
  So Login to JobFlow -> use the extension
  
  

  🧠 AI Layer

  AI isn't only to help the extension scrap the job details, it's also to give feedback, compares your resume (Resume will be uploaded in the main site after signing in just once but you can always update it 😏), and also generate cold emails for you.

  Why Groq?

  There are several AIs available but why Groq? I was going for GEMINI but to be honest (it was not that good as I thought sadly), the responses are very good but the only problems comes is speed, request per day or token (it's slow and less tokens as well).

That's why I had to choose something that can be actually fast (not waiting 1 minute just to see if my resume matches or not).
And then how can I forget Groq, I have already used it and already impressed about how fast it was and how good the responses were.
Here are the few things that I considered while using GROQ:

const chatCompletion = await groq.chat.completions.create({
        messages: [{ role: "user", content: prompt }],
        model: "llama-3.3-70b-versatile",
        response_format: { type: "json_object" },
        temperature: 0.3
});

• Model I used llama-3.3-70b-versatile that is a free, fast and gives around 30 request per minute.
• Response return type must be JSON to get the correct data, if I get any other text format then it might break the AI analysis. so I forced it only to send the JSON data.
• Temperature that sets the structure more consistent and not too creative.
• Prompt : and how can I forget writing a clear prompt so the AI can return something useful not garbage.

And that's how I was able to use AI to create important features that actually helps job hunting easy not just creating a simple CRUD app.
Now it gives feel good Scores from 0-100.

🛠️ Tech Stack

• Frontend: React.js, Tailwind CSS, Context API, Vite, Lucide React
• Backend: Nodejs, ExpressJs, MongoDB(Mongoose)
• AI Engine: Groq API (Llama 3-70B), Prompt Engineering
• Extension: Manifest V3, Chrome Scripting API, Shadow DOM
• Deployement: Render (Backend), Vercel (Frontend)

🚀 Try it out!

That's JobFlow AI — built out of frustration at 2am, used daily, and finally documented 😄
The extension isn't on the Chrome Web Store yet, but you can:

📹 Watch the full demo above
⭐ Star the repo and follow the README to run it locally
🤝 Contribute if you want to help get it on the Web Store!

🔗 Links:

🌐 Live Demo → https://job-flow-ai-three.vercel.app/
💻 GitHub → https://github.com/Aryan-404-404/JobFlow-AI

If you're currently managing 15 tabs of job applications and a prayer — I built this for you. 🫡
Drop a comment below 👇 what feature would YOU want next? Cover letter generator? Auto-apply?
Happy Coding 🙂