1
00:00:00,790 --> 00:00:04,600
Now that we've got a better idea of what we're going to build We're going to spend this video to set

2
00:00:04,600 --> 00:00:09,150
up our application and also talk about some distinct challenges that we're going to run into.

3
00:00:09,160 --> 00:00:13,090
So to get started I'm going to flip on over to my terminal and you'll notice that I've already changed

4
00:00:13,090 --> 00:00:17,570
back to a workspace directory of sorts inside of my workspace directory.

5
00:00:17,590 --> 00:00:20,890
I'm not going to generate a new reac project right away.

6
00:00:20,890 --> 00:00:25,690
We're going to eventually have a couple of subprojects inside of a single directory.

7
00:00:25,690 --> 00:00:33,040
We're going to have separate project folders for the re-act application or our RCMP server and for the

8
00:00:33,040 --> 00:00:36,730
API server that lists the different streams that are available as well.

9
00:00:36,730 --> 00:00:39,920
So we're going to have separate project directories for each of these.

10
00:00:39,940 --> 00:00:45,100
With that in mind I'm going to first begin by creating a new directory called stream's that's going

11
00:00:45,100 --> 00:00:47,690
to be the general name of this application.

12
00:00:47,700 --> 00:00:53,770
I'll then change into that directory and then inside of here I'm going to generate my new re-act application

13
00:00:54,060 --> 00:00:59,620
by saying create re-act up and I'm going to give this project a name of simply client because it is

14
00:00:59,620 --> 00:01:03,980
the client portion or the browser portion of our streams application.

15
00:01:04,390 --> 00:01:05,990
OK so I'll let that do its thing.

16
00:01:06,130 --> 00:01:09,670
And while that runs we'll talk about some of the big challenges that we're going to run into with this

17
00:01:09,670 --> 00:01:12,040
application All right.

18
00:01:12,110 --> 00:01:13,880
So here's the big challenges.

19
00:01:13,940 --> 00:01:17,190
Now some of these we already touched on very briefly in the last video.

20
00:01:17,210 --> 00:01:21,980
First off we need to be able to understand how to navigate a user around to separate pages inside of

21
00:01:21,980 --> 00:01:24,160
re-act application to do this.

22
00:01:24,170 --> 00:01:26,800
We're going to use a library called re-act router.

23
00:01:26,870 --> 00:01:31,760
So we're going to very quickly install re-act router as a dependency to our project and understand some

24
00:01:31,760 --> 00:01:36,840
of the rules behind it to essentially allow a user to see different screens inside of our application.

25
00:01:37,890 --> 00:01:43,850
Next up we need to build to allow a user to log in and log out of our application to handle authentication.

26
00:01:43,890 --> 00:01:46,630
We're going to be making use of Google off.

27
00:01:46,770 --> 00:01:49,080
So if you've ever seen that button that says something like.

28
00:01:49,080 --> 00:01:50,490
Sign in with Google.

29
00:01:50,730 --> 00:01:53,710
Yeah that's exactly what we're going to built.

30
00:01:53,840 --> 00:01:57,650
Next up we need people to understand how to handle forms in redux.

31
00:01:57,650 --> 00:02:03,230
Now we've already seen how to handle simple text inputs inside of react and we've seen how to put a

32
00:02:03,230 --> 00:02:04,090
form together.

33
00:02:04,190 --> 00:02:09,590
But we start making use of redux the techniques that we use to generate a form that user can enter stuff

34
00:02:09,590 --> 00:02:10,210
into.

35
00:02:10,240 --> 00:02:11,980
It's going to change ever so slightly.

36
00:02:12,140 --> 00:02:16,280
So we're going to spend a pretty good amount of time to understand exactly how forms are created in

37
00:02:16,280 --> 00:02:17,420
redux.

38
00:02:17,420 --> 00:02:22,850
Now speaking of forms what we really are trying to do at the end of the day with this application Besides

39
00:02:22,850 --> 00:02:25,260
learning about navigation and authentication.

40
00:02:25,310 --> 00:02:29,690
What we're really doing here is trying to master crud operations.

41
00:02:29,840 --> 00:02:40,450
Now crud right here is an acronym it stands for creates read update destroy these terms right here are

42
00:02:40,450 --> 00:02:45,170
talking about different operations that we might do on records inside of a web application.

43
00:02:45,370 --> 00:02:49,380
So inside of typical web applications we have the ability to create records.

44
00:02:49,480 --> 00:02:51,140
We have the ability to read.

45
00:02:51,250 --> 00:02:54,070
We have the ability to update and destroy as well.

46
00:02:54,070 --> 00:02:58,480
And that's what we're really doing here with these stream objects right these stream things that we're

47
00:02:58,480 --> 00:02:59,590
trying to show on the screen.

48
00:02:59,590 --> 00:03:02,240
So remember we've got this list of streams right here.

49
00:03:02,440 --> 00:03:07,320
And then we can read a stream we can edit a stream and we can delete it.

50
00:03:07,360 --> 00:03:09,930
So that's the real core of this application.

51
00:03:09,970 --> 00:03:13,040
All this stuff round's handling streaming and video.

52
00:03:13,120 --> 00:03:16,170
Those are at the end of the day total side topics.

53
00:03:16,180 --> 00:03:16,550
OK.

54
00:03:16,570 --> 00:03:21,040
I want you to understand that right now the real goal of this application is to make sure that you master

55
00:03:21,070 --> 00:03:27,490
crud operations because the vast majority of web apps out there like just about every app you can possibly

56
00:03:27,490 --> 00:03:33,940
think of at the end of the day to some degree can be simplified down to a crud type application.

57
00:03:34,000 --> 00:03:39,710
For example Airbnb B It lists records out lists out records that you can book for housing.

58
00:03:39,910 --> 00:03:43,640
So that needs a user to be able to create a listing.

59
00:03:43,810 --> 00:03:46,800
A user needs to be able to read or view a listing.

60
00:03:46,840 --> 00:03:50,260
We need to build to update the listing and destroy listing as well.

61
00:03:50,260 --> 00:03:54,490
Now of course Airbnb has a tremendous amount of other functionality behind it but some of the absolute

62
00:03:54,490 --> 00:03:58,650
core operation of that application is this cruds stuff.

63
00:03:58,720 --> 00:04:00,670
Same thing with say eBay dot com.

64
00:04:00,670 --> 00:04:05,230
Same thing with an email client same thing with just about any application you can imagine.

65
00:04:05,230 --> 00:04:07,530
It all comes down to these crud operations.

66
00:04:07,630 --> 00:04:13,180
So the real goal of this application is to make sure that you really understand these techniques extremely

67
00:04:13,180 --> 00:04:14,920
extremely well.

68
00:04:15,000 --> 00:04:19,270
Like I said the last big thing that might be a challenge inside this application were probably going

69
00:04:19,270 --> 00:04:24,730
to run into errors at some point in time like a user might type in the name of a stream that already

70
00:04:24,730 --> 00:04:28,230
exists or they might not type in any name to the stream whatsoever.

71
00:04:28,440 --> 00:04:32,020
Where are we we might fail to load up video from a stream.

72
00:04:32,050 --> 00:04:37,510
It's incredibly likely along all stages of this application that we will run into some type of error.

73
00:04:37,630 --> 00:04:42,220
And so we want to make sure that we have some general air handling system inside the redux side of her

74
00:04:42,220 --> 00:04:42,660
app.

75
00:04:42,750 --> 00:04:45,270
Then we can show error messages to our users as well.

76
00:04:46,420 --> 00:04:46,630
OK.

77
00:04:46,650 --> 00:04:50,700
So that's going to be some of the big topics that we're going to cover inside this application.

78
00:04:50,730 --> 00:04:52,560
So let's take a quick pause right here.

79
00:04:52,560 --> 00:04:54,250
It looks like my install is completed.

80
00:04:54,300 --> 00:04:55,300
So take a quick pause.

81
00:04:55,320 --> 00:05:00,810
When we come back the next video we're going to start talking about our big first topic right here handling

82
00:05:00,870 --> 00:05:01,550
navigation.

83
00:05:01,590 --> 00:05:05,490
Well actually I take that back we're going to do a little bit of quick setup and then we'll start talking

84
00:05:05,490 --> 00:05:06,360
about navigation.

85
00:05:06,360 --> 00:05:08,310
So a quick follow and I'll see you in just a minute.