So let's now start building
this project together.
And for this, of course, the first question is,
where exactly do we start?
Because there are many areas or aspects we could start with.
We could start by building all our data models.
We could start by writing all the CSS code first.
But I instead would rather go feature by feature
and maybe start with the authentication part
and then there first work on all the views
that belong to the authentication,
work on the controllers
and any data models we might need for this,
add all the CSS code,
and with that I mean that we write it together.
And then once that is done,
once all the authentication parts are done
and this feature works,
we can move on to the next feature in line,
which then could be the admin area so that as a next step,
we can, for example, work on adding products
so that we get some products to work with.
This is one approach we could take,
and it is the approach I wanna take here.
Therefore, if we have a look at all these pages,
all these views we defined before,
and we then also have a look at all these data entities,
the models we need, it should be clear
that if you wanna start with authentication,
we definitely need the user data model
and we need the signup and login pages,
the views for signing up and logging in.
And I wanna start with authentication
because that's the key to having an admin area
which in turn then is the key to having products,
which we can buy and so on.
So we need authentication to work
on the rest of this project.
Now, before we start working
on any authentication logic though,
we need a basic Node Express website setup
because we're going to use Node.js
and Express for the backend
and we're going to add all our frontend code,
the views, the CSS code, and the frontend JavaScript code
inside of the project as we learned it
throughout this course.
And therefore, I created a brand new basically empty folder,
just got a gitignore file in there
to help me with tracking my progress
and with creating these code snapshots
and ignoring some files and folders
that should not be part of those snapshots,
but you can start with an entirely empty folder.
You don't need gitignore.
And in there, I'll first of all open this built-in terminal
or command prompt, so that as a first step,
I can initialize this as a Node Express project.
And it's been a while since we last did this,
but you might remember that you do this
with help of the npm command,
which is available once you install Node.js,
which is a prerequisite for this course section,
and then you run init
and then you can actually add dash y here
so that all these default questions
are actually automatically answered with yes.
And therefore, that's the command I'll run
in this empty folder.
And this did give me a package.json file,
which looks something like this.
It might not look exactly the same for you.
You might have some extra fields in there,
but it should basically look something like this.
Of course, you can also add some information in here,
like, for example, your name,
but this is totally optional
and I'll leave it like this for the moment.
Or at least, I'm not going to edit it directly.
Because I am actually going to edit it,
but with help of more commands.
And for this, I'll open the terminal again.
Because I do actually wanna run more commands here
because I do want to install some packages
which we'll use in this project.
There are a bunch of third-party packages
which we will use throughout this project,
but the first one which I wanna install with npm install,
which is the command for adding new Node dependencies
into such a Node project, is Express.
That it is extra package that helps us with managing routes,
managing middleware, parsing request bodies and so on.
We've been using it throughout the entire course
up to this point and it's a key package
for most Node-driven websites you are building.
Now, we're going to add more packages.
As I said, for the moment,
that's the first package I wanna install.
The only other package I wanna install right now
in addition will actually be installed
with the save-dev flag,
so npm install --save-dev
because that's nodemon,
which is this package
which is only required during development,
hence the save-dev flag,
which actually will watch our code
and restart the Node server for us
whenever the code changes.
Without that package, as you might remember,
you have to manually quit and restart the server
whenever you change something and that's a bit annoying,
so I'm going to install this package for this.
Now in package.json, we have these dependencies in there
and now we can also add a start script
in this scripts area.
Instead of this test script actually,
I'll add a script called start between those double quotes.
And then on the right side between double quotes,
we define the command that should be executed
and here that will be nodemon blank app.js.
So that nodemon will start the server
by starting the app.js file.
That file doesn't exist yet, but we'll soon create it.
Now that's it for the package.json file for now.
Now I do want to add a new file here
and I will add a new app.js file.
Now in this app.js file,
we are going to spin up our basic web server,
and we're going to add a lot of functionality to this file.
For the moment in there, I'll just start by requiring,
so by importing this Express package,
and here I'm really just doing again
what we did over and over again
throughout the previous course sections.
And then once this is required,
we can derive such an app object
by executing Express as a function.
And on this app object,
we can start listening on a certain port.
And here, I'll use port 3000 which is the port I've used
all throughout this course thus far.
Now, this will spin up a very basic web server
that doesn't do anything,
but it is a basis with which we kind of work.
Now as a next step,
we of course wanna start registering some routes
and some views before we then at some point
also add a database, a user data model,
and then all the logic for adding authentication
so for signup and login.