‫Let's start by setting
‫up a professional file structure for our project
‫and place our starter files within that structure.
‫Now, there are many different ways
‫in which we can structure a professional React application
‫and every developer has a different opinion about this.
‫But what I like to do, and what I find works really
‫really well with big projects is a feature based structure.
‫So instead of creating one big folder
‫which contains all the components,
‫instead what I like to do is to create one features folder.
‫So right inside source
‫let's create a folder called features.
‫And so now this is where the feature groups
‫that we identified in the previous lecture come
‫into play because now we will have one folder
‫for each of these feature groups or feature categories.
‫So let's then create one folder for each of them.
‫And so here we will have the user.
‫We will have also the menu.
‫So all inside features.
‫So menu user, we have the cart and we also have the order.
‫And notice how our icon theme actually creates
‫these special icons for some common folder names.
‫So the cart has now here, this shopping cart icon,
‫but let's just ignore that.
‫But anyway, each of these folders here will contain
‫all the components, all the custom hooks, and really
‫all the JavaScript files that are necessary to make each
‫of the feature work.
‫So all of these files are going to be co-located
‫in the same place so that we don't have to jump
‫around all the time inside our folder structure.
‫However, there are also some components that are more
‫reusable or that don't really belong in any
‫of these features.
‫And so for that, let's create one folder called UI.
‫And so this will basically contain reusable UI components
‫such as buttons, inputs, and so on.
‫So these are many times just presentational
‫and don't contain any side effects.
‫Now next up, let's create the services folder.
‫And actually I created a file, not a folder, so
‫let's just do that again.
‫But in any case, this folder here is basically
‫for reusable code for interacting with an API.
‫So in this case with the pizza API that
‫we already have, okay.
‫Let's keep going and add one for utilities.
‫And so these are basically just some helper
‫functions that we can also reuse
‫in multiple places of the application.
‫So these are reusable
‫and more importantly, stateless helper functions
‫that don't create any side effects, for example
‫for date or for number manipulations.
‫And we could keep going here
‫and we would do that if we had a more complex app.
‫For example, we could create a reusable context folder
‫or a reusable hooks folder
‫or also a pages folder like we did before
‫in the Worldwise application.
‫However, here in this app
‫we will not have that special folder.
‫And instead also place these pages right here
‫in the feature folders so that again
‫we don't have to jump around so much in our file structure
‫and you will see why that is so helpful
‫once we really start building this out.
‫But anyway, let's now get our starter files as always
‫from here, and let's actually grab the entire folder
‫and place it right here also inside source.
‫And then from there we will sort these different files
‫into the folder in which they belong.
‫So here we have two files
‫which are called API geocoding and API restaurant.
‫And actually, let's take a look at this maybe in our code.
‫So here, for example, to interact
‫with the React Fast pizza API
‫I already have all of this code here.
‫And so these two are essentially services.
‫So reusable code for interacting
‫with these APIs that we will take a closer look
‫at these files once we start using them.
‫Then here we have some helper functions.
‫So as I was saying, for number
‫or currency manipulation to format some date
‫and some other calculations here.
‫And so let's place this one in the utilities folder.
‫So right here, then we have index dot CSS.
‫Let's place that right here in the source folder.
‫And since we are touching that file
‫let's also immediately include it here for now.
‫So just index dot CSS.
‫And then let's come back here to our starter files.
‫So we have these ones here called cart
‫cart item and cart overview.
‫And so these are very obviously all about the cart
‫so let's place them there.
‫Next we have create order.
‫So this is for the order.
‫This is of the user features.
‫This one is again about cart.
‫Then here we have menu and menu item.
‫And so these two are about the menu.
‫And here we have one for the order and order item.
‫And again, don't worry because we will
‫of course open up all of these files as we need them.
‫Now here finally we have the homepage and one error page.
‫And so let's place these two here in the reusable UI folder
‫because these two don't really belong
‫in any offer for feature categories.
‫Now, in the starter files that you actually received
‫from the GitHub repo
‫there is one more file that is not here in the video
‫and that is, as you can probably see, called user slice.
‫And so make sure to just drag
‫that user slices file right into the user feature folder.
‫And so with this, we have this folder empty can delete it
‫and now have all
‫of these files sorted within their feature category.
‫Now here, let's just check what's happening.
‫And it's just because I didn't import this file
‫here anywhere and the same for all of these.
‫So let's do that
‫with this trick where I delete a bit of this name
‫and MVS code will actually give me the path to the file.
‫So caulk minutes left.
‫And then let's do the same here for this one.
‫And also format date.
‫All right, so errors are gone here.
‫Let's do the same thing over here as well.
‫Then there we go.
‫So no more errors.
‫And so with this
‫we are ready to start building this application
‫in the next lecture.