Mirror of github.com/Abhisingh18/HunterAI

.gitignore

@@ -0,0 +1,9 @@
+venv/
+node_modules/
+__pycache__/
+.env
+.DS_Store
+uploads/
+*.pdf
+*.xlsx
+backend/uploads/

README.md

@@ -0,0 +1,3 @@
+#Deployed link: https://hunterai-1.onrender.com
+# HunterAI
+An intelligent AI system that automates job and freelancing cold email outreach by leveraging resume parsing, company data analysis, and a multi-model LLM architecture. The system uses local LLMs (Ollama + Mistral) to generate highly personalized, professional emails with zero API dependency.

backend/hunter_backend.py

@@ -0,0 +1,136 @@
+from fastapi import FastAPI, UploadFile, File, HTTPException
+# Trigger reload
+from fastapi.middleware.cors import CORSMiddleware
+import os
+import shutil
+import time
+from dotenv import load_dotenv
+
+# Load env vars *before* importing services that might need them
+load_dotenv()
+
+from services.resume_parser import parse_resume
+from services.excel_reader import read_company_excel
+from services.ai_engine import generate_cold_email
+from services.email_sender import send_email
+from pydantic import BaseModel
+from typing import List, Dict, Any, Optional
+
+
+app = FastAPI(title="Hunter AI Backend")
+
+origins = [
+    "http://localhost:5173",
+    "http://localhost:3000",
+    os.getenv("FRONTEND_URL", "http://localhost:5173"),  # Allow Render frontend
+]
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=origins,
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+UPLOAD_DIR = "uploads"
+os.makedirs(UPLOAD_DIR, exist_ok=True)
+
+@app.get("/")
+def read_root():
+    return "AI Outreach Backend is running 🚀"
+
+@app.post("/upload")
+async def upload_files(resume: UploadFile = File(...), company_excel: UploadFile = File(...)):
+    resume_path = os.path.join(UPLOAD_DIR, resume.filename)
+    excel_path = os.path.join(UPLOAD_DIR, company_excel.filename)
+    
+    with open(resume_path, "wb") as buffer:
+        shutil.copyfileobj(resume.file, buffer)
+        
+    with open(excel_path, "wb") as buffer:
+        shutil.copyfileobj(company_excel.file, buffer)
+        
+    resume_text = parse_resume(resume_path)
+    companies = read_company_excel(excel_path)
+    
+    return {
+        "status": "success",
+        "resume_filename": resume.filename,
+        "excel_filename": company_excel.filename,
+        "resume_preview": resume_text[:500] if resume_text else "No text extracted",
+        "companies_count": len(companies),
+        "first_company_example": companies[0] if companies else None
+    }
+
+class GenerateRequest(BaseModel):
+    resume_filename: str
+    excel_filename: str
+
+@app.post("/generate-emails")
+async def generate_emails_endpoint(request: GenerateRequest):
+    resume_path = os.path.join(UPLOAD_DIR, request.resume_filename)
+    excel_path = os.path.join(UPLOAD_DIR, request.excel_filename)
+    
+    if not os.path.exists(resume_path) or not os.path.exists(excel_path):
+        raise HTTPException(status_code=404, detail="Files not found")
+
+    resume_text = parse_resume(resume_path)
+    companies = read_company_excel(excel_path)
+    
+    results = []
+    # Limit to first 5 for safety in MVP/Demo to avoid burning API quota or time
+    for company in companies[:5]: 
+        email = generate_cold_email(resume_text, company)
+        results.append({
+            "company": company.get("Company Name", "Unknown"),
+            "email": email,
+            "hr_email": company.get("Email", "") # Ensure we have the target email
+        })
+    return {"emails": results}
+
+class SendEmailRequest(BaseModel):
+    emails: List[Dict[str, str]]  # List of { "to": "...", "subject": "...", "body": "..." }
+    smtp_email: str
+    smtp_password: str
+    resume_filename: Optional[str] = None
+
+@app.post("/send-bulk-emails")
+async def send_bulk_emails_endpoint(request: SendEmailRequest):
+    results = []
+    smtp_config = {"email": request.smtp_email, "password": request.smtp_password}
+    
+    # Construct attachment path if provided
+    attachment_path = None
+    if request.resume_filename:
+        attachment_path = os.path.join(UPLOAD_DIR, request.resume_filename)
+    
+    print(f"🚀 Starting bulk email send for {len(request.emails)} recipients...")
+    if attachment_path:
+        print(f"📎 Including attachment: {request.resume_filename}")
+    
+    for index, item in enumerate(request.emails):
+        to_email = item.get("to")
+        subject = item.get("subject")
+        body = item.get("body")
+        
+        if to_email and subject and body:
+            print(f"[{index+1}/{len(request.emails)}] Sending to {to_email}...")
+            
+            # Pass attachment_path to send_email
+            success, message = send_email(to_email, subject, body, smtp_config, attachment_path)
+            
+            results.append({"to": to_email, "status": "sent" if success else "failed", "error": message})
+            
+            # Rate limiting: Sleep 2 seconds between emails to avoid spam filters
+            if index < len(request.emails) - 1:
+                time.sleep(2)
+        else:
+            results.append({"to": to_email, "status": "failed", "error": "Invalid data"})
+            
+    print("✅ Bulk sending complete.")
+    return {"results": results}
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=10000)

backend/requirements.txt

@@ -0,0 +1,11 @@
+fastapi
+uvicorn
+python-multipart
+pandas
+openpyxl
+huggingface_hub
+pypdf
+python-dotenv
+email-validator
+requests
+openai

backend/services/ai_engine.py

@@ -0,0 +1,79 @@
+from openai import OpenAI
+import os
+import json
+
+def generate_cold_email(resume_text: str, company_info: dict, tone="Confident, polite, result-oriented"):
+    """
+    Generates a cold email using OpenRouter API.
+    """
+    
+    # Fetch key dynamically to ensure it's loaded
+    OPENROUTER_API_KEY = os.getenv("OPENROUTER_API_KEY")
+
+    # 1. Map Data
+    candidate_profile = resume_text[:4000] # Increased limit slightly
+    company_name = company_info.get('Company Name', 'Target Company')
+    role = company_info.get('Role', 'Employee')
+    tech_stack = company_info.get('Tech Stack', 'Industry standard technologies')
+    hr_name = company_info.get('HR Name', 'Hiring Manager')
+
+    # 2. Construct Master Prompt
+    # Enhanced prompt for better personalization
+    prompt = f"""
+You are an expert Copywriter and AI Outreach Assistant.
+
+OBJECTIVE:
+Write a high-converting, hyper-personalized cold email to {hr_name} at {company_name} for the role of {role}.
+
+CANDIDATE PROFILE (RESUME):
+{candidate_profile}
+
+TARGET COMPANY DETAILS:
+Company: {company_name}
+Role: {role}
+Tech Stack: {tech_stack}
+
+INSTRUCTIONS:
+1.  **Analyze the Match**: First, silently identify the *strongest* project or skill from the candidate's resume that DIRECTLY pertains to the company's tech stack ({tech_stack}).
+2.  **Hook**: Open with a strong, non-generic hook. Mention why you are interested in {company_name} or a specific achievement of theirs if known (or just general enthusiasm for their mission).
+3.  **The "Why Me" (Crucial)**: You MUST include 1-2 sentences explicitly connecting a specific project/skill from the resume to the {role} requirements. "For example, in my project [Project Name], I used [Tech] to achieve [Result], which aligns with your work in [Domain]."
+4.  **Tone**: Confident, professional, yet human. Avoid stiff corporate jargon.
+5.  **Structure**:
+    *   **Subject**: Catchy & Relevant (e.g., "{role} Application - [Candidate Name] - [Key Skill] expert")
+    *   **Salutation**: Dear {hr_name},
+    *   **Body**: Hook -> "Why Me" (Specific Proof) -> Value Proposition.
+    *   **Call to Action**: Clear request for a brief chat or interview. Mention attached resume.
+    *   **Sign-off**: Best regards, [Candidate Name]
+
+CONSTRAINTS:
+*   Keep it under 150 words.
+*   NO spelling errors.
+*   NO placeholders like [Insert Here] - use the data provided. If data is missing, generalize intelligently.
+*   OUTPUT ONLY the email content.
+"""
+
+    return generate_email_via_ai(prompt, OPENROUTER_API_KEY)
+
+def generate_email_via_ai(prompt: str, api_key: str) -> str:
+    if not api_key:
+        return "Error: OPENROUTER_API_KEY not found in environment variables. Please check your .env file."
+
+    try:
+        client = OpenAI(
+            api_key=api_key,
+            base_url="https://openrouter.ai/api/v1"
+        )
+
+        response = client.chat.completions.create(
+            model="openai/gpt-oss-20b",
+            messages=[
+                {"role": "system", "content": "You are a professional AI assistant."},
+                {"role": "user", "content": prompt}
+            ],
+            temperature=0.5,
+            max_tokens=1000 # Increased slightly to ensure full email + reasoning found in some models
+        )
+        
+        return response.choices[0].message.content
+    except Exception as e:
+        return f"Error connecting to OpenRouter: {str(e)}"

backend/services/email_sender.py

@@ -0,0 +1,65 @@
+import smtplib
+from email.mime.text import MIMEText
+from email.mime.multipart import MIMEMultipart
+from email.mime.application import MIMEApplication
+import os
+
+def send_email(to_email, subject, body, smtp_config=None, attachment_path=None):
+    # If smtp_config is not provided, try to use env vars (though user provided creds are better)
+    # If smtp_config is not provided, try to use env vars (though user provided creds are better)
+    # Fix: Ensure we don't use empty strings from config if they are empty
+    sender_email = (smtp_config and smtp_config.get("email")) or os.getenv("SMTP_EMAIL")
+    password = (smtp_config and smtp_config.get("password")) or os.getenv("SMTP_PASSWORD")
+    
+    if not sender_email or not password:
+        return False, "Missing SMTP credentials"
+
+    msg = MIMEMultipart()
+    msg['From'] = sender_email
+    msg['To'] = to_email
+    msg['Subject'] = subject
+
+    # Attach body as HTML
+    # Converting newlines to <br> if it looks like plain text, or assuming incoming body has basic formatting
+    html_body = f"""
+    <html>
+      <body style="font-family: Arial, sans-serif; line-height: 1.6; color: #333;">
+        <div style="padding: 20px; border: 1px solid #eee; border-radius: 8px;">
+            {body.replace(chr(10), '<br>')}
+        </div>
+        <p style="font-size: 12px; color: #888; margin-top: 20px;">
+            Sent via Hunter AI Agent
+        </p>
+      </body>
+    </html>
+    """
+    msg.attach(MIMEText(html_body, 'html'))
+
+    # Attach resume if provided
+    if attachment_path and os.path.exists(attachment_path):
+        try:
+            with open(attachment_path, "rb") as f:
+                part = MIMEApplication(
+                    f.read(),
+                    Name=os.path.basename(attachment_path)
+                )
+            # After the file is closed
+            part['Content-Disposition'] = f'attachment; filename="{os.path.basename(attachment_path)}"'
+            msg.attach(part)
+            print(f"📎 Attached file: {attachment_path}")
+        except Exception as e:
+            print(f"⚠️ Failed to attach file: {e}")
+
+    try:
+        # Connect to Gmail SMTP server
+        server = smtplib.SMTP('smtp.gmail.com', 587)
+        server.starttls()
+        server.login(sender_email, password)
+        text = msg.as_string()
+        server.sendmail(sender_email, to_email, text)
+        server.quit()
+        print(f"✅ Email sent to {to_email}")
+        return True, "Email sent successfully"
+    except Exception as e:
+        print(f"❌ Failed to send to {to_email}: {e}")
+        return False, f"Failed to send email: {str(e)}"

backend/services/excel_reader.py

@@ -0,0 +1,18 @@
+import pandas as pd
+
+def read_company_excel(file_path: str):
+    try:
+        if file_path.endswith('.csv'):
+            df = pd.read_csv(file_path)
+        else:
+            df = pd.read_excel(file_path)
+            
+        # Normalize headers to lowercase? Or expected exact match?
+        # User prompt: "Company Name | HR Name | Email | Role | Tech Stack | Type"
+        # Let's clean up nan values first
+        df = df.where(pd.notnull(df), None)
+        companies = df.to_dict(orient="records")
+        return companies
+    except Exception as e:
+        print(f"Error reading Excel/CSV: {e}")
+        return []

backend/services/resume_parser.py

@@ -0,0 +1,17 @@
+import pypdf
+import re
+
+def parse_resume(file_path: str):
+    text = ""
+    try:
+        reader = pypdf.PdfReader(file_path)
+        for page in reader.pages:
+            text += page.extract_text() + "\n"
+        
+        # Basic cleaning
+        text = re.sub(r'\s+', ' ', text).strip()
+        
+    except Exception as e:
+        print(f"Error reading PDF: {e}")
+        return str(e)
+    return text

frontend/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/README.md

@@ -0,0 +1,16 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.

frontend/eslint.config.js

@@ -0,0 +1,29 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])

frontend/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>frontend</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

frontend/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tailwindcss/postcss": "^4.1.18",
+    "axios": "^1.13.2",
+    "clsx": "^2.1.1",
+    "framer-motion": "^12.23.26",
+    "lucide-react": "^0.561.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "recharts": "^3.5.1",
+    "tailwind-merge": "^3.4.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "autoprefixer": "^10.4.22",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.18",
+    "vite": "^7.2.4"
+  }
+}

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+    plugins: {
+        '@tailwindcss/postcss': {},
+        autoprefixer: {},
+    },
+}

frontend/src/App.css

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

frontend/src/App.jsx

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import Layout from './components/Layout';
+import DashboardView from './views/DashboardView';
+import UploadView from './views/UploadView';
+import GeneratorView from './views/GeneratorView';
+
+function App() {
+  const [activeTab, setActiveTab] = useState('dashboard');
+  const [uploadData, setUploadData] = useState(null);
+
+  const handleUploadComplete = (data) => {
+    setUploadData(data);
+    setActiveTab('generator');
+  };
+
+  const renderView = () => {
+    switch (activeTab) {
+      case 'dashboard':
+        return <DashboardView setView={setActiveTab} />;
+      case 'upload':
+        return <UploadView onUploadComplete={handleUploadComplete} />;
+      case 'generator':
+        return <GeneratorView uploadData={uploadData} />;
+      case 'campaigns':
+        return <div className="text-slate-500 text-center py-20">Campaign Management Module Coming Soon</div>;
+      case 'analytics':
+        return <div className="text-slate-500 text-center py-20">Advanced Analytics Module Coming Soon</div>;
+      case 'settings':
+        return <div className="text-slate-500 text-center py-20">Settings Module Coming Soon</div>;
+      default:
+        return <DashboardView setView={setActiveTab} />;
+    }
+  };
+
+  return (
+    <Layout activeTab={activeTab} setActiveTab={setActiveTab}>
+      {renderView()}
+    </Layout>
+  );
+}
+
+export default App;

frontend/src/Dashboard.jsx

@@ -0,0 +1,236 @@
+import React, { useState } from 'react';
+import UploadForm from './UploadForm';
+import UploadForm from './UploadForm';
+import axios from 'axios';
+import { API_BASE_URL } from './config';
+
+const Dashboard = () => {
+    const [step, setStep] = useState(1);
+    const [uploadData, setUploadData] = useState(null);
+    const [generatedEmails, setGeneratedEmails] = useState([]);
+    const [smtpEmail, setSmtpEmail] = useState("");
+    const [smtpPassword, setSmtpPassword] = useState("");
+    const [sendingResults, setSendingResults] = useState([]);
+
+    // Background Orbs for "Alive" feel
+    const BackgroundOrbs = () => (
+        <div className="fixed inset-0 overflow-hidden pointer-events-none -z-10">
+            <div className="absolute top-[-10%] left-[-10%] w-96 h-96 bg-purple-600/30 rounded-full blur-3xl float"></div>
+            <div className="absolute top-[20%] right-[-5%] w-72 h-72 bg-cyan-600/30 rounded-full blur-3xl float-delayed"></div>
+            <div className="absolute bottom-[-10%] left-[20%] w-80 h-80 bg-blue-600/30 rounded-full blur-3xl float"></div>
+        </div>
+    );
+
+    const handleUploadSuccess = (data) => {
+        setUploadData(data);
+        setStep(2);
+        generateEmails(data);
+    };
+
+    const generateEmails = async (data) => {
+        try {
+            const response = await axios.post(`${API_BASE_URL}/generate-emails`, {
+                resume_filename: data.resume_filename,
+                excel_filename: data.excel_filename
+            });
+            setGeneratedEmails(response.data.emails);
+            setStep(3);
+        } catch (error) {
+            console.error(error);
+            alert("Error generating emails. Ensure Backend is active.");
+            setStep(1);
+        }
+    };
+
+    const handleSendEmails = async () => {
+        if (!smtpEmail || !smtpPassword) {
+            alert("Please enter SMTP Credentials");
+            return;
+        }
+
+        try {
+            const payload = {
+                emails: generatedEmails.map(item => ({
+                    to: item.hr_email,
+                    subject: item.email.includes("Subject:") ? item.email.split('\n').find(l => l.includes("Subject:")).replace("Subject:", "").trim() : "Application Inquiry",
+                    body: item.email
+                })),
+                smtp_email: smtpEmail,
+                smtp_password: smtpPassword
+            };
+
+            const response = await axios.post(`${API_BASE_URL}/send-bulk-emails`, payload);
+            setSendingResults(response.data.results);
+            setStep(4);
+        } catch (error) {
+            console.error(error);
+            alert("Error sending emails");
+        }
+    };
+
+    return (
+        <div className="relative min-h-screen w-full flex flex-col items-center justify-center p-6">
+            <BackgroundOrbs />
+
+            {/* Header */}
+            <header className="mb-10 text-center z-10 fade-in-up" style={{ animationDelay: '0.1s' }}>
+                <div className="inline-block p-1 rounded-full bg-gradient-to-r from-cyan-500 to-blue-500 mb-4">
+                    <div className="bg-slate-900 rounded-full px-4 py-1">
+                        <span className="text-sm font-bold bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-blue-400">
+                            AI-POWERED RECRUITMENT AGENT
+                        </span>
+                    </div>
+                </div>
+                <h1 className="text-6xl font-extrabold text-white glow-text tracking-tight mb-2">
+                    Hunter<span className="text-cyan-400">.ai</span>
+                </h1>
+                <p className="text-blue-200 text-lg max-w-lg mx-auto leading-relaxed">
+                    Automate your job outreach with personalized, AI-crafted emails.
+                </p>
+            </header>
+
+            <main className="w-full max-w-6xl z-10">
+                {step === 1 && (
+                    <div className="fade-in-up" style={{ animationDelay: '0.2s' }}>
+                        <UploadForm onUploadSuccess={handleUploadSuccess} />
+                    </div>
+                )}
+
+                {step === 2 && (
+                    <div className="max-w-xl mx-auto glass-panel p-12 text-center fade-in-up">
+                        <div className="relative w-24 h-24 mx-auto mb-8">
+                            <div className="absolute inset-0 border-4 border-cyan-500/30 rounded-full animate-ping"></div>
+                            <div className="absolute inset-0 border-4 border-t-cyan-400 rounded-full animate-spin"></div>
+                            <div className="absolute inset-4 bg-cyan-500/20 rounded-full backdrop-blur-sm"></div>
+                        </div>
+                        <h2 className="text-3xl font-bold text-white mb-4">AI Brain at Work</h2>
+                        <p className="text-blue-200 mb-8">Parsing resume, analyzing tech stack, and crafting perfect pitches...</p>
+
+                        <div className="bg-black/20 rounded-full h-1.5 w-full overflow-hidden">
+                            <div className="h-full bg-gradient-to-r from-cyan-400 via-blue-500 to-purple-600 animate-[shimmer_1.5s_infinite] w-2/3"></div>
+                        </div>
+                    </div>
+                )}
+
+                {step === 3 && (
+                    <div className="fade-in-up">
+                        <div className="flex justify-between items-end mb-8">
+                            <div>
+                                <h2 className="text-3xl font-bold text-white">Draft Reviews</h2>
+                                <p className="text-blue-300">We've prepared {generatedEmails.length} personalized emails for you.</p>
+                            </div>
+                            <button className="text-sm text-cyan-400 hover:text-cyan-300 font-semibold underline underline-offset-4">
+                                Regenerate All
+                            </button>
+                        </div>
+
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
+                            {generatedEmails.map((item, index) => (
+                                <div key={index} className="glass-panel p-6 group hover:bg-white/15 transition-all duration-300 hover:-translate-y-2">
+                                    <div className="flex justify-between items-start mb-4">
+                                        <div className="p-2 bg-gradient-to-br from-cyan-500/20 to-blue-500/20 rounded-lg">
+                                            <span className="text-2xl">🏢</span>
+                                        </div>
+                                        <span className="text-xs font-bold px-2 py-1 rounded bg-white/10 text-cyan-300 border border-cyan-500/20">
+                                            MATCH: 92%
+                                        </span>
+                                    </div>
+                                    <h3 className="font-bold text-xl text-white mb-1 group-hover:text-cyan-300 transition-colors">{item.company}</h3>
+                                    <p className="text-sm text-gray-400 mb-4 font-mono truncate">{item.hr_email}</p>
+
+                                    <div className="bg-black/40 p-3 rounded-lg border border-white/5 h-40 overflow-hidden relative group-hover:border-cyan-500/30 transition-colors">
+                                        <div className="absolute bottom-0 left-0 w-full h-12 bg-gradient-to-t from-black/80 to-transparent pointer-events-none"></div>
+                                        <p className="text-xs text-gray-300 whitespace-pre-wrap leading-relaxed">{item.email}</p>
+                                    </div>
+                                    <button className="w-full mt-4 py-2 rounded-lg bg-white/5 hover:bg-white/10 text-sm font-semibold text-white border border-white/10 transition-colors">
+                                        Edit / Preview
+                                    </button>
+                                </div>
+                            ))}
+                        </div>
+
+                        <div className="glass-panel p-8 max-w-2xl mx-auto border-t-4 border-t-cyan-500">
+                            <h3 className="text-2xl font-bold text-white mb-6 text-center">Ready to Launch Campaign? 🚀</h3>
+
+                            <div className="grid grid-cols-1 gap-4 mb-6">
+                                <input
+                                    type="email"
+                                    placeholder="Your Gmail Address"
+                                    value={smtpEmail}
+                                    onChange={(e) => setSmtpEmail(e.target.value)}
+                                    className="glass-input w-full"
+                                />
+                                <input
+                                    type="password"
+                                    placeholder="Gmail App Password"
+                                    value={smtpPassword}
+                                    onChange={(e) => setSmtpPassword(e.target.value)}
+                                    className="glass-input w-full"
+                                />
+                            </div>
+                            <button
+                                onClick={handleSendEmails}
+                                className="w-full glass-btn text-lg"
+                            >
+                                Send {generatedEmails.length} Emails Now
+                            </button>
+                        </div>
+                    </div>
+                )}
+
+                {step === 4 && (
+                    <div className="max-w-4xl mx-auto glass-panel p-10 fade-in-up">
+                        <div className="text-center mb-10">
+                            <div className="inline-block p-4 rounded-full bg-green-500/20 mb-4">
+                                <span className="text-4xl">🎉</span>
+                            </div>
+                            <h2 className="text-4xl font-bold text-white mb-2">Campaign Completed!</h2>
+                            <p className="text-gray-300">Here's how your outreach went.</p>
+                        </div>
+
+                        <div className="overflow-hidden rounded-xl border border-white/10 bg-black/20">
+                            <table className="w-full text-left">
+                                <thead className="bg-white/5">
+                                    <tr>
+                                        <th className="p-4 text-sm font-semibold text-gray-400 uppercase tracking-wider">Recipient</th>
+                                        <th className="p-4 text-sm font-semibold text-gray-400 uppercase tracking-wider">Status</th>
+                                        <th className="p-4 text-sm font-semibold text-gray-400 uppercase tracking-wider">Details</th>
+                                    </tr>
+                                </thead>
+                                <tbody className="divide-y divide-white/10">
+                                    {sendingResults.map((res, index) => (
+                                        <tr key={index} className="hover:bg-white/5 transition-colors">
+                                            <td className="p-4 text-white font-medium">{res.to}</td>
+                                            <td className="p-4">
+                                                {res.status === 'sent' ? (
+                                                    <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-500/20 text-green-400 border border-green-500/30">
+                                                        SENT
+                                                    </span>
+                                                ) : (
+                                                    <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-500/20 text-red-400 border border-red-500/30">
+                                                        FAILED
+                                                    </span>
+                                                )}
+                                            </td>
+                                            <td className="p-4 text-sm text-gray-500">{res.error || "Delivered"}</td>
+                                        </tr>
+                                    ))}
+                                </tbody>
+                            </table>
+                        </div>
+                        <div className="mt-10 text-center">
+                            <button
+                                onClick={() => window.location.reload()}
+                                className="px-8 py-3 rounded-xl bg-white/5 hover:bg-white/10 text-white font-semibold transition-all border border-white/10 hover:border-cyan-500/50"
+                            >
+                                Start New Campaign
+                            </button>
+                        </div>
+                    </div>
+                )}
+            </main>
+        </div>
+    );
+};
+
+export default Dashboard;

frontend/src/UploadForm.jsx

@@ -0,0 +1,105 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+import { API_BASE_URL } from './config';
+
+const UploadForm = ({ onUploadSuccess }) => {
+    const [resume, setResume] = useState(null);
+    const [excel, setExcel] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [status, setStatus] = useState("");
+
+    const handleUpload = async (e) => {
+        e.preventDefault();
+        if (!resume || !excel) {
+            alert("Please select both Resume and Excel file.");
+            return;
+        }
+
+        setStatus("🚀 Initiating Launch Sequence...");
+        setLoading(true);
+
+        const formData = new FormData();
+        formData.append("resume", resume);
+        formData.append("company_excel", excel);
+
+        try {
+            const response = await axios.post(`${API_BASE_URL}/upload`, formData, {
+                headers: {
+                    'Content-Type': 'multipart/form-data'
+                }
+            });
+            console.log(response.data);
+            setStatus("✨ Files Secure. Engaging AI Core...");
+            setTimeout(() => {
+                onUploadSuccess(response.data);
+            }, 1500);
+        } catch (error) {
+            console.error(error);
+            setStatus("❌ System Failure during upload.");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <div className="glass-panel p-10 max-w-lg mx-auto transform transition-all hover:scale-[1.01] hover:shadow-[0_0_40px_rgba(6,182,212,0.15)] relative overflow-hidden group">
+            {/* Glossy shine effect */}
+            <div className="absolute top-0 left-[-100%] w-1/2 h-full bg-gradient-to-r from-transparent via-white/5 to-transparent skew-x-12 group-hover:animate-[shine_1.5s_ease-in-out]"></div>
+
+            <h2 className="text-2xl font-bold mb-6 text-center text-white">Initialize Outreach</h2>
+
+            <form onSubmit={handleUpload} className="space-y-6">
+                <div>
+                    <label className="block text-sm font-semibold text-cyan-300 mb-2 uppercase tracking-wide">Resume (PDF)</label>
+                    <div className={`relative border-2 border-dashed border-white/20 rounded-xl p-6 transition-all ${resume ? 'bg-cyan-500/10 border-cyan-500/50' : 'hover:bg-white/5 hover:border-cyan-400/50'}`}>
+                        <input
+                            type="file" accept=".pdf"
+                            onChange={(e) => setResume(e.target.files[0])}
+                            className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+                        />
+                        <div className="text-center pointer-events-none">
+                            <span className="text-2xl mb-2 block">{resume ? '📄' : '📤'}</span>
+                            <p className="text-sm font-medium text-gray-300">{resume ? resume.name : "Drop PDF or Click to Browse"}</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div>
+                    <label className="block text-sm font-semibold text-purple-300 mb-2 uppercase tracking-wide">Company List (Excel)</label>
+                    <div className={`relative border-2 border-dashed border-white/20 rounded-xl p-6 transition-all ${excel ? 'bg-purple-500/10 border-purple-500/50' : 'hover:bg-white/5 hover:border-purple-400/50'}`}>
+                        <input
+                            type="file" accept=".xlsx, .xls"
+                            onChange={(e) => setExcel(e.target.files[0])}
+                            className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+                        />
+                        <div className="text-center pointer-events-none">
+                            <span className="text-2xl mb-2 block">{excel ? '📊' : '📥'}</span>
+                            <p className="text-sm font-medium text-gray-300">{excel ? excel.name : "Drop Excel or Click to Browse"}</p>
+                        </div>
+                    </div>
+                </div>
+
+                <button
+                    type="submit"
+                    disabled={loading}
+                    className="w-full glass-btn mt-4 group"
+                >
+                    {loading ? (
+                        <span className="flex items-center justify-center gap-2">
+                            <svg className="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                            </svg>
+                            Processing...
+                        </span>
+                    ) : (
+                        "🚀 Start Processing"
+                    )}
+                </button>
+            </form>
+            {status && <div className="mt-4 p-3 rounded-lg bg-black/30 text-center text-sm font-mono text-cyan-200 border border-cyan-500/20">{status}</div>}
+        </div>
+    );
+};
+
+export default UploadForm;

frontend/src/components/Layout.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import Sidebar from './Sidebar';
+
+const Layout = ({ children, activeTab, setActiveTab }) => {
+    return (
+        <div className="min-h-screen bg-slate-50 text-slate-900 font-sans selection:bg-indigo-500/30">
+            <Sidebar activeTab={activeTab} setActiveTab={setActiveTab} />
+
+            <main className="pl-64 min-h-screen">
+                {/* Top Bar Place holder if needed, or integrated into pages */}
+                <div className="p-8 max-w-7xl mx-auto animate-in fade-in zoom-in duration-300">
+                    {children}
+                </div>
+            </main>
+        </div>
+    );
+};
+
+export default Layout;

frontend/src/components/Sidebar.jsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import {
+    LayoutDashboard,
+    UploadCloud,
+    Sparkles,
+    Send,
+    BarChart2,
+    Settings,
+    LogOut
+} from 'lucide-react';
+import { motion } from 'framer-motion';
+
+const Sidebar = ({ activeTab, setActiveTab }) => {
+    const menuItems = [
+        { id: 'dashboard', label: 'Dashboard', icon: LayoutDashboard },
+        { id: 'upload', label: 'Upload Data', icon: UploadCloud },
+        { id: 'generator', label: 'AI Generator', icon: Sparkles },
+        { id: 'campaigns', label: 'Campaigns', icon: Send },
+        { id: 'analytics', label: 'Analytics', icon: BarChart2 },
+        { id: 'settings', label: 'Settings', icon: Settings },
+    ];
+
+    return (
+        <div className="w-64 h-screen bg-white border-r border-slate-200 flex flex-col fixed left-0 top-0 z-50">
+            {/* Brand */}
+            <div className="p-6">
+                <div className="flex items-center gap-2">
+                    <div className="w-8 h-8 rounded-lg bg-indigo-600 flex items-center justify-center">
+                        <Sparkles className="w-5 h-5 text-white" />
+                    </div>
+                    <span className="text-xl font-bold text-slate-900 tracking-tight">HunterAI</span>
+                </div>
+            </div>
+
+            {/* Navigation */}
+            <nav className="flex-1 px-4 space-y-1 mt-6">
+                {menuItems.map((item) => {
+                    const Icon = item.icon;
+                    const isActive = activeTab === item.id;
+
+                    return (
+                        <motion.div
+                            key={item.id}
+                            onClick={() => setActiveTab(item.id)}
+                            className={`nav-item group ${isActive ? 'active' : ''}`}
+                            whileHover={{ x: 4 }}
+                            whileTap={{ scale: 0.98 }}
+                        >
+                            <Icon className={`sidebar-icon ${isActive ? 'text-indigo-400' : ''}`} />
+                            <span>{item.label}</span>
+                            {isActive && (
+                                <motion.div
+                                    layoutId="active-pill"
+                                    className="absolute left-0 w-1 h-8 bg-indigo-500 rounded-r-full"
+                                    initial={{ opacity: 0 }}
+                                    animate={{ opacity: 1 }}
+                                    exit={{ opacity: 0 }}
+                                />
+                            )}
+                        </motion.div>
+                    );
+                })}
+            </nav>
+
+            {/* User Profile */}
+            <div className="p-4 border-t border-slate-200">
+                <div className="flex items-center gap-3 px-2 py-2 rounded-xl hover:bg-slate-100 cursor-pointer transition-colors">
+                    <div className="w-8 h-8 rounded-full bg-slate-200 flex items-center justify-center text-xs font-semibold text-slate-600">
+                        AS
+                    </div>
+                    <div className="flex-1">
+                        <p className="text-sm font-medium text-slate-900">Abhishek Singh</p>
+                        <p className="text-xs text-slate-500">Pro Plan</p>
+                    </div>
+                    <LogOut className="w-4 h-4 text-slate-400 hover:text-slate-600" />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Sidebar;

frontend/src/config.js

@@ -0,0 +1 @@
+export const API_BASE_URL = import.meta.env.VITE_API_URL || "http://localhost:10000";

frontend/src/index.css

@@ -0,0 +1,52 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
+@import "tailwindcss";
+
+@layer theme {
+  :root {
+    --font-sans: 'Inter', sans-serif;
+  }
+}
+
+@layer base {
+  body {
+    @apply bg-slate-50 text-slate-900 font-sans antialiased;
+  }
+}
+
+.glass-panel {
+  @apply bg-white/60 backdrop-blur-xl border border-slate-200 shadow-xl rounded-2xl;
+}
+
+.gradient-text {
+  @apply bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 via-violet-600 to-blue-600;
+}
+
+.sidebar-icon {
+  @apply w-5 h-5 text-slate-400 group-hover:text-indigo-600 transition-colors;
+}
+
+.nav-item {
+  @apply flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-medium text-slate-600 hover:bg-slate-100 hover:text-slate-900 transition-all cursor-pointer;
+}
+
+.nav-item.active {
+  @apply bg-indigo-50 text-indigo-600 border border-indigo-200;
+}
+
+/* Animations */
+.fade-in {
+  animation: fadeIn 0.4s ease-out forwards;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

frontend/src/main.jsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

frontend/src/views/DashboardView.jsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import {
+    BarChart,
+    Bar,
+    XAxis,
+    YAxis,
+    CartesianGrid,
+    Tooltip,
+    ResponsiveContainer,
+    LineChart,
+    Line
+} from 'recharts';
+import { Mail, MousePointer, Users, Activity, Plus } from 'lucide-react';
+import { motion } from 'framer-motion';
+
+const data = [
+    { name: 'Mon', emails: 400, replies: 240 },
+    { name: 'Tue', emails: 300, replies: 139 },
+    { name: 'Wed', emails: 200, replies: 980 },
+    { name: 'Thu', emails: 278, replies: 390 },
+    { name: 'Fri', emails: 189, replies: 480 },
+    { name: 'Sat', emails: 239, replies: 380 },
+    { name: 'Sun', emails: 349, replies: 430 },
+];
+
+const StatCard = ({ title, value, change, icon: Icon, color }) => (
+    <div className="bg-white p-6 flex flex-col justify-between h-40 rounded-2xl shadow-sm border border-slate-100 hover:shadow-md transition-shadow">
+        <div className="flex justify-between items-start">
+            <div className={`p-3 rounded-xl ${color} text-white shadow-md shadow-${color.replace('bg-', '')}/20`}>
+                <Icon className="w-6 h-6" />
+            </div>
+            <span className="text-xs font-semibold text-emerald-600 bg-emerald-50 px-2 py-1 rounded-full">{change}</span>
+        </div>
+        <div>
+            <h3 className="text-3xl font-bold text-slate-900 tracking-tight">{value}</h3>
+            <p className="text-sm text-slate-500 font-medium mt-1">{title}</p>
+        </div>
+    </div>
+);
+
+const DashboardView = ({ setView }) => {
+    return (
+        <div className="space-y-8">
+            {/* Hero Section */}
+            <div className="relative overflow-hidden rounded-3xl bg-gradient-to-r from-indigo-50 to-violet-50 border border-indigo-100 p-10 shadow-lg">
+                <div className="absolute top-0 right-0 w-96 h-96 bg-white/40 rounded-full blur-3xl -mr-20 -mt-20 pointer-events-none" />
+                <div className="relative z-10 max-w-2xl">
+                    <motion.div
+                        initial={{ opacity: 0, y: 10 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ duration: 0.5 }}
+                    >
+                        <h1 className="text-4xl font-bold text-slate-900 mb-4">
+                            Automate your <span className="gradient-text">Outreach</span>
+                        </h1>
+                        <p className="text-slate-600 text-lg mb-8 leading-relaxed">
+                            HunterAI creates hyper-personalized emails using your resume and target company data to 10x your response rate.
+                        </p>
+                        <button
+                            onClick={() => setView('upload')}
+                            className="bg-indigo-600 text-white px-6 py-3 rounded-xl font-semibold hover:bg-indigo-700 transition-colors flex items-center gap-2 shadow-lg shadow-indigo-200"
+                        >
+                            <Plus className="w-5 h-5" />
+                            Create New Campaign
+                        </button>
+                    </motion.div>
+                </div>
+            </div>
+
+            {/* Stats Grid */}
+            <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
+                <StatCard title="Total Emails Sent" value="12,450" change="+12%" icon={Mail} color="bg-indigo-500" />
+                <StatCard title="Response Rate" value="24.8%" change="+4.2%" icon={MousePointer} color="bg-violet-500" />
+                <StatCard title="Active Campaigns" value="3" change="Active" icon={Activity} color="bg-blue-500" />
+                <StatCard title="Jobs Matched" value="85" change="+18" icon={Users} color="bg-emerald-500" />
+            </div>
+
+            {/* Analytics Chart */}
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 h-96">
+                <div className="lg:col-span-2 glass-panel p-6 bg-white">
+                    <h3 className="text-lg font-semibold text-slate-900 mb-6">Campaign Performance</h3>
+                    <ResponsiveContainer width="100%" height="85%">
+                        <BarChart data={data}>
+                            <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" vertical={false} />
+                            <XAxis dataKey="name" stroke="#64748b" fontSize={12} tickLine={false} axisLine={false} />
+                            <YAxis stroke="#64748b" fontSize={12} tickLine={false} axisLine={false} />
+                            <Tooltip
+                                contentStyle={{ backgroundColor: '#ffffff', border: '1px solid #e2e8f0', borderRadius: '8px', color: '#0f172a' }}
+                                itemStyle={{ color: '#0f172a' }}
+                            />
+                            <Bar dataKey="emails" fill="#6366f1" radius={[4, 4, 0, 0]} />
+                            <Bar dataKey="replies" fill="#8b5cf6" radius={[4, 4, 0, 0]} />
+                        </BarChart>
+                    </ResponsiveContainer>
+                </div>
+
+                <div className="glass-panel p-6 bg-white">
+                    <h3 className="text-lg font-semibold text-slate-900 mb-4">Recent Activity</h3>
+                    <div className="space-y-4">
+                        {[1, 2, 3, 4].map((_, i) => (
+                            <div key={i} className="flex items-center gap-3 p-3 rounded-lg hover:bg-slate-50 transition-colors cursor-pointer border border-transparent hover:border-slate-100">
+                                <div className="w-2 h-2 rounded-full bg-indigo-500"></div>
+                                <div className="flex-1">
+                                    <p className="text-sm text-slate-700">Campaign "Frontend Roles" sent</p>
+                                    <p className="text-xs text-slate-500">2 hours ago</p>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default DashboardView;

frontend/src/views/GeneratorView.jsx

@@ -0,0 +1,141 @@
+import React, { useState, useEffect } from 'react';
+import { RefreshCw, Check, X, Send, Edit, Copy } from 'lucide-react';
+import axios from 'axios';
+import { API_BASE_URL } from '../config';
+
+const GeneratorView = ({ uploadData }) => {
+    const [generatedEmails, setGeneratedEmails] = useState([]);
+    const [selectedEmailIndex, setSelectedEmailIndex] = useState(0);
+    const [loading, setLoading] = useState(false);
+    const [sending, setSending] = useState(false);
+
+    useEffect(() => {
+        if (uploadData && generatedEmails.length === 0) {
+            generateEmails();
+        }
+    }, [uploadData]);
+
+    const generateEmails = async () => {
+        setLoading(true);
+        try {
+            const res = await axios.post(`${API_BASE_URL}/generate-emails`, {
+                resume_filename: uploadData.resume_filename,
+                excel_filename: uploadData.excel_filename
+            });
+            setGeneratedEmails(res.data.emails);
+        } catch (e) {
+            console.error(e);
+            alert("Error generating emails");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleSendCurrent = async () => {
+        // Logic to send single email or push to queue
+        if (!uploadData.smtpEmail || !uploadData.smtpPassword) {
+            alert("Missing SMTP Credentials. Go back to Upload.");
+            return;
+        }
+
+        const current = generatedEmails[selectedEmailIndex];
+        setSending(true);
+        try {
+            const payload = {
+                emails: [{
+                    to: current.hr_email,
+                    subject: current.email.split('\n')[0].replace("Subject: ", ""), // Simple extraction
+                    body: current.email
+                }],
+                smtp_email: uploadData.smtpEmail,
+                smtp_password: uploadData.smtpPassword,
+                resume_filename: uploadData.resume_filename // Pass filename for attachment
+            };
+            await axios.post(`${API_BASE_URL}/send-bulk-emails`, payload);
+            alert(`Email sent to ${current.company}`);
+        } catch (e) {
+            console.error(e);
+            alert("Sending failed.");
+        } finally {
+            setSending(false);
+        }
+    };
+
+    if (!uploadData) return (
+        <div className="flex items-center justify-center h-full text-slate-500">
+            No data loaded. Please start from Upload page.
+        </div>
+    );
+
+    return (
+        <div className="h-[calc(100vh-100px)] flex gap-6">
+            {/* Left: List */}
+            <div className="w-1/3 glass-panel overflow-hidden flex flex-col bg-white">
+                <div className="p-4 border-b border-slate-200 bg-slate-50 flex justify-between items-center">
+                    <h3 className="font-semibold text-slate-900">Candidates ({generatedEmails.length})</h3>
+                    <button
+                        onClick={generateEmails}
+                        className="p-2 hover:bg-white/10 rounded-lg transition-colors"
+                        title="Regenerate All"
+                    >
+                        <RefreshCw className={`w-4 h-4 text-slate-400 ${loading ? 'animate-spin' : ''}`} />
+                    </button>
+                </div>
+
+                <div className="overflow-y-auto flex-1 p-2 space-y-2">
+                    {loading ? (
+                        <div className="text-center p-8 text-slate-500">AI is brainstorming...</div>
+                    ) : generatedEmails.map((item, idx) => (
+                        <div
+                            key={idx}
+                            onClick={() => setSelectedEmailIndex(idx)}
+                            className={`p-4 rounded-xl cursor-pointer border transition-all ${selectedEmailIndex === idx ? 'bg-indigo-50 border-indigo-200' : 'bg-transparent border-transparent hover:bg-slate-50'}`}
+                        >
+                            <div className="flex justify-between items-center mb-1">
+                                <h4 className={`font-medium ${selectedEmailIndex === idx ? 'text-indigo-700' : 'text-slate-700'}`}>{item.company}</h4>
+                                <span className="text-xs text-slate-500 px-2 py-0.5 rounded-full bg-slate-100">95%</span>
+                            </div>
+                            <p className="text-xs text-slate-500 truncate">{item.hr_email}</p>
+                        </div>
+                    ))}
+                </div>
+            </div>
+
+            {/* Right: Preview */}
+            <div className="flex-1 glass-panel flex flex-col overflow-hidden relative bg-white">
+                {generatedEmails.length > 0 && (
+                    <>
+                        <div className="p-6 border-b border-slate-200 bg-slate-50 flex justify-between items-center">
+                            <div>
+                                <p className="text-sm text-slate-500 mb-1">Subject</p>
+                                <h2 className="text-lg font-medium text-slate-900 truncate max-w-lg">
+                                    {generatedEmails[selectedEmailIndex].email.split('\n')[0].replace("Subject: ", "")}
+                                </h2>
+                            </div>
+                            <div className="flex gap-2">
+                                <button className="flex items-center gap-2 px-4 py-2 rounded-lg bg-white border border-slate-200 hover:bg-slate-50 text-slate-700 text-sm font-medium transition-colors">
+                                    <Edit className="w-4 h-4" /> Edit
+                                </button>
+                                <button
+                                    onClick={handleSendCurrent}
+                                    disabled={sending}
+                                    className="flex items-center gap-2 px-4 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium transition-colors shadow-lg shadow-indigo-500/20"
+                                >
+                                    <Send className="w-4 h-4" /> {sending ? 'Sending...' : 'Send Now'}
+                                </button>
+                            </div>
+                        </div>
+
+                        <div className="flex-1 p-8 overflow-y-auto bg-slate-100/50">
+                            <div className="max-w-3xl mx-auto bg-white text-slate-900 p-8 rounded-lg shadow-sm border border-slate-200 min-h-full font-serif loading-relaxed leading-7 whitespace-pre-wrap">
+                                {generatedEmails[selectedEmailIndex].email}
+                            </div>
+                        </div>
+                    </>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default GeneratorView;

frontend/src/views/UploadView.jsx

@@ -0,0 +1,158 @@
+import React, { useState } from 'react';
+import { UploadCloud, FileText, Settings, ArrowRight, CheckCircle2 } from 'lucide-react';
+import { motion } from 'framer-motion';
+import axios from 'axios';
+import { API_BASE_URL } from '../config';
+
+const UploadView = ({ onUploadComplete }) => {
+    const [resume, setResume] = useState(null);
+    const [excel, setExcel] = useState(null);
+    const [smtpEmail, setSmtpEmail] = useState("");
+    const [smtpPassword, setSmtpPassword] = useState("");
+    const [loading, setLoading] = useState(false);
+
+    const handleUpload = async () => {
+        if (!resume || !excel) {
+            alert("Please provide both Resume and Excel files.");
+            return;
+        }
+        setLoading(true);
+        const formData = new FormData();
+        formData.append("resume", resume);
+        formData.append("company_excel", excel);
+
+        try {
+            const res = await axios.post(`${API_BASE_URL}/upload`, formData);
+            // Pass minimal data needed for generator + generic SMTP creds storage (in state)
+            onUploadComplete({
+                ...res.data,
+                smtpEmail,
+                smtpPassword
+            });
+        } catch (err) {
+            console.error(err);
+            alert("Upload failed.");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <div className="max-w-5xl mx-auto py-8">
+            <div className="mb-12">
+                <h2 className="text-3xl font-bold text-slate-900 mb-2">Configure Campaign</h2>
+                <p className="text-slate-500">Upload your data sources to initialize the AI agent.</p>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
+                {/* Card 1: Company List */}
+                <div className="glass-panel p-6 hover:bg-white transition-colors group bg-white">
+                    <div className="flex items-center gap-3 mb-6">
+                        <div className="p-2 bg-emerald-50 rounded-lg text-emerald-600 group-hover:bg-emerald-100 transition-colors">
+                            <UploadCloud className="w-6 h-6" />
+                        </div>
+                        <h3 className="font-semibold text-slate-900">Company Data</h3>
+                    </div>
+
+                    <div className={`border-2 border-dashed rounded-xl p-8 text-center transition-all cursor-pointer ${excel ? 'border-emerald-500 bg-emerald-50' : 'border-slate-200 hover:border-slate-400'}`}>
+                        <input
+                            type="file"
+                            accept=".xlsx, .xls, .csv"
+                            onChange={(e) => setExcel(e.target.files[0])}
+                            className="hidden"
+                            id="excel-upload"
+                        />
+                        <label htmlFor="excel-upload" className="cursor-pointer block h-full">
+                            {excel ? (
+                                <div className="text-emerald-400 flex flex-col items-center">
+                                    <CheckCircle2 className="w-8 h-8 mb-2" />
+                                    <span className="text-sm font-medium truncate max-w-full">{excel.name}</span>
+                                </div>
+                            ) : (
+                                <span className="text-sm text-slate-500">
+                                    Drag & drop Excel or CSV<br /><span className="text-xs opacity-70">or click to browse</span>
+                                </span>
+                            )}
+                        </label>
+                    </div>
+                </div>
+
+                {/* Card 2: Resume */}
+                <div className="glass-panel p-6 hover:bg-white transition-colors group bg-white">
+                    <div className="flex items-center gap-3 mb-6">
+                        <div className="p-2 bg-blue-50 rounded-lg text-blue-600 group-hover:bg-blue-100 transition-colors">
+                            <FileText className="w-6 h-6" />
+                        </div>
+                        <h3 className="font-semibold text-slate-900">Your Resume</h3>
+                    </div>
+
+                    <div className={`border-2 border-dashed rounded-xl p-8 text-center transition-all cursor-pointer ${resume ? 'border-blue-500 bg-blue-50' : 'border-slate-200 hover:border-slate-400'}`}>
+                        <input
+                            type="file"
+                            accept=".pdf"
+                            onChange={(e) => setResume(e.target.files[0])}
+                            className="hidden"
+                            id="resume-upload"
+                        />
+                        <label htmlFor="resume-upload" className="cursor-pointer block h-full">
+                            {resume ? (
+                                <div className="text-blue-400 flex flex-col items-center">
+                                    <CheckCircle2 className="w-8 h-8 mb-2" />
+                                    <span className="text-sm font-medium truncate max-w-full">{resume.name}</span>
+                                </div>
+                            ) : (
+                                <span className="text-sm text-slate-500">
+                                    Drag & drop PDF<br /><span className="text-xs opacity-70">or click to browse</span>
+                                </span>
+                            )}
+                        </label>
+                    </div>
+                </div>
+
+                {/* Card 3: Email Config */}
+                <div className="glass-panel p-6 hover:bg-white transition-colors group bg-white">
+                    <div className="flex items-center gap-3 mb-6">
+                        <div className="p-2 bg-purple-50 rounded-lg text-purple-600 group-hover:bg-purple-100 transition-colors">
+                            <Settings className="w-6 h-6" />
+                        </div>
+                        <h3 className="font-semibold text-slate-900">Sender Config</h3>
+                    </div>
+
+                    <div className="space-y-4">
+                        <input
+                            type="email"
+                            placeholder="Gmail Address"
+                            value={smtpEmail}
+                            onChange={(e) => setSmtpEmail(e.target.value)}
+                            className="w-full bg-slate-50 border border-slate-200 rounded-lg px-3 py-2 text-sm text-slate-900 focus:outline-none focus:border-indigo-500"
+                        />
+                        <input
+                            type="password"
+                            placeholder="App Password"
+                            value={smtpPassword}
+                            onChange={(e) => setSmtpPassword(e.target.value)}
+                            className="w-full bg-slate-50 border border-slate-200 rounded-lg px-3 py-2 text-sm text-slate-900 focus:outline-none focus:border-indigo-500"
+                        />
+                        <div className="flex items-center gap-2">
+                            <div className="w-2 h-2 rounded-full bg-slate-600"></div>
+                            <span className="text-xs text-slate-500">SMTP Disconnected</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div className="flex justify-end">
+                <button
+                    onClick={handleUpload}
+                    disabled={loading}
+                    className="group relative inline-flex items-center gap-2 px-8 py-4 bg-indigo-600 text-white rounded-xl font-bold text-lg hover:bg-indigo-700 transition-all shadow-lg hover:shadow-xl disabled:opacity-50"
+                >
+                    {loading ? 'Processing...' : 'Analyze & Generate'}
+                    <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
+                </button>
+            </div>
+        </div>
+    );
+};
+
+export default UploadView;

frontend/tailwind.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+    content: [
+        "./index.html",
+        "./src/**/*.{js,ts,jsx,tsx}",
+    ],
+    theme: {
+        extend: {},
+    },
+    plugins: [],
+}

frontend/vite.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})

main.py

@@ -0,0 +1,11 @@
+import sys
+import os
+import uvicorn
+
+# Fix path to allow imports from backend folder
+sys.path.append(os.path.join(os.path.dirname(__file__), "backend"))
+
+from hunter_backend import app
+
+if __name__ == "__main__":
+    uvicorn.run(app, host="0.0.0.0", port=10000)

render.yaml

@@ -0,0 +1,40 @@
+services:
+  # Backend Service
+  - type: web
+    name: hunter-ai-backend
+    env: python
+    region: singapore
+    plan: free
+    buildCommand: pip install -r requirements.txt
+    startCommand: python main.py
+    rootDirectory: .
+    envVars:
+      - key: PYTHON_VERSION
+        value: 3.10.0
+      - key: FRONTEND_URL
+        fromService:
+          type: web
+          name: hunter-ai-frontend
+          property: url
+      - key: OLLAMA_URL
+        value: http://localhost:11434 # Placeholder, user must update this in Render dashboard
+      - key: PORT
+        value: 10000
+      - key: GROQ_API_KEY
+        sync: false
+
+  # Frontend Service
+  - type: web
+    name: hunter-ai-frontend
+    env: static
+    region: singapore
+    plan: free
+    buildCommand: npm install && npm run build
+    staticPublishPath: ./dist
+    rootDirectory: frontend
+    envVars:
+      - key: VITE_API_URL
+        fromService:
+          type: web
+          name: hunter-ai-backend
+          property: url

requirements.txt

@@ -0,0 +1 @@
+-r backend/requirements.txt

test_companies.csv

@@ -0,0 +1,4 @@
+Company Name,HR Name,Email,Role,Tech Stack,Type
+Google,Jane Doe,jane@google.com,Software Engineer,Python,Product
+Facebook,John Start,john@facebook.com,Product Manager,React,Product
+Amazon,Alice Stone,alice@amazon.com,Data Scientist,SQL,Service