Expenses app

expenses.md

Tech considered

• Hasura
• Vega-lite
• Chart js / graphql2chartjs
• preact
• Bootstrap

Main ideas

• Fetch data from Hasura using a view that can be fed directly into a vega-lite plot
• Smallest amount of code and dependencies possible
• No state in the client
• No auth or simple as can be

Start docker, hasura, pgsql

sudo systemctl start docker
sudo docker-compose up -d

Query hasura

aggregate doc

Command using httpie:

$> http POST http://localhost:8080/v1/graphql query='query {user {id name expenditures_aggregate {aggregate {sum {amount}}}}}'

{
    "data": {
        "user": [
            {
                "expenditures_aggregate": {
                    "aggregate": {
                        "sum": {
                            "amount": 20
                        }
                    }
                },
                "id": 1,
                "name": "Damien"
            },
            {
                "expenditures_aggregate": {
                    "aggregate": {
                        "sum": {
                            "amount": 30
                        }
                    }
                },
                "id": 2,
                "name": "Wenjiao"
            }
        ]
    }
}

Insert an object

mutation / insert doc

mutation {
  insert_expenditure(objects: [{
    amount: 100,
    category_id: 1,
    user_id: 1
  }]
  ) {
    returning {
      id
      amount
    }
  }
}

[todo] Create views

• helps output nice JSON
• makes queries shorter

Blog post

Example: total spending per user

CREATE OR REPLACE VIEW "public"."expenditures_total" AS 
 SELECT expenditure.user_id,
    sum(expenditure.amount) AS total_amount
   FROM expenditure
  GROUP BY expenditure.user_id;

Query:

{
  user(order_by: {total_spending: {total_amount: desc}}) {
    id
    total_spending {
      total_amount
    }
  }
}

Output:

{
  "data": {
    "user": [
      {
        "id": 1,
        "total_spending": {
          "total_amount": 120
        }
      },
      {
        "id": 2,
        "total_spending": {
          "total_amount": 30
        }
      }
    ]
  }
}

[todo] Create a schema for the app

Example

[todo] Static list of expenses

[todo] Filters for list of expenses

[todo] Form to add an expense

[todo] Form to add a category

[todo] Mobile apps

Blog post

[idea] Stats dashboard

CREATE STATISTICS

pgsql health checks