Wayfinder - AI Career Navigation Engine 🚀

An AI-powered career navigation platform that transforms fragmented data (resumes, job listings, course catalogs) into actionable, personalized 4-week upskilling roadmaps with intelligent resource recommendations and an automated application tracker.

🎯 Hackathon Solution Overview

Problem: Job seekers struggle to bridge skill gaps efficiently. They face information overload, unclear learning paths, and difficulty tracking progress toward career goals.

Solution: Wayfinder uses AI to:

• Analyze skill gaps by comparing resume skills against target job requirements
• Generate personalized 4-week roadmaps with actionable todo items
• Recommend relevant learning resources (courses, tutorials, documentation, articles, videos)
• Track progress with interactive todo checklists stored in session storage
• Calculate ROI showing financial return on upskilling investments
• Optimize resumes for specific job applications

✨ Key Features

🗺️ AI-Generated Roadmaps

• 4-Week Structured Plans: Automatically generated week-by-week learning roadmaps
• Actionable Todo Items: Each week contains 2-4 specific, actionable tasks
• Resource Integration: Every todo links to a recommended learning resource
• Progress Tracking: Interactive checkboxes sync with session storage

📚 Intelligent Resource Recommendations

• AI-Powered Discovery: Uses GPT-4o-mini to find relevant learning resources
• Multiple Resource Types: Courses, tutorials, documentation, articles, and videos
• Detailed Metadata: Includes provider, estimated time, skills covered, and cost
• Direct Links: One-click access to all recommended resources

🎯 Dual Pathway System

Pathway 1: Target Job

• Select a specific job you want
• AI analyzes skill gaps between your resume and job requirements
• Generates personalized 4-week roadmap with resources
• Save plans and track progress in the application tracker

Pathway 2: Best-Fit Jobs

• AI recommends jobs you're best suited for
• Shows match scores and improvement suggestions
• Resume optimization for specific roles

📊 Application Tracker

• Mission Control Dashboard: Centralized view of all saved roadmap plans
• Todo Progress: Track completion status (completed/total todos)
• Status Management: Wishlist → Upskilling → Ready → Applied → Interview
• ROI Metrics: View potential salary jumps and investment returns

📄 Resume Intelligence

• PDF Parsing: Extract text and skills from uploaded resumes
• Skill Extraction: AI-powered skill identification using GPT-4o-mini
• Resume Optimization: Tailor keywords and content for specific jobs
• Storage: Secure resume storage in Supabase with signed URLs

🎭 Demo Mode

• Zero-latency demonstrations using pre-generated JSON data
• Perfect for presentations and demos
• Toggleable from the dashboard

🛠️ Tech Stack

• Framework: Next.js 14 (App Router), React 18, TypeScript
• Styling: Tailwind CSS, shadcn/ui (Radix primitives)
• Animations: Framer Motion
• Charts: Recharts
• Backend: Next.js API Routes (Serverless)
• Database: Supabase (Postgres with pgvector for semantic search)
• AI: OpenAI SDK (gpt-4o-mini for roadmaps, resource discovery, skill extraction)
• Storage: Supabase Storage for resume PDFs
• State Management: Browser Session Storage for roadmap plans and todo completion

🚀 Quick Start

1. Install Dependencies

npm install

2. Environment Variables

Create a .env.local file in the root directory:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key
OPENAI_API_KEY=your_openai_api_key
NEXT_PUBLIC_DEMO_MODE=false

3. Supabase Setup

1. Create a new Supabase project at supabase.com
2. Navigate to SQL Editor in your Supabase dashboard
3. Run the migration files in order:
   • supabase/migrations/001_initial_schema.sql - Creates tables for jobs, resumes, courses, and applications
   • supabase/migrations/002_add_match_jobs_function.sql - Adds vector similarity search function

4. Run Development Server

npm run dev

Open http://localhost:3000 in your browser.

📖 User Flow

Pathway 1: Target Job Roadmap

1. Upload Resume (Landing Page)

   • Upload PDF resume
   • AI extracts skills automatically
   • Skills stored in database with session ID

2. Select Target Job (/dashboard/jobs)

   • Browse and filter available jobs
   • Select a job you want to pursue
   • Click "Generate Roadmap"

3. View Generated Roadmap

   • Gap Analysis: See missing skills highlighted
   • 4-Week Roadmap: Week-by-week todo items with checkboxes
   • Resource Recommendations: Detailed list of learning resources
   • ROI Metrics: Salary jump potential and investment ROI

4. Save Plan

   • Click "Save Plan" to store roadmap in session storage
   • Plan appears in Application Tracker dashboard

5. Track Progress

   • Check off todos as you complete them
   • Progress syncs automatically with session storage
   • View overall progress in tracker table

Pathway 2: Best-Fit Jobs

1. View Recommendations (/dashboard/pathway)

   • AI analyzes your skills and recommends matching jobs
   • See match scores and improvement suggestions

2. Optimize Resume

   • Select a job to optimize for
   • AI generates tailored resume with optimized keywords
   • Download optimized version

📁 Project Structure

wayfinder-monorepo/
├── app/
│   ├── api/                      # API routes
│   │   ├── ingest-resume/       # Resume upload & skill extraction
│   │   ├── navigator-roadmap/   # Generate 4-week roadmap (Pathway 1)
│   │   ├── analyze-gap/         # Skill gap analysis
│   │   ├── optimize-resume/     # Resume optimization for jobs
│   │   ├── explorer-match/      # Best-fit job matching (Pathway 2)
│   │   ├── generate-prep/       # Interview question generation
│   │   ├── jobs/                # Job listing endpoints
│   │   └── track-webhook/       # Application status updates
│   ├── dashboard/               # Dashboard pages
│   │   ├── jobs/                # Pathway 1: Target Job selection
│   │   ├── pathway/             # Pathway 2: Best-fit jobs
│   │   ├── roadmap/             # Roadmap detail views
│   │   └── tracker/              # Application tracker page
│   ├── layout.tsx               # Root layout
│   └── page.tsx                 # Landing page
├── components/
│   ├── ui/                      # shadcn/ui components
│   └── wayfinder/               # Wayfinder-specific components
│       ├── ApplicationTracker.tsx    # Tracker table component
│       ├── MissionControlTable.tsx    # Dashboard tracker
│       ├── RoadmapDrawer.tsx         # Roadmap side drawer
│       ├── OptimizeResumeDrawer.tsx  # Resume optimization UI
│       └── ...
├── lib/
│   ├── openai.ts                # OpenAI API functions
│   │   ├── extractResumeSkills()
│   │   ├── extractJobSkills()
│   │   ├── findResourcesForGaps()
│   │   └── generateWeeklyRoadmapFromResources()
│   ├── supabase.ts              # Supabase client
│   ├── storage.ts                # File storage utilities
│   └── utils.ts                 # Session ID management
├── public/
│   └── dummy-data/              # Demo mode fallback data
└── supabase/
    └── migrations/              # Database migrations

🔌 API Routes

Resume Management

• POST /api/ingest-resume - Upload and parse PDF resume, extract skills
• GET /api/resume/session/[sessionId] - Get resume by session ID
• POST /api/resume/re-extract-skills - Re-extract skills from existing resume
• DELETE /api/resume/[resumeId] - Delete resume

Roadmap Generation

• POST /api/navigator-roadmap - Generate 4-week roadmap with resources
  • Input: session_id, target_job_id, user_skills
  • Output: roadmap (weeks with todos), resources, summary (gaps, ROI)

Job Analysis

• GET /api/jobs - List available jobs with filters
• POST /api/analyze-gap - Analyze skill gaps for a job
• POST /api/explorer-match - Find best-fit jobs for user skills
• POST /api/optimize-resume - Generate optimized resume for job
• POST /api/generate-prep - Generate interview preparation questions

Application Tracking

• PATCH /api/track-webhook - Update application status (used by Chrome extension)

🎨 Key Components

Roadmap Display

• Week-by-week todos: Interactive checkboxes with descriptions
• Resource links: Direct links to learning resources
• Progress tracking: Real-time completion status
• ROI visualization: Salary jump and investment metrics

Application Tracker

• Table view: All saved roadmap plans
• Todo progress: Completed/total todos badge
• Status management: Drag-and-drop or click to update status
• Roadmap drawer: Detailed view with full roadmap

Resume Optimizer

• Job-specific optimization: Tailor resume for target role
• Keyword enhancement: AI adds relevant keywords
• Side-by-side comparison: Original vs optimized
• Download: Export optimized PDF

💾 Data Storage

Database (Supabase)

• Resumes: PDF storage, extracted skills, embeddings
• Jobs: Scraped job listings with requirements and embeddings
• User Applications: Saved roadmap plans, status, ROI metrics

Session Storage (Browser)

• Roadmap Plans: Complete roadmap data with todos and resources
• Todo Completion: Checkbox states for each todo item
• Session ID: Stored in localStorage for cross-page persistence

🔐 Session Management

Session IDs are stored in browser localStorage to maintain state across page navigations. Each user gets a unique UUID that:

• Persists across browser sessions
• Links resumes, roadmaps, and todos
• Enables cross-device access (if session ID is copied)

Note: To use the same data on a different computer, copy the session ID from the first browser's localStorage and set it in the new browser.

🎯 Demo Mode

Enable demo mode to bypass OpenAI API calls and use pre-generated data:

1. Set NEXT_PUBLIC_DEMO_MODE=true in .env.local, or
2. Toggle demo mode from the dashboard (if implemented)

Demo data is located in public/dummy-data/:

• resume-analysis.json
• navigator-roadmap.json
• gap-analysis.json
• explorer-matches.json
• interview-prep.json

🚧 Development Notes

Adding New Jobs

Jobs can be imported via the Python script:

cd scripts
python upload_jobs.py

Vector Search

The app uses pgvector for semantic similarity search:

• Resume embeddings: 1536-dimensional vectors (OpenAI ada-002)
• Job embeddings: Same dimension for matching
• Course embeddings: For resource recommendations

AI Prompts

Key AI functions use structured prompts:

• Resource Discovery: Finds 5-10 relevant learning resources
• Roadmap Generation: Creates 4-week structured plans with todos
• Skill Extraction: Identifies skills from resume text

📝 License

MIT

🙏 Acknowledgments

Built for hackathon demonstration. Uses OpenAI GPT-4o-mini for intelligent content generation and Supabase for scalable backend infrastructure.