1 00:00:00,150 --> 00:00:05,400 In this lecture, we need to discuss the next steps we will take to develop an application. 2 00:00:05,670 --> 00:00:10,350 We have completed the first step of transferring the static design into our app. 3 00:00:10,680 --> 00:00:13,950 The next step is to make it functional like before. 4 00:00:14,130 --> 00:00:18,240 It can be daunting to decide where to begin with making the app functional. 5 00:00:18,540 --> 00:00:20,460 We're going to need a lot of features. 6 00:00:20,790 --> 00:00:25,650 The best way to decide where to go next is to break everything into smaller steps. 7 00:00:26,040 --> 00:00:31,570 First, we need to ask ourselves what features will our app have at a high level? 8 00:00:31,590 --> 00:00:34,470 We are going to have two features in our app. 9 00:00:34,920 --> 00:00:37,200 The first feature is a user system. 10 00:00:37,440 --> 00:00:42,780 We need a system for logging in, creating an account and persisting authentication. 11 00:00:43,140 --> 00:00:45,450 The second feature is a video system. 12 00:00:45,750 --> 00:00:49,950 This part of the app will help the user manage and share their uploads. 13 00:00:50,280 --> 00:00:52,830 We need to develop a way to upload files. 14 00:00:53,160 --> 00:00:56,460 Now the question becomes which systems should we work on? 15 00:00:57,000 --> 00:01:01,380 In my opinion, working on the user system is a great place to start. 16 00:01:01,710 --> 00:01:05,160 Users can't upload videos if they don't have accounts. 17 00:01:05,459 --> 00:01:11,220 Therefore, the user system should come first and foremost after picking where to start. 18 00:01:11,430 --> 00:01:13,620 We will run into the same problem again. 19 00:01:13,980 --> 00:01:16,020 Where do we start with a user system? 20 00:01:16,290 --> 00:01:18,510 We will apply the same technique again. 21 00:01:18,900 --> 00:01:22,470 We need to break down this system into smaller steps. 22 00:01:22,950 --> 00:01:24,960 We're going to need a couple of things. 23 00:01:25,170 --> 00:01:30,210 First, we need a UI for allowing the user to interact with the user system. 24 00:01:30,570 --> 00:01:33,600 Secondly, we're going to need form validation. 25 00:01:33,930 --> 00:01:37,020 User data is sensitive and highly important. 26 00:01:37,290 --> 00:01:41,370 If we enter data incorrectly, it could lead to a lot of issues. 27 00:01:41,730 --> 00:01:44,790 Form validation will help us tackle this issue. 28 00:01:45,150 --> 00:01:49,140 Thirdly, we need to store user information in a database. 29 00:01:49,320 --> 00:01:55,560 Lastly, we need to assist the users authentication out of these four steps. 30 00:01:55,680 --> 00:01:57,660 Which do you think we should start with? 31 00:01:57,990 --> 00:02:00,780 The UI seems like a great place to start. 32 00:02:01,170 --> 00:02:05,700 We won't be able to enforce validation if there isn't a UI to begin with. 33 00:02:06,000 --> 00:02:07,890 The same goes for everything else. 34 00:02:08,190 --> 00:02:10,199 The UI will tie it all together. 35 00:02:10,770 --> 00:02:13,680 We're getting closer to figuring out where to start. 36 00:02:13,890 --> 00:02:16,830 We need to design the elements for our UI. 37 00:02:17,250 --> 00:02:20,010 There are a lot of pages and sections in our app. 38 00:02:20,220 --> 00:02:23,790 We want to put our focus on the parts for the user system. 39 00:02:24,120 --> 00:02:28,230 Let's talk about what the UI will look like at the top. 40 00:02:28,260 --> 00:02:30,240 We will have a navigation menu. 41 00:02:30,480 --> 00:02:33,060 We should make the menu a separate component. 42 00:02:33,360 --> 00:02:35,880 It contains a link for opening a modal. 43 00:02:36,390 --> 00:02:39,210 The word modal is a fancy word for a pop up. 44 00:02:39,450 --> 00:02:42,570 The mobile will be layered on top of the entire page. 45 00:02:42,870 --> 00:02:47,830 We will make the modal and individual components after creating the modal. 46 00:02:47,850 --> 00:02:52,170 We will need two more components for the login and registration forms. 47 00:02:52,470 --> 00:02:56,100 Both forms will be in separate components to reduce clutter. 48 00:02:56,640 --> 00:02:59,190 Lastly, we have a tab's component. 49 00:02:59,520 --> 00:03:02,250 We don't want to show both components at once. 50 00:03:02,580 --> 00:03:05,790 We should allow the user to switch between either form. 51 00:03:06,090 --> 00:03:10,020 We will create tabs to help users switch between forms. 52 00:03:10,500 --> 00:03:14,250 At this point, we've broken down everything into smaller steps. 53 00:03:14,520 --> 00:03:16,590 It's the main takeaway of this lecture. 54 00:03:16,980 --> 00:03:21,600 Developing an application can seem daunting, but everything becomes clear. 55 00:03:21,630 --> 00:03:27,720 Once you get used to breaking an app into smaller pieces and the next set of lectures, we are going 56 00:03:27,720 --> 00:03:30,060 to start creating these components.