Creating websites is the most practical, efficient, and fastest way to learn to code. 🌐 Take a look at the coding project that helped me become who I am today. 🏴‍☠️👑

Projects

Building projects is one of the most effective ways to learn to code. Not only can you learn step by step, but you can also experience how everything ties in altogether. In this video, I will share my one project that significantly improved my coding skills. Just for context, I'm PK, a software engineer in Seattle. I previously worked at Microsoft, Amazon, and ebay. The coding project that improved my skills the most isn't a corporate project from Microsoft, Amazon, or ebay; it's a personal project that I built during my spare time. I briefly discussed it in my videos, including Learn to Code for Free. It's a full-stack personal finance management website I created in 2019, back in my Microsoft days. I posted the details on how to build one yourself here. And I also uploaded the entire source code, both the front and backend, on my GitHub, for FREE, as a reference, so check them out if you're interested. Lastly, thanks, Surfshark, for sponsoring this video.

PK’s Personal Finance App

So what did I build exactly? My personal finance management app had two features: bookkeeping and net worth tracking. My wife used to keep a record of our household expenses. For example, how much have we spent on groceries this month? 🥬 How much on eating out? 🍽 What about shopping? 🛍 She did all this, however, manually. She asked me to keep my receipts 🧾 so that she could enter the expenses into her app one by one every day. What a lot of tedious effort, right? That's when I thought of this app. 💡 What if I organize all my daily expenses automatically? What if I connect my bank accounts and credit card transactions and centralize the data in one place, so I can get a quick overview of my finances? How convenient would that be, right? The biggest problem was the bank and credit card data. How do I get them? What did I tell you to do when you have a question? Google it! That's precisely what I did; I googled just that, and that's how I found Plaid. This is what their website says: "The safer way for people to connect financial accounts to an app." And no, guys, I'm NOT sponsored by Plaid. I don't get paid for sharing this. Plaid is the financial API provider I used way before starting my YouTube channel.

Plaid

The best thing about Plaid is that it's free. There are pricing tiers, but it's free for the first 100 financial accounts. I only have one bank account and a handful of stock brokerage accounts, so 100 accounts are more than enough for my purpose. I leveraged two of its API products for my website: Transactions for bookkeeping and Balance for net worth tracking. I used the Transactions API to grab my credit card expenses. It provides information such as how much I spent, what I spent on, when and where, etc. I would then categorize these transactions to my taste. For example, grocery, meal, shopping, utility, recreation, etc. I then grouped them monthly to get an overview of my spending. Another neat Plaid product is the Balance API. I used it to get my current balance in my bank and stock accounts. If I add up the balances in those, that's how much total money I have at a specific time. I then used Google Charts to plot the balance changes over time, thus creating a net worth tracker. Please, note that I never revealed this portion of the app in my previous videos because… it's too personal. 🥴

Tech Stack

Let's talk about how I made it - the tech stack. I'll start with the backend first. Every backend component was hosted on Azure. This made sense back then despite the fees because I could use $150 on Azure every month as a Microsoft employee. For those who don't know what Azure is, it's basically the Microsoft version of Amazon's AWS, a cloud computing service. Software engineers use it to release their apps on the cloud. I chose C# and .net Core for the API layer, Azure's NoSQL database, Cosmos DB for the storage, and Azure Functions for the background jobs. You can fetch the financial data from Plaid in real-time, but I found that to be a little slow. I also wanted to be cautious with how often I call Plaid - you know, not spam it. So I decided to periodically query it using a background job instead. The worker would store the data in my database in Azure, and I would retrieve them from mine instead of requesting Plaid directly. This is how I built daily snapshots of my financials.

Now, what about the frontend? I used TypeScript with Vue.js instead of React because I already knew React; I wanted to try something new. For you guys, however, I recommend learning React over Vue. Vue has an easier learning curve, but React is still the mainstream, especially in the US. I used MaterialUI for the overall website design, Lodash for JavaScript utilities, Axios for the HTTP client, and Google Charts for graph visualization. A pro tip for building your professional portfolio. Add charts to your projects. Not only can they enrich your app with nice-looking graphs for free, but they're also super easy to use; you just need to call the API with the right parameters.

Technical Design Diagram

So these are my tech stack. Let's talk about how you can build one for FREE. I'll discuss it briefly here, but check out this page for the details, including my hand-picked recommendations for helpful YouTube tutorials. I recommend React.js for your frontend, then deploy it using GitHub pages. AWS and Azure work too, but I recommend GitHub pages over them because it's free and easy to use. For the backend, you can use any framework. If you know JavaScript, use Node.js. If you know Python, Django and Flask are viable options. Deploy your apps on Google Firebase. Firebase has a free tier dedicated to personal projects and hobbyists. You can also run a background job on it. Don't forget that you can integrate with Plaid for free for the first 100 accounts. Lastly, use MongoDB for your database; there's a free tier for up to 5GB of storage. Again, find the details here.

Motivation

Let me quickly talk about why I decided to build a personal project in the first place. Microsoft employees get $150 Azure credit every month. I used to work at Microsoft, so I thought, "Hey, my company has this benefit, so why not use it to learn?" I'm a software engineer, but having come from a game development background, I had never built a website before. So creating an entire website myself was one of the top items on my bucket list; I wanted that end-to-end experience. A pro tip about choosing the topic for your project. Build something useful or interesting to you. Creating a website can be challenging, so developing something meaningful to you can help you stay motivated.

Pros & Cons

That's it, pirates. This is the coding project that improved my skills the most. It took me about 2-3 months to complete the app while working for Microsoft. I recall coming home, having dinner, then coding for a few hours until I go to bed. YouTube and Google were my best friends then. I would follow video tutorials to learn basic stuff and find my answers in stack overflow whenever I get stuck. To be honest, I deprecated my personal finance app after using it for about two years. The truth about coding is that it's super fun to build stuff but friggin' annoying to maintain one. I wanted to free myself from dealing with all the system failures from Chase, Robinhood, Fidelity, etc. Also, there's already a free solution like Personal Capital that does the same thing, which I ended up using. However, it still was fun to build one. The greatest thing about building my app is that I have complete control over it. I can create one however I like and add whatever features I want. And most importantly, I finally got to experience the entire development cycle end-to-end, which I still find invaluable.

Thanks again for watching. Happy coding. Like and subscribe. 👍 Bye. 🏴‍☠️

Please note that the source code on my GitHub is not a working solution but a reference to help you get started.

The coding project that improved my skills the most