Ranker

A career exploration and ranking app that maps your skills, interests, and traits against a dynamic hierarchical job database to surface the best-fit roles.

What It Does

Ranker helps users discover career paths through structured self-assessment and data-driven matching:

• Skill Spider Chart — A live radar visualization of your rated skills, interests, and personal traits.
• Career Tree Explorer — Browse an unlimited-depth hierarchy of industries, categories, subcategories, and jobs stored in a dynamic adjacency-list database.
• Interactive Quizzes — Rate yourself across dimensions; results feed the matching engine.
• Smart Job Matching — Algorithmic scoring against job-specific skill requirements. Shows match percentage and gap analysis.
• User Authentication — Supabase-powered auth with email/password, Google OAuth, and Apple OAuth. (Currently mocked for development.)

The career hierarchy system is fully dynamic — categories, subcategories, and jobs can be added without code changes. Parent nodes automatically aggregate stats from their children via PostgreSQL triggers.

Tech Stack

Layer	Technology
Framework	React 18 + Vite 6
Language	TypeScript
UI	Tailwind CSS v4 + shadcn/ui primitives + Radix UI
Icons	Lucide React
State	React Context (Auth) + local component state
Charts	Recharts (spider chart)
Backend	Supabase (PostgreSQL + Auth)
Local Cache	IndexedDB (quiz data persistence)

Quick Start

# Install dependencies
npm install

# Start the dev server
npm run dev

# Open http://localhost:5173

Project Structure

src/
  app/
    App.tsx                  # Main router / auth gate
    components/
      HomePage.tsx           # Dashboard (spider chart + career explorer)
      CareerMatchesPage.tsx  # Job match results with scores
      CareerPathExplorer.tsx # Visual tree browser
      QuizzesPage.tsx        # Self-assessment quizzes
      ProfilePage.tsx        # User profile
      LoginPage.tsx          # Auth screens
      Navigation.tsx         # Sidebar navigation
      SkillSpiderChart.tsx   # Radar chart component
  contexts/
    AuthContext.tsx          # Auth, quiz data, profile state
  data/
    careerHierarchy.ts       # Static fallback hierarchy
    careerSchema.sql         # PostgreSQL schema for Supabase
    sampleCareerData.sql     # Seed data
  types/
    career.ts                # Shared TypeScript types
  utils/
    careerApi.ts             # Supabase CRUD + matching logic
    careerTreeBuilder.ts     # Adjacency list → tree builder
    indexedDB.ts             # Local quiz data cache
    supabase/client.ts       # Supabase client singleton
supabase/
  functions/server/          # Edge function stubs (optional)
guidelines/
  Guidelines.md              # Project design guidelines
docs (top-level markdown)
  CAREER_SYSTEM_ARCHITECTURE.md      # Schema & trigger architecture
  MOBILE_MIGRATION_PLAN.md           # React Native migration notes
  PLATFORM_COMPATIBILITY_SUMMARY.md  # Browser / platform compatibility
  SUPABASE_QUICK_START.md            # Database setup steps

Database Architecture

The career hierarchy uses a dynamic adjacency list with automatic aggregation via triggers:

• career_nodes — Self-referencing table for root → category → subcategory → job.
• career_skill_requirements — Minimum ratings (0–10) per skill for each job.
• career_aggregated_stats — Auto-cached averages/medians for parent categories (updated by trigger).

See CAREER_SYSTEM_ARCHITECTURE.md for the full data-flow diagram and trigger logic.

Configuration

Supabase Setup

1. Create a Supabase project.
2. Run src/data/careerSchema.sql in the SQL editor.
3. Run src/data/sampleCareerData.sql to seed demo data.
4. Add your Supabase URL + anon key to src/utils/supabase/client.ts.

Auth

The app ships with a mock user (demo-user-123) to bypass login during development.

To enable real auth, uncomment the session-check block in AuthContext.tsx.

Notable Features

• Dynamic Tree Rendering — Categories can nest arbitrarily deep; the tree builder handles it.
• Skill Matching Algorithm — findMatchingJobs() normalizes user ratings against job requirements and returns ranked matches with gap lists.
• Mobile Migration Plan — Documented path to a React Native port (MOBILE_MIGRATION_PLAN.md).

License

No explicit LICENSE file. Assume all rights reserved unless otherwise stated.

---

Designed & built by Reuben Roy.