Portfolio case study

JobFit AI · 职配智选

AI-powered resume matching, skill gap analysis, and bilingual career improvement assistant for junior developers and internship applicants.

AI route

OpenAI-compatible server route with mock fallback.

Privacy

No client-side AI key and no protected-attribute scoring.

Transparent scoring

Weighted readiness score with explanation.

Project overview and motivation

JobFit AI is a portfolio-grade AI SaaS demo for job seekers. I built it to show practical full-stack product thinking: structured AI output, transparent scoring, privacy messaging, bilingual UX, and a demo mode that works without external setup.

Problem and target users

Students and early-career applicants often paste the same resume into every role. They need honest feedback about relevant skills, missing keywords, project evidence, and interview preparation areas.

Solution and key features

The app compares resume text with a job description, calculates application readiness, explains the score, lists gaps, rewrites bullets safely, and generates interview questions.

AI workflow

All AI calls go through server-side API routes. The prompt forbids protected-attribute evaluation and unsupported fabrication. If AI_API_KEY is missing, a realistic mock analysis keeps the demo reliable.

Tech stack choices

Next.js App Router for routing, TypeScript for safety, Tailwind/shadcn-style components for UI, TanStack Query for server state, Recharts for analytics, Zod for validation, and OpenAI-compatible API support.

Privacy and security

Resume text is treated as sensitive. API keys never reach the browser. Demo mode avoids storing user input. Production plans include Supabase Auth, Prisma, PostgreSQL, and rate limiting.

Bias and fairness

The score represents application readiness, not hiring probability. The AI must not infer or score age, gender, race, nationality, religion, health, family status, or political views.

Lessons learned

The important design challenge was making the AI useful without turning it into a black box or a ghostwriter. Every rewritten bullet includes a reason and avoids adding claims the user cannot defend.

Architecture diagram

1Landing / Login / Dashboard UI
2Analyzer form with Zod validation
3POST /api/ai/analyze-match
4OpenAI-compatible provider or mock fallback
5Analysis result + shareable public page

Database design overview

UserResumeJobDescriptionAnalysisResumeSuggestionInterviewQuestionAiGenerationLog

Prisma schema is included for the full-stack upgrade. Phase 1 uses mock data to keep the public demo stable and recruiter-friendly.

AI-assisted development was used to plan architecture, generate component drafts, debug TypeScript issues, and improve bilingual documentation. Product direction, fairness rules, architecture, and final implementation decisions were reviewed and adjusted manually.