Skip to content

[OLD VERSION] Your Personal Budgeting App with clear data visualization. Built with NextJS + Shadcn + Supabase

Notifications You must be signed in to change notification settings

ilhamAdhim/moneytorq-legacy

Repository files navigation

MoneytorQ

MoneytorQ is an open-source personal budgeting finance app with MIT license. Built with Next JS + Shadcn UI + Supabase. Currently, MoneytorQ only supports IDR (Indonesian Rupiahs) for the currency. Note: This repository is just a glimpse of how I technically make this product. It won't be updated as I have the main codebase on my private repo. Cheers =)

Table of Contents

Features

  • User authentication (Access the dashboard with OAuth Logins)
  • Overview on how you spent in the last 30 days
  • Make your budgeting expenses and income (add, update, delete, view categories)
  • Keep track of your expenses and allocate it into your budgets
  • Responsive design using Shadcn UI.

Installation

  1. Clone the repository:

    git clone https://github.com/ilhamadhim/moneytorq
    cd moneytorq
  2. Install dependencies:

    npm install
  3. Create a .env file in the root directory and add the following environment variables:

    # The base URL of the API
     NEXT_PUBLIC_SUPABASE_URL=
     NEXT_PUBLIC_SUPABASE_ANON_KEY=
  4. Start the development server:

    npm run dev

Screenshots

Dashboard View

Dashboard View

In Dashboard view, you can see overall finance health. The latest and highest expenses, your recent income, how is your savings to expenses ratio, etc.

In the side AreaChart, you can also see whether your expenses surpass your income or not. And how stagnant your income is. (Let's try to change that by making new stream of income :D).


Budgeting View

Budgeting View

In Budgeting view, you can input your budget allocations for expenses. We supports input it by percentage. In further update, you will also be able to input it by the fixed amount.


Budgeting View - Income Stream

Budgeting View - Income

In this view, you can create a new stream of income (Basically creating a new category with income type).

For Manage Income, it's almost the same as creating a transaction with income type. You can also input it in Transaction view (See next screenshot).

Transaction View

Transaction View

Here lies the details of your transactions from all the way to January - December. Expenses or Incomes, all of it will be shown here. You can filter it by month, year, transaction title, expense type, and categories.

The radar chart in the left will show your top 6 categories sorted by the most expenses amount.


Contacts

If you have any questions or feedback, feel free to reach out at ilham.adhim@gmail.com :)

Also Written on

About

[OLD VERSION] Your Personal Budgeting App with clear data visualization. Built with NextJS + Shadcn + Supabase

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published