CareerPath
Next.js 14 · React · TypeScript · three.js · Supabase · Vercel
An education and career platform for students: one detailed profile, matched against universities, scholarships, internships, careers and courses, with a planner that tracks every application.
1. Context
Applying abroad as a student means living in twenty browser tabs: university rankings in one, scholarship pages in another, deadlines in a notes app, and a vague idea of which career any of it leads to. Many students, especially in Uzbekistan and Central Asia, do all of this on their own, without a counsellor.
CareerPath puts it in one place. You build one profile (your grades, tests, interests, budget and goals) and everything else is matched against it.
2. Problem and Objective
Most platforms either list everything with no sense of fit, or give a single “chance” number nobody can explain. I wanted something more honest:
- Show why something fits, rule by rule, not just a score
- Keep eligibility separate from preference, so “you can't apply” never hides inside a percentage
- Never invent facts: every time-sensitive detail carries its source and how sure we are of it
- Turn the matches into a plan, with real months, deadlines and next steps
3. A Tour of the Platform
The public pages work without an account. A profile unlocks the personal parts: matches, For You, the roadmap and the planner.
The home page is a dark, cinematic showcase: an interactive 3D globe of every university, a scroll story, and a live example profile run through the real matching engine.
Universities: 1,517 institutions in 105 countries, including the full QS World University Rankings 2027. There are ten filters, sorting, links you can share, a grid or a 3D globe, and up to four side by side in Compare.
Opportunities: 377 scholarships, competitions, internships, fellowships, summer programmes and jobs, including every Erasmus Mundus Joint Master. The deadline radar shows what closes each month.
Careers: all 1,016 O*NET occupations with tasks, skills, education and US pay and growth, plus 26 guided career paths with step-by-step plans and a personal Career Match.
Around these sit the tools that turn browsing into a plan:
- For You: personal recommendations, each with the reason it was picked
- Roadmap: a month-by-month plan from today to your intake, covering tests, essays and university and scholarship deadlines, with a readiness score
- Planner: applications, tasks, a calendar and saved items in one place
- Live jobs and courses: internships and entry-level jobs from public job boards, refreshed every six hours, and a search over Coursera's catalogue of 25,000+ courses
- Search everywhere: one categorised search, also on
Ctrl+Kfrom any page
4. How Matching Works
Matching is rule-based, so every score can be explained. For a university, the Profile Match is built from five parts:
Opportunities work differently: eligibility (60%) is kept apart from personal fit (40%), and any rule you don't meet marks the item Not eligible and caps its score. Each detail page shows the rules one by one, so you can see exactly which one you missed. Careers compare your interests, field, skills, goals and activities, then list your strengths and the skills to build next.
And every match says plainly that it is informational. It never claims to predict admission.
5. Data You Can Trust
A platform like this is only as good as its data, so honesty is built into the dataset itself:
- Every time-sensitive fact has a source, an organisation and a status:
verified,indicativeorunverified - QS ranks appear only where checked against the published table
- Deadlines are shown as typical timing from previous cycles, never as confirmed dates. Students enter the confirmed dates in their planner
- Tuition uses indicative bands, and anything not known with confidence is left out and labelled
- Application links point only to official university or programme sites
6. The Path Advisor
The advisor is an AI assistant that doesn't make things up from memory. It works through tools over the dataset: it can search and compare universities and opportunities, check eligibility, look up deadlines and read the guides, and its answers stream in as they're written.
It also never shows an error. If the AI service is slow or unavailable, it switches to a lighter model, and if that fails too, a built-in advisor takes over. That advisor understands comparisons, filtered searches, specific universities and more than 20 advising topics, from essays and tests to visas and funding.
7. System Architecture
- Next.js 14 App Router with TypeScript. The production build generates 333 pages
- Works with zero setup. With no configuration, accounts and data live in the browser (passwords stored as salted PBKDF2 hashes). Add Supabase keys and the same app switches to a Postgres database with row-level security
- 3D without the cost. The globe and career constellation use three.js through React Three Fiber, loaded only on the client, with a static fallback when WebGL is missing and respect for reduced motion
- Live data, cached. Jobs come from public APIs and refresh every six hours; course search runs on the server and is cached for a day
- Tested end to end. A crawler followed all 434 internal links with no broken ones, and 19 browser journeys (signup, profile, filters, planner, search, the advisor, mobile layouts) passed with zero console errors
8. What This Project Demonstrates
CareerPath is product thinking applied to a problem students like me face every application season: a large, sourced dataset, a matching engine that explains itself, an AI assistant that stays grounded and never breaks, and a design that feels calm instead of overwhelming.