University of Kwazulu-Natal

Personal Finance Database And Dashboard Github

Bonisiwe Shabane
-
personal finance database and dashboard github

A full-featured personal finance analytics dashboard built with Next.js, React, TypeScript, Tailwind CSS, and Recharts. This project is part of my frontend developer portfolio and focuses on real-world UI architecture**, data-driven components**, and production-ready patterns commonly used in modern React applications. The application relies on useState and useEffect to handle transactions, recurring expenses, filters, and derived financial metrics in a predictable and maintainable way. Multiple filters (transaction type, category, date range, and search query) are composed together to produce accurate, real-time views of the data without unnecessary re-renders. Financial data is stored in localStorage, allowing users to retain their information across sessions without requiring a backend. Personal Finance Dashboard was designed from the ground up to be easy to use and give you control over your finances.

Personal Finance Dashboard lets you focus on your finances, and we'll do the chores. Go ahead and move your money around, we'll keep track of it. Set up saving goals for what matters to you. Personal Finance Dashboard will help you keep track of your progress and provide helpful analytics along the way. In this project, I developed a MySQL database called spend_save tracking all of my financial transactions. This includes purchases, deposits, withdraws, credit card payments, and more.

Any transaction that results in a change in a bank account or credit card balance is tracked in this database. These transactions are extracted from my banking website in the form of CSV files, transformed using customized Python scripts, and loaded into the database via the SQLAlchemy Python library. I then created SQL views to understand my spending habits and developed a Power BI dashboard linked to the database to view these habits visually. I wanted to know more about my spending habits. I had an idea of which categories I spent the most on, but I did not know exactly how much I was spending. I also wanted to have a way to track my spending habits over time, allowing me to see which months of the year I tend to spend the most money in.

To a lesser degree, I also wanted to track my bank account balances over time. My primary objective was to create a system that could meticulously monitor every transaction flowing through my bank and credit card accounts. I aimed to capture details such as transaction categories, transaction types (credit card purchases, paychecks, credit card bill payments, etc.), and transaction dates. To do so, I needed to extract data at the transaction level from my bank and credit card accounts. To achieve the desired requirements above, I opted to create a dimensional model consisting of 4 dimension tables and one fact table as seen below: The account, transaction_type, category, and date tables are all dimensional tables, providing more information about each transaction in the transaction_facts table.

However, as indicated on the data model, the category dimension is optional. This is because only transactions flagged as a transaction type of debit or credit card purchase are marked with a category and is enforced via a check constraint. The Personal Finance Dashboard project is a web-based application designed to help individuals manage their personal finances effectively. It provides a comprehensive overview of financial data and insights to assist users in budgeting, tracking expenses, and achieving their financial goals. This project serves as a valuable tool for users to gain visibility into their financial health, make informed decisions, and take control of their finances. To set up and run the Personal Finance Dashboard project:

Clone the Repository: Clone the project repository to your local machine using the following command: Navigate to the Project Directory: Open your terminal or command prompt and navigate to the directory where you cloned the project. Install Dependencies: Install the necessary dependencies using npm or yarn: Managing personal finances can feel like a daunting task. With bills to pay, savings to grow, and investments to track, it’s easy to get overwhelmed. But what if you could create a personal finance dashboard that pulls all your financial data into one place?

Using open source APIs, you can build a customized dashboard that helps you visualize your financial health and make informed decisions. Having a personal finance dashboard allows you to see your financial situation at a glance. You can track your income, expenses, savings, and investments all in one place. This not only helps you stay organized but also empowers you to make better financial decisions. Imagine being able to see your spending habits over time, identify areas where you can cut back, and set savings goals. With a personal finance dashboard, you can do just that.

The first step in building your personal finance dashboard is selecting the right APIs. Here are a few popular open source APIs that can help you gather financial data: Plaid: This API connects to your bank accounts and allows you to retrieve transaction data, account balances, and more. It’s widely used and has a robust documentation. Last year we published a review of core dashboard tools, highlighting several common challenges teams encounter when building data visualizations. Most of the tools we discussed were mature commercial products with good user experience, yet they offered limited flexibility in licensing, deployment, and extensibility.

In conversations with readers afterward, we learned that many teams were actually seeking lower cost, more customizable, and self hosted open source alternatives. 💡Recommended reading: A Developer’s Technical Decision Guide to No-Code and Low-Code (2026) Over the past year, the open source ecosystem in this space has evolved quickly. Increasingly, dashboard and analytics tools are incorporating AI into their core features, including natural language querying, automated chart creation, metric explanations, and semantic report generation. Many teams also hope these tools can handle more of the operational workload so they can focus their time on decisions that require real business judgment. 💬 Hey, you’re reading the NocoBase blog.

NocoBase is the most extensible AI-powered no-code/low-code development platform for building enterprise applications, internal tools, and all kinds of systems. It’s fully self-hosted, plugin-based, and developer-friendly. → Explore NocoBase on GitHub With this context in mind, we curated a new list of active open source dashboard projects that have already introduced AI capabilities. In this article, we look at each tool through three lenses: its core positioning, common use cases, and the maturity and scope of its AI features. We hope this helps you quickly identify which open source tool best fits your needs.

In this personal project, I created a financial dashboard using Microsoft Excel and Power BI to track and visualize my income, expenses, and savings. The dashboard is powered by an Excel spreadsheet that serves as the data source. The Power BI dashboard features several useful visualizations, including: Currently, I manually input my monthly finances into the Excel sheet. However, I’m exploring ways to automate this process by programming the Excel file to parse CSV files from my bank statements. Feel free to download the Excel file and Power BI dashboard to start tracking your own finances!

Copyright © Ryan Sexton. Made with the hopes of getting a job A cloud-based system to track personal income and expenses, visualize spending trends, and identify overspending, helping users manage budgets effectively. Many people struggle to control spending and exceed budgets without realizing which categories contribute the most. Report of the top 3 categories in Expenses

People Also Search

A Full-featured Personal Finance Analytics Dashboard Built With Next.js, React,

A full-featured personal finance analytics dashboard built with Next.js, React, TypeScript, Tailwind CSS, and Recharts. This project is part of my frontend developer portfolio and focuses on real-world UI architecture**, data-driven components**, and production-ready patterns commonly used in modern React applications. The application relies on useState and useEffect to handle transactions, recurr...

Personal Finance Dashboard Lets You Focus On Your Finances, And

Personal Finance Dashboard lets you focus on your finances, and we'll do the chores. Go ahead and move your money around, we'll keep track of it. Set up saving goals for what matters to you. Personal Finance Dashboard will help you keep track of your progress and provide helpful analytics along the way. In this project, I developed a MySQL database called spend_save tracking all of my financial tr...

Any Transaction That Results In A Change In A Bank

Any transaction that results in a change in a bank account or credit card balance is tracked in this database. These transactions are extracted from my banking website in the form of CSV files, transformed using customized Python scripts, and loaded into the database via the SQLAlchemy Python library. I then created SQL views to understand my spending habits and developed a Power BI dashboard link...

To A Lesser Degree, I Also Wanted To Track My

To a lesser degree, I also wanted to track my bank account balances over time. My primary objective was to create a system that could meticulously monitor every transaction flowing through my bank and credit card accounts. I aimed to capture details such as transaction categories, transaction types (credit card purchases, paychecks, credit card bill payments, etc.), and transaction dates. To do so...

However, As Indicated On The Data Model, The Category Dimension

However, as indicated on the data model, the category dimension is optional. This is because only transactions flagged as a transaction type of debit or credit card purchase are marked with a category and is enforced via a check constraint. The Personal Finance Dashboard project is a web-based application designed to help individuals manage their personal finances effectively. It provides a compre...