Every week, we run a meetup for the Investec Programmable Banking community. Developers demo cool projects they've been working on and everyone has the chance to ask questions. If you've been wondering where programmable banking is at, here's your sneak peek!
In this demo, Jethro Flanagan shares how he used programmable banking to facilitate easy adding and sharing of expenses in small groups. It works really well for a couple living together or a group of friends going on holiday. The app was built with Rails, React and Redux.
Click here to download Jethro’s presentation slide deck.
Repos coming soon!
Transcript of the demo
Jethro [00:02]
Cool. It is not a very exciting name, because I haven't thought of a better name – so, Shared Expenses. Basically, the idea was to share expenses in a smaller group of people, like one other person or with maybe five other people. It may be home expenses or going on holiday together for a group of people or whatever it happens to be. Obviously, that second one is not going to happen any time soon, but for households and stuff is generally the purpose of it.
Jethro [00:28]
And I was already using an existing shared expense app called Settle Up which is actually very nice to work with, and they do have an API but it was quite constrained. I wanted to integrate the IPB stuff so that I could just have my transactions automatically go into it because it wasn't doing that, and also see which transactions I had recorded in the app, and it was becoming more and more complicated.
Jethro [00:59]
The API is limited in that I couldn’t get access to existing stuff that was inside it – I could only add stuff, and I wanted to edit and sort of change things up, so I decided that I would make an app that copies a lot of the ideas that they had because I thought they were good, but I’m trying to bring something different as well.
Jethro [01:16]
Then the other main purpose was that I wanted to learn Rails because I was predominantly on front-end, and I basically am only working on Rails at the moment, so I needed to skill up a lot. I haven’t played with Redux toolkit and React, so I wanted to check out what that was like.
Jethro [01:43]
It’s quite a simple architecture. Basically, Investec authenticates with Auth0, and then it just fires off any new transactions and the after transactions hook into Rails, and then the React front-end sits and looks at that stuff. Rails are sitting with the active record using Postgres. I haven’t used ActiveRecord either. As one of the devs at OfferZen – we use Mongo as our database base layer. It was interesting to change that over, a bit of a fun, a useful sort of thing.
Jethro [02:19]
Challenges encountered over here was that I don’t really know Rails, I haven’t used ActiveRecord before and I hadn’t used Redux's toolkit before either. So, it took me a little while to get used to it, but then it is really quick to use, and it’s nice how much cleaner it makes everything. Then I was doing a very basic JSON serialisation of stuff in Rails, and it was very limiting. I had to switch that out to JSONAPI or GraphQL or something similar because it just became very clunky to try and retrieve data out of it.
Jethro [02:53]
Then dealing with relational data within the selectors on the React side – getting multiple sets of derived data were becoming very clunky. I think switching out the APIs would probably be better. I see I skipped over one of the actual demo pieces, I will show you the real demo now.
Jethro [03:16]
This is basically the app. I am using seeded data for the moment just because I haven't hooked everything up fully. I did have parts of it running, but I switched that out for the moment and obviously, I don't want to show all my actual transactions. These are all transactions that would be coming in from Investec. They’d be thrown from the app from the after-transaction hook and they are just sitting over here. This is the latest 30 days. You can have a look at any of these and because it is seeded it obviously has somewhat nonsense names and things like that, so don't look too closely at those things.
Jethro [04:05]
Any one of these transactions I can start adding to groups. Basically, these transactions are bare, and they are not doing anything yet, but you can see a couple of them are tagged, like ‘home’ and ‘holiday’. Those are the only two groups that I got running. What that means is that I am going to start collating those expenses together and I will be able to share them with somebody else. I will show you how that works in a moment. Basically, let me take this first one, and I am going to assign it to the ‘home’ group and give it a category. I will pretend it is groceries and I can change this if you want and test it.
Jethro [04:50]
You can see it has been assigned to a group over here. I can edit this information again, but I will just jump ahead. I can't change the amount because it is coming from an actual transaction, and that is pretty key. I am going to jump over to my groups and then we will see it over there. There is the groceries thing that I created, and you can see the related transaction that it came from. And I can reassign and change groups, but for the moment, I will just jump back. You can kind of see all these other expenses. I actually have someone else in here as well, my girlfriend and I are in this group together, and all of our expenses are basically totalled up in date order going up.
Jethro [05:35]
Essentially, the purpose of this is to see who should pay for the next thing. In the ‘home expenses’ group, I bought a whole lot of stuff, she has bought a whole lot of stuff, and I am actually R109 down. Technically I am on negatives. I should actually purchase the next thing. It’s just a total of everything, and I am R109 under what she spent. If I go and look at other groups, for example, the ‘holiday’ group over here, in this case, I am actually ahead, and she is just under R1000 in terms of settling the amount on this group. She can just go and buy the next thing that we need to buy.
Jethro [06:13]
You can see over here that this is a normal expense, sort of a custom expense that you can add. The problem with just adding expenses from your real existing banking is that only hooking it up to the after transaction hook means that only credit card expenses go through, and sometimes you do cash payments and sometimes other types of expenses happen that should be assigned to ‘home’ or ‘holiday’ or whatever custom groups you have.
Jethro [06:44]
So, to deal with that, and the fact that currently, my girlfriend doesn’t have any programmable banking, I have let her add her own custom expenses. I haven’t hooked up that little piece yet – I’ve just disabled it – because there was a bug. But over here, if there are custom expenses, you can edit the values because obviously, I don't have anything to relate it to transaction-wise. If she suddenly decides that this is going to be R2000 and it says in the ‘holiday’ group, we can change all of this. Maybe this is actually some take out if I update that. There you go. Obviously, R2000 take out was an emergency shopping on that.
Jethro [07:30]
Then it changes the totals of what is owed. If again if we change that to R3000, you will see the totals change as well. And we can then reassign this and throw it into the ‘home’ group, and that will kick it out of here. We will see it back over here. Emergency shopping. Then it changes the expenses and costs on everything. It basically just allows us to go and assign various expenses to whatever we are doing, generally home stuff, but if we are travelling around or going on any trips, we can set that up as well.
Jethro [08:08]
You will see that with the expenses that are tied to transactions, we cannot just change things like amounts, but we can do everything else – give it the description and do all that kind of stuff. That is the basics of it. Let me switch over now. It would be interesting to hear if anyone would find something like this useful and any other kind of similar apps that were helpful that you think would be a good idea to take a look at for reference. You can always just feel free to ping me on the OfferZen Community Slack. I am at Jethro with OfferZen in there. Repo is coming soon, and I just need to tidy up a few things in it and make sure that I don't have any accidental credentials, but I am pretty sure that is all good, but it is always fun to check those kinds of stuff.
Jethro [09:07]
Next steps. Changing to GraphQL, and then hooking up and adding in custom expenses where you can actually manually set up those kinds of stuff. Allowing people to create their own groups as at the moment, I’m doing that stuff quite manually on the back-end. There are a bunch of pieces on the UI that are missing, and the UX needs to be refined a lot more. I’m probably going to drop the component pack that I am using. At the moment I’m using Ant Design, which is quite useful for some prototyping idea, but it is a bit limiting for mobile stuff, which is what I want to go with.
Jethro Flanagan bounced between FinTech, advertising, and a software engineer at a bank before joining OfferZen. He’s left his days of Flash behind, and sticks mostly to React and (more recently) Rails. Lately he’s dabbled with making his own raytracer and mathing around with shader code.
Get involved in the Programmable Banking Community
If you’re not part of our community yet, sign up and join the fun. You can also see more of the demos from our meetups on our YouTube channel here.
For those of you in the community, check out our GitLab to see more of the awesome projects members of our community are working on. You can also sign up for challenges, where you can help find solutions for real life problems.
For more information, pop me a mail.