Budget Tracking Web Application
Following my previous post I have decided to focus my attentions on React, Kotlin and AWS to help myself in becoming more productive in work and to aid in my general career progression.
An earlier blog post I wrote talks about a budget tracking mobile app I want to create using React-Native. This is still an ambition of mine as I would get more use out of the application if it was on a mobile device rather than in web-app form, however this isn’t as conducive to my ultimate short-term goal – getting up to speed with the tech stack my team at work uses on a daily basis. So, in light of this, I decided to turn this into a web-app first and foremost.
The tech
The web-app will use the following technologies:
- React front-end, utilising Redux
- Kotlin back-end
- Spring Framework using Gradle
- Docker
- Kubernetes
- Hosted on AWS
- Jenkins for continuous deployment
As noted, the sole reason for picking all these technologies is because my team uses them on a daily basis and I want to get up to scratch in the basics as fast as I can so I’m productive for the team. I’m already comfortable with React and JavaScript in general, but everything else is new to me.
How it will all work
Here’s my plan:
- I will have separate project workspaces for client/server side code, so I will have two separate repos for these.
- The main page will have 4 react components:
- A summary dashboard which displays your daily allowance, adjusted according to your spending history in that month;
- A list of all the transactions made in that month;
- A pie chart and summary table of where the various transactions have been spent over that month;
- An add button to input new transactions into the application.
- Kotlin will need to be set up to support the various actions that a user will perform. For instance, adding a new transaction, editing existing transactions or deleting the record altogether. The app will also support user registration and login.
- Testing both apps using Jest/JMeter, possibly Selenium for automated end-to-end tests.
- Spring will do its spring magic (dependency injection and inversion of control is all new to me – pure magic!)
- Data will be stored on a MySql database (own docker instance? use Amazon RDS???)
- The front-end, back-end and potentially the DB will all be created as a Docker Image which will need to be configured so that they’re able to talk to each other.
- Kubernetes will be set up to manage the state of the docker images and ensure that the app is continuously live.
- Host on AWS.
- Set up Jenkins so that an update to the Github repository will instigate an automatic deployment. Allow for testing within the Jenkins run process.
No doubt at some point I will probably introduce some other technologies or maybe reconsider my original plan but this gives me a good basis to start off from.
Next steps
There’s a lot to do here and considering where to begin can be a daunting task.
I’ll tackle the problem first by creating a crude prototype for the front-end. I find that working on the front-end first can provide an initial boost as:
- You have something to show for your initial work;
- It helps you to visualise what you’l need from your back-end code;
- I have experience with React, so I can get something basic working pretty quickly, giving a bit of a confidence boost.
As I’m sure most projects are, there is a slight chicken & egg feeling about it all. I’ll need to flip/flop between front-end/back-end and DB to get a viable MVP and iterate on all of these as and when needed.
I’ll document my findings along the way. I already have a small flexbox issue that I need to cover in a blog post so watch this space!
That’s me for now – what are you working on? I’d love to hear!