‫So let's now set up a brand new project
‫from scratch for the Wild Oasis application.
‫Now, as we decided in the previous lecture,
‫we are going to build a regular, single-page application,
‫and so for that, a Vite application
‫is definitely the way to go.
‫So let's again fire up our terminal or Command Prompt,
‫moving onto the desktop,
‫and then let's do NPM create Vite,
‫and not the latest version,
‫at least not in this project, please,
‫but instead, let's use Vite version four.
‫Hit Enter, and then this will ask you for the project name,
‫which of course, is The Wild Oasis,
‫then we want React with just vanilla JavaScript,
‫and there we go.
‫So let's close this up, changing the name one last time,
‫and then as always, let's open up this guy in VS Code,
‫and then as always, a Vite project doesn't come
‫with all the NPM packages installed by default,
‫so we need to open up our terminal and manually do that.
‫So NPM install, and then let's wait
‫for these packages to download.
‫And so now, as always, we need to also configure ESLint,
‫and we have done that many times before,
‫so I will just do that here very quickly.
‫So basically, we need to install these three packages here
‫and save them as developer dependencies,
‫and so let's again wait for these to download as well,
‫and in the meantime, we can already start creating
‫the .eslintrc.json file,
‫so this file where we will tell ESLint that we want
‫to basically extend it with the React application rules
‫that we are installing right now,
‫which will tell ESLint about all the React-specific
‫ESLint rules, for example,
‫about the useEffect dependency array.
‫So this one is done, and then all we need to do
‫is to also add right here the ESLint Vite plugin.
‫So that is at Vite plugin ESLint,
‫and then all we need to do is to call that here.
‫So I'm not really explaining all of this,
‫because we have done this many times before,
‫so at least twice, I believe.
‫And so let's come here to the source folder,
‫and let's delete most of this stuff here
‫so that in the end, we only remain with main.jsx,
‫and app.jsx.
‫So let's then delete this one,
‫and in our app.jsx, as always,
‫let's get rid of all this stuff, and then, Hello World.
‫And so with this, we are now ready to finally
‫start our application with NPM run dev.
‫And as always, here, we now need to manually
‫click this link here in order to open up the page,
‫and there we go,
‫so our Vite app is now officially working.
‫Great, and now, next up, let's bring in
‫all our starter files.
‫So as always, let's come here into this last folder,
‫and then let's grab the entire Starter folder,
‫copy that, move here,
‫and then let's actually paste it right here,
‫and then we take all of these folders
‫and direct them right into the Source folder,
‫and so then we can delete again Starter,
‫and then let's move back.
‫So this time around, we actually already have
‫our entire folder structure here set up for us.
‫So we have the Data folder, we have Features, Hooks, Pages,
‫Services, Styles, UI, and Utilities,
‫and so most of these folders are exactly the same folders
‫that we already used in the previous project,
‫so in the Fast React Pizza project, remember that?
‫And just in case that you skipped that project,
‫let's just quickly review or recap
‫what each of them here does.
‫So here, we have the Features folder,
‫which is for all the feature categories
‫that we identified in the previous lecture.
‫So here, we have one folder for authentication,
‫bookings, cabins, check in and check out,
‫one for the dashboards, then for the guests,
‫and also, for our settings.
‫Now, notice that some of them get this predefined icon,
‫which comes from our icon theme,
‫so if you don't like these, there is actually a way
‫of getting rid of these special icons here,
‫but let's not spend any time on doing that here.
‫All right, so basically, each of these folders
‫will co-locate all the files that are necessary
‫to implement that feature,
‫so that's going to be all the components, all the hooks,
‫and maybe even some other JavaScript files.
‫All right, then here we have the Hooks folder,
‫which is for truly reusable custom hooks,
‫so custom hooks that we need in multiple features.
‫Then we have our Pages folder,
‫which we actually didn't have in the previous project,
‫but since this project will be a lot bigger
‫it is actually going to be helpful
‫to have one folder which contains all the pages.
‫So basically, here, we will have
‫one component file per route,
‫and what's important about these,
‫so one convention that we create for ourselves
‫is that each of these pages will not have any side effects,
‫but instead, they will delegate all their functionality
‫to the components that are associated with the feature.
‫So basically, we just need to create these pages once,
‫and then completely forget about them,
‫but of course, more about that once we actually
‫start writing the code.
‫Then we have the Services folder,
‫which just like before, contains some code
‫for interacting with APIs,
‫then we have Styles, which as the name says,
‫is for things regarding CSS,
‫and then we have the UI folder,
‫which is for all the components
‫that are not belonging to one of the features
‫or that we might reuse in many different features.
‫So that's for generic things like inputs,
‫forms, buttons, tables, and so on.
‫And then finally, we have the Utility folders,
‫which simply contains this helpers.js.
‫All right, so this was just a brief overview,
‫and so now, we have our project correctly set up,
‫and are ready to finally get started,
‫and so right in the next video,
‫we will actually start learning about styled components.