FinCity

Watch your money habits shape the skyline!

Comment 8

Inspiration

As a teenager, did you ever think about financial literacy? Think back to the first time you learned about money. For most of us, it wasn't in a classroom, it was rolling the dice in Monopoly, collecting $200 at Go, and calling it a day. That was the extent of our financial education. And the numbers show it.

Only 28% of teenage boys and 15% of teenage girls in Australia demonstrate basic financial literacy (Unsw) , meaning the vast majority of young Australians are stepping into adulthood completely unprepared for the real financial decisions ahead of them. Zoom out further, and around 8.5 million Australians ( 45% of the adult population) are considered financially illiterate (Money magazine), all because we didn't have this education at the right time.

The consequences are tangible, and they're hitting teenagers hard. Young Australians are taking on debt they don't understand, falling into Buy Now, Pay Later traps that spiral before they've even landed their first job, and making investment decisions based on TikTok trends rather than any real foundation of knowledge. The first taste of financial freedom becomes a source of anxiety, shame, and stress, not because they're reckless, but because they were simply never taught.

We built FinCity because the gap between what teenagers know and what they need to know is too wide and too consequential to ignore. FinCity allows users to track and learn healthy spending habits through a dynamic, visually changing city, Money isn't Monopoly. It's time we treated it that way.

What it does

The solution we came up with is FinCity. FinCity is an application that gamifies your spending and investment habits. Like many teens, we found the spreadsheets and numbers very confusing to understand. FinCity creates an interactive 3D city that reflects your spending habits, without overwhelming users with complex data.

Each transaction updates the city. Smart saving and spending build gleaming towers, vibrant cities and clear skies. Overspending and impulse buying create storms that collapse your creations. The city will mirror your decisions, guiding you towards better financial spending decisions interactively.

For easy use, FinCity prompts the user to enter their transaction details with 3 simple taps as soon as they make a payment, so logging transactions takes seconds, not minutes and definitely no backfilling. As your spending pattern develops, our AI engine analyses your patterns and creates personalised lessons and quests for you. Users can use this tailored guidance to build their habits and develop their city.

FinCity also brings in your friends to keep you all accountable. Groups can be created to keep track of your friends' cities, and compete on the leaderboard to reward financial behaviours that actually matter. By combining 3D gamification, AI-driven personalised lessons and social accountability, FinCity develops critical financial habits while keeping it fun, engaging and empowering the youth.

How we built it

We kicked off by establishing a clear architecture and splitting the project into focused, parallel streams so no one was blocked waiting on someone else. From the start, we knew that building something as layered as FinCity, with graphics, AI systems, and backend infrastructure, would require strong coordination and modular thinking. Each team member took ownership of a specific area so we could move quickly while still building components that would eventually work together seamlessly.

One stream focused on the 3D city rendering, designing the visual system that represents a user’s financial habits as a living environment. Another team member worked on the front-end development, ensuring that logging transactions and interacting with the platform felt intuitive and fast. At the same time, another developer handled the backend infrastructure and frontend integration, setting up secure data handling, authentication, and the systems needed for user groups and social features. Meanwhile, the rest of the team focused on shaping the story and pitch, making sure the idea stayed clear, engaging, and easy to understand.

Powered by Three.js, our platform visualises personal finance through a living 3D city that evolves and reshapes itself according to each user’s spending behaviour. Every transaction updates parameters that influence how the city grows, whether that means expanding infrastructure, new buildings appearing, or environmental changes that reflect financial habits.

On the backend, we used Supabase with PostgreSQL, which allowed us to quickly build a scalable system for storing user data, managing authentication, and enabling secure group interactions. Supabase’s Row Level Security policies helped ensure that financial data remained private while still allowing users to interact socially through shared groups and leaderboards.

To power the educational side of the platform, we integrated multiple AI APIs that analyse spending behaviour and generate personalised lessons and financial quests. Instead of offering generic financial advice, these systems allow FinCity to respond dynamically to each user’s habits, suggesting learning content that is relevant to where they are in their financial journey.

While each individual component was a challenge on its own, the real building magic happened when we began integrating everything together. Watching the city engine, financial inputs, AI insights, and social systems come together felt like assembling the final pieces of a puzzle. What started as separate modules suddenly became part of the same puzzle, where user behaviour could flow through the backend, influence the AI engine, and ultimately reshape the city in real time.

Challenges we ran into

Unknown tech was definitely our first obstacle. We dived into unknown territories like 3D web dev and researched and learned new concepts like Three.js and Next.js

The 3D City was our biggest unknown. None of us had shipped a 3D web experience before. We spent serious time sitting with the docs, learning Three.js from scratch, and figuring out how to make a city that didn't just look impressive but rather feels reactive and alive. We started with simple blocks and spheres for our building, trees and clouds that we had to continuously refine and develop to create a realistic animated city. We utilised AI tools like Claude to work side by side with us and teach us these technologies in real time. We also found some amazing videos online that acted as a backbone for our implementation.

The Backend threw its own curveballs. Working with Supabase's RLS policies to support secure multi-user group functionality was more complex than we anticipated, with infinite loops and authentication errors. We had to learn how to balance security through RLS policies while maintaining usability in the application.

However, the Integration was the final boss. Each of us had been building our own component (city logic, AI lessons, backend, frontend) in isolation, and assembling everything into a single coherent product was its own project. Most of our time was spent integrating 3D rendering and city gameplay logic together as each new development introduced a new layer of complexity.

We learned fast that clear communication and agreed API contracts between teammates are just as important as the code itself.

Time allocation was also a skillset which we developed over the course of the 2 days. Since most of us were first-timers, we often underestimated the time taken, leading to a plan and execution mismatch. Our experience was our teacher along the way.

Accomplishments that we're proud of

In 48 hours, we built a living 3D city that responds to your financial decisions, an AI engine that learns your spending habits and coaches you in real time, and a multiplayer social layer that turns financial accountability into something you actually look forward to. That's what we shipped in a weekend. And we're only just getting started.

Our first major milestone was getting the 3D city up and running and it was the most technically challenging part of the build. None of us had worked with Three.js before, so getting dynamic maps, real-time 3D rendering, and live city changes responding to financial data was a steep learning curve. When it finally worked, it validated the entire concept. The city is the heart of FinCity, and getting it right set the foundation for everything else we built on top of it.

The group functionality is one of the features we are particularly proud of. Enabling multiple users to connect, visit each other's cities, and compete on real-time leaderboards presented significant technical challenges. Achieving seamless synchronisation required extensive brainstorming, careful implementation of database security policies such as Row Level Security (RLS), and persistent debugging of real-time update mechanisms. Despite these complexities, the result is a feature that introduces a meaningful social dimension to the platform and encourages collaborative engagement.

Another aspect we are proud of is the AI-powered lesson engine. Instead of delivering generic financial advice, we aimed to create a system that responds dynamically to individual user behaviour. The engine analyses spending patterns and recommends relevant lessons and quests tailored to each user’s financial habits. This personalized approach ensures that educational content is presented at moments when it is most meaningful, rather than relying on broad, one-size-fits-all financial guidance. Seeing the system successfully surface relevant lessons based on real user behaviour reinforced our confidence in the value of the product.

Finally, we are proud of how our team collaborated throughout the development process. We began the hackathon with ambitious goals, a limited timeframe, and multiple components being developed in parallel. Integrating these components toward the end of the development cycle presented its own set of challenges. However, through clear communication, mutual support, and effective use of each team member’s strengths, we were able to overcome these obstacles.

Delivering a fully functional product within a single weekend stands as a significant achievement for the team.

What we learned

Planning is not optional. Start early and start properly. Coding before planning just creates code that does nothing, and poor planning creates an application that has no vision. We started off on Friday night, mapping our ideas, agreeing on components and techstacks and creating the UI features. This head start gave us the initial jump to push through the next two days of building and collaboration.

Play to your strengths. We allocated tasks based on what each person was genuinely skilled at, not just who was free. The result was better work, delivered faster, with less friction.

Celebrate the milestones. Even something as simple as getting the base city UI working deserved a cheer. Our morale is our backbone. Keeping it high creates the motivation and the persistence we need to survive a 48-hour Hackathon.

What's next for FinCity

FinCity is a fully functional Progressive Web App as of today. The longer we worked on FinCity, the more we realised that the problem it solves doesn't stop at teenagers. Poor financial literacy doesn't discriminate by age; thus, neither should FinCity. The roadmap ahead is wide open, and the potential is enormous.

The Classroom: Right now, financial education in Australian schools is almost non-existent. Imagine introducing them to FinCity. Teachers could assign real financial quests, set savings challenges, and watch student progress unfold across a live leaderboard. Every student is responsible for their own city and by being a part of the same classroom group, they hold each other accountable and compete for spots on the leaderboard.

Parents and Kids: Every parent wants to teach their kids about money. Almost none of them know how to make it stick. FinCity becomes the conversation starter that doesn't feel like a lecture, it’s a shared world where parent-set savings goals appear as quests, where kids can see their city grow when they make smart choices, and where the whole family has a reason to talk about money that doesn't end in an eye-roll. Financial values are passed down through gameplay. That's something worth building.

University Students: The jump from living at home to managing rent, groceries, and a social life on a student budget is one of the most financially overwhelming moments in a young person's life. Most navigate it by trial and error and the errors are expensive. FinCity meets university students exactly at that inflection point, turning the chaos of first-time budgeting into a game with clear, immediate feedback. The habits built here follow you and give direction for life.

What you're seeing today is the foundation of something much bigger. FinCity has the potential to reach every teena ger sitting in a classroom, every university student staring down their first budget, every parent looking for a better way to start the money conversation, and every young person navigating the financial world without a map. The city is yours to take. Now it's time to grow it.

Built With

+ 78 more
Share this project:

Updates

posted an update —

It didn't show up on our post, but our application uses Apple Shortcuts to set up the payment tracking system. We've connected it to https://fincity.space/pay where upon completing an apple wallet transaction, this automation is triggered which opens up a page for users to categorise the type and quantity of the transaction in three clicks. This is easily set up on Android as well.

The link below show's the setup: https://youtube.com/shorts/S-GwFQH6WxE?feature=share

Log in or sign up for Devpost to join the conversation.