Miami Dade College Pathway Navigator

Inspiration## Inspiration

The challenge asked us to imagine a student who wants to become an architect, a mechanical engineer, a chef, a cybersecurity specialist or an IT consultant. Most students at Miami Dade College already have a goal like that. What they don't have is the map.

As a student who also works, I know how this feels. You're juggling a job, classes and family, and the path from "I want to be X" to "I am X" is spread across course catalogs, transfer agreements, certification websites and advising appointments that are hard to book. One wrong course or a missed transfer requirement can cost a semester, and a semester costs money. First-generation students often don't have anyone at home who has walked this path before them.

So I asked: what if any student could pick a career and get a clear, semester-by-semester plan in two minutes, starting at MDC? That became Pathway Navigator.

What it does

Pick a career or take the quiz. Students choose from five careers, or answer a 5-question interest quiz that ranks the careers by fit.
Get a personalized roadmap. Every step is laid out in order: MDC degree, transfer, certifications, internships and licensing. Each step says where it happens, what to do first, and links to the right institution.
Make it fit real life. Students set full-time or part-time, their start term, and credits they already earned (AP, dual enrollment, transfer). Every date and the finish term update instantly.
Track progress. Students check off milestones, watch a progress bar and always see a Next best action.
Take it with them. Copy the roadmap as text for an advisor or family, or share a link straight to a career.

It's free, needs no sign-up and works on a phone.

How I built it

Pathway Navigator is a single-file web app in HTML, CSS and plain JavaScript, with no frameworks and no build step. That kept it fast, easy to deploy and easy for anyone to read.

Careers are data, not code. Each career is one object with an ordered list of steps. Every step has a kind that decides how it affects the timeline:

mdc: the MDC associate degree, with its length calculated from credits and pace
sem: a fixed number of semesters (for example, a university transfer)
par: runs in parallel with school, such as an internship or a certification exam
post: happens after school, such as licensing or a first job

Adding a new career means adding one object. No other code changes.

The timeline math. An associate degree is 60 credits. If a student has already earned $c$ credits and takes $r$ credits per semester, the semesters left at MDC are:

$$ S_{\text{MDC}} = \left\lceil \frac{60 - c}{r} \right\rceil, \qquad r = \begin{cases} 15 & \text{full-time} \ 9 & \text{part-time} \end{cases} $$

Total school time adds up only the steps that take their own time, skipping the parallel ones:

$$ S_{\text{total}} = S_{\text{MDC}} + \sum_{i \,\in\, \text{sem}} S_i, \qquad \text{years} = \frac{S_{\text{total}}}{2} $$

The app then walks forward through Spring and Fall terms from the student's start term to put a real date range on every step. For example, a full-time student with 15 AP credits needs $\lceil 45/15 \rceil = 3$ semesters at MDC instead of 4.

The quiz. Each answer adds points to one or more careers. If career $k$ earns $s_k$ points, its match is shown relative to the top match:

$$ \text{match}_k = 100 \cdot \frac{s_k}{\max_j s_j} $$

Saving and sharing. Progress and settings are saved in the browser's local storage, so returning students pick up where they left off. Each career has its own link (for example #cyber), so a roadmap can be shared directly.

Design for students. The interface is mobile-first, with large tap targets, readable contrast and real buttons for keyboard and screen-reader users. Free Unsplash photos of students and careers help students picture themselves in the role.

Tools. I designed and built it with Claude as an AI pair programmer, kept the code on GitHub, and deployed it on Netlify, which publishes every push automatically.

Challenges I ran into

Accuracy vs. speed. Real pathways depend on catalog details, transfer agreements and licensing rules that change. I built the app so all pathway data lives in one place, labeled the timelines as planning estimates, and pointed every step to an advisor and the official source.
Making time math feel human. Students don't think in "semester 5." They think in "Fall 2029." Turning semester counts into real term dates, while keeping internships and exams from adding fake time, took a few rounds to get right.
Deployment roadblocks. My first attempts to create the repository and deploy automatically were blocked by tool permissions and rate limits. I created the GitHub repository by hand, then connected Netlify to it so every push now deploys itself.
Photos in every environment. One preview environment blocked outside images, so I added a fallback: if a photo can't load, the card shows a clean color background instead of a broken image.