Architecture of www.JoymonOnline.in C4 after Jamstack upgrade

Below are the previous posts about the architecture of my personal site https://joymononline.in with the date published

2016-08-30 Architecture of www.Joymononline.in - Context diagram

2017-03-14 Architecture of JoymonOnline - Serverless

2019-04-30 Architecture of www.JoymonOnline.in via PlantUML

This is one more post with the latest architecture of the same after the Jamstack (Previously styled JAMStack) upgrade.

Introduction

Let us talk about some boring stuff. 

Documenting software architecture is always painful. Most of the time when we validate the available architecture against code, we can see it is going in 2 different directions. Basically, there is no easy way to map architecture elements to code. If we strictly follow the methodologies, it will reduce the application releases. So normally when people weigh documentation against the working code, they always prefer working code and documentation catch up later.

Is there any way we can document the architecture in sync with the code base? One of the answers is the C4 architecture model. Personally, I have been following it for around 6 years. It seems really better.

What is the C4 Architecture model?

It is advised to read the book "Software Architecture for Developers" to understand it well. In essence, it follows a zoom-in/out model to document the architecture.

• System context - This shows how the system is going to interact with external systems over which we can't have any control.
• Container diagram - Here we zoom in to our system. It shows what are processes required in our system or how our system is divided in terms of operating system processes. 
• Component diagram - This shows how a process is made up. In the .Net world, this can show what assemblies are consumed by a process.
• Class diagram - This opens up the component and shows what are the classes and how they are related.

The above only tells about the diagrams. What about the complete document. There is a sample architecture doc available in the book.

www.Joymononline.in container diagram

Now coming to the subject of this post. Below goes the container diagram of the website. Note that it includes some details of CI/CD pipelines as the Jamstack requires the static site to serve to have all the data that needs to be fetched and merged at the time of compilation.

Also, note that this is not the latest and greatest diagram as I have to get out from Heroku for hosting the YouTube proxy API as they discontinued the true free option.

What happened to component and class diagrams?

A simple personal site that is generated as a static site doesn't need complex components or class diagrams hence omitted. But for enterprise LOB applications it is a MUST have.