Next.js 13, React.js, Typescript, Tailwind, Prisma, Stripe
hello everyone welcome to this course in which we will be creating a full stock
e-commerce web app using next3 react typescript T CSS for design Firebase
storage for storing images Prisma and mongod DB for handing the data and we will
be processing payment using stripe
so this is an advanced course I'll expect you
to have basic knowledge of working with react and al
so to have created me
backend apis using any programming language uh maybe no JS and JavaScript or any
other at least to have some knowledge about apis okay this is the application
that we will be working on and in this epi
sode I'll give
you a walk through of
this application it is a full stack application it has a lot of features but it
will really help you to understand how to create full stack applications using
react and next3 now we'll call it E
soP for electronic shop or e-commerce shop at
the top here on our Navar we'll have this search bar
so we are able to search
anything in our shop we can search for TV and when I click on search then it
will filter down the TVs only can click on all here to get all the products uh
we'll have categories
so we can click on phone and it will get only the fonts we
can click on laptop
so if we don't have any product it will tell us this can
click on Watch and
so on at the top here
we'll see how many items that are in
our cut and then we'll have an icon here that allows us to log in and al
so we'll
have
some more links once we are logged in for example viewing our orders right
here you can add a banner which is advertising
something in your shop EG
offering a discount and
so on then down here we'll list our products in cards
and we'll show a preview using an image name uh we'll have
some reviews in our
shop
so we'll be able to show the reviews and the price of the product then at
the bottom here we'll have a phoo now once we click a product here we'll be able
to see uh the reviews of that product then we'll be able to select multiple
colors for the product
we can do it from here or from here which is awe
some then
we can change the amount of quantity that we want to add to cut and we can add
to cut we can view the cut using this button and our cut will look like this
from the cut we are able to increase or decrease the quantity uh we are al
so
able to remove the product or Cate the cut and we can al
so continue shopping and
it will take us to our list of product let's add a watch let's change the color
and we can add two of them although this is out of stock we able to add it to
cut but you can make it to be such that U you are not able to add the product
cut if it is out of stock
so in this case we can add it to cut
so let's just add
it to cut and we will go ahead and view the cut right here we can't check out
because we are not logged in
so we are told to click the button to log in and
we'll create an old system where we'll be able to continue with Google or we can
use an email and password we can log in or we can sign up for an account
so
let's log in with Google here and this will allow us to select one of the
accounts that we want I'll select one of my accounts here and we are
successfully logged in we see now we are able to check out now one cool thing
that will happen is that
once we click on this check out it will create at our
stripe what we call a payment intent okay
so as you can see all these have
succeeded these are all the payments and once we click this it will create what
we call a payment intent and al
so it will create a new order in our database
so
here we have another link here uh which I can open on a new tab which will take
us to our orders for this particular client okay
so we have all these orders and
here let's check out and once we check out these will rad the checkout these are
form elements from stripe which will allow us to perform payment without going
to a different URL we are still in our eCommerce app now if we check it here and
we refresh our payments at stripe you'll see that uh we will have what we call a
payment intent which will be created but the payment status is incomplete we are
trying to pay 180 and that is what exactly we are trying to pay here
now if I
come to my orders again and refresh here you will see at the background it was
able to create this order but the payment status is al
so pending
so let's go
ahead here and we can actually be able to modify this order
so if I come back
and we add another product let's say this keyboard let's add two of them and we
add to cut and we continue now we have a different amount
so if we check out uh
what this will do it will not create a different order but it will uh update our
existing one which has not been paid yet
so if we come to the orders and we
refresh you'll see that this has been updated uh to have all the three products
we can view an individual order and you'll see all the three products are here
and we added this keyboard
so it is not uh creating a new one it is updating the
existing one and the cool thing is that it will al
so update our stripe here it
will update it and not create a new one
so it will use use this ID to update it
okay
which is really cool this prevents us to have a lot of transactions which
are incomplete
so now uh we can continue here to perform a payment uh I'll enter
a name an address then down here we can use um a test card just like that a
future date and a CVC now I'll perform the payment and payment success and we
can view the orders
so if we come to stripe and we refresh here you'll see that
and now the payment has succeeded for this one and this will fire what we call a
stripe web hook on the background
so today I had already added this one
so if we
refresh we'll now have another one right now
so it will fire this web hook and
this web hook will update our order in the database and it will mark it as are
paid
so if I view my orders here you'll see that now here the payment status for
this is paid 3 minutes ago
so it is working okay awe
some
so that is how we'll
perform the payment and then uh we will be having an admin dashboard for this
particular application
so if I come here we have this admin dashboard right here
from here we'll see the total orders the toal paid orders and paid orders total
users in the system total products in the system and the total sales that we
have made using our system down
here we'll have a graph showing the amount we
have made each day right here for the last 7 days and then uh we'll have more
stuff here like manage orders
so for manage orders we'll be able to view all the
orders in the system using this table and this table is what we call a rich data
table it has a lot of stuff for example it has pagination here we can change the
number of items that we want per page we can select all products we are able to
perform
some filters right here we can filter with uh ascending descending and
so on we are able to search
so here we are able to filter by searching
so we can
write pending and this will only give us the orders whose deriva status is
pending we can have derived and this will give us all the derived orders
so this
is very cool um we can change the operation contains equals start with it's a
very rich data table
which we'll create in this particular course uh another
thing is that right here we are able to mark an order s disp patched or as
derived when an order is pending this Cent is not able to give reviews to those
products
so right now we are not able to give reviews to the products that we
bought for example we can go to ritech keyboard uh
so here at Logitech we have
this product we have bought it but since it's not yet delivered we cannot uh
perform the review but right now we can mark it as dispatched using this and we
can mark it as deriv using this and the cool thing is that now if I come here
and refresh
since it's now derived we'll be able to rate this product
so here I
can give it five star and I can say um good and then I rate the product once we
rate we can only rate it once
so once we rate it we no longer see that input fi
anymore but our review is here and our total review is calculated al
so here
which is awe
some now we have added that rating okay that is how our uh rating
system will work we will have another Rich data table for managing the products
so we can see the products that are in stock the prices the names of the
products and
so on we will be able to change the status of in stock or out of
stock using this button and then here we will have a button which we can use to
delete a product then we'll have this one which we can use to view a single
product now here we al
so have adding a product let's add one of the products we
can say another iPhone 14 this is a damy product
so don't worry about the naming
a random price then the brand is Apple a random description
so I can just say
short desk then
we'll say this product is in stock it is a f we select the
category now here the thing we can select multiple colors and we upload an image
for each of the colors
so we have this iPhone 14 white we add it then we have
gray we can add that image here
so we have selected the images but they are not
yet added to our fireb storage which we will use for storing the images they
will be added once we click add and together with all the details and the links
to those images will now be saved to the DB
so click add and here creating the
product and this might take a while we wait and there we go product created now
when we go back we will see that we have another iPhone 14
so we have two we
have this iPhone 14 and we have another iPhone 14 here and here you'll see now
we have two images they were already added to fire Bas storage and we can add
this to cut which is really awe
some another cool thing is that if we go back to
admin dashboard here manage products uh we'll have another iPhone 14 here and we
can actually delete it
so if I click delete deleting the product and the product
is deleted and we no longer have it
so yeah this is the application that
we will
be working on and I already hope that you will enjoy you learn a lot of stuff
from react using the current version of next GS which is next 13 you learn how
to use typescript Ty and CSS using Prisma and mongod DB to handle the data and
so much more as I said before this is an advanced course
so I'll expect you to
have already worked with reactjs
so you have
some experience working with State
react components react hooks and even more on react al
so I expect you to already
have
some basic knowledge about apis you have created
some CR operation apis
so
if you don't know what is Crow operation uh most probably this course is not
best for you
so you might have created this apis using a no JS or any other
programming language and then we will be making use of typescript in this course
so I expect you to have
some basic knowledge working with typescript
so if you
don't you can just take a crash course on YouTube or go through typescript
documentation and then you'll be good to go and proceed with this course
I want
us to start by creating a nextjs application
so here I am at next js. org and
all you need to do is to click on get started I'll come to installation and
right here you'll see there are system requirements of creating an xjs
application the first thing that you need to have is not JS version 16.8 or
later and if you have been working with react I'll be assuming that you already
have this installed but if you don't have all you need to do is to download and
install no JS in your machine I recommend going with the recommended for most
users here uh because I think it's more stable than the current one now after
installing NOS all you need to do is to come right here and we need to run this
Command right here to create the next Js application now right here we have at
latest and this will give you the latest version but I recommend going with the
version that I'll be using in this entire course uh
so that things don't break
for you which works for me okay but
if you will be able to handle the versions
uh well you can proceed with this Command right here which says a trest for me
I'll straightly uh change that command uh
so that you can install the version
that I'll be using in this entire course okay
so what I need to do is to come to
this folder which I already created called eShop this will hold our application
and I'll open this folder with Visual Studio code which is my preferred code
editor
so you can use the same if you want to have the same experience as me or
if you want to follow along
so right here I'll type CMD and what this will do is
that it will open this path on command prompt
so I am on Windows here and from
this command prompt I can use this command to open uh this folder on Visual
Studio code
so this is how I usually do it but there are other ways of doing it
uh you can click on file then you can click on open folder to proceed okay
so
you should have empty space like this and I'll open a terminal I'll be using
this inbuilt terminal here npx then create then hyphen next then hyphen up but
right here I'll not say a trest but I'll paste um this version here
so for me
this is the current version uh
I recommend that you run this command as well
so that you work with the version that I'll be using in the entire course
so
that if things are working for me they al
so working for you
so if you use the
latest version uh things might not work the same but al
so if you'll be able to
handle the versions and
so uh any bugs that will occur then uh I recommend you
can as well go with the latest version okay
so this will be up to you
so here
I'll click on enter
so I need to give my application or project a name and I'll
use a period here
so this will take the name of this folder as the name of the
project
so I'll hit enter would you like to use typescript I'll say yes would
you like to use yes rint I'll say yes would you like to use T CSS I'll say yes
would you like to use SLC directory I'll go with no will you like to use app
router which is recommended
so this is the current version now uh which makes
use of server components and the app folder with a new routing system
so I'll
say yes will you like to customize the default import allias I'll go with the
yes here and what import Alliance would you like to configure I'll go with it
now this will fire up an xjs application and then it will install all the
dependency that are required for our application to run
so this might take
some
time
so give it
some time to install uh as I will be doing here
so mine has
successfully installed all the dependencies and you can see now we have all
these files and if I come to package.j
son file you'll see all the dependencies
that were installed and here are the scripts for working with our application
and to run the application we'll be making use of this Dev script here
so to
start our next JS application I'll just say npm run Dev and this will start our
application on Local Host uh 3000 okay
so here I'll just hit control and then
hit this Local Host 3000 and here we go now our next 1 application is
successfully running here and we have successfully created an xjs App all we
need to do is to start working on our e-commerce application we'll start to
explore our next3 application which we have already created and we'll start by
checking at this app folder and later on we'll be adding many folders and Pages
inside this app folder and we'll see how we'll do it but for now let us check at
this layout.
TSX file and in this file you'll see that we are uh defining a
component called root layout and every next 1 application we'll have this root
layout because this is the start of the application this is where we Define the
major tags like HTML and the body tag right here and then for us to Define
some
title tags description tag for SEO purposes you'll see here we are exporting an
object called metadata and this object has the title and the description here
and you can edit these properties for them to fit your page needs
so right now
the title says create next app now this create next app it's at the top here
this is the title of the page
so I am in a position to edit it for example I can
say that this one be e uh hyphen shop and once I save you'll see that these will
update at the top here eShop and you'll see it's here and if I inspect this page
and come to elements uh okay let me scroll down here right here you'll see our
title and then you'll see a meta tag with the description and the description
says generated by create next app
so that is this description right here which
you can as where edit
so can say e-commerce app just like that and then save and
once it reloads you'll see that now the content changes to e-commerce app and
here you can add even more properties for SEO purposes but will not go through
each property now later on we'll be creating nested layouts and for each nested
layout you are in a position to al
so Define a meod data object for each of them
now here we are passing children prop and then this children prop we are using
it down here we pass it inside our body now this children prop is our different
pages in the application and we'll be seeing how we will create different pages
in the application but for now we already have one page this page right here
which is our home page as you can see it's defined here as home and here we
already have
some content and this is all the design that we see right here at
our app it is designed using Terin CSS and we will be using Terin CSS in the
entire course but for now we don't need all these okay
so what I can do I can
just highlight right here and we can remove everything okay and I can say here
main we'll be perating it later with our own content and I can say e Dash and
then shop I save and then if I come back here you'll see now we have edited
everything and we al
so have this dark mode and this dark mode um it's because of
our glo.
CSS Styles
so we have this Styles we have this uh directives for
working with d and CSS and then we have all these others
so what I'll do I want
to start a brething from scratch
so I can just remove all those other styles and
remain with this
so I'll go ahead and save and now we don't have any Styles uh
the dark mode is gone
so here you'll see we have explored our globo do CSS file
it will only have those directives we have the layout here we have explored
different properties here let me change this to Capital letterer and then uh we
have the root layout with the HTML and the body tag which accepts our children
and our children is the different pages in the application and one of the page
is this one although we will be adding more now we al
so have this image
component we'll be taking a look at it later on uh but for now we are not using
it
so I'll just remove it okay and I'll save that file want us to see how we can
add our own fonts in an x13 application
so I'll go back to the layout folder
here and I think I can zoom it a little bit here and from here you'll see that
we are creating this constant called inter
so this will be an object which is
created by calling a function here enter and this enter is coming from next
stroke font stroke Google
so next3 already integrates Google fonts
so right now
I want us to uh add a font called popins
so for now let's remove this enter and
we will bring in popins and you can see it's suggested here and then right here
these popins that we are importing here will be a function
so we call it right
here and we pass this subsets to be Latin but now this one expects us to al
so
pass
some more properties and that is the font weight
so we need apart from
subsets uh we need to add font weight
so right here I'll add a comma and then we
will say wait a full column and we include this square bracket then we will add
400 and maybe uh 700 for bold
so here I'll say 400 then 700 will be bold one you
can even add more font wids in that array okay now once we do this you'll see
down here for us to apply the font uh we were calling iner do class name
so this
object that we create right here has a property called class name and that will
apply our font uh to uh any element that we target
so in this case instead of
saying enter we will say popins
so popins right here and when you check at this
font it will straightly change if I save this file
so I'll go ahead and save
so
uh the change was minimal but it definitely uh actually changed the font here
okay
so that is how we are able to add our own fonts from Google fonts in next
13 we'll talk about our application layout
so if we come to this one this is the
the r website you'll see at the top we have our Navar and then we have
categories and then uh in here at the middle we'll have our content and then at
the bottom we'll have our footer
so I want us to get this basic layout done uh
before we get to more complex uh stuff
so we need to create a enough bar we need
to create a footer and
so on
so to add components in the next starting app you
can add components uh at each page level uh because when adding pages we'll be
creating folders for each of the page
so you can add components at each page
level or you can add a folder called components for different components that
you might want to have and structure them there inside folders uh it will be
basically up to you
so in this case I'll just add a new folder inside the app
called components and then insert this fold folder I'll add yet another folder
called na
so here is where we'll create our different components for the Navar
so let's go ahead and inside the now folder add now a file and we'll call it
Navar uh DSX
so we are using typescript and then right here I'll say sfc and hit
enter and this will create a small snippet here which I can use to fill our
component
so I'll say n bar
so for you it might not work the same because I am
using an extension called Simple react Snippets
so if you want to make use of
that shortcut sfc you can just go to extensions then search for simple uh react
Snippets this one here and then you install it and then you'll be able to make
use of that shortcut uh right let me show you where it is this one here it
basically creates a state R functional component okay here we need to return
something and we can say div and we can say this is our na bar
so I'll save
inside components I can add another folder called footer and then inside this
fter folder I add a new file and I'll call it footer and then do TSX and I'll
use our sfc and I'll say foter now right here I'll go ahead and add a div that
says footer
so we have created two components the footer and the Navar and we
can now make use of these components inside our layout. TSX file here we had
body and here we had children
so what I'll do I'll just hit enter and I wrap
these children with a main tag
so I'll basically say Main and I'll pass this
children right here
so I'll Tab and paste the children here and uh I can save
so
if I come here we al
so head main
so let's change this to just a simple div okay
so that you only have one main at the layout okay now back to our layout I'll
hit enter here and here I can add our n component above the main I can say n bar
here and it will be Auto imported at the top from our components n n Bar and
then down here we'll have our footer uh I didn't Auto Import it I can come back
here and end here before clossing hit control space and then I'll have the
suggestion to Auto Import it and we autoimport it like that okay
so now if I
save and come back to our E
soP you'll see now we have Navar E
soP and footer but
we need the footer to be at the very bottom Nar to be at the very top i
sop to be
at the middle now for that we need to add
some styles for this three and since
we'll be adding more components in this particular file we can wrap this three
inside a div
so that we add styles for those only okay
so here I'll add like
this and then I'll save and right here I can add a class name and I'll add
some
teres classes
so we will display Flex then we'll change the flex direction to
column and I'll set the mean height uh for this div to be screen
so this main
height screen means that it will occupy the viewport height uh to be the minimum
okay and then if I save you'll notice that nothing's happened but to make it
work we need to come to the main here which will be our main body and here we'll
add a class name and we will set Flex uh hyphen grow like that for the main to
grow okay and
once I save now you'll see we have nav at the top then we have
E
soP
so E
soP will be right here then we have footer
so if I happen to give this
main a BG color you'll see where our main is okay
so BG uh I can just say black
and save and look the whole of these is our main and this is why we'll be having
our main content
so we'll be adding content rator for now let's just have that
so I'll save and I have just removed the background color
so yeah this is how
our layout will look like now I don't want to use toal black for our Pages uh
therefore I can come at the board here I can use um back here because I want to
add
some more class names and then I'll use the money sign to call our variable
here then use blackets
so here I'll just say text hyphen straight hyphen 700 and
then I will save now this will not be uh total block cool we need to create a
container component that we will reuse throughout the application for different
pages if I come to our nextjs here and expand this you'll see that our app
starts it's a certain point here and it is like inside a container and even if I
uh zoom out you'll see that everything is inside a container even the footer the
content and
so on
so here I can just expand and I'll do that inside our app
components and I'll do it at the root of the components because we'll be reusing
it in different parts of the application in pages and al
so in other components
so I'll add a new file container. TSX we can create it sfc and I'll say
container uh we return a div and this div will be accepting children okay
so
here I'll say children and this children we will be receiving it as plops
so
here we can add children but we need to define the types for these children
remember we are using typescript
so to Define the types uh we can go up here and
we Define an interface of container props and here we will be having children
and the type for this will be react dot uh react node and then we can make use
of this container props I can just copy it and we'll make use of it here I use a
full coron and I'll say that this is a react do functional component FC and then
we use this angle blackets and we pass our container props right there and you
see now that error has disappeared
so basically what we have done we have passed
this children props right here and defined an interface for that okay now we
need to pass different styles for this container therefore I'll be making use of
a class name
so here I'll say class name and I can just enter here
so that you
see what I'm typing clearly
we'll have a Max a hyphen width of uh maybe 1920
PX
so this will be the max WID okay
so 1920 PX and then here margin along the x
axis will be outo
so what this will do will make the container to be at the
center and then here we can Define
some responsiveness uh I'll say XL uh this is
extra large screen we'll have a padding along the X AIS of 20 and then we'll do
MD and we reduce this
so PX for this one uh will be just two this will be
equivalent to 8px
so this is padding along the x axis now here I'll just add a
default PX
so this is for the smaller screens and
so on uh hyen 4 and I'll save
so this is our container and we can make use of it in different parts of the
application let us work on our Nar component
so we want it to be like this we
will be having E
soP here we'll be having a search component we'll be having this
component then we'll be having this we need to have a parent div which is this
one and we can add
some styles for this
so I'll say class name and then right
here um this will be a sticky Nar
so whenever I scroll you see it remains at the
top but when it's at the top it's uh positioned relatively meaning that it's
occupying the space there that's what a sticky mean
so when we Inc INE sticky we
must include another property which is top and we set it to zero now here we
will want the width of this to be full and then we'll have a BG of St and then
Dash 200 and then we can add a zed index of 30 we can have a small Shadow on it
if I come back here if I save this and come back here uh we have this right here
I hope you can see it this straight background there for our n
so let's remove
this nve I'll start by adding another div and for this div we'll use it to set
our padding
so here
so padding along the y axis of four and then the Border here
uh to be bottom and al
so I'll just say one PX
so I enter a custom value here of
one PX
so that will just give padding to our nve bar and al
so create a border at
the bottom a small line okay now here we will use our container because we want
to enter the content for our naar container uh make sure to import it from this
container
we'll have content in here
so I'll add another div and inside this
div we will have our E
soP logo and that E
soP logo will will be a link
so I'll
use a link component from next uh JS right here I say eShop in here this link
component expects us to pass a hre property and we will set this to go to our
homepage I can save and we see this i
sop right here and we are able to click it
for it to go to the homepage okay
so after the link we will have our search bar
but we will will not be adding the search bar right now okay but we can just add
a press holder and I'll say search I'll add another div
so we are just adding
the basic structure of our Navar
so here I'll just say cut uh count and then
down here we'll have our user menu okay I save
so for this div we will add a
class name and we can add the Styles right here we'll display Flex
so by default
the flex direction will be in Arrow
so if I happen to save that you can see
everything have changed into Arrow items will be Center uh we'll justify the
item P between and then we'll add a gap here of three and finally
We'll add MD
uh to have a gap of uh zero now down here if I save you'll see that these are
not arranged nicely these two
so we come here we can add a class name and we'll
say flex and then we'll say items Center and then right here we'll have a gap of
uh 8 MD full coron to have a gap of 12 and
sorry here we should have added full
coron as well
so I'll save and there we go
so we have cut count user menu search
bar will be here E
soP is here okay now for this search bar will not show it on
smaller screens
so what I'll do I'll just add a class name and then I'll say
hidden by default but on larger screen from MD to have a display of block
so
from hidden to block I'll save and if I minimize the screen here you see search
is hidden but if we come back it's there okay that's good now this eShop I want
it to look like this this styling uh if you have an image you can add it but for
me I just changed the font
so in
some few videos ago I showed you how to add the
font uh from Google
so here we need to import our font uh function