Abi-Liu/Spendify - Githubissues

Budget Buddy

Simplifying Your Finances: Your Ultimate Companion for Seamless Financial Management
How to use »

Live Site · View Demo · Report Bug · Request Feature

Table of Contents

About The Project
- Built With
Getting Started
- Prerequisites
- Installation
Usage
Contributing
License
Contact

About The Project

BudgetBuddy

This project is a new and improved version of my previous personal finance app, Finance Me. In this iteration, I'm focusing on creating more features and a better user experience, as well as learning to use new technologies, such as Docker, Postgres, Redis, WebSockets, and AWS.

Users will be able to create an account and link their multiple bank and credit card accounts through Plaid. They will then be able to view a comprehensive summary of the state of their finances, such as their net worth, assets and liabilities, transaction details, and so on. There is also an option to export transactions to CSV with the export-to-CSV feature. This functionality allows you to conveniently export transaction information, providing you with greater flexibility and control over your financial data. You can also create monthly budgets to keep your expenses in check and all of these features are beautifully displayed through graphs and tables for easy data visualization. I have also added real-time notifications for new transaction data via WebSockets, this way users are always up to date with their latest financial activities.

Another key improvement from my last iteration is the ability to reauthenticate your connected accounts. This way, you won't have to manually delete and re-link your financial accounts which was a big headache for users.

(back to top)

Built With

(back to top)

Getting Started

To get a local copy up and running follow the steps below.

Prerequisites

Before you begin, ensure you have the following technologies installed:

Node.js and npm:
- Download and install Node.js and npm from https://nodejs.org/
Docker:
- Install Docker by following the instructions on https://www.docker.com/get-started
Ngrok:
- Ngroks is required to receive Plaid's HTTPS webhooks in localhost for the real-time notifications to function. It creates a tunnel to the internet for our local server. This allows our server to receive and respond to the Plaid webhooks.
- Download Ngrok by following the instructions on https://ngrok.com/download.
- Register for a free account. Once you are done, click on the Your Auth Token link on the sidebar and follow the configuration steps.

Installation

You will need to get a few free API keys to get up and running. For more information, check out the .env.example file and follow the instructions to get your Plaid and Google API keys and secrets.

Clone the repo

git clone https://github.com/Abi-Liu/Spendify.git

Install dependencies for both client and server directories. Server:
```
cd server
npm install
```
Client:
```
cd client
npm install
```
Create a new .env file in the root directory of the project. Copy the contents from the .env.example file and add your own Plaid and Google API keys.
```
PLAID_SECRET="YOUR_PLAID_SECRET"
etc...
```
Start up a new Ngrok tunnel by running this command in your command line:
```
ngrok http http://localhost:8000
```
Copy the forwarding link, it should look like https://....ngrok-free.app. Navigate to /server/src/controllers/plaid.ts and change the webhook URL to your new Ngrok forwarding URL. Be sure to keep the /webhook/ at the end of it.

It should look something like this: "https://951e-3100-2410-s210-90b0-6868-2889-d439-3e05.ngrok-free.app/webhook/"

Now you will be able to receive webhooks on your local server.
You're now ready to spin up your own local containers.
```
docker-compose up
```
This command will start the Docker containers for Nginx, PostgreSQL, Redis, the Node.js server, and the React client.

It may take some time to orchestrate the containers for the first time, but just sit back and eventually, you should see:
```
server_2-1  | Server has started on port: 8000
server_1-1  | Server has started on port: 8000
```
And that's it! Everything should be up and running. Now you can navigate to http://localhost:5173 and see your own local copy.

(back to top)

Usage

Click here to see a full demo video showcasing the features!

During development and for demonstration purposes, this project uses Plaid's sandbox mode. Sandbox mode enables you to test, develop, and interact with its functionalities in a controlled environment.

To connect to most institutions, you can simply leave all credential fields blank and just select the accounts you wish to connect. If Plaid is requiring you to enter credentials, you can just the ones provided below:

username: user_good
password: pass_good
pin: credential_good (when required)

To trigger the link flow on desktop, simply click the turquoise + sign on the top right of the sidebar.

Location of link account button on desktop

For mobile screens, there will be a hamburger icon on the far left of the header. Click on that to expand the sidebar and the same + will be there to trigger the link flow.

Location of link account button on mobile

To get a full picture of your financial data, there will also be options to add assets: i.e. cars, properties, investments, etc. To get there, you just need to click on the user menu at the bottom of the sidebar, click on the Assets option, and enter the name and value.

User Menu Asset Menu

(back to top)

Contributing

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!