1
00:00:01,110 --> 00:00:04,830
‫So let's now set up a brand new project

2
00:00:04,830 --> 00:00:09,273
‫from scratch for the Wild Oasis application.

3
00:00:10,740 --> 00:00:13,830
‫Now, as we decided in the previous lecture,

4
00:00:13,830 --> 00:00:18,090
‫we are going to build a regular, single-page application,

5
00:00:18,090 --> 00:00:21,210
‫and so for that, a Vite application

6
00:00:21,210 --> 00:00:23,283
‫is definitely the way to go.

7
00:00:24,930 --> 00:00:29,930
‫So let's again fire up our terminal or Command Prompt,

8
00:00:30,480 --> 00:00:33,990
‫moving onto the desktop,

9
00:00:33,990 --> 00:00:38,670
‫and then let's do NPM create Vite,

10
00:00:39,960 --> 00:00:43,170
‫and not the latest version,

11
00:00:43,170 --> 00:00:45,480
‫at least not in this project, please,

12
00:00:45,480 --> 00:00:49,410
‫but instead, let's use Vite version four.

13
00:00:49,410 --> 00:00:53,250
‫Hit Enter, and then this will ask you for the project name,

14
00:00:53,250 --> 00:00:58,250
‫which of course, is The Wild Oasis,

15
00:00:59,760 --> 00:01:04,110
‫then we want React with just vanilla JavaScript,

16
00:01:04,110 --> 00:01:06,450
‫and there we go.

17
00:01:06,450 --> 00:01:11,450
‫So let's close this up, changing the name one last time,

18
00:01:13,320 --> 00:01:18,320
‫and then as always, let's open up this guy in VS Code,

19
00:01:18,810 --> 00:01:23,070
‫and then as always, a Vite project doesn't come

20
00:01:23,070 --> 00:01:28,070
‫with all the NPM packages installed by default,

21
00:01:28,080 --> 00:01:32,790
‫so we need to open up our terminal and manually do that.

22
00:01:32,790 --> 00:01:36,090
‫So NPM install, and then let's wait

23
00:01:36,090 --> 00:01:38,463
‫for these packages to download.

24
00:01:40,140 --> 00:01:45,140
‫And so now, as always, we need to also configure ESLint,

25
00:01:45,930 --> 00:01:48,360
‫and we have done that many times before,

26
00:01:48,360 --> 00:01:51,600
‫so I will just do that here very quickly.

27
00:01:51,600 --> 00:01:55,860
‫So basically, we need to install these three packages here

28
00:01:55,860 --> 00:01:59,670
‫and save them as developer dependencies,

29
00:01:59,670 --> 00:02:03,840
‫and so let's again wait for these to download as well,

30
00:02:03,840 --> 00:02:07,830
‫and in the meantime, we can already start creating

31
00:02:07,830 --> 00:02:12,830
‫the .eslintrc.json file,

32
00:02:16,080 --> 00:02:19,920
‫so this file where we will tell ESLint that we want

33
00:02:19,920 --> 00:02:24,920
‫to basically extend it with the React application rules

34
00:02:28,560 --> 00:02:30,930
‫that we are installing right now,

35
00:02:30,930 --> 00:02:34,740
‫which will tell ESLint about all the React-specific

36
00:02:34,740 --> 00:02:36,900
‫ESLint rules, for example,

37
00:02:36,900 --> 00:02:40,680
‫about the useEffect dependency array.

38
00:02:40,680 --> 00:02:43,980
‫So this one is done, and then all we need to do

39
00:02:43,980 --> 00:02:48,980
‫is to also add right here the ESLint Vite plugin.

40
00:02:52,290 --> 00:02:57,290
‫So that is at Vite plugin ESLint,

41
00:02:58,950 --> 00:03:01,653
‫and then all we need to do is to call that here.

42
00:03:02,760 --> 00:03:05,130
‫So I'm not really explaining all of this,

43
00:03:05,130 --> 00:03:07,950
‫because we have done this many times before,

44
00:03:07,950 --> 00:03:10,593
‫so at least twice, I believe.

45
00:03:11,460 --> 00:03:15,420
‫And so let's come here to the source folder,

46
00:03:15,420 --> 00:03:19,360
‫and let's delete most of this stuff here

47
00:03:20,220 --> 00:03:25,110
‫so that in the end, we only remain with main.jsx,

48
00:03:25,110 --> 00:03:27,063
‫and app.jsx.

49
00:03:27,960 --> 00:03:30,333
‫So let's then delete this one,

50
00:03:31,230 --> 00:03:34,530
‫and in our app.jsx, as always,

51
00:03:34,530 --> 00:03:39,530
‫let's get rid of all this stuff, and then, Hello World.

52
00:03:39,990 --> 00:03:43,140
‫And so with this, we are now ready to finally

53
00:03:43,140 --> 00:03:48,140
‫start our application with NPM run dev.

54
00:03:48,450 --> 00:03:51,210
‫And as always, here, we now need to manually

55
00:03:51,210 --> 00:03:55,830
‫click this link here in order to open up the page,

56
00:03:55,830 --> 00:03:57,780
‫and there we go,

57
00:03:57,780 --> 00:04:02,780
‫so our Vite app is now officially working.

58
00:04:04,170 --> 00:04:07,560
‫Great, and now, next up, let's bring in

59
00:04:07,560 --> 00:04:09,603
‫all our starter files.

60
00:04:10,500 --> 00:04:15,500
‫So as always, let's come here into this last folder,

61
00:04:16,050 --> 00:04:19,620
‫and then let's grab the entire Starter folder,

62
00:04:19,620 --> 00:04:22,260
‫copy that, move here,

63
00:04:22,260 --> 00:04:27,030
‫and then let's actually paste it right here,

64
00:04:27,030 --> 00:04:30,090
‫and then we take all of these folders

65
00:04:30,090 --> 00:04:34,170
‫and direct them right into the Source folder,

66
00:04:34,170 --> 00:04:38,100
‫and so then we can delete again Starter,

67
00:04:38,100 --> 00:04:39,813
‫and then let's move back.

68
00:04:41,430 --> 00:04:45,120
‫So this time around, we actually already have

69
00:04:45,120 --> 00:04:49,200
‫our entire folder structure here set up for us.

70
00:04:49,200 --> 00:04:53,550
‫So we have the Data folder, we have Features, Hooks, Pages,

71
00:04:53,550 --> 00:04:57,300
‫Services, Styles, UI, and Utilities,

72
00:04:57,300 --> 00:05:01,290
‫and so most of these folders are exactly the same folders

73
00:05:01,290 --> 00:05:04,470
‫that we already used in the previous project,

74
00:05:04,470 --> 00:05:08,910
‫so in the Fast React Pizza project, remember that?

75
00:05:08,910 --> 00:05:11,670
‫And just in case that you skipped that project,

76
00:05:11,670 --> 00:05:14,760
‫let's just quickly review or recap

77
00:05:14,760 --> 00:05:17,310
‫what each of them here does.

78
00:05:17,310 --> 00:05:19,500
‫So here, we have the Features folder,

79
00:05:19,500 --> 00:05:21,840
‫which is for all the feature categories

80
00:05:21,840 --> 00:05:25,050
‫that we identified in the previous lecture.

81
00:05:25,050 --> 00:05:27,600
‫So here, we have one folder for authentication,

82
00:05:27,600 --> 00:05:30,960
‫bookings, cabins, check in and check out,

83
00:05:30,960 --> 00:05:33,960
‫one for the dashboards, then for the guests,

84
00:05:33,960 --> 00:05:36,990
‫and also, for our settings.

85
00:05:36,990 --> 00:05:41,990
‫Now, notice that some of them get this predefined icon,

86
00:05:42,480 --> 00:05:44,850
‫which comes from our icon theme,

87
00:05:44,850 --> 00:05:47,940
‫so if you don't like these, there is actually a way

88
00:05:47,940 --> 00:05:51,810
‫of getting rid of these special icons here,

89
00:05:51,810 --> 00:05:55,473
‫but let's not spend any time on doing that here.

90
00:05:56,700 --> 00:06:00,240
‫All right, so basically, each of these folders

91
00:06:00,240 --> 00:06:03,450
‫will co-locate all the files that are necessary

92
00:06:03,450 --> 00:06:05,730
‫to implement that feature,

93
00:06:05,730 --> 00:06:09,300
‫so that's going to be all the components, all the hooks,

94
00:06:09,300 --> 00:06:12,183
‫and maybe even some other JavaScript files.

95
00:06:13,290 --> 00:06:16,620
‫All right, then here we have the Hooks folder,

96
00:06:16,620 --> 00:06:20,130
‫which is for truly reusable custom hooks,

97
00:06:20,130 --> 00:06:24,210
‫so custom hooks that we need in multiple features.

98
00:06:24,210 --> 00:06:25,770
‫Then we have our Pages folder,

99
00:06:25,770 --> 00:06:29,100
‫which we actually didn't have in the previous project,

100
00:06:29,100 --> 00:06:31,980
‫but since this project will be a lot bigger

101
00:06:31,980 --> 00:06:33,990
‫it is actually going to be helpful

102
00:06:33,990 --> 00:06:38,040
‫to have one folder which contains all the pages.

103
00:06:38,040 --> 00:06:40,170
‫So basically, here, we will have

104
00:06:40,170 --> 00:06:43,110
‫one component file per route,

105
00:06:43,110 --> 00:06:44,850
‫and what's important about these,

106
00:06:44,850 --> 00:06:48,090
‫so one convention that we create for ourselves

107
00:06:48,090 --> 00:06:53,090
‫is that each of these pages will not have any side effects,

108
00:06:53,130 --> 00:06:56,640
‫but instead, they will delegate all their functionality

109
00:06:56,640 --> 00:07:00,600
‫to the components that are associated with the feature.

110
00:07:00,600 --> 00:07:04,050
‫So basically, we just need to create these pages once,

111
00:07:04,050 --> 00:07:06,660
‫and then completely forget about them,

112
00:07:06,660 --> 00:07:09,450
‫but of course, more about that once we actually

113
00:07:09,450 --> 00:07:11,670
‫start writing the code.

114
00:07:11,670 --> 00:07:13,290
‫Then we have the Services folder,

115
00:07:13,290 --> 00:07:16,530
‫which just like before, contains some code

116
00:07:16,530 --> 00:07:19,200
‫for interacting with APIs,

117
00:07:19,200 --> 00:07:22,320
‫then we have Styles, which as the name says,

118
00:07:22,320 --> 00:07:25,110
‫is for things regarding CSS,

119
00:07:25,110 --> 00:07:27,390
‫and then we have the UI folder,

120
00:07:27,390 --> 00:07:29,310
‫which is for all the components

121
00:07:29,310 --> 00:07:32,760
‫that are not belonging to one of the features

122
00:07:32,760 --> 00:07:36,930
‫or that we might reuse in many different features.

123
00:07:36,930 --> 00:07:39,840
‫So that's for generic things like inputs,

124
00:07:39,840 --> 00:07:43,590
‫forms, buttons, tables, and so on.

125
00:07:43,590 --> 00:07:46,410
‫And then finally, we have the Utility folders,

126
00:07:46,410 --> 00:07:51,410
‫which simply contains this helpers.js.

127
00:07:52,620 --> 00:07:56,520
‫All right, so this was just a brief overview,

128
00:07:56,520 --> 00:08:00,120
‫and so now, we have our project correctly set up,

129
00:08:00,120 --> 00:08:03,150
‫and are ready to finally get started,

130
00:08:03,150 --> 00:08:05,010
‫and so right in the next video,

131
00:08:05,010 --> 00:08:08,913
‫we will actually start learning about styled components.