Hi guys and welcome to our next project e-commerce website called Vintage tech.
Before we look at the application we're going to build let's cover some general info about technologies
we're going to use for a front end of course we're going to use to react and more specifically we're
only going to use a reactive X for our functionality as far as our backend or the API.
We're going to use strappy on awesome open source headless CMOs that will allow you to build your API
in a matter of minutes and includes features like authentication right out of the box in order to process
our payments.
We're going to use stripe the hottest new payment processor on the block and nice alternative to good
old PayPal.
As far as hosting will host are front and on the notify our backend on her uncle and our images on cloud
Marie.
I also like to mention that all technologies were known to use have a free tier option so don't worry.
Your credit card can stay in your wallet when it comes to styling project is responsive meaning it looks
good on any screen size and also all to see is already premade and provided for you.
So that way we don't have to waste our time on styling and can cover all react related topics in more
detail.
Just to quickly recap for the front end of course we're going to use react for a break and we're going
to use strappy to process our payments.
We're going to use stripe.
And then in order to host our back end we're going to use Heroku in order to host our front end.
We're going to use notify Delphi and for the images we're gonna use cloud energy.
So what we're going to build in this project.
Well first of course we're going to have the number.
And then in the homepage there's gonna be a hero section with feature products.
So some products that we would like to showcase.
We have two options of moving to the products we can click on only products link in number or we can
navigate directly from the rink provided in the hero section so we can navigate to a product.
And then of course we have the product page as you're hovering each and every product we're going to
be able to open up a specific page that covers info about this product and we can obviously add it to
the card.
The same war in the homepage where we have the featured products.
Again we're hovering over the products.
And then if I'm going to click on the details then of course I'm navigating to that specific product
and I can add it to the cart before we add anything to the car.
I also like to mention that we're going to cover filtering in this project as well as the presentation.
So hop on top I can filter let's say based on price and then if I only have four products then there's
gonna be no pageant nation.
Or if I would like to display all the prices for my product then of course I'm going to be able to navigate
from one page and another one.
And also we're gonna take a look at how we can have and and lacks buttons as far as filtering we can
type here.
What name would be looking for.
So let's say if I'm going to type W then this is going to show me Windows phone.
So if I would want to look at the computers that start with W then I'm gonna have unfortunately your
search query did not return any product.
So let me go back to the defaults.
I'm going to look for let's say only computers that have the free shipping notice.
As far as computers we have two pages.
And then if we're going to take a look at the free shipping we're only going to have three products.
So we're gonna take a look at how we can filter based on text input based on select based on the checkbox
as well as the radio buttons.
Once you understand how these would work with the react Hooks you're gonna be able to add more filtering
to your project.
And once we have covered our search setup as well as the presentation let's take a look at how we can
add product to the car.
So I'm gonna have the details of course and then I click on the details.
This is gonna give me specific information about the product.
Now I can clearly see that if I navigate to a card page I have the empty card and I would need to fill
it.
So in this case again we can navigate back to our products page.
So let me take a look at one of the products and then I'm going to add this guy to the car notice this
is our card page right now.
We can increase the amount of products that I have in a card or I can decrease it.
Now if I'm gonna go below 1 I'm remove this product from the card again I'm going to navigate back to
a product and then in this case let me try this guy.
So let's go with add to cart I'd want to add more items.
Then again we're going to navigate back to product.
I'm going to go back to default just so we can have more products and I'm also gonna add the radio to
the card.
So now I have seven items.
So the amount of seven even though will have to product.
So of course the first one has six items in the card.
This is gonna be my total.
However we cannot checkout unless we have logged in so we can add everything to the card.
We are gonna use the local storage so that way we're going to persist between there and there.
Because notice even if I refresh the page I still have my car.
So that clearly displays all the information that I had before.
And we're gonna do that using local storage.
However in order to pay for our product we're going to have to log in and in order to log in we're going
to have to navigate to a log in page and once in a logon page we have two options.
We can either sign in if the user has already registered or we would need to register first.
So just to show you how this is gonna work I'm going to register first.
I'm gonna come up with some kind of dummy e-mail.
I'm going to show you also some kind of dummy password and then we're gonna go with user name and if
we click on submit if everything goes successful if there is no user with that type of email or that
type of user name then we're gonna log in and I can clearly show that if I navigate my back end and
then I go to my users I'm gonna refresh and you're going to notice that up on the top I'm going to have
John with John at G.M. dot com and only if the user has logged in or signed up then we're going to display
the check on page.
So previously if you remember in the NAV where we did not have a link for to check page and once the
user has registered then of course we show the checkout line.
Also keep in mind that we're going to make sure that we restrict the access using the URL as well.
So essentially if the user hasn't logged in or registered he or she is not going to be able to go to
your URL and then type forward slash checkout and navigate to that page.
The access to that page is going to be restricted and only if the user has logged in or register as
then he or she is going to be able to access it.
So we have our card and we have our checkout and I can see my totals that matches exactly the same that
I have in the card.
And if I want to submit my order I'm going to have to write some kind of name.
So I'm going to write here.
John's order and then these are gonna be the test values for a stripe.
So I'm just gonna add these test values one by one.
This is gonna be my card number.
Then this is gonna be my expiration date.
And by the way we're gonna be doing the checking.
So essentially if I would want to submit with some kind of invalid values you're going to see that once
we submit we're not able to do it.
So there's gonna be an error where it says your card expiration year.
He is in the past.
So that way we're gonna make sure that user fills out the correct values.
So let me just fill them out.
I'm going to go with some kind of zip code and then once we do we're gonna click on submit.
Now notice how we're submitting the order.
And once the order is late then we're gonna see that in two places we're going to see it on our back
end where we have the orders.
You're going to see that this is gonna be John's order.
And if I navigate to my stripe dashboard I can see that I have the same charge there as well.
This is gonna be our project guys hopefully you enjoy it.
And let's start working on the project.