Add container diagrams GH-63

Author: pintergreg

practicals/04_c4.md

@@ -65,7 +65,51 @@ revealjs-url: "../assets/reveal.js-5.2.1/"
 :::::::::
 ::::::::::::
 
-# component diagram (C4) for statistics module
+# Level 2: Container diagram
+
+- a container is an application or a data store
+    - [e.g., a server-side web application, a desktop application, a mobile app]{.text-smaller}
+- shows the high-level shape of the software architecture and how responsibilities are distributed across it
+    - also shows the major technology choices
+    - and how the containers communicate with one another (interfaces)
+- simple, high-level technology focused diagram that is useful for software developers and support/operations staff alike
+
+::: {.wide-quote .mt-2}
+> Zooms into the software system, and shows the containers (applications, data stores, microservices, etc.) that make up that software system. Technology decisions are also a key part of this diagram.
+>
+>  Simon Brown - [The C4 Model for Software Architecture](https://www.infoq.com/articles/C4-architecture-model/)
+
+:::
+
+## container diagram of the flashcard application
+
+:::::::::::: {.columns}
+::::::::: {.column width="35%"}
+![](c4/container.excalidraw.svg){height=375}
+
+:::::::::
+::::::::: {.column width="65%" .fragment}
+![](c4/container_server_client.excalidraw.svg){height=425}
+:::::::::
+::::::::::::
+
+# Level 3: Component diagram
+
+- shows the major structural building blocks of the application (with interfaces)
+- roughly like the UML component diagram
+    - but the concept of a component is more relaxed
+    - as the implementation is not necessarily OO
+- basically the actual blueprint of the software
+- focus on this level in the project assigment
+
+::: {.wide-quote .mt-2}
+> Zooms into an individual container to show the components inside it. These components should map to real abstractions (e.g., a grouping of code) in your codebase.
+>
+>  Simon Brown - [The C4 Model for Software Architecture](https://www.infoq.com/articles/C4-architecture-model/)
+
+:::
+
+## component diagram for statistics module
 
 :::::::::::: {.columns}
 ::::::::: {.column width="60%"}