Challenges that we’re responding to:
- Capital One | Best Financial Hack
- Best use of Google Cloud
- Best Domain Name from Domain.com
- We used the domain “followthemoney.tech”
As kids, we (Clare and Emilio) remember writing on dollar bills with sharpies, hoping that someday the bill would come back to us after its journey across the US. Of course, because there are billions of dollar bills in circulation at any given time, this was an awful idea and we never saw our custom-marked bills ever again. Disappointment!
In Capital One’s challenge, we saw an opportunity to both fulfill the dreams of Clares and Emilios of the future and teach children financial literacy. This was our goal for Follow the Money.
What it does
Follow the Money is designed to be easy to use and generally user-friendly. Simply snap a picture of your bill with the app, wait as Follow the Money does the heavy lifting (more on this in the next section), and be amazed as your bill's journey across the country is revealed to you on an interactive map!
How we built it
Although it sounds simple, Follow the Money makes use of several sophisticated, modern technologies to get the job done, pulling this solution into the 21st century. Additionally, in order to make the user experience as pain-free as possible (again, kids are the intended audience and the most likely consumers), we integrated significant automation: no user input is necessary to identify the bill and any kind of US bill can be tracked through the app.
Following the pipeline as processed by the app, we begin in the Flutter-built frontend. When the user takes a picture of the bill, the user’s location is recorded (latitude and longitude using Flutter's
location plugin), the image is pushed up to Firebase, and a call is made to the backend via a Flask API. Notably, this API is being served through Firebase and Google Cloud Run, so it could be accessed by anyone using a POST request (this means that the functionality could theoretically be extended or integrated into other products)! Scroll down to the bottom of this page to check out the API's static landing page!
Moving right along, we find ourselves in the python backend, where the bill’s serial number within the image is located and transcribed using the Google Vision API. Once we have the serial number, the user’s spatial coordinates are added to the Firebase records (these were passed in by the frontend) and some basic information is passed back in the API response.
Now we’re back in the frontend! The frontend interprets the JSON response from the API and displays all of the past locations as markers on an interactive map using the Google Maps API. From here, the user can explore the map or go back to track another bill!
Challenges we ran into
There were a lot of moving parts to connect and, naturally, it took a while to get everything communicating correctly. We came in pretty nervous, because a lot of the elements that we were planning to attempt were things we weren’t able to do at previous hackathons. In particular, we had troubles in the past with connecting the front and backends, taking pictures with an Android application, and passing pictures script to script. Thankfully, a lot of these ran much more smoothly this time, which was pretty fulfilling.
Unfortunately, one issue that we did run into this time was our
.gitignore decided not to wipe out our API key files, so we had to delete a bunch of keys… oh well!
Accomplishments that we’re proud of
This is by far the most complete project that we’ve ever put together during a hackathon! (And that’s saying something, given that this is our fourth hackathon working together!) We’re honestly astonished all of the moving parts came together in the end.
In several ways, this was a hackathon of firsts: Emilio’s first time working with the frontend (he was not entirely convinced by the experience as a python person, but we’re working on converting him...) and first time doing any sort of app development, Clare’s first time integrating the Google Maps API into an app successfully (take that, high school junior Clare!), and our first time deploying a Flask API in the cloud. Overall, this was a fantastic learning experience and we’re very proud of the final product!
What’s next for Follow the Money?
One of the best parts about Follow the Money is its robustness (never thought we’d say that at a hackathon...): the API is hosted on a live server rather than locally, the app production is platform-independent (thanks Flutter!) and can just as easily be built for Android as iOS, and the Google Vision API used for serial number detection is powerful enough to deal with diverse image inputs. In all senses, Follow the Money is a scalable, modern solution.
We worked hard to host Follow the Money on a custom domain.com domain and were very excited when everything finally connected up between Firebase and domain.com. In the future, we’d clean up the API (rate limiting, verification by API key, add documentation, etc.) to make everything more openly available to outside developers.
In terms of the app, we would have liked a bit more time to improve the user experience and to include more elements on the financial literacy-education side of things. This might’ve included links to pertinent resources or additional screens that could’ve held budgeting-related elements, for instance. There’s definitely potential here to tighten up this aspect of the app!
Special thanks to Aubrey Lay for getting up early on a Sunday to star in and help film the video!