1
00:00:01,100 --> 00:00:07,310
Welcome to the final media of this project, will basically have a quick summary session like what all

2
00:00:07,310 --> 00:00:08,720
we did from the start to end.

3
00:00:09,080 --> 00:00:13,940
So basically what we did is we created a function app and then in set that we created our movies and

4
00:00:13,940 --> 00:00:15,500
set movies, hook using the use straight.

5
00:00:16,100 --> 00:00:17,440
We basically required it already.

6
00:00:17,450 --> 00:00:18,350
It imported it.

7
00:00:18,860 --> 00:00:25,520
And then we basically had ordered the movies part, like we took five movies from Boston and then we

8
00:00:25,530 --> 00:00:28,370
pitched it over it, and then we did split those families.

9
00:00:28,730 --> 00:00:33,560
And then to make it one step further, we got the response from that.

10
00:00:33,590 --> 00:00:37,960
We let me fetch the data from the R that I should pay you off or IMDb API.

11
00:00:38,210 --> 00:00:42,830
And we also saw the how does the OMB API working together API key.

12
00:00:43,400 --> 00:00:47,320
And then we got the movies data to research value.

13
00:00:47,670 --> 00:00:50,330
So for that search value, we have created two companies.

14
00:00:50,340 --> 00:00:53,840
One is heading component and the other one is search box component.

15
00:00:54,260 --> 00:01:01,610
So what the search box does is that it is basically a form, a form like it will take the search text

16
00:01:01,850 --> 00:01:06,890
and it like changed asset search value to that text and then instead, said Dargis.

17
00:01:06,890 --> 00:01:08,170
We can use that search value.

18
00:01:09,050 --> 00:01:12,350
So based on search value, we like use this kind of.

19
00:01:13,790 --> 00:01:19,940
Courts said to like, send the JavaScript variables data in to that strings.

20
00:01:20,480 --> 00:01:21,380
We got the data.

21
00:01:21,470 --> 00:01:26,300
If the data is something like some data is there, then only we have to set the movie for that data.

22
00:01:26,570 --> 00:01:31,970
We said that movies, movies variable to that data, and then whenever the search value changes, we

23
00:01:31,970 --> 00:01:34,250
have to perform, just get movie request function.

24
00:01:34,640 --> 00:01:36,500
So for that, we use that use effect.

25
00:01:37,160 --> 00:01:41,000
And then after the movie list, we have created our favorites favorites component.

26
00:01:42,400 --> 00:01:46,720
Movie list of favorite component also in this movie list component only.

27
00:01:47,050 --> 00:01:52,480
But instead of the title being, movies will have the title be favorites.

28
00:01:52,840 --> 00:01:55,690
As you can see here, a favorite component is rendered.

29
00:01:56,410 --> 00:01:58,040
And then we'll have the movies.

30
00:01:59,150 --> 00:02:03,940
So these two companies basically probably dark favorite company, so are going to be in the parent company

31
00:02:03,940 --> 00:02:05,900
state if you can go after this.

32
00:02:06,440 --> 00:02:13,070
Here you can see we had basically basically sending the movies only, but the movies are favorites.

33
00:02:13,070 --> 00:02:14,900
The favorites will be this.

34
00:02:15,380 --> 00:02:20,540
This variable brought the date of the movies that we're adding to favorites or legal content over here.

35
00:02:20,990 --> 00:02:24,440
So we had two and then we are doing two functions.

36
00:02:24,440 --> 00:02:28,700
One is our two favorite and then we move on favorite actor favorite.

37
00:02:28,880 --> 00:02:34,400
We are creating a new order, adding all our previous favorites and the new favorite, and then taking

38
00:02:34,400 --> 00:02:40,220
the favorites to that new favorite list and saving that later to the local storage coming to remove

39
00:02:40,220 --> 00:02:40,620
favorites.

40
00:02:40,660 --> 00:02:46,310
But we have to function from a logic will be performing the filter function, clearing everything like

41
00:02:46,910 --> 00:02:52,370
that, the all the movies that have not died in the movie that we are removing from the favorites.

42
00:02:53,000 --> 00:02:56,300
And then basically, we are storing that again, the new favorite place to that.

43
00:02:56,660 --> 00:02:57,200
No question.

44
00:02:57,770 --> 00:03:03,560
So here we are sending that and in favorites like render favorites, which is when the favorites button

45
00:03:03,560 --> 00:03:03,980
is clicked.

46
00:03:03,980 --> 00:03:09,170
Like, as you can see, this division of this component is clip, then only will call this function

47
00:03:09,170 --> 00:03:10,820
and this will perform the functions.

48
00:03:11,060 --> 00:03:14,060
And then based on that, the page will get dynamically updated.

49
00:03:14,330 --> 00:03:20,330
So as you can see in every part, there is no single instance where the whole page has been refreshed

50
00:03:20,540 --> 00:03:21,140
every time.

51
00:03:21,140 --> 00:03:25,820
As you can see, only the components are getting dynamically updated rather than diminishing.

52
00:03:25,820 --> 00:03:30,200
As you can see, if you click on add to favorites, it is directly adding the movie component.

53
00:03:30,620 --> 00:03:31,520
Nothing is reloading.

54
00:03:31,520 --> 00:03:32,830
As you can see, nothing is returning.

55
00:03:33,230 --> 00:03:36,410
If I remove some favorites also, there is nothing you do not like.

56
00:03:36,410 --> 00:03:38,840
It is only just getting deleted dynamically.

57
00:03:39,140 --> 00:03:43,940
That is a beautifully acknowledged and of reloading everything and increasing the latency.

58
00:03:44,210 --> 00:03:47,270
We are basically only working with the component that we want to change.

59
00:03:47,750 --> 00:03:52,820
So many big organizations like Facebook or Netflix, all of them are using React.

60
00:03:54,510 --> 00:03:55,200
So this is what?

61
00:03:55,440 --> 00:04:01,140
And then it I not see us as we are having some styles, custom styles and most, but mostly we are using

62
00:04:01,140 --> 00:04:04,530
the bootstrap classes, the more step you can install.

63
00:04:04,560 --> 00:04:07,610
We are having in the dependences boot, bootstraps and woodshop icons.

64
00:04:08,280 --> 00:04:12,510
So runs like this is the movie illustrating movie list.

65
00:04:12,510 --> 00:04:17,610
And then all these components we have built, we have used the bootstrap icons to build this remove

66
00:04:17,610 --> 00:04:18,360
from Great Britain.

67
00:04:18,750 --> 00:04:19,710
Add favorites like one.

68
00:04:20,870 --> 00:04:27,830
With this finally, we came to the end of the this project, we have completed all the functions that

69
00:04:27,830 --> 00:04:33,170
we want to implement to create our movie up, which then voted the applications for that.

70
00:04:33,440 --> 00:04:37,700
And then if you want to go for that, you guys, I said in the previous veto, can create a new page

71
00:04:38,120 --> 00:04:43,250
when you come forward and study, as we are discussing with the reactor, it should be a single page

72
00:04:43,250 --> 00:04:45,440
application with multiple components.

73
00:04:45,890 --> 00:04:50,660
It is a new way of doing the website only know all about shanese like the.

74
00:04:50,930 --> 00:04:54,440
The developers would have many pages and would render so many pages.

75
00:04:54,740 --> 00:05:01,310
But with react, it should be a single page component with single page application with the many components.

76
00:05:01,730 --> 00:05:06,350
So you have to create a new component whenever we click on some movie, it should open in a new component

77
00:05:06,350 --> 00:05:10,530
and then it should render the movie data so that you can take out a challenge and do so.

78
00:05:10,640 --> 00:05:13,340
In this, we end this project and hope you all enjoy this project.

79
00:05:13,640 --> 00:05:19,580
And if you have any doubts regarding the project you can search, you can let go to the post that will

80
00:05:19,580 --> 00:05:21,920
be uploaded to you in the resource section.

81
00:05:22,280 --> 00:05:26,810
And one important thing is if you are working with some code from GitHub, like if you are working with

82
00:05:26,810 --> 00:05:29,420
React Project and you must code from some data source.

83
00:05:29,840 --> 00:05:36,050
When you clone that code file, you will not be installing this node modules, node modules or dependencies

84
00:05:36,050 --> 00:05:41,870
that are present in set packages on etc. So to avoid this, why do you have to do is whenever you clone

85
00:05:41,870 --> 00:05:49,580
something just type like a single command, like go to the movie page on this and be installed.

86
00:05:50,480 --> 00:05:55,580
So what this does is that it will create all the dependencies and all the node models that are not present

87
00:05:55,580 --> 00:05:58,130
in the that are not present inside the directory.

88
00:05:58,130 --> 00:06:03,710
But we are using it in the different components for grid install everything that we are using in the

89
00:06:03,710 --> 00:06:06,860
different components, but not installing this current directly.

90
00:06:07,130 --> 00:06:14,690
But this is one small hack that you can use npm and started to install every all the dependencies and

91
00:06:14,690 --> 00:06:18,920
everything when you are cloning some project directly from GitHub.

92
00:06:19,430 --> 00:06:22,130
But that is the last thing that we in this project.

93
00:06:22,460 --> 00:06:22,760
Thank.