🤖 AI Resume Analyzer

The AI Resume Analyzer is a web application I built using React, TypeScript, and Tailwind CSS. It allows users to upload their resumes, analyze them using AI, and get an ATS (Applicant Tracking System) score along with personalized feedback based on job descriptions.

---

✨ Overview

This project was an exciting way to combine frontend development with AI integration. The app helps candidates understand how well their resume matches a specific job listing and provides clear, AI-generated suggestions for improvement.

It’s designed with a modern, responsive UI and built for smooth performance and scalability using Vite and Zustand for state management.

---

⚙️ Tech Stack

• ⚛️ React – for building the user interface
• 💅 Tailwind CSS – for fast and responsive styling
• 🧠 Puter.js – for handling authentication, storage, and AI APIs directly in the browser
• 🟦 TypeScript – for type safety and cleaner, maintainable code
• ⚡ Vite – for lightning-fast builds and local development
• 🔋 Zustand – for lightweight global state management

---

🔋 Features

• 🔐 Browser-based Authentication (no backend setup required)
• 📄 Resume Upload & Storage using Puter’s cloud
• 🧠 AI Resume Analysis — get ATS scores and improvement tips
• 🎨 Responsive, Modern UI built with Tailwind CSS and shadcn/ui
• 🔁 Reusable Components for clean code and scalability

---

🧩 Project Structure

The code is organized into modular folders for easy understanding:

src/
├── components/   # Reusable UI components
├── pages/        # Main app pages
├── store/        # Zustand state management
├── assets/       # Images and icons
├── utils/        # Helper functions and API calls

---

🚀 Getting Started

If you want to run this project locally:

1. Clone the repo

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

2. Install dependencies

   npm install

3. Run the development server

   npm run dev

4. Open your browser at:

   http://localhost:5173
   

---

💡 What I Learned

• Implementing authentication and storage directly in the browser using Puter.js
• Writing clean, reusable React components
• Using Zustand for simple and efficient global state management
• Structuring a scalable frontend project
• Improving UI design with Tailwind and responsive layouts

---

📸 Preview

(You can add screenshots or GIFs of your project here)

---

🪪 License

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

---

💬 Connect

I’m Sofia Asif, a Cybersecurity undergraduate passionate about building AI-powered and web-based applications. Feel free to connect with me on GitHub or LinkedIn if you’d like to collaborate or share ideas! ✨