Smart, visual feedback for your resume with ATS scoring, actionable tips, and progress tracking.
- What it does: AI analyzes your PDF resume and returns an ATS score with clear tips you can act on.
- 3-step workflow:
- 📤 Upload — Drag & drop your PDF.
- 🧠 Analyze — AI reviews it against your target role.
- 📈 Review — See score, key insights, and improvement tips.
Resumind is a full‑stack React Router app that analyzes your resume using AI and provides:
- ATS score with context-specific tips
- Category insights (Tone & Style, Content, Structure, Skills)
- Visual summaries and badges for quick understanding
- Secure file storage and history of your analyzed resumes
Built around Puter.js for authentication, file storage, key‑value data, and AI chat (Claude 3.7 Sonnet), with a clean Tailwind UI.
- 🔐 One‑click auth via Puter.js
- ⬆️ PDF upload with drag & drop (react-dropzone)
- 🖼️ Resume preview image of the first page
- 🤖 AI feedback via Puter AI chat (Claude 3.7 Sonnet)
- 🧠 Structured JSON feedback with overall and category scores
- 🗂️ KV storage of analysis history; revisit anytime
- 🧭 SSR by default, Vite HMR in dev
- UI: React 19, React Router 7 (SSR), Tailwind CSS 4
- State: Zustand 5
- Build: Vite 6, TypeScript 5
- File/AI/KV: Puter.js v2 (auth, fs, kv, ai)
- Uploads: react-dropzone
- Auth bootstrap
- On app mount, root.tsx loads Puter.js v2 and initializes a Zustand store (usePuterStore.init). Auth status is checked and persisted.
- Upload & analyze
- In /upload, user drags a PDF.
- A preview image of the first page is generated for display.
- Both the PDF and the preview image are uploaded to Puter FS.
- A UUID record is saved in Puter KV under resume:{id} with file paths and form metadata.
- The app calls ai.feedback, sending the resume file and structured instructions (constants/prepareInstructions) to Puter AI chat (Claude 3.7 Sonnet).
- The JSON feedback (overallScore, ATS, toneAndStyle, content, structure, skills) is parsed and saved back to KV.
- User is redirected to /resume/{id}.
- Review & history
- /resume/:id reads the KV record, fetches blobs from Puter FS, and displays:
- A preview image of the resume
- Summary gauge and category badges
- ATS card with visual state and tips
- Detailed accordion with explanations and icons
- Home (/) lists previously analyzed resumes from KV and links to detail pages.
app/
components/ # Navbar, FileUploader, Summary, ATS, Details, visuals
lib/ # puter.ts (Zustand + Puter.js wrappers), utils.ts
routes/ # home.tsx, auth.tsx, upload.tsx, resume.tsx
app.css # Tailwind + custom utilities and component classes
constants/ # Demo data + AI instruction builder
public/
icons/ # SVG icons used by components
images/ # Backgrounds and animations
- Requirements
- Node.js 20+
- Install
npm install- Dev (with HMR)
npm run dev- Type check (optional)
npm run typecheck- Build
npm run build- Start (SSR server)
npm start- Puter.js script is loaded from https://js.puter.com/v2/ in app/root.tsx; no local API keys required.
- AI model is set to "claude-3-7-sonnet" inside app/lib/puter.ts feedback().
- File and KV access is via Puter SDK available on window.puter.
- Developer ergonomics: A thin wrapper (app/lib/puter.ts) exposes auth, fs, kv, and ai with consistent error handling.
- UX clarity: Tailwind utility classes plus small components (ScoreBadge, ScoreGuage/Circle) keep visuals simple and informative.
- Performance: SSR by default and Vite HMR in dev.
- Simplicity: No backend code to write—Puter provides auth, storage, and AI.
- Multi‑page PDF previews
- Editable job descriptions per resume record
- Export feedback report as PDF
- Shareable links with access rules
- Icons in public/icons
- Animations and backgrounds in public/images
- Powered by Puter.js, Tailwind, React Router, and Vite