A Digital Dojo

Building A Web App

I've had this itch for too long now.

I will build a simple web app that presents all the martial art clubs in Sweden. The reason behind this initiative is that I have been curious about local businesses and how they grow together with their members.

The realm of martial arts is fascinating and having practiced brazilian jiu jitsu for almost a year have resulted in a a new hobby and a new learning journey, besides coding.

My main approach has been to keep it really simple at first. And not being stuck in details hindering my momentum and motivation.

I see this project as a long-term learning project and I am approaching it with a two-speed approach:

1. Get things up and running fast to build momentum.
2. Deeply understand concepts and design principles for long term learning.

The tech stack I will use is the following:

• Spring Boot for a REST-ful backend.
• Angular for a JavaScript frontend.
• Postgres SQL for database management.

The basis for my decision was easy. We use the above tech stack in my project at work so this is a great opportunity to learn it deeply.

I know there are gazilions of tutorials out there on how to build a webapp from scratch, using [insert any preferred language] and not to mention all the no-code solutions I can use to get this app up and running.

But this is a learning project, and I want to learn how to build a product, from scratch.

Storage

One of the first questions I bounced with my mentor is how I should handle the data and what related requirements there are for this.

I need to persist data on local sports clubs and their locations, including contact details. The database will not have a huge throughput of writes since most of the traffic will be made of reading from the database.

Communication & API's

We need to be able to fetch all the club entities from the database, as well as creating new ones. So there will be two main methods to create and get the entities.

I will use a REST API to communicate between the frontend and the backend. Using a REST controller that directs the calls between the two instances. The frontend will be deployed to http://localhost:4200, and the backend to http://localhost:8080.

What I would need to remember is to use Spring Boot validation when I go to production later on, since it is now open for user input without any validation of entries or user authentication.

Frontend

The frontend app will first present a list of all clubs, then I might add a map view to it. I am not that bold to build my own yet, so I think I will go with using Google Maps API.

The First Stepping Stone

To get myself started and to have something to build on to, I prepared a Springboot and Angular app that already present a list of entities.

Cudos and shoutout to Baeldung for a great tutorial.

GitHub - nimblegeek/clublist

Contribute to nimblegeek/clublist development by creating an account on GitHub.

GitHubnimblegeek

This project is probably enough complex for me, yet simple enough to get something up and running. It is not a Twitter app with complex algorithms and "tangling" network traffic.

My main goal is to learn more about how frontend and backend services communicate with each other and how to use my own database to present data in a simple graphical user interface.

Let's get rollin' 👊🏾 🥋