The latest articles on DEV Community by blair (@blairun). https://dev.to/blairun https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F544230%2Fb5409bb0-e711-4001-8e5b-11daaa0d0af0.png https://dev.to/blairun en blair Fri, 08 Jan 2021 03:13:21 +0000 https://dev.to/blairun/financialvue-automate-manage-your-money-2i35 https://dev.to/blairun/financialvue-automate-manage-your-money-2i35 <h2> What I built </h2> <p>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.</p> <h3> Category Submission: </h3> <p>Program for the People - Open source money management for all!</p> <h3> App Link </h3> <p><a href="https://financial-vue-do-vdnma.ondigitalocean.app/#/" rel="noopener noreferrer">https://financial-vue-do-vdnma.ondigitalocean.app/#/</a></p> <p>This example app allows users to connect to <em>sample</em> data through <a href="https://plaid.com/" rel="noopener noreferrer">Plaid's</a> sandbox environment. Anyone can fork the code and start connecting to their real financial accounts.</p> <h3> Screenshots </h3> <h4> Homepage charts </h4> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F974mp9ulc65tzpsz2qf3.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F974mp9ulc65tzpsz2qf3.png" alt="Alt Text"></a><br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fvvy83d316f78o7i2o0ty.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fvvy83d316f78o7i2o0ty.png" alt="Alt Text"></a><br></p> <h4> Balances view </h4> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fraw.githubusercontent.com%2Fblairun%2FFinancialVueDo%2Fmain%2Fpublic%2FFinancialVue%2520-%2520Balances.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fraw.githubusercontent.com%2Fblairun%2FFinancialVueDo%2Fmain%2Fpublic%2FFinancialVue%2520-%2520Balances.png"></a><br></p> <h4> Transactions view </h4> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fraw.githubusercontent.com%2Fblairun%2FFinancialVueDo%2Fmain%2Fpublic%2FFinancialVue%2520-%2520Transactions.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fraw.githubusercontent.com%2Fblairun%2FFinancialVueDo%2Fmain%2Fpublic%2FFinancialVue%2520-%2520Transactions.png"></a><br></p> <h4> User Profile page </h4> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fraw.githubusercontent.com%2Fblairun%2FFinancialVueDo%2Fmain%2Fpublic%2FFinancialVue%2520-%2520User%2520Profile.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fraw.githubusercontent.com%2Fblairun%2FFinancialVueDo%2Fmain%2Fpublic%2FFinancialVue%2520-%2520User%2520Profile.png"></a><br></p> <h4> User Profile page </h4> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fraw.githubusercontent.com%2Fblairun%2FFinancialVueDo%2Fmain%2Fpublic%2FFinancialVue%2520-%2520Plaid.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fraw.githubusercontent.com%2Fblairun%2FFinancialVueDo%2Fmain%2Fpublic%2FFinancialVue%2520-%2520Plaid.png"></a><br></p> <h3> Description </h3> <p><a href="https://github.com/blairun/FinancialVueDo" rel="noopener noreferrer">FinancialVue</a> is a web app for automatically updating and tracking personal finances. The app is designed to run on <a href="https://www.digitalocean.com/products/app-platform/" rel="noopener noreferrer">DigitalOcean App Platform</a> 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 <a href="https://plaid.com/" rel="noopener noreferrer">Plaid API</a>.</p> <h3> Link to Source Code </h3> <p>Front end static site: <a href="https://github.com/blairun/FinancialVueDo" rel="noopener noreferrer">FinancialVueDo</a><br> Back end web app: <a href="https://github.com/blairun/FinancialVueBeDo" rel="noopener noreferrer">FinancialVueBeDo</a> </p> <h3> Permissive License </h3> <p>MIT</p> <h2> Background </h2> <p>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.</p> <h3> How I built it </h3> <p>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.</p> <p>I learned several new skills and concepts along the way:</p> <ul> <li>DigitalOcean app platform and deployment</li> <li>First time using PostgreSQL</li> <li>Git forking, branching, and merging</li> <li>HTTP port configuration for local and DigitalOcean deployment</li> <li>Yaml configuration files for DigitalOcean app button</li> <li>Packages including axios, bootstrap, chart.js, d3, passport, pg, plaid, sequelize, vue, and vuex</li> </ul> <h3> Additional Resources/Info </h3> <h4> Acknowledgments </h4> <ul> <li> <a href="https://github.com/yyx990803/build-your-own-mint" rel="noopener noreferrer">build-your-own-mint</a> was the starting point for plaid server code.</li> <li> <a href="https://github.com/codyseibert/tab-tracker" rel="noopener noreferrer">tab-tracker</a> was a starting point for client/server data transfer.</li> </ul> dohackathon digitalocean finance money