Original subtitles

So let's get started

building this project together now.

For this, attached you'll find

this basic starting project here

which is just again an empty React application

pretty much.

And you can download this attachment,

extract it, place it anywhere on your system

where you want to work on it.

Run npm install in the extracted folder

to install all dependencies.

Then npm starts to bring up that development server.

And if you do all of that

what you'll see on the screen is just something like this

because we're going to build this project together

from the ground up.

And that of course means that we'll build many components

and that we'll practice many things

which we learned early in the course already

because components and passing data between components

and managing state and all of that

of course are crucial core fundamentals of React

so we will need those in any project we build.

But then, throughout this course section

we're also going to apply

all these other hooks we had a look at

like use effect, so that's the plan for this module.

Now to get started with this application here

we will need a bunch of components.

And if you remember the finished app

which I showed you before,

if you have a look at that

there of course are quite a few components

that can be identified.

Like that list of meals or the header at the top

or the cart, but also a couple of wrapper components

like this general model component,

this overlay component.

Or this container our meals are in.

We also got this image below the header

so there are quite a bit of components involved.

Now to get started, here I will again add

a components folder of course.

And in that components folder,

I will add four sub-folders

which is just a personal decision made by me

and I'll explain it along the way.

One sub-folder is the UI sub-folder.

I want to place general UI elements,

general UI components in that folder.

For example, I will have an input component in there

where the user can enter the amount in this application.

I will have a card component in there

which will be this container around my meals, for example.

And I plan to place the model component in that folder.

So some general UI components

which are not tied to a specific feature

of this application, but which instead

could be used in multiple places in any project.

I will also add another folder

side by side to the UI folder

and that will be the Layout folder.

Now in that folder, I plan to add my header component,

basically, and also another component

which will be related to that header.

Another folder which I will add

side by side to Layout and UI is the Meals folder.

That is the folder which will hold that list of meals,

but also the individual meal item components.

And then the last folder for the last set of components

I plan to build, is the cart folder

which will hold all the cart related components.

So that is just the structure I came up with here.

Of course it's not the only correct structure,

of course you can go for a different structure

and store your components the way you want

and write the components you want to write.

This is just my suggestion

because I think that this is a nice split

to split our components between features,

meals, and cart, and also have some general UI components

and some general layout components.