RESUMIND — AI Resume Analyzer

RESUMIND is an AI-powered resume analysis web app. Users upload a PDF resume along with a job title, company name, and job description. The app uses AI (via Puter.js) to score the resume against ATS criteria and generate detailed feedback covering tone, content, structure, and skills.

---

Features

• 🔐 Authentication — Passwordless sign-in via Puter.js (no backend required)
• 📄 PDF Resume Upload — Drag-and-drop or click-to-select, PDF only, max 20 MB
• 🤖 AI-Powered Analysis — Resume scored by Claude (claude-sonnet-4) through Puter AI
• 📊 Multi-Dimensional Feedback — ATS score, tone & style, content, structure, and skills — each with tips
• 🏠 Dashboard — View all past resume submissions with score circles and job details
• 🐳 Docker Ready — Multi-stage Dockerfile for production deployments

---

Tech Stack

Layer	Technology
Framework	React Router v8 (SSR + SPA)
Language	TypeScript
Styling	Tailwind CSS v4
State Management	Zustand
AI / Auth / Storage	Puter.js (puter.ai, puter.auth, puter.fs, puter.kv)
File Upload	react-dropzone
PDF Rendering	pdfjs-dist
Build Tool	Vite
Icons	react-icons

---

Project Structure

ai_resume_analyzer/
├── app/
│   ├── app.css                  # Global styles & Tailwind configuration
│   ├── root.tsx                 # App shell: Puter.js script injection, font loading, error boundary
│   ├── routes.ts                # Route definitions (React Router config)
│   │
│   ├── routes/
│   │   ├── home.tsx             # Dashboard — lists all analyzed resumes
│   │   ├── upload.tsx           # Upload form — company, job title, description, PDF
│   │   ├── auth.tsx             # Auth page — Puter sign-in / sign-out
│   │   └── signin.tsx           # /signin → redirects to /auth
│   │
│   ├── components/
│   │   ├── Navbar.tsx           # Top navigation bar (RESUMIND logo + Upload Resume link)
│   │   ├── FileUploader.tsx     # Drag-and-drop PDF uploader with file name + size display
│   │   ├── ResumeCard.tsx       # Card showing company, job title, score circle, resume thumbnail
│   │   └── ScoreCircle.tsx      # Animated SVG circular progress ring for resume score
│   │
│   ├── lib/
│   │   ├── puter.ts             # Zustand store wrapping all Puter.js APIs (auth, fs, ai, kv)
│   │   └── utils.ts             # Utility functions (e.g. formatSize)
│   │
│   └── constants/
│       └── index.ts             # Sample resume data, AI response format schema, AI prompt builder
│
├── types/
│   ├── index.d.ts               # Global type: Resume, Feedback
│   └── puter.d.ts               # Puter-specific types: FSItem, PuterUser, AIResponse, etc.
│
├── public/
│   ├── icons/                   # SVG icons
│   ├── images/                  # Background SVGs, resume thumbnails, scan GIF
│   └── pdf.worker.min.mjs       # PDF.js worker (bundled locally)
│
├── Dockerfile                   # Multi-stage Docker build
├── react-router.config.ts       # React Router framework config
├── vite.config.ts               # Vite + Tailwind + React Router plugin
└── tsconfig.json                # TypeScript configuration

---

Routes

Path	File	Description
/	routes/home.tsx	Dashboard with all past resumes. Redirects to /auth?next=/ if not signed in.
/upload	routes/upload.tsx	Upload form: company name, job title, job description, PDF upload.
/auth	routes/auth.tsx	Puter.js sign-in page. Redirects to ?next= after successful auth.
/signin	routes/signin.tsx	Permanent redirect to /auth.

---

Key Components

FileUploader

Drag-and-drop zone powered by react-dropzone. Accepts PDF files up to 20 MB. After a file is selected, displays the file name and human-readable size (e.g. 2.34 MB).

ScoreCircle

SVG ring chart with a pink-to-blue gradient showing the overall resume score out of 100.

ResumeCard

Clickable card linking to a resume detail page. Displays company name, job title, resume thumbnail, and the ScoreCircle.

usePuterStore (lib/puter.ts)

Central Zustand store that wraps all Puter.js APIs:

• auth — signIn, signOut, checkAuthStatus, getUser
• fs — write, read, readDir, upload, delete
• ai — chat (general AI), feedback (resume PDF analysis via Claude), img2txt
• kv — get, set, delete, list, flush

lib/utils.ts

formatSize(bytes: number, decimals?: number): string

Converts a byte count to a human-readable string (KB, MB, GB). Uses binary units (1 KB = 1024 B).

---

AI Feedback Schema

The AI returns a structured JSON object matching this interface:

interface Feedback {
  overallScore: number;          // 0–100
  ATS: {
    score: number;
    tips: { type: "good" | "improve"; tip: string }[];
  };
  toneAndStyle: {
    score: number;
    tips: { type: "good" | "improve"; tip: string; explanation: string }[];
  };
  content: { score: number; tips: [...] };
  structure: { score: number; tips: [...] };
  skills: { score: number; tips: [...] };
}

---

Getting Started

Prerequisites

• Node.js 20+
• npm

Installation

npm install

Development

npm run dev

App runs at http://localhost:5173.

Type Checking

npm run typecheck

Production Build

npm run build
npm run start

---

Docker Deployment

The included Dockerfile uses a multi-stage build:

# Build the image
docker build -t resumind .

# Run the container
docker run -p 3000:3000 resumind

Deployable to any Docker-compatible platform:

• AWS ECS / Google Cloud Run / Azure Container Apps
• Fly.io / Railway / DigitalOcean App Platform

---

Notes

• No dedicated backend — all AI, auth, and storage is handled client-side via Puter.js.
• Authentication uses Puter's OAuth popup; users need a free Puter account.
• AI resume analysis uses claude-sonnet-4 accessed through puter.ai.chat.
• PDF files are uploaded to Puter cloud storage before being sent to the AI for analysis.

---

Built with ❤️ using React Router + Puter.js.