See our demo video and hackathon submission here!
Fluid is a project for HackIllinois 2025.
As college students, we find it difficult to plan for our financial goals. If we want to save up for, say, concert tickets, there isn't a way for us to track that goal; bank apps usually require you to parse through individual transactions to figure out if you're meeting your savings goals. Without an easy way to track progress toward financial goals, it's difficult to learn financial literacy.
Fluid solves two main issues; it provides a custom interface for setting and tracking both long- and short-term financial goals, and it gamifies financial literacy. You can set your own financial goals—for example, saving up for concert tickets, or paying off a car loan—and Fluid will create a simple interface for you to see your progress. When you reach your goal, you get rewarded with a surprise avatar—a fish to add to your virtual aquarium. This app—which is currently functional on both web and mobile—is a great way for young people to build financial literacy.
-
Frontend: React Native. We used this framework for its versatility; it is compatible with both Android and Apple, and is easy to convert into a web app. Our app is currently functioning on both web and mobile.
-
Backend: Node.js. We built a backend server with Node.js and connected it to our frontend and database.
-
Database: We used MongoDB, a NoSQL database service, to host our dummy user accounts. We also used the Capital One Hackathon API, Nessie, to simulate accessing a customer's financial data and expenses.
-
Deployment: We deployed our app with Expo, an easy-to-use, versatile ecosystem of tools to deploy web apps; it is highly compatible with React Native.
- Connecting backend and frontend: Integrating MongoDB with our frontend was tough due to our unique tech stack. Most of our application was written in TypeScript, and MongoDB doesn't have a driver for this language. We had to search through documentation and come up with innovative ways to connect our database to our application.
- React Native: Being new to React Native, there was a learning curve of figuring out the framework. In addition to this, we worked on the mobile and web version of the app in parallel, which was a challenge when features would work on one but not the other. We really wanted to create an app that could be deployed on mobile or as a website. It took a lot of debugging to ensure consistency and functionality.
- UI/UX: Creating a cohesive design was tricky since we needed many custom assets, which we had to hand-draw. Though time-consuming, this approach gave the app a unique look and feel, making it visually engaging.
- Functional application that can be accessed through both a web browser and a mobile application
- Connected backend, database, and frontend for a fully-connected application
- Created a user-friendly, aesthetic UI and intuitive UX
- How to create a versatile React Native application
- How to deploy an app on multiple platforms (mobile, web)
- How to create and manage databases, customer data, and API data to maximize efficiency of the app
One thing we want to add to Fluid is a social component. We were heavily inspired from an app called Habitica, which gamifies to-do lists with fantasy-inspired avatars. Habitica has a social aspect, where you can take quests with friends as you work toward your individual goals.
We wanted to integrate a method for you to share your personal aquarium with friends, and for you to join a leaderboard that shows your progress toward your goals. This adds a fun twist to the game and encourages social support while reaching your individual financial goals.
In addition, we would like to expand the application to allow for groups to tackle goals together. For example, a family might want to save up for a vacation together, and see it reflected in each of their user accounts. This meets the needs of people whose finances are tied closely with one or more other people.