1 00:00:01,110 --> 00:00:03,690 ‫So now that we know the fundamentals 2 00:00:03,690 --> 00:00:06,540 ‫of both the technologies that we're going to use 3 00:00:06,540 --> 00:00:08,310 ‫in this project, 4 00:00:08,310 --> 00:00:11,550 ‫so that's React, Router, and CSS modules 5 00:00:11,550 --> 00:00:15,150 ‫we are now ready to build the actual pages 6 00:00:15,150 --> 00:00:16,260 ‫of the application. 7 00:00:16,260 --> 00:00:18,993 ‫And so let's now go do that. 8 00:00:20,180 --> 00:00:23,879 ‫And what I mean by actual pages is these pages 9 00:00:23,879 --> 00:00:26,670 ‫that we saw before in our demo. 10 00:00:26,670 --> 00:00:29,340 ‫So with the actual content and styling. 11 00:00:29,340 --> 00:00:34,340 ‫And remember that those are again, the homepage. 12 00:00:34,800 --> 00:00:37,000 ‫So this one that we already implemented 13 00:00:37,000 --> 00:00:40,650 ‫we have the product page, the pricing page 14 00:00:40,650 --> 00:00:42,500 ‫and the login page. 15 00:00:42,500 --> 00:00:45,840 ‫Well, this now brought us to the application 16 00:00:45,840 --> 00:00:49,260 ‫but if we log out and then log in again 17 00:00:49,260 --> 00:00:52,983 ‫then this brings us, yeah, to this login page. 18 00:00:56,210 --> 00:00:59,070 ‫And then in the next lecture we will implement 19 00:00:59,070 --> 00:01:00,810 ‫the application layout. 20 00:01:00,810 --> 00:01:05,613 ‫So with the sidebar, this menu right here and the map. 21 00:01:06,830 --> 00:01:11,830 ‫Alright, now of course we are not going to write the content 22 00:01:11,850 --> 00:01:15,230 ‫and the styling here ourselves, but instead we get them 23 00:01:15,230 --> 00:01:18,570 ‫from the starter files that we already copied 24 00:01:18,570 --> 00:01:20,220 ‫into our project folder. 25 00:01:20,220 --> 00:01:22,560 ‫And so now let's take a closer look 26 00:01:22,560 --> 00:01:24,220 ‫at what we actually have there. 27 00:01:24,220 --> 00:01:25,410 ‫And I want to do that 28 00:01:25,410 --> 00:01:28,683 ‫in the file explorer because that's a bit easier. 29 00:01:29,520 --> 00:01:32,730 ‫So we have the starter folder right here 30 00:01:32,730 --> 00:01:36,680 ‫and we have a couple of images and then these three folders. 31 00:01:36,680 --> 00:01:41,490 ‫Now let's start by dragging the data folder out here. 32 00:01:41,490 --> 00:01:44,253 ‫So into the root folder of our project. 33 00:01:45,540 --> 00:01:49,110 ‫And then let's also grab these four images 34 00:01:49,110 --> 00:01:52,020 ‫and drag them into the public folder. 35 00:01:52,020 --> 00:01:55,860 ‫So just like we have been doing before, we will use images 36 00:01:55,860 --> 00:02:00,830 ‫from the public folder, so not from this assets folder 37 00:02:00,830 --> 00:02:04,320 ‫that we also have inside the sources folder. 38 00:02:04,320 --> 00:02:07,740 ‫So the assets here are to be directly imported 39 00:02:07,740 --> 00:02:09,339 ‫into our JavaScript code. 40 00:02:09,339 --> 00:02:10,630 ‫So if we want to do that 41 00:02:10,630 --> 00:02:13,820 ‫then we place them here into this assets folder. 42 00:02:13,820 --> 00:02:16,560 ‫But that's actually not what we want 43 00:02:16,560 --> 00:02:19,260 ‫so let's just delete that folder actually. 44 00:02:19,260 --> 00:02:22,810 ‫And so then finally we have components and pages 45 00:02:22,810 --> 00:02:26,223 ‫which we also have in our starter files. 46 00:02:27,300 --> 00:02:31,020 ‫So in this lecture we are going to take care of the pages. 47 00:02:31,020 --> 00:02:34,300 ‫And so let's now grab everything that we have here 48 00:02:34,300 --> 00:02:38,133 ‫and copy into the pages folder that we already have. 49 00:02:39,630 --> 00:02:43,500 ‫So we will basically override a few files 50 00:02:43,500 --> 00:02:46,683 ‫or most of the files that we already have there. 51 00:02:48,120 --> 00:02:50,550 ‫So these pages, there were just dummy content. 52 00:02:50,550 --> 00:02:54,843 ‫And so now let's replace all of them. 53 00:02:55,689 --> 00:03:00,689 ‫So we got again, our pricing product login page. 54 00:03:00,820 --> 00:03:02,640 ‫And now what's different is 55 00:03:02,640 --> 00:03:07,443 ‫that we have now our corresponding CSS module files. 56 00:03:08,310 --> 00:03:11,943 ‫So let's quickly check them out back in vs code. 57 00:03:13,440 --> 00:03:17,380 ‫So you see that our pages folder has indeed changed. 58 00:03:17,380 --> 00:03:20,200 ‫Let's stand close everything we have here 59 00:03:21,450 --> 00:03:23,250 ‫and open them again because 60 00:03:23,250 --> 00:03:26,280 ‫in the meantime these files have changed. 61 00:03:26,280 --> 00:03:29,280 ‫And let's start with the homepage 62 00:03:29,280 --> 00:03:32,870 ‫and then also opening up the corresponding module. 63 00:03:32,870 --> 00:03:35,410 ‫And then I'm going to close the sidebar this time 64 00:03:35,410 --> 00:03:38,320 ‫using command or control B. 65 00:03:38,320 --> 00:03:41,493 ‫So otherwise we really don't have enough space here. 66 00:03:43,290 --> 00:03:47,490 ‫Alright, so our homepage now looks like this. 67 00:03:47,490 --> 00:03:50,970 ‫And you see it has exactly this content here in terms 68 00:03:50,970 --> 00:03:54,720 ‫of the markup that we have here except for this link 69 00:03:54,720 --> 00:03:57,590 ‫but we will add that here in a second. 70 00:03:57,590 --> 00:04:00,180 ‫So we also already have our styles 71 00:04:00,180 --> 00:04:02,970 ‫which is coming from the CSS module. 72 00:04:02,970 --> 00:04:04,350 ‫So just like we learned before 73 00:04:04,350 --> 00:04:06,870 ‫we are importing our styles object 74 00:04:06,870 --> 00:04:08,670 ‫from this module right here. 75 00:04:08,670 --> 00:04:11,160 ‫So here we have all these styles. 76 00:04:11,160 --> 00:04:13,500 ‫So we have a homepage class, 77 00:04:13,500 --> 00:04:15,390 ‫which we are using right here. 78 00:04:15,390 --> 00:04:19,110 ‫And then we have all these other styles that are necessary 79 00:04:19,110 --> 00:04:20,069 ‫for this page. 80 00:04:20,069 --> 00:04:21,810 ‫And so with this, let's check 81 00:04:21,810 --> 00:04:24,753 ‫out what our page looks like at the moment. 82 00:04:26,370 --> 00:04:30,470 ‫So that's already a bit similar, so not bad 83 00:04:30,470 --> 00:04:32,520 ‫let's just try to reload. 84 00:04:32,520 --> 00:04:35,780 ‫And apparently we have already an error here which says 85 00:04:35,780 --> 00:04:38,733 ‫that our background image could not be found. 86 00:04:40,920 --> 00:04:45,090 ‫So here we should probably remove these two dots 87 00:04:45,090 --> 00:04:47,220 ‫and that still doesn't work. 88 00:04:47,220 --> 00:04:49,710 ‫So let's check out if this image is actually 89 00:04:49,710 --> 00:04:53,030 ‫in our public folder and while it is not. 90 00:04:59,100 --> 00:05:02,380 ‫So let's come back to our starter files here once again 91 00:05:03,400 --> 00:05:08,400 ‫and grab that from here into our current public folder. 92 00:05:11,370 --> 00:05:16,370 ‫All right, let's try that again here. 93 00:05:18,210 --> 00:05:20,130 ‫And beautiful. 94 00:05:20,130 --> 00:05:21,600 ‫So now that works. 95 00:05:21,600 --> 00:05:25,280 ‫And if you find these going back between the starter files 96 00:05:25,280 --> 00:05:27,650 ‫and our own files, a bit confusing 97 00:05:27,650 --> 00:05:32,640 ‫then let me just mention that I decided to have so many 98 00:05:32,640 --> 00:05:36,300 ‫like pre-built files here for two reasons. 99 00:05:36,300 --> 00:05:38,040 ‫First, it's to save us a lot 100 00:05:38,040 --> 00:05:40,200 ‫of time so that we don't have to type 101 00:05:40,200 --> 00:05:44,240 ‫up all these styles and all this markup here on our own. 102 00:05:44,240 --> 00:05:49,240 ‫And second, it is also to prepare you more for a real job. 103 00:05:49,500 --> 00:05:51,570 ‫So for a job where you will collaborate 104 00:05:51,570 --> 00:05:53,490 ‫with other developers. 105 00:05:53,490 --> 00:05:55,020 ‫And so in this example 106 00:05:55,020 --> 00:05:58,610 ‫we can pretend that some other developer on our team 107 00:05:58,610 --> 00:06:03,030 ‫which is more of a designer, prepared all these CSS modules 108 00:06:03,030 --> 00:06:08,030 ‫for us and also these React components so that then we 109 00:06:08,220 --> 00:06:13,220 ‫as a true React developer can add the data and the logic 110 00:06:13,620 --> 00:06:18,360 ‫and really put it all together in a nice application. 111 00:06:18,360 --> 00:06:22,210 ‫So in this project, I actually really wanted to imagine 112 00:06:22,210 --> 00:06:24,810 ‫that you are now working on a team. 113 00:06:24,810 --> 00:06:27,579 ‫And so you are the React developer who builds 114 00:06:27,579 --> 00:06:31,530 ‫this application based on some files that you already got 115 00:06:31,530 --> 00:06:34,413 ‫from some other member of your team. 116 00:06:35,270 --> 00:06:39,950 ‫Alright, but now let's then complete this homepage 117 00:06:39,950 --> 00:06:42,090 ‫that our designer friend 118 00:06:42,090 --> 00:06:46,233 ‫or colleague gave us and add that button down here. 119 00:06:47,520 --> 00:06:49,383 ‫So this one right there. 120 00:06:51,810 --> 00:06:56,190 ‫So this button or this link actually should take us 121 00:06:56,190 --> 00:06:59,940 ‫to the app page, so to the app layout component. 122 00:06:59,940 --> 00:07:02,280 ‫And so this would be a link 123 00:07:02,280 --> 00:07:05,163 ‫so one of those links from React Router. 124 00:07:08,010 --> 00:07:11,670 ‫So again, this will take us to the app page. 125 00:07:11,670 --> 00:07:16,370 ‫And here actually we are now using a global class name 126 00:07:16,370 --> 00:07:21,370 ‫which is the CTA class, and then start tracking now. 127 00:07:25,710 --> 00:07:27,630 ‫And then of course we need to bring 128 00:07:27,630 --> 00:07:32,630 ‫in the link from React Router dom. 129 00:07:34,780 --> 00:07:37,200 ‫And so now that works. 130 00:07:37,200 --> 00:07:40,590 ‫So about this global class name 131 00:07:40,590 --> 00:07:44,940 ‫this one is located in or index CSS file. 132 00:07:46,620 --> 00:07:47,480 ‫So before I said 133 00:07:47,480 --> 00:07:50,850 ‫that we didn't have any global class names in here 134 00:07:50,850 --> 00:07:53,430 ‫but actually later I added this one. 135 00:07:53,430 --> 00:07:56,910 ‫So because we need this in multiple places, and so 136 00:07:56,910 --> 00:08:01,430 ‫I didn't want to declare this inside of one CSS module. 137 00:08:01,430 --> 00:08:04,410 ‫So we have that here and then we can just use it 138 00:08:04,410 --> 00:08:08,460 ‫as usual in all the components that need it. 139 00:08:08,460 --> 00:08:10,320 ‫And so now we linked here 140 00:08:10,320 --> 00:08:14,920 ‫to this app layout page, which actually hasn't changed. 141 00:08:14,920 --> 00:08:16,920 ‫So this one we didn't override. 142 00:08:16,920 --> 00:08:19,050 ‫And so when we click here now 143 00:08:19,050 --> 00:08:22,413 ‫then we get to that page that we built before. 144 00:08:23,730 --> 00:08:28,503 ‫Nice so next up, let's take care of the logo here. 145 00:08:29,520 --> 00:08:30,620 ‫So here we have this logo 146 00:08:30,620 --> 00:08:34,690 ‫which is actually part of this entire navigation. 147 00:08:34,690 --> 00:08:39,089 ‫So here in the homepage, we now want to get back 148 00:08:39,089 --> 00:08:42,120 ‫that navigation that we already started to build. 149 00:08:42,120 --> 00:08:45,423 ‫And so that's going to be inside this main element. 150 00:08:46,260 --> 00:08:48,880 ‫So then we have the page nav 151 00:08:52,530 --> 00:08:57,213 ‫and also this section element then, so let's bring that in. 152 00:09:01,609 --> 00:09:04,660 ‫And here we have now two go up one level 153 00:09:05,580 --> 00:09:06,720 ‫so that we can then move 154 00:09:06,720 --> 00:09:11,520 ‫into the components folder and then grab that from there. 155 00:09:11,520 --> 00:09:13,050 ‫And here it is. 156 00:09:13,050 --> 00:09:18,050 ‫It looks pretty bad right now, but so let's go fix that. 157 00:09:18,420 --> 00:09:21,930 ‫So that's page nav. 158 00:09:21,930 --> 00:09:24,960 ‫And now here we are using this nav class right now 159 00:09:24,960 --> 00:09:28,140 ‫which gives this this purple background 160 00:09:28,140 --> 00:09:32,590 ‫but actually we do have a starter file for that as well. 161 00:09:32,590 --> 00:09:36,390 ‫So that's right here in this CSS module. 162 00:09:36,390 --> 00:09:39,153 ‫So let's drag that in here, replace. 163 00:09:40,200 --> 00:09:43,800 ‫And so immediately you saw that it changed there. 164 00:09:43,800 --> 00:09:45,600 ‫So let's open that up. 165 00:09:45,600 --> 00:09:48,480 ‫But actually this is not the one that we want. 166 00:09:48,480 --> 00:09:53,359 ‫So we actually want the page now, right? 167 00:09:53,359 --> 00:09:58,359 ‫So let's grab that one, replace it as well. 168 00:09:58,380 --> 00:10:01,803 ‫And here I notice that I imported the wrong one. 169 00:10:02,670 --> 00:10:03,930 ‫So again, that's the kind 170 00:10:03,930 --> 00:10:05,840 ‫of thing that happens when you start working 171 00:10:05,840 --> 00:10:08,130 ‫with all these different files 172 00:10:08,130 --> 00:10:11,403 ‫but that's just how it is in React development. 173 00:10:12,340 --> 00:10:14,660 ‫And these are actually not that many files yet. 174 00:10:14,660 --> 00:10:16,620 ‫So later on we will have hundreds 175 00:10:16,620 --> 00:10:20,523 ‫of files as we start working in our next big project. 176 00:10:22,320 --> 00:10:24,000 ‫So but anyway, let's now open 177 00:10:24,000 --> 00:10:26,820 ‫up this component because this is going to 178 00:10:26,820 --> 00:10:29,690 ‫be our next task that we need to work on. 179 00:10:29,690 --> 00:10:32,490 ‫So building now this page navigation 180 00:10:32,490 --> 00:10:36,450 ‫and actually this is already looking pretty well. 181 00:10:36,450 --> 00:10:40,980 ‫So what we should do is to add another enough link here 182 00:10:40,980 --> 00:10:43,413 ‫for the login page. 183 00:10:45,990 --> 00:10:49,140 ‫So this one will move us to the login page. 184 00:10:49,140 --> 00:10:52,230 ‫And then actually in our real app here 185 00:10:52,230 --> 00:10:55,710 ‫we don't have a link for the homepage, but instead 186 00:10:55,710 --> 00:10:59,763 ‫that homepage will open as we click here on this logo. 187 00:11:00,930 --> 00:11:02,910 ‫So let's remove this one here. 188 00:11:02,910 --> 00:11:05,940 ‫And then let's bring in the logo that we already 189 00:11:05,940 --> 00:11:09,393 ‫have once again in our starter components. 190 00:11:12,450 --> 00:11:16,510 ‫So the logo and the corresponding module, let's select them 191 00:11:16,510 --> 00:11:20,583 ‫and then place them into our components folder. 192 00:11:21,420 --> 00:11:22,680 ‫So here it is. 193 00:11:22,680 --> 00:11:25,200 ‫And then let's just include this here 194 00:11:25,200 --> 00:11:27,950 ‫besides the unordered list. 195 00:11:27,950 --> 00:11:30,870 ‫So the nav will have two children, 196 00:11:30,870 --> 00:11:34,743 ‫the logo and then the UL. 197 00:11:35,610 --> 00:11:39,710 ‫So make sure it got correctly imported and beautiful. 198 00:11:39,710 --> 00:11:40,953 ‫There it is. 199 00:11:42,630 --> 00:11:44,570 ‫So our navigation is working fine. 200 00:11:44,570 --> 00:11:48,720 ‫We didn't include it here yet, but it is working. 201 00:11:48,720 --> 00:11:51,540 ‫But now the only thing that we need to do is to 202 00:11:51,540 --> 00:11:54,393 ‫actually include a link in this logo here. 203 00:11:55,470 --> 00:11:58,740 ‫So right now we see that it's not a link yet. 204 00:11:58,740 --> 00:11:59,573 ‫And so let's open 205 00:11:59,573 --> 00:12:03,420 ‫up the logo by clicking here on this component. 206 00:12:03,420 --> 00:12:06,510 ‫So command or control clicking or 207 00:12:06,510 --> 00:12:09,213 ‫of course you can also open it right there. 208 00:12:10,350 --> 00:12:14,520 ‫So here we return this image as you see. 209 00:12:14,520 --> 00:12:17,583 ‫And so let's just wrap this into a link. 210 00:12:20,520 --> 00:12:25,097 ‫So this link coming again, of course from React Router. 211 00:12:26,270 --> 00:12:29,463 ‫And then here we simply go to the root your L. 212 00:12:31,260 --> 00:12:32,320 ‫Now, okay 213 00:12:34,540 --> 00:12:35,890 ‫Give it a safe. 214 00:12:35,890 --> 00:12:39,900 ‫And so this time we are actually using a link 215 00:12:39,900 --> 00:12:42,750 ‫and not a nav link because we don't want to 216 00:12:42,750 --> 00:12:46,650 ‫add any special styles when this is selected. 217 00:12:46,650 --> 00:12:49,380 ‫So that's really not necessary here. 218 00:12:49,380 --> 00:12:52,670 ‫And so with this, we finish our logo. 219 00:12:52,670 --> 00:12:54,190 ‫And so now when we click here 220 00:12:54,190 --> 00:12:56,790 ‫of course we stay on the same page, 221 00:12:56,790 --> 00:12:59,310 ‫but now let's go to one of these other pages 222 00:12:59,310 --> 00:13:01,890 ‫and then add the navigation there. 223 00:13:01,890 --> 00:13:05,373 ‫And then we will see that this link also works. 224 00:13:06,570 --> 00:13:09,510 ‫So let's open up these other pages. 225 00:13:09,510 --> 00:13:12,880 ‫So that's the login page, the pricing page 226 00:13:12,880 --> 00:13:14,280 ‫and the product page. 227 00:13:14,280 --> 00:13:19,280 ‫So all these pages will get that navigation. 228 00:13:20,910 --> 00:13:23,823 ‫So here we see we already have some problems. 229 00:13:25,500 --> 00:13:27,960 ‫So that's because we're using use state 230 00:13:27,960 --> 00:13:29,430 ‫that is not imported. 231 00:13:29,430 --> 00:13:31,743 ‫So let's quickly get that. 232 00:13:33,540 --> 00:13:38,540 ‫So import use state from React. 233 00:13:40,530 --> 00:13:43,230 ‫And so you see that our designer colleague here 234 00:13:43,230 --> 00:13:45,423 ‫had a small mistake in his coat. 235 00:13:46,410 --> 00:13:51,410 ‫So this is where we need that page nav component, right? 236 00:13:54,330 --> 00:13:56,609 ‫So make sure that it got imported 237 00:13:56,609 --> 00:13:59,070 ‫and now we just do the exact same thing 238 00:13:59,070 --> 00:14:00,573 ‫in all the other ones. 239 00:14:03,750 --> 00:14:08,750 ‫So we want our page now here and there it is. 240 00:14:09,510 --> 00:14:14,510 ‫And finally also here in the pricing page. 241 00:14:16,470 --> 00:14:17,820 ‫Give that a save. 242 00:14:17,820 --> 00:14:20,760 ‫And with this, we should be finished. 243 00:14:20,760 --> 00:14:23,430 ‫So we can go to the pricing page 244 00:14:23,430 --> 00:14:26,373 ‫and it becomes active product login. 245 00:14:27,390 --> 00:14:29,700 ‫Well, this one was not found 246 00:14:29,700 --> 00:14:31,860 ‫I guess we didn't create that yet. 247 00:14:31,860 --> 00:14:32,820 ‫And then finally, 248 00:14:32,820 --> 00:14:37,220 ‫we also have the World Wise Image logo where we can click 249 00:14:37,220 --> 00:14:38,763 ‫and then we move there. 250 00:14:39,640 --> 00:14:44,640 ‫Beautiful, so let's see now. 251 00:14:44,850 --> 00:14:46,020 ‫And indeed I see 252 00:14:46,020 --> 00:14:50,670 ‫that we don't have a route yet for our login page. 253 00:14:50,670 --> 00:14:52,470 ‫So let's add that here. 254 00:14:52,470 --> 00:14:54,950 ‫And I like to keep the order of the routes here 255 00:14:54,950 --> 00:14:58,620 ‫in the order that the links appear up there. 256 00:14:58,620 --> 00:15:02,280 ‫And so let's create ourselves a new route 257 00:15:02,280 --> 00:15:07,280 ‫with the path of login like this. 258 00:15:08,070 --> 00:15:11,610 ‫And then here, the element that we need is 259 00:15:11,610 --> 00:15:16,610 ‫of course the login page that we just worked on. 260 00:15:20,610 --> 00:15:22,200 ‫Okay. 261 00:15:22,200 --> 00:15:24,870 ‫And now let's once again import 262 00:15:24,870 --> 00:15:26,957 ‫that here and there we go. 263 00:15:30,980 --> 00:15:35,130 ‫Now, the only thing that I want to do here is to 264 00:15:35,130 --> 00:15:40,130 ‫also add basically this green button there. 265 00:15:41,940 --> 00:15:45,000 ‫And so here in this special link, 266 00:15:45,000 --> 00:15:46,770 ‫so only in this one, 267 00:15:46,770 --> 00:15:50,140 ‫let's add the class name that is coming 268 00:15:50,140 --> 00:15:53,373 ‫from styles.CTAlink. 269 00:15:56,550 --> 00:15:58,980 ‫Okay, and there we go. 270 00:15:58,980 --> 00:16:01,140 ‫So let's just move here quickly 271 00:16:01,140 --> 00:16:04,140 ‫to that file to check out that class. 272 00:16:04,140 --> 00:16:07,140 ‫And so here we have that CTA link. 273 00:16:07,140 --> 00:16:10,290 ‫And notice how here we are using basically 274 00:16:10,290 --> 00:16:13,580 ‫the JavaScript way of writing the variable instead 275 00:16:13,580 --> 00:16:17,140 ‫of the normal CSS way, which would be like this. 276 00:16:17,140 --> 00:16:19,800 ‫And the reason for that is that a class name 277 00:16:19,800 --> 00:16:24,303 ‫like this would be a lot harder to then get into our JSX. 278 00:16:25,170 --> 00:16:27,650 ‫So when we're writing CSS modules 279 00:16:27,650 --> 00:16:31,110 ‫we usually define our class names like this. 280 00:16:31,110 --> 00:16:34,230 ‫So in this key map case style, 281 00:16:34,230 --> 00:16:35,940 ‫I think it's called. 282 00:16:35,940 --> 00:16:39,330 ‫And so yeah, then we included right there. 283 00:16:39,330 --> 00:16:42,690 ‫And with this, we finished our navigation 284 00:16:42,690 --> 00:16:44,560 ‫and we finished all our pages. 285 00:16:44,560 --> 00:16:47,660 ‫We will take care of this button here a bit later. 286 00:16:47,660 --> 00:16:50,740 ‫And so yeah, now everything works fine. 287 00:16:50,740 --> 00:16:52,400 ‫And so next up, let's take care 288 00:16:52,400 --> 00:16:56,703 ‫of building the layout here in this main application part.