Pathfinder — Project Story Inspiration The college admissions process is one of the most consequential — and confusing — experiences a student faces. Yet access to quality guidance is deeply unequal. Students at well-funded schools get dedicated counselors, SAT prep resources, and alumni networks. Students elsewhere navigate the process largely alone, relying on fragmented Google searches, outdated school handbooks, and word of mouth. That gap is not small. Research consistently shows that first-generation college students are significantly less likely to apply to selective schools — not because they are less capable, but because they lack information. One study found that when high-achieving, low-income students received just a single mailing with application guidance, their enrollment at selective colleges increased by over 40%. That statistic stuck with me. The information exists. The tools exist. The barrier is simply access. Pathfinder is an attempt to put a knowledgeable, always-available advisor in every student's pocket — regardless of zip code, school budget, or family background.
What It Does Pathfinder is a web-based guidance platform with five core features:
AI Advisor — A Claude-powered chatbot trained on admissions and career knowledge, available 24/7 for any question a student might be afraid to ask a counselor. College Search — Filter thousands of schools by type, cost, acceptance rate, and location to build a balanced application list. Career Explorer — Browse 12+ career paths with salary ranges, growth outlooks, required skills, and education requirements. Application Checklist — A full 9th-grade-to-decision-day timeline that saves progress automatically. Resource Hub — Curated links to official tools: FAFSA, Common App, Khan Academy, the BLS Occupational Outlook Handbook, and more.
How I Built It:-
The entire application is a single HTML file — no frameworks, no build step, no backend. This was an intentional choice: a self-contained file can be saved to a phone, shared over email, or hosted on any static server, making it maximally accessible. Architecture
pathfinder.html ├── CSS (custom design system — navy/blue/amber palette, Syne + Inter typefaces) ├── HTML (6 page sections, toggled via JS) └── JavaScript ├── College search + filtering logic ├── Career explorer + modal rendering ├── Checklist with localStorage persistence └── AI chat → Anthropic API (claude-sonnet-4-6)
The AI Integration The chat feature calls the Anthropic /v1/messages endpoint directly from the browser. Each request includes a carefully crafted system prompt that scopes the model to college and career guidance:
Challenges I Faced
- Designing for information density without clutter. College admissions involves a lot of data — acceptance rates, deadlines, costs, salaries. The solution was a layered approach: cards show the essential summary, modals reveal full detail on demand.
- Making the AI feel trustworthy, not generic. The system prompt was iterated carefully to push the model toward specificity and directness. Quick-start chips ("FAFSA explained", "ED vs EA") also lower the activation energy for students who don't know what to ask first.
- Zero-dependency constraint. No React, no Webpack, no npm. More verbose in places, but the file loads instantly, works offline once cached, and has no supply-chain attack surface.
- Salary visualization without a charting library. Rather than importing D3 or Chart.js, salary ranges are rendered as proportional CSS bars — visual intuition, not actuarial precision. A bar that's twice as wide communicates "this pays more," which is exactly what a 17-year-old needs when comparing career paths.
What I Learned
Information design is harder than engineering. The trickiest decisions weren't technical — they were about what not to show, and in what order. Stateless APIs are surprisingly capable. Sending full conversation history on every call produces remarkably coherent multi-turn guidance sessions. Friction kills good intentions. Every extra click or login wall is a student who gives up. Ruthless simplification is a feature. The equity framing sharpens every decision. Asking "would a student at an under-resourced school find this useful?" kept the feature set focused on what actually matters
Log in or sign up for Devpost to join the conversation.