Skip to content
An electron desktop application to manage a budget with a per day focus
JavaScript CSS TypeScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
client
readme-images
semantic
test
typings
.gitignore
LICENSE.txt
README.md
filemenu.css
graph.css
gulpfile.js
index.html
main.css
main.ts
package.json
semantic.json
tsconfig.json
typings.json

README.md

Daily Budgeteer

Daily Budgeteer was inspired by this blog post by Alex Recker where he explains a budgeting tool which organizes your expenses around a Per Day modal. As in, breaking down all your costs and income to see how much you are making and spending per day. After the post got enough attention, he decided to create an improved version which you can find here.

So Daily Budgeteer is different from those two projects in the fact that it is not a website. I built it in Electron, so it is a desktop app. This has a couple interesting pros and cons for a project like this. The major con is that you can't interact with it from your phone, though I want to get back to that. The major benefit, is that it doesn't have to deal with security concerns, or at least no more than any other file on your system.

So the way Daily Budgeteer works is that it read/writes to/from JSON files. This leads back to the phone issue. I am thinking that a phone app could be created to read/write from a JSON file in the same format and store the file in google drive, or some other storage system accessible from your phone. Then the desktop app and the phone app could be connected.

How To Use

Empty Rates List

The application is fairly simple to use. Add any recurring costs or income as a rate. Make sure that costs are marked as negative values and set the time interval and interval type. For example, if the rate is once a month then choose a Month in the Interval Type dropdown list.

Add Rates

When the Per Day value of the rate is calculated it will be based on the number of days in the current month.

RatesList

Then add expenses as they occur. Again, make sure to use negative values as appropriate. Optionally, add a category to the expense.

Categories

Categories are used to group expenses and the category graph shows the last week of expenses by category. The available categories can be adjusted by selecting Categories in the Settings menu.

Category Graph

Once an expense is added it will display in a list with the rest of the days expenses.

Expenses

If you added rates than the first entry on each day's list of expenses will be the base line value what you are making or spending if you don't do anything that day.

Summary Tab

The summary tab shows a line graph of the last two weeks of activity.

JSON Format

Here is what the JSON that the application saves to/loads from

{
    "expenses": [
        {
            "id": 1,
            "name": "SUPERHOT",
            "day": "2016-03-20T07:00:00.000Z",
            "amount": -25
        }
    ],
    "rates": [
        {
            "id": 1,
            "name": "Test Rate",
            "amount": 200,
            "interval": "14",
            "intervalType": 0,
            "startDate": "2016-03-20T07:00:00.000Z"
        }
    ],
    "nextIds": {
        "expenses": 2,
        "rates": 2
    }
}

If the rate has ended then it will have an endDate as well as a start date.

How to Develop

Prerequisites

I am also using semantic-ui, but I need to integrate it better. For now, to get it working you need to run gulp semantic-build.

I think that is everything that you need to install ahead of time. I think typings is optional at the moment as the typings folder is saved in git.

I was using Visual Studio Code to write the application, but that shouldn't be a requirment.

Once you have all the prerequisites, clone the repository and type npm install. There are several gulp and/or npm tasks that can be run. The npm tasks call the gulp tasks. The tasks can also be run using Visual Studio Code's task runner. The build and test are hooked up to the Build and Test tasks in Visual Studio Code.

  • clean
    • This removes the javascript files compiled from the typescript files
    • npm run clean
    • gulp clean
  • build
    • This creates a development build
    • npm run build
    • gulp build
  • test
    • This runs the ava test suite
    • npm run test
    • gulp test
  • package
    • This packages the electron app
    • npm run package
    • gulp package

Contributing

If you feel that this is missing something or you wish to contribute feel free to add an issue or make a pull request.

You can’t perform that action at this time.