Team 57_Wayfinder

Wayfinder uses AI to transform fragmented career data into personalized 4-week learning roadmaps, helping fresh graduates bridge skill gaps and discover best-fit jobs in Singapore's competitive market

Comment

Wayfinder: AI Career Navigation Engine (Team 57)

The Problem

Fresh graduates in Singapore face fragmented career data across job boards, course catalogs, and career resources. This fragmentation makes it hard to:

  • Identify skill gaps between their resume and target roles
  • Find relevant upskilling resources
  • Build actionable learning roadmaps
  • Track progress toward employment goals

Wayfinder unifies this data into personalized, actionable 4-week upskilling roadmaps with intelligent resource recommendations and automated application tracking.

Our Solution

Wayfinder is an AI-powered platform that transforms fragmented career information into personalized roadmaps. It offers two pathways:

Pathway 1: Target Job — Select a specific job → AI analyzes skill gaps → Generates personalized 4-week roadmap with course recommendations → Track progress

Pathway 2: Best-Fit Jobs — AI recommends jobs you're best suited for → Shows match scores and improvement suggestions → Resume optimization for specific roles

Architecture Flow Explanation

Pathway 1: Target Job Roadmap

  1. Resume Upload (/api/ingest-resume)

    • User uploads PDF → PDF parsing → OpenAI extracts skills → Generate embedding → Store in resumes table

  2. Job Selection (/api/jobs)

    • User browses jobs from jobs table

  3. Roadmap Generation (/api/navigator-roadmap)

    • Fetch job requirements → Extract job skills (if missing) → Compare with user skills → Identify gaps
    • AI Resource Discovery: GPT-4o-mini searches/scrapes for learning resources (courses, tutorials, documentation, articles, videos) for each missing skill
    • AI Todo Generation: GPT-4o-mini structures resources into 4-week roadmap with week-by-week actionable todos (2-4 todos per week)
    • Each todo links to a specific learning resource
    • Return structured 4-week roadmap with todos and resources

  4. Progress Tracking

    • Roadmap saved to sessionStorage → User checks off todos → Progress synced locally

Pathway 2: Best-Fit Jobs

  1. Job Matching (/api/explorer-match)

    • Generate embedding from user skills → Vector search jobs table → Get top 5 matches
    • LLM verification: Send top matches + resume to GPT-4o-mini → Verify match scores
    • Filter matches ≥75% → Return ranked list with matched/missing skills

  2. Resume Optimization (/api/optimize-resume)

    • Fetch job requirements → Compare with resume → Identify missing keywords
    • GPT-4o-mini analyzes actual resume content → Generate honest optimization suggestions
    • Return keyword checklist, summary suggestions, and bullet points

Building Wayfinder: Architecture & Engineering

Modern Tech Stack

  • Frontend: Next.js 14 (App Router), React 18, TypeScript
  • Backend: Next.js API Routes (Serverless)
  • Database: Supabase (PostgreSQL with pgvector for semantic search)
  • AI/ML: OpenAI GPT-4o-mini, text-embedding-ada-002 (1536-dim vectors)
  • Storage: Supabase Storage for resume PDFs
  • UI: Tailwind CSS, shadcn/ui (Radix primitives), Framer Motion

Core Technical Challenges

Semantic Vector Search Engine

  • Implemented pgvector for similarity search across jobs, courses, and resumes
  • Generated 1536-dimensional embeddings using OpenAI's ada-002
  • Built custom RPC functions (match_jobs, match_courses) with cosine similarity thresholds
  • Optimized with IVFFlat indexes for fast vector queries
CREATE OR REPLACE FUNCTION match_courses(
  query_embedding vector(1536),
  match_threshold float,
  match_count int
)
RETURNS TABLE (
  id uuid,
  title text,
  provider text,
  cost_sgd numeric,
  skills_taught text[],
  url text,
  similarity float
)
LANGUAGE sql STABLE
AS $$
  SELECT
    courses.id,
    courses.title,
    courses.provider,
    courses.cost_sgd,
    courses.skills_taught,
    courses.url,
    1 - (courses.embedding <=> query_embedding) as similarity
  FROM courses
  WHERE 1 - (courses.embedding <=> query_embedding) > match_threshold
  ORDER BY courses.embedding <=> query_embedding
  LIMIT match_count;
$$;

Multi-Stage AI Processing Pipeline

  • Resume Parsing: PDF text extraction → AI skill extraction → Embedding generation
  • Job Analysis: Job description scraping → Skill requirement extraction → Gap analysis
  • Resource Discovery: GPT-4o-mini searches/scrapes for learning resources (courses, tutorials, docs, articles, videos) for each missing skill
  • Roadmap Generation: GPT-4o-mini structures resources into 4-week actionable plans with week-by-week todos (2-4 todos per week), each linked to specific learning resources

Dual-Pathway System Architecture

  • Pathway 1: Job → Resume gap analysis → Roadmap generation
  • Pathway 2: Resume → Vector similarity matching → LLM verification → Ranked job recommendations

Real-Time Progress Tracking System

  • Session-based state management with localStorage persistence
  • Interactive todo checkboxes synced across components
  • Application status workflow

PDF Processing & Secure Storage

  • Server-side PDF parsing with pdf-parse
  • Secure file upload with validation (10MB limit, PDF magic bytes check)
  • Supabase Storage integration with signed URLs
  • Resume text extraction and skill identification

API Architecture

Built 8+ RESTful API endpoints:

  • /api/ingest-resume - Resume upload & skill extraction
  • /api/navigator-roadmap - Generate 4-week roadmap
  • /api/analyze-gap - Skill gap analysis
  • /api/explorer-match - Best-fit job matching
  • /api/optimize-resume - Resume optimization
  • /api/generate-prep - Interview question generation
  • /api/jobs - Job listing with filters
  • /api/track-webhook - Application status updates

What Makes Wayfinder Unique

Dual-Pathway Career Navigation

Two complementary approaches:

  • Target Job Pathway: For focused career pivots
  • Best-Fit Pathway: For exploring opportunities

LLM-Verified Vector Matching

  • Initial vector similarity search finds candidates
  • GPT-4o-mini verifies matches with full context
  • Filters to match scores ≥ 75% for quality
  • Combines speed of vector search with accuracy of LLM analysis

Honest Resume Optimization

  • AI analyzes actual resume content only
  • Reframes real experience without fabrication
  • Provides keyword checklist based on evidence
  • Ethical approach to resume enhancement

Interactive Multiverse Timeline

  • Visual roadmap with animated timeline
  • Shows progression from current skills → courses → target job
  • Clickable nodes with course details and costs
  • Progress visualization with completion percentages

Demo Mode for Presentations

  • Zero-latency demonstrations using pre-generated JSON
  • Toggleable demo mode for presentations
  • Useful for testing without API costs

Resume optimizer

  • Identify key points specific to the job selected
  • Identify keywords

Crafting the User Experience

Modern, Intuitive Interface

Landing Page

  • Gradient background (blue → purple)
  • Drag-and-drop resume upload with visual feedback
  • Clear value proposition with feature highlights
  • Responsive design for mobile and desktop

Dashboard Design

  • Status Badges: Color-coded application status indicators
  • Progress Tracking: Visual completion percentages (completed/total todos)
  • Filter & Search: Real-time filtering by status and keywords

Roadmap Visualization

  • Week-by-Week Todos: Interactive checkboxes with descriptions
  • Resource Cards: Direct links to learning resources with metadata

Resume Optimizer

  • Side-by-side comparison view
  • Highlighted keyword matches
  • Actionable suggestions with evidence-based recommendations
  • Download optimized version

UX Features

  1. Zero-Friction Onboarding: Upload resume → Instant skill extraction → Immediate dashboard access
  2. Progressive Disclosure: Information revealed as needed
  3. Real-Time Feedback: Toast notifications for actions, loading states
  4. Persistent State: Session-based storage maintains progress across sessions
  5. Error Handling: Clear error messages with recovery suggestions
  6. Accessibility: Semantic HTML, keyboard navigation, screen reader support

Visual Design Principles

  • Color Palette: Blue-purple gradients for trust and innovation
  • Typography: Clear hierarchy with bold headings and readable body text
  • Spacing: Generous whitespace for clarity
  • Animations: Subtle Framer Motion animations for feedback
  • Consistency: Unified component library (shadcn/ui)

Impact & Results

For Fresh Graduates

  • Reduced Information Overload: Unified platform consolidates fragmented data
  • Clear Action Plans: 4-week roadmaps with specific todos
  • Progress Visibility: Track advancement toward career goals

Technical Achievements

  • Scalable Architecture: Serverless API routes handle concurrent requests
  • Efficient Search: Vector similarity search processes thousands of jobs/courses in milliseconds
  • AI Integration: Multiple AI models working in harmony (embeddings + LLM)
  • Data Pipeline: Automated job scraping → processing → embedding → matching

What's Next

  1. Chrome Extension: Auto-track applications from job boards
  2. Mobile App: Native iOS/Android for on-the-go tracking
  3. Community Features: Share roadmaps and success stories
  4. Advanced Analytics: Career progression insights and trends
  5. Integration: Connect with LinkedIn, GitHub, and other platforms

Closing Thoughts

Wayfinder addresses fragmented career data by unifying job listings, course catalogs, and resume analysis into actionable roadmaps. With semantic search, AI-powered analysis, and an intuitive interface, it helps fresh graduates in Singapore's data-driven market close skill gaps and navigate their career journey.

Built with: Next.js, TypeScript, Supabase, OpenAI, Tailwind CSS

Team: Team 57

Wayfinder - Transforming career information into actionable roadmaps, one resume at a time.

Built With

  • next.js
  • openai
  • supabase
Share this project:

Updates