This tutorial is deprecated!

This tutorial was published in 2020 and is no longer maintained. The code might not work as expected and to be honest I would have taken it offline if it wasn't for the fact that it still gets a lot of traffic. I hope you can still find some value in it. I have removed some parts that definetly don't work anymore. I personally really enjoy Nuxt 3 with tailwindcss and Vercel these days. Feel free to checkout my personal website.

About this series

In this series, I want to build a modern, extensible, yet simple set up that allows me to quickly build and deploy a web-frontend, -backend and database. From an educational point of view, my main goals with this series are

  • to get a deeper understanding of how to build and deploy applications

  • to have at least a basic knowledge of every single component that is involved

  • to have a playground that wasn't hacked in a quick and dirty way and I can use for future projects

What are we going to build

While this project functions as a template for future projects, we still need some sort of goal. This is why we will create the simplest todo-app ever. Todo-apps are a good use case as it is simple but still covers most aspects of a modern application. We will have to:

  • connect a database to store todos

  • work with that database by reading, creating, updating and deleting entries

  • create a backend that exposes a REST-API for our frontend

  • secure our backend properly

  • build a frontend that works well with data from an API

There are several ways to build this modern web-application. I chose the following frameworks, each of which is covered in one tutorial:

  • Part I: The Backend Using Java With Spring

  • Part II: The server-side-rendered Frontend Using VueJS And NUXTJS

  • Part III: Dockerizing Our Front- & Backend

  • Part IV: Deploying Our Front- & Backend In The Cloud using Heroku dynos

  • Part V: Automating The Build- And Deployment-Process using GitLab CI/CD

Prerequisite

  • Good knowledge of object-oriented programming and java

  • Good knowledge of javascript

  • Basic knowledge of the terminal

  • A mac - While all of this should also work on windows I did not spend any time to check for or provide solutions for windows



The complete code after completing all parts can be found here.

Part I: The Backend with Java & Spring