AI Resume Analyzer

react typescript tailwindcss puter.js claude-sonnet
GitHub

AI-Powered Resume Analyzer: How I Built a Serverless Job Search Game-Changer

The Problem

Every job seeker faces the same painful reality: you send your resume into the void and hear nothing back. Why? Your resume might not match the ATS (Applicant Tracking System), or it might not align with the job description. Getting real-time, AI-powered feedback on your resume before submitting it could transform your job search success rate.

This is the problem I set out to solve.

The Solution: A Serverless AI Resume Analyzer

I built an intelligent resume analyzer that provides real-time ATS scores and personalized feedback—without requiring any backend infrastructure. Using Puter.js, a revolutionary serverless platform, I created a completely cloud-native solution that costs nothing to operate.

Key Features That Make It Special

Smart Resume Upload — Users simply drag and drop their PDF resume, and the app instantly generates a thumbnail preview for easy browsing.

AI-Powered Analysis — Upload your resume and paste a job description. Within seconds, Claude Sonnet AI analyzes how well your resume matches the position, providing a comprehensive breakdown.

ATS Score Calculation — Get a clear 0-100 score showing your resume’s effectiveness. The scoring covers four critical dimensions: Tone & Style, Content Quality, Structure & Format, and Skills Matching.

Detailed Feedback — The AI doesn’t just give you a score—it provides actionable suggestions in each category. See what you’re doing well and exactly what to improve.

Cloud Storage & History — All your analyzed resumes are stored securely in the cloud. Review previous analyses, compare feedback across applications, and track your progress.

Instant Deployment — Deploy to Puter’s app store with a simple drag-and-drop. No servers to manage. No deployment pipelines. No DevOps headaches.

The Architecture: Why Puter.js Changes Everything

Traditional web app architecture requires managing servers, databases, authentication systems, and deployment pipelines. I decided to challenge that with Puter.js—a serverless platform that provides everything you need out of the box.

Authentication — OAuth login through Puter handles user sessions securely without any backend code.

Cloud Storage — Upload PDFs and generated thumbnails directly to Puter’s cloud storage. Automatic thumbnail generation converts PDFs to images for quick previews.

AI Integration — Access multiple AI models (Claude Sonnet, GPT-4, Grok) without managing API keys or juggling different providers. Puter abstracts the complexity.

Key-Value Database — Store resume metadata, ATS scores, and feedback in Puter’s fast, reliable KV store. No SQL queries, no schema migrations—just simple data persistence.

Zero Infrastructure Costs — The user-pays model means I pay nothing to run the app. As the user base grows, I don’t incur additional hosting costs.

The Tech Stack

Frontend Framework — React 19 with the latest concurrent features, paired with React Router v7 for modern client-side routing and data loading.

Styling — Tailwind CSS v4 for utility-first design with custom gradients and animations that create a polished, professional interface.

PDF Processing — pdf.js-dist handles PDF rendering, while the Canvas API converts PDFs to image thumbnails automatically.

State Management — Zustand keeps state management lightweight and performant.

Build Tool — Vite provides lightning-fast development and optimized production builds.

Language — TypeScript ensures type safety throughout, catching bugs before they reach production.

How It Works: The User Journey

Step 1: Authenticate — Click login and authenticate through Puter. No passwords to manage—OAuth handles it securely.

Step 2: Upload Resume — Drag and drop a PDF resume. Optionally add company name and job title for context.

Step 3: Paste Job Description — Copy the full job posting and paste it into the app.

Step 4: AI Analysis — Click “Analyze” and wait 15-30 seconds while Claude Sonnet processes your resume against the job description.

Step 5: Review Feedback — Get redirected to a detailed results page showing:

  • Overall ATS score (0-100)
  • Tone & Style feedback
  • Content Quality insights
  • Structure & Format suggestions
  • Skills Matching analysis

Step 6: Track History — Return to the homepage to see all previous analyses. Click any resume card to review detailed feedback again.

The Data Flow

The magic happens behind the scenes:

User uploads PDF → PDF rendered to image thumbnail → Both stored in Puter cloud storage → Resume metadata saved to KV database → User pastes job description → AI request sent to Claude Sonnet → Structured feedback parsed and stored → Results displayed with interactive score visualizations → User can return anytime to review history.

All of this happens without a single line of backend code. No servers. No databases. No DevOps. Pure serverless architecture.

What Makes the UX Special

Visual Feedback — Custom score components (circle gauges, badges, half-circle gauges) make scores immediately understandable at a glance.

Responsive Design — Works beautifully on desktop and mobile, with collapsible components and touch-friendly interactions.

Smooth Animations — Fade-in effects, smooth transitions, and animated score calculations create a polished, modern feel.

Actionable Insights — Feedback isn’t vague—it includes specific “What Went Well” and “What to Improve” sections with concrete suggestions.

Fast Feedback Loop — Analyze multiple resumes for different positions, compare feedback, and iterate quickly on your resume.

Why This Project Matters

This project demonstrates several important concepts in modern web development:

Serverless-First Approach — I proved that you don’t need traditional infrastructure to build sophisticated, full-featured applications.

AI Integration — Leveraging large language models (Claude Sonnet) to solve real-world problems without managing AI infrastructure.

User-Centric Problem Solving — Identified a real pain point for job seekers and built a solution that’s genuinely useful.

Modern Frontend Skills — React 19, TypeScript, Tailwind CSS, and client-side routing demonstrate current best practices.

Rapid Prototyping — From idea to deployed, fully functional application in weeks—not months.

Real-World Impact

Imagine you’re applying to 100 jobs. Before sending each resume, you run it through this analyzer. You identify common issues, update your resume, and increase your ATS match score from 55% to 78%. That single improvement could mean the difference between getting filtered out by ATS or landing an interview.

That’s the power of instant, AI-powered feedback.

The Deployment Story

Deploying traditional web apps involves complex pipelines, environment configuration, and deployment scripts. With Puter:

  1. Build the app locally: npm run build
  2. Go to puter.com/app-center
  3. Drag and drop the build folder
  4. Click “Deploy Now”

That’s it. Your app is live on Puter’s infrastructure with zero cost.

Customization & Extensibility

The codebase is structured for easy customization:

Change AI Models — Edit one line to switch between Claude Sonnet, GPT-4, or other models.

Modify Feedback Format — Adjust what feedback the AI returns by editing the prompt format.

Custom Styling — Tailwind CSS variables and custom component classes make design changes straightforward.

Add Features — The React Router structure makes adding new pages and routes simple.

Future Vision

This is just the beginning. Planned enhancements include:

  • Resume template suggestions based on ATS feedback
  • Skills gap analysis with learning resources
  • Industry-specific scoring (tech, finance, healthcare, etc.)
  • Resume version comparison to track improvements
  • Cover letter generation from resume + job description
  • LinkedIn profile integration
  • Batch resume analysis for multiple positions
  • Interview prep suggestions based on job description
  • Export feedback as PDF report

The Learning Experience

Building this project taught me invaluable lessons:

Cloud-Native Development — How to build production applications without managing infrastructure.

PDF Processing — Handling file uploads and converting PDFs to images client-side.

AI Integration — Prompting techniques to get structured, actionable feedback from large language models.

Serverless Architecture — Understanding the trade-offs and benefits of fully serverless applications.

Type Safety — How TypeScript catches bugs and improves code quality and developer experience.

UX/UI Design — Creating intuitive interfaces for complex tasks (resume analysis, score interpretation).

Try It Yourself

The app is fully functional, completely free, and live right now:

Live Demo: ai-resume-analyzer-she12.vercel.app

GitHub Repo: sheet848/ai-resume-analyzer

Clone the repository, install dependencies with npm install, start the dev server with npm run dev, and explore the code. No credit card required—Puter provides all backend services for free.

Built to help job seekers land their dream interviews. Powered by serverless architecture. Enabled by AI.