Inspiration: What Is the Specific Problem, and How Do We Know It's Real?

Financial literacy is an essential life skill, yet many high school students struggle to find educational resources that match their existing knowledge and learning goals.

Although financial education materials are widely available online, students face several challenges. Some resources are too basic, while others assume prior knowledge that beginners may not have. Students may also struggle to understand topics such as credit, debit, budgeting, and investing, especially when trying to apply these concepts to real-world financial decisions.

Our team wanted to address a specific problem: How can we help high school students discover financial education resources that match what they know, what they want to learn, and where they need additional practice?

To investigate this problem, we gathered written feedback from a student who worked at YouthBiz Connect, a youth-focused organization involved in financial education.

The respondent identified several challenges, including understanding credit and debit, learning investing fundamentals, and finding resources appropriate for different experience levels. They also highlighted the gap between learning financial concepts and applying them to practical situations, such as managing university expenses, saving money, and planning for future financial responsibilities.

One observation particularly influenced our approach: financial education resources can be either too introductory or too advanced for a student's current understanding.

The respondent recommended providing different learning levels, simple explanations, interactive activities, and real-life financial scenarios. They also suggested exploring Khan Academy as an accessible source of educational content.

This feedback reinforced our decision to focus SkillBridge on personalized resource discovery rather than building another general financial education directory.

Although this represents qualitative feedback from one respondent rather than a large-scale study, it provides firsthand evidence supporting the problem we chose to address. Future student testing would help us better understand the problem's prevalence and evaluate our solution's usefulness.

What SkillBridge Does

SkillBridge is a web application that connects high school students with educational resources based on their interests, learning goals, experience levels, and financial knowledge gaps.

The application provides a structured learning journey through five main features.

Student Authentication

Students can register and sign in using email and password authentication. Their profiles and assessment results are associated with their accounts, allowing them to return without losing their progress.

Personalized Onboarding

Students select the financial topics they are interested in, including budgeting, saving, credit, and investing.

They also describe their learning goals and choose their experience level: beginner, intermediate, or advanced.

These preferences help SkillBridge understand what each student wants to learn.

Financial Literacy Assessment

Students complete a ten-question assessment covering budgeting, saving, credit, and investing.

Assessment questions are retrieved through Supabase Edge Functions, and answers are scored server-side.

After submitting the assessment, students receive an overall score and a topic-by-topic breakdown identifying areas where additional practice may help.

The assessment is intended as a short diagnostic, not a comprehensive evaluation of financial knowledge.

Personalized Recommendation Engine

SkillBridge's central feature is its explainable, rule-based recommendation engine.

The engine ranks educational resources using three factors:

45% — Knowledge-gap relevance: Prioritizes topics where assessment results suggest more practice may help.

35% — Difficulty compatibility: Favors resources appropriate for the student's selected experience level.

20% — Interest and learning-goal alignment: Considers selected interests and keywords from the student's learning goal.

The application displays up to five ranked recommendations, including each resource's provider, topic, difficulty, format, ranking score, and an explanation of why it was recommended.

Ranking scores are comparative values, not probabilities of learning success. The system uses transparent TypeScript rules rather than a trained machine-learning model.

During testing, we demonstrated how SkillBridge responds to changing assessment results. A test account initially scored 5/10, with budgeting and credit among its weakest topics. After a second assessment produced a score of 9/10, saving became the main knowledge gap. SkillBridge automatically adjusted its rankings, prioritizing saving resources instead.

This demonstrated that the recommendation engine could adapt to updated assessment data without requiring manual changes to its ranking rules.

Searchable Resource Library

SkillBridge includes a curated catalog of ten educational resources covering budgeting, saving, credit, and investing.

Resources come from educational providers and organizations including Khan Academy, the Federal Deposit Insurance Corporation (FDIC), the Consumer Financial Protection Bureau (CFPB), SEC Investor.gov, and MyMoney.gov.

Students can search resources by title and description and combine filters for topic, difficulty, and resource type.

They can also open the original educational materials directly through external links.

How We Built It

SkillBridge was developed as a web application using the following technologies:

Frontend

React — User interface and application components

Vite — Frontend development and build tooling

TypeScript — Application logic and recommendation scoring

Tailwind CSS — Styling and responsive interface design

Backend and Database

Supabase Auth — Student registration, login, and authentication

Supabase PostgreSQL — Student profiles, assessment attempts, and learning resources

Supabase Edge Functions — Secure assessment question retrieval and server-side scoring

Row-Level Security (RLS) — Database access controls protecting student-specific information

Development Tools

Git and GitHub — Version control and source-code management

OpenAI Codex — AI-assisted implementation, debugging, and automated testing

ChatGPT — Planning, technical guidance, implementation instructions, troubleshooting, and documentation

The recommendation engine was implemented using deterministic TypeScript scoring rather than a machine-learning model. This approach allows the application to explain how each recommendation was ranked.

The application also supports returning students by preserving their preferences and assessment history and using that saved information to regenerate personalized recommendations.

Challenges We Faced

One of our biggest challenges was integrating multiple application components into a working student experience.

Authentication and Data Persistence

We needed to ensure that student accounts remained authenticated across page refreshes and that saved preferences and assessment results persisted correctly.

This required integrating Supabase Auth with protected routes and student-specific database records.

Database Permissions and Security

During development, we encountered database permission issues that initially prevented assessment questions from loading correctly.

We investigated the permissions and verified that the application could retrieve questions and save assessment results while preserving appropriate access controls.

Secure Assessment Scoring

We wanted assessment scoring to happen securely rather than trusting scores submitted by the browser.

We implemented Supabase Edge Functions to retrieve questions without exposing correct answers and to score submissions server-side.

Deploying and testing these functions introduced additional configuration and environment challenges.

Personalized Recommendations

Designing the recommendation engine required balancing assessment performance, student interests, and resource difficulty.

We also needed to handle missing assessment data, ensure consistent rankings, and generate understandable explanations.

Our limited catalog of ten resources created another challenge: providing meaningful recommendations without overstating the precision of the system.

End-to-End Integration

Connecting onboarding, assessment submissions, saved results, recommendations, and resource search required extensive testing.

During development, we used automated tests and manually verified important workflows, including authentication persistence, profile editing, assessment retakes, and recommendation updates.

What We Would Build Next

SkillBridge is a working prototype, but there are several ways we would like to improve it.

Expand the Resource Library

We would add more educational materials across additional financial topics, difficulty levels, and learning formats.

Introduce More Practical Learning Activities

Based on the feedback we received, we would explore interactive activities involving budgeting, university expenses, credit management, and introductory investing.

Conduct Broader Student Testing

We would gather feedback from more high school students to evaluate usability, recommendation relevance, and whether the application helps them discover appropriate resources.

Improve Personalization

We would explore more detailed learning preferences, additional assessment questions, and improved recommendation methods while maintaining transparency.

Explore Community Partnerships

Through our team's connection with YouthBiz Connect, we could explore future opportunities to connect students with relevant financial education workshops and community resources.

SkillBridge is currently an independent prototype. Any official integration or partnership would require the organization's approval.

AI Tools and Development Assistance

We used OpenAI Codex and ChatGPT extensively throughout SkillBridge's development and submission preparation.

OpenAI Codex assisted substantially with generating and modifying application code, implementing features, debugging technical issues, writing automated tests, and integrating application components.

ChatGPT assisted with project planning, technical architecture, troubleshooting, and generating detailed task instructions and implementation descriptions that we provided to Codex. These instructions outlined feature requirements, development objectives, technical constraints, and testing expectations.

Additionally, this entire written project description was generated by ChatGPT, using information supplied by our team about the project's development, technical implementation, challenges, community feedback, and future goals.

ChatGPT also assisted with preparing our video narration scripts, documentation, and other hackathon submission materials.

Our team identified the problem, selected the solution, established the project's goals, gathered community feedback, directed the AI-assisted development process, and manually tested the application's functionality.

We are disclosing these contributions to accurately represent how AI tools were used throughout SkillBridge's development and submission process.

Conclusion

SkillBridge addresses a practical challenge in financial education: helping students find resources that match their current knowledge and individual learning goals.

By combining a searchable resource library, SkillBridge provides a more personalized starting point for learning about money.

Our goal is not to replace traditional financial education, but to make existing educational resources easier to discover and navigate.

From "Where do I start?" to "Here's my next step." That's SkillBridge.