How I Built saveandcompound.com, a Budget-Friendly React App Hosted on AWS
If you noticed a common theme in my posts, I am interested in personal finance and investing. One concept I’ve been particularly fascinated about is the power of compounding. Therefore, I created a simple app to show the powerful effects of how compounded returns over time can turn small savings into big money. You can view it here at https://saveandcompound.com.
The great thing about this app is that since the files are hosted on AWS S3, I am spending next to nothing (other than for the domain) to host this website. The savings in not provisioning a web server is sure to compound over time! If only I had an app to calculate that…
How I Built This App
I was inspired by the Spend Bill Gates Money website and found that the code was open-sourced. The repository can be found here. I cloned the repository and modified the code so that instead of calculating how much of Bill Gates’ money you spent, it calculates how much you can save over X amount of years if you cut out certain expenses and invested the savings at a Y% ROI.
After testing out the app on my local computer, I set up github actions to:
- Deploy AWS Infrastructure via Terraform
- Build the react app from the source code and upload it to AWS S3
Architecture
Overall, the architecture looks like below:
Just like my previous valuepilotai.com project, code and infrastructure changes are deployed by github actions and Terraform. Here is a breakdown of the infrastructure set up within AWS:
- Route 53: The saveandcompound.com domain name was registered within Route 53. Additionally, the hosted zone contains the DNS entries required to resolve saveandcompound.com to the CloudFront distribution.
- Certificate Manager: The TLS certificate is provisioned within Certificate Manager. This is used by the CloudFront distribution to secure connections between clients and the CloudFront distribution.
- CloudFront: CloudFront serves the build files to the web clients. The reasons for using CloudFront instead of having S3 serve files are to allow for a secure TLS connection with web clients, reduce latency of serving files, and reduce the number of requests to S3 (although this point is negligible for low-volume apps).
- S3: S3 hosts all the build files for the React app.
If you are interested in learning more about the simple app I created, feel free to email me at connect@joshuacmin.com. Thanks for reading!