SkillSync

AI-powered resume analysis and optimization platform that helps job seekers tailor their resumes to specific job descriptions using GPT-4o.

Features

• 🤖 AI-Powered Analysis: Uses OpenAI GPT-4o to analyze resumes against job descriptions
• 📄 PDF Processing: Extracts text from PDF resumes for analysis
• 💡 Smart Suggestions: Provides categorized recommendations (keyword gaps, bullet updates, section additions/removals, wording improvements)
• 📊 Analysis History: Track all your resume analyses in one place
• 🎯 Quantifiable Metrics: Get suggestions that include measurable achievements
• 🔐 Secure Authentication: Built with Supabase Auth and Row Level Security
• 📋 Copy to Clipboard: Easily copy AI suggestions to update your resume

Tech Stack

Frontend

• React 18 with Vite
• React Router v6 for navigation
• TailwindCSS for styling
• Material Symbols icons
• Supabase client for authentication

Backend

• Node.js with Express
• Supabase for database and authentication
• OpenAI GPT-4o API for AI analysis
• pdf.js-extract for PDF text extraction
• Multer for file uploads

Database

• PostgreSQL (via Supabase)
• Row Level Security (RLS) policies
• Real-time capabilities

Prerequisites

• Node.js 18+ and npm
• Supabase account and project
• OpenAI API key with GPT-4o access
• Two terminals (frontend + backend)

Setup

1. Clone and Install

# Install root dependencies
npm install

# Install backend dependencies
cd apps/backend
npm install

# Install frontend dependencies
cd ../frontend
npm install

2. Configure Backend Environment

cd apps/backend
cp .env.example .env

Edit apps/backend/.env and add your credentials:

SUPABASE_URL=your_supabase_project_url
SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key
OPENAI_API_KEY=your_openai_api_key
PORT=4000

3. Configure Frontend Environment

cd apps/frontend
cp .env.example .env

Edit apps/frontend/.env and add your Supabase credentials:

VITE_SUPABASE_URL=your_supabase_project_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

4. Set Up Database

1. Go to your Supabase project dashboard
2. Navigate to the SQL Editor
3. Copy the contents of supabase/schema.sql and execute it
4. This creates all necessary tables, policies, and indexes

Running the Application

Development Mode

# Terminal 1 - Start backend
npm run dev:backend
# Backend runs on http://localhost:4000

# Terminal 2 - Start frontend
npm run dev:frontend
# Frontend runs on http://localhost:5173

Access the Application

1. Open http://localhost:5173 in your browser
2. Click "Sign Up" to create an account
3. After signing in, you'll be redirected to the dashboard
4. Navigate to "Analyze" to upload a resume and start analysis

Project Structure

skillsync/
├── apps/
│   ├── backend/               # Express API server
│   │   ├── src/
│   │   │   ├── lib/
│   │   │   │   └── supabase.js        # Supabase clients (anon + admin)
│   │   │   ├── routes/
│   │   │   │   └── analyses.js        # Analysis CRUD endpoints
│   │   │   ├── services/
│   │   │   │   ├── openai.js          # GPT-4o integration
│   │   │   │   └── pdfParser.js       # PDF text extraction
│   │   │   └── server.js              # Express app entry point
│   │   ├── .env.example
│   │   ├── package.json
│   │   └── README.md
│   │
│   └── frontend/              # React SPA
│       ├── src/
│       │   ├── auth/
│       │   │   ├── AuthContext.jsx    # Auth state management
│       │   │   └── ProtectedRoute.jsx # Route protection
│       │   ├── components/            # Reusable UI components
│       │   ├── layouts/               # Page layouts
│       │   ├── pages/
│       │   │   ├── Landing.jsx        # Public landing page
│       │   │   ├── Login.jsx          # Login page
│       │   │   ├── Register.jsx       # Registration page
│       │   │   ├── Dashboard.jsx      # Main dashboard
│       │   │   ├── Analyze.jsx        # Resume upload page
│       │   │   ├── History.jsx        # Analysis history
│       │   │   └── Results.jsx        # Analysis results viewer
│       │   ├── App.jsx                # Main app component
│       │   └── main.jsx               # App entry point
│       ├── .env.example
│       ├── package.json
│       └── README.md
│
├── supabase/
│   ├── schema.sql             # Complete database schema
│   └── policies.sql           # Row Level Security policies
│
├── package.json               # Root package.json with scripts
└── README.md                  # This file

Key Features Explained

Resume Analysis Flow

1. Upload: User uploads PDF resume, provides job title and description
2. Extract: Backend extracts text from PDF using pdf.js-extract
3. Analyze: Text is sent to GPT-4o for analysis against job requirements
4. Store: Analysis and suggestions are stored in PostgreSQL
5. Display: Frontend polls for status and displays results when complete

Suggestion Types

• keyword_gap: Missing skills or keywords from job description
• bullet_update: Improvements to existing bullet points (add metrics, action verbs)
• section_add: New sections to add (e.g., relevant skills, summary)
• section_remove: Sections that don't align with the job
• wording_tone: Better phrasing or professional tone improvements

Authentication Architecture

• Frontend: Supabase client handles signup/signin
• Backend Cookie: After auth, frontend sends token to backend to set httpOnly cookie
• Dual Clients: Backend uses both anon key (for auth) and service role key (for RLS bypass)
• Middleware: withAuth middleware validates JWT on protected routes

API Documentation

See apps/backend/README.md for complete API documentation.

Quick Reference

• POST /api/auth/set-cookie - Set authentication cookie
• GET /api/session - Get current session
• POST /api/analyses - Create new analysis (multipart/form-data)
• GET /api/analyses - List all user analyses
• GET /api/analyses/:id - Get specific analysis with suggestions
• GET /api/analyses/:id/status - Poll analysis status

Cost Considerations

• OpenAI GPT-4o Pricing: ~$0.02-$0.05 per resume analysis
• Supabase: Free tier supports up to 500MB database and 2GB bandwidth
• Recommended: Monitor OpenAI usage and set spending limits

Security Features

• HttpOnly cookies for authentication tokens
• Row Level Security (RLS) on all database tables
• File size limits (5MB max for PDFs)
• PDF validation before processing
• CORS configuration for frontend origin
• Service role key used only on backend (never exposed to client)

Troubleshooting

Backend not starting

• Check that port 4000 is not in use: lsof -ti:4000 | xargs kill -9
• Verify all environment variables are set correctly
• Ensure Supabase service role key is configured

Frontend can't reach backend

• Verify backend is running on http://localhost:4000
• Check browser console for CORS errors
• Ensure credentials: 'include' is set on fetch requests

"Found 0 analyses" even though data exists

• This was an RLS issue - fixed by using supabaseAdmin client on backend
• Verify SUPABASE_SERVICE_ROLE_KEY is set in backend .env

Session not persisting

• Check that cookies are being set (Network tab → Application → Cookies)
• Verify /api/auth/set-cookie is called after login
• Check AuthContext is wrapping the entire app in main.jsx

Contributing

1. Create a new branch for your feature
2. Make changes and test thoroughly
3. Update relevant README files
4. Submit a pull request with clear description

License

MIT

Support

For issues or questions, please open an issue on GitHub.