Design overview

[00:00 - 00:12] 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.

[00:13 - 00:18] So we're about to add two applications. First one is room application.

[00:19 - 00:34] It's going to be application that will be displayed next to the doors in the conference center. 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.

[00:35 - 00:42] We want to inform them about future meetings and so on. So the room application will contain two screens.

[00:43 - 00:51] You will have room select. So on that screen you have a grid of available rooms and you have to pick the one you want to display.

[00:52 - 01:03] Each room will have as you probably remember ID, name and image that we are going to use as a background. We will have a predefined number of backgrounds you can select.

[01:04 - 01:16] The second screen is the one that will be displayed after clicking on the room on the grid. It will contain room background as a full screen cover for the whole screen.

[01:17 - 01:33] 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.

[01:34 - 01:41] The room application is that simpler application. So we have the second application and we are going to call it admin application .

[01:42 - 01:49] So it's going to be an admin panel for the room application. And similar to room application we will have the screens.

[01:50 - 01:59] 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.

[02:00 - 02:08] So on this screen you can click to edit room or click to add a new room. The second screen is about room edit.

[02:09 - 02:18] So first of all you will have details like room name. You will have a list of available backgrounds you can select.

[02:19 - 02:30] 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 meetings.

[02:31 - 02:40] We will use NX to create shared component libraries. So as you probably noticed both applications share some visual components like room on the grid.

[02:41 - 02:48] It's similar on the room application and admin application. So we will have some reusable components that we will share between applications.

[02:49 - 03:02] First of all we will have cards component that will be used on room grid and on a room details screen. We will have the same button component on both applications because we want to unify it.

[03:03 - 03:12] And of course we will use some list components. I want to introduce here a new term we will call it domain components.

[03:13 - 03:22] So reusable components like card or buttons are pretty damp. They have some inputs, they have some outputs but they do not contain any business logic.

[03:23 - 03:36] So we will have some components that contain business logic and still we share it between the applications. So for example room list component.grid is a domain component.

[03:37 - 03:46] 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.

[03:47 - 03:56] 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.

[03:57 - 03:59] There is nothing more to do, let's start calling.