Motivation

While using a spreadsheet application for a long time to manage finances, I always found it complicated and cumbersome to get the task done.
My idea was to have an application that would ease the process and provide additional benefits like seamless generation of charts, but also smart helpers, that can give advice based on the provided data.

Capabilities

• Manage Accounts and related data
• Support for multiple users, currencies
• Creation of different transaction types (Receipts, Expenses, etc.)
• Automatically linked transactions
• Configurable transaction table view for an uncluttered display
  • Define which months to show
  • Define which columns to show (e.g. Receipts, Expenses)
  • Date formatting including/excluding month, year part
  • Show/Hide transaction text, memo, type
• Transaction Templates for repeating transactions
• Savings, Revenues and Expenses modules
• Special applicators like Interests, Collectors, Projections
  • Automatically calculate and assign interests
  • Automatically collect and assign credit card expenses to the giro account
  • Plan future expenses/receipts
• Flexible composition system to set up tailor-made layouts
• Dashboard which provides on the spot information
• Several render types/views for transactions/data:
  • Table view (all months, by categories, by months)
  • Charts (Donut, Bar, Line, Combined charts; lowest, highest values, deltas)

Technologies

• Electron, TypeScript
• Vue, Vue Router, Vuex, Vue i18n
• Lodash, uuid
• Webpack
• Chartjs
• Sass

Screenshots

History (2018)

Application to manage finances.

Capabilities

• Manage Accounts, Banks data
• Work with different currencies
• Creation of different transaction types
• Linked transaction types
• Transaction Templates for repeating transactions
• Transaction Plans for transaction series
• Special applicators like Interests, Credit card transaction cumulators
• Different views on transactions (like months view or categories view)
• Visualize data as charts

Technologies

• Electron
• Vue, Vue Router, Vuex
• Lodash, Q, Joi, uuid, Schema, Moment
• Grunt, Mocha, Chai, Sinon, Istanbul
• Chartjs
• Sass, Uglify, JSHint

Highlights

• Usage of several ES2016+ capabilities, like:
  • Modules
  • Classes
  • Promises
• Code coverage with Istanbul
• Decoupled development of styles using a prototype and a style guide
• Widget Components
• Commands journal

Tests

Coverage Report

Test: Create Transaction Types

context('when different transaction types given', function() {

    _.forEach(dataProvider_transaction, (data) => {

        it(`should push one ${data.type} onto store`, function() {

            store.state[data.collection] = []

            return store.dispatch('create' + data.action, data.transaction)
                .then(
                    () => {
                        expect(store.state[data.collection])
                            .to.have.lengthOf(1)
                    }
                )

        })

    })
})

Commands

Create Deposit

(function() {

    this.execute = function() {
        return new Promise((resolve, reject) => {
            validateDeposit(this.payload.transaction).then(
                value => {
                    store.dispatch('createDeposit', value)
                    resolve({status: 'success'})
                },
                error => {
                    reject({status: 'failure', error})
                }
            )
        })
    };

}).call(CreateDepositCommand.prototype);

Styles

For a more elegant development experience, a style guide and a prototype have been created.

Styleguide: Table

Styleguide: Widgets