AI Resume Analyzer

🤖 AI-powered resume analyzer with ATS scoring, job matching, and detailed feedback. Built with React, Puter.js, and Tailwind CSS. Get instant insights on your resume's performance!

---

🚀 Transform Your Resume with AI-Powered Insights!

"Stop guessing if your resume will pass the ATS. Start knowing."

Build an AI-powered Resume Analyzer with React, React Router, and Puter.js! Implement seamless auth, upload and store resumes, and match candidates to jobs using smart AI evaluations. Get custom feedback and ATS scores tailored to each listing—all wrapped in a clean, reusable UI.

🎯 What You'll Get:

• ✅ ATS Score Analysis - Know exactly how well your resume performs
• ✅ AI-Powered Feedback - Get detailed improvement suggestions
• ✅ Job-Specific Matching - Tailored analysis for each position
• ✅ Modern UI/UX - Beautiful, responsive interface
• ✅ Zero Backend Setup - Everything runs in the browser

⚙️ Tech Stack

🎯 Core Technologies

• React 19 - A popular open‑source JavaScript library for building user interfaces using reusable components and a virtual DOM, enabling efficient, dynamic single-page and native apps.

🛣️ Routing & State Management

• React Router v7 - The go‑to routing library for React apps, offering nested routes, data loaders/actions, error boundaries, code splitting, and SSR support—all with a smooth upgrade path from v6.
• Zustand - A minimal, hook-based state management library for React. It lets you manage global state with zero boilerplate, no context providers, and excellent performance through selective state subscriptions.

☁️ Backend as a Service

• Puter.com - An advanced, open-source internet operating system designed to be feature-rich, exceptionally fast, and highly extensible. Puter can be used as: A privacy-first personal cloud to keep all your files, apps, and games in one secure place, accessible from anywhere at any time.
• Puter.js - A tiny client‑side SDK that adds serverless auth, storage, database, and AI (GPT, Claude, DALL·E, OCR…) straight into your browser app—no backend needed and costs borne by users.

🎨 Styling & Build Tools

• Tailwind CSS - A utility-first CSS framework that allows developers to design custom user interfaces by applying low-level utility classes directly in HTML, streamlining the design process.
• Vite - A fast build tool and dev server using native ES modules for instant startup, hot‑module replacement, and Rollup‑powered production builds—perfect for modern web development.

🔋 Features

🔐 Authentication & Security

• Zero Backend Setup - Handle authentication entirely in the browser using Puter.js
• Secure File Storage - All resumes stored safely in the cloud
• Privacy First - Your data stays private and secure

📄 Resume Management

• Drag & Drop Upload - Easy resume upload with visual feedback
• PDF to Image Conversion - Automatic conversion for AI analysis
• Multiple Resume Storage - Keep all your resumes organized in one place

🤖 AI-Powered Analysis

• ATS Score Analysis - Know exactly how well your resume performs with Applicant Tracking Systems
• Job-Specific Matching - Get feedback tailored to each job description
• Comprehensive Feedback - Detailed analysis across multiple categories:

Category	Description	Score Range
ATS Compatibility	How well your resume passes through automated screening	0-100
Tone & Style	Professional presentation and writing quality	0-100
Content Quality	Relevance and impact of your content	0-100
Structure	Organization and layout effectiveness	0-100
Skills Match	Alignment with job requirements	0-100

🎨 Modern UI/UX

• Reusable Components - Clean, consistent UI components
• Cross-Device Compatibility - Works seamlessly across all devices
• Modern Design - Beautiful, responsive interface built with Tailwind CSS
• Interactive Feedback - Visual score indicators and progress bars

🏗️ Project Structure

ai_resume_analyzer/
├── app/
│   ├── components/          # Reusable UI components
│   │   ├── Accordion.tsx   # Collapsible content sections
│   │   ├── ATS.tsx         # ATS score display component
│   │   ├── Details.tsx     # Detailed feedback display
│   │   ├── FileUploader.tsx # Drag & drop file upload
│   │   ├── Navbar.tsx      # Navigation component
│   │   ├── ResumeCard.tsx  # Resume preview cards
│   │   ├── ScoreBadge.tsx  # Score indicator badges
│   │   ├── ScoreCircle.tsx # Circular score display
│   │   ├── ScoreGauge.tsx  # Gauge-style score display
│   │   └── Summary.tsx     # Summary statistics
│   ├── constants/          # Application constants
│   ├── lib/               # Utility libraries
│   │   ├── PdfToImage.ts  # PDF to image conversion
│   │   ├── puter.ts       # Puter.js integration
│   │   └── utils.ts       # Helper functions
│   ├── routes/            # Application routes
│   │   ├── auth.tsx       # Authentication page
│   │   ├── home.tsx       # Dashboard/home page
│   │   ├── resume.tsx     # Individual resume view
│   │   ├── upload.tsx     # Resume upload page
│   │   └── wipe.tsx       # Data cleanup utility
│   └── types/             # TypeScript type definitions
├── public/                # Static assets
│   ├── icons/             # SVG icons
│   ├── images/            # Image assets
│   └── pdf.worker.min.mjs # PDF.js worker
└── package.json           # Dependencies and scripts

🚀 Quick Start

"Get up and running in under 5 minutes!"

Follow these steps to set up the project locally on your machine.

📋 Prerequisites

Make sure you have the following installed on your machine:

• Git - For version control
• Node.js (v18 or higher) - JavaScript runtime
• npm (Node Package Manager) - Package manager

🎯 Step-by-Step Setup

1️⃣ Clone the Repository

git clone https://github.com/HamzaAmir97/ai_resume_analyzer
cd ai-resume-analyzer

2️⃣ Install Dependencies

npm install

3️⃣ Start Development Server

npm run dev

4️⃣ Open Your Browser

Navigate to http://localhost:5173 to view the project.

⚡ Pro Tip: The development server includes hot module replacement (HMR) for instant updates as you code!

🚀 Available Scripts

Command	Description	Environment
npm run dev	Start the development server with HMR	Development
npm run build	Build the project for production	Production
npm run start	Start the production server	Production
npm run typecheck	Run TypeScript type checking	Development

🔧 Key Components

Authentication

The app uses Puter.js for seamless authentication without requiring a backend. Users can sign in with their Puter account to access the resume analyzer.

File Upload

• Supports PDF resume uploads
• Drag and drop interface
• Automatic PDF to image conversion for AI analysis
• Secure file storage using Puter's file system

AI Analysis

The AI analysis provides comprehensive feedback across five key areas:

1. ATS Score - How well your resume performs with Applicant Tracking Systems
2. Tone & Style - Professional presentation and writing quality
3. Content Quality - Relevance and impact of your content
4. Structure - Organization and layout effectiveness
5. Skills Match - Alignment with job requirements

Data Storage

• Resumes and analysis results are stored using Puter's key-value store
• Each resume gets a unique ID and comprehensive metadata
• Analysis results include detailed scores and improvement tips

🎨 UI Components

The project includes a comprehensive set of reusable UI components:

• ScoreBadge - Visual score indicators with color coding
• ScoreCircle - Circular progress indicators for scores
• ScoreGauge - Gauge-style score displays
• ResumeCard - Card-based resume previews
• FileUploader - Drag and drop file upload interface
• Accordion - Collapsible content sections for detailed feedback

📝 License

This project is open source and available under the MIT License.

🤝 Contributing

"Every contribution makes this project better!"

Contributions are welcome! Please feel free to submit a Pull Request. We love seeing new features, bug fixes, and improvements.

🎯 How to Contribute:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

---

Built with ❤️ using React, React Router, Puter.js, and Tailwind CSS