Inspiration

For many young adults, managing money can feel overwhelming. Between student loans, everyday expenses, savings, and future financial goals, it's difficult to understand the bigger picture of your financial health.

We noticed that most financial tools focus on showing people how much money they have, but not necessarily what those numbers mean or how their decisions could impact their future.

Inspired by PNC Bank's 360° Financial Health Navigator challenge, we created NextMove 360 to make financial wellness more accessible, understandable, and interactive, especially for students and young adults navigating financial independence for the first time.

We wanted to create something that doesn't just track money, but helps people confidently decide what to do with it.

What it does

NextMove 360 is an interactive financial health platform that helps users understand their finances, evaluate their financial wellness, and explore potential future outcomes.

Our application includes three main workspaces:

  1. Financial Dashboard

Users can view their complete financial picture through eight key financial metrics, including total assets, debt, net worth, liquid cash, monthly income, expenses, monthly surplus, and surplus rate.

The dashboard organizes financial information into an aesthetic, easy-to-understand interface with visualizations and financial insights.

  1. Financial Health

NextMove 360 evaluates three important financial wellness indicators:

Cash Flow Health: Whether a user earns more than they spend.

Emergency Savings Coverage: How many months of essential expenses their savings can cover.

Debt Payment Health: How much of their monthly income goes toward debt payments.

Each indicator is dynamically calculated using financial data stored in our database, helping users identify both financial strengths and areas for improvement.

  1. What-If Simulator

Our interactive simulator allows users to explore how financial decisions might affect their future.

By adjusting variables such as monthly spending reductions and one-time purchases, users can instantly see how their projected cash balance could change over the next 90 days.

Rather than simply displaying historical information, NextMove 360 encourages users to think proactively about their financial future.

How we built it

We built NextMove 360 as a full-stack web application using modern web technologies.

Our technology stack includes:

Next.js and React: To create our interactive, multi-page web application.

TypeScript and JavaScript: To implement financial calculations, application logic, and user interactions.

Node.js: To support our development environment and backend functionality.

Tailwind CSS: To design a responsive, modern financial dashboard.

Supabase (PostgreSQL): To store financial information and calculate financial metrics using SQL queries and database views.

Next.js API Routes: To connect our frontend to the database and retrieve financial information dynamically.

Git and GitHub: To manage our code, track progress, and collaborate as a team.

We structured our application around three separate workspaces and created reusable components to keep the interface consistent.

Financial data flows from our Supabase database through our API into the dashboard, where users can view their financial indicators and experiment with hypothetical scenarios.

For our prototype, we used fictional financial data to demonstrate the application's functionality without exposing sensitive personal financial information.

Challenges we ran into

One of our biggest challenges was our limited coding experience.

As beginners, we had to learn how to build a full-stack application while simultaneously developing it under hackathon time constraints.

We encountered several technical obstacles, including:

Connecting our Supabase database to our Next.js application.

Troubleshooting compilation errors, missing components, and incorrect file extensions.

Creating separate pages and fixing navigation errors.

Making our financial indicators calculate dynamically instead of displaying hardcoded values.

Designing a user interface that was both aesthetically appealing and easy to navigate.

Managing our development environment and keeping our code organized through GitHub.

One particularly challenging part was transforming a basic dashboard into a polished financial application with separate workspaces, interactive features, and consistent visual design.

Every error required us to research, experiment, debug, and understand something new.

Accomplishments that we're proud of

Our biggest accomplishment was building a working full-stack application despite starting with limited coding experience.

What began as an idea turned into a functional financial health navigator with a connected database, dynamic financial calculations, interactive simulations, and a modern user interface.

We're particularly proud that:

We successfully connected a PostgreSQL database to our frontend through an API.

Our financial dashboard displays eight dynamically retrieved financial metrics.

We developed three financial health indicators using real calculations rather than hardcoded values.

We built an interactive What-If Simulator that responds immediately to user inputs.

We created a cohesive, multi-page interface that makes complex financial information more approachable.

We learned to collaborate, debug, and manage a software project using GitHub.

Most importantly, we're proud that we challenged ourselves to build something outside our comfort zones and created a prototype addressing a meaningful financial wellness problem.

What we learned

This hackathon taught us far more than how to write code.

On the technical side, we learned how frontend interfaces, backend APIs, and databases work together to power a full-stack application. We gained hands-on experience with React, Next.js, TypeScript, SQL, Supabase, Tailwind CSS, and GitHub.

We also learned how to debug errors systematically, organize reusable components, and turn financial concepts into working calculations.

Beyond programming, we developed important skills in teamwork, problem-solving, time management, and adapting when things didn't go as planned.

One of our biggest takeaways was that you don't have to know everything before you start building something meaningful. Through persistence, experimentation, and continuous learning, we were able to turn an unfamiliar technical challenge into a working product.

We also learned that successful financial technology isn't just about accurate calculations. It's about presenting information in a way that people can actually understand and use.

What's next for 360

We envision NextMove 360 evolving into a more comprehensive and personalized financial wellness platform.

Our future plans include:

AI Financial Coach: An intelligent assistant that explains financial indicators, answers questions, and provides personalized financial education.

More Advanced Simulations: Expanded forecasting tools that help users evaluate long-term saving strategies, debt repayment, and major purchases.

Financial Goal Tracking: Tools to help users set, monitor, and achieve savings goals.

Real Account Integration: Secure connections to financial accounts, with appropriate user consent, to replace fictional demo data.

Personalized Recommendations: More context-aware insights based on individual financial circumstances and goals.

Enhanced Visualizations: Additional interactive charts that make financial trends and future possibilities easier to understand.

Ultimately, our vision is to make NextMove 360 a tool that helps young adults move beyond simply tracking their finances and toward actively shaping their financial futures.

Built With

Share this project:

Updates

Submission history