Maniesta Career OS — Dev.to Article + LinkedIn + Twitter
Yeh sab ready hai. Pehle Dev.to article publish karo, phir LinkedIn aur Twitter pe share karo (URL ke saath).
1️⃣ Dev.to Article — Complete Content
Copy karo, apne naam se publish karo. Yeh placeholders nahi hain, full content hai.
# How I Built Maniesta Career OS: An AI-Powered Resume Builder and Job Matching Platform
Job hunting is broken. You spend hours crafting a resume, submit it to dozens of listings, and never hear back. Most of the time, an Applicant Tracking System (ATS) rejects your application before a human ever sees it.
I wanted to fix that. So I built **Maniesta Career OS** — an AI-powered career platform that generates ATS-optimised resumes, matches you with relevant jobs daily, and gives admins a full dashboard to manage it all.
🔗 **Live Demo:** [maniesta-career.netlify.app](https://maniesta-career.netlify.app/)
This post walks through how I designed the system, the technical decisions behind the AI integration, and the parts that were harder than expected.
---
## The Problem
Three problems, one platform:
1. **Resumes fail ATS filters.** Most job seekers write resumes without knowing how ATS parsers read them. Keywords matter, structure matters, and formatting can make or break a submission.
2. **Job matching is manual.** People scroll through dozens of job boards, hoping something sticks. There's no intelligent filtering — just endless lists.
3. **Career tools are fragmented.** Resume builders, job boards, application trackers, and career dashboards all live in different apps. Users context-switch constantly.
Maniesta Career OS combines all three into one product.
---
## Tech Stack Decisions
Here's what I picked and why:
- **React** — component-driven UI, easy to iterate on the AI dashboard and admin views
- **TypeScript** — non-negotiable for a project with this many data shapes (users, resumes, jobs, applications, admin sessions)
- **Vite** — fast dev server, instant HMR, cleaner build output than CRA
- **Firebase** — authentication, Firestore database, and cloud functions in one SDK; also easy to deploy
- **Tailwind CSS** — for rapid UI on the admin dashboard and resume editor
- **Gemini AI** — for resume content generation, ATS-optimisation suggestions, and job matching signals
The combination of Firebase + Gemini means I could ship an MVP quickly without running my own backend infrastructure.
---
## Architecture Overview
┌──────────────────┐
│ React Client │
│ (User + Admin) │
└────────┬─────────┘
│ HTTPS + Firebase Auth
▼
┌──────────────────┐
│ Firebase │
│ - Auth │
│ - Firestore │
│ - Cloud Fn │
└────────┬─────────┘
│
▼
┌──────────────────┐
│ Gemini AI API │
│ (Resume + Jobs) │
└──────────────────┘
Two distinct user journeys live in the same app:
- **Job seekers** build resumes, view matched jobs, and track applications.
- **Admins** manage users, monitor AI usage, and review the pipeline.
Both share the same Firebase backend, but the UI diverges sharply — which is why TypeScript saved me here.
---
## The Core: AI Resume Generation
When a user creates a resume, they provide raw details — job history, education, skills. The AI layer does three things:
1. **Rewrites bullet points** into achievement-focused language that ATS parsers read well.
2. **Suggests missing keywords** based on the target job title.
3. **Scores the resume** against ATS best practices.
The prompt engineering mattered more than the API call itself. Here's the shape of the function that generates suggestions:
typescript
// services/ai.ts
import { getGenerativeModel } from 'firebase/ai';
const model = getGenerativeModel(ai, { model: 'gemini-pro' });
export const generateResumeSuggestions = async (input: ResumeInput) => {
const prompt = `
You are an ATS optimisation assistant. Rewrite the following bullet
points into achievement-focused language. Preserve all facts.
Rules:
- Start each bullet with a strong action verb
- Quantify impact where numbers are given
- Keep each bullet under 20 words
- Do not invent metrics or experiences
Bullet points:
${input.bullets.map((b, i) => `${i + 1}. ${b}`).join('\n')}
Return a JSON array of the rewritten bullets in the same order.
`;
const result = await model.generateContent(prompt);
return JSON.parse(result.response.text());
};
The key constraint I enforced: **the AI never invents facts.** It rewrites, reorganises, and suggests keywords — but it does not fabricate experiences or metrics. This was important for user trust.
---
## Daily Job Matching
Once a resume is saved, Maniesta Career OS runs a daily job match:
1. A scheduled Cloud Function runs every 24 hours.
2. For each user with an active resume, it fetches fresh job listings.
3. It computes a match score using the resume's keywords, the user's preferred location, and past applications.
4. It stores the top matches in Firestore.
5. The user sees them the next time they open the app.
The scoring is simple but effective — a weighted keyword overlap:
typescript
const computeMatchScore = (resume: Resume, job: Job): number => {
const resumeKeywords = new Set(resume.keywords.map(k => k.toLowerCase()));
const jobKeywords = job.tags.map(t => t.toLowerCase());
const overlap = jobKeywords.filter(k => resumeKeywords.has(k)).length;
const keywordScore = overlap / Math.max(jobKeywords.length, 1);
const locationScore = job.location === resume.preferredLocation ? 1 : 0.4;
const recencyScore = Math.max(0, 1 - job.ageInDays / 30);
return keywordScore * 0.6 + locationScore * 0.25 + recencyScore * 0.15;
};
Not fancy, but the weighting reflects real user behaviour — keywords matter most, then location, then freshness.
---
## The Admin Dashboard
Admins get a glassmorphism-styled dashboard with:
- **User management** — search, filter, deactivate accounts
- **Usage analytics** — daily AI calls, match rates, resume completion rates
- **Job pipeline** — how many jobs are being matched, which ones convert
- **System health** — Firebase usage, function invocations, error rates
The glassmorphism UI was a deliberate choice. It reads well on dark backgrounds and makes dense dashboards feel less clinical.
---
## Challenges I Didn't Expect
**1. TypeScript with Firestore generics.**
Firestore's type system is flexible but easy to loosen too much. I ended up defining strict schema types and a `withConverter` helper for every collection. Retrofitting this halfway through was painful.
**2. Prompt injection in resume content.**
Users can write anything in their resume bullets. A malicious user could try to make the AI produce unrelated content. I sanitise all user input before it hits the prompt — strip markdown, cap length, reject control characters.
**3. Firebase read costs.**
The daily job matching creates a lot of reads. I ended up using Firestore's batch writes and index tuning to keep reads under control. Real cost optimisation, not just code cleanliness.
---
## What I Learned
- **AI is a feature, not the product.** The value is in the workflow around the AI, not the AI itself.
- **TypeScript pays off at scale.** At 3 files you don't need it. At 60 files with 15 data shapes, it saves hours.
- **Prompt engineering is real engineering.** Bad prompts produce confidently wrong output.
- **Firebase is fast to start and slow to optimise.** Plan for cost from day one.
- **Glassmorphism looks good on dashboards** — it reduces visual fatigue in dense data views.
---
## Try It Out
- 🔗 **Live Demo:** [maniesta-career.netlify.app](https://maniesta-career.netlify.app/)
- 💻 **Source Code:** [github.com/usmannmurtazaa/Maniesta-careeros](https://github.com/usmannmurtazaa/Maniesta-careeros)
You can create a resume, see the AI suggestions, and view matched jobs. The admin side is behind authentication but the workflow is visible from the user side.
---
## What's Next
A few features in progress:
- **Application tracking** — a Kanban-style board for submitted applications
- **Interview prep** — AI-generated mock questions based on matched jobs
- **Resume versioning** — A/B test different resume versions against the same job set
- **Multi-language support** — resume generation in Urdu, Arabic, and Spanish
---
## About the Author
I'm **Usman Murtaza**, a Full Stack Developer based in Karachi, Pakistan. I build modern web applications with React, TypeScript, Node.js, and Firebase, and I'm the creator of the **Maniesta ecosystem** — a collection of web products and utilities.
**Maniesta Career OS** is one of those products. Others include Maniesta Campus, Maniesta Suite, Maniesta Veyra, and the Maniesta brand platform.
- 🌐 **Portfolio:** [usmanmurtaza.netlify.app](https://usmanmurtaza.netlify.app)
- 💻 **GitHub:** [github.com/Usmannmurtazaa](https://github.com/Usmannmurtazaa)
- 💼 **LinkedIn:** [linkedin.com/in/Usmannmurtazaa](https://www.linkedin.com/in/Usmannmurtazaa/)
- 🐦 **Twitter/X:** [@usman_murtazaa](https://twitter.com/usman_murtazaa)
If you found this useful, follow me here on Dev.to — I write about full-stack development, AI-assisted applications, and building products from scratch.
*Built by Usman Murtaza — see more projects at [usmanmurtaza.netlify.app](https://usmanmurtaza.netlify.app)*
Top comments (0)