FinancialVue: Automate & Manage your Money

What I built

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.

Category Submission:

Program for the People - Open source money management for all!

App Link

https://financial-vue-do-vdnma.ondigitalocean.app/#/

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.

Screenshots

Homepage charts

Balances view

Transactions view

User Profile page

User Profile page

Description

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.

Link to Source Code

Front end static site: FinancialVueDo
Back end web app: FinancialVueBeDo

Permissive License

MIT

Background

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.

How I built it

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

Additional Resources/Info

Acknowledgments

• build-your-own-mint was the starting point for plaid server code.
• tab-tracker was a starting point for client/server data transfer.