Personal Finance Tracker

The Personal Finance Tracker is an open-source app
designed to help users manage their budgets, incomes, expenses, debts, and savings goals. It provides visual representations, such as pie charts for budget categories and bar charts for comparing budgets versus spending over the last six months. Users can easily search and filter data by month, while the dashboard offers an overview of total budgets, incomes, expenses, and more.

Figure 1: homepage

Video

See the video below for a demo of the app:

screen-recording.mp4

Tech Stack

Technology	Description
Charts	Chart.js - A simple yet flexible JavaScript charting library for designers and developers.
Framework	Next.js - A React framework for building server-side rendered and static web applications.
Backend	Node.js - A JavaScript runtime built on Chrome's V8 JavaScript engine, used for building scalable network applications.
ORM	Prisma - An open-source ORM for Node.js and TypeScript that helps manage and interact with your database.
Database	PostgreSQL - A powerful, open-source object-relational database system with a strong reputation for reliability and performance.
Authentication	Auth.js v5 - A library for handling authentication in JavaScript applications, providing secure and easy-to-use authentication methods.
Containerization	Docker - A platform for developing, shipping, and running applications in containers, enabling consistent environments across development and production.

Environment Variables

To run this project, you will need to add the following environment variables to your .env file:

Environment Variable	Description
AUTH_SECRET	A secret key for authentication. You can generate a secret key by running the command openssl rand -base64 32 in your terminal. Ensure OpenSSL is installed: - macOS/Linux: OpenSSL is usually pre-installed. Verify by running openssl version. - Windows: Install OpenSSL from the OpenSSL website or using Chocolatey with the command choco install openssl.
AUTH_TRUST_HOST	Set to true or false to indicate whether to trust the host for authentication.
POSTGRES_USER	The PostgreSQL database username.
POSTGRES_PASSWORD	The PostgreSQL database password.
POSTGRES_HOST	The PostgreSQL database host. Use localhost for local development or the Docker Compose service name postgres.
POSTGRES_DB	The PostgreSQL database name.
POSTGRES_PORT	The PostgreSQL database port.
POSTGRES_URL	The PostgreSQL connection URL, which is constructed using the above variables.

Dashboard Access

Caution

Authentication: This is a basic authentication password for testing purposes. For a production-grade application, you should use an authentication provider such as GitHub or any of these providers. The providers should be configured in the auth.config.ts file.

To test the dashboard, use the following credentials:

• Username: example@example.com
• Password: AhRX8LioQKpMTg7

Running the App

Using Docker

To run the app in a Docker container, follow these steps:

1. Clone the repository

   git clone https://github.com/albdangarcia/personal-finance-tracker.git

2. Navigate to the project directory

   cd personal-finance-tracker

3. Copy the .env.example file to .env and update the environment variables:

   cp .env.example .env

4. Build the Docker image:

   docker compose build

5. Run the Docker container:

   docker compose up

6. Open your browser and navigate to http://localhost:3000

Run Locally

To run the app locally, follow these steps:

1. Clone the repository

   git clone https://github.com/albdangarcia/personal-finance-tracker.git

2. Navigate to the project directory

   cd personal-finance-tracker

3. Copy the .env.example file to .env and update the environment variables:

   cp .env.example .env

4. Download the official PostgreSQL image from Docker Hub:

   docker pull postgres

5. Start the PostgreSQL container (This step starts a new PostgreSQL container with the specified password and user):

   docker run --name some-postgres -e POSTGRES_PASSWORD=mysecretpassword -d postgres

6. Install the dependencies:

   npm install

7. Push the Prisma schema to the database:

   npx prisma db push

8. Push the Prisma schema to the database:

   npx prisma generate

9. Seed the database:

   npx prisma db seed

10. Run the app:

    npm run dev

TODO

• Import OAuth providers to the login page.
• Show a text message when there is no data to display for the charts.
• Add a settings page to manage user preferences.
• Add more visualizations to the dashboard.
• Implement unit tests with Jest/React Testing Library.

Contributing

Please follow these steps to contribute:

1. Fork the repository.
2. Create a new branch:

   git checkout -b feature/your-feature-name

3. Make your changes and commit them:

   git commit -m 'Add some feature'

4. Push to the branch:

   git push origin feature/your-feature-name

5. Open a pull request.

License

Licensed under the MIT license.