1 00:00:00,390 --> 00:00:05,730 Hey, everyone, in this lecture, we will take a quick tour of the application we will be building 2 00:00:05,730 --> 00:00:08,680 throughout the course here at Zero to Mastery. 3 00:00:08,760 --> 00:00:13,410 We firmly believe in developing real world projects for learning new technology. 4 00:00:13,710 --> 00:00:16,079 It's one thing to learn a frameworks features. 5 00:00:16,290 --> 00:00:20,310 It's another thing to applying those features in realistic scenarios. 6 00:00:20,580 --> 00:00:25,380 Our goal is to prepare you for the everyday challenges of an angular developer. 7 00:00:25,830 --> 00:00:30,180 The best way to learn a new technology is by developing a practical app. 8 00:00:30,390 --> 00:00:33,660 It's also fun before writing a single line of code. 9 00:00:33,810 --> 00:00:37,080 Let's take a moment to explore the app for this course. 10 00:00:37,230 --> 00:00:39,720 We will be creating an app called Clips. 11 00:00:40,050 --> 00:00:45,870 It's an application for gamers to upload and share their gaming highlights on the home page. 12 00:00:46,080 --> 00:00:50,070 There is a list of clips uploaded by users, as you can imagine. 13 00:00:50,280 --> 00:00:55,500 Our app may have hundreds of clips to prevent our servers from being overloaded. 14 00:00:55,680 --> 00:00:58,710 We are going to add infinite scrolling to the page. 15 00:00:59,010 --> 00:01:03,090 The page will listen for the scroll event to load additional clips. 16 00:01:03,420 --> 00:01:07,200 More clips are loaded if I scroll to the bottom of the page. 17 00:01:07,740 --> 00:01:10,830 Of course, we can click on a clip to watch a video. 18 00:01:11,040 --> 00:01:15,300 Upon clicking on a clip, we will be redirected to a different page. 19 00:01:15,540 --> 00:01:18,930 Interestingly, that page does not get refreshed. 20 00:01:19,230 --> 00:01:24,870 Angular was able to intelligently swap the pages contents without reloading assets. 21 00:01:25,350 --> 00:01:30,750 Taking a closer look at the address bar, a unique URL is assigned to this clip. 22 00:01:31,160 --> 00:01:37,230 Angular has a package for adding routing capabilities to an app by leveraging the browser's history 23 00:01:37,230 --> 00:01:38,010 API. 24 00:01:38,340 --> 00:01:43,410 We have a section dedicated to angular routing features that we use in our app. 25 00:01:44,010 --> 00:01:50,160 Back to the page, we have a video player that can play the clip associated with the URL. 26 00:01:50,430 --> 00:01:53,010 Let's try playing a video there. 27 00:01:53,450 --> 00:01:55,920 I like they've been able underneath the player. 28 00:01:55,980 --> 00:01:57,900 We have another list of clips. 29 00:01:58,230 --> 00:02:03,300 Unlike the home page, infinite scrolling has been disabled, believe it or not. 30 00:02:03,450 --> 00:02:08,310 The code for this section of the page is the same code as the home page. 31 00:02:08,580 --> 00:02:12,630 Designing components is going to be a major topic in this course. 32 00:02:12,930 --> 00:02:17,340 As developers, we should strive to create reusable components. 33 00:02:17,970 --> 00:02:22,770 This topic leads us to another section of our app at the top of the page. 34 00:02:22,890 --> 00:02:26,340 We have the option of logging in or creating an account. 35 00:02:26,670 --> 00:02:28,920 Clicking on this link will open a model. 36 00:02:29,130 --> 00:02:33,420 In addition, the model's contents are a set of tabs and forms. 37 00:02:33,750 --> 00:02:39,540 Most courses will have you install a third party package to add these UI features. 38 00:02:39,810 --> 00:02:40,890 Not this course. 39 00:02:41,430 --> 00:02:48,090 The JavaScript ecosystem is filled with packages that add UI elements with desirable behavior. 40 00:02:48,420 --> 00:02:52,050 But what if we can't find a package to address our apps needs? 41 00:02:52,320 --> 00:02:57,090 In that case, we're going to need to develop a solution in this course. 42 00:02:57,240 --> 00:03:01,410 We are going to be designing a moral component and tabs components. 43 00:03:01,680 --> 00:03:08,190 By doing so, you will be able to design components tailored for your projects without bloating or bundle 44 00:03:08,190 --> 00:03:09,960 with third party packages. 45 00:03:10,290 --> 00:03:12,030 I'm going to quickly log in. 46 00:03:13,440 --> 00:03:20,880 After logging in, we have a page for managing clips, users will be able to edit, delete or sort through 47 00:03:20,880 --> 00:03:21,810 their uploads. 48 00:03:22,050 --> 00:03:26,100 Behind the scenes, we are using Firebase to manage our backend. 49 00:03:26,400 --> 00:03:30,870 It'll help us with managing users file data and databases. 50 00:03:31,320 --> 00:03:33,630 There's one more page worth checking out. 51 00:03:33,930 --> 00:03:36,540 You will have a page for uploading videos. 52 00:03:36,840 --> 00:03:40,890 This is probably going to be the most exciting part of the course. 53 00:03:41,190 --> 00:03:44,250 Processing videos is an action for servers. 54 00:03:44,490 --> 00:03:49,800 However, we are going to be taking a different route rather than relying on a server. 55 00:03:49,890 --> 00:03:56,940 We will integrate WebAssembly into our project for extracting screenshots from a video if I were to 56 00:03:56,940 --> 00:03:57,990 upload a video. 57 00:03:58,200 --> 00:04:02,700 Our app will generate a group of three screenshots which are selectable. 58 00:04:02,940 --> 00:04:06,660 As you can see, we have a lot to unpack for this project. 59 00:04:06,900 --> 00:04:13,530 By the end, you will be comfortable developing large, angular applications with various technologies. 60 00:04:13,770 --> 00:04:17,250 When you're ready, let's jump into the world of angular.