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, Donovan Hutcheon shares how he built a vanilla dashboard to record spending habits, using React, Go, Heroku and the programmable card. Check it out here!
Click here to download Donovan’s presentation slide deck.
You can find his Go back-end repo here, and React front-end repo here.
Transcript of the demo
Donovan [00:04]
Here’s my dashboard, there’s nothing fancy about it. There's a lot of stuff that goes on in the background. At the moment, it’s a vanilla transaction dashboard that provides a platform to build something cooler. So, that's me, my name is Donovan Hutcheon and I work at Luno as a back-end engineer in the payments team. We integrate Luno with all the different payment providers and banks and so on. That's what I do during the day. So, why did I build this project? At Luno, we use Go, so I did this primarily to get proficient at Go and learn how it works and understand it better. But also, to learn a web front-end technology so I chose React. Yeah, the choice was basically built on you can use React Native and it works on the web too.
Donovan [01:29]
One of my work colleagues at one point said that Heroku was quite cool to work with. He told me about it, so I thought I would check it out for this project. So, that is basically what I wanted to learn out of this. The dashboard is something basic to record your spending habits in a database. It creates a platform to build something cooler. So, how it works. I will give a demo after a short explanation. So, it’s hosted on Heroku, which provides free parts – they call them dynos, like containers – where you can run your application. If you put your credit card details in, you can get a few more hours out of them. For the most part, it is free, except CICD. That costs $10 per month per pipeline. What we've got here basically is Heroku posting the staging and production environment. I have a Go web server and MariaDB database and basically web apps built with React. It basically interfaces with GitHub for CICD.
Donovan [02:55]
Every time I do a git push everything is built and gets deployed to these dynos. You can basically access the built code immediately. So, I really wanted to do that as a starting point for this project to remove the headache and hassle. I hate running scripts to get stuff deployed, they go out of date, so it’s better to have them all done automatically and you don’t have to worry about that, so that was quite cool.
Donovan [03:37]
So let’s check it out. At the moment, I’m not running a production environment, everything is basically staging, but I’ve built the application such that you can have different environments. The thing with Heroku is, especially on their free plan, when you first hit the server it has to start up because they shut it down and bring it back up once the request hits. Apparently, there are apps or services out there that keep your app alive every 30 minutes, but obviously then you use up your free hours and you may have to end up paying for your service.
Donovan [04:30]
I’m using MaterialUI. You may recognise this page. It is basically straight out of a template. It’s basically a simple login screen. You can create an account quickly, actually. It’s now hitting the back-end server, which is now waking up to service this request, so this definitely wouldn't work for pre-transaction authorisations. It takes 2 seconds to start up. So it's not fully-fledged yet, there’s still a lot of work to do. So now, in theory, an email has been sent to your email account. But that's not implemented.
Donovan [05:49]
I’ll show you by logging into Heroku. This is the dashboard with a concept of pipelines, which is basically the CICD pipeline of an application. So you can have many applications in a pipeline, but essentially it’s one GitHub repository, so charkadog – that’s my pet dog – is basically the Go back-end server and the shinycat is the React front-end. So, within this application, there are plugins and stuff that you can use. This application makes use of two plugins: MariaDB database, which is basically MySQL but Oracle bought it, and then MailTrap service.
Donovan [07:07]
This basically provides a testing SMTP server. So, basically, you don’t spam people from the testing environment. I thought this is quite cool as I don’t have to integrate it with a real email. This could be rendered in a template. Go has a template library but I haven’t done that yet. It would be nice if this request was routed on the front-end and landed on the front-end but it routed through the back-end. So this basically confirms the email address and you can log in if you want to see your link. Nope, okay I will continue.
Ben [08:01]
Can you see what password I used?
Donovan [08:26]
No, that will all be hashed. It should load the table automatically, click on transactions and it will fetch them hopefully. Obviously, it is empty because it’s a new user. You can go to settings and get your API token. So, I did something today that I thought I’d never do – I actually referred to Jenkins for his design advice. So you can get your API token. It is basically a JavaScript token – JSON web token – and you can use that in the Investec banking app to authenticate you with the back-end when you send your transactions through. Let’s do that now. I’ll log in to my banking and stop sharing.
Ben [09:47]
It is pretty cool so far, how much functionality you got out of those platforms.
Donovan [09:54]
Yeah, so that was cool because you know in a multi-user environment, you can do a little bit more, maybe aggregate people’s data if they agree to it, I guess.
Ben [10:14]
I guess you could also run your family in there or something. Or if you have a cult you can run your cult off of it. Give everyone a spend card.
Ben [10:43]
So did you mostly spend today working on that? Or how much time have you spent over the last while?
Donovan [10:51]
I've been working on this for quite a while – it doesn't look like it, but there's a whole bunch of tests in the background. Basically, I’ve been playing with different libraries and just figuring out what works. And basically just getting an idea of how to build a good Go application by getting an idea of architecture and so on, and how to lay the app out. Just get something that is easy to work with. It’s like a hobby and if it's fun to work with you will do it more often. As soon as it becomes a schlep and you’ve got a ton of spaghetti to deal with, it’s not much fun anymore. Okay, so we can send a simulated transaction through. I've actually got a separate, pre-created user set up, so we will log in again as that user. Let’s just change it to something unique. Here we go. Here is a transaction list of all the stuff, so if we sort by date – did I send it through?
Ben [13:11]
It doesn’t look like it because you would have the simulation file.
Donovan [13:18]
It should come through now if I refresh. There we go. That is basically the limit of it at the moment, so there are filters as well, the back-end does have functionality to filter the transactions but it’s not done on the front-end yet. I’m new to React, learning that at the moment, getting up to speed. The last time I really worked thoroughly with a front-end framework was three years ago using jQuery and Backbone and Marionette.js. So, there’s a bit to catch up on since then.
Ben [14:14]
How does it know which city the transaction is in?
Donovan [14:19]
Well, it basically comes from the --
Ben [14:23]
Oh sorry, it is there.
Donovan [14:29]
That's what I used my day off for, basically to capture a bunch of simulators transactions.
Ben [14:33]
Haha, cool. A day well spent.
Ben [14:40]
I really appreciate it at least. I’m sure, everyone else does as well.
Donovan [14:48]
So, this is the part where I explain what I spent my time on. This past week, I wasted a ton of time, trying to get the React static web pages to be hosted on GoLang webserver. That would have been cool. But what I really want to do is be able to develop seamlessly on my laptop, and basically push the code to Heroku and that basically picks up the API URLs and so on that it needs to use. I haven’t quite figured out how to do that yet. So at the moment, the API URL is hardcoded to point to the charkadog URL. Also, building multiple apps on a mono-repo type scenario, where you have some Go code and JavaScript in the same git repository isn’t easy, which is basically what you need to do if you do that first point. It is possible it seems but I haven’t figured it out yet.
Donovan [16:01]
Heroku forces you to build from multiple repos – separate ones – and each one costs $10/month for a CI pipeline. $10 for building Go is reasonable for me, but $20 for building both – to build JavaScript seems a bit crazy, so I'm gonna investigate other options like AWS, Google Cloud services, SAVO, or something like that might be cheaper. Also, a deal-breaker for me was running tests in CI – they don't provide MariaDB or MySQL database inside the CI building containers to run a test against. So, what I have at the moment is like this kind of home-baked dependency injection mechanism, where I've kind of mocked out the interface to the database layout. And that's how my tests are done. So, none of the actual SQL statements are tested, which kind of sucks.
Donovan [17:14]
So, when I embarked on this project I kind of wanted to see what it's like to get things done properly, not take shortcuts and stuff, and that is why it has taken such a long time, and this is kind of one of the blockers for me to achieve that. That basically forced me to find other ways of testing, so I built that interface. Along the way, I learned React the bruteforce way. Basically, wasted an entire weekend figuring out that React Hooks is different to React. That was a bit frustrating, but once I learnt how to discern the correct way of doing things, to search for React Hooks, for example, how to get things done, I was on my way. Not there yet, but I’m learning.
Donovan [18:15]
Yeah, so this is where you can find the code in my git repository, Go back-end and React front-end. You can contact me on Slack, or by email, if you want to. The README is not updated yet with deploying everything, but I will update it and that’s where everything will be. In those repositories. So, next steps. Yeah, like I said switch out Herouku with something maybe more flexible where I can run tests inside the CI pipeline containers – AWS or Google Cloud will definitely give me that. I’m not very knowledgeable on AWS – I’ve poked around with it before but I never really got proficient with navigating the thousands of options on their landing page.
Donovan [19:10]
Finishing the filtering functionality on the front-end – I mean that's almost done. If I had another day, I could have done it. Yeah, display some sexy charts and graph summaries on the dashboard page and untangle the spaghetti, like the DI framework that I spoke of. Since building this project, I learnt other methods of doing DI. One of our senior engineers at Luno mentioned Google/Wire as an option for compile time dependency injection. Sounds like an interesting concept so I’m going to look into that in the near future. Just stupid stuff like revoking tokens – that token that you crete there on that one page – that’s basically valid for a whole year. There must be some mechanism to revoke that.
Donovan [20:21]
Looking into GraphQL is also something that I’d be interested in doing. And also make use of the new Investec API features to query transactions and so on. So that is where that can go next.
Donovan Hutcheon is a software engineer passionate about fitness, travel and his dogs. He’s currently working at Luno as a back-end Golang engineer. In his spare time, he likes to poke around with learning new technologies, which, over the past year, have ranged from the Godot game engine to React and serverless cloud hosting. Check out his GitHub here.
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.