Build Full Stack Digital E-Commerce Next.js 14 App: React Js, Strapi, Tailwind Css, REST API, Email

hey there and welcome back to TU gji Channel today we are going to build a digital e-commerce web application and this application we are going to build with the help of react and nijs and it's a completely beginner friendly so if you even though don't know how to use nextjs or you don't know about the react don't worry because we are going to learn everything from the basic so if you see on this application we have this beautiful header section where we user can log to the application or can sign up with the application then we have this beautiful header section and below that we have the all the products which is listed by category okay so these are the latest brand new product then this product contain a source code and the list of this third product category is the icons now if you want to go or want to see the detail of the any of this course just click on that one and if you see beautifully how it jumped to this particular uh detail screen and if if you see right that skeleton effect is coming up okay so we will learn how to add that skeleton effect how to design the modern UI okay with the help of telin CSS and Hyper UI everything we're going to learn from this particular course so now if you want to add into the card if you see it will redirect me to this login screen okay so without uh login uh to the application you cannot add into the card okay so let's log in the first and let me log in with the Gmail account you can add any social authentication to this application so we will learn that how to add it okay and now if you want to add into the card just click add to card and if you see the magic immediately without refreshing screen this card get added if I click in this to card if you see the card item is showing with the details and everything okay now let's add another car another item into this card okay let's say continue shopping and add to this item as a cart and if I see if you see this beautiful all the cart information is showing inside this uh cart view page okay now let's go to this view my cart and if you see we'll get all the cart uh whatever the item you added into the cart will displayed here with the total amount now if you don't want to any of this particular amount you can just delete it and immediately it will delete it from here without refreshing screen and even though it is deleting from this particular uh card as well okay then if you want to check out this one just click check out and it will navigate to the checkout page where we integrated the stri stripy payment Gateway okay now let's add the uh card details okay right now I'm adding the demo card details okay and just click submit so once it's submitted it will redirect you to the payment uh confirm paent page and immediately it will create order and it will also uh send an email to us if you see we got the email with the order details and this email get sent to us okay so whoever registered with that email we will send an email so we will learn how to send an email now the question is how and where we storing this all the data so for that one we are going to use strappy backend okay and if you don't know about the strappy strip is one of the best open source CMS platform where I'm going to teach you how to uh integrate how to set up the strappy and how to connect it with the nextjs application also we added the strapy and we connected with with mySQL database also for the media images video and all the files we connected this stpy to the cloud inary and everything whatever you see uh in this particular course the whatever Services we use is completely free okay so I'm going to teach you how to from the C creating the application to deployment everything thing we going to learn in this particular course okay so guys um if you did not subscribe to my Channel please do subscribe now share this with your friends and family watch complete video if you have any question let me know in the comment section or uh if you want to access more content of my channel go to go to on my uh YouTube channel or you can watch it on my tub guru.com okay also uh before doing any further delay now let's begin so in order to create a react application we are going to use neck JS which is one of the best react framework in the market right now and if you don't know about anything about the next JS don't worry because I'm going to teach you everything from the basic so first thing in order to create the application okay uh this is the command to create the nextjs application copy this command then go to your uh folder where you want to create the project and open a terminal at that folder okay then just paste the uh command which you copied and click enter and it will ask the project name so give the project name so in this case I will say digital Ecommerce okay and click enter now it will ask you do you want to use typescript so in this case uh in this particular project we are going to JavaScript to keep them things simple so say no and Es L say no then it will ask do you want to use T SS say so you have to say yes because we we are going to use telin CSS and uh this particular uh installation is taking care of this telin CSS The Source directory say no the app router obviously we need the routing so yes and import the custom default allies okay so here you can say yes okay then it will ask do you want to like configure keep as it is just enter it and then it will install the dependency like react react Dom next also it will install de dependency for a TN CSS some ATO fixer and post CSS and if you see our project is created now okay so now just open the vs code and uh locate the folder okay so open the folder and just locate where you created the project okay so in this case uh we created this digital e-commerce and click open say yes I trust the authors and if you see our project is open now now let's focus on the files and folder uh which in this particular uh project so very first folder is app folder and which contains This Global CSS layout and page.js layout is we can see the starting point of application and whatever the page you are going to render it will render through this layout and through this children um uh param okay so inside this body we pass this children and whatever the page is going to render we'll render inside this one the default page currently uh right now is page.js okay and this one uh will rended it out okay so right now if you once we run this particular uh project you will get to know much better so obviously in HTML CSS we used the we use index.js but in nextjs version 14 we use page.js okay uh to render these uh pages then we have this node modules obviously we are not going to touch this one then we have public folder this public folder is used to store our all assets like images then we have this JS config and next. config.js this next. config.js will help us to configured next related um configuration okay so obviously once we uh start developing you'll get to know how to use this next Jo next config.js where to use it okay kind of thing then we have this packet. Json which contains all the pack uh packages which is installed okay so if you see this is the by default package installed also it include the name of this uh application the version and along with the script to run or to build the application then we have post CSS and the T.C config.js which is the T related configuration okay and if you see we have this content the theme and Etc obviously you can add your own color uh schema and everything okay I will teach you how to do that also if you see this content right so whatever folder it mention here only in that folder the t is applicable if you are creating new folder and want to apply T CSS over there yeah you have to make sure that uh that folder is included inside this content okay under the T.C config.js file okay so let's open the terminal by navigating this terminal option and just click new terminal once the terminal is open just type npm run da okay and then it will uh open the port Local Host 3,000 okay open this uh local 3,000 on web browser and if you see we got this default page okay now let's uh get side by side and as I say right inside the app folder we have this page.js okay now here if you see whatever the code you see inside this written statement right it's showing on the screen now let's do one thing let's uh clean this particular L and let's write something like subscribe to tube guruji okay if you did not subscribe to my channel yet please do subscribe and if I save it right let me refresh this ones and if you see it uh showing the subscribe to tube gji okay so as I say whatever you return over on this particular uh page.js it will render it here obviously going forward we are not only using the page. jss but we obviously creating new route new pages new folders and everything but as we move forward in this particular video particular course then you will learn it slow um uh at step by step okay so for now I'm going to room everything and then I will add the simple de okay and if I if you if I save it if you see we got nothing on the screen just type home and save it and if you see we got the text home okay but if you also uh so we got this gradient lining okay so inside the global. CSS inside the app right it contains the all the global file which is applied to this particular application so inside the root remove this two lines okay and save it and if you see that particular line gradient line is gone okay so this is how U the projector is right now okay so whatever the file folder route we are going to create we mostly creating in app folder only okay as we are using the app router um nextjs feature okay so um I hope you understand how to create the project uh how to run it and the folder structure of the nijs 14 application so now let's create the header for our application and this is this will be our first component okay so let me uh show you how we are going to display the landing page okay so for example we have this landing page at the top we are going to create the header okay so this will be our header then after that we are going to show the landing page over here okay so this is our one component this is our second component and then we are going to show multiple multiple component for our product listing okay so it will come under this one so for each each of this section we can call it as a component and then we'll divide and we create separate file for this component so that if if you need it we can um use it multiple times also uh it better to organize our project as well okay so let's uh open our project over here and uh inside the app folder right I will create a new folder and I will call it as a components okay so if you see right I'm giving the name underscore components because if I give the name directly as a folder name okay without underscore then nextjs will consider this as a route okay so to avoid that and you want to create a folder without that routing uh feature you can start with the name underscore or U circular bracket but right now we'll learn by one step by step so uh inside underscore component let's create a new file and we we can call it at a heer do jsx okay and add we have to add the default template over here now you obviously if you see in page.js right this kind of template we need to add but every time when you create a new file right every time you need to add this template but uh it's very hectic to write every time right so for that to avoid this one right we have one shortcut and to to do apply that shortcut you need to install two uh vs code extension okay so first vs code extension is es7 plus react Redux okay make sure to install this extension and another is for the telin CSS okay so this is the TN CSS intell in sense okay uh make sure to install this one this will help uh this plugin will help us to get Auto suggestion when you're writing the telin CSS classes this is very helpful I will tell you uh where we are going to use this one and as I say this react redu react native extension as well very important once you install it right and now you want to add the react um export function right just type react function sorry here react function RFC e c for component e for export so react functional export component click enter and boom you got the default template okay not only for this one but also if you want you are developing react native function a react native application that for that also you have that shortcut okay and many more shortcut you can just explore it for now this is how we can use it in our react application now you added this header component okay this is simple header component you just added now obviously this header will be uh fixed and throughout the application okay we want that header throughout the application so what we are going to do inside the layout. JS we are going to add let me close this one uh that header inside this children okay soorry inside this layout. JS file so just have header like this and make sure it's importing from this/ component header like this and then save it okay and if you see now header is showing okay let's add few more uh component in that into this one so another we can add for example hero section Okay add the default template and save it then we will add the uh obviously with product list and everything but let's add footer also jss okay and add the default template and save it okay so these are the three for example we created this component and then we can use it inside this uh layout. JS okay so obviously in layout. JS hiter and footer we want throughout the application so after this children I will add the footer as well okay and save it and if you see this is the header whatever the content we are going to show will display inside this children currently it's showing this page.js and then footer which is common so heer and footer will be constant throughout the uh application okay and in in each page so let's design the header. jsx okay so inside the header uh we are going to add uh the tailn CSS and The Styling and everything but the best and easy way to add it right uh as I told in the beginning that we are going to use this hyper UI components okay and which is based on tailin CSS so this will give you a predefined components that just you need to copy copy it and paste it in your um uh project so go to this application UI and just search for the header in this case right so let's search header so it's somewhere here okay so header right and if you see we got this beautiful three option okay even though you can check how it looks on mobile the small screen the medium screen large and full screen okay also in the light mode how it looks okay and just you need to copy this code you can also view this this code as well okay so right now if you see this this particular code is for the HTML you have to change to jsx okay and obviously this class will change to class name and then copy it once you copy paste this code and save it okay now if I go back to our application and this is how it looks okay so if I increase the size see how beautifully the header is get added okay without doing anything without writing the code just the thing now you need to customize according to your need okay so right now I want to change this logo okay and for this uh example I'm going to use this logo from logo IPM okay this is a just placeholder so you can copy the logo which you want I'm going to copy this particular logo so once you copy it will copy the SVG code okay and now go to this public folder as I say that all the assets will keeping inside this public folder create a new file we can call it as a logo. SVG and paste the code and save it that's all so the because these are the SVG uh code okay now obviously we want to remove this uh particular logo so I will remove this completely and I will replace with the actual image logo okay so if I say this image I am adding from this next SL image then you have to pass the source so in this case just you have to access is logo. SVG you don't need to Do complete part because nextjs you understand to look you uh the Define asset inside the public folder okay then uh you have to go alt tag you can do Lo whatever the name you want in this case I will give logo then width so in this case we'll give WID for example 90 let's go height 100 and save it and boom your logo is here right if I increase the size this is how it looks on the biggest size and this is how it's on smaller side you can change this to maybe 18 okay now if you see here right uh this need to be like this so right now uh this color of this particular button is little like kind of sign color maybe okay so if I go to this button right sorry this is the teal color okay and uh obviously we can you can find your own primary color and you don't need to select or write the uh class name for that one so you can do that so go to this T.C config.js and inside this extend right obviously we have uh you can add your own color so just if you see right we have the property called colors inside that you can Define your own color for example let's add the primary color okay and we uh in this case I will give the code like uh 007 DFC and save it okay and once you add that primary color you can just use it here okay so for example you can say primary okay and if you see this color get change and if I save it see this color get changed immediately so you don't need to write the color code you just need background primary and that's all the color will be here okay so this is how you can able to uh add the color for your application so just uh let's let's do some model ification so just uh uh replace this menu okay according to your uh need so I will give option for example me bring this down home we'll say explore then here I will say about us and then contact us here you can say projects as well I will keep this project and I will remove this block we keep this project above maybe explore and save it and if you see this menu now we have this limited menu okay now uh I don't want this register I will just keep uh login option okay or just keep registered that's fine just make sure that you will change the color on how I will change this to primary okay and if I see right right now on Hover of this login right I'm Chang I'm getting this dark color okay so what I'm going to do on Hover right right now is doing till here I will change to maybe blue 600 okay and if I see like this perfect okay and here as well so right now here as well I will change to um blue okay perfect and let's add some border or Shadow to this uh header okay so for this de maybe we can add it add Shadow sorry Shadow small and if you see we get this beautiful um powder like this okay perfect so this is how our head is ready okay so with this header now we are going to um build the hero section for the application now now let's build the hero section of our application so in order to add the hero section the similar way we are going to uh uh the way which we added the header the same way we are going to add the hero section so let's go to this uh beautiful hyper UI and search for this Banner section then you will see this some example here okay obviously you have some more example here and now in this from this you will find some example okay select the one which you like so in this case I'm going to use this one okay so go to the view change do to jsx and the copy the code and then obviously we going to um modify customize according to our need but for now go to this now hero. jsx and paste your code okay and then save it obviously we did not add the hero on the homepage okay when I say the homepage or default page which is our page.js because when you launch our application this page we going to render first okay so here I remove the hero and just add the hero like this and then save it and if you see instantly how beautifully uh this uh hero section get added okay obviously we'll give some customization because for if you see uh from the top uh they give lot of margin or maybe it's padding so let's fix that first so let's go to the hero. jsx and uh over here right if you see this one so we'll remove this item Center okay because it's keeping the item Center when the screen size is large okay and also we I will change this padding to 24 okay and if you see now it's mve little bit up also now I'm going to change this name obviously and then this text as well so now obviously I'm going to change this uh color of this text as well so let's go back here first change the text so here I will say tu guruji Marketplace and after this one I will say access free source code and asss okay here I will add BR tag and obviously I'm going to change this text and everything so I will say tuji Marketplace access free source code and asset so for this source code and assets I'm going to put um the this red color okay so I might get put this over here like this okay and give some space and give some space using this nbsp and that's all and then also I'm going to change this text as well so I just say and you can add more text whatever you want also uh I will change this color to a primary okay and also we'll change this color of this button so let me bring this down and change this rate to primary okay also if I see right on how is change this to dark red okay so make sure to fix that as as well so let make it blue and let's see how it looks like this same thing for the learn mode the text color right now it's is in Red so we'll change to primary to keep the consistency and the blue over here and save it and if you see let me increase size see how beautifully it's showing okay now obviously uh you can make more modification into this one it's up to you how you want to modify for example if you want to change this color to the red you can do that as well okay it's up to you so play around it and this is how you can add the hero section very quickly with this hyper UI component okay okay so also I'm going to play with this and and I will also change little bit on this hero section so so see you in the next section now let's learn how to update the uh our application font inside the nextjs okay so if I go to this layout. CHS here at this top right we have this inter font okay and this is nothing but the font and which is applied to our root layout okay so sorry inside this body if you see this class name is applied with the inter. class name and which is nothing but this font okay so in order to add your custom font right you can if you want you can go to this Google font and search the font which you want to use it in our application okay and you have bunch of uh different fonts just uh get this name okay so for example I want this outfit okay and this is the font I'm going to use so you don't you don't need to add this font or anything just if you see right this is the command to add the font and if you see this font is getting added from the Google change whatever your font you want to add you can put that font name and make sure to add this replace this over here as well okay you can change this constant because this is just a constant okay you can keep as it is and if I if I go back to application and save it and if you see now this font is changed everywhere okay and this is how beautifully you can change and easily you can change the font or of your application so now you don't need to apply the font family uh at every place okay so once you uh update inside the layout it will applicable throughout the application as uh we already um integrated or added this header and the hero section now we need to show the product list but we need to store all our products or orders or user information at some back end right and that's where we are going to use this strappy if you don't know about strappy so don't worry so let me explain in short so strappy is a uh headless CMS The Headless CMS means headless uh content management system okay which which help us to store data and and to organize the data okay so it's a strap is already predefined the UI okay you just need to add the information and that's all it will create automatically API for you and then you can face the data or you can create a new record or update a new record or delete a record kind of things okay and this is the official website of strappy strappy is completely free guys okay it's a open source so it's completely free and that's the reason we are using strapy obviously once you uh develop uh all the application right you need to deploy the strappy on some server like AWS or or maybe uh Heroku okay obviously that need money to deploy it but I'm going to tell you how to deploy this strappy on the cloud or server for a free okay so at the end of this particular course we going to deploy stripy for a free Okay so let's walk through the how we are going to use the strappy and everything so right now obviously we are using strappy to to save all the products then the users orders the US information okay and uh for the database strapy is a Content management system okay it's is not a database but in order to store data we will connect our strapy to the MySQL okay to store the data then I will I will tell you how to create my and where to create mySQL database and in order to store a media file like images video or anything else right we going to use cloud okay you have another option like AWS S3 bucket as well but cloud is easy to use completely free and easy to imp M as well okay so this is the complete functionality okay and in this section we going to uh integrate this trappy along with myql and Cloud under and then we'll generate the API as well okay so step by step I'm going to tell you how to do it first thing uh let's go to this strappy okay and uh just go through this website how and why this stpy we use and everything okay obviously in order to create this Dr application you have to run this command line before that as I told you we need this mySQL database and for that one I'm going to use this hosting shared hosting okay so if you don't have any shared hosting okay don't worry you can get this myql free as well online by third party service but hostinger is a very popular Serv uh hosting service provider okay and it's very cheap okay so you can just start with $3 per month and you can just just uh uh click on the link which which is in the description to get up to 75% off okay so just join it and uh create a new account okay so I already have account okay I already have the and the domain and everything okay also uh once you purchase this hosting your any Services you will get the domain free okay now once I have everything right uh let me go through this one of my uh hosting service provider okay here if you see we have the option on the left hand side called database inside that go to this management and here create a new database okay so I will create here I will say uh digital Commerce okay digital Comm and I will copy same here as a username and then I will put the password here okay and then just say create so it's sing maximum database need to be like this maybe okay so you cannot use hphone create and if you see the database is created successfully okay now if you scroll down here you here is your mySQL database MySQL username the password which you entered okay and obviously I will tell you host name as well okay once you create database obviously by entering the PHP admin you can actually add uh access to the database okay if you see we have database you can create SQL statement everything but don't worry we don't we are not creating anything manually then you have to go to this option called remote MySQL okay so this option will enable uh uh to connect any host to this particular um database okay so from remote from the remote server you can connect to this database as well so click on this any host and choose the database which you want to give the access to the remote okay so in this case I will select the one which we just created and click create okay and if you see the remote database created successfully then if you see we have this host name okay so in this case mine is this one and the or either you can use this particular host name or the IP address okay it's up to you sometimes if host name doesn't work use the IP address okay so we have the all the information okay let's do one thing now let's go to this copy this command Okay in order to create the stripy application go to the folder where you want to create the application okay and open a terminal at that folder let me increase the size and paste the command okay so in this case obviously I will remove the name of project okay and we'll give the name of project like uh digital e Commerce okay and click enter now it will say do you want to proceed say yes and this is very important next step is very important so so if you see right it's it's asking us choose your installation type it first is a quick start and second is custom okay if you don't have mySQL database or you don't want to purchase any Hosting account anything go with the quick start okay this is the mandatory and this is recommended if you see but in this case I have the mySQL database okay I have hosting everything so I will go with the custom okay only thing is if you go to the custom you have option to select okay this is a language you can select anything I will select JavaScript now as I say you have option to select the database in this case okay so in this case you can select SQL light post Grace or MySQL whatever the database you are getting free you can choose that one obviously we created for MySQL so I will select MySQL now in this case we have to give the database name okay so obviously we have this database name let's go back here okay and just now we created okay so let me click everywhere and this is the database okay oh sorry let me open this terminal and paste it here then we have to uh provide the host so in this case I will provide this IP address as a host then we have to provide the port number okay so port number you can keep as it is 3306 then username okay so username is we have similar username what we give okay so this is the same username and the database name is similar that's the reason I kept same and paste it here and the password okay so I will enter the password which I entered for this database anything enable SSL connection you can say no and then it will take some time to create our strappy application so I will pause the video here and let it install it and if you see our uh strappy installation is completed okay now let's close this and open a vs code okay so I already have the project which we are working on okay I will create a new window to open this trappy project okay and then click open so over here just locate the folder where you created the um strappy project okay so in this case it's digital e-commerce and open it and if you see it's open it okay so I don't want to go in detail of this all the folders and everything okay the main important folder is for you is the config and here if you see we have this all the configuration okay this is the database configuration and so on let's run this one okay so open the terminal and just write npm run develop and wait uh to run the application okay if you face in any issue like database name is not correct host name is not correct then it might fail it okay so right now if you see it fails for us okay and it's saying the password we whatever password provided is not incorrect okay so if you go to the database and as we are using the SQL okay so this is for MySQL here um is the password okay and which is getting from EnV file okay so in this EnV file we have the password and everything okay okay I'm not going to show you but I will update the password and then I I will start rerunning again okay so I just updated the password okay and let's run again and if you see our project is get created okay and on the port 1337 SL admin our H stpy will open okay so once you run this application automatically open the browser and this is how it looks once it landed okay so if you see the URL is local 31337 SL admin SL and obviously first time we are launching then you have to register the admin first time okay so I will add the uh details okay so I will add all the details which we need it I will add the password I will same I will keep same password actually and say let's start okay and once you start you will land on this beautiful dashboard okay this is our uh content management system where you'll have a lot of settings okay lot of custom settings as well so on the left hand side okay let me walk through this strap you first so on the left hand side you will see this is beautiful content manager okay this content manager is nothing but where you can add the data okay so right now we have only one collection okay and inside that if you click on this create new entry you can create a new entry here and save it and once you save it it will displ it here okay second we have the content type Builder so if you see inside the content man manager we have only one collection called user because inside the content type Builder we have the user okay now if you want to create a new uh collection okay you can create from here for example if I want to create a new collection and here I will say products okay you cannot give plur name because uh this API ID has a plur say continue and now here you can select a different different types of uh Fields so for example text field for the name so product you can say product title maybe okay you can give small uh capital is up to you and obviously you have short text or long T again you have advaned setting whether it's a required field or you can say minimum maximum length and everything okay so I will okay with that now I want to add another field and I will say in this case the description right so obviously I will select this reach text and I will say description select another field then obviously I want to add the image the banner so we have option called media okay and from here you can add the banner for example if I want to add the image or you can say Banner okay and you have option whether you want to add multiple Media or single media obviously we want to add single media here so I will select the single media then couple of more things you can add for example let's add for pricing right so we'll add the pricing and you can choose the format so obviously I will choose decimal that will be good actually then couple of more I can select it I will add it later on but for now I hope you understand this one okay as you move as we move forward right I will obviously I'm going to tell you more in detail about the new functionality about this one for now I will close this one and if you see this these are the field which we added just now now once you add this field you have to click save okay and now once you save it now our strappy will restart their application with the new collection type okay new with the new Fields inside that and everything so we'll wait for a few seconds and if you see our first step is completed is showing that's fine and now our collection is also get created and if you see along with the product we have the user as well sorry along with the user we have product as well now if I go to this content manager okay let's skip the tool now we have the product okay before we have only one have user now we have product and now if I click on the create new entry now you can give some title description you can add banner and pricing let's give some title for example uh react native e EV charging app okay we'll say some our example so source code and here you can give some details okay I will pay some random description now here you can add the banner okay so image you can create a new folder inside that you can add or you can directly add a new assets you can drop the file which you want to add or you can just select the one you you want to publish okay so I will select this let's select the one which is appropriate to that one so let's select this one okay and click open and just select select this particular file which you want to upload upload one assets to the library and I selected this one just C finish and if you see it's attached to this one give some pricing for example let's say $2.99 okay you just we are putting just amount here and click save okay now once you save it until and unless you did not publish it it is in the draft mode okay and you will not get this from the API but to get that one you have to publish it okay so that it will be live now and if you see now it's published if you go back and if you see that record is showing here okay now even you can you can even filter it out from here or you can manage this columns everything it's fully control okay you can even customize everything on this one now if I go to this third option called media library whatever the library which you just uploaded it will show show here okay see now this is traffic Cloud which is newly they added okay uh to fully manage Cloud hosting Services by stripy it's quite costly that's why we are not going into that one now we have some plug-in as well okay for media library management permissions and lot of things in the marketplace you will see the different type of plug-in which you can add into your uh strappy backend okay it it also have chart GPT as well or many other things okay then in the setting you will see the overview you can change this logo with your brand then you can generate the API token okay so obviously we'll learn how to do that because to um restrict the access okay then you can have different languages you can add then we have the media library okay so here if you see right you can enable respon friendly upload okay when it's saying responsive friendly upload then it will uh give different types of option to of size size of images okay so you can make this true false up up to you how you want these are the two new uh feature they added is I think paid okay then we have the transfer token the web hook okay then we have the roles you can add the more roles into that one okay whatever the role you want to you you can add it and you can give option whether you want to give view option edit option kind of thing then we have users okay how many user want to add you you can even invite others this is audit lock this is again new the configuration okay you can send an email from strappy then you have roles okay so if I go to this public role here you can give uh enable the API okay so for example if I select this all the operation and uh you can select for example find find means to select all the products so this particular API endpoint you need to call I will teach you how to do that then we have Pro different provider for the authentication the email template you can generate new email template and some more advanced setting okay you can just go ahead explore it so in this case we are uh successfully integrated the stripy with the MySQL now we successfully complete this MySQL as well okay now it's time to connect with this Cloud inary the cloud inary is used to store images video or any other assets okay whatever we upload through the sty it will store in the cloud en okay because right now if you see we are able to upload the media library but once you host it okay it will take a lot of space okay because this is these are the assets for the development purpose it's fine but if you want to deploy or make it make this application Live make sure to uh use some of the uh Services okay if you go to go into this media library you have quite good option okay you can have media their own media library or you can use cloud unary Google Cloud AWS whatever Services which you want okay if you want to if you don't want to deploy in Cloud you can skip this particular part otherwise just continue with me so if you don't know about the cloud cloud is used to store the uh image and videos okay and again cloud is free up to 2 five monthly credit when it said 25 monthly it means 25 GB okay if you see 25 credit is equivalent to 25 GB uh if you want to join you can join with my link to get extra 25 credits okay so link is in the description now once you join it uh you can create account and login uh into your account okay and over here if you see uh these are the clown name API key secret key everything is here okay now go to the stripy which okay stripy back end and go to the market place and search for the cloudinary okay I don't know whether it's there or not and if you go to the provider okay it will show it here see okay and copy the install command from here okay so once you copy this install command go to your uh vs code of the strappy not this one okay let me go back okay here uh this one that's well okay this one as well okay so I confus with the strapy and the actual one but here you can create a new terminal paste the uh command which you copied enter it and now it will install the cloud plugin for you okay if you see it's install now now just click on more to follow some step okay to add this Cloud so obviously we just added this uh command okay then inside the config plugin. JS you need to paste this line of code okay so from upload to this one okay so go to this config and inside the plugin. JS okay so if you see inside the config we don't have plugin. Js create a new file call plug-in. JS and I think I we need to paste all the code then okay so let's copy everything and paste it here like this okay and save it obviously if you see right we need to provide the cloud name Cloud inary key and Cloud inary secret key as well okay again after that one we will add that in moment but after that in the security Med configuration which in the middle del. JS you need to add this line of code okay so I will just copy this okay and if you see this is we have to add inside strappy security okay copy this go to this conf middle. JS and for this one I will add it just paste like this okay and then save it if I scroll down I think that's all okay now main important thing you need to add Cloud name key and secret key okay so copy this name go to. EnV okay and over here I will add C name is equal to then Cloud key is equal to and the secret key so just add like this and everything you will get it from this Cloud en okay so if you say cloud unit name is you will get it from here then you have the API key I think and the secret key okay so I will skip this part so all these thing I added in inside the EnV okay and we are pretty good condition uh the installation of this I almost completed so now what you need to do just stop the server okay I think it's rerun it again let's try it out whether it's working or not so go to this strappy bracket and I don't know where he's gone go to local 1337 oop sorry 37 slash admin and login with the credential and if I go to this media library okay if you see right now the one image is there okay let's try to check the so it's still in Local Host okay let's try to upload a new image then we'll get to know let's upload New Image browse file upload this Mong no here open it and upload it okay and if you see it's uploaded but let's see whether this get uploaded so if you you can copy this link okay and paste it here but still it's showing this uh see it's still showing this Local Host only okay and not the cloud in image okay so what you need to do just stop the server and run it again okay and just now I added new uh image okay and if I go here and copy this one okay let me paste it somewhere and if you see now this URL is showing that it coming from the cloud unary with all this um URL and everything okay it means we are able to upload this particular image to the cloud cloud unary now you can go to this Cloud lary okay and click on media Explorer and here you might see this uh image okay I might have a lot of image and if you see we have this two image now it's showing two image because strapy automatically convert the image into different different uh size okay because in the setting we have that option you can disable it if you want now strapy obviously have not only you can just upload the image but you can upload the image from the URL as well see you can just paste the URL and this image get uploaded so beautiful right so this is all about this uh integration of the strappy along with the MySQL and the cloudinary okay in the next section we will learn how to uh generate the API and how to face the data from the API okay but I hope you understand this important part okay this is quite important uh section of this particular course now uh as I uh F inside the content type Builder right we added this product uh collection type and we added some fi here okay now you can you can go ahead and create some of the more uh you can add more feel to that one depends on the requirement I'm going to do that obviously uh I'm going to share this complete dashboard with you okay the source code is in the description okay you can access the source code as well but and as obviously I will show you uh the the all the fields which I added okay so you can also add in your strappy and from there we will go it okay so just to skip uh or just to save the time I'm going to add in the meantime when uh when I'm recording okay but yeah that's how we are going to do okay so see in the next section so now as we develop this uh header hero section also implement this strappy okay and uh we are I also added the collection called Product uh products okay and if you see inside these products I added some of the products okay and inside the content time Builder these are the content type I added okay including title description Banner whether it's instant delivery or not everything okay you can take a screenshot of this one obviously I will give the uh link so that you can access this one now if you go here right and now we want to show the list of product below this hero section okay if you see we are going to show multiple product list obviously and we right now we can call it as a product section and inside that we will add the product list component okay and again inside that we have the product item that will be a multiple item okay so we have the item for example if I have four item we can show it four times okay like this and then this complete uh let me draw this one so this Complete product list we going to use it for the second product list okay obviously we are not writing the code only thing that we going to change the value and depends on the value which we are passing we are going to fet data from this strappy okay so from the strappy we are fetching data depends on the what we are going to pass obviously once we start developing you will learn better okay so what we are going to do now let's go back to our application and let's go back to our vs code project and inside this component first thing I will do I will create a new um file and we can call it as a product section jss Okay add the default template and then after that one uh let's save this one and make sure to import that inside this home after the hero section okay so we can call it as a um latest product section okay o sorry another we can call maybe uh source project source code project and third we can call like um icon packs okay or we can add more depends on what your requirements you can add it okay now inside the product section let's save this one we will add this our product section okay product section obviously we are going to repeat same to this project source code and icon packs but we'll wait for that one now inside the product section we need to show the product list okay so here we are going to show product list so make the component for that one so here I will create a component and you can call it as a product list. jsx okay and add the default template now once you add that one go to this product section and add the product list and save everything okay now let me refresh the screen and if you see right now the it's showing the product list because uh inside the product section we added this product list okay now we are pretty much set with this particular component obviously inside product list we going to uh uh get the uh list of the products and then uh we will iterate it that whatever the list we are getting and then we will add the item for that one so we will learn it later on okay so but this basic uh file structure or component structure I hope you understand it now next what we are going to do we are going to uh create the API for us okay as I say in the uh strappy it automatically uh create the API for us so for that one go to this option called settings and inside that one you have option called API tokens okay from here you can create the API token and you can give access to what you need to read okay but if you don't want to U for the development purpose if you don't want to create an API key you can just go to this provider sorry inside the RO okay so we have option called Ro and then go to the public here if you see whatever the collection name which we have it will show it here okay and there are some other collection as well right now we are not touching to this that other uh uh collection but the one which we created which is product okay now here you have permission which you can give to this particular API end point for example you can give option to create delete find find one find one means you can get only one object or update okay but obviously right now our Marketplace is one way means we obviously we are not allow user to create the product okay so we are not giving option to create delete and update okay but we will give option to find and find one and if you see if I click on this gear icon you will see this particular end point okay and this is the end point to get the data if I save this one okay and let's go to this um new browser okay go to the Local Host 1 C3 7/ API slash and products okay just make sure so this is the end point which we are using okay and if I click enter if you see we got this some Json data and this Json data is nothing but the uh products which we added inside our uh strappy okay so let me go one by one so inside this uh first product okay this is the ID then this is the attribute inside the attribute which we all like title if you see we have the title here then the we have the description as well okay so description of type paragraph inside that we have children of type text and blah blah blah then we have pricing the created at when is created when is updated okay the instant delivery what's included category okay everything else so right now this is the good example which include everything so category icon included and everything but one thing is missing from here that it's not um showing any URL or Banner image or our G files image okay so to get that one you can add question mark okay populate is equal to Star okay when you say populate equal to Star it will it fetch all the data okay and if you see now inside the banner we will get this Banner object and that inside that we have the data attributes and then we have the URLs of the image as well okay so these are the thumbnails Okay small medium size depends on your size how you want or whatever we uploaded this this is the one which is the uh which is the one which uh can access from here okay let's go down and if you see the cloud image if I click open you'll see this uh image okay right now it's small because the size if you see this width and size is smaller but let's get a larger one or the actual one if you see this URL click on this one and this is the image we which we are getting okay now obviously there are couple of more Properties or uh some filter option okay let's if I go to the strappy get API okay and if you see we have the option called rest API and these are the endp point it provide okay for the rest API then if I go to this get list of entries these are the example how to get the list of entries how to get a single entry and lot of things you can access from this documentation okay so just go ahead and explore it obviously depends on our requirement we are going to uh use this all the documentation help okay inside our application so I hope you understand this basic thing now let's go to this API token okay and just create add new API token okay and you can give the uh token name here so I will say demo um eCommerce okay digital e-commerce and then you can give description if you want now we can give the token duration when this token will expire okay so right now I will give unlimited the token time whether it's a read only full access or custom okay so you can just give read only if you want to give full access or you can give custom when you custom you can have option to give the custom for the products if you want to option only find and find one you can give option to that one okay and right now we only have one so we are saving this one only and if I save this one now it will generate this API key okay and if you see this we have to copy this because after that you will not able to see this token okay obviously you can if you lost this key you can create a new one with the same setting okay but make sure to copy this setting okay and everything else um you can change it later on anytime you can come here if I go back right if you see and you can come back here edit it you can change the permission everything and then make save it okay now whatever the token I copied I will go here EnV I don't know file we did not create a EnV file so let's create one can say en. local and here we'll say next underscore public underscore rest API key and is equal to and paste the key which you copied okay obviously when you are using this API key uh on the client side you have to start the uh environment variable name with the nextore public underscore and the name of the uh apiq which you want to give okay and then is equal to Value me increase the size and you can put it inside the code actually that will be better and save this one okay so obviously this is how uh you will um enable the API key for your application okay next uh we going to use that API endpoint to pH the data now let's F the data from the API so in order to F data in API inside the uh react nexs we are going to use this exos HTTP client you can use the F operator as well but exos is quite easy to uh Implement and easy to use so just go ahead and just click get started if want to see example and how to install okay and this is a simple command to install this exos okay so let's go back to our V code and paste it here and install it okay once you install this exos okay then we'll create a new file or we can create new folder first and we can call it as utils make it underscore and inside that I will create a new file called Global api.js okay so all the API Keys API call we can keep it in This Global api.js okay now inside this uh Global API first Define the one constant and we'll say API key and obviously we'll get it from process. EnV dot the one which we created okay so in this case the next public reg API key okay oops sorry here okay then uh we're going to add the constant API URL API URL okay and which is the locost 1 337 API okay so not the complete URL okay this one okay so obviously we don't want the API end point so this until this point we can call it okay we can make this like this and make it constant now let's define the uh API client okay so let's Define constant exos client okay is equal to exos okay and inside this exos we need to Def U we need to define the uh API key and everything right so just like create here you need to Define headers okay and inside the header we have to Define authorization okay and obviously this authorization contain a be token as well and then Define the bearer token for example you can write like this b e a r e r okay and then dollar sign to define the API key so here just Define this API key okay before this API client you have to define the base URL okay so Define the base URL so in this case is API sry URL okay and comma and that's all now our exos client is ready okay so each request which we made with this um exos right obviously we are going to set the header with this API key and obviously we already pass this U base URL okay now the simple example here for example let's write constant get latest product is equal to you have to write exos client. gate method okay it has a gate post put update method as well then dog here you need to define the endp point oh okay so in this case our end point is slash product I think it's products okay and that's all so this is the simple API call okay and just make sure to export that make API call okay so I will put all the end points like this okay so that we can access anywhere inside the application okay so you just need to call with the global api. latest product and then it will return the product okay so here what you can do okay just write like this the arrow function so in case if you want to pass any value we we can pass it here but this is just a get method with this um uh endpoint now let's go to this uh product uh section okay where we are going to uh use that particular API call so write constant method and one method called constant get latest products okay and the arrow function and here we can call with the global API Dot and if you see we have the method called get latest products okay so it will be similar I will change this name to maybe underscore okay and then right now this is just get method no value we are passing and then method okay so and response we just console the response okay so obviously this is a so inside the response we have we need to F the data so it will return the data which is getting from this API in point okay now once you define this one we have to make sure that we'll call that inside the use effect okay so that whenever this component get launched uh this use will get execute only once once you define or you pass this Mt like this okay otherwise it will Define inite time and inside that I call this particular method and then it will execute the result let's say this one and if you see right now we got one error that you have to make this component or page as a Ed client okay so make this as a use client and we are just telling next that this particular page uh is going to render from the client side so go to the inspect panel go to the console and if you see we got the object okay and if I expand this one inside the data we have all the five six uh listing okay which we added perfect so that's what we we wanted so now uh store this particular uh list inside one uh State okay so what I will do um so right now if you see we have the meta as well that which do want want so so inside respond. data again data and then we'll get only this data okay now let's define one state and we'll say constant product list comma set product list okay so this state is nothing but to store the value okay and one is to which which hold the value and one which set the value okay it's kind of seter getter method you can consider okay not the exact um way but yeah the same concept let's make this uh use State empty initially and then here we'll set the value so set product list and response. data. data okay and save it I will keep this console so that we can take a refence of the field name which we want to go into display okay now whatever the product list which uh we have right we will send it to this product list component okay so just say product list and send the product list which you have okay now inside the product list accept it here as a prodct so I will add product list that's what we said okay save everything here save here okay okay perfect now we pass the product list over in this particular component okay now in order to iterate this product list because product list has contain a list of array okay so what we can do we can just write product list do map okay and whatever the thing you want to map you can add it here so item maybe it's this item comma index and arrow function like this okay okay make sure you will not mismatch this uh brackets and everything okay inside this let's add the div okay and let's print out some uh example for example just I put a text called title and if you see the six Time title is coming up because in product list we have the uh the length of this product list is a six right that's the reason it itate six times obviously in order to if you want to print the uh title of the part product you can just write item do title and then save it okay so right now we got error that cannot read property of undefined let's go back to the inspect panel let's say what is the name of the field which we are copying okay and so if you see right inside the ARR list we have the uh again we have the field called attributes and inside that we have the title okay so this is very important because strip will return the result like this only okay so inside the attributes we have the field called title so make sure you can access in that same way so attributes do title okay and if I save it now still we got the error okay and if you see we got the error that it's saying is undefined okay and if you see we got this result once we got the error and then we are getting this data it means it's taking some time to display the result okay so what you can do in order to fix it right go to the product section and here execute product list only if we have the uh all the products ready okay so here you can put the condition if product list is available then only show this list of product okay or you can Define better you can Define over here that's fine you can Define it here doesn't matter and save it okay and uh still we have the error let's go to the product list make it optional and see what that issue is fixed issue is fixed but still if you see we did not get the result okay so the issue was if you see this bracket I mismatched the bracket things okay and if I save it now remove that Curly braces here because we cannot destruct structurize it okay because it's contains only one item anyway so if you see now we got the list of all the titles okay and uh let me refresh it once and if I go back to the inspect panel and go to the console and if you see we we have one error and it's saying each child in the list should have unique key props okay it means that saying this particular child need to be have key props okay so here I have to provide a key and here you have to provide the unique ID for example you can provide the item. ID which is unique okay but I every time I Define this index and index contains the value like 0 1 2 3 so that I will provide the index only okay and save it and if I refresh the screen now and if you see this error is gone so now we can write all of our code over here okay but what we can do we are going to create a reusable component for this product item okay so inside this particular components let's create a new file and we can call it as a product item okay. jsx add the default template and save it and now instead of writing this all the code over here we can just replace it with the product item okay and then we will pass the item so here we can say for example product is equal to item and in the product item we'll accept it as a product simple and let's save this one as well and if I want to print the title over here now okay so I can just write product question mark attributes do title and if I save it and if you see we we got the same result only thing that we is helpful to organize this one and product item can once we Define this product item like this it can be reusable okay you can reuse somewhere else but it will give you a better structure of the uh coding the project and everything okay now we inside the product item we have all the information which we required okay so get go to this product item and let's try to uh Implement okay so here first thing uh we want to add the image okay and uh then we obviously need Title and everything okay so uh let's do that now here we will uh write code to display the product item okay before that in a global API right we are patching the products but uh as I say we need to also populate the all the data like um the banner image and everything okay so just write popular is equal to Star and then we'll get the data so first thing let's display the image okay so here let's define One D inside that add the image at the source and Define product okay let me Product dot attributes attributes okay and if I go into the inspect panel okay let's go to the inspect panel inside the console and Let me refresh this once and if you see in inside this one right we have the attributes then in in order to get the banner right uh let me oop I think we did not sa the global API let me check quickly so here question mark pop okay so spelling is incorrect you let is equal to start so let's refresh now and let's see whether we are getting Banner or not and if you see we got the banner now inside the banner we have data and then attributes and then we have to to get this URL okay so in order to get that we have to write product attributes do Banner okay question mark. data do attributes and then we have the URL okay after that let's go alt tag and let's say Banner okay then we need to give width and height so in this case give width uh maybe you can give 400 height will give 350 and say save it and then now if you see one we got one error that this particular host name is not configured inside the next. conf.js okay so whenever you are using uh some image from the URL right that host name you should add inside the next. config.js so go to this next. config.js okay and inside here you have to add images and sorry images and then we have to add the domains inside the domain you have to provide the domain which you need to get access for the image okay so in this Cas is R race. cloud.com save this one make sure if I go here right inside the terminal your application is run again okay and just refresh the screen once and if you see we got this all the images okay perfect now once we have this image right let's go to this product section okay because we want to show this images on horizontal way okay so go to this product list and what I will do I'm going to add the class name and make it grid grid column two when the screen size is smaller okay so if you see this is how I'm going to show if the screen size is smaller then we'll go GD column three and if medium will show G column 4 okay now if I increase the size this is how it will show on the big screen okay also I will make sure okay let's go to this product uh section to give some padding from the or margin from the x-axis okay so product section here I will add the class name and I'll padding X maybe 20 okay so this padding will be applicable for the medium size screen and for the small size I will add padding X of 10 okay if I increase size this is how it looks okay so now if I if I want to if I want to show right if I increase the decrease the size see how easily changing right the how depends on the screen size it change the layout okay that's good next let's apply some styling to this one so inside the product list inside product item after the image uh let's add some class name to this one and make it rounded Corner maybe large obviously I don't want the round to the all side right so you can just make rounded top okay maybe we have a property called top and then make it round so at the only top section if you see here right only top corner is rounded and not the bottom one okay after that let's add one du and inside that we'll add the title okay so we'll give this to tag maybe and inside that let's add product do attributes dot title okay and save it and if you see we got this title let's give some padding to this one class name padding of uh three maybe two is fine then I go go class name maybe a text of of 14 pixel okay and if you see I give this custom size okay in the pixel from the CSS and when you want to give custom size you have to make sure that you will write inside this square bracket okay this is very important make this three okay make this 12 actually I think this this is much better okay I will just make font of medium okay with bold boldness after this uh let's add the category of this one okay so let's add category H2 and here I will add the product attributes do category okay I make it optional sometimes user did not select the category I will our uh application will not fail and if you see we got this category let's apply some styling to this one so class name text I will make it 10 pixel and I will change the color to gray findand okay maybe little lighter make it 400 okay this is much better and little bit maybe 12 to this one 14 to this one okay and uh also uh let's we Define the height here right if you see we have the height what we can do we can uh make it object cover maybe object contain that will be good actually I don't know why it's not working as expected let's save F okay not sure why but but that's fine we can fix this out okay and if you see we got this beautiful uh width and height okay here what you can do let me clean this out and let Define the height which I want for example here 20 pixel okay that's that's how I want okay so o sorry 170 pixel and then we can make object uh cover sorry so here now you have to say object cover see like this okay if I increase the size and if you see it's showing beautifully okay you can increase the height little bit I will say so maybe I will add 190 okay and then um you can say the you you can give the margin actually over here okay or you can give into the product list okay so you can add the Gap just add gap of three like this okay and that will be good if I increase the size see okay perfect now after this one we added this icon means the type of the uh this particular icon type okay now what we can do one more thing right we can add to give the visualization we can add some icons here okay so for that one I'm going to use this Lucid icon okay if you did not use before it's very easy to use and easy to install Okay so just what you need to do just first um install it for the react okay copy this npm command go to your project and paste it here inside your terminal okay and then once you paste it you can use it directly so you can go to the icon if you search for the category okay I don't know uh for what icon should I put for this uh category name but let's search for the best one so I will try to keep put this one okay so if you see this right Square okay so it's very easy as I say you just need to uh okay we are in product item so we'll add it before this one okay so just add that long uh WR right uh square like this okay and say save it and if I go back to our application if you see we got this beautiful icon okay obviously I'm going to change height and width so give class name you height of two maybe three width of three okay four is much better see like this okay and just bring everything one line so make it flex and give gap of two like this okay perfect I think this look much better oops so okay yeah here and if I increase the size this is how it looks okay now we all want to show the pricing okay and we want to show this uh icon only if the uh the category is available okay so you can even add the condition so copy this particular me the category to check so here you can add the condition if this product do attribute. categories available okay and obviously you can add added condition then only show show this h2 tag with the icon and if you see this is how it looks also uh for this file name right you can give the only two line or one line okay and that's that's also in your hand so if I go to this S2 tag and you can say line clamp and if I go to this one okay and if you see only one line will show and after that it will show dot dot dot okay but we will keep two okay so if if the title is much bigger than the two line then it will clamp it then once we Define this de uh I also want to show the pricing on the right hand side okay so what I am going to do I'm going to add one D okay and after this I will add this to tag okay and here I will Define pricing so we'll say dollar and in order to get pricing we can I get it from product do attributes do pricing and if if you see we got this pricing okay now we want that on the right hand side so you can just mark this as a class name flex and then justify between okay and also make item to be in the center perfect like this see so everywhere the our pricing is showing on the right hand side okay and even though you can uh change the font as well so I will make little bit Bolder to this prizing so add here class name make font B maybe medium okay perfect see and uh one more thing uh we can give some uh coloring to this one means some background color okay so for this particular day bring this down say background gray maybe 100 or maybe 50 okay obviously we give some padding so make sure that we added this padding over to this deal and then make the rounded corner for the bottom one so rounded bottom and make it large okay so it will show the complete picture like this see and now on how we can add the border and some effect okay so in t CSS is very easy to add border border and everything okay so for this particular the parent de okay you can add class name then add the Border okay and if you see this border get added but we want to show this border only when we uh h on this one okay so you can get H effect and then add the Border okay if I have H on this one see now it's see this showing the Border okay but also I will use some padding to two maybe one and then uh we'll make border rounded just rounded corner so it will automatically apply to this border okay now if I see like this you can change the color little primary so maybe border blue 300 like this if I increase the size and this is how it looks perfect instead of I think uh let's try to add margin to this one how not padding is much better okay so I hope you understand how we added this product and this is completely respon okay if I change this size see let me change it from here okay and how easily it change see three two on smaller screen it will show two okay and if I go to the inspect panel and you can just verify on the smaller screen how it looks okay you can even show only one uh uh what is say product as well but right now I will show it two that looks much better so guys until this point if you have any question let me know in the comment section okay and right now if you see obviously we want to show multiple category product list on the home screen okay so let's do that as well so let me go back here on this product item we can give you title but let's go to this product list okay and over here we are passing this product list whatever the product list and it's showing here okay so right now I just want to show the four first four item here you can add the condition if index is less than equal to three and and then then only show this item okay means um only it only it only show the first four item if I save this one and if you see only four first four item will display on the screen okay now let's give some title to this product section okay so let's go to this product section and here we added this okay so here we can give title like uh latest just write like brand new save it and if you see it's coming okay you can give some latest name as well here I will add class name uh you can make font medium size text I will make it 20 pixel and save it perfect like this okay let's give some margin so I use some margin on x-axis only okay like this oh sorry the y axis I want to go on y axxis so Y axis okay and now as I say oh sorry here and now this is this is our latest products okay now if you want to add for the uh only source code okay so for example source code products okay and just copy these two lines because we want the source title and product list here you can change to uh source code and then here you have to change this list of product obviously whatever the product list we are getting I just filter filter out with the source code which you want okay it's only category you can filter it out and and when the category matches source code you can pass it here okay if I save it if I increase the size if you see we got the two product list now same thing you can do for the icons okay so let's do it for icons as well icons p and I will say icons and save it and now we'll show three category like this okay now let's explore this more okay here you can give the option on the right hand side to view all option okay and on The View allall you can show another page so play around it and if you have any question any doubt let me know in the comment section and uh obviously you can access this source code uh for this complete project the link is in the description so after adding this filter uh logic if you see right now I am able to see this brand new the source code and the icons okay the whatever the list we are getting i f that it out depends on the category now let's go back and let me show you the logic okay I'm just checking I'm passing this category to the new new method and I'm using this filter uh function okay and just returning the data perfect so now next we need to do we need on the click of this any of this particular category we need to open a new page okay and the route will be like slash project detail okay and Slash the ID of the project for example the third and if I enter it it will show me the detail okay so right now this this particular path we need it okay so let's go back to our application inside the project folder here we will create a new folder and we can call it as a project detail okay inside that we need to add this another path okay and if you see right this particular value is going to change next time it will be five 5 or 120 35 whatever okay so in that way we need to add that so what the the easiest way you can do inside the project detail you have to add another folder and in this case you have to add this square bracket okay and then you can add the value for example is Project ID okay and then inside that add page.js and add the default template and here I will say project detail you can say product detail not big deal and save it and if you see now a project detail is showing on the screen see okay so if I go to this 123 for example the project ID still it's showing me this project detail okay so this is how simply you can uh use or add the routing using this nextjs nextjs is automatically detected uh your requirements once you add these folders the dynamic folder okay and then it will uh atically create a route for us okay so this particular functionality okay are called a dynamic routing okay because this is the fixed one but the value of the project is going to change and this is the dynamic okay so that's the reason it's called a dynamic routing now in order to uh show the product detail right we already created this route and inside that we are going to show the project uh details okay so first of all we need to get the API okay so let's go to this setting option okay API token and the token which we have here okay and here uh inside the product let's make sure that you added the find one okay so from this one okay the same API just you need to pass the ID okay for uh this ID will be the um your project ID okay so this is the example let me show you the example exle so this is the API endpoint and after slash I'm passing the ID if I pass to make sure you add popular as well so to get the banner and everything okay and click enter and if you see we got the data okay so let's copy this particular path go back to our application in vs code and open Global API so inside here I will add constant get product by ID okay is equal to and here you can add the exos client dot get and add the method which you p uh copied okay so in this case obviously the ID will be we are going to change every times okay so here I will pass the ID and here just replace that one with the ID like this okay and make sure to export that one so get product by ID so that you can use use it now let's go back to our product detail page and here we'll write method to get the product by ID okay this need to be Arrow function and here we'll call Global API do get product by ID oh sorry the get product by ID comma then and the response let's console the response data do data now here we'll need to pass ID for example let's pass one okay right now we hardcoded and inside the use effect we will call this particular method so get product by ID like this and save it now if I go back to our application and open the console okay and go to the console right now this is clean everything and let's go to this product details and one maybe okay and if you see we got the one okay so right now even though if you go to the two you'll get the one because we harded the value as one okay now the question is how to get this value okay the whatever the value uh the product ID which is in the uh URL right so obviously if you see right let me increase the size we have this under in the bracket we have project ID okay so in order to get that inside this page you have to write params here okay and let me console that one for you so here I will say project project ID and here you can access it by params okay do project ID so this project ID will be the same as this one okay so make sure you will write like this and then save it and now if I go to the console okay so let me refresh it and if you see we got this project ID to because we passed two if I pass one 2 3 and if you see we got one 2 3 now this ID we are going to pass me close this one inside this G product ID okay so just copy this project ID from here and pass it here also you have to make sure that when it's loaded right you have we are getting this parameters project ID okay so when it's parent project ID is there then only execute this line of code okay and save it so if we see we got one [Music] error then constant oops okay so here we need to pass it actually but that's fine but for now I will keep empty and let's clean everything okay go back here let's test for this first item click enter and if you see we got the data Let's test for the third item o sorry let's test for this third item and if you see we got the data okay perfect so it means uh whatever the logic we implemented is working so next let me clean this up now whenever we jump onto this page right we are getting the data and let's save that data in some state so constant product detail comma set product detail is equal to use State and then here you just need to set it so say product detail response. data. data okay and can remove this console if you don't need it now obviously we are going to pass that information over here okay so couple of things we need to uh display it here okay so let me go back to our drawing board and uh uh let me bring this so here this is our board okay this is our product detail page okay and obviously we have the header here okay so first thing here we need to display uh which is the called bread crumb okay so if I go to this hyper UI okay and just search for this bread Crums okay and this is how it will show the home the navigation in in uh in short okay so that we are need to we need to show it so obviously uh for example I'm coming from the home home/ product detail kind of thing okay and that if you want to show ID you can show the ID for example 2 3 4 kind of thing we can show like this then uh on the left hand side we going to show the image okay so let's show the image there so for example this is our image we can show here on this side okay and the title so this will be a title of this particular um what is the project then obviously we I am going to show the category here then we'll show the description and then amount okay so here I will show the amount okay for for example $23 kind of thing and then at the last I'm going to show this button okay so this button contains the add to card so let's say add to card and at the bottom right we already have the project list and everything we can show the similar items on this section okay so here will be our similar uh what similar uh projects you can say similar projects okay so recommendation kind of thing okay similar project recom or you can say similar projects recommendation okay so this is how we going to show all our project detail page okay I hope you understand this one now let's go back here and first thing we need is this bread Crump okay so you can if you see we have uh very good option here copy the one which you like so I will copy this one and just say copy now obviously I'm going to use the component okay I will put this component inside this folder because somewhere also I need to use that one so I will say bre Crum b. jsx add the default template let's go to our application here and paste the code okay let me remove this one and save it obviously it's it will not display you have to add that inside your project detail page so here I will add that one TR and save it see this is how it looks okay now let's do some padding and uh so let's add padding of five okay then I will add padding X to 20 let's add padding y first padding y to 20 and then we'll add padding X when the screen size is small padding X to 10 then when screen size is medium We'll add padding X to 28 if I increase the screen size this is how it looks okay can decrease the some padding from the top actually so we can make padding to five oh sorry padding y to maybe 13 and if you see this is how it looks okay now same thing uh obviously we added everything here right now here let's add the another uh component here so you can I will create a new folder inside this um project detail folder only okay and whatever the component which is related to related to this project detail I will keep it here okay the break Crum I keep inside this um main component because I'm going to use in some other components as well or some other page so let's create underscore components and inside that let's add project detail section or you can just add um project banner. jsx and one for the project detail or project info you can say to avoid the confusion like this okay add the default template for both of them and save it now let's go to this page. jsx and let's add that both this uh component okay so inside one TI I will add the project Banner because we want to show it on the left side and then project uh detail oh sorry it's need to be info actually info okay and obviously once if the screen size smaller we will show project Banner at the top and the info on the bottom okay and also we will make sure it is flex okay uh when the screen size is smaller it will be a flex column and we make item to be in the center like this okay okay even though you did not make item Center that's also fine actually also we'll give margin top to 10 to keep some distance okay let's see how it looks when the screen size is medium or larger okay then we can make I make small uh the flex row okay so if I increase the size see this is how it looks also I will add another property called justify around or maybe you can add evenly so it evenly distributes see like this now let's pass the information which we have okay right now we save all the information in the product detail page so I will copy this one and I will pass to this uh uh product Banner okay so you can just say product and go to the banner accept it as a product and here you need to add the image so image source obviously this image we are getting from the product do attributes do Banner and again inside that we have data again attributes and then URL okay if you did not see any image it means our path is incorrect but let's see now alt I will you Banner width you can give for example 400 height 400 let's save it let's save this one as well and if you see which showing this beautiful banner and this is how it looks on the bigger screen okay then uh I apply some class name so class name we'll make a rounded corner to be large okay and uh also I will make sure that object cover okay and let's decrease size little bit maybe like this and save it and if I see here look at like this okay okay now it's look much better I remove this property called uh justify evenly okay now inside the project info we also need to pass this product information so copy this existing one and paste it here okay so we pass to the project info accept it here as a uh product sorry project right project we give the name project let's make sure so yeah it need to be project or we we say as the product that's fine I means either way that's fine we can call it as a product only now let's add the title so h2 tag let's save product dot attributes do title okay and and add question mark and if you see it's coming also um let's add The Styling to this one so let's say text of 20 pixel this bring this down and uh if you see this is how it looks okay if you see it's touching here so let's give some Gap inside this product page so here I will say gap of Y like this okay and obviously if the screen size is smaller we can write like that if screen size is smaller or larger we give cap of 10 like this then uh let's add the category so to tag and here I will say category okay and let's scroll down if you see it's showing the SCE code okay Let's uh change this to maybe 15 text I will change to gray 400 okay and this look good after that let's add the description as well so let's copy existing one and here I will say description okay uh let's give some margin from the top five maybe and then uh we'll change color little darker maybe 700 like this okay if I increase the size this is how it looks so now if I save this one and let's see how it looks on the bigger screen if you see right our screen get smaller and this uh description is showing longer because we use the flex okay so in order to fix this uh let's replace this Flex with the grid okay and make this grid column one for the small screen means extra small screen I mean to say or mobile view and then on the smaller or larger screen we make it to and if I increase size this is how it looks let's minimize the Gap so let's say five only okay so there is a bigger Gap but that's fine means you can make this particular image on the center as well okay so now let's add the amount so here after this or not here inside the project info okay so here again I will add another h2 tag okay and copy the existing one and I will change this to pricing okay and if you see we got this pricing obviously we need dollar sign add dollar sign and let's add class name text I will add 25 pixel margin top to five maybe more let's say add 35 and on smaller screen this is how it looks and this is I think good I will change this color to primary okay so let's add text primary perfect okay text Medium let's say oh sorry the font we need to change to medium font medium yeah that's look good to me okay next uh let's add the button to add into the card okay so add I will add the uh du for that one not let's add just button let's see how it look okay so button to add to card okay now let's apply some styling obviously here I want the icon so I will add the cart icon okay and if you see we have the cart icon but cart one taxi one Lucid icon let's let's search for the cart icon from the Lucid okay so here you can type cart if you see it it is say shopping cart Okay so add or you can say add to card so I don't think cart is much better I think okay so just uh you can add card so this is called shopping cart so let's add that one just say shopping ah shopping cart shopping cart and if I go back and if you see this card is get added okay let me remove this x now let's bring this class name make it Flex make add the Gap two give some padding of four then let's add the background primary text white corner to be uh you can make you can make fully round I will go with the large okay and you can make withd full let's see how it looks on this screen so f is not look good actually okay but whatever we have we will keep as as it is and we I will give some padding X to six 10 like this okay and let's give some margin top to five again okay now obviously on how uh we'll change this effect so some color only so on how I will add text blue 700 if you see this I don't want text actually we'll change only background see okay perfect if I go back to this one now beautifully it's showing if you think this button is getting too bigger let's make it three yeah that's good now okay so now we have this beautiful add to card Button as well and you can write uh whether it's a uh what you say instant delivery or not okay so that also you can add it uh option so if you see this our uh API end point we have the option called instant delivery okay and if it's marked as a true then you can show that one also um I will add one more option about this pricing and H2 T here we'll say eligible for instant delivery okay and inside this obviously I will put one condition okay so this condition is found product do add attributes Dot and if I go here sorry here if you see we have this um attribute called instant delivery okay so if it is true then I'm showing icon called um maybe badge uh don't know why it's showing this badge let me copy the from here okay so bad B check bat check like this okay otherwise I'm going to show uh exim Waring message maybe so this alert octagon okay so I will say alert octagon and save it and let's see how it looks so right now now we got one error okay so that's because here we need to Condition it's aary operator okay like this so if right now if is eligible right that's why is showing this um this particular icon okay and let's bring this in one line so class name Flex gap of three to margin top to five and here I will change this color class name we add text uh green 400 and for this one I will say class name text L 500 300 get four okay so obviously if it's not there then it will not show that one and let's change this text color so text gr 300 perfect see okay so it will say whether it's instant deliver value or not also let I'm going to change from font text of 13 pixel and the height of this one as well three width of three and same I will keep it for this alert okay so it's say eligible for instant delivery now I think that's look good everything is good now and now once you click on add to card uh then we have to uh implement the other functionality which will help us to add to card okay but we'll do that in some moment before that now whatever the category we have okay for this particular product depends on that category we are going to show the recommended uh product list okay so let's save everything first and let's go back to our page. jsx okay after this uh du I will add the uh product list okay and inside that I obviously I will pass the product list and here we need to pass the list of product so let's another method constant get product list by category and inside that we need to add another API endpoint so go to This Global API and let's add another for uh get product list by category okay and we will say constant get product by category is equal to here we need to pass category then exus cant.get obviously we have to pass products okay and here need to pass the filters okay so if I go to the documentation okay here you have some option how to get or filter it out right so if you see we have option called filtering and and inside that you can provide the filter option okay on what uh on what what sorry what um field you want to filter it on okay so quite easy if you see uh you need to get uh information which which is having username equal to John so in this case we need a category equal to whatever the category we are going to pass okay so copy this uh line of code go back to our application and here after question mark I will paste it here like this here it need to be category equal to I will add the category then uh we need to add this need to be a filter actually okay and populate is equal to St okay to get the all information and make sure that you'll export this one and then save it now go back here just call that particular API so Global API dot get product by category now here in this case we have to pass this category okay and obviously we have this product detail so we'll say product product uh detail dot uh attributes. category category okay make sure this optional do then sorry response like this okay and then we will call this once we have the data so here I will call it like this so now here let's test test this out so let's go to the console and if you see we have this data okay iner data right now we have two element for this source code perfect let's close this out and here only thing I I change here you need to pass this whatever the data you are getting pass that one okay as a product and then I'm getting from this category now let's uh save this information okay so here I will say constant product category product list comma set product list is equal to use State okay like this and copy this product list and inside this product list okay here you can give the title uh like uh similar projects okay and save it and if I scroll down if you see right now it doesn't get anything okay let's see so right now we have product list okay we need we did not set the value actually okay so set the value here so set product list to the response. data. data okay and also we have to make sure let's wrap this in One D like this let's bring this in one line and here we can write the condition if product list is available then only show the similar projects okay also let's give class name margin top to 7 like this and let's make sure that everything is we are sending correctly we are calling this one let's refresh this one okay and I also change this value okay and if you see now we got the similar project list here as well okay let's give some Gap margin so here what I'm going to do let's add margin top to maybe 20 okay and for this similar project let's give some styling class name then add uh font um medium then text size I will add 20 pixel like this okay and margin bottom to four perfect now you have the list of this project as well okay and on the top you have this main uh project here if you see right we need to change this bread Crump okay so in this case you need to pass this per complete uh path as well okay you can pass this path so that will I will tell you later on but for now if you understand how to implement this uh product detail page right very simple right now we just uh get this information and show it on the screen and as I say this is completely responsive okay if I decrease the size see how beautifully changed the layout and everything okay perfect so if you have any question any doubt let me know in the comments comment section and we'll move forward to the next section where we are going to learn how to add into the card also we'll update this particular section about the bread Crump so couple of things we are going to update here okay before moving forward uh to implement the art card so here if you see right now uh this bread Crump is not the correct we just copy paste and we did not update this one okay also if I go to this home screen okay and uh right now this clickable event is not working because we never implemented that one so first thing let's go back to the uh this product selection okay so product section and inside that we have this product list okay so obviously you can implement this uh inside the on click event on this one or you can even uh add the on click on on a product item itself okay so let's Implement that inside the product item so just product item and over here okay now here I will wrap this complete uh do into the link and if you see I'm using this link next SL reference okay and it will not reflect or it will not affect any of your changes okay so right now if you see the link when you use the link you have to mandatory to provide the H reference okay so H reference okay right now we'll keep empty and save it and if you see everything is as it is okay now here we need to provide the link so in this case is slash product details okay and uh let me go back sorry it's the project detail and then the ID okay so project detail slash ID so in this case uh the ID is the product. ID okay so I will wrap this inside the curly braces do product. ID okay and save it how simple it is right so let's go back to the local h 3000 and if I click on any of this right and if you see it's going to this one okay now one more thing obviously I as I say we need to update this bread Crump okay so let's go let's do that so first thing let's go to this uh product Details page okay where we use the um braad Crump okay and here you need to use this Ed path name okay so what it will do when you uh write the Ed path name Hook from the next SL navigation it will R it will give you this path the/ project SL detail one okay and let's console this okay so project path you can say if I go to the inspect panel inside console if you see we have got this project / project detail one okay so this is how you can get the path now this path you need to send to this bread Crum okay so make sure you will add this path okay so here I will write the uh commment WR use to get the uh URL pa okay like this perfect then you have to write path is equal to the path value okay and go to the red Crum accept hit here as a part and then right now if you see we have this home then that uh this Arrow this beautiful Arrow right and then we have again this path so let's change this to we have this home then we have this uh shirt we can call it as a we we need to call here product details okay so simple way you can do uh if you want to get the only product details you can write product um here I will say sorry uh P dot split okay split with on this slash of uh zero I think okay let's save this one it's saying SL uh not work let's see we have the path right let's add path and end I'm not sure why it's not getting it but that's fine so what we can do one more thing so here the thing is I added one and obviously uh we did not show this page. jsx that why it was not showing okay so let me remove this one and if you see with this project detail okay and after that we can show the next one is the ID okay so here instead of plane T I will copy this existing logic okay this is simple one obviously you can Define upside and use it okay but it's not big deal so that's why I'm showing here okay and another is two like this okay as simple as that and if you see now this is this get fixed okay now obviously you can write the condition if this path has split has a second element then only show this uh particular item okay so it up to you how you want to show it okay but let's let's try to add the condition here and and want this one okay and if I save this one obviously if right now it's there but that's the reason it's showing again okay but that's fine you can change it later on okay but this is important so we have one and one okay and everything's looks good to me obviously if I click on home okay this is a home right uh so we need to go back to our previous page so if I click on this one if you go it's going to previous page perfect next thing uh we need to add the skeleton effect if I refresh it see this is how it get right uh the broken image and it's taking some time so instead of that we can show the skeleton effect okay it's kind of loading effect that we are going to show it now now let's go to this uh product um Banner okay so let's me go here and here we have Banner okay so we'll add one de of size similar to the image okay so I will add class name I will addite height of maybe 350 pixel then width of 350 pixel the background I will add slate 200 okay and save it and you see this is how it looks okay now we are going to give one uh some um animation effect with the T CSS so if you do animation so we have option called pulse okay and if you see once you give this animation effect it's uh going to CS uh light some effect right if you see it's not little observable but yeah it's there and what you need to do if product is not there okay if product is there they only show image okay so question mark otherwise show this do okay like this and save it now if I rep it and see this this beautiful effect is coming okay same thing you have to do for this react native source code and everything okay depends on the height you can change it so what I'm going to do just copy this line of code go to this uh project info okay and let me close everything so just wrap one more de and like this okay and after this I will add the D which I copied obviously let me wrap this again in one de so we can add the condition everything okay so in this case I will add height of maybe 20 pixel width I will add 400 pixel and animate pulse okay and if you see this is how it looks see bottom okay same thing I'm I'm going to add a couple of more things like that so D um in this case I will add only 60 pixel okay obviously we we will give some margin so here I will add class name I I will make Flex Flex column and gap of five okay then for description obviously I need to add couple of this one okay like this see and one for the amount one for the button so one for amount amount for example I can give here maybe 100 okay 100 and for a button button I don't think so we need it okay so what we actually need to do we need to write a condition similar like the previous okay if product is there then it will show this particular D oh not this one this one okay otherwise it will show us this de okay and wrap it like this and you can save it now if I refresh the screen okay you see the magic see let me biger the size see okay so this beautiful effect coming up okay perfect so this is how we going to implement it okay let's go to the home and let's open something this one okay and if you see so that loading effect will get added okay so this is how easily you can add the TN CSS obviously right now uh you can create a different component for this one okay to add the uh this tailn CSS effect okay so what you can do let me copy all of these things from here okay control X and you can go here and we say uh skeleton project in dot jsx Okay add default template and then I will paste this over here and save it and on this section We'll add that skeleton okay so skeleton project info see it doesn't change anything only that we create a different component okay if you need somewhere you can add it okay obviously you can add that arounded corner I think I forgot to add but you can do it okay no issue so I hope you understand until this point we implemented this home beautiful home screen okay then we have this list of uh all the projects okay depends on the category then you can open any of the project you want okay and once you open we have this beautiful loading effect then you are able to see uh the pricing description everything okay and now you have option to add to card next we will learn how to do add to card okay so we'll see workflow and then we'll implement this logic so here until this point we are successfully able to show the product Details page okay now we need to add the add to card functionality right but before that when user click on ADD to card we have to make sure that user is uh loging to our application okay then only we can store the card data so let me go to this our uh drawing board and if you see now once user uh login on this particular screen right me bring this down so once us click on add to card it will check whether the user is authenticated or not if user is not authenticated then you obviously user will will redirect to this login and signning sign up page okay and if user is login then we will store the data okay uh into the card obviously into the add to card particular page or whatever we going to use strapy to store data and obviously when you go to the checkout page it will face the data from the strapy only again okay so make sure the main important thing is user need to authenticate it uh before adding the data into the card okay so for that one we are going to use this clerk authentication this clerk authentication is completely free and is one of the best um authentication uh service provider in many of my courses I use the clug before okay and it's very easy to set up and easy to integrate so first thing if you don't have an account on the clerk then create a new account and then go to the dashboard inside the dashboard you will see uh uh some of the existing project if you don't have created the new add application okay right now I am using the xdx one which I already have so I will go inside this API Keys okay and just copy this API Keys okay so I will copy this API key go to your VSC project let me open this side by side and now inside the env. loal file paste the copied in variables uh Keys okay like this now let go go back to our API key now here you have a bunch of option to customize the UI for the login page okay even you can upload your own logo okay in the authentication you can enable a multiple social authentication right now I am enable Google and Facebook you can enable more okay it also include a GitHub Twitter Tik Tok and lot of more okay you just need to click enable and that's all okay everything is so easy to integrate great now just search on the Google or let's go to this cler documentation okay so you can just search on cler nextjs docs and it will give you this first link okay which help us to integrate the cler inside the nextjs application so obviously we will follow step by step process so first thing copy this and install the clerk inside the nextjs so let me bring this down uh open the terminal and and paste this command okay let's save this one let me close all once it installed the second thing uh to save this environment variable which we already did it then we need to wrap complete application inside this cler provider okay and this is the example how they wrap it okay so if you go to this layout. TSX you need to wrap this HTML complete application inside this cler provider so I will copy this one then let's go to this layout. JS by by just searching contrl p and you will find this just type the name of the file now here I will add this club provider like this and wrap it okay make sure to import this clu Provider from the cl/ nijs okay see and then save it if you scroll down then you need to add this file name called middleware okay so I will tell you why and where we are going to use this one but let's add that one middleware sorry I copied wrong thing let me delete this one copy this middleware create a file name middleware dots and inside that paste this content as it is and save it okay then if you scroll down little bit this is the user button okay this is simple user button they are showing it but we will use it later on okay and if you scroll down down little bit more you are done okay so right now if I go to our local H 3,000 okay let's go to Local H 3,000 so nothing is happening okay so I just restarted my application because I had one error okay the thing is uh I created wrong file on inside root folder okay so just stop the server and restart it again okay and if I go to this local of 3,000 it it will show this particular landing page okay so here if you see you it's saying to authenticated okay this right now if you see this is O icon I added this dummy uh logo okay just ignore that one and now you have option you can just log to the application okay so if I go to the Google and then you can log in it okay so if I go here and then you have option to select the account and just you can log in it okay but before that if you see this uh particular URL okay which is not belong to our application or from the local H or something like that right so in order to resolve that one you have to create a custom signin sign up page okay and this is our next step inside the CL from the cler docum documentation so go here and here you have to follow some step to create our custom signin sign up page so right now copy this complete path after the app as we are using App router copy this one then let's go back inside the app folder and here what I'm going to do all the authentication um related Pages or API we going to keep in one folder okay because we have sign up and signin page so inside app I will create a new folder and I will call it as a Au okay like this so as I told you right we can use this circular bracket as well and inside that now I will create this F uh create file icon and then paste the path which you copied and just change to jsx okay and then paste this particular data and save it okay okay same thing you have to do for this signin so I will copy this complete path inside the O I mean o folder create a new file and paste the data and make it jsx okay now copy this content as well and save it and if I scroll down these are the variable you need to paste it in. loal file like this okay and then save it if I scroll down now now we can try to look for local Lo 3,000 so let's go to the local Lo 3,000 and and if you see now we are in local Lo 3,000 see okay and now it asking for sign in and sign up great right so also if you see we have this header okay and you can get rid of that header as well so it's very easy because right now what we did let me go back to our application here we added the children inside that one okay so we have this cler provider and inside that we are rendering this children okay so you can obviously uh get rid of that one as well or you can just provide this CL provider inside this children as well it's up to you or you can just remove it by checking whether this user is already loging or not okay we will do it later on but for now if you see we are getting this login on our local 3,000 okay now let's uh design this page okay and also I will just check whether this us is login or not and to hide this header okay so what you can do go to the header here we have uh one who call use user okay and if you see it's inputting from the clerk nextjs okay and you can mention if user is available then only show this header otherwise don't show it and if I save it okay okay say now we got error that you is not function so let me fix this issue and here you can just mark this component as you use client okay so that it will be on the client side and if you see this header is gone same thing you can do it for footer but right now we are not not implement the footer so we'll do it later on okay now let's go to go to the signin page so this is our signin page and here let's wrap this inside the curly braces and over here we're going to use the hyper UI okay so if I go to this authentication form section here we have this beautiful uh design okay you can copy the one which you like and on on the right hand side instead of this form we are going to replace with our actual clor page so go to this cck jsx and copy everything then I will just paste it here okay and make sure to remove this comment also uh let's cut this sign in and then s uh delete this complete du because we don't want it and paste the sign in okay and save it and right now on the small screen it will look like this but if I increase the screen size see how beautifully it's showing right our signin page okay now obviously you can make some changes on the left hand side you can CH you can change this image as well it's up to you and then you can make the change as per your need okay so right now let's log into the application okay and if I go and select one of the account and if you see now it's log to this application okay but still obviously it's showing this login register button because we did not make any changes over here okay so let's change this one now so go to the header the header and inside here right uh if you see we already added this uh condition whether the user is available and that's why it's showing this header okay after this one we have the um this two buttons right one is for this uh we actually oh yeah one for this login and one for this register okay so we'll put the condition if user is not there okay and and then you can show you uh then only show this login register okay and if you see right now the user is there and that's why this particular uh button is gone okay now let's uh replace that button with the user uh profile image okay and it's very easy right now let's add the question mark now here and I will add the turn operator condition add du and inside this du I will add user button okay and if you see this user button is importing from the clerk nextjs okay and save it and if you see how beautifully this button get added this is nothing but the users uh login Gmail profile image okay if I click on it you can even managed account and sign out or you you will see this details as well also along with that one I also want to add the shopping cart here okay so just add shopping cart and save it and if you see we got this shopping cart now obviously we will U modify that little bit so let make class name make it Flex we make item to be in the center you gap of three like this h f then let's give some uh stying to this uh particular card so I will add class name then we'll change text to primary so it will be the the color will get Chang or is better to keep black only that's look much better okay and obviously after this one right I will also add uh for let's try to add zero like this okay so it will show how many item is inside this one okay so let's put this inside one S2 tag like this okay obviously I will make this class name Flex okay and if you want to give some Gap you can give some Gap as well Gap one like this okay and if I increase the size see it's showing this obviously if you want to put this user button after this one you can do that if I increase size here you will see this um card icon and then on this right hand side you have this authentication okay now for this one I will make cursor pointer so that if I hover on this one you will see the cursor pointer get change okay perfect now if I go back onto this page and now I have option to uh click on the card so that this value get changed and then we will show the card um details as well okay now one more thing here okay let me log out from this screen for now okay and let me go to local of 3,000 so right now if I try to go to this our landing page is still asking me this login page okay the question is now how to avoid this because on landing page and the product detail page I don't want the sign in uh screen Okay so so let's go to this uh middleware dots okay which we created from this Clerk and inside that we have option uh called public routes okay oh sorry public routes and inside that you will Define the which route you don't want a signin page so in this case I want on the hom page I don't want signin page okay and just defined like this now if I go to local 3,000 if you see you don't need a sign in page okay and even though if you did not log in still you can access this one okay but along with that our header is also gone because we added the condition if user is there then only show the header okay and also another thing if I click on this any of this uh item right it also ask logging for the product Details page so also for that one you can add this same route okay so go here and then add the condition let me check the name so Local Host project detail so copy this one and paste it here okay and it need to be start with Slash and obviously after that we have the dynamic value okay so for that one you have to write bracket dot stop okay so this will consider as any Dynamic value after project detail okay if I go back and open any of this value if you see even though you did not log in still you can able to access this one okay let me go to this local host and if I open any of the project you can able to access it okay now only thing we need to fix is the header because header is gone okay so here uh just remove this condition okay the user and if you see now I can able to see this okay this particular header after removing this user and over here uh inside the use effect okay you can write the condition let me try to write outside this use effect as well okay so for example let's consolid console.log inside that add the window. location. H reference okay and this will CU us the uh the URL okay so let my go to this console and if you see in the HED uh jxx 10 we got this Local Host project detail to okay it means it's written this complete URL perfect that's good now if I go to this sign in okay and if you see rning the sign in okay perfect now what you need to do uh let's define one state we'll say constant is login comma set is login is equal to use State okay and inside the use effect we'll set is login okay only thing is just take this H reference okay we'll convert it into two string okay so if it's anything you can convert into two string make sure then we have to check with the includes if that includes the string called sign- in okay if this small okay if you see sign in okay if that include a sign in then set the login as a true obviously it will return a true otherwise it won't return a false and then you can put a condition if is login is true then don't show it obviously you have to make not if it not loging then only show it okay if I save it now and if you see the magic the header is gone okay now if I try to go to flow 3,000 see the header is showing even though if I go to this page the header is showing okay so this is the way we can remove another thing as I say if us are login and obviously the button uh we need to connect this button to the Lo Lo screen so go to the we already in header here we need to add sign in okay here as well I will add for register sign in or you can make it sign up okay but when you make the sign up you have to make sure that you will add the condition here for a sign up as well okay so for example sign up either way but right now I will keep one and if I click on login it will reir to the signin page that's good also if I click on add to card okay and if user is not login we have to make sure it will jump okay but let's do one thing uh as I say we okay we already defining this one that's good on add to cart if user is not loging that condition we need to check so go to this add to cart so which is in the product uh info. jsx okay here we need to check on the click event so let's add on click event and on add to card click okay so this method is calling on the click obviously we don't have that this method so let's uh let's create one method okay the arrow function and it will check if user is already there so we have to define the user using constant user is equal to use user okay and let me save everything make sure we are not getting any error here if is defined if user uh if user is not there okay then you return nothing and then it will we want to redirect to the signin page so in order to redirect programmatically okay you have to define the router okay so just Define router is equal to use router okay and this user router we are importing from this next SL navigation okay like this and now from the router dot we have method called push and whatever the URL you want to go you can go it like this okay now let's save everything let's click on add to card and if you see it redirect to the signin page now just sign in with the account which you want and then it back to this sign in and if you see this header is also get changed with this beautiful profile and the card icon and now if I go back here and try to add to card now if you see nothing is happening because we did not write any condition and it's not going to the signin page again because we already sign in okay so here now obviously we are going to write logic to add to card okay so this method is used used to add project SL product into card okay so I hope you understand this one uh if you think this is little uh complicated don't worry you can ask me question on any time um obviously you can join me uh the me the link which is in the description once you join as a membership I can help you one to one anytime okay just message me um on buy me coffee or you can message me on Instagram as well okay so see you in the next section so in this section we are going to implement add to card functionality so once us the click on add to card we are going to save the required information onto the stripy back end okay and obviously we are going to update um this particular card uh number as well okay so how many item are in the card and everything so for that one I created one a collection type of type card okay and inside that I added the user's name the email address then the product okay and the product image okay so right now I don't think so we need this product image but if you see I this products is of type relation and this relation is with the product okay so you can select that one from this relation uh category see if you select the relation select the product and then you can make the relation how uh whatever you want okay so make that one so right now I already added so I'm not doing anything and make sure to save it okay the the uh the main uh logic behind this one right connecting this uh card with the product so you just need to pass the product ID and automatically strapy will taking care of connecting that particular ID with the actual product so whenever you are fetching um the cart information you will get the all the product in uh details as well okay so first thing uh let's go to the settings again go to the API token and in I just edit the existing API token here you have to make sure that you can able to upload fine create delete enable all the things okay we need this and then uh save it okay obviously we are going to create a new record so make sure to add this one API / API / card okay so that you will get to know okay you are creating a new uh record okay and then save it now let's copy this endpoint and this is a post request because this is a uh create API okay now go to your application uh let me go back here inside the global api.js I'm going to create a new API okay so this will be for uh create or add add to card collection okay and we WR constant get or we will say sorry uh add to card oop sorry my bad so here obviously we need to put exos dot now we need to do Post method okay here you need to pass the API endpoint and then the data okay obviously you need to pass data so what data you want to save that data you need to pass I'll make this a small and make sure to add it here add to cart like this okay and save it now once you save it let close this Global API now here we already have this add to card click uh method which we implemented and here we are going to add logic to add into the card okay so whenever we click add to card for that particular product because we already have product information here okay so first thing let Define data inside this data we need to Define this data again okay because in the strappy if I go back here inside the uh documentation okay to create entry if you see here you have option called create entry click on that one and it will give the simple example how to create ENT and if you see this is the post request they are making and you have to pass the data object like this okay and then you uh you'll get some response in the result okay so same way we are going to do that so let's go back here and whatever the information you need it you can put it as I say you we need the usern name so we'll put user name as user do full address oh sorry full name okay so this is get we are getting from this use user okay then email address to get the user email address we can get it from user do primary email address. email address then obviously we need uh some more data for example uh product okay and here you need to pass the product ID so just need product do ID okay and make sure let's go back here and inside the uh content type Builder and make sure we have only three item okay it's a products so just rename that two products okay like this and save it now make our API call so Global API dot add to card here you need to put this data okay make then request response and just write the response okay we'll just make sure add to card I will say here and we if we got the successful response then we will say that okay we are able to add into the card otherwise we will handle the error okay here like this and we'll console the error comma error okay and save it now let's test this out so let's go back to our application open open the spec panel go to the console clean everything okay I will also open the network Tab and click add to card okay so right now we got one error and it's saying the products is not defined Okay the reason is this aest a products and this we need to make products okay so now clean again go back here click add to card and oh one we again got one more error okay so it's saying the bad request let's see what's the issue so we are getting this error because if we go back to this Global API right and I'm using AOS instead of AOS client if you are using the AOS okay it will saying that okay this local 3,000 is not found okay and we are not using local 3,000 we are using 1337 okay and let's test this out now now if I click add to cut okay so now it's saying method not allowed okay it means that now it's different error okay uh so whatever they mention is now completely different error so here again uh by mistakely add API okay make sure uh to remove that one and let's test this out now clean everything let's add to card and if you see it's showing now 2,000 response and in the response we got the this particular information it means our data is inserted let's check in the uh database okay so I'm in card and if you see this new record get added got game play and if you see this particular ID also get attached which is the product product ID okay and which is username and email perfect it means we are able to store this particular data in our database now one more important thing here okay we completed uh we are now able to save the data everything is good okay now let's try it for the other uh uh what do you say project okay let's go select this project click add to card okay obviously right now we are not showing any message or anything that is get added or not okay but we can show the notification later on but let's test it out whether we are getting or not and if I go to the card see fifth item is getting inserted okay perfect next thing now we need to update this number okay so what we are going to do we are going to use context for that one okay so let's go back here and create a cont context okay so inside this I will create a new folder and I will call it as a context okay so context will help us uh to uh share or update the value throughout the application okay if you define or wrap that particular context um or your application whatever the application whatever the components you WP inside this context uh you can share this value throughout that one okay so let let let's take this example so first let's define this context I will say cart context. JS here uh write export constant I will use same name as I gave the file name to this contact name is equal to you have to write create contact see from the react and inside that provide the null value okay now your context is ready now let's go to this layout. JS file okay this is the main layout. JS inside the cler provider I I will add the cart context like this okay and just wrap that similar like clerk provider and inside that you have to provide the default value okay sorry you have to write dot provider okay so I miss this one so card context. provider is equal to the value we have to provide the default value so I will say card comma set C okay and Define that value so I will Define the state constant cut comma set cut is equal to use State like this okay now obviously initially it is empty but we are sending this value okay now obviously uh you have to make this as use client okay and once you make this use client you have to make sure that you are not passing this meod data okay so I remove this metadata as well okay for now it's we are good so let's save everything okay and uh now whenever you are trying to add it to the card okay we have to make sure you will updating this value but before that let's add this attach the value of the cart to this particular number okay so it is in the header okay so first thing you have to get that Conant text so you have to write constant the name of the context with cart and cast said cart the method sorry the the state name is equal to you have to write use context and the context name so in this case is card context like this okay o sorry yeah now we can get the length of the card to show that there as a number so maybe here we can show it so here we can say in bracket card okay dot L and save it okay and right now if you see it's showing zero because currently we don't have any anything okay now when you click to the add to card okay let's go to this here and just click on add to card okay so it is in the project info and after this one when we added this successfully right or you can add it here as well but right now we'll keep it here okay because once you add it then only we have to make sure that it is also reflected inside the card okay before that let's define the card here again constant cart comma set cart is equal to use context is equal to here you have to provide the context name so cut context okay and if you see here so right now we wrap this our context okay uh all the actually all the project we wrap it that's the reason we we can able to use this card anywhere in the inside the application okay not only use but we can update the value okay so in this case now we are going to update the value okay so here what I will do I will add the Set Card obviously whatever the um object list we have inside the Set Card along with that we have to add existing one okay so for example uh let's say cut okay and inside that again we have to define the uh again we have to define the card so that EX exting value will remain there and new value get added into the existing one okay so inside this one we'll set the cart okay so I just deleted that and here with the existing value so write existing value then dot dot dot the existing value and along with the new value so inside for the new value we will add the only product value okay so whatever the product value is there we will add it inside this particular cart okay and save it now if I go back here let's try to add card right now if you show see it's showing the zero value okay if I add to card see it changed to one okay let's try for another project to add into the card so right now if you see it get again it get uh vanished okay but we'll fix that issue but if you say add to cart again if I click add to cart see it's showing now okay the only thing now we need to do whether it's persist or not right now if you see is not persisting this value okay and that issue we need to fix sometime it's persisting if you see right in the case and if I add to cut the new item it's showing the third item as well okay but if I go back from the mean if I refresh it okay then it's going or it's Vanishing so to fix that issue right we need to make sure whenever application get load very first time or anytime okay we are going to face the data of this user okay if I go back and go to this card right now a lot of item we added see okay so now all of this data we need to F it okay so for that one uh if I go to this pop uh let me go back so we have one in the documentation we have this section called populate select okay and inside that one here we have the some option right we already use this to get uh API call to populate all this field okay after that we also have the uh you can specific field you can populate okay also we have populate two levels it means uh you can populate nested value as well okay so let me show you the example so I use somewhere uh okay so let's try this example okay so let's add the in this case We'll add cards okay and if I enter this one right if I go here yeah so if you see let me Zoom this one little bit so right now I want to populate the products okay and inside the product I want to populate the item which is the banner okay if I just populate if I remove this one is equal to Star if I populate the cart only I'm getting only this much information okay which contains this uh okay yeah this contain the username name okay and the product information but I also need a banner information as well because I want to show that image inside the card page or checkout page that we are going to build next but for now we need that information so that's the reason I modified this uh query little bit to get the banner if I enter it now along with the products see this is the product we are getting I I'm I'm also getting the banner okay so that's the reason I using this particular query so copy this query okay and and go back to our application so go to This Global API and here we are going to get or write a new uh API in point and I will call get card user card items okay and here I will say constant get user card item and I will say here I will pass the user email address because we need to pass user email so I will say write email ex client doget and then pass paste sorry uh paste this particular endpoint okay now obviously along with that one okay we need to make sure that we are fetching only card only this list which is matching with the uh email address okay so all again we need to modify this little bit so you have to add the add operator then you have to write filters okay email is equal to sorry email equal I think uh so let's see the documentation little bit so you can say get entry maybe this is simple actually okay so let populate only and we have filtering okay we need filter right so here how you can do it so you have to write filters the field name the operator so operator you have equal uh not equal less than equal a lot of things okay so right now we just need equal okay sorry and you can use that one so go back here again and here you need to write dollar equal is equal to the mail address so in this case I using this dummy email address and if I enter it now I'm getting all all this uh items or sorry card item which is belong to this email address okay obviously email address is unique for each user okay so let's copy this field okay and make sure to paste it here we added and okay and obviously email address we are going to provide so that's why I will replace it with this plus email okay and make sure to export this G gate user card item items we can make it items okay now the question is where can we uh fet that information okay so obviously we can fet it inside the layout. JS okay because here only we are updating or setting this card Set Card value okay and whenever we are going to up or refresh the screen obviously this page is going also refresh okay so let add constant get card item and the method so here we'll call Global API dot um get card item user card item here we need to pass user email dot then and the response so I just realized that uh obviously we need to pass email but obviously we need to use that use user clerk um uh hook uh to get that email address okay but if you you see this is the CL provider inside that after uh whatever the component we Define that only can use that use user and not this particular layout okay now we have two option the first we can put this children in some other component and then use that uh or call that method or maybe we can call it inside the header directly okay so what I will do I will cut it from here go to the header okay and over here I will call call that meth so constant I already copied so I'll paste it here like this make sure to add Global API and I will call it here okay so here uh we already fing the user okay and from that we'll get primary email do email address okay now let's add the uh UI for this cart okay so uh inside the underscore component let's create cart. jsx add the default template okay and save it now obviously uh this particular icon is on the header so I will add that card component inside the header okay so go to the header and near by this cart icon okay so after this one if you we have this button and all here I will add the cart like this and save it and if I go back back here so let's add some of the properties so first I will add this line of code okay so which is just giving the height and width okay and making this absolute okay if I save this one this is how it looks okay so it's on the top of this one and obviously it I set below this cart okay by setting absolute and by positioning right and from the top okay like this it's not big deal you can just access this from the source code if you face any issue also if I want to give border you can give some border to this one okay so or maybe let's give shadow okay now next uh if I go to the hyper UI right as I told you from the hyper UI we will use this uh uh design so let go to the view and in this case okay I need just the inner uh layout okay so I will just copy from this D and I will copy until first element okay so let's go back to application paste here okay and in the UL tag and in the DU tag and save it if I go back here see this is how it looks okay also I want to show this button similar kind of button so button is at the bottom side okay so see this one so this D tag I will copy maybe yeah this much I go back here and after after this do I will paste this buttons and this is how it looks okay obviously I will give some margin okay so let's give some margin top to five let me update this button I don't want this uh check out button okay I will replace this check out to view cart and I will delete this one okay and it look good if uh I added multiple items for example this list okay we have multiple list one two okay if you see we got the multiple list now if you observed our button and this name is going below this particular uh layout okay so what you can do you can mark this de as overflow Auto okay if I mark it if you see now it's inside and now you can able to scroll it perfect so this look good okay now couple of things we need to do obviously um we are going to show the items here so so let's add our context user constant then we'll Define the sorry uh card comma set card from that we'll get item right use um context and the context name is is card context okay obviously uh I will remove all this list only I will keep it one and obviously whatever the it is inside the card we will need to iterate it okay so just add cut dot U map and inside that we will add the uh item comma index and the arrow function like this okay and let's put all the list inside this one okay now obviously this is just dummy let's save this one and just make sure we got this three data see itm is showing three and here as well is get it's showing the three items okay obviously in view my card it's I hardcoded this number so I update this number to card do length so it will show correct number oh n g see card three okay now first thing uh let me update this okay so you can add your own image so which is in the item do attributes do banner. URL sorry data do attributes do URL okay I know it's a long path we need to give but we don't have option okay we need to give this path otherwise you can map beforehand okay and let's see whether we are getting data oh no so attributes we have item Banner data again we have attributes and then we have URL okay we we'll check it out in some time but in meantime let's update the title so here I will title so here I will say item dot title and let's see whether it's getting or not so see the title is also not getting it means whatever the whatever we have inside the card where it is so this card right we are not getting proper data let's console that data first so let's add use effect to consol it so here I will just console the C okay so go to the inspect panel console and uh I don't think so we have anything in card Let me refresh it again so okay so this is different error but uh if you see in cart it's showing empty because this get executed beforeand only okay so what we can do we can add a condition if cart is there then execute my cart and if you see now we got the data in the cart okay but we just consol it okay it's I don't think so it's it's there right now but you can add the condition if cart is there then only show the card but still we have the issue let me check it out so I fixed this issue meantime okay the only thing the issue was here if you see right we have this we just added this until this product okay but inside that again we need to add the data of the first element okay so that's we need to play around and then you'll get to know the issue okay but let me refresh the screen and if you see we have the data okay this is image might be a broken okay that's why it's not showing but that's fine you can just ignore that one and now we have proper data okay if I try to add this card and if you see is get added okay perfect now let's add some other field like title and everything so let me go to this card inside the item we have do attributes do title and if you see we have the title obviously I will limit that one so I will say line clamp one okay like this then instead of size I will show the category so item dot attributes do category okay and it will show the the category I don't know why it's showing okay so let's remove this xsx and then I will show the price okay so here we are going to show price so item dot question mark dot attributes do pricing okay and this need to be in dollar so we'll put dollar let me remove this second line and save it okay so right now this is broken okay if whatever we added it just get broke I need to we'll check it out why it's broke but when if you see right okay we are getting proper five item okay from there now next thing okay uh we need to close this okay only when I click this one I need to open and when I uh open it sorry click again it will open it so let's go back to header and here I will Define one state okay say constant open cut comma set open cut and is equal to use State initially I will make it false now this use state will handle this particular cart okay so go to this card and here I will say set open sorry open open card maybe open card is true then only open the card or show the card if you see it's gone but if I change this to true it will show okay perfect now obviously let's let's add the cart where is cart icon on click event to that cart icon and to this user button click so this is our button right let me bring this down and here I will add the onclick method okay and here I will write uh Set Card okay and whatever the card value I I will opposite whatever the card value is there we'll make it opposite of that one okay and save it if I click on this card right now let's make this Cur yeah if I click on card okay oh so it's not showing let me see what's the issue so we oh so the reason is right we okay let me it's our fault okay it's not set cut actually the the it's open cut and set open cut right uh my bad so we need to show the set open card okay so set open card open card opposite value and save it and now if I click on it see it's showing if I click again on it it will display okay perfect that is it working okay also whenever we add to the card okay we need to uh open this one okay so to do that right uh we we need to just uh add one use effect we'll add one use effect okay and what this use effect will do whenever the value inside the card is get Chang if this value get changed for example okay then only we going to update this uh set open card okay so we'll update this set open card here like this to True okay so if I refresh it it's showing it okay but let's close this one and if I add okay let's add some different item now in this line okay and let's add this item for example if I add to card okay and if you see it's open automatically and it's showing now okay so this is how it works only thing you need to control uh whether cart has the uh the cart is change or not you can make this card and and also I want to make this okay we can make condition like if card is false okay say open card is equal equal to false and and and this condition okay so now if I go to this home screen it's still showing but let's close this one let's go to this page still is open let's add two card see it's showing and we have the data okay now we'll fix this issue uh I will check why it's happening and I will tell you the issue actual why it's not showing the data but in meantime I hope you understand the everything this flow and everything okay and that's how we are not not able to add the cart okay so next um we are going to add the uh the complete card page okay the similar like we have here okay uh like this okay and then once you click on check out it will um went through the payment process and there everything okay so that we are going to do but before that we'll uh add this particular page once we click on view my card option okay obviously on continue shopping you can do one thing okay so on continue shopping inside the cart you can mark the set card as a false okay so just try it out if you have any question let me know in the comment section so we have one quick F here okay before moving or before implementing this uh card complete page right now we are adding this product okay into the card obviously first we are adding into our database and then we are updating inside the context okay so in in inside the context we are just updating or adding the product information okay until this point that is completely fine but the problem is uh if you see right we already added data and everything but the issue is when we are we want to remove any of the item from the cart right once we implement the feature like this right user want to delete any of this item we need to delete the record from this card as well okay and in order to delete that record we need this record ID okay so let me show you this uh API endpoint for now so this is the API get endpoint where is returning ID and obviously some value and if I add the populate question populate okay for example Banner that's fine then it will also return the product information and right now we are just storing this product information and not nothing else okay so to fix this issue we need to make sure that we also save this ID okay so that in future we want we can delete the data so what you can do let's go back in our VSC project here I will put it like this so along with the card I need to store two more field one is the ID and this ID we are getting from this response so once user uh let me show you before adding that one so once user click on add to card right it returning some data so let me go to the inspect panel go to the console or we can go to the network Tab and if I click on add to cart right if you see this API endpoint which is used to add the card this is the payload we are sending and in the preview preview is nothing but the the returning data right and this return the ID for us along with the other attributes but it rning ID for us as well okay so this ID we need to store uh inside the ID okay so let's do that so ID and we can f it from response. dat. ID okay like this and then we will store product information as well so product and we can say product only okay now now we have ID and product inside the Set Card okay and here we can say if the response is there then only execute this Set Card okay oops uh it need to be outside of this one perfect like this okay now obviously we updated here but once we Face the data in there as well we need to update it okay so if I go to this header. jsx and here we are fing the data right and if you see right now we are just adding this product information same thing we have to do it here so I will add the ID of uh product do ID okay comma product okay and this product will be I will copy this particular line like this okay now inside that we also get the updated data let me remove this console we don't need anymore and looks good to me okay once you update everything obviously if you see we got the error okay and the product is not defined okay this is called PRD only okay now we might get the error okay inside the card. jsx so let's go to the card. jsx and you need to update a lot of things here okay so first thing uh we are getting all the products from the item obviously we are fing dot products so item Dot product okay and this might help right now we update image then if I scroll down here as well we need to update so make sure to update with the products and not product so it's need to be a product okay not products and I think I made a lot of changes here and if you see now everything's working fine okay so these are some of the things uh which is not correct because sometimes the content I when I try to teste I put some dummy data let me clean everything delete it say yes now if I go back to our application let's refresh everything our card is empty now okay now let's add this item add to card and if you see it's not showing let's add this one as well add to card and if you see even though if I refresh it's still there okay perfect so this is the Quick Fix and uh I hope you understand this one okay uh if you think this is a little confusing let me know in the comment section or you can ask me question um on Instagram as well okay now when user click on this view my card we going to show a brand new card with this all the item and obviously we are giving fality to delete the item from the card or they can move to the uh payment page as well okay so for that one let's go to the uh we need to create a route right so you need to go to this project details inside that we have the component right so obviously um you don't need to make the different route you can make the route like uh my card okay you can say my card and or you can just say card okay right now we don't have that particular um API inpo but if you say card obviously we can show the card information okay so for that one inside the app folder let's create a new folder and here we can say cut okay and inside that let's create a page. jsx file Okay add the default template and save it let's say as a cut here say cut and cut and save it okay and now you see right now it's showing card and we don't have any more that 404 error because this path is now um eligible okay means it's accessible obviously if you did not log in it will not show okay so now uh we need to add the UI for that one okay so what I will do if I go to this hyper UI right and this is the inside the card section we have this card okay this beautiful page so I'm going to use this same page obviously we going to edit modified according to our need but for now let's go to the view click jsx and copy the content so here uh let me paste it here and remove this comments and save it and if you see inside our card okay now we have this beautiful checkout page how easily we implement it right perfect next obviously we need to replace this all of these things okay so let's do that one and we don't need this number actually okay so I'm going to remove that uh input as well so first thing make sure you have the card so let's get constant card comma Set Card obviously which we are using us context because whatever we are in we kept in context that one we are fing here and then inside the context we will say oh sorry um C context like this okay and then obviously we are going to iterate it so this is the list I will delete one of them and we'll keep others inside the map so let's delete this one as well let's add car do map inside that I will add item comma index and then this Arrow function let's put this list inside this div oops and then let's add the key here key index obviously I will replace this image with the image for item do product do attribute banner. data do attribute I will copy the existing one this is a little bigger so let's copy it from the card same so let's paste it here okay and save it and let's see whether we are getting the image or not so if you see right now we got error that this page need to be used uh at client side so make it use client and if you see right now we are getting that our images okay now same thing you have to do it for the title so let's copy the existing title path from the card pitch and I will paste it here oops inside the curly presses then we have this category and then pricing obviously we need to wrap inside the curly braces I remove this one and save it if I go back in our card page see it's beautifully showing okay now here uh instead of this one you can put uh the amount on the right hand side okay so that will look good so I will remove this particular pricing section from here and instead of this input and obviously I don't want this form as well let's try to put the pricing and let's see how it looks okay perfect obviously I will start with the dollar add the dollar amount okay and if I increase the size see how this is how it looks okay obviously on click of the delete we need to delete this particular record but for now I think this look good obviously now we need to calculate the sub total W discount and everything okay but for now whatever we have uh we need to add this functional but before that let's implement this sub total and all okay so obviously I'm not going to add this s add and everything okay just we will uh uh put the total amount okay so if I go down we have this subtotal we have this W I want to delete this one and only we will calculate the total okay so obviously in order to calculate the total amount I'm going to call one function we we can call where we can call it as a g uh total amount okay like this and let's define that method over here so I will say constant get total amount okay and obviously I will use card dot for each okay and let's print the element so what element okay obviously we getting the uh ID and uh product okay console.log and we put the element I just wanted to show you okay so let me go back here and now go to the inspect panel okay so you will get some understanding how it getting called okay so let me where it is okay so if you see right this is object and this is how we are getting the item okay now from that item we need to get the pricing information okay so obviously uh in order to get the pricing information you can type element dot uh product do attributes do pricing okay and now if you see we are we will only get pricing 2.99 2.99 okay now we need to do the subtotal of this pricing okay so let's define one constant here and let's define state constant total price comma set total price okay is equal to use State okay and inside that we can obviously uh couple of things you can do uh you can directly uh return the value from here okay or as I say uh you can set the value for the pricing okay this is up to you so obviously I will store here because whenever we delete item we can again call this method and then we will update the value okay so we say set total pricing is equal to Total pricing plus and this amount okay so obviously first we'll put zero value and then this value and obviously we need to make sure the value which we are adding is need to be a number okay now we have the total pricing value and inside the use effect whenever the card uh data is available okay then only we will execute get total amount like this okay now obviously once we Define here you don't need to call get total amount here we just need to call total price okay so like that way let me remove this console and let's test this out so if I refresh it here right now if you see we get only 2.99 it means it's not get added okay it's getting added but uh the this particular mean once we update the value that that state is not getting updated immediately so that's the reason we have this issue so in order to fix this issue right because as I told you very in the beginning of the course uh the state is not getting updated immediately okay and that's the reason we are getting the same value okay obviously right now in inside the state we have the 5.98 but when we are uh it's not that next next state is not getting updated okay so obviously we have the solution for that as I told you in the beginning let's remove all of the state we Define one variable called total amount okay and here we'll say total amount is equal to total price and this one okay we'll say total amount amount and then we'll return the total amount here okay and this get total amount we will call the initially as the same way we can call it here okay so get total amount here like this and if I save this one go back to our application okay we got nine because let me go back here we'll Define zero first okay initial value and if you see we got this total amount here o sorry see okay so in that way you can do that now let me remove this 2% discount because we don't want that one so check out maybe it's here oops so remove this one okay so perfect now we have clean and uh simple card okay next uh we want to remove this item okay so for that one we need to implement the API endpoint okay and if I go to the content manager settings and obviously inside API token we have the card and we have the delete operation okay and this is how we are going to call delete o sorry this is delete so delete uh operation and then we have to pass the ID which we already have so let's go to This Global API inside that we'll add uh Delete card item and say constant delete card item okay and obviously we called exus client. delete so we have delete delete function and here we'll say card so it need to be a let's say it's just cards okay so it's a cards only slash cards and plus ID and this ID we are passing here like this okay now we have delete card item AP endpoint is ready now let's go to this our card page where we want to delete it okay so we write method constant delete card item is equal to okay and let me right now we don't want that one we will remove and we'll update it once we need it and we say delete card item method now here we want to pass the ID obviously okay and this method we are going to call on that delete recycle be item okay so this is the method so this is the button for that one let's add on click method okay and call this method obviously inside that we have to pass the ID okay so which is from the item. ID okay and let's make sure that we are getting ID so console.log delete record ID and we'll print the ID in the console to make sure that we are getting correct data so go to this card go to the inspect panel let's clean everything and if I click this one see we getting 24 this if I just click on this one we getting 24 okay perfect it means we are getting the cart information now let me close this one and we have to call that API Global API dot delete card item okay and then pass the ID dot then we get response and we get console. log response obviously so obviously once you call this one right you need to call uh the get uh cart item again okay to get the latest cart information so obviously we have that inside our header so let's copy the same method okay so this method we are going to call you want to copy actually inside this okay obviously you can put in one uh file okay and you from there as well you can call it but for now we sorry we'll keep it here only what happened I don't know okay yeah so card item and we can call it up here so if response is there then we can call card item and here we can write the error message if there is any error okay so console.log if some error is happen then it will console it for us okay and for now obviously we are getting all the card information obviously here we need the users information so what I do I will Define the user here constant user is equal to use user okay so that we can able to uh pass this email address and everything okay make sure everything is uh properly there okay and let's save this one and let's test this out so now we have two card if I remove one of them okay oh that's where the we are getting three items let me check why okay so let's refresh the screen once so if you see right actually it's deleted okay but it's also showing the two item okay we'll find out why this is happening that's maybe because um let me go back here we have to make sure that our cart item is okay so that okay I found the issue okay so when we call this get item card right obviously we are setting the item so it's adding the existing item along with that previous item okay so we have to make sure uh when we calling this get card item and we have successful response then we have to make sure that in set cart when we are setting it's empty okay before adding the new data so if if You observe right this is the set card we have to make sure right now it's empty okay when you are cing get item so let's try this out again if I delete it and if you see now it's item deleted okay let's test this out again uh so let's go to the homepage let's open any of these for example if I want to add this one into the card it's showing here let's add this one as well let's add to card see both the things are added let's add one more so let me go back to add another one we'll add this one add to cut now three item added okay if I go to this view my card right now we did not add the um navigation to this view my card okay let's add that one so we don't will we will not miss that point so obviously uh inside that is inside the header and uh inside the header we have this shopping cart item oop sorry not this one this cart item and here we have button called view my cart okay so here we'll just navigate to this slash card okay let's test this out if I go to this view my card it will go into the card it will showing this beautiful um all the cards okay obviously you can add that um skeleton effect okay I'm not going to show you again how to add that because that's the reason I added inside the project detail screen and show you how to add it okay now once we are here let's delete this second item if I delete the second item see the all the not only this one but this card information get also updated beautiful right so perfect so I hope you understand how to delete the card information obviously you can show the toast message if you want it's up to you okay and you can try this as your own as well okay now one more thing I want to show because this is all the the com e-commerce site which we made is is a digital products and these digital products we are going to send through the email okay so here as well we can give option to the user to add email address okay but by default we are going to send email to the users um email Emil ID register email ID okay so what we are going to do we are going to write a message here so inside the card page let me go to this card page okay and before uh after this total amount right after maybe before the total we can write that one so who sorry so after this condition we can write the note h2 tag note we'll say and uh all the digital content will send you on will send on your registered email address okay let's see how it looks wa so actually we want that in below this one okay so let me copy this let me put this format document so okay so maybe uh we can add after this one let's see how it looks see like this o sorry so it's not that good actually I don't like here okay so better you can um add one horizontal line or maybe uh we can show I don't know where to show that one okay but yeah that's fine we can show after this check out button as well yeah that's so fine I think this is good to show it here okay obviously I want to change the color and everything so let's say class name text Gray 400 and we'll change the font to 14 Excel and if I go back see perfect okay so it's saying all the detail Conta will send to register email address everything now obviously user click on check out button it will navigate to the payment page okay and once the payment is completed then we going to trigger the email to send the all the digital content to their email address okay perfect so guys I hope you understand how we implemented this beautiful uh card page and very simple right we added this beautiful functionality to delete the from the card also we show all the items along the prices also we calculate the pricing information and also we made sure that this card getting updated even though we delete this any of the record okay so if you have any question let me know in the comment section and if you did not subscribe to my Channel please do subscribe so now we are going to implement the checkout page where user can make a payment okay so obviously we are going to use the stripe payment Gateway okay so stripe payment Gateway is one of the best and uh market leader payment Gateway in the market right now and this payment Gateway uh you can use from any country okay so you just need to log to the account okay and if you don't have account create a new one so I already uh have account and I just log in and once you land on the homepage you'll see this dashboard okay so over here if you see um you will get all the analytics there are lot of feature you can just uh explore it right now I'm in the test mode okay once you submitted all the documents and everything then you can move to the live mode okay here you have publisher key and the secret key so copy this publisher key this is very important so once you log in you'll get these Keys okay and in en. loal I'm going to add it here okay so this is next we add next public and stripe publisher key and I will paste my key okay then we have to add this secret key okay so just add the secret key so this secret key we are going to use on the server side okay I'm going to tell you how to create API for that one so just say uh stripe secretor key okay is equal to and the paste the key which you copied and save it once you save this both this uh key right then uh I kept the documentation Link in the description okay so this is the documentation in order to add the stripe inside the react okay so if I go to this particular URL okay the stripe.com do the strip DJs react okay so this is the SDK so a very simple thing for first you need to uh install this dependency so copy this dependency go to your project and paste it uh inside the terminal okay then you have to create a new page okay so first thing what we going to do if I go to the project on the click of checkout we're going to open the new page okay so uh let's go back okay you make sure that our strap is installed okay then inside the app folder we create a new folder and we can call it as a checkout okay simple and then inside that I will add the page. jsx file add the default template and we'll remain it to check out okay like this and save it here also I will keep one more folder for the components okay so all the components which is needed for this checkout we keep in this folder okay now inside the uh card page okay so inside this page. jxx in the inside the the card right we have here this check out page okay just give the uh the H reference as a sorry uh the checkout okay so once us click on that one it will jump to the checkout page okay let me refresh the screen let's save this one as well okay and if I refresh it let's go check out and if you go it's going to going to check out and here it's showing the text check out for now okay perfect so right now we are in the checkout uh screen next thing uh let's go to this checkout okay just clean this up and go to this documentation okay so first thing you need to add this stripe promise okay so if which will load the stripe so here I will add it here like this okay and obviously this this uh this is the publisher key so which is we are need to get from the environment ver say EnV Dot and we have have to Cy this publisher key okay like this then we need to add options okay so don't go with this one I will tell you how to add that okay so what you need to do let's just copy this above okay it help us to just load okay so here you have to add constant options okay is equal to and here you can add more you can say payments payment then you can add currency and you can say USD okay it's not that much important even if you did not provide that's also fine then you if you go to here okay here you the elements you need to provide so copy this as it is and paste it inside the return return okay make sure to import these elements okay and we already providing strip stripies which is important and option which is actually optional okay and now we need to create a new new checkout form okay so if I scroll down here we need to create a new checkout form component okay so inside the component folder I will create the this checkout form okay you can give name whatever you want I will keep uh as it is and add the default template again here okay and obviously make sure to import this checkout form then inside the checkout form you have to add this form which contain the payment element and the simple button submit button okay let me replace this and make sure to import this payment element okay and this is simple button so obviously you can replace with the button like this okay so this button we are importing from I don't know why it's not imported that's fine okay keep as it is for now and save it then we can uh apply some styling later on and if you scroll down right this is the different thing that when you submit the page that's how it will uh show okay for now let's go back to our application okay and if you see right it's showing that you need to add the use client here because this checkout page we are using on the client side so make use client and save it okay let me go back here even though it's saying the L Type is not defined so here you need to import this load stripy save it and make sure okay okay so it's saying missing amount number here you can give any amount number okay right now it's not uh valid but you can give like this okay so amount number for the currency because we are ping option and if you see we got the predefined UI for this um strappy payment okay right now if you see it's uh spread all over the screen okay so you can obviously um apply some styling to this one so let's go to the checkout form and here you can apply some styling okay so let's add D tag to this one okay and here you can say class name padding x 30 maybe 30 is not there 30 two okay and if you see now it is in the center see still we need a lot of padding I don't know how but yeah you can give that one so for small K you can give that this much and for medium or larger screen you can give more padding for example you can say padding X to or you can say margin x 200 pixel I don't know how much it is so on the smaller screen okay this this is much better okay you can give more styling to this one and then you can give margin top to 12 okay so I added this 250 padding when the screen size is larger okay and this look much better now you can also apply some styling to the submit button oop sorry so let's go to this uh submit button here you can apply some styling so we'll add class name we'll say um background primary and we'll say padding of two text white grounded medium okay and we to be full like this okay obviously uh I will keep this button along with this TP okay and we'll give some margin from the top six like this okay and this look much better see let's give some H effect to this one a h then obviously um we can change color to Blue 700 okay if I H on it see okay perfect so this is pretty much we are done okay but the now the thing is obviously you can fill the details um and everything but if you go to this documentation here you need to add couple of more thing okay so obviously you need to handle the on submit method so okay so add this onsubmit and instead for this form just add it here like this okay and and make sure to add this handle submit method so add this handle submit method over here okay and save it now um let's save everything make sure everything is added you have to add this two more things okay which is the uh hooks okay stripy hooks let's add that one and make sure to import this so import use stripe and the use element as well and save it now if I go back back to application and let's try to add some value so these are these are this is the um testing card okay you can use a actual card as well and you can test it out and I will add some number okay and click submit and if you see we got one error so let's go to the inspect panel console and it's saying that integration you must pass a client secret when calling the stripe confirm payment okay so what happen you uh if I go back here right here inside the confirm payment we need to add the client secret key okay so over here before element we can add the client secret but we need to add client secret key and we don't have the the one which the strip provide that we cannot add because every for every payment um the strip we need to generate a new instance and from the new instance we need a unique secret key okay so in order to uh do that right we have to create one API okay inside the nextjs only so in order to create API okay you have to create a new folder inside app and we can call it as API so whatever the API you are going to create you will it will come under this um API folder okay and then obviously for example if we have local 3,000 / API and what are the name you want to give for example G data okay this is the API endpoint or you have to say for example post data this is another endpoint so whatever the endpoint you want to give uh you can just write that folder name for example the similar like a route which we created okay so in this case we say create intent okay and inside that we'll create route. jsx okay in this case we create TSX and then here you have to write your code okay so let's uh go to this sorry let's go to this route. TSX okay so now I already have the code ready for us okay because I don't want to uh explain all all of this API uh endpoint you can just copy from the S because which is not going to change okay and it's very common for everywhere so I will just paste it out here so let's paste this out and this is added okay now if you see right now we are getting error as a stripe okay and let me go back to the package.json because there is one more uh what I say package we need to add okay and which is the stripe so right now if you see we have this stripe here okay but along with that one we have to add stripe of stripe colon and the version we need to add okay so in this case we need to add sorry 13. 2.0 okay let's double quote everywhere else it's same do comma okay and now make sure to install the node model for that one just do npmi okay so it will install the remaining of which is not the inside the package so in this case the stripe which we added here okay it will install that one and is install Perfect now close this one and go back to our code so right now uh let me check the environment variable so this is the stripe secret key and I want the same key here okay let me increase the size Okay so perfect we have this stripe secret key then we have to write typescript is true because it is TSX file then API version and we are making this post call okay so whatever the value we are passing here okay so for example obviously we need to pass the amount and then that amount I F here okay and and save inside this constant called amount okay and this amount I'm passing here obviously we have to multiply it by 100 and obviously currency is USD and from the next uh response. Js will'll get the response if it is successful okay obviously it's very simple but if you face any issue you can just take a screenshot and you can Implement on your own now once we implemented this API in point you have to make a API call here okay so before this confir payment I will make API call so constant result await okay we'll make simple fet uh call okay here you can call it like/ API slash create intent okay and inside that you have to write method which method you are calling so in this case we'll calling post method okay then we have to pass body inside body we have to pass amount obviously so body say Json oh sorry json. stringify okay and amount value amount of maybe we can hard code it for now as a f only okay okay and then we get the secret or we can say just client secret is equal to await response. Chon okay so from this one we'll get the whatever the uh this API is returning we'll get it and we'll save it in client secret and this client secret now we'll pass it here like this okay obviously once the payment is confirm what we can do we can um navigate to the home screen okay so just I will copy this one okay because I I we will add obviously the successful page later on but for now we don't have so I will add like this only okay and save everything now let's test this out our page this one go to this inspect panel go to this payment uh view my card this is our card let's do the checkout now just let's test this out open thec Panel okay let's clean everything and make add a demo card okay and click to submit and if you see okay so we got one error and it's saying that element submit must be called before strike confirm payment okay so let's go to this particular documentation okay and inside the documentation uh it mention all the steps which we already taken also if you want to uh get the code regarding how to connect or how to create the API intent okay so this is the example okay where it help us to create intent for us okay and if you see this is the checkout form so think is uh we need to trigger this element submit before confirming the payment okay so here we have confirm payment here we are getting this um secret key client secret key so here we need to trigger this one okay so I will go copy it and paste it here like this and save it okay and also make sure you added this handle error method so okay and let's save everything so obviously we don't have set loading let's define that one so if you see this loading we will Define it here okay so let's go back paste it here and save it now let's test this out so it's saying use state is not defined let's define the use St and let's clean everything everything's good let's add the default card and some Z ID and click enter if I click submit and now if you see it's get redirected to the homepage because we gave the redir URL as a homepage it means we got the successful uh payment okay and if you see the uh in the URL it also showing the payment intent along with the all these details like uh whether it's a succeed or not okay and everything and if you want to check in the strappy uh dashboard let's go to strappy dashboard and if you go to the payments okay and just now we made this payment see okay and obviously it's a $5 because we hard coded the value as a $5 and that's the reason it's showing this $5 okay so I hope you understand this how to integrate the payment okay now obviously uh what you need to do okay right now let me increase the size on the che on the checkout button inside the card page right so we have this card page here okay and we added this checkout okay but for now what we did we just um implement the slash checkout okay along with that we need to send uh the amount value as well okay and then uh obviously uh you can replace this a button with the actual router push and then we will actually pass the value inside the query parameter so that we can pass the whatever the total amount is there inside this payment Gateway okay so we'll do it now now let's send the actual value to the payment right now as we know we hardcoded this value right so uh let's go to the card pimp and inside the checkout button right we will convert this to actual button and we will remove this H reference from here okay so it up to you how do you want to keep and uh instead of this one what I'm going to do I'm going to use route constant because this point also cover uh if you want to programmatically um navigate from between the screen okay so here you define you to Define router is equal to use router okay and if you see this use router is importing from the next SL navigation then on the click of this checkout button so over here we'll add on click method on click and then we will need push that particular screen so router. push and the path name which is the checkout along with that we need to send amount value so amount is equal to and obviously we'll get the amount value from the gate total amount like this okay so obviously you can write this cart if cart is there you can then get the total amount okay and now we have this total amount let's save this and let's test this out whether we are getting that information so let's go to the card first and once we are in the card let's click on the checkout and if you see here in the URL the amount get added okay now once we have the amount right me bring this we have to go to the checkout form and not checkout form actually but we need to go to this page. jsx okay where we are going to accept uh the payment which we received okay so inside this one we need to write constant because we need to get this value right we need to get this amount value Val so in order to get the amount value you have to write constant you can give the constant name search params is equal to use search param okay and obviously if I try to print it out here console.log okay we need to bring this inside the function actually and we'll write search params do gate and here you need to pass the f fill name which you want to Fitch from the parameter and if I save it let's go to this inspect panel console and if you see we got this amount 5.98 okay now this value we need to pass everywhere else okay so you can store in one state or you can use directly here like this okay so here just do into 100 as we are not using this option but we need it is mandatory to pass okay and now inside the checkout form we need to pass this value so we'll say amount is equal to the search from the get amount okay and inside the checkout form accept it here as amount so that we can pass over here okay and now save it now there just refresh this window 5.98 and let's make a payment okay also just to tell you one thing I added one more uh the uh payment confirm page okay so it's just simple page I will show you how it looks but let's make some payment first and click submit okay and once it submit right oh I I think I forgot to submit I don't know why it's not work let's check the console okay so we need to refresh the screen because I think that's the issue so I forgot to save the um one screen okay so just refresh it again write out and click submit okay and once you submit if you see we send this we are showing this successful message okay and here we have this intent and everything and if I click to the go home it will redirect to the home page okay and now our p is successful but obviously we we are not uh clearing this card as well as we are not uh creating any order or saving the order inside our database okay so obviously we need to create a new content type and then inside that once the payment is confirmed we need to save the data okay so that we'll do in the next section but I hope you understand how to make the uh or integrate the strapy payment inside the application it's very easy and this particular documentation link I will past inside the uh description you can so that you can take a reference of it okay and so see you in the next section now in this particular section we are going to create order once the payment is completed okay so here right now we uh added the order okay sorry we made the payment and once the payment is successful okay so once the payment is made we have to make sure that we we want to create the order and we'll store inside the strappy okay so here we can just say order create okay and obviously stpy will uh return some response and once the stpy return the response we had along with the order creation we also need to make sure we are deleting all card data from strappy okay this is the this is different way that we are doing okay every everyone is is doing separate way that they are sometimes Mark the cart item as a completed because if you see right inside the cart item for this particular user we have to information okay you can mark this card as a uh complete order completed but I'm going to delete make sure nothing is there okay and then this card will be empty so let's Implement that functionality so go to the view my card and obviously inside the checkout okay here we have this form and when we click submit we are going to call one method which will create the order okay so I already created the collection for that one okay so if I go here and inside the order here I added this collection called email username amount of the particular order and products who which that user purchase okay this products nothing but I mean this a relation with the product okay so it's very easy if I go here I right now I kept order has belong to many products okay so let's go back to our application and go back to our vs code and inside here let's create a new API so go to this uh Global oops okay I wasn't in wrong project anyway so let's search for the global API and inside here we'll create API to create order okay so will be a constant create order is equal to data obviously this will be a post method so exus client and here dot post and here will be orders okay comma data so here uh we need to export this one so can we can use everywhere else and save it okay now let me close all these tabs first and then go to the uh check out page okay this this is a page. js6 okay so inside here we're going to implement not here inside checkout form we will add it because we have the handle submit over here okay so I will write the method below of this handle submit so let's constant create order is equal to Global API do create order here we obviously pass need to pass data then and the response okay so obviously here we'll make constant data is equal to again we need to pass the data in this format okay because when we posting anything or creating any data we need to for pass this in the form of data okay so first thing email okay so obviously uh we need to get a user email so we'll Define the user first from the use user hook which is importing from Clerk and here I will pass EMA user Dot primary email address. email address okay then we have usern name which will be user dot full name then we have the um amount so we will be a total amount and which is the amount which we are getting here okay as it is I'm using that one so let's make sure that we are using amount or total amount so it's just amount okay not the total so make it amount and the last is product so obviously this product uh need to be in the format of this number okay product ID like this but right now we don't have product ID right so we need to get the uh array of the product ID okay so we'll Define uh so here what we can do because let's define product product IDs is equal to empty and we need to get the cart information first right from the context so I will Define constant cart comma set card is equal to use context and here will be a user oh sorry card context my bad so card context like this okay now we have the cart information as well so simply here we'll add card dot for each for each okay and then inside that one we need to push the item inside the card obviously the we need to get the product ID so it will be in the element dot product question mark. ID we'll keep like this simply okay now we have the all the product IDs and that product IDs we need to pass it here perfect and obviously we are passing in the here the data that's all and if the response then just console the response here and save it obviously whenever uh we are uh doing on submit on the payment I will going to call this method like here create order okay now take this out so add the card details some date it need to be a future date so I will add some future dates some zip code and if I try to submit it and if you see it gets submitted it means order is get created let's check it out so let's go to strappy and if you see order is get created so inside the order we have the number which uh the order number sorry order product ID is then email username and the amount perfect okay it means order is get created now the thing is let's go to homepage and if you see still in our card is showing this item because we never cleared our item and inside this card if you see we have this item as well okay so we need to either we need to delete this item or we need to update the status okay but in this case we are going to delete this one so obviously uh you cannot do the bulk delete inside the stripy so what you can do the same logic which we we use here right uh in once the respon is successful I will paste it here and instead of let's remove completely and call the delete API here Global API do delete card item okay and here just pass element. ID okay so if we have three item the three time this method will get called say then and the result I will say some different name okay perfect and nothing else you need to do and let's test this out now so let's go to the view my card go to the checkout and over here now we'll fill the details some ID and done and click submit so once it submit the payment is successful and now if you see our card is also get clear okay so we don't have anymore uh the item in the card once the uh let's check out in the card and if you see the item is deleted only for that user okay and uh if you see we have now second order because we created two times okay perfect so I hope you understand how to create the orders okay and how to show it now you can obviously uh create a option here to see the previous order as well okay but for now uh we'll keep as it is okay and next we need to make sure we will going to send um the email to the user okay with the along with the all the details so we'll learn how to send an email as well in the next section we are going to use recent to send an email to the user okay so if you don't know about the recent recent is one of the best uh email service provider and uh it has a very good hdk for the next uh JS okay and it's a completely free if you go to the pricing you can sell up to 3,000 email per month and 100 email per day so which is efficient for any developer okay so if you don't don't have an account just create a new one I already have have an account okay so if you see I will I can go here okay and once you launch on this particular page you might see the homepage like this okay where you can create a new API key and this is this is the some uh uh code to implement it okay and on the Google side by side you can open recent nextjs okay which is obviously a documentation from the recent uh to how to integrate the recent uh recent inside your nextjs application okay so before that let's create an API so just click create go here and if you see the API is is great created here if I go to the API Keys here you see onboarding okay I I also have this digital e-commerce I already created but the one which you created just copy that one and because you once you copy it you cannot uh repl mean uh copy it again okay so if I go back in our application go to this env. looc and just paste it here okay so so here I will say recent API _ key and paste the API key which you copied next Once you copied right you are all good to set to imp integrate this uh recent okay so copy this recent command go to your terminal and just paste it here okay so inside the terminal just paste it here like this okay next next uh let me close this terminal next we need to add a email template okay this is a very simple email template obviously we going to change it and I will tell you how to implement a beautiful template but for now uh let's create this template name so you can create anything but I will keep everything same so inside the compon folder I will create the email template. jsx and copy the all the command so whatever the it is written inside this copy this code now if you see we got this error because we are not using typ read so I will delete this interface and I will delete this as well okay and we'll keep Simple uh method here and save it okay now we have the email template which is quite simple just saying that welcome and the name of the user then if you scroll down we have uh this we have to create this API okay which is the API s API so as we are using App router so we have to use this particular uh code so right now let's go to this API folder and inside that in API folder create an folder called uh send email okay you can create whatever name you can give that is our your will be your route and inside that create route dot JS file and copy all this command okay so let me delete this template because sorry the import because we will import a new so if you see this is theil template make sure is we are importing correctly and the API key okay so make sure let me copy from the EnV do EnV file and inside the route let paste this out okay which is correct and now here if you see you can right now uh if you don't have any domain connected right if you see here we have section called domain and from here you can uh add a domain but if you don't have any domain you can send a email through this email ID okay which is onboarding do recent. and you can send to any user for now I want to send to user like account at tub Guru g.com obviously we are going to um yes send here email actual email address okay to the user but for a testing purpose I will add this my own own email address and save everything now our uh email API is also ready now let's go to our check out form where we created this order and Method okay here we'll create a new method called constant send email and inside that we will uh we need to call that API okay so I will copy this existing logic which is the fet same thing we'll paste it here okay and we'll make this a sync and just call send email okay obviously um right now there is no need of body but we'll keep as it is and call this same meter maybe after create order so here we are creating order just call the same email as well and save it and now let's test this out so let's add something into card to make a payment go to view to my card check out and add the payment details here so here add some details and Z code and now if I click submit so if you see it gets submitted successfully okay even though you can check uh the log inside this recent okay whether is successful not and right now just one I sent which is uh string 200 stat which is successful let me go to the my email address okay and if you see I got this email called onboarding successful these are the one which I already tested but just make sure everything is working okay so if you see we have this uh email send from our application now let's um modify this particular template because right now it's just a a basic template okay so for that one we are going to use react. email okay just click explore component and here you will see how to uh use it okay because it it helps it add the HTML component button and everything okay but if if you think it's hard to design the email template if you go to this section called example okay so click on that one and here you will see the all the example okay so you can copy the existing one for example if you want to send the receipt just uh click on this Source icon okay here and copy all these things see okay same thing uh you have lot of option here okay and you can copy the one you which the template which you like more and then you can uh use that one in your application okay so I'm going to create my own uh email template here okay and uh you can also go ahead and try it and uh if you face any issue um you can access my sour code anytime but uh uh I will pause video here and I will implement this this particular email template okay by going to the source and I will just copy this one obviously uh you have to make sure that you will import the react email uh so let me go back inside the react email maybe here okay and here you can see the documentation okay and you you have to select manual setup okay so you have to install this particular components which is react components and uh you don't need to set this packet inside packet. Json because it just help to run or pre your email ID okay and then uh this is the simple example they show and how it looks okay see and you can even see uh the template view in your local so what I'm going to do let's copy this method okay let me show you and enter it and you can obviously as I as I say you can just view the template but now you can add the button or anything okay so for example let me copy this button go to your template which you have inside the component and email template okay and I'll copy all the HTML code from here bring this and I will paste it here simply see okay now obviously you need to import this button from this react email okay and same thing for the HTML as well from the react email component and save it and now this particular button will display on uh when you send an email okay so try it out and let me know if you have any question so I will just use this uh uh uh existing uh template okay so mostly I will use this one copy this source code and put it in your code now let's test this out I added some couple of things so here inside the send email I inside the body I added the amount the email address the full name okay and in inside the route Okay I accept accept it here as a body and inside the body tag we have this uh where I'm going to send email and the email address where we want to send it okay we can change subject and I pass the body inside the email template so email template which I say right I copy the same email template here and inside here accept it has a body and passing the full name simply okay so now let's test this out so enter the information and some chip code and you once you click submit it will uh complete our payment method and everything okay now you can even check the email which you sent okay the currently if you see just now I sent this email okay and inside the lock if you email any of the email fail you can see it here but if you once you check you can check your email ID here okay now uh if I go back here and view email you can even see email how it looks so right now is simple email email template I added here okay with my uh Banner the message okay and if you see it's also showing the username as well okay and here we are giving option to download it okay so if I if you go here right you see I'm gotting some I got some email and once I click on download here I'm able to download this particular file okay so this particular application I already uh develop okay this part project you can find on tui.com and here you will find this file sharing app okay so you can access the source code you can watch this complete video and from that one I this this particular template is coming from okay so I hope you understand this one if obviously um we I already implemented a lot of things inside this uh sending email because of this uh length of the video but if you face any issue let me know in the comment section or you can access my source code okay so I hope you understand this particular Course and there are lot of things we implemented and we learn uh while developing this particular project okay so guys uh that's all for this particular uh video and I hope you enjoy it and if you really like this video press like button share this with your friends and family H until that keep smiling and see you in the next video

Channel: TubeGuruji

Views: 14,210

Keywords: Build Full Stack Digital E-Commerce NextJs 14 App, e-commerce nextjs, digital-e-commerce, ecommerce react js, react js, next js, react ecommerce, react ecommerce project, ecommerce app, fullstack javascript, next js tutorial for beginners, next js ecommerce app, ecommerce react js strapi, ecommerce react js frontend, ecommerce react js tailwind, react ecommerce website

Id: Dsw0pMnblWg

Length: 267min 7sec (16027 seconds)

Published: Sun Dec 17 2023