Step #2 : TravelNest - System Design Diagrams

Now that we have defined product requirements for MVP, the next step is to have some diagrams that describe the system to be build.

For this purpose, we will use C4 models which is an efficient way to iteratively define the system with increasing level of details.

Tools used in this step:

1. C4 models
2. Excalidraw web diagramming tool

TravelNest Context Diagram

This first diagram is a zoomed out view of the system to be built. It places the system at center and describe various stakeholders and other system interactions.

It is created for a wider group of audience who are both technical and non-technical.

Here's a representation of context diagram for TravelNest Platform.

Now that we have the big picture defined, let's zoom into the central box and define some of its components.

TravelNest Container Diagram

Now we zoom in to the context diagram to describe next level of details via container diagram.

• TravelNest System is broken down into major containers - Web application, API application, User Management and Database
• For each container, certain level of implementation details are provided. For e.g., Web application is developed using ReactJS
• Arrows between containers describe how they work with each other

Level of details in this diagram depends on individual teams. Some teams may choose to go into finer levels while others prefer to keep it at high level to start with.

Here's how the container diagram for TravelNest looks like...

TravelNest Component Diagram

The third 'C' in the C4 diagram stands for Components.

The Component diagram shows how a container is made up of a number of "components", what each of those components are, their responsibilities and the technology/implementation details.

As we will be building the application using cloud-native AWS services, we will skip this diagram and cover it in the next post that describes the solution architecture.

Next steps

As a next step, let's make some system design decisions and define the solution architecture using AWS components. See you all soon.

Posts in this series:

1. Step #0 : Creating TravelNest - an AirBnB functional clone
2. Step #1 : TravelNest - Define Product requirements for MVP
3. Step #2 : TravelNest - System Design Diagrams