1
00:00:00,680 --> 00:00:04,550
In the last section we finished up our last application in this video we're going to start to move on

2
00:00:04,550 --> 00:00:06,010
to our next app.

3
00:00:06,120 --> 00:00:12,140
Now quick note here at the very start of this section I want you to know that this is an optional application.

4
00:00:12,170 --> 00:00:17,840
This is an app that I put together very quickly just so you can get some of a better idea or some practice

5
00:00:17,930 --> 00:00:20,600
on some base low level reac concepts.

6
00:00:20,600 --> 00:00:25,370
Everything that we've gone through the course so far in practice this application is going to be very

7
00:00:25,400 --> 00:00:30,140
very similar to the one that we just put together with just a couple of different design patterns being

8
00:00:30,140 --> 00:00:35,380
used in the different source of data that we're going to pull from instead of the splash API.

9
00:00:35,690 --> 00:00:42,410
So if you feel as though you already understand all the basics every act like classes state props inputs

10
00:00:42,440 --> 00:00:43,590
all that kind of good stuff.

11
00:00:43,640 --> 00:00:44,380
Fantastic.

12
00:00:44,390 --> 00:00:49,220
You can always pause the video right now and move on to the next section and take a look at the next

13
00:00:49,220 --> 00:00:50,400
app we're going to build.

14
00:00:50,570 --> 00:00:51,010
OK.

15
00:00:51,200 --> 00:00:53,830
So if you want to skip go ahead and do it right now.

16
00:00:53,930 --> 00:00:57,880
Otherwise we're going to talk about what we're going to making inside this video.

17
00:00:57,890 --> 00:01:00,110
All right so here we go here's our Mocca.

18
00:01:00,170 --> 00:01:05,900
This is essentially a YouTube browser application in code and approach and design.

19
00:01:05,900 --> 00:01:11,030
It's going to be somewhat similar to the on Splash app that we put together just a little bit ago at

20
00:01:11,030 --> 00:01:16,280
the very top a user is going to enter in some search term such as in this case I put in buildings for

21
00:01:16,280 --> 00:01:17,520
this example.

22
00:01:17,600 --> 00:01:23,270
They're then going to hit the enter key which is going to trigger a search request rather than the splash

23
00:01:23,300 --> 00:01:23,900
API.

24
00:01:23,930 --> 00:01:30,370
We're going to make a request over to the YouTube public free API with the YouTube API.

25
00:01:30,410 --> 00:01:35,520
We're going to do a search for a list of videos matching this search term right here.

26
00:01:35,690 --> 00:01:40,700
Once we get a list of videos back from this YouTube API we're going to show them on the right hand side

27
00:01:40,700 --> 00:01:41,930
of the screen.

28
00:01:42,020 --> 00:01:47,990
A user can then click on one of these videos and we will feature it right in the center so the user

29
00:01:47,990 --> 00:01:49,760
will see the video appear right here.

30
00:01:49,820 --> 00:01:55,010
They can click on a play button and play the video will also show them a title and a description of

31
00:01:55,010 --> 00:01:57,230
the video at the bottom as well.

32
00:01:57,230 --> 00:02:00,300
So as you see here some similar elements to what we were doing.

33
00:02:00,320 --> 00:02:02,260
We're still going to have a search bar at the top.

34
00:02:02,270 --> 00:02:04,410
We're going to make a request to an outside API.

35
00:02:04,520 --> 00:02:09,380
We're going to render a list of items and then from there we're going to learn a couple new small things

36
00:02:09,440 --> 00:02:14,180
around clicking on an item and then making sure that we show a video on the screen.

37
00:02:14,180 --> 00:02:15,170
So it is similar.

38
00:02:15,180 --> 00:02:17,920
Just one or two little additions to this application.

39
00:02:17,960 --> 00:02:23,840
Like I said this is mostly an application so that you can just solidify some of the fundamental knowledge

40
00:02:23,900 --> 00:02:25,460
around it.

41
00:02:25,460 --> 00:02:25,760
All right.

42
00:02:25,760 --> 00:02:26,470
So that's it.

43
00:02:27,330 --> 00:02:28,540
Let's take a quick pause right here.

44
00:02:28,560 --> 00:02:32,970
When we come back the next video we'll start talking about the design approach around this application

45
00:02:33,150 --> 00:02:37,490
and also start to generate our new app so quick pause and I'll see you in just a minute.