Student Financial Aid

Inspiration As a high school senior navigating college applications, I realized how overwhelming it was to track tuition, fees, acceptance rates, and aid opportunities for each school. Families often spend hours piecing together information across multiple sites. I wanted to create a tool that puts everything in one place and makes planning simple.

What it does Student Financial Aid allows students and parents to compare colleges instantly. By entering GPA and family income, the app shows estimated tuition, in-state vs. out-of-state costs, and grant eligibility. It generates a personalized breakdown of total costs, grants, loans, and out-of-pocket expenses, all in an easy-to-read dashboard. How we built it We built the app using React + Vite for the frontend and Node/Express for the backend. Data comes from the U.S. Department of Education’s College Scorecard API. TailwindCSS was used for styling, and Recharts powers the visual breakdowns. We focused on rapid development and scalability during the hackathon.

Challenges we ran into • Integrating the College Scorecard API with custom inputs (GPA & income) • Designing a clean UI that was both informative and not overwhelming • Handling static vs. dynamic grant logic while ensuring results stayed realistic • Debugging environment variable setup for smooth deployment

Accomplishments that we're proud of • Building a fully functional financial aid estimator in under a weekend • Creating an intuitive UI with visual breakdowns (donut charts, tooltips, scenarios) • Turning a personal frustration into a working solution that can help many families

What we learned • How to work with government APIs and structure data for custom use cases • The importance of balancing technical accuracy with user-friendly design • That even simple prototypes can spark big impact when solving real problems

What's next for Student Financial Aid • Expanding data coverage to scholarships and state-specific aid • Adding student loan calculators and repayment planning tools • Allowing users to save profiles and compare multiple schools side by side • Deploying the app for public use to support students and parents nationwide

Built With

• api
• college
• express.js
• node.js
• react
• recharts
• scorecard
• tailwindcss
• typescript
• vite