Build & Deploy Full Stack Nextjs App using React, Typescript, Imagekit, Strapi By

TubeGuruji

Introduction
0:00
Hey there and welcome back to Tube Guruji channel. Today we are going to build a
full stack print ondemand web
0:08
application which we are going to build it with the help of React, NexJS,
0:13
Telwin, CSS and many other text stack to build this application. You don't need
0:18
any prior experience. If you're a beginner and you don't know how to build any
React or NexJS application, don't
0:25
worry because I'm going to walk through each stepby-step process to build this
0:30
application. Let me walk through this application first and then we'll talk about
the all the text tag which we are
0:36
going to use to build this application. If you see we have this beautiful landing
screen which is completely
0:42
responsive. The whole app which we are going to build is a responsive and with the
help of Tel CSS I'm going to teach
0:48
you how easily we can make any pages application responsive on a different
different uh screen resolution. Now on
0:57
this home screen we have the header then we have the landing hero section and
1:03
then you'll see this product category. Now this product category we are fetching
from the back end with the help
1:09
of strappy cage. We are managing our all category products and the order as well.
1:16
Just you need to create a collection and then strappy will take care of everything.
He will it will create an
1:21
API for you and you just need to interact with the strappy CMS that also I'm going
to teach you from the
1:28
beginning how to set up a strappy and everything. Once we have the product category
and the popular product
1:33
displaying on the screen, you can go to any category and once you are in the
1:39
category, you will see all the products come under that particular category. How
cool, right? Then if you want to
1:46
customize any product, just click on customize and then you'll redirect it to the
uh product detail screen where you
1:53
will find a product image on the right hand side. Uh the some information about the
product. Below that you will see the
2:00
description and the popular product as well. Once you click customize it will
2:06
enable you the customization studio where you have option to upload the
2:11
image remove the background upscale the image smart crop and shadow adding a
2:17
shadow to your image. Now with the help of imagekit.io io we are going to add
2:24
all of these AI image transformation uh with the help of image kit. This will
2:30
provide you to transform your image just by adding the transformation query inside
your URL and then you are good to
2:38
go and everything that also we are going to learn in this particular tutorial. It's
a free to use so you can give it a
2:45
try. Consider that you uploaded this particular image then you want to remove the
background. Simply remove the
2:51
background of this image and within a click it will remove the background for you.
If you want to crop the image or
2:57
add a shadow to your image, you will see it's added a shadow as well. Once you are
happy with your design, just click
3:05
on add to cart. And then at the top you will see the count it automatically get
changed. If
3:11
you added multiple uh product into the cart, it automatically update your cart
number as
3:19
well. Now on the click of this card you can go to the checkout. We also added the
Gmail
3:26
authentication so that it will save your cart information and anytime when you come
back to our application you will
3:32
see all the details from your cart. Just click on it and then you will see all the
uh items product that is added to a
3:40
cart. How easy. If you want to remove any of these uh cart item you can just
3:45
simply delete it and it will remove it from the cart. and then you can simply check
out it. Now obviously all this API
3:53
uh logic we added like you can learn how to get the data from the stripey CMS,
3:59
how to insert a record or how to delete update the record everything that you are
going to learn in this particular
4:06
project and there are many more feature that we are going to add in this project.
Now to manage all our products
4:12
category we are going to use a strappy CMS as our admin panel. Strappy is a
4:18
open-source CMS which you can easily use it on your local machine and at the end
4:24
of this particular project I'm going to tell you how you can deploy the strappy on
the cloud for free with the help of
4:31
strappy cloud then for the AI image transformation we are going to use an
4:37
image kit not only that but we are going to use image kit for to upload all our
images and we are going to connect image
4:44
kit with the strappy as our media uh cloud service provider.
4:50
This image kit will provide an image API in order to transform your image like uh
4:56
you can expand your image, remove the background, upscale your image and many
5:01
other AI transformation you can do it with the help of this image kit.
5:07
Now any of these text tag if you never used before don't worry because I'm
5:13
going to tell you each uh text tag in detail so that you will learn everything
5:19
from the basic also if you are new to this channel please don't forget to subscribe
also uh
5:26
you have to watch complete video to explore more feature into this particular
project or don't forget to
5:32
join tube guri pro member where you will get an exclus you access to my all the
5:38
source code and the courses as well. Uh in a few days I'm going to launch brand
5:44
new uh web application for this tube goji so that you can get more access
5:50
more features with the help of tuggoy pro membership that is only available if
5:55
you join today. So guys without doing any further delay let's begin to develop
6:01
this print ondemand web application.
Create NextJs React App
6:08
Now it's time to create a NexJS application. As NexJS is a React
6:14
framework to develop the web application and if you are new to the NexJS don't
worry because in this particular course
6:20
I'm going to uh explain you step-by-step process how to create the NexJS
6:26
application and what are the files folder are included in the NexJS and how
6:31
different from the React as it's a react framework only so you don't need to worry
about anything. Now simply go to
6:38
the nej.org org and on this one you'll find this command called npx create next
6:44
app at latest. You can even go to the documentation and explore more feature about
the NexJS. Now open a folder where
6:52
you want to create a project. Open a terminal at that folder. If you are using the
Windows then open the command
7:00
prompt and simply type npx create next app at latest. Now at latest will
7:07
install the latest version of uh the NexJS. Okay. But if you want to install
7:13
a specific version then you can mention that specific version instead of latest.
Now just click enter and then it will
7:20
ask you do you want to proceed. So this is the current version that they are using.
Then we'll say yes and then we
7:26
need to give a project name. So here we'll say print on demand
7:33
app. Then click enter. It will ask do you want to use TypeScript? We'll say
7:38
yes. Then ESLin say no. Tell me in CSS say yes. No to the source directory and
7:46
uh yes to the app router, no to the turbo pack. And then it will install the
7:51
dependency like React, React DOM and some dev dependency like TypeScript, uh
7:58
Pelvin, CSS and etc. Okay. Now we'll wait to finish installing all of these
dependencies.
8:04
Once your project is created, just close this window. Open
8:10
the VS code and simply open the folder where you just created this project.
8:19
Here we'll say yes, I trust the author. And then boom. If you see, we have some
files and folder included inside this
8:27
NexJS app. Let me walk through each of these folder. the very first folder
8:32
which is app folder in which we are going to write all our code like all the
8:37
pages routing APIs and everything which will be inside this app folder.
8:42
Currently it has a global dot CSS as a default file which contain the globally
applied uh CSS or style to your
8:51
application which you can add to directly inside the global CSS. Then the
layout.tsx tsx file which is the uh root
8:58
layout of your application in which it has the HTML body tag through that uh
9:04
the obviously it mentioned the children so all your route are going to render
through this children then it also has a
9:10
metadata which is very helpful to uh for SEO purpose now for example you can
9:16
update this title we'll say print on demand web app
9:23
print your custom design and
9:29
start selling. Now obviously uh it also have a font which you can change later
9:35
on. I'm going to tell you how to do that. Then we have this page.tsx file which is
the default page of your
9:42
application. Now whenever you want to create the new page you have to give the
folder name and then you have to write
9:47
page.tsx inside which you are going to write all the code. Now once we run the
9:54
application you'll get to know much better. Then we have the public folder in which
we are going to store all our
9:59
images, assets, font if you have any inside this public folder and whenever
10:04
you want to use you can directly use without specifying the complete path.
10:10
Then we have this next doconfig.ts file in which it contain the next js related
10:17
configuration. Then we have package.json JSON which contain the name version of
your application the script to run to
10:24
build your application and the dependency along with their version and some dev
dependency as well. Then we
10:32
have post CSS as well. Now obviously you don't see the tailwind CSS.config.ts
10:38
file. That's because with the tailwind CSS version 4 it move all your tailwind
10:44
CSS configuration into the global CSS file. So if I go to the global CSS here,
10:50
you will see all that changes. Okay. So right now if you see the tailwind CSS
10:55
imported to the global CSS. Okay. So you don't need to worry about if you did not
see the global uh tailwind.config.js
11:03
file. Now simply go to the terminal, click new terminal. It will open the terminal
inside your VS code and simply
11:12
run a command npm rundev. Now once you run this command, it will run your
11:17
application on the port localhost 3000. Now simply click on it and it will open
11:24
inside the browser. And here you will see the default page of your application.
11:32
Now let me bring this side by side. Simply go to the page.tsx and that's where all
of this code is written.
11:39
Right? Now for example you want to make some changes over here. Okay. So I will
remove this and here I will say hello
11:46
world and then save it. As soon as you save you will see this changes and right now
it's showing this text hello. That's
11:52
how it works. Now let me clean this out and here we'll simply add a div inside
11:59
this will add a h2 tag and we'll say subscribe to tube guri channel. So guys, if
you
12:05
did not subscribe to our channel, please do subscribe and once you save it, you
will see just a uh plain text called
12:14
subscribe to Tupurji. Okay, so this is how you have to run your application and
12:20
make some changes to your default page. Now let's move the next step is to add a
12:26
tailwind CSS base UI component library called shad CN.
12:33
Now let's move to the next step where we are going to add and tell CSS based UI
12:38
component library called shad CN. Shad CN is among the one of the best uh UI
12:45
component library in the market and it's very popular among the developers. Simply
go to the UI.shadc.com
12:53
and here you'll find a different different components. Simply click get started and
select the correct framework
13:00
over here. Make sure to select npm and then copy this command to initialize the
13:05
shaden. Now we'll add a new terminal inside
13:11
this. I will initialize this shaden. Now we'll say yes to proceed.
13:17
And then you can select the color or base color which you want. Okay. So I will
select the neutral or we can select
13:24
the gray for now. Obviously later on we are going to update that color. And then
boom the shad CN is now ready. Okay. Now
13:32
on the left hand side as soon as you added the shad CN the one new file get
13:37
added called component.json in which you will see the shad CN related configuration
and also the leaf folder.
13:45
You don't need to worry about this leaf folder. Now let add a button component.
13:50
Okay. So this is the command in order to add a button component. Now every time
whenever you want to use any component
13:57
from the shad CN first you have to install it by using npm command. Now
14:02
once you add this button component you will see inside this component folder under
this UI folder the button.tx file
14:09
get added. Now obviously this is from the shad cen but you have full control
14:15
over it and you can update this shaden any time. Now once you add this simply
14:21
we'll go back to page.tsx tsx file and then let's import this button component
14:28
here. We'll say subscribe and then save it. Now if I go back let's refresh the
14:33
screen once and if it doesn't work if you see the button is not showing in a proper
way. Okay, sometimes simply go to
14:40
the global CSS and here you will find some changes. The color code is get
14:45
added to your global CSS file. Okay.
14:51
Now simply remove this TWW animate CSS for now. Save it and then you will see
14:56
this button in a proper way and again you can keep this back. I don't think so it
will not affect anything. See so
15:03
sometimes it happen otherwise another option is to re uh stop your application
15:09
and then run it again. So that's how you have to set up the
15:15
shaden. The next thing that we are going to add is a font for our application.
15:21
Currently, it's a default font uh if you see on the screen, but you can add any
15:26
font you want.
Strapi CMS Setup
15:31
Let me introduce a strappy AI. It's your new co-pilot for building structured
15:37
content smarter, faster, and with more confidence. It's a pack with a usability
15:43
improvement to help you to design better API with a less effort. Now you can
generate a complete content schema just
15:50
by chatting with AI or by uploading Figma file or existing front- end app. It's
more uh kind of collaborative way
15:58
to start structuring your API. Plus, you have introduced major UX improvement
16:03
that streamline editing, reduce error and let you move faster.
16:09
With this AI, you can create a schema just within a few seconds. You have to
16:15
upload your project or use a Figma link or you can chat with the AI in order to
16:20
generate the beautiful schema with the help of AI. You don't need to think more on
that. Strappy AI will take care of
16:28
everything. I'm adding a link in the description in
16:33
order to join a weight list of Strappy AI. It's free to use and you can easily
16:38
build a SAS application for your business with the help of this Strappy
16:43
AI. You can go ahead and check this blog about the strappy AI which introduced
16:50
recently. Currently uh it is in a beta. So only few developers have access to
16:56
this. But if you want to get access to this trappy AI, click the link in the
description and join the weight list.
17:03
With the help of this trappy AI, it help us to build your application much faster.
Now it's time to set up a back
17:10
end for our application and for that one we are going to use a strappy CMS. If
17:16
you see as this is our application and in order to save the data and fetch the data
we need a platform where we can
17:25
store all of this information we can insert the information and that's where the
stripey CMS play very important role
17:32
inside the stripey obviously we can add a product list where we can also fetch it
on the application side then if you
17:40
want to add a category check the all the orders and many other things we can handle
it from the strappy CMS CMS
17:46
because it has the beautiful web UI as well and this strappy CMS we are going
17:52
to connect to the neon posgate SQL database so that we can connect
17:57
everything together. So strappy is a open-source NodeJSbased headless CMS is
18:06
free and also it provide a lot of different feature with the help of
18:11
trappy CMS you can easily build any SAS application as well and in this
18:18
particular course I'm going to tell you how easily we can set up a strappy so
simply click the link in the description
18:25
and go to the strappy with the help of strappy you don't need to create an API. It
automatically create an API for you.
18:32
So it will help us to build our application much faster. Then click get
18:37
started and it will redirect you to the documentation. On this one simply this is
the command
18:45
where you can create a strappy application. So I will just copy this one because I
18:50
want to give my own project name. So you have to type npx create strappy at latest.
18:57
So open a terminal add that folder where you want to create this stripey
application
19:04
and simply paste this command. Now it will install the latest version of the
strappy which is strappy 5. Then simply
19:12
say okay to proceed and then it will start uh installing the strappy CMS for
19:18
you. Also if you ask the project name make sure to give. So here we print on
19:25
demand web admin and then you can have option to please
19:30
login or sign up. Okay. So we'll just keep that one because we don't want it. Now
you have option to use the default
19:38
database which is SQLite. Okay. But uh if you move your application to
19:44
production right that local data will not available and it is on the local. So
we'll say no and we want to use our own
19:52
database which is a posgate SQL database. Now inside uh in order to use
19:57
this posgate SQL database you need to provide a database name and all other fe
feature. So simply head to the neon
20:05
posgate SQL database. simply login and if you don't know about the neon neon is one
of the best uh posgate SQL ser uh
20:12
database provider in the market is free to use and in many of my application I use
this neon project SQL database
20:20
it's a u very quick to uh set up and you can
20:27
scale this any time it available for neckj you can use with the different different
OM like drizzle prisma and
20:34
many other uh programming language as Now make sure to sign in to your account
20:42
and once you sign in select the project. If you don't have project make sure to
create a new project and then at the top
20:48
you have you will find an option called connect. Click on it and then select the
database. Here you will find an option
20:55
to create a new database. Here I will add print ondemand
21:00
app and then select the owner. Simply click create and then boom your database
21:06
is ready. Here you will find the connection string as well. Now simply go to this
string and you can even check
21:12
the parameter. That's what we want. Now first thing you need to provide a database
name. So this is database name.
21:18
I'm going to copy and we'll go back over here. I will just enter this. Then you
21:23
need to provide the host name which is this one. So copy the host name as well.
21:29
We'll paste it here. Then you need to provide a port name. So port you can keep as
it is the default one. Then the
21:36
username you'll find this username over here. And the last is password.
21:47
And then it will ask do you want to enable SSN? We'll say yes. And then it
21:53
will ask start with an example structure and data. We'll say no because we don't
want any default data. uh start with the
22:00
typescript um we'll say yes or no it completely depends we'll say no for now
22:05
and install dependency with npm say yes initialize the g repo say yes and then
22:11
if you see it start installing the dependency which is required to set up
22:16
the stripey now once your project is ready simply
22:23
close this terminal and then go to the vs code over here we'll open a new
22:29
window inside the VS code and then open this particular project. So we'll go to
22:35
the project folder where we just created this project. Now inside the project I
22:41
have strappy back end and then I will select this strappy CMS project and if you
see we have some of the files and
22:48
folder. Now obviously you don't need to uh go through it one by one. Okay, if you
need it obviously I'm going to
22:54
explain that. Now simply open a terminal inside this strappy and inside the
package.json you will see a different
23:00
different option to run the stripey. Now in order to run the stripey in a
development mode simply run a command
23:08
npm run develop and simply click enter. Now your stripey
23:14
will run in a development mode. So we'll wait. Now in the back end it will
23:20
automatically create a tables for us depends on the uh strappy requirements.
23:27
So you don't need to worry about anything and boom if you see your strappy is now
running. Now very first
23:34
time obviously you need to sign up to the strappy. So we'll enter some detail
23:42
then add a email password. I will just confirm the password as well and then
23:48
simply let's say let's start. Then you will redirect it to this strappy admin
23:53
on the port local host 1337/admin. Obviously here you will find all the
24:00
information how many created which one are published and all the steps. Now on
24:06
the left hand side you will see this content manager from where you can see all the
records or you can even add a
24:12
new record. Then inside the media library you can see or you can upload
24:18
all the images on the content manager where you can
24:23
create a collection. It means in a simple word where you can create a tables okay
along with the columns.
24:30
Right now if you see we have only one collection which is user which contain this
all of this field. Obviously you
24:37
also can create a single types or component as well. If you want to deploy your
application, uh you can connect
24:44
your application to the GitHub and then you can even deploy it to the Strappy
cloud. Strappy cloud you can use it for
24:51
free. So at the end of this particular course, I'm going to tell you how you can
easily deploy the Strappy on the
24:58
Strappy cloud. Then in the marketplace you will find a different different plug-in
we can which you can explore and
25:05
add it to your Strappy admin panel. And inside the setting you will find bunch of
settings to access your API. You can
25:12
create API key, roles, provider, branding and many other things.
25:18
Now first thing first let's create a new collection for our categories.
25:25
Now obviously once we start uh developing our application there are
25:30
many of the things that we want to add it to the stripey like categories, product,
user information and many
25:37
others. So once we start we can add it one by one into the stripey but for now
25:44
make sure you are able to set up the stripey CMS locally.
Connect ImageKit To Strapi CMS
25:51
Now in order to upload any images or any files right through this strappy media
25:58
library obviously uh currently it's saving in a local right but once you
26:03
deploy this application then your all the media file will gone obviously we need
some backend or some cloud where
26:09
you can store all of these images and that's where we are going to use this
imagekit.io IO image kit is one of the
26:17
platform to optimize, transfer, store and manage your all the images, videos
26:23
or any files very seamlessly. It provide a lot of different feature and along
26:28
with the AI you can transform your image in a real time. You just need to update
26:35
uh the URL and image kit will do all the magic for you. You have you can c do the
26:42
smart cropping. You can do the generative filling the you can even increase the or
upscale the image add
26:49
shadow to your image and there are many more features you will found with this
image kit. Now you can connect this
26:57
image kit to the strappy with this strappy plugins. Now simply we have to
27:02
head to this strappy then click on this marketplace option. Here you will find a
bunch of different uh plugins available
27:10
in order to integrate with the strappy. Inside this you have to search image kit
27:17
and then you will find the strappy plug-in for the image kit. Copy this install
command and then head back to
27:24
the strappy admin panel over here. I will add a new tab and simply paste the
27:30
code or paste the command. Now it will install the stripy plug-in image kit into
your application.
27:37
Now if I go back to this uh documentation, click more option. So
27:44
over here you will find the documentation and step-by-step guide how you have to
install it. Obviously very
27:51
first step is to install this trappy plug-in image kit into your project and then
you have to build this project. So
27:58
what I will do I will go back to the VS code and I will simply stop this. I will
run a command npm run
28:07
build. And once you run this command make sure
28:12
to rerun your application
28:19
and then we'll say npm run develop to restart our application.
28:25
After this, once you restart your application, we'll go back over here and just
refresh this strappy back end. Here
28:32
you'll find a brand new option called image kit. If I open this, you might see that
it's saying the content is blocked.
28:40
We'll fix this in a moment. But before that, I will head to this settings option.
And inside this setting, if you
28:46
scroll down a little bit, you will see this option called im image create plug-in.
And you have option called
28:52
configuration. inside this image kit io setting you have to add the image kit
public key image kit private key and the
29:00
URL endpoint now in order to get this all the keys and the URL simply I'll go
29:07
to the image kit sign up if you don't have an account once you log to the image kit
you will find all of these
29:14
option now inside the media file I I have lot of different project which uses
29:19
this image kit as a cloud storage for the images. Now on the left hand side,
29:25
simply click on develop developer option and here you will find the public key,
private key and the URL endpoint. Let's
29:32
copy one by one. So I will copy the public key first and inside the sharpie I will
paste this
29:39
public key. Then I will copy this private key as well.
29:49
And the last we have to copy the endpoint. So this is the endpoint URL endpoint.
You have to copy that too.
29:58
And then you have option to deliver media using image kit. So if you say yes, it
will automatically optimize the
30:04
media through the image kit. It's completely optional. You can say true, false.
Okay, it's up to you. Then uh
30:12
this option is very important. It's saying enable image kit upload. say true
because by default when you upload any
30:19
images to stripey it will automatically upload it to the image kit. Okay then you
have to uh add some uploaded folder
30:26
and file name. So I will use this /trappy uploads. Now you can follow this
30:32
tutorial or documentation as well that how to set up everything one by one. See
30:37
so I I'm using this example as it is. uh you can even use the tags.
30:46
So over here I will use this tax say override this tax as a true you can add
30:51
a condition if you want the image size length and 2 MB 5 MB something like that.
Okay and then mark file as a
30:58
private we'll make it false we'll keep as it is and simply save this configuration.
Okay once you save this
31:05
configuration now again head back to this documentation and scroll down a
31:11
little bit. Now inside this config /plugins you have to add all of these
31:17
details okay which will uh which obviously you need to update this with the public
key and private key
31:25
but this is completely optional because we already configured with the uh settings.
Okay. So through this setting
31:32
we already configured. So you don't need to uh actually do it. Okay. Just skip this
step. But the most important you
31:39
need to update this security middleware. So inside the config folder under the
middleware dot js file you have to add
31:46
this configuration. So simply copy this as it is. So let me copy only this part
31:58
and then we'll head back to the strappy admin panel. Go to the config. Go to the
32:03
middleware and I will remove the strappy the security and I will replace with the
32:09
code which we copied. Now this code will just enable the all the images which is
get fetched from the image kit. Okay. So
32:16
that's the reason we uh this configuration added. Now again save this one and what
as soon as you save it you
32:23
will see that uh strappy is automatically rebooted for you. Okay.
32:30
Now simply go to the uh media library
32:36
and inside this click add new assets. You can upload any file from your local
32:41
machine. And once you upload this file, it will show this file with a thumbnail.
32:48
Now in order to verify that this file is uploaded or not, simply click on this
32:54
edit button and click on this link. Now you can open this link in a new tab and
33:00
here you will find that imagekit.io. Now this particular image is rendering from
33:06
this particular URL. Not only that, but if you want to verify, you can go to the
media library and here you will find a
33:13
brand new folder called stripey upload inside this. If I open this, you will
33:19
see this image. Cool, right? So that's how you can connect your image kit with
33:25
this traffic. Now if I go to this image kit icon, right, we are the option which
33:30
is coming under this sidebar. you you can even check uh your dashboard from
33:37
this strappy directly. Okay. So that's how guys you have to connect this strappy
with the image kit because we
33:44
want to upload some product images, category icons and many others and that for
that one we want to upload the
33:50
images under the media library and for that we obviously we need some cloud
33:55
storage where we can save these all the images and files.
34:01
Now let's consider that you want to save the user information once user sign in
34:06
or sign up and for that one you can create a collection inside the strappy to save
all of this information. So
34:13
simply head to this content type builder and currently if you see we have the
collection type call user which is the
34:19
default but we'll create a new one. So click on this collection type plus icon then
give the name. So we'll say users
34:28
or we'll say user list. Okay. Then here automatically it will populate the API
34:33
ID singular employer and then in inside the advanced setting you can see more
option and simply click continue. Once
34:41
you create you will see this collection type with the user list. Right now you can
add the field which you want. For
34:47
example the text for the full name or you can simply add something like this
34:52
full name. uh you can select the type whether it's short or long and you can select
the required field as well. Okay,
34:58
which one you want as a required field and simply click finish and here you will
see the new field get added. Same
35:04
thing you can do for example you want to say email. So we'll say email only inside
the advanc I will say this is a
35:11
required field and you can even provide default value for any field which you want
to provide it and simply click
35:18
finish. Also I'm going to put a picture
35:24
and finish. So these are the three uh fields currently we added under the user
35:29
list and simply once you add that right click save button and then it will
35:35
restart your stripey with this updated changes. You don't need to restart manually.
It will automatically restart
35:40
for you. So you don't need to worry about that. And once it done you will
35:46
see the user list collection. Now head to this content manager and inside this
content manager you will see all new
35:53
collection which we just created. Just click on this user list. Currently we don't
have any entry but you also have
35:59
option to create a new entry and whichever field we added you can simply add it
from here. How easy it is right?
36:07
So that's how you can create a collection inside the uh stripey. Now
36:12
once we add the authentication you going to learn how we can uh enable the API in
36:18
order to save retrieve the user information.
36:23
Now in order to enable it simply go to the settings and inside the setting you can
click on API token. Now obviously uh
36:31
in order to make a secure call you must create a new API token. Okay currently
36:36
we have this read only and full access token. Uh you can use the existing one if
you want or you can create a new API
36:44
token. Give the API token name. I will say dev environment. Select the duration. I
will select unlimited. And
36:50
token type I will say custom. Okay. Now when you click the custom you can you
36:55
have option which of the uh API endpoint you want to enable. Okay. So for example
37:02
inside the user list you want to add a create and u I think update as well you can
add
37:10
something like this right fine fine one let's select all same thing you can do for
all other
37:18
so I think that's all we needed okay for now so content type builder I will
37:25
select all for now and then simply click save once you save you will get this API
37:30
token now copy this API token because you cannot get again. Okay, so make sure to
copy that. Head back to your u
37:38
application. Okay, the uh NexJS application and inside this we'll create a env
file. Inside this env we'll add
37:48
this strappy API
37:54
token and simply paste this token. Okay. And save it so that you can use it
38:00
inside your application. Once it's saved, you can go back and boom, you will see
your API token is now created.
38:07
Now inside this, if you want to use any endpoint, just click on this setting
38:13
icon and you will see this endpoint. how to retry, how to create and everything.
38:18
Obviously in the next uh chapter where we are going to add authentication inside
our application then you will get
38:23
to know how easily we can use this API endpoint because it's already created the
logic regarding the um
38:31
uh creating API and saving into database is already there. You just need to call
it.
Header
38:42
Now it is time to start building our application. If you see this is the home
screen of our app where on the top we
38:49
are going to add a header. Then we are going to add a hero section, the
38:54
category list and the product along with the footer. After this obviously there are
lot of other pages which we are
39:00
going to add. But on the home screen these are the some of the components which we
want to add. So simply
39:06
head back to the VS code and inside this app folder where we have this page.tsx.
tsx I will remove this existing code and
39:14
I will just add some section. So first is a header then the hero section the
39:21
category list after this we want to add product list
39:28
and then last is footer. Okay now in order to build this complete page we are
39:35
going to divide each of these section into a small components. So for the header we
are going to create a new
39:41
component. So we'll create an new folder under the app and we'll call it as a
underscore components. Under this we'll
39:49
create a new file called header
39:56
tsx. Then simply add a default template and then save it.
40:04
Now in order to add this default template by just typing a couple of words
40:09
simply you have to add a new extension inside the V code called ES7 plus react
40:15
redux extension and for the tailwind CSS as well you can add this Tin CSS
40:21
intellisense that is very important. Now again inside the header
40:28
uh first before that we will add this header component on the home screen.
40:34
and then save it. Now we'll go back to this header and inside this first thing
40:40
we want to add a logo on the left hand side. Now for the logo you can get any
40:46
logo. I will use this logo pum uh the logo placeholder. So just go to this any
40:54
of this logo and you select the logo which you want to use. Okay, there are bunch
of different logo which you can
41:00
pick it from. So I think I will use this one, the simple
41:05
one. Just click on it. It will copy the SVG file. Then go to the public folder.
41:12
Inside this will create a logo SVG and simply
41:18
paste this SVG which you copied and then save it. Then inside the header we'll
41:23
call an image tag from the next / image the source tag. And under this you can
41:28
simply mention the logo. SVG you don't need to provide a complete path
41:34
alternate text will be logo the width I will say 120 height 80 and then save it
41:43
now I will go back to our application and here you will see the logo right now
41:49
obviously you can change this size and height so I will say 320 by 180
41:57
little bit bigger right but anytime you can provide the your own custom width
42:03
using the tailwind CSS classes as well.
42:09
I think this is much better. After this, we want to add some menu options, right?
42:15
So, we'll define that menu options. So, we'll say constant menu inside this. we
42:21
say ID 1 name as home and then path for that.
42:30
Okay, I will copy this couple of more times
42:41
and the second will be let's say products
42:49
then about us
42:54
and then contact us. So these are some option which I added for our menu. Okay.
43:02
And then save it. So in order to iterate that we'll simply add a ul tag. Inside
43:09
this we want to map. So we'll say menu dot map
43:15
item, index and the arrow function. Inside this we'll add la tag and then
43:21
simply show item dot name. For this li we'll provide a key as index and then
43:29
save it. Now if I go back you will see these four option but we want this four
option uh in one line. So for that
43:40
um for this u tag we'll mark it as a flex gap of five. Also for this la tag I
43:48
will add some styling and let's see how it looks now. See
43:55
and the last we want to add a button and it will say
44:01
login / signup or sign in / signup we
44:07
can say. Okay. Now this button only display when the user is not logged in
44:12
otherwise we are going to show a profile icon. Um also we want to add a card icon.
So
44:19
actually we can wrap this button inside the div because we want on the right hand
side and then we can add a cart
44:25
icon or I don't know bucket icon we can
44:32
simply find that on a lucid react icon because when we install the chaten it also
install this lucid icons. So if I
44:40
search something like cart so this is called shopping cart. So simply you can type
like
44:47
shopping cart or bag. Okay. And close this tag.
44:53
Let's save this one. For this as well, we make a flex gap of uh let's say three
44:58
item to be in the center. And then save it.
45:06
And then save it. I don't know why we getting this error.
45:13
You see we have this all of things ready. Now let's bring everything in one line.
So for this parent div we'll add a
45:20
class name flex then item to be in the center and then justify between. When
45:27
you see justify between this is how it will look like. Also give some padding. So
we'll say padding to four. Padding x
45:35
to 10. On medium screen we'll give padding. Okay. Let's let's keep like this only
for now because later on we
45:42
are going to add a padding to the layout directly. Okay. Now whenever we hover on
45:47
this particular um text we want to change the color also. Currently the
45:53
color is kind of black color right? Uh the primary color. So that also you can
change it. In order to change the color
46:00
of your shadian component, simply go to the global CSS
46:06
and inside that you will see this Telwin CSS styling for the SH CN. Now search
46:12
for this primary primary. Okay. Now this is the color code they use which is an
46:18
okay Oaklatch we can call I don't know what is called actually but OK LCH code
46:23
format. Okay. Now what you can do simply go to this site called oklesch.com
46:30
and then whichever color you want to use you can select that color for example I
46:36
want some kind of blue color so we'll use this color and this is the
46:42
hex code for that one and this is the color code in the form of okch so simply
46:47
copy that and replace this over here and then save
46:54
Now once you change this, if I go back, you'll see the color is changed now. But
47:00
you can even select the color which you want. So for example, I want this color
only. So I will copy this hex code and
47:06
then just paste the hex code over here. Now copy this formatting formatted code
47:16
and then I will replace it to this primary color. Okay? And once you
47:21
replace you will see the magic. So that's how easily you can change the color
combinations.
47:29
Now one last thing before moving to the next part is providing
47:35
the layout uh padding. So for that one we'll go to the layout.tsx tsx file
47:41
and I will wrap this inside the do tag this particular children
47:46
and then over here we'll say class name padding x to 10 when the screen size is
47:53
medium we'll give padding x to let's say
48:02
20 on last screen we can give padding x to 36 and let's see how it looks I think
48:08
this is much See,
Authentication
48:15
now it's time to uh add an authentication for our application and for that one we
are going to use a
48:21
Google authentication. Now there are lot of services that you can use uh for
48:26
authentication like clerk or many others but in this particular project we are
going to use our own authentication uh
48:34
implementation. So for that one I'm going to use this GitHub uh package
48:39
called React O/G Google. Uh it's very easy to integrate and I'm going to show
48:45
you the step by step. So very first thing that you need to install this npm
48:51
package. So we'll copy this npm package. Then go back to your application. I will
48:58
close all of this tab and then open a terminal. Make sure to add a new
49:04
terminal and simply paste this command. So I think we paste all of this. So I
49:09
will go back over here and we'll copy only this one.
49:19
Once it install it's ready to use now this another step
49:25
is you need to wrap your application inside this Google O provider by providing the
client ID. Now we'll
49:32
generate the client ID as well. But before that I'm going to uh open
49:38
layout.tsx file and simply wrap it over here.
49:44
Something like this. And make sure to import this Google all
49:52
provider as well. Okay. Then save this one. Now if I go back to our application
49:58
and refresh this screen, you will not see any changes. Now simply go to the
50:03
Google cloud console and inside this Google cloud console, you need to
50:10
get the client ID for the authentication. Now if you are adding the uh
authentication very first time,
50:16
make sure to go to this consent screen and then create a new consent screen.
50:24
find this option. Uh if I go to this API and services, that's where you'll find
50:31
this o consent screen. But if you already have, simply go to the credential, create
a new credential and
50:38
click o client ID. Okay. So I will create o client ID. Give the application
50:43
name. Okay. So select the application type which is web application. Um give the
name. So here we'll say print on
50:51
demand web app. And you can even add the origin the redirect URL. Okay, it's
50:57
completely optional I think. But once you push this to a production then make sure
to add that and then at the last
51:07
simply click create. Once you create it will generate that client ID
51:14
and here we have this client ID and the client secret key. Right now we just need a
client ID. So I will go to this
51:20
env file and simply I will add that. So here we will say Google
51:25
client id is equal to and paste this key. Now
51:32
copy this, save it and simply we are going to use over here.
51:39
So we'll say process env
51:44
sorry dot
51:50
Google client ID. Okay. And add exclamatory mark and then
51:56
save it. Now if I go back to our application, make sure you don't have any error. I
52:02
will go to the inspect panel, go to the console and make sure uh there is no error
at all. Now the next step is uh
52:10
you just need to add the Google uh login button like this. Okay. You also can add
52:16
a one tap sign in or automatic sign in and there are lot of other option that you
can find over here. Now easiest way
52:23
to implement simply go to this demo how to fetch user and all inside this make
52:29
sure to select this authorization and select this implicit flow inside here. This
is the easiest way to add this
52:36
login and you can even test this out. So I will copy this line of code. Then
52:41
we'll go back to our application where we have this header and obviously on the
52:46
click of sign in and sign up we want to sign in with the Google. So I will paste
the code which we copied. Make sure to
52:52
import this use Google login and you have to add this exio because we are
52:58
making a HTTP call by passing this token response. So that is very important. Now
53:06
if you don't have Exio library installed simply I will add that using npm I
53:13
AIOS and it will install this AIOS library for us. Now obviously we need
53:18
this throughout the um project because we are making a lot of API calls.
53:25
Once you add that make sure to import it. Now what will happen once you click on
Google login it will generate the
53:31
token response. Now from the token response you need to pass the access token. So
here we'll pass this token
53:38
response dot access token so that we can we will get the user information over
53:45
here and once we get the user information we wanted to save to our uh
53:51
db/trappy backend and then we want to also share that
53:57
throughout the application. Okay, so that we'll learn it in a moment but before
that let's test this out. So make
54:03
sure to call this method on the click of this button. So we'll say on click and
54:09
make Google login call. So over here maybe we can write like this and then
54:17
save it. Okay. Now let's go back to our application. So right now um we are g we
are getting
54:24
error that this is on the client side. So we need to mark this component as a
54:29
client. Okay. because this is on the client side. And now if you see we don't have
any error. Now if I click on this
54:36
sign in and sign up button boom if you see it's allowing me to uh open this
54:43
signin block. But currently it giving me error that access block and this apps
request is invalid. That's because
54:51
inside our Google cloud console you need to add the authorized URL. So if I go to
54:57
this print on demand web app which we just created here you need to add the URI
okay so our URI in this case is
55:06
local host 3000 something like this
55:12
and then then simply save this one okay once you save we'll go back to our
55:18
application refresh this and now login and boom if you see now I can able to
55:23
see my all the accounts once I sign in successfully We'll go to the inspect panel
go to the
55:29
console and boom here you will see the data with the user email which I login
55:35
the family name given name and all the information how easy it is right so
55:42
that's how you need to do it now if I refresh this screen again right see nothing
is happen right now
55:50
now once you sign in successfully we have to make sure we'll save this token
55:55
response So basically here we need to um
56:00
save that in local storage. So simply we'll say local storage dot set item and
56:06
inside that we'll say access token
56:13
comma whatever the access token we have. So let me get that. Okay. So it's called
56:19
token response. Or we can save it as a we can save just access token that's also
fine or we can
56:27
save it as a token response only. Now make sure this is in the JSON format. So
56:32
you have to convert that into a string. Okay. And then save it. Now inside the
56:40
use effect. So we'll add this use effect and we get need to get a token response.
56:47
So over here we say if type of window is not equal to
56:54
undefined then we'll simply get the constant token response is equal to
57:03
local storage dot get item and then make sure to pass this token response to
57:10
this. Now obviously this will get the string we have to convert that into a
57:15
JSON. So I will wrap this in a JSON pass something like this. Now it might be a
57:21
null. So over here we'll add an empty value as well
57:27
or let's keep like this or maybe we can ignore
57:33
this error and then save it. Now once we get the
57:38
token response. So here we'll say if token response then you can simply call this
method as
57:46
well. Maybe we can create a method to get user
57:53
info. And here we say constant get user profile
57:59
the arrow function. And whatever we have over here,
58:04
we'll cut it from this one. And then we'll paste it here. Let make this as a sync.
And inside this, we just need to
58:11
pass an access token. So we'll accept the access token. It is of type string.
58:17
And then this get user profile. We can call over here.
58:24
And pass the token response. Okay.
58:30
So over here uh token response dot access token we need to pass same thing
58:35
we have to do. So inside this we'll get the await get user profile
58:42
and then we'll say token response. You don't need to use await actually
58:48
that's fine and then save. Okay now let's test this out. So I will just go
58:55
back to this browser. I will refresh this screen and still uh nothing is happen.
59:05
Now here make sure you are passing token response along with this access token
because we are saving the token response
59:12
as a object and inside that we have this access token. Now once you save this we'll
go back we'll refresh the screen
59:18
and then you will see the magic here we have the user information. Now another
59:24
important thing important thing is if the token is expired you have to login it
again. Okay because with the current
59:31
access token it will valid at for certain time. So make sure it will automatically
uh allow us to login as
59:40
well. Now another important thing that whatever the info um user data we are
getting we need to save in one state. So
59:46
here we'll say user um comma set user is equal to use state.
59:56
Now over here we can provide a type.
1:00:01
We'll say user is equal to and inside that we'll say email is of type string.
1:00:09
Uh you can get all the whatever the data we want. For example, so it's saying email
verified. Um so we have this email
1:00:18
we need and picture. So I will add that name of type string
1:00:26
and then picture of type string. So these are the information we want. So I
1:00:31
will pass this type as a user and simply
1:00:36
inside this get profile we'll set the user using this user info dot data and
1:00:44
then save it. So that's how you can save the user information. Now whenever you
load this particular uh component or
1:00:52
header we have to make sure that this information will pass across a different
1:00:57
different components. Right? So for that one we are going to use a context.
1:01:04
So I will go to this app folder or maybe inside the root directory we can create a
new folder called context. And inside
1:01:11
this context folder we'll keep all the context that we are going to use. So we'll
create user detail context dot tsx
1:01:20
file. Here simply add export constant user detail context is equal to create
1:01:29
context. Now make sure this create context you are importing from the react.
1:01:34
Inside this create context you can provide a type as a user. Now obviously
1:01:40
we don't have uh we are not exported this user. So make sure to export this
1:01:45
so that we can easily import inside this user otherwise undefined. Okay, over
1:01:51
here we'll say undefined and then save it. Now in order to share
1:01:57
this user context throughout the application, you need to make sure you'll wrap
this user context uh
1:02:04
means all the inside the all the app you need to uh add under this context
provider. So we'll create a new file
1:02:12
called provider.tsx. Inside this we'll add a default
1:02:18
template. I will rename this to provider and inside this provider I'm going to
render this children. So we'll copy this
1:02:26
as it is. Then we'll go to the provider.tsx and simply paste. Okay. Now
1:02:33
inside that now I'm going to render the children. The reason we created this
provider because we can keep this
1:02:39
provider on the client side and then we'll keep this layout on the
1:02:44
server side only. Right now inside here we'll again add a provider
1:02:51
and then inside the provider pass this children. Obviously on the application
1:02:57
side you will not see any changes.
1:03:03
Now simply go to the provider.tsx and inside this we'll define constant
1:03:11
user detail. I will say comma set user detail
1:03:19
is equal to use state as a default um state. Okay. And you have to wrap this
1:03:25
children inside the user detail context dot provider. Inside this you need to
1:03:32
provide a default value for this provider which is nothing but this user detail and
then close this tag
1:03:40
something like this and then save it. Now over here you need to provide as a
1:03:46
user and you can pass it undefined as well. So obviously we are getting this error
1:03:52
because we are saying that user detail does not exist of type user.
1:04:03
So I will just ignore this error. Okay. And then save it. Now once you save
1:04:08
inside the header component. So let's go to the header.tsx. tsx inside here when
1:04:15
you get the user information you have to set it to this user detail state right so
first I will say constant user detail
1:04:25
context comma set user detail not context we just need a user detail
1:04:33
because that's what we set right the default state and then we'll say user detail
is equal to use
1:04:40
context and then provide the context name which the user detail context. Now make
sure this user detail is start with
1:04:47
this curly braces. That is very important.
1:04:54
And here it's saying that user detail does not exist on type user undefined.
1:04:59
So what we can do we can simply go to the provider and let's add undefined
1:05:06
over here and undefined.
1:05:12
I don't know why we are getting this error. So here let's make this as any because
1:05:19
that's making little bit confusion. And now save it. And once you have this user
1:05:24
detail simply we are going to set the user detail as well using this user info
1:05:32
dot data. Okay. Now make sure you will you can wrap this inside the try catch
1:05:37
block
1:05:42
and here uh if there is any any error we'll set the error we can set the local
1:05:48
storage. So we'll set local storage dot set item for this access token or token
1:05:55
response with null. Okay. Or maybe we can say
1:06:01
just empty value and then save it. And whenever user don't have the user
1:06:08
information then we wanted to show this button. But if user has the information
then we are going to show a user profile
1:06:15
icon. So here we say if user is not there then show this button otherwise
1:06:23
we want to show an image
1:06:29
the source and inside that we have the user dot picture in al tag I will give
1:06:36
user dot name the width will be let's say 50 height will be 50 inside the
1:06:43
class name I will make rounded corner full
1:06:48
and then save it. Now if I go back to our application, refresh screen. Currently
the session is expired. Now I
1:06:55
will sign in again. Now after sign in you might get this
1:07:01
error. It's saying that this particular host name need to be configured. So simply
copy this host name. Go back to
1:07:07
your project and then inside this next.config.ts TS
1:07:12
file you need to add this URL host name. So we'll say images. Inside this you
1:07:19
need to add a domains and under the domains simply add this host name. It means we
are just telling to this NJS
1:07:26
application this is the whit listed uh URL or host where you can uh you can
1:07:32
enable or you don't um unauthorize this particular images from this particular
1:07:37
host. Now once you add that simply go back to your application reload your
1:07:43
application because you have to manually reload and then boom if you see on the
right hand side now you'll see the
1:07:49
profile image because you are currently logged in. Now I will just make some
1:07:54
small update. So we'll go to the header and instead of 50 I will make this 40
1:08:01
height and width. Okay. And once you save we'll go back again. And now it's
1:08:07
look much better. So that's how you need to add authentication. Now one last
important thing that we need to um save
1:08:16
it into our strappy back end as well.
Save use to Strapi
1:08:22
Now in order to save the user information to our strappy simply go to the strappy
go to the settings where we
1:08:29
already have this API token right and we gave the name as a div inside this if I
1:08:35
go to this user list search for the endpoint called create because we want to
create a new record and this is the
1:08:42
endpoint for that one right now what we can do we'll go back to our application
1:08:47
and as you know that we are we are going to pass a bearer token to our HTTP call.
1:08:54
So in order to avoid or exposing that API token, we'll create an API inside
1:09:01
our NexJS application and which will call this strappy API. So we'll say API
1:09:07
inside this we'll create users API and inside this again we'll create
1:09:13
route.tsx. Now this is a endpoint inside our NexJS application.
1:09:19
Here we'll create export a sync function and this will be the post request.
1:09:27
The type is next request and then inside here we'll get the user information. So
1:09:34
we basically need a user or we just say name email and picture is
1:09:43
equal to await request dot JSON because we are fetching from the uh body of the
1:09:51
post request. After this we'll simply add the try catch block.
1:09:58
Inside the catch block, we'll simply return the next response. JSON with an
1:10:04
error. And inside the try block, we want to make an HTTP call. Now we'll set up
1:10:10
the API client. So inside the li folder because it was already there.
1:10:17
Uh currently it uses for this utils. But what we can do, we'll add a new and
1:10:23
we'll say uh exos
1:10:31
client dot ts. Inside here we'll simply add export
1:10:38
constant exio client is equal to exio dot
1:10:48
create and then we'll add a base URL. Okay. Now base URL
1:10:56
will be the strappies URL. Okay. So in this case I will say localhost 1337
1:11:06
okay slash API because that's where our API endpoint is
1:11:12
here right then we need to provide a header that is very important
1:11:19
in authorization we need to provide a bearer token so here we say bearer and
1:11:26
then we need to pass a token so that token will get it from the process dot
environment
1:11:33
dot and the name of the environment variable which is a strappy API token.
1:11:39
So I will just copy that over here. Okay. And then save it. So that's how
1:11:44
our Exio client is ready. Now whenever you want to make an API call to this trappy
endpoint, you can just simply
1:11:51
call this Exio client. So now over here we'll say constant result is equal to
1:11:57
await exosclient. If you see it is importing from the liios client dot post
1:12:05
request and then you need to provide
1:12:11
or you you simply need to pass this API endpoint which is / user list because we
already attached this uh API endpoint
1:12:18
right. So something like this. So we'll say /ash user list and in the body we
1:12:24
need to pass the information. Now it is very important to know how to pass the
1:12:31
post request to the strappy. So simply click the link in the description which will
navigate to the stripey documentation. Inside this documentation
1:12:38
here you will see a different different method to call to the stripey endpoint. Now
in this case let's consider that we
1:12:45
want to make an post API call. So on the click of that create document you will see
how to uh format the schema first.
1:12:53
So inside the data you need to add all your fields okay as straightforward and
1:12:58
then you need to pass it to the post request. So over here what we'll do I will add
it as a constant data
1:13:07
inside this data you need to pass a name as name email
1:13:15
as email and then picture as picture but
1:13:21
again make sure the fill inside your
1:13:26
uh user list will match to the field. So if I go to this create new if you see in
this case the name field is nothing but
1:13:34
this full name. So make sure it's a full name and then email picture is already
correct. Once you have this data simply
1:13:43
instead of this one I will pass this data something like this. Okay. And then
inside the console we'll get the result.
1:13:52
Once you get the result you can even uh return the result as well. So here we
1:13:57
will say result dot data and that's how you can make an API call
1:14:04
to the strappy. Now this is the API inside our NJS application which you
1:14:09
need to call from your application. So inside the header as soon as you login
1:14:16
right you need to save this information. So inside this Google login maybe uh
1:14:27
I will create actually new method we'll say constant save new user is equal to
1:14:36
arrow function something like this then this same user new user I think I
1:14:43
might call inside this one and obviously I'm going to pass this
1:14:49
user information and data to this save new user
1:14:55
and here I will say user of type user
1:15:01
then we say constant result is equal to await
1:15:08
exos dot post request we'll say API/
1:15:14
users because this is the API endpoint we are calling and inside the post request
we'll pass name as user dot
1:15:22
name, email as user dot email
1:15:27
and then the last is picture as user dot picture.
1:15:36
Then inside the console we'll say result dot data and here we'll make this as a
1:15:43
sync. Perfect. And then save it. Now let's test this out. So I will go back
1:15:48
to our application inside the inspect panel. If you see any
1:15:53
error, you will find that error over here and then refresh it. Now once you
refresh, currently it's saying
1:15:58
unauthorized. The user is not authorized. So I will sign in
1:16:05
and then boom, we have access token. We got the data. And inside this data, you
will see the ID with the two. This
1:16:13
information gets saved to our database. Okay.
1:16:18
And then inside the user list you will see the user information. How cool it is
1:16:23
right now. Obviously if you refresh this again right again it will save the new
1:16:31
record. And now if I refresh this right so I don't think it's saved because
1:16:36
maybe we make this okay. Yeah if you see it's saved right. But we don't want this
1:16:41
particular scenario to happen. Obviously whenever user refresh come to our
application sign in every time it will
1:16:47
get saved. There are two way to avoid this. Okay. Right now I will delete this one.
1:16:53
One go to the content type builder and where we have this email. Click on edit.
1:16:58
Go to the advanc setting and say it's a unique field. Once you say this as a unique
field, right? And then make sure
1:17:05
to save this particular collection whatever the changes you made. Then next time
when a user try to add a new
1:17:12
record, it will not save it and it will throw an error. Let me show you how. So if
I refresh it, it's saying request
1:17:19
fail status 400 error that this particular user is already saved. Now if I go to
this
1:17:27
content type manager user list, you will not see the new record. So this is another
way that you can save the user
1:17:34
information and avoid to save it as a duplicate one. Okay. Or second thing
1:17:40
inside your route here before saving the data you can even check if user already
1:17:49
exist and depends on that one you can even uh check before inserting the
1:17:55
record but it's up to you how you want to handle this uh particular scenario.
Hero Section
1:18:05
Now let's implement the hero section for our application. If you see this mockup
where we have this particular section
1:18:12
and we are going to create a hero component for that one where on the right hand
side we are going to show
1:18:17
this image and on the uh left side we are going to show this content. Now you can
even uh implement this from the
1:18:24
scratch but u we are going to use this hyperi components which is pre-built tin
1:18:29
CSS components and it's very easy to use. You don't need to install any uh library
for that one. Simply go to this
1:18:36
hyperui.dev and then scroll down for different different components. Now in this
1:18:42
section particular se hero section we are going to use this banner component. Click
on it and if you see the there are
1:18:48
different different uh options available. Now obviously uh you have to
1:18:54
select the one which is matching to our mockup. So I think this one is perfectly
matching to our components where on the
1:19:00
left hand side we have some information on the right we have this image as well.
You can even see that how it looks on
1:19:08
the smaller screen large screen and on different screen as well. Okay. So simply go
to this HTML click JSX because
1:19:16
we want JavaScript or you can select the TS script because anyway this is a uh
1:19:21
just UI things and then copy it. Once you copy, we'll create an hero component
1:19:28
under this component folder. Add the default template and then paste
1:19:35
the code which you copy. See something like this and then simply save it. Now
1:19:41
in on our home screen after the header we are going to add this hero
1:19:47
section. Okay. Now if I go back to our application here you will see this hero
1:19:52
page. Right now it's uh uh leaving so much space at the top. So simply inside
1:19:58
the hero hero section uh we can change this. So we don't want this place content
the
1:20:05
center. We'll remove that. And also we have to remove uh because it's it's
1:20:13
leaving some padding. See on the large it's leaving a lot of padding. And uh I
1:20:20
don't want that much padding to leave. So you can just remove that
1:20:27
also. I will remove this one too. And perfect. See now you can change this
1:20:33
color to your primary color because it should match to our theme. Then you we
1:20:39
want to change this uh text as well. So we'll say create, customize and order.
1:20:45
So we'll say create, customize
1:20:54
and order.
1:21:02
Perfect. So maybe we can put this customize
1:21:07
over here and then an order.
1:21:15
Then for the text I will just copy this.
1:21:23
I'll paste it here. You can change more content. Uh here we have start
1:21:30
designing as a text. Okay. And here we'll say explore
1:21:36
products as another button. And for this SVG, we don't want SVG because inside the
public
1:21:43
folder, I already added this hero.png file which I wanted to show. So simply
1:21:48
I'm going to add this image tag with a source. Here we say hero.png
1:21:57
all tag as a hero. Then width I will give 450 and height to 450.
1:22:06
Perfect. Okay. So this is how it look like. Obviously we can add more uh
1:22:12
description over here because this looks so empty. So let's go over here.
1:22:19
So here I updated this. Okay. Just changes the updated this content uh description
and little bit of this
1:22:25
heading. And now it's much better. Okay. So that's how easy you can uh do it. Uh
1:22:31
if you think you can give more gap. So for example, this is the one div and this is
the another
1:22:38
over here. Let me bring this down. And uh on the medium, right? We can give gap
1:22:45
of 10. We can increase this gap actually. Let's say
1:22:52
28. I think this is better. Okay. So that's how easy it is that we update the our
1:22:59
hero section. Now let's implement this category
Category List
1:23:05
section. In order to display the list of category, first we need to add all the
category which we want to display on the
1:23:12
screen inside the strappy admin panel. So let's go to the strappy and currently we
don't have any category collection.
1:23:20
So go to this content type builder. I will just refresh it. I think sometimes
1:23:26
uh if it fails make sure to refresh or restart it. Then here I will add a new
1:23:31
collection type and I will name it as category. Now obviously it has IPA ID inside
the
1:23:39
set advanc setting you can see all other options just simply say continue and here
you
1:23:45
have option to add a field. So the first field we'll say name of the category.
1:23:52
Then we'll add another field which is the media. Okay. Now inside the media
obviously we want to add an icon. So
1:23:59
that's the reason I added this icon as well. And simply say finish. Obviously we
for
1:24:05
now we just need these two important things name and the icon. But if you want add
more fields you can just add
1:24:13
the more field as well and simply click save. Once you save it will restart your
1:24:18
uh strappy with the new changes and then if I go back to this content
1:24:25
manager you'll see the new category sorry new collection type called category. Now
here you have option to
1:24:31
add a category let's say t-shirt as a new category. Here you have option to
1:24:36
upload the image as well. So I will add more assets. You can just select the
1:24:42
assets. So I already have the list of icon which I want to add. So I will select
all of them at once.
1:24:51
So let's select this one, this one and for this one. Okay. So these five category
I'm going to show. So I will
1:24:57
open that. Upload these five assets. So you can even upload the all the asset
1:25:03
at a time. And then for the t-shirt I will select this one. So let's say
1:25:08
finish. Okay. So I want to edit. Let's delete this one. Not this one. Not
1:25:14
this one. Let me add one only. This one. And
1:25:20
finish. And simply click save. Now obviously you have option to publish it.
1:25:25
Currently it's in draft mode. But once you click publish then it will actually
ready in on the API side as well. When
1:25:32
you fetch it, you will get that. Now one more small change I wanted to do. If I
1:25:37
go to this content type builder for the category, click on edit. And currently it's
showing the multiple media. We
1:25:44
don't want the multiple media. We just want a single media to upload. So make sure
you will add this as a single
1:25:50
media. And then restart uh the stripey. It automatically do it for you. So you
1:25:56
don't need to worry about it. And now I will just make sure we have this category.
In the same way, I'm going to
1:26:02
add all other categories as well. So for example the hoodies I will select this
1:26:07
one and finish and I will say publish here. Now I added all of these category
1:26:14
which I want to use. Next thing uh make sure inside this setting API token where
1:26:21
we have this API right go to this div and make sure to enable this option
1:26:26
because we want to fetch it right fine. Obviously, we don't want delete or update.
We just want to fetch it. Not
1:26:33
even create actually. And simply save this. Okay. I just make sure that
1:26:41
and now with this API endpoint, you'll get all the list of category. Now go
1:26:47
back to this uh VS code. Inside this, we need to create API endpoint in order to
1:26:54
fetch all the categories. So inside this app under this API we'll create a
1:27:00
categories as a new API endpoint.
1:27:06
Then we'll add a default template. So here we'll say export a sync function as
1:27:11
this is a get request. So we'll say get the request and here we'll say next
1:27:17
request. Inside this we just want to fetch it. So I will add a try catch block.
1:27:24
Inside this catch block, we'll say return next response dot JSON with an
1:27:31
error. Inside the try, we'll say constant result is equal to await. Exosclient dot
get. And the API endpoint
1:27:40
for it is this categories and that's all. Then
1:27:48
inside the return we'll say next response dot JSON result dot data. Okay.
1:27:55
And that's how you'll get the data and you you can return it. Now obviously for the
in order to display the category
1:28:02
we'll create a new component called category dot js tsx. Then we'll add a default
1:28:10
template. Make sure this particular component will add on a home screen. So under
this page.jsx JSX I will add
1:28:17
categories component. Go to the categories. Make sure to fetch these
1:28:22
categories. So here we'll say get category list dot sorry list the arrow
1:28:27
function inside that we'll say await exos dot
1:28:34
make sure to input this exos oops dot get/ ai/
1:28:42
categories as we are using a so I will make this as a async
1:28:48
and once we get the result we'll just console it first we'll see whether we are
getting the result correctly or not.
1:28:55
Now this particular method we need to call whenever we uh load this particular
component. So we'll use this use effect
1:29:04
and use effect only execute once. Uh if I provide this uh square braces okay uh
1:29:11
otherwise it will execute infinite time. Now you want to execute this get uh you
want to execute this get category list
1:29:18
whenever this component get load. So that's the reason I added this use effect and
pass this empty array. So it
1:29:23
will execute only once. Now let's save this one. Now make sure this particular
category uh has a use effect which is
1:29:30
the react hook. So I will make this component on the client side. So we'll mark it
as a use client. Okay. Now let's
1:29:38
go back to our application. You go to the inspect panel. Go to the console and just
reload your
1:29:45
application. Now right now if you see inside the data we have the list of
1:29:51
category which contain the document ID which is very important and then we have
1:29:56
the name the ID published ad created ad and all the fields but currently it
1:30:01
don't have the media file okay means the image file or image URL now in order to
1:30:08
get that one we'll go to this Exos client this categories and we have to add a
question
1:30:15
mark populate is equal to start. It means populate all
1:30:21
the fields which contain uh inside that particular collection. Okay. Now once
1:30:26
you add this one and refresh the screen now. So right now it's saying end of
1:30:32
JSON. Okay. That's fine. Yeah. It's inside the header we have
1:30:38
this error. So we'll add an optional operator field
1:30:45
maybe over here.
1:30:55
So we added if it's empty then it will catch this. Oh, it still have this error.
1:31:01
That's weird. After refresh it gone actually. Okay.
1:31:06
Anyway, so we'll go to the data and in this case you will see now we have the field
called icon and inside the icon
1:31:13
field we have this URL. If I open this URL, obviously it is hosting an image kit.
That's what we connected our cloud
1:31:20
image service. Right? And here we have this um icon. Perfect. Right? So that's
1:31:26
how you need to fetch this category list. Now once you have this category list,
make sure to save in one state. So
1:31:31
here we'll define a constant category list comma set category list is
1:31:40
equal to use state. Now obviously I will define a type
1:31:46
category is equal to
1:31:51
and here we want a name of the category which is of type string and then we want
1:31:57
the icon it is of type string again.
1:32:05
So basically uh inside the icon I will type any because
1:32:12
if you see this output inside the icon we have this URL right so maybe you can
1:32:18
write something like this URL of type string
1:32:24
and then attach this to this category. Now make sure it's a
1:32:29
list. uh along with this icon I also want a document ID and also want ID. Now
1:32:38
ID is of type number. Okay. So make sure that ID
1:32:43
this is the ID and then the document ID. Once you have this type mention make
1:32:48
sure to save your result. So we'll say set category list result dot data dot
1:32:55
data because inside the data we have again this data object and that's what
1:33:00
we wanted. Okay. Now next thing we want to display that. So inside the h2 tag
1:33:06
we'll say categories
1:33:11
or we'll say popular categories.
1:33:20
We'll make font bold text to Excel. Now in order to map it, I will add a div
1:33:27
first. Inside that we'll say category list dot map. We say category,
1:33:34
index is of type number and category is of type category.
1:33:42
Then the arrow function over here we'll simply add a div.
1:33:49
And inside the do we want to show an image. So we'll provide a source with the
1:33:56
category dot icon dot URL. Then width I will say 50 height to 50
1:34:04
and all tag as category dot name.
1:34:10
For this do we'll say key as index and then save it. Now if I go back to our
1:34:16
application. Let's refresh this. So right now um if you see we got an error
1:34:22
that it's saying the host name imagekit.io is not configured as our
1:34:27
image are getting from the image kit. Right? So you have to make sure this
particular host name is need to be
1:34:34
configured under the next.config.ts file along with this Google. Right? So I
1:34:41
will add that. Once you add, make sure to manually reload your application and
1:34:46
then you will see all this category is rendering on the screen. How cool. Obviously
here we need to add some
1:34:53
styling. So instead of this 50, I will make this 120
1:34:59
and I will see how big it is. I think that's fine for now. Uh then we want a
1:35:06
name of the category to display. So we'll say category dot name.
1:35:14
Okay. And after this for this due tag we want in the grid
1:35:20
format. So we'll say grid column 2 when the screen size is smaller. On medium
screen size we'll say grid column 3. And
1:35:26
on large we'll say grid column 4. Extra large grid column 5.
1:35:34
Perfect. Something like this. I think it's too much uh too big but that's fine
because we are going to add some padding
1:35:41
to this one. So we'll add padding to three. We'll add a border. We'll make
1:35:46
this rounded to let's say large for now.
1:35:54
And we'll make flex flex column item to be in the center.
1:36:00
Perfect. Let's give some uh gap between this. So we'll say gap to five. Also for
1:36:06
this name of the category we'll say class name as text larger font media.
1:36:15
Perfect. Um I will just decrease this to let's say 80 because the size is too
1:36:22
big. I think this is much better. Okay.
1:36:28
Now for this div I will give margin top to five. So some space
1:36:36
now. Then if you see this is how it will look like. Now whenever you hover on any
1:36:43
of this particular category we wanted to show some kind of highlighted border. So
1:36:48
for this div let's bring this down here. We'll say hover and then simply
1:36:55
add a border color. So in this case I will add a primary. Now if I hover this one
you will see this border also uh
1:37:02
whenever you hover we'll say cursor pointer to this particular div. So if
1:37:08
you see the cursor get changed and as you know that this is completely
1:37:14
responsive. So if even though if I change the screen size you will see the next
category coming down and so on.
1:37:21
Okay. So that's how the category layout also changes depends on the screen size.
1:37:27
Now one one last important thing whenever you click on any of these category we
wanted to open the product
1:37:34
list. Okay. So basically I will change this to a link tag
1:37:42
and here as well the link tag and to this link tag we need to add h reference. Now
this link tag we are
1:37:48
importing from the next slacks link. It is optimized by the next js. uh it's a
1:37:54
similar like an anchor tag inside the HTML over here you need to provide the
1:37:59
category name okay or route to that particular category so maybe there are a couple
of option you can do it either uh
1:38:07
for now I will put a hash okay either you can uh navigate by the category name
1:38:12
or you can navigate by the document ID or by the category ID as well
Product List
1:38:22
now Now it's time to display the product list on the screen where we want to show
1:38:28
the feature product on the home screen. In order to display this all the products
obviously we need to add that
1:38:34
to our strappy admin panel so that we can easily fetch it with the help of API. And
these are some information we
1:38:41
want to add for each of the product like title, description, pricing, the size.
1:38:46
Now over here uh the size is applicable to t-shirts, hoodies but not for a mug.
1:38:52
Okay. Or not for the backs or poster. So in that case we need to add the
1:38:57
different size component for for example for poster we want to add um 8 by 10 or
1:39:04
something like this. Right? So we have to add this. Then the long description image
the design area it means where uh
1:39:12
at which place u the design can be uh uploaded or can be put right. So that
1:39:19
design area that is currently I'm not going to add immediately but later on we can
add that one and then is feature.
1:39:26
Now this is a boolean. So if it's a true then it means this is a feature product
and we wanted to show on the home screen
1:39:34
and the for a poster uh and or for the t-shirt size right we need to create the
1:39:40
reusable components. So whenever we want we can add it to our um record. Okay. So
1:39:46
in order to create this component first we'll go back to this content manager and
inside this we'll create a
1:39:53
components give the component name here we'll say t-shirt size then select the
category name right
1:40:00
now we don't have category so we'll say size category and you can select the any u
icons over
1:40:08
here okay so there are different different icon I don't know which one to select
1:40:14
but let's select anything something like this or not sure and simply click
1:40:20
continue once to create this component we'll add the new field into that one for
example for the size
1:40:28
here I will say small medium large and except and this
1:40:35
is enu in enumeration field it means you can pick one from the list and simply
1:40:41
click finish once you done with this one click save and then it will restart your
1:40:47
strapping. Now your components is ready. Now let's add an product collection
1:40:53
type. So we'll click on this plus sign. We'll say product.
1:40:59
Then we'll say continue and then start adding in all the field which we want.
1:41:04
So here we'll say product title. Then the small description.
1:41:13
Then what else? We need the pricing. So pricing can be a number. So this will be
1:41:19
the number. Um it will be a decimal. It's not fixed. Okay. And then we'll say
1:41:29
add another. Then we want the long description image. Let's add image as
1:41:35
well. So here we say image or we say poster. not poster but
1:41:43
product image I will call it as you can have a option to add a multi multiple
1:41:48
media as well okay then we want to add
1:41:55
the is feature which is a boolean okay so this one is the is feature
1:42:03
after that we want to add a component and here you have dynamic component as well
so while editing you can pick the
1:42:09
one which you want. So I'll click on that one. Here we'll say size add a component
to the zone. We have the
1:42:16
existing component. We'll select that and make sure to select this t-shirt size
component. Okay, something like
1:42:22
this. And then click finish. I think that's all we have. Um okay, we left
1:42:30
with the long description. So we'll add another field.
1:42:35
I will keep this one but I will select this long text and we'll say long
description and say finish. Okay. So
1:42:43
these are the some fields we added for the products. Now simply save this one
1:42:50
and then I will test this out. So I will go to this content manager where we have
these
1:42:56
products right click on create new and give the title. Let's say you want to
1:43:01
add first product like uh red
1:43:07
or we'll say red cotton unisex
1:43:13
t-shirt. You can add some description.
1:43:20
So we'll paste the description. The pricing here will say $14.99
1:43:25
which is in the dollar. Uh we'll select the product image. So we'll add more
assets. Click browse files. Now I
1:43:32
already have some of the uh PNG images which uh I'm using. I will share this
1:43:39
all the assets with you so that you can access that. Uh click finish.
1:43:45
Obviously we don't want all. So we just want a red one. Okay. So I just uploaded
1:43:52
the red one. Then is feature we'll say true. Now here you have if you see we have
option to add a component size and
1:43:59
here we have this t-shirt size option. Okay. So obviously under that you have
1:44:04
option to select any of this. How cool right and then you can add the long
description as well. And after adding
1:44:11
the description simply click publish or save and then your product is now live. See
1:44:21
okay. So that's how guys you need to add the product with all this collection
1:44:26
type. So it will be easy for you. And now going forward you just need to create a
new entry. Okay.
1:44:36
I added few more products into our products uh list so that we can display
1:44:41
the feature products on the home screen and it's quite straightforward. So I will
go to the setting first into the
1:44:47
API tokens where we have this devo token and make sure you will uh provide an
1:44:53
access to this product list. Once you provide the access click save it and then
your API endpoint is ready. Now in
1:45:00
order to see this API endpoint just click on this setting gear icon and here you
will see this uh endpoint called /
1:45:08
products. Now we'll go back to our VS code. I will close all of this tab. And
1:45:15
then we want to create a new cate uh component called products. And here we
1:45:20
can rename this to um popular products.tsx.
1:45:28
Then add a default template and then save it. Make sure you'll add that onto
1:45:33
the home screen. So go to the page.tsx. Over here I will say popular products
1:45:39
and then save it. Now we'll go back to our application. Refresh the screen and
1:45:44
here you will see the component getting rendered called popular products. Now we
1:45:51
need to create an API endpoint called products. Inside that we'll create a
1:45:56
route tsx file. Let's create an API endpoint a sync function.
1:46:04
And here it will be a get request. Okay. So we'll say get request next request.
1:46:12
Inside this we need to get the uh or we
1:46:17
need to tell that okay we just need a popular product. Okay so for that one we
1:46:22
pass a popular uh query parameter. Okay. So in order to
1:46:28
get that query parameter, so here we say search params
1:46:34
is equal to
1:46:39
await request dot URL. But as this is the get request, so
1:46:46
basically we need to call something like new URL and then request dot URL.
1:46:57
So now we can say is popular is equal to search params dot
1:47:07
get and we'll we can pass a is popular
1:47:12
as a parameter. Okay. Now if is popular is equal to 1 for example
1:47:22
or maybe we can say it's a string right so we can get the request so we'll say
1:47:28
constant result is equal to await aios
1:47:34
then / products now here make sure it's aos client actually because that's what
1:47:40
we have then / products I will just verify at endpoint call products that is
1:47:47
correct and make sure we want to fetch all the
1:47:55
uh fields like images and components. So we'll pass populate is equal to stop.
1:48:00
Then once we get the return result we'll simply return the result. So we'll say
1:48:06
next sorry next response dot JSON we'll say
1:48:13
result dot data dot data okay so that's how you need to get the data over here
1:48:22
else uh right now I will just return or obviously we can return everything but
1:48:29
we don't really want it so we'll say next response dot JSON on with an empty
1:48:35
value. Okay. And then save it. So this is how you can make a get request to this
popular product only. Now let's
1:48:43
save this one and go to this popular products where we want to fetch it. So we'll
say constant get popular
1:48:53
products and the arrow function. Inside this we'll simply say constant result is
1:49:00
equal to await exos dot get
1:49:06
slash API/ products question mark is
1:49:12
popular is equal to we'll pass it one as a value. Okay. And then
1:49:18
we'll get the result. So inside the result we'll say result dot data
1:49:26
here. Make sure we'll pass it as a async and then save it. Now make sure to call
1:49:31
this method whenever the component get load. So inside the use effect
1:49:36
we'll simply call this method called get popular products and then save it. Now
1:49:43
let's head back to this uh home screen. So right now obviously we are using effect.
So we need to make
1:49:49
this particular component on the client side.
1:49:55
And if I go to the inspect panel, go to the console. Here we have the object. So
this are the
1:50:04
uh category one I think. And this is the popular product. See, and we received four
popular products. Now once you have
1:50:10
this product list, just head back to our VS code and make sure to save this product
list. So here we'll say products
1:50:19
list. We say product list comma set product list is equal to use state.
1:50:29
Now make sure you provide a type called product
1:50:35
and inside that we'll say title is of type string. Then the price
1:50:43
is of type number. I will just copy paste everything all
1:50:49
the product type now. So these are the type I added. Okay. And
1:50:55
then here I will say product and it's array list sorry object list.
1:51:01
So I write this empty object or the empty array and then over here we'll
1:51:07
simply say set product list with the result dot data. As simple as that and
1:51:12
then save it. Now let's add a H2 tag here. We will say
1:51:18
popular products.
1:51:23
We'll change this size
1:51:30
to 3 Excel. For this div, we'll give margin top to 10.
1:51:36
And then we'll add a div. Inside the div, we need to iterate this product list. So
we say product list dot
1:51:43
map product, index and the arrow function. Now you
1:51:51
can mention the product type as well over here and index is of type number.
1:51:57
Now instead of just displaying or returning the product list component code over
here, we can create a separate
1:52:03
component for it so that we can reuse it. So we'll say product card.tsx tsx
1:52:10
add a default template and then make sure to import this product card. Now
1:52:16
inside the product card make sure to accept some of the props. So I will define
that props.
1:52:22
So first prop is a product and which is of type product. Now make
1:52:29
sure if you want to use this product just export it so that we can easily use
1:52:35
it. Okay. And for now I think that's all we needed. So I will just accept this
1:52:41
product with this and we provide this type as a props. Okay, let's save this one
and
1:52:48
make sure you can pass this product over here as product and save it. Now go to the
1:52:55
product card and now first thing we want to display the image. So we'll say
1:53:00
source over here we'll say product dot uh product image dot URL
1:53:10
uh that's where the product image as a URL right so over here
1:53:18
I don't know how we can do this but we need to get the first image only in
1:53:25
order to display that then provide the all tag with the product name I will
provide. So
1:53:32
product.title I will say over here. Then the width you can mention 200 height 200
1:53:40
and then save it. Now if I go back to our application you will see this product
list. Beautiful right here you
1:53:47
can change this to 150 little bit bigger. Then we want to show a name of the
product. So we'll say product dot
1:53:56
title. over here we'll say font medium
1:54:01
text larger something like this okay now for this
1:54:08
div we'll add a class name we'll add a padding to five we'll add a border we'll
make it rounded to um let's say excel
1:54:16
and flex flex column item to be in the center and then save it so it will be in
1:54:22
the center of the screen see now we want this product list in the form of grid So
1:54:28
for this uh div inside the popular product give the class name make it grid
1:54:34
column 2 when the screen size is smaller first I think we have to mention it as a
1:54:39
grid then we'll say grid column 2 on the medium screen we'll say
1:54:45
grid column 3 and on larger screen we'll say grid
1:54:51
column 4. Oh, so over here we'll say medium
1:54:59
and then large and the last we need to give some gap. We'll say gap to five.
1:55:06
Now let's save this one. And this is how it looks like. See? Okay. Now we need to
1:55:11
mention the specific height to each of these. So inside the product card, we'll
1:55:17
defile a class name. We'll say height to 150 pixel, width to full.
1:55:24
And then you can even mention the aspect ratio that will be easy. So we'll say
1:55:29
aspect ratio to square. And then uh we'll say object content. Okay.
1:55:36
Something like this. See now everything in one line. How beautiful.
1:55:42
Um inside the popular products over here we give margin top to five. So some
1:55:48
space and to this one we provide the key as index. And here we have the popular
1:55:55
products. Now whenever we hover on these popular popular products similar like a
category
1:56:01
we want to show the hover effect. So over here we'll say a border to be primary and
then cursor pointer
1:56:13
and then save it here as well. Make sure to save that something like this. See,
Quick Fix
1:56:22
so here is a quick thing that we need to update into our products uh collection
1:56:27
under the strapping. So basically we already added this product but we need to
mention which product belong to which
1:56:33
category that is very important because when you click on any of this category we
want to populate all the products
1:56:39
come under that particular category. So let's head back to this strappy. I will go
to the
1:56:46
content type builder. Let's refresh it. Sometimes if you get error, make sure to
1:56:51
refresh. And under this product, we need to add one new uh field. So just click
1:56:58
on this add another field and click on this relation uh option. So what it will
1:57:04
do, it will connect your current collection with other collection as well. So
currently if you see we have
1:57:10
this category collection and we want to connect to this product. So and here you
1:57:15
will see that what is the relation type whether it's a one to one one to many or
1:57:21
something like that. Now obviously if I change this to category obviously we want
category so it will say product
1:57:28
has one category that is correct one or you can mention products belong to many
1:57:33
categories or category has many products. So that is also the option
1:57:38
that you can add. So one category has many products. Okay. Or you can add products
has and belong to many
1:57:45
categories. So I think this is the correct way that you can add it. And simply
click finish. Then save this one.
1:57:52
Now this relationship help us to add a category for each of the products. And let
me show you how it now actually
1:57:59
works. Then I will go back to this
1:58:04
collection type. Go to the products and you can now edit any of the product. Over
here you will see a new option
1:58:10
called category and you can just connect this category whether is a bags hoodies. I
don't know why that other category is
1:58:17
not showing. So here if I say create collection let me see that's weird
1:58:23
because under the category we have all of this category which is published. And
1:58:29
now if I go to the products sometimes I don't know why it's not refreshing.
1:58:35
Oh, it's if you see it's it's showing actually we have to scroll it now for these
particular products come under
1:58:41
under the t-shirt category. So added this t-shirt and then say publish.
1:58:47
Same thing you have to do for all other products as well. I will go to the other
1:58:53
products. I will connect this to that particular category. See and then say
1:58:58
publish. So make sure to add this category uh type or field into your
1:59:05
product collection. Also to this category we are going to
1:59:11
add one more field and which is call it as a slug. Okay. So I don't think there
1:59:19
is any field called slug but you can add a unique identifier something like this
1:59:26
and you can call it as a slug. Now attach field is a name. So you can attach to
this name and it uh you can
1:59:33
have option to uh add it as a slug. Now the slug is very important in order to
1:59:38
fetch the record and everything. Okay. But right now uh don't think too much. Just
add this field and later on you
1:59:45
will get to know. Now once you add this make sure to save this
1:59:50
and then I will go to this content manager. I will verify whether um that slug is
added or not. See? And here you
1:59:57
will see this refresh button. It automatically generate the slug for you. Now for
the t-shirt, if you see this slug is t-shirt something like this.
2:00:04
Okay. And then now on the click of any of the category
Product List By Category
2:00:11
we want to navigate to this category uh product list page where we are going to
show all the products under that
2:00:18
particular category. And this will be our route which is /category/
2:00:23
the product or category name. If it's a t-shirt then it t-shirt. If it's a hoodie
then it will be /category/hoodie
2:00:30
and then depends on this particular category name uh which is nothing but the slug
right which we added in the
2:00:36
previous chapter. From that one we are going to fetch all these products. So
2:00:42
let's go back to our application and inside this I'm going to let's close
2:00:49
this all tab for now and we are going to create a new route under this app. So
2:00:54
here I will add a routes folder and inside this routes folder we create a
2:00:59
new route called category. Now remember one thing
2:01:05
over here this particular category name change every time and you cannot create a
multiple route. This is not a visible
2:01:12
or the best way to do it. Obviously this need to be a dynamic right. It should be
2:01:17
a hoodie, it should be a tote bag or it should be a mug anything. So accordingly
2:01:22
we have to um dynamically pass the category route. So over here in order to
2:01:29
provide a dynamic route inside the neckj we have to add with this square square
braces and then give the here we'll say
2:01:37
category name or we can say category name something like this okay and enter
2:01:43
and then we'll say page dot tsx file let's add default template here we'll
2:01:49
say category products and then save it now in order to get
2:01:55
this particular category name you just need to write the name which is the category
name okay make sure it will
2:02:03
should match with this one and is equal to use params
2:02:08
now this use param is a react hook okay which will get the uh category
2:02:14
name which will get the category name okay now it's up to you whether you want to
use it on the client side or server
2:02:20
side if you are if you are going to create a different component so let's go to
this category folder Under this we'll
2:02:27
create a components folder and inside this component folder we'll create a category
2:02:35
or we'll say product list maybe that is a good way product list dot tsx file
2:02:42
let's add a default template over here and then we'll add the product list
2:02:48
something like this okay now inside the product list we can use this category
2:02:53
name make sure to use this use params I will remove this hook from here. So we
2:02:58
can keep this particular page on the server side and then this product list will be
on the client side. Something
2:03:04
like this. Right now I will just console this category name so that you can check
in uh in the console. So let's go back
2:03:11
to our application. Go to the inspect panel. Inside the
2:03:17
console, we clean this one and just navigate to let's say / category/ let's
2:03:24
say t-shirt and boom. If you see you jump to this
2:03:29
product list page and inside the console you will see the t-shirt adds a category
2:03:34
name. How cool right now here are the couple of things that we need to update. The
first is if you see this page, this
2:03:41
page don't have the header right now. We need to add the header and obviously
2:03:47
there are couple of way that you can do it. You can directly import the header
component inside the page.tsx. But
2:03:53
remember we need the header throughout the application. So the best way to do
2:03:58
it simply go to your page.tsx. I will remove this
2:04:03
header from here. Okay. And then inside the provider you can add that header or
2:04:09
let's go to the layout.tsx and here you can add it. It's up to you where you want
to add. Maybe we can
2:04:16
implement over here this particular header. Make sure to import this header
component. Save it. And boom. If you see
2:04:22
now we have this header. Now this header will be throughout the application. Okay.
Because we added to this provider
2:04:28
or root provider directly. Again the next part is uh we want to
2:04:35
display the category name. So I will go to our
2:04:40
product list page. Inside here we are already getting the category name
2:04:47
in H2 tag. We'll say category name.
2:04:54
I will make font bold text to Excel
2:05:00
and then save it. I think that's pretty small. Let's make it five Excel. Uh
2:05:06
inside our actual category, I will add a class name. We'll make font. Oh, sorry,
2:05:11
not font. We'll give margin top or margin Y to let's say 20. So, some
2:05:17
space. Perfect. Now, this t-shirt is in the small case. So, you can change this
2:05:24
one. Now to display the first letter as the capital right you just need to add this
2:05:30
category name as a car add to uppercase and then slice the first one so that
remaining will be appended to the first
2:05:38
character. If you're getting this error just ignore this. So we'll say ts ignore
2:05:44
sorry something like this and here make sure whenever the category name is there
then
2:05:50
only you will display this particular component. Now if I go back and see the
result. Perfect.
2:05:57
Um below this I will add an P tag and inside this we'll say
2:06:04
customize the premium.
2:06:11
Uh here we'll say category name for any.
2:06:20
Okay. So over here we can say customize the premium t-shirt for um
2:06:26
your occasion we can say. Okay. So you can write any message which you want.
2:06:32
Perfect. And here I will say class name text larger.
2:06:39
Now next thing that we wanted to show a product list. So here I will add a div.
2:06:44
Inside the due depends on this category name. We wanted to show a product list.
Obviously, we
2:06:52
first we need to fetch this product list. Okay. So, we'll create a constant
2:06:57
get product by category and then the arrow function.
2:07:05
Over here we'll create a constant result is equal to await aios.get.
2:07:12
And we already have the products as a API endpoint. But to this API endpoint
2:07:18
we'll pass a category with this category name. Okay. So this is very important as
2:07:24
we are using await. I will make this as a async. And then for now I will just
console the result to verify that we are
2:07:31
getting this result. Now this get product by category we need to call inside the
use effect
2:07:41
only once. Okay. Now let's go to the products API endpoint.
2:07:47
And here obviously we already have this is popular but we are not passing is
popular. We want to deal with the
2:07:54
category. So here we'll say a category and I will add a condition else if
2:08:02
category is or just we can say if uh category is
2:08:08
there right then we can simply add an API endpoint call to the strappy
2:08:16
so we'll say get so here we'll say products oh Sorry
2:08:26
question mark populate is equal to star but we only want to fetch the product
2:08:32
which belong to this category. So if you go to the strappy uh documentation I
2:08:37
will click I will put the link in the description here uh under the under this rest
API where you will find a filters.
2:08:45
This filter very important to fetch depends on your matching condition. So for
example if you want to fetch a
2:08:51
category with a slug name equal to. So if you see this is equal to case sensitive
not equal to and many other um
2:08:59
filter operator you will find on this trappby right now the best way or for us
2:09:05
the best way to use is an equal operator right so this one is the equal operator
2:09:10
and if you see our product has a category so if I go to this one
2:09:17
and under this category then we have this name category name Right.
2:09:25
So let me show you the actual result. So if I go to the homepage and on the
homepage we are already
2:09:32
fetching these products right and to this product if you see we have this category
and under the category depends
2:09:39
on the slug name we want to fetch the product. Okay. So the way that you need to
write is here we'll add and operator
2:09:48
we'll say filters then a category under that again we have
2:09:56
the slug and then dollar equal which is
2:10:01
the operator is equal to the slug name sorry the category name. So we use it as
2:10:08
a category something like this. Okay. And once you get the result, you can just
simply
2:10:14
return the result using this next response dot JSON.
2:10:19
If you get any error, we can catch that error and we'll check and we'll update our
uh logic over here. Okay. Now let's
2:10:27
go back to this product list. I will wrap this in a try catch block.
2:10:37
Also I will maintain one state called constant loading comma set loading is
2:10:43
equal to use state. Now initially it will be false
2:10:49
when you start loading. So we'll set the loading as a true once we get the data
2:10:54
we'll set the loading as a false and if there is any error then we'll set the
loading as a false and then you can even
2:11:01
show some error message or to message. Now once you save, we'll head back to
2:11:08
this. We'll go to the t-shirts. Uh I think we forgot to add uncclick
2:11:15
um uh method to each of this category. So what you need to do uh simply
2:11:22
we'll go to this component where we are showing this category and we have this link
currently we are adding just hash.
2:11:28
So you need to navigate using this category slash and a name of the category. So in
this case we'll say
2:11:34
category / slug because uh slug is the identifier for us. And make sure inside
2:11:42
this type you'll add this slug. Okay. And then save it.
2:11:48
Make sure to refresh this. Now if I go to the t-shirt if you see it jump to the
2:11:54
t-shirt. And right now um this get API throw an error. It's saying 404 not
2:12:00
found. It means the API endpoint is not exist. So
2:12:08
uh let me go to the product list. Okay. So this need to be an API/ API/ products.
2:12:15
Okay. And boom. If you see we got the two result and obviously we have the four
products inside our strappy. So if
2:12:21
I go to the products we have okay we have five products and only two products we
are is displaying on the screen.
2:12:28
That's because uh per for that particular category we only have two products and
that two product is
2:12:34
displaying along with the all the details. That's how you need to fetch u
2:12:39
the data from the stripey depends on your condition. Okay, I hope you understand
this one. Now once you have
2:12:45
this information let's save in a state. So we'll say constant
2:12:51
product list, set
2:12:56
product list is equal to use state. Here I will add a product
2:13:04
type and then once you add it simply set this set product list with the result
2:13:10
dot data. Okay. Now simply iterate this product list. So either you can use this
2:13:17
product I don't know whether we have the product list component.
2:13:25
So over here we already have the popular product list component.
2:13:30
So okay let's ignore that one and let's create our own. So we'll simply add
2:13:36
product list dot map. Here we say product
2:13:42
of type product and index of type number and then arrow function inside this I'm
2:13:51
going to use a product card because we already have to this product card you just
need to pass a product information
2:13:57
and then save it and boom if you see we got these two products because right now we
only have this two products over here
2:14:04
make sure to uh add this grid
2:14:09
depends on the condition. So we'll say grid column 2 three for the
2:14:16
medium. For large we'll say grid column four. Also give gap to five.
2:14:23
Perfect. And this is how it will look like. Okay. Uh you can leave some margin
2:14:29
top. So for this we'll say margin top to seven. Also inside this product card I
2:14:34
also want to add one more item which is the button. So I already commented this
code. Just add a button with the width
2:14:41
to be full. I give the margin top true two over here.
2:14:47
I will add something uh some icon actually. So I will just go to this
2:14:52
lucid here. Uh just search icon. So I will say pallet icon I want to use. So we'll
say
2:14:59
pallet for a customization and boom. So this is
2:15:05
how beautifully it look like. See obviously currently we only have two products. So
it might look you empty but
2:15:11
you can add more uh products so that it will be easy. You can add more details if
you want okay to this particular
2:15:18
card. So that's how guys you need to fade the record. Now another important thing
when you refresh the screen it
2:15:25
takes some time see to load it. So in the meantime what you can do you can show
some skeleton effect. So let's go
2:15:32
to this uh product list here. Uh don't forget to add a key as a index
2:15:38
and then I will add a condition if product list
2:15:43
I'm sorry if product list or this need to be a small product list dot length is
2:15:50
greater than zero then show this product list otherwise show the skeleton.
2:15:59
Okay. So for in order to show the skeleton I will add a dummy
2:16:04
um array something like this and inside that you can show the skeleton. Now in
2:16:11
order to add a skeleton simply go to the shad CN components and under this
2:16:17
component you will find a skeleton component this one. Okay. So, it's very
2:16:22
easy to use. Simply first make sure to install this particular component.
2:16:31
And once you install, you can see this example how to use it.
2:16:36
Okay. You can take an reference of the existing one. So, let's copy this one. Okay.
And I will simply paste it here.
2:16:46
Then I will also import this skeleton. Something like this. and then save it.
2:16:53
So over here we have error. It's saying possibly undefined. So go to the product
list and here I will add an empty array
2:17:00
something like this or maybe I think we need to add if product list
2:17:06
and and so it will not throw any error. Now if I go back to our application,
2:17:11
refresh the screen and if you see first it show this skeleton effect and then
2:17:17
once the data is available then it will show the actual result. So that's how you
need to add the skeleton when you
2:17:23
are fetching the data from the server.
Product Detail Screen
2:17:30
Now the next part is uh to view the product details. On the product detail
2:17:35
screen, we want to show all the details related to the product like product image,
its price, the product
2:17:41
description, the available size and option to customize it. On the click of
2:17:46
the customize, obviously user have option to upload the image and there are lot of
things and lot of feature that we
2:17:52
are going to add to that customize option. Then the product description and at the
last we're going to show the
2:17:58
popular product list. The component is already there. So we can reuse that one.
2:18:04
Now we have to make sure this particular uh route will be product / the product
2:18:12
ID. Okay. So obviously the product ID nothing but
2:18:18
the document ID or the ID which we have um inside the strappy. Okay. So it's
2:18:25
quite straightforward. So let's go back to our application. Let me close all of
this tab for now.
2:18:35
And very first thing that we want to do is to create a new route under the routes.
So make sure you are in the
2:18:42
routes folder. You selected the route folder. Inside that we will say product
2:18:48
and under the product we will create product
2:18:53
ID as this is the uh dynamic route. So make sure you'll
2:18:59
create this folder and then the page dot tsx file. Then add a default template
2:19:08
and here we'll say product detail screen or product detail and then save it.
2:19:15
Now as we are going to keep this component on the client side. Now we need to get
the product ID. So we'll say
2:19:22
product id is equal to use params. So from the
2:19:28
use params react hook we will we'll get the product ID what whichever product ID we
pass. So for just for the testing
2:19:35
purpose we will write this product ID something like this. We'll just console it
and then let's go to the product card
2:19:42
components. So we have this component called product card. Now to
2:19:48
this product card, we'll wrap this in a link or maybe for this button,
2:19:55
we'll wrap this in a link tag
2:20:02
and h reference.
2:20:07
Now make sure you will redirect this to a product
2:20:13
and then the document ID which is inside the product dot document ID. Okay. So
2:20:19
document ID is a unique identifier and from this document ID we can easily fetch
the product information to that
2:20:25
for that particular specific record. Now once you save it and then we'll go back to
our application. Let me refresh this
2:20:33
once and then simply click customize and once
2:20:39
to customize you will see this product now has this document ID which we pass.
2:20:45
Okay. And then we have the product detail screen. Just quick thing uh for
2:20:50
this link I will say wid to be full. So it will show the button with a full
2:20:57
width. Okay. Because we wrap it in a link tag. Now, now once on this you're on this
product link, you'll get this
2:21:04
document ID and from this document ID, you need to get a product information on
this particular page. So for that one
2:21:11
we'll go to the API under the products route and here we'll add one more
2:21:18
parameter called product ID is equal to search param dot get and then we'll get
2:21:26
this query parameter product ID. Now over here we'll write
2:21:31
else if condition and we'll say product ID. If product ID is there then we'll
2:21:38
get the information using exosclient dot get slash product
2:21:46
slash the product ID. Now in order to see how it actually work you can simply
2:21:51
go to this settings go to the API token inside your div and where you
2:22:00
have product. Now in this case you just need to find one or you want to fetch only
one record. So we have to pass the
2:22:06
products and then slash id which is nothing but the document ID. So that's the
reason I'm passing this product ID.
2:22:14
Okay. Once you pass simply we'll return next response dot JSON and inside the
2:22:23
JSON we'll have result dot data dot data. As simple as that.
2:22:29
Okay. and then save it. Now let's head back to this page.tsx and here we need
2:22:36
to get that product information. So we'll say get product by id
2:22:44
and the arrow function inside this we'll say constant result await exos dot get
2:22:51
then slash ai/ product products then we need to pass product ID
2:22:59
is equal to and then we already have this product ID which we are getting from this
use params that product ID you
2:23:07
need to pass let Make this as a sync
2:23:13
and then we'll console the result first
2:23:20
here. I will remove this console. Oops, sorry. And then make sure to call this
2:23:25
use effect whenever the product ID is there. So what I will do I will just pass
this
2:23:31
product ID. It means whenever the product ID is available then you execute the use
effect. And here we say if
2:23:38
product ID is there then only call this product get product by ID. Okay. Now
2:23:43
let's save this one. Go back to your application. As we are already have this
document ID. I will go to the inspect
2:23:50
panel. Go to the console and boom. If you see we have this product information.
2:23:56
How easy it is. Right now this product information don't have this images category
or anything. It means you need
2:24:04
to get the populate is equal to star. You need to pass this one. So what I will
2:24:10
do? I will add and operator with the populate is equal to star. And now
2:24:15
you'll get the information. Okay. So we have an error. That's where that's maybe
2:24:22
because we something. Okay. So this need to be a question mark
2:24:27
actually because this this the first query parameter that we are passing. And
2:24:32
now if you see we have the proper uh response.
2:24:38
Now as per this mockup you just need to divide this screen into two parts. So
2:24:45
over here I will add a one div and then another do. This do will contain an
2:24:52
image and then this do contain the info or detail. Okay. Now first let's display
2:25:00
the image because it's very straightforward. We are just showing the one image.
Sorry. So we'll add an image
2:25:05
tag. Bring this down
2:25:13
here. We'll pass. Oh, make sure you're importing from the next slice image. Then
the source. And then we have the
2:25:20
okay so I think we forgot to save it. So let's save this first. The product
information. So here we'll say product
2:25:26
comma set product is equal to use state.
2:25:31
The type is product obviously and then
2:25:39
close it. Over here we'll say set product with a result dot data
2:25:48
and let's define the loading state as well
2:25:56
and the initial value I'll pass it as false. When you are start fetching the
product information then we'll set the
2:26:04
loading as true and once it is finished
2:26:09
loading it will set the loading as false and then save it. Now over here we
2:26:16
already have this product information and we also set the product. So we'll get the
product dot product image dot
2:26:26
URL. Uh obviously here we need to get the first element actually and inside the
2:26:33
tag I will add a product dot title. So it's a product title.
2:26:42
Let's bring this down and then save it. So right now we have an error that this
2:26:47
particular product might be an undefined. So over here I will add an empty value or
we can even um ignore
2:26:57
this error or let me do one thing. Let me add a
2:27:02
condition. So what we can do we can add a skeleton effect. So here we'll say if
product is
2:27:09
there then only show this image otherwise we can show the skeleton.
2:27:17
Then inside the skeleton I will add a class name. We'll say width to full. Then
we'll say height to let's say 300
2:27:25
pixel and then save it. Now as we added this div okay one for the image and one
2:27:31
for the detail. We need to divide the screen into two parts. So we'll say grid
column one when the screen size is
2:27:37
smaller. Otherwise we'll say grid column two and we'll give cap to 10. For this
2:27:43
div, we'll add a flex item to be in the center and justify content in the center
2:27:48
of the screen. Now, make sure we will pass the width. Let's say 400 and height to
400. Let's
2:27:56
save this one and then we'll go back to our application over here. If I refresh
2:28:02
the screen, you will see the skeleton effect and then you have the product image.
2:28:08
Now, u let's give some margin. So we'll give margin Y to 20. So it will bring
2:28:13
down something like this. Now on the right hand side as I say that we need to add
the product information.
2:28:22
So over here we'll say H2 tag. Inside that we'll add a product dot title.
2:28:28
To this product title we'll add a font bold. Text is of
2:28:35
uh let's say 3XL. Then we want to add a description. Not
2:28:41
description, but we'll add a pricing. So, product dot pricing
2:28:49
font bold text again 3 Excel
2:28:56
and it is in the dollar. So, we'll say dollar.
2:29:05
And uh for this div we'll add a margin y not margin y but we can give a flex flex
2:29:13
column and gap to let's say three. So some space unevenly spaced. Okay. Um you
2:29:21
can also add a space y as well. Okay. Then we want to add description. So for that
one I will use p tag. Here we'll
2:29:28
say product dot description. Over here we'll say text
2:29:36
uh gray 500. Perfect. Okay. Obviously uh for each of
2:29:43
them you can even add a skeleton but we can add a skeleton later on. Okay.
2:29:48
After this we want to add a size. Now we don't have this size value but in the
2:29:54
first one if you see this underscore component uh from this one you can get
2:29:59
to know about the size and all
2:30:05
uh later on I because we we don't want to use this component so I'm going to uh
2:30:10
update that u particular field okay but for now what we can do we can add a div
2:30:17
inside that we'll add a size
2:30:23
here. Uh we'll keep as it is for now but we need to add some sizes. So here we'll
2:30:31
say small let me
2:30:36
add S2 tag or we can add a button simply inside
2:30:42
this div we'll add a button and here we will say small
2:30:50
and to this button let's add a class name as outline not class name but we need to
add a
2:30:56
variant as outline line. Okay.
2:31:02
And if I go over here, you will see this small something like this. Same thing
2:31:07
you have to add for medium, large, etc.
2:31:13
Medium, large
2:31:22
and excel. So these three types of variant we added. See for this due we'll add a
class name. We'll make it flex.
2:31:28
we'll give cap to three and for this H2 we'll say text larger.
2:31:37
Okay, perfect.
2:31:43
Now next thing after this we want to add button to add into the cart.
2:31:51
So we'll say button component. To this button component we want to add a
2:31:59
pallet icon and in that palette icon we'll say start design
2:32:05
or we'll say customize customize button.
2:32:11
Perfect. You can give the button with the size as large.
2:32:22
Also we are going to add one more button where uh you have option to add into the
cart.
2:32:28
So here we say add to cart
2:32:34
and then over here we'll say variant as outline.
2:32:41
Perfect. Okay, you don't need to add this palette actually just add to card button.
2:32:48
I think we forgot to save. Perfect. So that's how guys you need to add it. Now
2:32:54
for this particular image you can add some kind of outline not the border I
2:33:01
mean to say and then you can make border uh rounded
2:33:08
to 2XL. Let's see how it looks. I think this is much better. See it give us some uh
good
2:33:15
visual um UI. Right. Um, next at the bottom we want to add a product
2:33:21
description. So out of this div we'll add another div. Inside this we'll add a
2:33:27
p tag. Then we'll say product dot description. We'll say class name
2:33:34
text gray 500.
2:33:42
Actually we want that. Um so let's me wrap in parent div
2:33:50
and we want outside of this particular grid over here we'll add margin top to
2:33:56
10 and also I'm going to add x2 tag we'll say product description
2:34:09
it will here we say font bold text larger
2:34:14
Perfect. And the last thing that as I told you we want to show a product or
2:34:21
popular product you can say popular product component
2:34:27
which will show the popular product. See how cool it is right? So that's how you
2:34:33
need to add the information. Now after adding this product list uh
2:34:39
make sure for this right side you will add the skeleton effect. So what you can
2:34:45
do simply go to your page and to this page
2:34:53
you can wrap this complete or not this one but
2:34:58
let's wrap this complete div in another div
2:35:09
something like this and then you can add a condition If product is there then
2:35:15
show this product otherwise we have to show a skeleton effect. So I will add a
2:35:20
div for that one. Now first I will add a skeleton.
2:35:26
We'll say class name with full height to let's say 20
2:35:31
pixel. Then we'll add another skeleton.
2:35:36
We'll say height 50. And another one for a button or here
2:35:43
we'll say again 30. Here we'll say 50 and 50. Now over here we'll add a flex.
2:35:52
Not flex. Let's add a space Y to three.
2:35:59
Something like this. See now you will see this beautiful effect. So that's how you
need to add the loading skeleton
2:36:05
effect. So it will so you don't need to show a loading or indicator or dialogue uh
to show it. This skeleton effect will
2:36:12
help you to show user that the content is currently loading.
Custom Product Design Studio
2:36:20
Now when user click on the customize design right we want to change this particular
layout to a um product
2:36:28
customization studio where user have option to upload the image or to
2:36:34
generate the image with the help of AI remove the background upscale the image
2:36:39
and do the smart crop and everything can be possible with just one tool which is
2:36:46
this imagekit.io IO image kit provide you an image and video API to transfer
2:36:52
your image and video and optimize it perfectly with the help of just changing
2:36:58
in the URL. You can do a lot of different AI transformation with this image kit
image API. For example, if you
2:37:06
want to do the resize or smart cropping like this, just you have to change or
2:37:11
update the URL and within a second you it will transform into a smart crop.
2:37:17
Same thing you can even expand your image with the help of this generative field.
You can upscale your image or you
2:37:24
can even remove the background by just entering uh the small tag to the URL. How
easy it
2:37:34
is, right? So that's what we are going to use in order to transform all the AI
2:37:39
images or just a simple uploaded images so that you can easily update or
2:37:46
customize our product. So for that one let's go back to our application
2:37:53
I will and inside this product component we'll create underscore components
2:38:00
folder. Inside this we'll create image customize
2:38:07
studio.tsx instead of this one here we'll rename
2:38:12
this to product customize studio we'll add a default template and then save it.
2:38:18
Now when user click on the customize button right so over here then we have
2:38:24
to show that particular component. So for that one I will say constant
2:38:31
enable customize studio comma set enable
2:38:37
customize studio is equal to use state
2:38:42
and initially it will be false now it will be enabled on the click so here we have
this customize button I will add on
2:38:49
click method and simply we'll set this enable customize studio to true okay Now
2:38:57
if I go back to this particular page over here
2:39:04
maybe because we already have this image and skeleton. So over here we'll say
2:39:11
is or enable customize studio. If it's not there then show this particular image
2:39:19
otherwise you want to show this product customize
2:39:25
studio icon as simple as that okay and then save it let's test this out so
2:39:32
right now I will refresh this screen and click customize and boom if you see
2:39:38
this product customization studio component is getting rendered okay at the same
time we don't want to show this
2:39:44
customize button. Okay. So, basically we'll just hide this
2:39:52
button. We'll add a condition. If not,
2:39:57
enable customize studio and then save it.
2:40:05
If I customize, boom. If you see now, we only have add to cart button. And this
2:40:10
add to cutart button obviously want to change this uh variant to the normal
2:40:15
one. So over here as well we'll add a condition if en if not enable studio
2:40:21
then show outline otherwise show default one. Boom. Okay. So this is very
important.
2:40:28
Now let's go to the customiz studio. But before that make sure to pass a product
information.
2:40:34
So we'll say product as product. Then go to the customiz studio. Here define the
2:40:41
prop type. So here we will say props is equal to product as
2:40:50
product and then I will accept that as a product
2:40:59
and type is props. Now over here we need to define this
2:41:04
images similar like this one I'm going to show. So I will copy this image.
2:41:10
We'll display over here. I will import this image tag as well.
2:41:16
And then save it. Now let's go back. Click customize. And if you see this image is
still showing on the screen
2:41:22
over here. Now we want to add a div tag. And we want to add four different option.
One is to upload the image.
2:41:31
So over here um I will add a div. To this div we'll
2:41:37
add upload button icon. Below that I will say upload image
2:41:47
and let's see how it looks. Obviously for this one we'll add a border.
2:41:54
Uh let's convert this into a button and let's see how it looks. If I convert this
into a button
2:42:01
and obviously I will put a variant as outline
2:42:10
instead of this we'll make it flex flex column
2:42:15
and then we also need to provide a padding to five I don't think so this padding is
working
2:42:22
over here so basically let's convert this into a div so that will be Easy.
2:42:35
And here we'll make item to be in the center. Oh, sorry. Let's save this one.
2:42:41
Perfect. Uh uh over here I think we need to add a border as well. Make it rounded
2:42:48
large. And this is how our upload image is button section is ready. Same thing I'm
2:42:54
going to do from multiple times. First second we want to remove the background. So
we'll say bg remove.
2:43:03
Okay. So here I don't know which tag view we should show but we can show some
2:43:09
icon. Then another one is for
2:43:17
uh upscale.
2:43:24
Now for upscale we have this one this image upscale. So I will say image
2:43:32
upscale. And if you want you can also add smart
2:43:38
crop. For smart crop I'm going to use this one
2:43:44
the crop icon. And there are more option that you can easily add from the image
kit. So you
2:43:52
can just go to the image kit uh you you can click the link in the description in
the documentation you will find uh the
2:44:00
all this image transformation kit okay you can easily use this image transformation
and in the documentation
2:44:07
you will find all the details obviously once we start implementing each feature
you'll get to know much better right now
2:44:13
this is how it looks on the screen so for this div I will add a flex gap to
2:44:18
five And this is how it looks. And that's how you want it actually. Uh give then
we'll
2:44:26
give margin Y to five. So some space. Perfect.
2:44:32
And you can bring everything in the center of the screen.
2:44:41
Perfect. And uh whenever you hover on any of these option, you can simply want
2:44:46
to show some kind of uh select selection. So what you can do uh
2:44:54
you can select something like this say all at a time. If you are using Windows
press alt if you are using an MacBook
2:45:02
make sure to select option and then select each section so that you can edit all at
once. So on hover you can add
2:45:11
border primary also I will make cursor pointer
2:45:17
see something like this. Also I'm going to add background blue
2:45:24
50 only when user hover on it.
2:45:29
Something like this. See that's look much better.
2:45:36
Now it's time to add a canvas to our product so that you can easily upload the
image, scale it, resize it, drag and
2:45:44
drop at different different places. Everything can be possible also with the
2:45:49
help of image kit. You can easily add some AI transformation to your image
2:45:54
like background remove, upscale the image to improve your quality of the image or
even do the smart cropping. And
2:46:01
there are other AI image transformation which you can add with the help of image
2:46:06
kit. In order to add a canvas to our application, we are going to use a
2:46:11
fabric JS. FabricJS is a open-source Canva provide canvas library which you
2:46:17
can easily add it to your react application. If you want to know the detailed
tutorial of the fabric JS along
2:46:24
with the image kit, you can see the link in the description or you can just simply
go to my channel and search for
2:46:31
the Canva tutorial. It's a fullstack application which we build completely from the
scratch. Now just go to the
2:46:39
fabric JS and obviously there are big documentation here. You don't need to go in
detail but just for the uh example go
2:46:47
go to the core concept and here you will find the basic object which you can easily
add to your Canva. Okay. But now
2:46:55
in order to add a CADA just type npm I fabric you will jump onto this fabric j
2:47:00
npm package and that's where we need to get started. First thing first, we need to
import or install this npm fabric. So
2:47:08
I will go to the terminal inside our VS code project.
2:47:15
Simply install this fabric. Once it is installed, let me close all of this tab
2:47:21
for now. And then go to your product customiz studio. That's where we are
2:47:27
defining our product. Right? This is our image. Now over here we need to define a
2:47:34
canvas reference. So we'll define a canvas reference is equal to use
2:47:39
reference and uh I will put a type any and initially it will be null. Now make sure
2:47:47
you are using the use reference. So I will make this component on the client side.
2:47:53
Now we have to add a canvas on the top of this image. So I will simply wrap
2:47:59
this div sorry wrap this image inside the div tag and then over here I will
2:48:05
simply define a canvas. Now this is simple canvas. This is the
2:48:11
HTML canvas that we added. Now to this canvas let's provide an ID. So we'll say
2:48:17
canvas. Then the reference that we just defined which is canvas reference. And
2:48:22
then you can even provide a class name that we'll provide in a moment. Now once we
define this canvas I will also define
2:48:29
a canvas instance comma set canvas instance
2:48:38
is equal to use state. Now again uh I will put the type any
2:48:45
over here and after this let's put empty value as a null. Now inside the use
2:48:51
effect we need to initialize our canvas. So I'll added the I added this use effect.
Here we'll check if
2:48:57
canvas.reference.curren is uh defined means if canvas do.curren
2:49:04
is mounted on a uh front end side then simply we'll say constant init canvas
2:49:12
because we want to initialize here we'll say new canvas and make sure you are
2:49:17
importing this canvas from the fabric. Okay. Once you add this, we'll say
2:49:22
canvas reference dot current. Actually, we are assigning our canvas reference to
2:49:28
this particular fabric js. Okay. So, whatever the fabric js property available to
the canvas, it will
2:49:34
applicable. Then we'll provide a width let's say 200. Then the height of this
canvas, let's
2:49:41
say 200 again. And the background color for now I will give a white color. Okay.
2:49:47
Later on we want to change it to a transparent but for the testing purpose we need
to know whether the canvas is
2:49:53
actually rendering or not. Over here we'll say init canvas dot render all
2:50:00
and because we want to render that canvas and also make sure to set the instance of
the canvas. So here we'll
2:50:06
set this initial canvas so that you can use use it throughout the component.
2:50:12
Once you set this canvas, once um you want to uh dispose this, you can even
2:50:18
dispose this canvas using init canvas dot dispose.
2:50:23
Okay. And then save it over here. I will add black color instead of white. Now
let's
2:50:30
go back to our application. Let's refresh this screen.
2:50:39
Now here we will say customize and boom if you see we have this canvas showing
2:50:44
on the screen. Obviously it's coming below this image but we want to put it
2:50:50
on the top of this particular image. So simply I will go to this canvas and
2:50:55
we'll say absolute then you can mention top zero left to zero and then okay not
2:51:05
uh actually we say top to um let's say top zero left zero only and give the j
2:51:12
index to 10. This is very important. Okay now once you add you have to refresh it
because canvas cannot um
2:51:18
reload automatically. So it's still showing at the bottom.
2:51:25
Then to this particular div we can set the some specific height and width as
2:51:32
well. And then if I go back say customize. Let me refresh this once.
2:51:39
So still showing at the bottom. Let me put this at the top.
2:51:45
Okay. And then we'll say customize. And if you see it's coming on the top of this
particular image. Now simply
2:51:52
provide some uh top to 20. Okay. And here we have this canvas. Beautiful.
2:51:59
Right. Now obviously you have option to change this canvas size. So over here
2:52:04
we'll add 180. Here as well we'll say 180. And then just refresh this.
2:52:11
And then you if you click customize then you have beautiful option. Now our canvas
is ready. Okay. So that's how you
2:52:18
have to define this canvas. Now another important thing obviously we don't want
2:52:24
the background color over here. Right? So you can simply mention as a transparent.
So here we'll say
2:52:30
transparent. So so
2:52:37
on transparent you will not see anything but canvas is here. But in order to
display uh some kind of border we can
2:52:45
add some kind of border to it. So we'll say border rounded to 2 XL and I will say
border dashed
2:52:53
say something like this. So obviously you'll get to know okay this is the area
where you can um add your custom image.
2:53:00
Okay. Now the next thing obviously once user say customize right we want to add
some default image where user can play
2:53:08
around and then user have option to upload their own image as well. So to do that
simply I'm going to create a new
2:53:15
method called constant upload default image. I will say add
2:53:23
default image to canvas and the arrow function to this one we
2:53:28
say constant canvas image reference is equal to await fabric
2:53:35
image. Now fabric provide a fabric image as a method and through which you can
2:53:41
add your own image. Okay. Now to inside this from URL you have to just provide
2:53:46
your own. Now I already added one image to the uh
2:53:54
image kit. Okay. So this is the logo that I'm going to use as a default image. So
just copy that URL. Simply
2:54:01
paste it here. Okay. And here I will make this as a async. Save this one. And
2:54:06
once you add this canvas image reference, you have to make sure you will add it to
the canvas. So over here
2:54:13
we'll say canvas or we'll say canvas instance because
2:54:18
that's what we gave right dot add and inside this we'll say canvas reference
2:54:25
and then you have to render this new canvas. So we'll say canvas instance dot
render all.
2:54:33
Now this particular method we need to call once the canvas instance is ready.
2:54:38
So we'll say use effect. This use effect will get execute whenever the canvas
instance is ready.
2:54:45
And here we'll say if canvas instance is ready then call this add default image
2:54:51
to canvas. Now let's save this one. We'll go back to our application again and then
refresh the screen. And then if
2:54:58
I say customize, boom. If you see we have this beautiful image.
2:55:06
Now obviously this image is quite bigger right and we need to scale it. So
2:55:13
over here I will just say before this add we need to scale this
2:55:18
image. So we'll say canvas reference dot uh scale tox we'll say 0.1
2:55:26
and same thing canvas image reference dots scale y to 0.1 and then save it. Now
let's
2:55:35
refresh it again. Customize it and boom. If you see now obviously you have option
2:55:41
to increase the size, change the layout and everything. See, so that's how
2:55:48
easily you can play around it. But obviously if you try to go beyond this canvas,
it will not allow me and it will
2:55:55
cut the uh cut the image. Okay. So you have to make sure user you have to make
2:56:00
sure that user will only add this canva uh the image inside this particular uh
2:56:08
canvas border. Okay. So this is the first step that you are able to successfully um
add this particular
2:56:17
uh default image to your canvas.
Upload Custom Image
2:56:24
Now let's understand how to upload your own image on this canvas so that you can
2:56:30
do a custom print. So very first thing when user click on this upload image we want
to open a file explorer where user
2:56:36
can select an any image from his local machine and then we need to upload it to
2:56:42
the image kit. Now it is very important to upload to the image kit because we want
to add some AI transformation like
2:56:49
remove the background upscale the image adding the smart crop and many others
2:56:54
and that's the reason we need to have this uploaded image on the image kit and
2:57:00
once we have this image kit uh image is uploaded to image kit then you can add all
the transformation but obviously as
2:57:07
soon as the image is added to the image kit then we can display that image on
2:57:12
this particular er canvas as simple as it. Okay. So, first thing first uh we
2:57:18
need to install this image kit. Now, simply go to the link in the description and
you will jump onto this image kit uh
2:57:25
npm package. Then go to your VS code and inside the terminal I will install
2:57:32
this image kit. Once the image kit is installed, you need to set up this image
2:57:39
kit. Okay. So, if you see this is how you need to set up. you need to add public,
private and URL endpoint. So I
2:57:45
will copy this example as it is. Then I will go to the lips folder.
2:57:52
Inside this li folder we'll create an image kit
2:57:57
client dot or image kit
2:58:02
dot image kit instance I will say ts over here. Make sure to add it. I will
2:58:09
say export constant image kit. Make sure to import this image kit and then you
2:58:15
need to add the public key and the private key. So inside your env file I
2:58:22
will create next or maybe we can just add um image
2:58:28
kit private key is equal to then image kit
2:58:35
public key is equal to and then image kit
2:58:41
URL endpoint is equal to. So this key three uh things
2:58:47
we need to add it. So simply go to the image key dashboard. On the dashboard if you
scroll down you will find this
2:58:53
developer option. Click on it and here we have the URL endpoint, public key and
2:58:58
the private key. So copy one by one.
2:59:04
Then we want a public key. So we'll copy this public key as well.
2:59:09
And then we want private key. So make sure to enter password so that it will be
visible and you can use it.
2:59:16
Perfect. So once you add that uh it's ready to use and inside the image kit
2:59:22
you'll find all of the all all the different different uh methods for a
2:59:28
transformation image upload and many others. Now for the image upload if you see we
have this file upload u document
2:59:35
inside the documentation just you have to call this imagekit.upload upload then
2:59:40
you have to pass the file for whichever file you are selected and then some
2:59:46
extra properties. Okay. So before that let's go back. Let's save this one. Save
2:59:51
this instance so that you can use it. But make sure we'll add this process env
2:59:56
dot first is a public key.
3:00:04
Then process envir key
3:00:10
and then last endpoint
3:00:22
and then save it. Now inside the product customiz studio when user click on this
3:00:28
upload image we want to make sure to select that particular uh or we want to
3:00:33
open the file explorer right so here I will add a input of type file okay now
3:00:40
for this one I will provide an ID and we can call it as a upload image
3:00:47
and then save it now if I go back you will see this choose file option where if I
select or click on this it will
3:00:54
it's opening the file explorer but we want to open this file explorer on the
3:01:00
click of this upload image. So what you need to do you need to wrap this div
3:01:05
inside a label to this label add HTML for and then you
3:01:12
need to pass this id okay once you add this now if I click on this upload image
3:01:19
still it opens now how cool it is right but we have to make sure we don't want
3:01:24
this choose file so I will add a class name and I will just simply hide this
3:01:29
see now if I click on Upload image. You can easily upload any image which you
3:01:34
want. Now as soon as you upload the image, we have to make sure you uh you'll
upload
3:01:41
that image to the image kit. So over here I will say constant on
3:01:50
handle image upload. Now obviously for this one we want to
3:01:56
pass an event. the event type we need to mention which
3:02:02
is react dot change event I'm sorry dot change event
3:02:08
and here we'll say HTML input element something like this
3:02:16
and then once we have that first thing uh we need to get
3:02:23
file then upload to image kit and then
3:02:30
um show to canvas. So in order to get the file first we'll
3:02:35
say constant file is equal to e dot sorry event.target
3:02:41
dot files and obviously we need to get a first element. So we'll say zero element
3:02:47
and then save it. Once you have this um file you can just
3:02:54
use it to upload it. So we'll say constant upload image reference is equal to await
3:03:05
image kit. Now this image kit make sure is importing from this image kit instance
dot
3:03:12
or here we need to say image kit only. Yep that's correct.
3:03:19
Dot upload and inside this upload you need to provide the file. Now for the
3:03:25
file we already have this file that file we need to add. Um for the file name you
3:03:30
can add file dot name then is publish say true and sorry
3:03:43
and here we'll say use unique file name to false. Okay it's not necessary it's
3:03:49
completely optional. Here I will make this as a async. Now we have an URL.
3:03:54
It's saying the file might be an undefined. So we can add a condition if file is
there then only execute this.
3:04:04
Okay. So and then here we'll get the console.log
3:04:13
upload image reference dot URL. So over here I will just ignore this error and
3:04:20
make sure this onh handle image upload you will attach to this particular input. So
over here we say on change and
3:04:28
then call this on handle image upload. Now obviously currently we are just
3:04:33
consoling the result. Okay. So we are not doing anything but we have to make sure
our image getting uploaded. So now
3:04:40
I will go to this upload image. I will select uh this image. Click open. Now go
3:04:46
to the inspect panel. We'll go to the console and boom. If I open this image, you
will see this image is getting
3:04:53
uploaded. And that is our URL. Beautiful. Right now once the image is
3:04:58
uploaded, now it's time to show it on the canvas. So in order to show on the
3:05:05
canvas we just need to say if I will say
3:05:11
constant uploaded image URL is equal to and this
3:05:18
URL
3:05:24
and here I will just ignore this one. We don't want this console anymore. Okay,
3:05:31
then we'll add a condition. If uploaded image URL is present,
3:05:39
then we'll say constant canvas image reference is equal to await
3:05:47
fabric image because we already use same way that we have to use and then we have
to
3:05:53
pass this particular upload image URL. Once you pass uh I will just set same
3:06:02
property or you can simply even call this method
3:06:07
that will be easy actually okay so or let's set this everything
3:06:15
again that's also fine it's not big deal and then save it now let's try this out
3:06:21
so I will upload this mug and I don't think so anything happen.
3:06:28
Let me refresh and try this out. But make sure everything is correct. I will
3:06:35
just console this upload image URL. Okay. And then save
3:06:43
this one. So now refresh the screen. Go to the
3:06:48
customize. Select upload image. We'll upload this mug. Click open. And boom.
3:06:53
If you see we have this beautiful image uploaded and now you can easily drag
3:06:59
drop anywhere which wherever you want. How easy it is right? So that's how you
3:07:05
have to do it. Now make sure you'll delete this particular one. Okay. Now we need
to make sure that only one image
3:07:11
user can upload at a time. So to do this you have to make sure when
3:07:18
you upload the image we'll say canvas
3:07:23
uh instance dot clear and then we'll say canvas instance dot render all.
3:07:32
So basically we made sure that canvas will be empty and then only new images
3:07:38
will get uploaded and old image will automatically get deleted. Now if I try to
upload something different.
3:07:45
Let's upload this image. Click upload and boom. Now here we have this image
3:07:51
uploaded. Cool, right? So that's how easy it is guys. Um make sure your image
3:07:57
is uploaded to the image kit. Then only you can add all of this AI transformation.
ImageKit AI Transformation
3:08:05
Now it's time to add an AI transformation with the help of image kit to our each of
the custom uploaded
3:08:12
image in that one. As you already know, we already have this background removal,
upscale, smart crop, shadow and you can
3:08:19
add many more. Now let's understand how it actually works.
3:08:26
Now we already uploading the image to the uh image kit cloud, right? So we
3:08:32
have this URL called imagekit.io and then your um path of that particular
3:08:38
image. It's a complete URL. If I open this URL, you'll see this image
3:08:45
and then we need to pass the transformation over here. If you see over here, we
have different different
3:08:51
transformation which we pass and each of will give you the different result. Now
click the link in the description for
3:08:57
the image grid documentation where you will directly jump onto this AI
transformation doc and it explain each
3:09:03
detail. Now inside this AI transformation you will see that if you want to remove
the background this is
3:09:09
how the TR is equal to and then the uh tag to remove that particular background
3:09:15
and here you will find all the details how much each of these transformation will
cost in the form of credits. So
3:09:22
most of them are free. Some of them have small charges and it's very very easy to
3:09:27
do it. Also if you want to do the background removal how to do it and there are all
the example you will find
3:09:33
on this particular documentation. But let's go back to our eraser doc and let me
explain you one by one. Let's
3:09:39
consider this particular path is your actual image. Right now you want
3:09:45
to remove the background of this image. So you will pass and tr stand for the
3:09:50
transform. Okay. Is equal to E bg remove. It means E background remove.
3:09:56
And then it will give you the result like this immediately. How cool, right? Then
if you want to upscale the image,
3:10:03
want to uh improve the quality of the image then you have to provide comma e
3:10:08
upscale. Now along with the background remove, it will also upscale your image. And
then if you want to add some shadow,
3:10:15
then you can add again e dot dash shadow. Okay? And so along with that you
3:10:21
can add the shadow as well. Not only that but if you don't want to remove
background and then just want to upscale
3:10:28
it, you can just pass e upscale as a uh query parameter to this particular
3:10:34
transform and then you will get the result as expected. Okay. Now let's quickly uh
check this example. So what I
3:10:42
will do? I will remove the background. Okay. So I will copy this background.
Remove. This is our image. I will paste
3:10:48
this image and then click enter and boom if you see
3:10:54
it immediately removed the background for us. Not only that but if you want to
3:10:59
add a shadow to it. So which is that E dash shadow. So I'll add
3:11:06
E dash shadow and then it will add shadow
3:11:13
and here is the result that added the shadow to our background remove. Okay,
3:11:18
as simple as that and that's what we are going to add it to our application. No any
complicated logic just with the help
3:11:25
of image kit it's very straightforward to add an AI transformation to your images.
3:11:31
Now um currently we are displaying this each of these option one by one but we
3:11:37
are going to move this to as a list okay and then we are going to iterate it over
3:11:42
here. So I'm going to define constant
3:11:48
AI transform options
3:11:54
and inside this we'll say name big bg remove
3:12:01
then I'll provide the icon the same icon that I wanted to add over here so which
3:12:07
is this um image off.
3:12:16
Then we want to add an image key transform is equal to sorry
3:12:23
colon and then which tan for this particular transform. So which is eg
3:12:29
sorry e-b remove. Let me directly add it over here. So e
3:12:36
bg remove. Okay. And that's how you need to add it.
3:12:43
And same thing you have to do it for all other option. So I will copy paste I will
pause the video and I will update
3:12:48
it. Now once you add this simply I will remove this all of this option from here
3:12:57
and then we are going to iterate it. So basically let's add a div. Oops sorry.
3:13:07
And inside this we'll simply say even though we don't need this div and
3:13:14
then we'll say AI transformation option dot map item comma index and the arrow
3:13:23
function inside this. This is how we wanted to show. So I will add that um
3:13:28
for this div we'll add a key as a index. Now instead of this um icon I will
3:13:34
provide item dot icon whichever icon we have and then inside the heading tag I'm
3:13:41
going to simply display item dot name. Okay now we don't need this option
3:13:46
because now we are iterating right and then save it. Now if I go back to our
application you will you will not
3:13:53
see any changes but just you will see this option. Okay just we are replaced
3:13:58
with that dynamic values. Now whenever user
3:14:03
click on any of this option right we have to make sure that particular
transformation is applied to this
3:14:09
particular image or whatever the uploaded image right. So for that one
3:14:17
we'll create a new method called constant on apply
3:14:24
transformation we'll say AI transformation
3:14:35
and over here we'll get an item value or transformation value
3:14:42
Right now I'll put a type any and first thing we need to check whether
3:14:48
this particular uh this transformation is attached or
3:14:54
not okay and TR so that need to be very important so uh we have this URL so
uploaded image
3:15:01
URL so I don't know whether it is so what we need to do whatever the
3:15:06
uploaded image URL we have we need to save in one Set
3:15:13
uploaded image URL or just we say uploaded image set uploaded image is
3:15:22
equal to use state which is of type string
3:15:28
and if uploaded image URL is there we set the uploaded image URL with this uploaded
image URL
3:15:35
and obviously make sure I think that's all we need it for now.
3:15:41
And here we will say if so over here we'll say uploaded image
3:15:49
dot includes and tr sorry tr okay which is stand for
3:15:56
transformation. So this one right then
3:16:02
we simply need to add that particular transformation and here as well I will
3:16:09
say one more parameter called add okay and which is of type boolean so
3:16:16
what it will do it will say whether you want to add or not okay you'll get to know
later on but for now here we say
3:16:24
and and add a cell. Oh, so if it's add right, then only we need to append the
3:16:32
new transformation. So we'll say uploaded or we can say constant new URL is equal
3:16:40
to uploaded image plus
3:16:46
and that transformation. So whatever the transformation we have that transformation
you need to attach. Okay.
3:16:53
And you can give comma at the last and this new URL you need to update now.
3:16:59
So so we'll say set uploaded image with this uploaded or a new URL
3:17:07
something like this. Okay. Else
3:17:12
now in the else condition if this tr is equal is not there. Okay. Then again I
3:17:17
will do the same thing. But in this case first I need to append that and tr is
equal to
3:17:27
and then this transformation. Okay. And then save it. Now this part
3:17:34
now after this we need to call this method called on apply AI
3:17:41
transformation. In that one we need to pass a transformation which is item dot
image kit transformation
3:17:48
and whether this transformation is already applied or not. And for that one we
create a method to verify or to check
3:17:56
whether is um transformation
3:18:02
applied. Okay. Now this method will take an item or we can say transformation
3:18:12
and it will just return true and false. So over here we say if uploaded image dot
includes
3:18:19
transformation then it will return true otherwise it
3:18:27
will return false. And this method we need to call over here. over here will
3:18:33
also pass the transformation. Okay. So it will return true false and depends on
3:18:38
that one it will pass that particular value. Now over here make sure I think we
made some mistake. We need to
3:18:47
move this uploaded image on this. Now once the URL is updated
3:18:54
right we have to make sure it will also added to the Canva right. So we already
have this method called
3:19:01
uh add default image to canvas. We can reuse this method. Okay. So what we can do
uh I added this new image URL. Okay.
3:19:08
For a testing purpose. So what I will do I will just cut it from here. I will add
it at the top. We'll say
3:19:16
default image.
3:19:21
And as a default image I will also pass it to this uploaded image. Something
3:19:27
like this. Okay. Then over here uh I'll pass it as uploaded
3:19:34
image only. Now whenever the uploaded image change, right, we'll call this method
add default image to canvas.
3:19:42
Right? Now if I save this one and refresh this screen and we'll verify is
everything working
3:19:48
as expected. See perfect. Right now I will use this particular image to see
3:19:55
how it works. So I will copy this image uh for the transformation purpose because
this image has a background and
3:20:02
so that we can remove the background right and if I go over here refresh this
3:20:07
screen again customize it and now we have this particular image. Beautiful.
3:20:12
Now along with that one we also need to make sure that
3:20:18
over here we need to add a dynamic condition. So I
3:20:23
will wrap this with this tag
3:20:29
and we can write a condition if inside the dollar we'll say if uploaded image
3:20:36
dot includes item
3:20:41
dot image get transform. If that is a true then we can add a border
3:20:50
primary. Okay. Otherwise, none. As simple as that. And uh
3:20:59
what else we need to do? When the transformation is false, it means in
3:21:04
this particular method when it's false, right? So that time
3:21:11
uh I think here we need to add else if add
3:21:18
basically uh I will undo everything and we'll add this condition
3:21:24
above. If it's add then execute this else if it's remove then we we just need
3:21:32
to remove that particular string. Okay. So we'll just replace uh that particular
string. So I will
3:21:38
copy this over here. And instead of this one, we'll say replace
3:21:45
that transformation. Oops, sorry. Yeah, I think that's correct. The transformation
with an
3:21:51
empty string. Okay. And then we have uploaded image URL. So because we don't want
that particular transformation. So
3:21:57
that simply remove that. Perfect. And if I refresh the screen, let's take this
3:22:03
out. So if I remove the Okay, let's increase this size. If I click on this
background
3:22:08
remove. So nothing is happening right now. We'll go to the inspect panel. We'll
check is
3:22:14
there any issue. It's weird. It's not happening anything.
3:22:24
Well, that's because um inside this AI transformation applied, we are passing it as
a true, but we have to pass it uh
3:22:30
the diff the opposite one. So we'll say if that is include pass it as a false
3:22:36
otherwise pass as a true. Okay. And then save it. So also we have to make sure on
3:22:44
when you update this transformation right you will remove you have to remove the
old one.
3:22:50
So over here we already have this old one. So so I just make sure to remove
3:22:55
that first if there is anything. Okay. And let me refresh this. Now
3:23:01
we'll say customize. Now if I increase this size, we'll say background
3:23:06
remove. Boom. If you see it's removed this background. How cool, right? Now
3:23:12
same thing. If you want to add a drop shadow, you can even add that drop shadow as
well. And now here is the drop
3:23:19
shadow. Okay. So that's how easily you can change it. If I remove, if you want
3:23:25
to remove background remove, you can just remove that. You can apply again. You can
even upscale that particular
3:23:31
image. Now upscale will give you the better quality. Okay. And then you can even
add
3:23:38
a shadow to that. See how easy it is. And within a just click
3:23:44
you can even update your image instantly.
Add to Cart
3:23:52
Now when user click on add to cart after designing the uh his product then we
3:23:59
want to save this cart information to the database as well. Obviously on the
3:24:05
click of this cart icon we're going to redirect user to the checkout or cart page
where he can see all the details.
3:24:12
But before that we have to make sure on the click of add to cart we want it to show
the number of item in the cart and
3:24:19
then we want to uh save that to our database. So go to the strappy and
3:24:24
inside the strappy we need to create a new uh collection type called cart.
3:24:33
Inside this we need to add some field. So
3:24:38
here we'll add one email for the user email. Okay, who added this one? Then we
3:24:44
want to connect this to a product. So over here I will select the product and
3:24:49
then we can say the card belong to many products or product has many cards.
3:24:54
Let's add this card has belong to many products. We can say card has many products.
I
3:25:00
think this is also good. Uh I'm a little bit confused which relationship which
3:25:05
should we use or if you're confused you can select
3:25:10
this one. So it doesn't matter. Then here you can add a new text for
3:25:18
design and we'll say finish.
3:25:23
And for now I think that's all we needed and simply we are going to save this.
3:25:29
Now inside this card collection we are just adding a card. Um whatever the item
user added to the card depends on the
3:25:37
user email. Now simply we have to make sure this
3:25:42
card API is enabled. So we'll go to this API token and then for a card I will
3:25:48
select this all and then save it. Now in order to create a new record if you see we
have this create and this is the API
3:25:55
request called /carts. Now let's go back to our application. Let me close all of
3:26:00
this tab and then inside uh on the click of add
3:26:06
to cart. So over here we have this add to cart button.
3:26:15
On the click of this add to cart we need to make an API call. So over here we'll
create on click
3:26:22
and then we'll say add to cart.
3:26:27
Now let's define this method
3:26:33
add to cart something like this and then save it. Now before uh making or writing
3:26:38
an API call for this one, we have to make sure
3:26:44
sorry uh whenever you add item to the cart it will update the number over
3:26:51
here. Okay. So for that one in order to maintain that we need to uh use a
3:26:56
context. So simply we are going to create a context
3:27:02
inside this context folder and we'll call it as a card context dot tsx file.
3:27:10
Let's add a default template and then save it. Okay. Now okay. So
3:27:17
it's not default template here. This is a context. So we need to write export
constant
3:27:24
cart context is equal to create context
3:27:33
and null. Now make sure this create context you're importing from the react. Okay.
And then save it. Now under this
3:27:41
provider.tsx make sure to wrap your application under this card context.provider.
3:27:47
provider
3:27:54
something like this and then you need to provide a default value to this one. So
3:27:59
I will define a constant default value oh sorry uh card
3:28:06
set card is equal to use state. Okay now
3:28:11
obviously for this card we need to define a type as well. Okay. And whenever you
load this particular page,
3:28:18
we need to make sure that you will make an API call to this card API to get the
3:28:24
data if there is any item inside this cart. Okay, that is important.
3:28:29
So this is the API endpoint for that one. So what we will do over here, we'll say u
get cart list. Okay. Uh before
3:28:38
that obviously we need to mention the API endpoint for this one. So we'll create a
card. Inside this we'll create
3:28:46
a route.tsx file. Let's add export
3:28:51
a sync function get request
3:29:00
here. Next request. And then we'll simply add a try catch
3:29:05
block. In cach block we'll say next response
3:29:11
dot JSON with an error. If inside the try we need to write constant result is equal
to await axios
3:29:20
client.get/card. So okay it's a cards with s. Okay. And
3:29:28
uh obviously we want to fetch all the cards. So that's the reason we write like
this. And then inside the result
3:29:34
we'll say result dot data dot data. I believe uh in the return we'll say next
3:29:41
response dot JSON and with the result dot data dot data. Now make sure you
3:29:49
need to pass a user email and you have to filter that out because
3:29:55
um if I go to the cart right inside the create new entry this is the user email
because we want to fetch only card
3:30:00
belong to that particular user. So over here we'll add filters
3:30:07
then user email dollar equal
3:30:13
and then you need to add user email. Now you can get this user email directly on
the server side using constant
3:30:21
user is equal to await use client. Oh uh
3:30:26
not use client. I think we need to pass the user email to this get request.
3:30:32
Um so here we say constant search params
3:30:37
is equal to new URL and here we'll say request dot URL
3:30:46
then we'll say constant email is equal to search param
3:30:51
dot get email and this email we need to pass.
3:30:59
Okay, let's save this one. Now let's go to this provider.tsx file and inside
3:31:04
this we need to call this method. So we'll say constant.
3:31:10
So over here we cannot directly uh get this card list because we don't have the
user detail inside the provider. But
3:31:17
anyway so we can pass this card to set card and then inside the header we'll
3:31:23
call this method because inside the header we have the user detail information. So
here I'm going to create a new method
3:31:30
called constant get card list.
3:31:36
We'll say constant result is equal to await axios.get get slashcard sorry / ai
3:31:45
slashcart then slash not slash the email is equal
3:31:51
to and then user dot email.
3:31:57
Now here we are using await. Let make this async and then once we get the data
we'll say
3:32:04
result dot data. Now obviously whichever result we are getting we need to save it
3:32:09
to our uh context right. So over here I will define a context. So we'll say
3:32:14
constant cart comma set cart is equal to use
3:32:20
context and we'll say cart context. And then
3:32:26
we'll set the cart with this result. As simple as that. Now this get cut list
3:32:32
you need to call whenever you have the user information. So basically here I
3:32:38
will add a use effect and we'll execute this use effect whenever we have the
3:32:43
user information. So here we'll say if user is there then only call this get
3:32:49
cart list method and then save it. Okay. Now
3:32:55
uh here obviously we console it. So that's fine. Let's go back to our application.
We'll go to the inspect
3:33:02
panel inside the console. I will refresh the screen
3:33:07
and I don't think so on on line header 102. If I go to this 102, we don't have
3:33:15
any data because our car don't have any record currently right and that's why it's
return empty. So it's working
3:33:21
perfectly fine. Now it's time to add item to the cart. Okay.
3:33:29
So go to the uh product page. Okay. And here we have add to cart. Now make sure
3:33:36
you will fetch the constant or use this context call card set card
3:33:43
is equal to use context and then card contact so that we can set the value. So
3:33:49
over here on the click of add card we'll set the card. We have to make sure the
previous value is there. So we'll say
3:33:56
dot dot dot previous value comma and then we need to add
3:34:03
uh same information or same structure like this. Okay. So over here we have user
email product and design. So design
3:34:11
for the design we need to pass a design URL for product
3:34:16
uh I will just check products uh here we need to pass whichever product user
3:34:22
click. So that is nothing but this product information which we have
3:34:28
and then email or it's called user email
3:34:34
and for the user email we are going to use user we we need to get the user
information. So from the header we'll
3:34:41
copy this context in order to get the user detail.
3:34:49
Oop I think I did not copy that correctly.
3:34:56
And make sure to import this user detail context. And from this user
3:35:02
detail you can get the user email. Okay.
3:35:08
Here I will provide a type any for now and then save it. So that's how you need
3:35:14
to save the item into the cart. Now onto the header. Obviously we have this card
3:35:20
information and along with the card icon you can even show
3:35:27
the card count. Okay. So here we say card dot
3:35:32
length and then save it. If it's there that's fine otherwise show it as a zero. If
I
3:35:40
go back to our application here you will see this card item. Now for the design I
3:35:45
will just wrap this inner div. I will I will add a class name
3:35:51
flex gap to two. And then for this one we'll add a class
3:35:57
name padding to one background gray.
3:36:07
Padding x2 rounded to excel. Perfect. And if you see now we have this
3:36:13
item. Make sure we'll pass it as item to be in the center.
3:36:19
Perfect. Now when you customize anything and click on add to card. So right now we
got an error. It's saying previous is
3:36:26
not iterable. That's because inside the provider for the card make sure to add
3:36:32
add it as a empty array. And if I click add to card. Okay. Still
3:36:38
we have this error. is saying previous is not iterable. That interesting.
3:36:46
So let's go over here. So we have an error.
3:36:51
Now once you add this set card and if I click on add to card, if you see this
3:36:56
value is now changed. If I click again again it will change. So that's how you
3:37:02
need to update this card. But we have to make sure you also update this to our
database. Okay. So here we say saved
3:37:10
to database as well. Now next thing we need to get this design URL right. So
3:37:16
currently uh when you customize your information or customize your URL you have to
make
3:37:23
sure that you will pass it to this particular component from the product studio
component. So over here
3:37:31
um I'm going to simply pass this. So whenever this upload image change I'm
3:37:37
going to set that value. So maybe we can use this use effect
3:37:46
and we'll say set design URL to upload
3:37:52
image and this set design URL I'm going to pass back. Make sure you'll define
3:37:58
this type and then inside this component you will
3:38:04
get that. So this contain a URL of the design.
3:38:10
Let's save this in a state
3:38:20
and it is of type string. Now if you scroll down here you have to
3:38:26
set this design URL to the URL that we are getting. Make sure the URL type is
3:38:31
string. Mention that. And now you can use this design URL and then save it and
3:38:38
let's test this out. So uh actually we did not pasted this
3:38:46
but here I will just use this design URL. Okay. Inside the console log so
3:38:51
you'll get to know. So if I go to the console, say customize this, click and
3:38:56
add to cart. Okay. So it's just printing line number
3:39:03
23. I don't know why. Okay. I think we did not save this one. Now let's save this
and click add to card. And if you
3:39:10
see this is the image that we are getting. Perfect. Now once you get that one, now
it's time to save to our
3:39:17
database. So let's go to the card API route.
3:39:25
So here we'll say export a sync function and this will be the
3:39:32
post request and then next request. Now from the post
3:39:38
we need to get the user email design URL
3:39:46
and then product is equal to await request dot JSON.
3:39:55
Then inside the try catch block
3:40:03
sorry exception e here we'll return the next response dot JSON with an error.
3:40:12
Now inside the try we want to simply save it. So we'll say constant result is equal
to await axios client dot post
3:40:20
request/cards and then we need to pass a data to this
3:40:26
post request right so over here let's define the constant with a data inside
3:40:31
this you need to provide a data again and then you need to pass a user email as
user
3:40:39
email then design as design URL now Make sure from the
3:40:45
strappy the field name should match and for the products obviously it's a relation
right so for the in order to
3:40:53
connect this product you have to connect with this uh particular field name and
3:40:58
then connect with an id okay so in our case it's
3:41:04
products and then we'll say connect and then from the product we'll get the
3:41:12
product ID So I will just make sure that is correct one. So let's go to this
3:41:18
product page and type product which contain a
3:41:23
document ID. So this document ID we actually need this.
3:41:29
Okay. And then our data is now ready. Just pass this.
3:41:37
And over here we'll say console.log log result dot data. Okay. And then save it.
3:41:46
Make sure to return the response from result dot data and then save it. Now
3:41:54
inside the page tsx where we want to save to a database, make sure to call this
method. So we'll say constant
3:42:01
result is equal to await exos dot post request / ai/cart
3:42:09
and inside the body we need to pass a product as product product then design URL as
3:42:18
design URL and the user email as user detail dot email.
3:42:26
And once we get the result, you can just console this here. I will make this as a
sync. Let's
3:42:33
save everything. Go back to your application. Go to the inspect panel. We'll go to
the console and we'll test
3:42:40
this out. So we'll click customize. We'll say add to cart. The item is added to a
cart.
3:42:48
Inside the inspect panel, we'll go to the console. Here you will find an object
which return it with this
3:42:53
document ID. It means our record get inserted. We'll go to the strappy. Uh make
sure to go to the cart again. We'll
3:43:00
refresh this screen and boom. If you see we have the user email with the one
product with the
3:43:06
design URL. If I open this one, you will see this product information. How cool
3:43:13
right? So that's how you need to uh add and connect to the um relation means
3:43:19
make sure to save it in a such a way that it will also save the related uh
3:43:24
cat product information. Now if I refresh this screen okay still
3:43:31
it will show the item count as a one see right that's because uh we have the data
3:43:38
into the database and we are already fetching that information inside the header
component right from the database
3:43:44
see and that's why we are getting uh the card item for that particular user
View Cart Screen
3:43:54
now it's time to show all the item which is inside the card which we added. So on
the click of this card icon, we want to
3:44:01
show that particular screen and for that one I'm going to use an hyper UI um
3:44:07
cards component. So if I click on this cards, you will see this particular card
which we are going to use. Okay. So
3:44:12
obviously we are going to create a new route for that one. So we'll copy the JSX,
copy this one um particular code.
3:44:19
We'll go back to our application. Inside the route, we'll create cards as a route
3:44:26
and then we'll create a page dot tsx file. Add a default template and we'll
3:44:32
rename this to cards and then save it. Now, whichever code you copied, just paste
it here. Save it and we'll go back
3:44:39
to our application. Make sure on the click of this one, we'll navigate to this card
screen. So, go to the header.
3:44:45
That's where we have that particular icon.
3:44:51
So over here I change this to a link and make sure you'll redirect it to the card
3:44:57
screen. Now if I go back and click on this one, it should redirect to this
3:45:03
card page. I think it's cards with a S. So make sure it's a correct one.
3:45:10
Perfect. And if you see we have this card information. Now we just need to simply
replace this information with our
3:45:16
own um customers products which he added to the cart. But make sure that when you
3:45:22
fetch the data you should also fetch this card information or item or product
information as well. So there are a
3:45:28
couple of way that you can do it. Either you can go to this API card and change
this get request which will help us to
3:45:37
fetch the product information or you can simply
3:45:42
um make a new API call. So right now if you want to fetch with the existing one
simply add and
3:45:52
populate is equal to star it means you want to fetch everything. Now as you know
that we already have the relation
3:45:59
between the cart and the product right and according according to this strappy
3:46:04
documentation when you say popular to star it will fetch everything one level deep
okay including the media files
3:46:12
relation component and zone so let's see how the result will come so I will go to
the inspect panel go to the console
3:46:21
and I will refresh the screen now inside this if you We have the product
information as well.
3:46:28
Inside the product information, we have the product name, a pricing and all of
these detail but we don't have the
3:46:35
product image because that is one two level deep down. So the question is how to
get that. So if I go back to this
3:46:43
documentation here, this is how you can get the several deep down means if you want
to go down and down and fetch a
3:46:51
nested documents, you can do that with this one. So what we'll do we'll copy this
one
3:46:57
and uh I will replace this with this populate and here first obviously we
3:47:04
need a product right so make sure the field name should match
3:47:10
so if I go to the cart here we have this products so make sure
3:47:15
it's a with a s then populate zero and then you need to populate the product
3:47:21
image from it okay because if If I go to the any product inside the product you
3:47:28
will find the product image and this this field will need it. Now let's save this
one. Go back to your application
3:47:34
and again refresh the screen. Now in this case we got the data and here we
3:47:40
have product information but along with that one you will find now we have the
product image as well. How cool it is
3:47:47
right? So that's how you need to fetch the data. Now once we have this data
3:47:52
we'll go to the cart. Now inside this card page simply first
3:47:58
we'll get the card information using the context. So we'll say constant cart, set
3:48:04
card is equal to use context and here we'll say card context.
3:48:10
Then once we have the cart information we simply need to uh show all the
3:48:15
product list. But before that I will just simply display the card information.
Okay, as
3:48:21
we are using the hook or react hook. So you have to make this component on the
client side. Now once you made this,
3:48:29
make sure to save. And here we have the result. Perfect. Right now obviously we
3:48:34
just want a product from each of these. So right now if you see this mockup we
3:48:40
have this u uh sorry uh the UI we have u your card as a text and then we need to
3:48:45
show the each item below that. So I will just wrap everything like
3:48:52
this. So inside this ul tag we will say cart
3:49:00
dot map and here I will say product or we say uh cart item comma index and
3:49:09
the arrow function. Now from the cart item uh if I go to the inspect panel
3:49:17
go to the console we are mostly dealing with this document ID and the products
3:49:24
as well. So I will define a type for that cart information. So here we will say
type
3:49:30
cart item. So one is the document id is it it's a
3:49:36
type of string. Then I will just take a
3:49:42
reference of this one. So we have the products. Now products is of type list. So we
say
3:49:49
product uh then so let's define this cart item
3:49:57
type and index of type number here I will put
3:50:03
this li type example as it is then later on we will replace that
3:50:10
and if I refresh the screen you will see right now it's showing obviously all the
three item because we did not deleted
3:50:16
any of them but over here. Make sure you have the document ID. We also need a
design
3:50:23
and that's all we needed for now. So here we'll say design of type string ID of
3:50:31
type number. Perfect. Now whichever uh code you don't want. So
3:50:38
in this case I will go to the div inside this u ul tag. We don't need this one.
3:50:46
So I will remove that. So let's save it and right now if you see one item we have
and only it's rendering one time.
3:50:53
Now next thing you need to replace the images with an actual image. So product
image. So here we say
3:51:01
cart item dot products dot sorry zero dot
3:51:09
um so make sure it's a product is correct
3:51:14
and inside the product we have the product image. So inside the products we have
the
3:51:22
product image. Okay. dot product image
3:51:29
of zero dot URL. Okay. And then save it. Right
3:51:37
now if you see we got that uh image. Beautiful. Also along with this I also
3:51:43
want to add one more image. Okay. Now this image will contain the actual design.
3:51:50
So this design I added say something like this. Okay. Then we need to provide
3:51:55
the name of the product. So we'll say cart item dot products of
3:52:02
zero dot title.
3:52:08
Okay. And uh obviously if you want to add more property you can add it. I will
leave it
3:52:15
right now as it is. And then you have option to add one two and on the delete
3:52:21
button. So I think this is the button.
3:52:28
Perfect. So here I will add on click method and delete or remove from cart.
3:52:34
So here we say remove from cart and inside this we need to
3:52:40
provide the document ID.
3:52:45
Now let's create this method which will actually delete it from the
3:52:51
cart. Okay. And here we need to write a document ID.
3:52:57
Perfect. Let's save this one.
3:53:02
Now when you remove the item from the cart, we have to make sure you refresh the
screen. Now before that we'll uh add
3:53:10
this delete operation to remove it from the cart. So go to the cart API inside
3:53:15
the route we'll create export
3:53:20
a sync function delete here we say request next request
3:53:30
and over here we get the document id
3:53:36
is equal to await request dot JSON
3:53:41
and simply we'll say constant result is equal to await exus client dot delete /
3:53:50
uh cards and then you need to provide the id of the item which you want to
3:53:57
delete. So we'll go to the settings API token we'll see how it works. So if I go
3:54:02
to the card here is a delete operation and then you need to just provide the ID
which is the document ID.
3:54:10
Okay. And inside the return you can say next response dot JSON
3:54:17
and then result or we can say result dot data. Okay. So that's how you need to
3:54:23
add the delete uh API request.
3:54:30
Now simply call that API. So we'll say constant result it equal to await a xos
3:54:36
dot delete / ai/cards
3:54:42
and then inside the body we need to pass a document ID. Now this document ID you
3:54:48
can get from the cart sorry uh from this document ID itself.
3:54:53
Okay. And I will make this as a sync.
3:55:05
So over here we need to pass data something like this and then document
3:55:10
ID. Okay. as per the delete um call. And then once you have the result, you can
3:55:18
console this result and then we need to refresh and get
3:55:25
latest card data. But before that, let's test this out. So we'll go back to our
3:55:31
application and let's refresh the screen once
3:55:37
right now. Okay, I'm make sure the strappy is running. Okay, sometimes it takes
some
3:55:44
time to boot that strappy. Okay, so we are not logging. So, make
3:55:49
sure to log into your account. Then only you can see your cart information. And now
we have the cart information.
3:55:55
Click delete. And right now we got an error. It's saying 404 error. So let's see.
Uh this need to be a card and not
3:56:03
cards. And if I delete this one, nothing is happened. If I refresh the screen, if
3:56:09
you see now, we don't have any card information. That's because from the stripey,
now it's deleted. See? Okay.
3:56:18
Now, let's add again. So, we'll go to the local home screen
3:56:23
and on the home screen, click any item. We'll customize this one. I want to
3:56:29
remove this background and click add to cart. the item is added
3:56:35
to a cart. We'll go to the cart. Same thing uh you can do it for other. So for
3:56:41
this one as well, we'll customize this and then we'll add this card. Now we
3:56:47
have two item. Now if I go to this and refresh this, you will see this two item
3:56:52
with the information. Perfect. And anyone if you want to delete, you can delete it.
Now next thing we have to
3:56:58
make sure you fetch the latest one. So go to the header and I will use this get
3:57:03
cart list method again and we're going to call this method
3:57:08
uh when user remove from the cart as we need a user information. So we'll simply
3:57:13
use this use detail context
3:57:21
and make sure to import that so that we can get the user information and this get
card list we're going to call
3:57:29
once um the item is removed from the data. Now here we'll say user detail dot
3:57:36
email. Perfect. Now if I remove this boom if you see it's gone and then you
3:57:43
can able to uh see only one item perfect right now next thing we need to show or
3:57:51
calculate the total right the subtotal where okay obviously I'm not going to uh
3:57:57
add all of these detail we'll just keep a total amount and this total amount will
be in the dollar and here we need
3:58:04
to calculate that okay So we'll say constant
3:58:12
get total cart amount and the error function
3:58:21
and inside this I already have this method return which will calculate the total
price. So we have to use this
3:58:27
reduce function to the on a cart where we have the total and cart item and then we
adding um the total with the new
3:58:35
product price and over here I will simply return the total price. Okay. Now
3:58:42
once you have this simply you can call this method we'll say get
3:58:49
total card amount and then save it. Here we have an error. So, it's in product
3:58:56
dot pricing. Okay. And let's go back. And if you see
3:59:03
now, we only have uh 14.99. Let's add some items. So, we'll add this item. We
3:59:10
can click add to cart. Now, it's adding to add it to the cart. Right now, we have
an error. It's saying cart item
3:59:16
product reduce is not a function. So, make sure to add an optional operator fill.
3:59:23
And now we have two item with this price. Perfect. Okay. And at the last on
3:59:29
the click of check out you can make a payment to the uh with the help of any
3:59:35
payment gateway. Now we need to deploy our Strappy admin
Deploy Strapi to Cloud For Free
3:59:43
panel to the cloud and Strappy provide you this service where you can deploy
3:59:49
and host the Strappy CMS directly on their Strappy cloud platform completely
3:59:55
for free. Simply go click the link in the description then you will go to the
Strappy/Cloud
4:00:01
or you can even go to this cloud section. Okay, then simply click get started for
free
4:00:08
and you can even connect it to the GitHub or using the Google or anything. Now I
already have the GitHub account.
4:00:14
So I will connect with the GitHub and automatically it will connect your
application with the GitHub as well.
4:00:20
Okay, here you have option to create a new project. Now you can get started for
free and you can create up to 500
4:00:27
database entries for a small business. I think that is more than enough. You have
to select the account and then you need
4:00:33
to select the repo. Right now we did not select or push any of our code. So
4:00:39
simply make sure to create a GitHub account and push your code. Okay.
4:00:46
So first let's go to this admin and we will create new terminal. Make sure to
4:00:53
initialize the git. Then go to the GitHub. Inside the GitHub create a new repo.
4:00:59
Here we will say print on demand web admin
4:01:04
and then you can select add the description. You can change this public to private
and simply create a repo.
4:01:12
Once you create the repo here you will find this remote origin. Set the remote
origin.
4:01:20
Then we'll say get add
4:01:25
then get commit. Give commit message. You can give any commit message and
4:01:30
simply push it. Now if you pushing very first time you have to push with this
particular command
4:01:37
and then make sure to verify just refresh the screen and then you will see your
strappy is deployed on the GitHub.
4:01:46
Okay, as simple as that. Now head back to the Strappy cloud. Here click on
4:01:51
create new project. Select the free tire and then select the
4:01:57
account. Okay, you have to connect your uh account with the GitHub. It depends on
uh whether you want to use G or
4:02:05
GitLab. Okay, then select the repo. So here I will uh select print ondemand web
4:02:12
admin. Then give the show some name. So you have to add something like print on
4:02:19
demand web admin. Okay. Then here we have new
4:02:25
project created. Select the main as a branch and select the nearest region uh
4:02:31
from you. Okay. So right now I'm in US. So I will select US East. You also have
4:02:37
more option. Okay. It's completely optional. And simply click create project. Now
currently project creation
4:02:43
is started. Now it will take few seconds uh to
4:02:48
completely deploy your application and then you land on this deployment
4:02:54
detail page where you can see the build logs deployment logs. If you get any
4:03:00
error make sure to fix this and then push it again. Here you have option the
production you can add other environment
4:03:06
but for that one you have to upgrade it. Okay. And u we'll wait to finish this uh
4:03:12
deployment. And if you see our application is now
4:03:17
deployed successfully. I can visit this application and make sure uh very first
4:03:22
time you have to create a new admin. Okay. So I will create a new admin here.
4:03:35
add username, password
4:03:41
and then say let's start. Once you start you will jump onto this um homepage
4:03:48
right now. Uh if I go to the content manager you will see all your details right on
the left hand side you you can
4:03:55
see the image kit is already there. You have a media library and all the
4:04:00
information is as it is. inside the API token you need to create a new API token
4:04:08
and that's how you have to deploy your application in the production obviously you
have to add your own data now one by
4:04:15
one because this application is the production the strappy uh is on the cloud
platform so uh here is the now
4:04:22
endpoint you have to replace this endpoint inside your application with your actual
uh production ready URL so
4:04:31
if I go to this I don't know whether we save it inside the env file
4:04:38
or maybe it is in the exos client and that's where we have to change it
4:04:44
something like this okay so I hope you understand this one go ahead and try the
4:04:49
traffic cloud with which is completely free and if you have any question any doubt
let me know in the comment section
4:04:55
you can also um ping me or uh ask any question on my discord channel the link
4:05:01
is in the description.
Whats Next?
4:05:07
Now in order to build and complete this application, you can take reference of any
of my uh previous application
4:05:15
project where one of the application which is a full stack grocery store where you
can find how to add a car
4:05:22
system, how to add a payment gateway to your existing application. This is very
easy to use it and if I if you go to
4:05:29
this tube guruji uh YouTube channel or you can even go to the tube guruji.com
4:05:35
you'll find that particular course where you can simply uh check it out that
4:05:40
particular chapter so that you can easily implement into your current project.
4:05:46
So guys that's all for this particular video. I hope you enjoy this particular
project. If you have any question, any
4:05:53
doubt, let me know in the comment section or you can connect me on my dis discord
channel as well. The link is in
4:05:59
the description. If you did not subscribe to our channel, please do subscribe. Uh
join the membership so
4:06:04
that you will get access to all my source code and the all the courses and
4:06:10
don't forget to press notification bell icon so that you will not miss any update
from me and press like button. So
4:06:18
we'll see you in the next video.