We've got two applications to make. Let's decompose them into components, and we'll see which components we can reuse in both applications.

The room application has two main screens:

Room selection is a simple grid. Each room has its own box, and from now I'll keep naming this box as a card.

You can click on the room card. This action will navigate you to the second screen of the app: Timeline Overview.

Timeline overview is a screen that has three parts. Top left, where the back button is. When you click on this button, you'll be navigated back to the room select screen.

The bottom left, where you have a card presenting current meeting details.

Bottom right where you have a list of all meetings for the whole day.

Each room will have its own background image, selected from predefined files. The background is presented on full screen.

Admin application, similar to the Room application, has only two screens. This time, it's a bit more complicated.

---
title: Design overview
description: Let's look at how our final application should look like
privateVideoUrl: https://stream.mux.com/5EjG1KyRl95OBvKLUm4Zp91Oo1GeNIkJwDkbSGzsefE.m3u8
---

We've got two applications to make. Let's decompose them into components, and we'll see which components we can reuse in both applications.

## Room application

The room application has two main screens:

-   Room select - where you can select the room and check which meeting is currently on
-   Timeline overview for the selected room - view a detailed list of meetings in the selected room

### Room select

Room selection is a simple grid. Each room has its own box, and from now I'll keep naming this box as a card.

![Room select](https://d2uusema5elisf.cloudfront.net/courses/building-angular-applications-with-nx/module_05/lesson_05.05/public/images/04-05-01.png)

You can click on the room card. This action will navigate you to the second screen of the app: Timeline Overview.

### Timeline overview

Timeline overview is a screen that has three parts. Top left, where the back button is. When you click on this button, you'll be navigated back to the room select screen.

The bottom left, where you have a card presenting current meeting details.

Bottom right where you have a list of all meetings for the whole day.

![Timeline overview](https://d2uusema5elisf.cloudfront.net/courses/building-angular-applications-with-nx/module_05/lesson_05.05/public/images/04-05-02.png)

Each room will have its own background image, selected from predefined files. The background is presented on full screen.

## Admin application

Admin application, similar to the Room application, has only two screens. This time, it's a bit more complicated.

### Room select

Like previously, we have a screen where you can select a room to edit. Additionally, there is one card with a plus icon. When you click on that card, you'll be navigated to the edit screen, where you may create a new room.

galczo5

Let's look at how our final application should look like

Design overview

Okay, we have our backend application migrated, we have our dtos extracted, we

are ready to create two front-end applications.

And in this lesson I'm going to show you the design we are going to achieve.

It's going to be application that will be displayed next to the doors in the

So we have a room and in that room you can have multiple different meetings and

we want to inform people in front of that room that the meeting is in progress.

We want to inform them about future meetings and so on.

So the room application will contain two screens.

So on that screen you have a grid of available rooms and you have to pick the

Each room will have as you probably remember ID, name and image that we are

We will have a predefined number of backgrounds you can select.

The second screen is the one that will be displayed after clicking on the room

It will contain room background as a full screen cover for the whole screen.

You will have room name and details about current meeting on the lower left

side and you will have a list of future meetings.

We cannot forget about back button that is in upper left side.

The room application is that simpler application.

So we have the second application and we are going to call it admin application

So it's going to be an admin panel for the room application.

And similar to room application we will have the screens.

First one is a grid of rooms you can click and select for edit.

And you will have a special button to add a new room.

So on this screen you can click to edit room or click to add a new room.

So first of all you will have details like room name.

You will have a list of available backgrounds you can select.

And of course you will have a form to add a new meetings to that room.

So basically on that screen you can edit all the room details and add new

We will use NX to create shared component libraries.

So as you probably noticed both applications share some visual components like

It's similar on the room application and admin application.

So we will have some reusable components that we will share between

First of all we will have cards component that will be used on room grid and on

We will have the same button component on both applications because we want to

And of course we will use some list components.

I want to introduce here a new term we will call it domain components.

So reusable components like card or buttons are pretty damp.

They have some inputs, they have some outputs but they do not contain any

So we will have some components that contain business logic and still we share

So for example room list component.grid is a domain component.

It will contain all necessary logic to fetch list of the rooms and displayed.

The second example of domain component will be room background component.

As I previously informed you we will have a predefined list of backgrounds.

So after this lesson you know the design we want to achieve.

There is nothing more to do, let's start calling.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Masterclasses

Tutorials

Fullstack React with TypeScript