Spark — AI-Powered Career Workspace

An enterprise-grade, full-stack AI platform for resume building, intelligent job matching, and automated outreach generation.

Features • Architecture • Tech Stack • Engineering • Installation

---

⚡ Why This Project Matters

Spark is not just another drag-and-drop resume builder. It is a comprehensive AI-driven career management workspace designed to help users land jobs faster. By leveraging advanced LLM orchestration (Groq/Gemini), Spark acts as a personal career assistant.

It handles everything from intelligent resume parsing via PDF upload, to real-time job description analysis, to generating context-aware cold emails and LinkedIn posts. Built with a highly scalable MERN architecture, it showcases modern React paradigms, complex state management, secure authentication, and seamless AI API integrations.

---

🚀 Core Features

📄 Intelligent Resume Studio

• PDF Upload Parsing: Users can upload existing PDF resumes, which are parsed by AI into structured JSON data seamlessly.
• Dynamic Templating Engine: 8 professionally designed templates (Classic, Modern, Minimal, Executive Pro, Harvard Style, etc.) built with pure CSS and React for pixel-perfect rendering.
• AI Content Enhancement: 1-click "Enhance with AI" buttons for Professional Summaries and Experience descriptions, backed by robust prompting to ensure professional tone.
• Live Preview & Export: Real-time side-by-side rendering, shareable public URL generation, and optimized print-to-PDF styles.

🎯 Job Match Analyzer

• Targeted ATS Analysis: Compares user resumes against target job descriptions in real-time.
• Detailed PDF Reports: Uses pdf-lib to generate multi-page, richly formatted analytical reports highlighting missing keywords, matched skills, and actionable rewrite suggestions.
• Persistent Analysis History: Saves analysis drafts securely to the database with intelligent deduplication mechanisms to prevent redundant API calls.

📨 AI Outreach Suite

• Context-Aware Generation: Automatically pulls data from the user's selected resume to write highly personalized Cold Emails, LinkedIn Posts, and Referral Requests.
• Tone Customization: Offers 10 distinct professional tones for output generation.
• Smart Autosave: Debounced autosaving (800ms) with JSON signature detection ensures drafts are saved to MongoDB without overwhelming the server.

---

🏗 Architecture

Spark employs a decoupled Client-Server architecture. The Express backend serves as a secure proxy and data processor, orchestrating database operations and mediating heavily constrained requests to LLMs.

graph TD
    Client[React 19 SPA Vite] -->|REST API + JWT| Server[Node.js / Express Backend]
    
    subgraph Frontend Architecture
    UI[Framer Motion UI] --> State[Context API / Hooks]
    State --> Templates[8 Dynamic Templates]
    State --> PDFGen[Client-side PDF-lib Generation]
    end
    
    subgraph Backend Architecture
    Server --> Auth[JWT Authentication]
    Server --> DB[(MongoDB Atlas)]
    Server --> AIProxy[AI Controller Pipeline]
    Server --> Upload[Multer + ImageKit Integration]
    end
    
    AIProxy -->|Structured JSON Prompting| Groq[Groq SDK Llama 3]
    AIProxy -->|Fallback / Complex Analysis| Gemini[Gemini API]
    
    classDef primary fill:#0145F2,stroke:#fff,stroke-width:2px,color:#fff;
    classDef secondary fill:#0f172a,stroke:#fff,stroke-width:1px,color:#fff;
    class Client,Server primary;
    class UI,State,Templates,PDFGen,Auth,DB,AIProxy,Upload secondary;

Loading

---

💻 Tech Stack & Ecosystem

Frontend (Client)

• Core: React 19, Vite, React Router DOM
• Styling & UI: Tailwind CSS v4, Framer Motion (micro-interactions & layout transitions), Lucide React (Icons)
• Document Generation: pdf-lib (complex programmatic PDF reports), standard window.print() for resumes
• State Management: React Context API (AuthContext), custom hooks for form state
• Network: Axios with global interceptors/headers

Backend (Server)

• Core: Node.js, Express.js
• Database: MongoDB, Mongoose (Models: User, Resume, AiDraft)
• Authentication: JSON Web Tokens (JWT), bcryptjs
• File Handling: Multer (multipart/form-data parsing), ImageKit SDK (cloud storage/transformations)
• AI Orchestration: Groq SDK (primary structured generation), Google Gemini API (complex reasoning/parsing)

---

🛠 Engineering Highlights & Technical Excellence

• Robust AI Prompt Engineering & Structured Outputs: The aiController implements highly constrained prompts enforcing strictly validated JSON schemas (response_format: { type: "json_object" }). This ensures the client UI never breaks due to hallucinated LLM formats.
• Defensive Data Normalization: A robust normalizeResumeData utility pipe intercepts all incoming backend payloads. It mitigates schema drift, handles missing keys, and coerces data types to guarantee frontend stability across all 8 template engines.
• Complex Client-Side PDF Generation: Instead of relying on a headless browser on the server (which is memory intensive), the Job Match Analyzer leverages pdf-lib on the client. It calculates font metrics, handles word wrapping, pagination, and multi-page layout generation entirely in the browser.
• Optimized API Polling & Autosave: The Outreach Suite utilizes a custom debounced useRef architecture for autosaving drafts. It calculates SHA-like signatures of the JSON state to prevent duplicate database writes and unnecessary API calls.
• Scalable Design System: The application uses a strictly defined Tailwind configuration with custom Base Layer Overrides. The ColorPicker and TemplateSelector dynamically inject CSS variables to alter the visual hierarchy of the templates on the fly.

---

⚙️ Installation & Setup

To run Spark locally, you will need Node.js (v18+) and MongoDB installed.

1. Clone the repository

git clone https://github.com/SarthakDudhe/Spark---AI-Powered-Resume-Builder.git
cd Spark---AI-Powered-Resume-Builder

2. Install dependencies

Install dependencies for both the client and server.

# Install server dependencies
cd server
npm install

# Install client dependencies
cd ../client
npm install

3. Environment Variables

Create a .env file in the server directory and populate it with the required keys:

PORT=5000
MONGODB_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secure_secret

# AI Providers
GROQ_API_KEY=your_groq_api_key
GEMINI_API_KEY=your_gemini_api_key

# ImageKit (For Profile Photos)
IMAGEKIT_PUBLIC_KEY=your_imagekit_public_key
IMAGEKIT_PRIVATE_KEY=your_imagekit_private_key
IMAGEKIT_URL_ENDPOINT=your_imagekit_url

Create a .env file in the client directory:

VITE_BASE_URL=http://localhost:5000

4. Run the Development Servers

# Terminal 1: Start the backend server
cd server
npm start

# Terminal 2: Start the frontend Vite server
cd client
npm run dev

---

Designed and engineered with passion. Built for the modern job seeker.