1 00:00:00,240 --> 00:00:01,170 What's up, everybody? 2 00:00:01,500 --> 00:00:05,910 And welcome to yet another or Yagiz project in this project. 3 00:00:05,940 --> 00:00:11,940 We will build an app that allows the visitor to search get abuser's on display. 4 00:00:12,040 --> 00:00:19,500 Some useful info about the get up user, like the mandatory pose list of followers, most star repoll 5 00:00:19,780 --> 00:00:20,680 and acceptor. 6 00:00:21,180 --> 00:00:22,500 Before we take a look at a project. 7 00:00:22,710 --> 00:00:29,130 Let me just mention that during the project we all use react hooks, react router dom to set up our 8 00:00:29,130 --> 00:00:36,600 pages and navigation fusion charts to display our user repos data using their slick and professional 9 00:00:36,600 --> 00:00:40,920 charts and all of the zero for our authentication. 10 00:00:41,130 --> 00:00:45,900 As far as the app, we've got a search bar where we can type a get up user. 11 00:00:46,020 --> 00:00:49,610 So, for example, we could search for Brad. 12 00:00:50,130 --> 00:00:51,700 So we're gonna go with Brad. 13 00:00:51,720 --> 00:00:54,060 Traverse City and Land. 14 00:00:54,180 --> 00:01:01,110 Once we get our data back, then, of course, we'll display all the user info about Brad. 15 00:01:01,360 --> 00:01:07,080 So notice the loading spinner while we are fetching the data from the get up API. 16 00:01:07,470 --> 00:01:13,200 And once we get our data back and see the Repos followers following and just and also some personal 17 00:01:13,210 --> 00:01:15,600 info's followers that Brad has. 18 00:01:16,020 --> 00:01:21,720 And also in the charts, we display useful information about the EBOs. 19 00:01:22,140 --> 00:01:24,570 For example, what is the most popular language? 20 00:01:25,020 --> 00:01:27,180 Which language has the most stars? 21 00:01:27,660 --> 00:01:28,980 Which is the most. 22 00:01:29,220 --> 00:01:31,010 Start a ripple as well. 23 00:01:31,140 --> 00:01:32,940 Which one is the most Vork one. 24 00:01:33,430 --> 00:01:36,150 Course we can go here and search for another one. 25 00:01:36,660 --> 00:01:39,580 So in this case, I'm going to go for Sarah. 26 00:01:40,110 --> 00:01:45,630 So we're going to look and of course, again now, while we're fetching the data, we'll display the 27 00:01:45,630 --> 00:01:46,410 loading spinner. 28 00:01:46,950 --> 00:01:51,810 And then once we get our data back again, we display all the useful info. 29 00:01:52,230 --> 00:01:56,610 Now we'll also implement the functionality that if the user does not exist. 30 00:01:57,030 --> 00:01:59,550 We display the error like so. 31 00:02:00,330 --> 00:02:07,620 The same goes with requests because the way that you get our API works for each IP address, they give 32 00:02:07,620 --> 00:02:10,440 out by default, 60 requests per hour. 33 00:02:10,800 --> 00:02:14,520 So in here, we're tracking how many requests the visitor still has. 34 00:02:14,710 --> 00:02:16,060 So at the moment we have 49. 35 00:02:16,140 --> 00:02:22,530 But then eventually, once we round the request, then of course we'll display the error message and 36 00:02:22,530 --> 00:02:28,670 we'll make sure that a user cannot do any more searches because he or she doesn't have the requests. 37 00:02:29,130 --> 00:02:34,620 Now, like I also previously mentioned, we will implement the authentication and the war is going to 38 00:02:34,620 --> 00:02:39,810 look like once I log out, I'm gonna be kicked back to Hey Log Bridge. 39 00:02:40,320 --> 00:02:42,550 And from here I can try. 40 00:02:42,590 --> 00:02:43,470 All day long. 41 00:02:43,560 --> 00:02:50,490 But I'm not gonna be able to get back to a dashboard, to a homepage if I haven't logged them. 42 00:02:50,820 --> 00:02:56,610 So I artist I'm trying to access the home page using the URL bar, but I'm not successful. 43 00:02:57,000 --> 00:03:01,530 So the only way how we can get to a dashboard is by logging in. 44 00:03:01,780 --> 00:03:06,960 And of course the first time we would need to sign up and essentially for this app will provide two 45 00:03:06,960 --> 00:03:07,380 options. 46 00:03:07,770 --> 00:03:10,110 We have one for social connection. 47 00:03:10,470 --> 00:03:14,550 So you can sign in with Google or Twitter account. 48 00:03:14,880 --> 00:03:19,350 Just remember that, of course, you can have as many social accounts you would want. 49 00:03:19,860 --> 00:03:22,650 I just show you the to be Google and Twitter. 50 00:03:22,650 --> 00:03:27,390 And then later, if you want to get jobs and Facebook and all that, you can definitely do it. 51 00:03:27,750 --> 00:03:30,930 And the other option is using the email and the password. 52 00:03:31,400 --> 00:03:32,760 So in this case, just to speed it up. 53 00:03:33,030 --> 00:03:34,410 I'm gonna go with it. 54 00:03:34,420 --> 00:03:35,130 Social connection. 55 00:03:35,130 --> 00:03:40,950 Just remember, if you are trying to log in with email and password course, you would need to sign 56 00:03:40,950 --> 00:03:41,730 up first. 57 00:03:42,180 --> 00:03:48,240 So I'm gonna go with Google and the moment we log in again, we have a little bit of loading. 58 00:03:48,780 --> 00:03:54,480 And then once we have compassion, that user has logged in and is authenticated. 59 00:03:54,870 --> 00:03:56,850 Then, of course, we display our app. 60 00:03:57,210 --> 00:04:02,520 We display the information about the visitor cause we have an option of logging out. 61 00:04:02,910 --> 00:04:05,920 And then again, the visitor can search for water users. 62 00:04:06,430 --> 00:04:07,380 That's going to be our project. 63 00:04:07,380 --> 00:04:09,300 Hopefully everyone enjoys the project. 64 00:04:09,720 --> 00:04:11,040 And let's get to work.