I built a web app for automatically updating and tracking personal finances. I wanted to learn web development and decided to create a practical tool that I can use every day. The app stands out from other finance apps with its focus on visual simplicity, responsive design, and open source codebase.
Program for the People - Open source money management for all!
This example app allows users to connect to sample data through Plaid's sandbox environment. Anyone can fork the code and start connecting to their real financial accounts.
FinancialVue is a web app for automatically updating and tracking personal finances. The app is designed to run on DigitalOcean App Platform or on your local network. The front end client is a static site built with Vue.js and the backend is a Node.js server connected to a PostgreSQL database. Financial data is retrieved via the Plaid API.
I started teaching myself web development in the middle of the pandemic. FinancialVue is my first ever web app. I wanted a practical, visually-appealing tool to track my personal finances. The initial iteration was designed to run on my home network. My friend invited me to participate in this hackathon, which provided a perfect opportunity to add new features and learn how to deploy the code online. Now the DigitalOcean App Platform provides a secure way to host and update the app so it is accessible anywhere.
The app is made of three components that all run on the DigitalOcean App Platform: a Static site, a Web Service, and a Database. The Source Code README includes a "Deploy to DigitalOcean" button and detailed instructions so that the project can easily be deployed by others.
I learned several new skills and concepts along the way:
- DigitalOcean app platform and deployment
- First time using PostgreSQL
- Git forking, branching, and merging
- HTTP port configuration for local and DigitalOcean deployment
- Yaml configuration files for DigitalOcean app button
- Packages including axios, bootstrap, chart.js, d3, passport, pg, plaid, sequelize, vue, and vuex