A Vite + React single-page app that combines course discovery, learning plans, job tracking, community forums, and AI-driven career tools (resume insights + mock interviews) on top of Supabase.

• Live demo: TBD
• Video demo: TBD
• Slides: TBD

Career preparation is fragmented across multiple tools (courses, job boards, resume feedback, and interview practice). CareerSea consolidates these into one guided experience so users can upskill, track applications, and practice interviews in one place.

• Roadmap-based skill gap tracking, role targeting, and progress streaks
• AI mock interview (voice → transcription → Gemini questions → scoring + feedback)
• Application Tracker with kanban flow + AI SmartFill parsing
• SkillsFuture course search (via SkillFuture dataset proxy) + course details
• MOM dataset insights (Singapore job vacancy trends & categories)
• Job search (Adzuna proxy) + saved jobs
• Learning plan + certificates tracking
• AI resume analysis + personalized recommendations
• Community forums with replies, voting, and real-time updates
• PWA install support + offline caching

The React client talks to Supabase for authentication, database access, storage, and realtime updates. AI features are routed through Supabase Edge Functions, which proxy to Gemini and Google Speech-to-Text. Course and job data are aggregated from Edge Function proxies and Supabase tables.

Textual architecture diagram:

User browser (React SPA) → Supabase Auth (session + user profiles) → Supabase Postgres (courses, jobs, threads, applications, etc.) → Supabase Storage (avatars, resumes, forum images) → Supabase Realtime (forum votes/threads/replies) → Supabase Edge Functions

• Gemini (chatbot, mock interview, skill gap insights)
• Google Speech-to-Text (audio transcription)
• Job search proxy (Adzuna)
• Course directory proxy (SkillFuture)

• Frontend: React 19, TypeScript, Vite, React Router
• State/UX: Context, hooks, GSAP, Three.js, React Markdown
• PWA: vite-plugin-pwa + Workbox
• Backend: Supabase (Auth, Postgres, Storage, Realtime, Edge Functions)
• AI: Google Gemini (via Edge Functions), Google Speech-to-Text
• Testing: Vitest + Testing Library

• Node.js + npm
• A Supabase project with tables/functions configured

cd client
npm install

Create client/.env.local from the example:

cd client
cp .env.example .env.local

Required:

• VITE_SUPABASE_URL
• VITE_SUPABASE_ANON_KEY

Optional / internal:

• SUPABASE_SERVICE_KEY (never commit; only for local admin tooling if required)
• VITE_APP_URL (used by Vite/PWA base path logic for GH Pages vs custom domain)

npm run dev

Other scripts:

npm run build
npm run preview
npm run test

• AI mock interview returns errors → check Edge Function mock-interview + GEMINI_API_KEY.
• Speech-to-text returns empty → verify speech-to-text function secrets and Speech-to-Text API enabled.
• Forum vote counts don’t update → ensure realtime publication includes forum tables.
• Job search has zero results → check adzuna-job-search-v2 Edge Function.
• Course directory errors → ensure SkillFuture proxy Edge Function is reachable.

1. Sign up / log in
2. Complete onboarding + skills profile
3. Browse courses and add to Learning Plan / Certificates
4. Search jobs, save listings, and track applications
5. Practice with AI Mock Interview (record audio → transcript → questions → score)
6. Join forums, post threads, and vote

• Home dashboard (TBD)
• Application tracker (TBD)
• Mock Interview (TBD)
• Forums (TBD)

These are called from the client (paths shown without host):

• POST /functions/v1/chatbot — CareerSea assistant + resume analysis
• POST /functions/v1/mock-interview — interview questions + scoring
• POST /functions/v1/speech-to-text — audio transcription
• POST /functions/v1/wishlist-skillGap-explanation — AI skill gap insights
• POST /functions/v1/auto-detect-applications — parse application text
• GET /functions/v1/adzuna-job-search-v2 — job search proxy

Additional proxy endpoints are used for course directory/analytics (SkillFuture API proxy via Supabase functions).

• Static build with Vite (client/dist)
• GitHub Pages script is configured:
  • npm run deploy
• vite.config.ts uses VITE_APP_URL to choose between custom domain vs GH Pages base path

TechFest/
  README.md
  client/
    .env.example
    package.json
    vite.config.ts
    src/
      components/       # UI components + feature-specific widgets
      pages/            # Route pages (applications, forums, mock interview, etc.)
      services/         # API + data services (Supabase + Edge Functions)
      hooks/            # Custom hooks (votes, realtime, auth, etc.)
      contexts/         # Theme/notifications/PWA context
      core/             # DI, interfaces, patterns
      types/            # Shared TS types
      utils/            # Helpers, formatting, caching

• Track Edge Functions in repo (supabase/functions) with versioned code
• Add seed data + demo script for hackathon judges
• Add e2e demo flows + health checks
• Improve offline mode for PWA

• Bryan, Ray'En, Kaibao, Zheng Mian

TechFest Hackathon Project — All Rights Reserved