Subscribe to access the entire course.
🌶️ tip: unsubscribe at any time.
Ah, that's a great question!
Frontend at Scale is a bi-weekly newsletter (as in, once every two weeks) that is all about software design and architecture for frontend engineers.
Subscribing to the newsletter is the best way to support my work and encourage me to keep making free resources like this one.
I probably don't need to say this, but I would never ever spam you—and you can unsubscribe with a single click at any time.
Already subscribed? Don't worry, you won't get double-subscribed. Nobody deserves to read my terrible jokes twice.
Module 2: Understanding
[00:03] Alright, folks. It’s time for the first exercise of the course. I really hope you give this one a try. And it’s going to be drawing that container diagram of the FullSnack system. Now, this is the container diagram that we saw before. This is level two in the C4 model, and it’s essentially grabbing our our system context diagram and zooming into that software system itself. So here we see the software system represented as this box here, and we can see all of the containers inside of it.
[00:34] Now, the good news is that you don’t have to make anything up for this exercise because all of the information that you need should be in the project spec. So here we have the project spec, which again you have access and a link to it in the description of this video where we have the system context diagram. This is the one that we saw earlier and the information about the system containers. So these are the two pieces that you need essentially to to draw this system context diagram or the container diagram, I should say.
[01:05] Now, you can use anything that you want for drawing this diagram. You can use pen and paper, you can use Excalidraw, TL draw any tool that you want for drawing diagrams. You can use Figma if you’re going to go real fancy, like with a custom diagram like the one that I drew here, I will share the, the template that I use for, for drawing this diagram in particular, in case you want to copy that. But I wouldn’t recommend it for something that, for an exercise like this, this shouldn’t take more than 10 to 15 minutes at the most.
[01:34] So I’ll do you know, I’d use whatever tool you’re already comfortable with if you want to get more more fancy you can use a tool like Lucidchart. Lucidchart is probably my favorite Diagraming tool that I that I use often. And this is a very general purpose tool diagrams and that looking very nice. It has a free trial or a free subscription where you can draw up to three diagrams, but it should be enough for these this exercise of course.
[02:02] And if you’re going to go really fancy, you can use a Structurizr, which is it’s a tool that it’s built specifically for drawing C4 models C4 model diagrams in which we can represent our models as code. So here is an example. This is, this is very similar to Mermaid in a way. This is a domain specific language in which we can draw our diagrams as code and then we can see them represented here visually and we can sort of zoom into and see see different levels of the diagram.
[02:34] So these also are very good, but it will take time to actually learn this syntax and so on. So if you plan to use more C4 diagrams in, in your, in your application, in your own applications, I highly recommend learning Structurizr But for this exercise, the free to use any low quality tools that you like.
[02:53] So I hope you give this a try. Take note no more than 10 to 15 minutes to work on this and I’ll see you in the next video. I’ll show you my version of the container diagram.