What I learned from building a simple frontend web app

May 1, 2024

The Challenge

Deep in the financial challenge of sending two young children to nursery school in 2019, I had a vision for an app that would help me understand and forecast my childcare cost payments. It would allow me to see the pattern across the coming years as to how payments would change, and we reached various milestones. Whether it was free hours for three and four year olds, or one child growing out of the app and into primary school, it would bring me some financial clarity.

Starting to Build

What began as a spreadsheet with various different calculations, then turned into a Swift iOS app and then eventually a web app. I say “app” but in reality it was just a simple frontend calculator. The tricky bits are in calculating the number of days per month, how the 20% the government gives (up to a certain threshold) and how that’s split between myself and my partner.

It was the first digital thing I built after a hiatus of 10 years probably, but it was good to get back into the swing of things, whilst also re-learning at the same time.

Looking back, it was a simple frontend using JavaScript, HTML and Tailwind. I built forms, tables and calculations that all re-rendered with JavaScript. Calculating days per month, based on certain days of the week is a pretty heavy task.

It took me a while to build. Both because I was working at the same time, but also because I was learning. I designed, coded and tested the thing myself and it took me a few months.

The most useful thing it did was to generate a long term chart of how your finances would change over the coming years. This chart was game changing.

When I finished the first version and got it working, I was pretty proud of my achievement. Now was the point in time that I could have pushed on or moved on. I had a realisation that although this was useful, it could be easily achieved in a spreadsheet, or I could calculate and transfer money weekly (with an easier calculation) instead of monthly.

My Learnings

Here’s some of what I learned:

My need could have been solved a completely different way! Either through weekly calculations to make the costs more uniform across the month, or monthly using a Google Sheets spreadsheet.
Tables are a complete nightmare to generate and re-generate anytime data updated by manipulating the DOM and adding new and removing old elements all of the time. I needed to learn React!
The marketing website and the actual app probably shouldn’t live on the same domain (except for some circumstances). You need to be able to update each independently if the thing grows much more.
Charts are very cool, and very easy to set up.
The calculations were in a public JS file for anyone to access. Not the most secure moat, allowing anyone to copy and iterate the product.
Users had no way to save anything. I had no backend, no authentication and no way to keep data secure and reusable. I needed to understand how to save to the backend.
The types of apps which I wanted to build, and how I wanted to save data, I wasn’t quite gelling with Swift. Whilst Swift UI is pretty amazing and very powerful, I decided to move to web tech, so that I could cover frontend and backend more easily.

Conclusion

Overall, it was a pretty useful experience to get back into building things, and also helped me understand the limitations of frontend html, javascript and css, realising the power of React and Node, and giving me more reasons to learn them in depth.