Inspiration
We noticed personal finance often feels like a chore – complex, maybe a bit scary, and disconnected from daily life. We wanted to change that, making it engaging and intuitive, inspired by how city-building games make complex systems fun. We aimed to help people see the hidden risks (like CBRE highlighted) and find opportunities for smarter habits (like Capital One encourages).
What it does
FinCity Architect transforms your financial world into a dynamic virtual city you build and manage. It acts as your personal 'smart detective' by checking real-time news sentiment for hidden risks in your investments (addressing the CBRE challenge) which appear as visual alerts in your city. It also (currently simulates) analyzing spending to find optimization opportunities (addressing the Capital One challenge), rewarding you with 'Blueprints' to visually upgrade your city as your financial health improves.
How we built it
We brought FinCity to life using React for the interactive frontend, leveraging Material UI (MUI) for a clean and modern component library. We tapped into the Alpha Vantage API to pull in news data, acting as our 'investment detective'. Core logic uses React's state management to make the city districts, scores, and alerts dynamically update based on user actions and the API results.
Challenges we ran into
Integrating external APIs reliably under time pressure was tricky – we even had to switch news providers due to signup issues! We also hit some initial snags with UI library conflicts which led us to pivot quickly to MUI. Balancing the cool 'city building' concept with demonstrating the core financial risk/insight features within the hackathon timeframe meant simplifying some of the deeper analysis we initially envisioned.
Accomplishments that we're proud of
We're really proud of successfully blending both the CBRE (investment risk) and Capital One (financial innovation/insight) prompts into a single, cohesive application. Getting the virtual city districts to visually react in real-time to both simulated actions and the live API risk check feels great. Honestly, just getting a working, decent-looking demo after overcoming those mid-hackathon challenges feels like a solid win!
What we learned
This was a crash course in financial API integration – understanding their quirks and limitations! We definitely learned the importance of adaptability when our initial UI library plan hit a wall. It also reinforced how crucial clear state management is in React for creating responsive interfaces and how powerful component libraries like MUI are for rapid UI development.
What's next for FinCity
There's so much potential! The immediate next step is full Plaid integration for real transaction analysis to power the spending insights. We'd love to build out the 'FinCity' engine further with more data sources for deeper investment analysis. Expanding the city-building with actual upgrades unlocked by Blueprints, adding user accounts, supporting more investment types (like REITs for CBRE!), and exploring the AR overlay concept are all exciting future possibilities.
Built With
- api
- javascript
- materialui
- node.js
- react
Log in or sign up for Devpost to join the conversation.