All right, guys.
So I'm going to give you a quick demo of the project and the whole checkout process and so on.
Just so you have an idea of what we're building in your head, because we are going to take it step
by step.
And for instance, we'll start off with just a Json file with some products in it, and then we'll start
to work on our interface and show those products.
Then we'll move to the back end and we'll create some routes and we'll move to the database, start
creating our models for our data and so on, our controller methods.
And we're going to take it really slow so that you understand everything.
But just to give you an overview, you can see on the home page, we do have this big carousel with
the three top rated products, and that's one of the very last things that we're going to do in this
course.
Down here we have our latest products and there is pagination, although it only shows if we have I
think I have it set to eight or more.
But for now, you can't see it because we only have, what, six products here?
So let's click on one of these products.
It takes us to the to the single page.
You can see it has the ID and the URL and it just has some basic info, the description, the price,
the rating down here, any ratings and reviews will show if you're logged in, you'll see a form here
where you can submit a rating and a single user can only submit one review per product.
So I'll go ahead and just add this to my cart.
And you can see up here, it'll show us how much how many items we have in our cart.
It also takes us to the cart page.
So I'll go ahead and just add something else.
So PlayStation, we'll go ahead and add that.
And now you can see we have two items in the cart.
I can change the quantity that will update the price and the number of items.
Now, when I'm ready to check out, if I click proceed to checkout, I now have to log in, either log
in or register for a new account.
So I'm going to log in with an account that I already have.
And since see up here how we have redirect as a query parameter and we have it set to shipping.
So if I sign in, it should take us right to the shipping page.
Now I already have my my address in local storage, so it's picking that up and putting it in.
But when you first come to the the page, it's not going to be filled in.
So I'll click continue.
We need to select a payment method.
Now we're integrating PayPal, but you can also pay with a credit or debit card.
So we'll click continue.
It shows us a summary of our order, the pricing, the tax shipping costs, which there is none here.
And then we'll click place order that creates an order in the database and shows us the basically all
the data that's in that order.
And you can see that this is not paid.
So we see our payment buttons.
So I'm going to click on PayPal and notice that it takes us to the sandbox because in my PayPal developer
panel I have it set to sandbox and I have some just dummy accounts here.
So that's how we can test it without spending actual money.
So I'm going to use this account to log in.
So if I say view edit account.
I'm going to copy that email and we'll come back here.
Just click continue if it does that.
Paste that in, then we're going to put in the password, which is this.
Again, this is just a sandbox account.
We're not dealing with any money, any actual money.
Okay.
So it should give me.
Yep.
Pay with.
I'll click complete purchase.
And now we get orders paid and you can see down here paid on.
And then the date it says not delivered because the admin goes in and checks off when it's delivered.
So now I made that order and if I go to my profile, I'll see I actually have a bunch of orders here,
but you'll see your orders on your profile.
You can also update your user data.
If I click on details, it'll take me back to that order page.
I can see if it's been delivered or not.
All right.
So now what I'm going to do is log out from the regular user and I'm going to log in as my admin user,
which I believe I changed to my actual email address.
And let's sign in.
Okay, so now since I'm an admin, you can see over here I have this dropdown, this admin dropdown,
and I can see all my products, which I'll get to in a second, but I can also see all my orders or
all the orders on the site and who made that order.
So if we look at the last one that was made here and I go to details, it's not delivered, but I can
mark it as delivered and now it gets marked in the database, meaning that the product was was purchased,
it got delivered and everything is all set now as far as products go.
So here you can see all the products listed.
If I click the edit button, we can edit the fields so we have the image.
If I want to delete, obviously I can delete and if I want to create a project product.
The way this works is it asks me if I'm sure I click okay and it creates just a dummy product or just
some dummy data and then we can edit that and make it what we want.
So I'll just say product.
I don't know.
I'll just say Brad's product and set the price to whatever, and then we can upload an image.
Although I don't if I don't upload an image, it'll use this sample jpeg.
But if I go ahead and upload, I'm going to use this headphone image.
Okay.
So you can see that the image actually just got uploaded and it's getting stored on the server.
We're not using any like Cloudinary or Amazon S3 or anything like that, although you could because
we're using the Multer package which does let you use other services.
But I wanted to try to kind of kind of keep that as simple as possible.
So the brand, the count in stock, let's say we have ten of these category description.
And then I'm just going to update.
And now you can see we have Brad's product.
And if I go to the front facing page here, there we go.
So we have the picture of the headphones, Brad's product.
And since I'm logged in, you can see that we have the review here so I can rate these.
Can say awesome product submit and that gets added to the reviews.
And we're using React, Toast, Defy for these little toast message messages.
Oh, also, I can't I can't rate this more than once.
If I try to do that, you'll see product already reviewed.
So I can't just spam a bunch of reviews.
So yeah, I mean that's, that's pretty much it.
So I think it's a pretty full featured e-commerce application, especially for a course project.
So I think you guys will like it.
So in the next video we're just going to start to get set up, just go over the things that you need,
like a text editor, NodeJS, just the basic tools and then we'll get into it.