React SPA Development & Deployment: Netlify/Vercel Guide

Key Takeaways

words, right? And all of that. Okay, today is the last session, so maybe uh I'm not audible? Uh just a second. Uh is it with uh all of you or rest of you are able to hear me clearly? Uh yes, audible. I think I'm audible. Uh probably you can just uh increase the volume. Maybe that can help. All right. So, uh one ques- increase the volume. Uh the volume I I don't uh control the volume uh actually. Right? Maybe you are sitting in a uh crowd place. Probably. Everything is clear. My bug is not working. Clear here. Volume is good. Okay, uh it should be fine. So, this is the uh GitHub repo on which uh we are basically working, right? So, we are working on uh React. All right. Uh So, guys, if you have any doubts, we can have your questions as well since this will be the last session. Uh maybe we can address these questions at the end. Uh Okay, maybe I'll I'll I'll give you some time to uh to ask the questions at the end. Uh but let's continue with the project first, and let's learn few few really good things in the React today. Right? Uh So, maybe let's go to react.dev. If you go to reference, then you will realize that React is relatively a smaller library, right? It does not have lot of things in there, right? Uh if you see the overview part, the hooks part, there are couple of hooks uh which you can definitely use, but the most important hooks we have already seen, right? Uh you can go through the other hooks as well. Uh maybe in the today's session we can discuss about custom hooks as well, right? How you can write your own hooks. So, we can do that, but first of all, let's uh Okay. So, uh in the previous session we have discussed about how state works, what are props in React, uh how do we attach events, right? Uh so, all of those things. So, anyway, guys, if you are not uh saying anything, you can keep your video uh off. And uh if you have anything, you can uh speak in the mic. I I think, right? Okay. Okay. So, let me continue with the shopping cart and let's add a few more features to it and we will finally deploy it to the Netlify, right? And that's a very, very easy deployment that you can do for your projects. So, I'll just CD into the shopping cart. So, this is the change directory command. I can just change the directory to shopping cart and uh this is my react application basically, right? So, I let me just uh restart the server. So, the server has uh started and uh let's just fire up the server in the browser as well. So, okay. So, this is the {slash} path, but if you go to {slash} products, you'll actually get the products from fake store. That is what at least we have done. Uh few words in Hindi. I think uh English is more inclusive uh given the kind of audience we have. So, we actually worked on this feature as well, like how to uh basically show a single product. And then I told you that you can definitely associate uh the comments with these products, right? Uh sir, have you shared your screen? Yes, I have shared it. Can you see my screen? The uh application. The shopping cart application. Yes, others can see it. Take care. For the time like that. I know uh to make sure that everything is working fine. Anyway, uh uh All right. So, let's continue. So, what I would like to do in the today's session is that maybe we can add a banner session. Banner right over here at the uh just below the navbar. Right? In the all products page, we can have that banner. And I'll use the already built-in banner, right? That I'm using in my course. Uh maybe it should be there in in Just a second. So, let me use the banner from my existing So, I'm not going to write the CSS in because it's a very simple banner. I'll show you the code. I'll walk you through the code as well. Not a big deal. So, you can see there is this banner and this is what the banner is. It It is having a box and it has got few CSS in there. And then the heading and all, right? So, I'm going to use the same banner so that the UI is little bit more aesthetic, right? Uh for our e-commerce app. So, what we can do is you I guess you now know very well that we can definitely create a simple component to do this and I can just say banner. dart jsx. Uh jsx, right? And let me just paste that code and let's go to the pages all products. And here we can include our banner, right? Like this. And okay, it also has something called search bar, right? So, let's uh let's have that search bar from here only, right? So, there is a search bar. Simple search bar again uh created using material UI, right? Let me just copy this. And uh Let's create one more component that is or let's create a folder first. Search bar. Right. And let me just write searchbar.jsx. That's it. This should resolve the issue that we were getting. Okay, so now you can see uh we are actually getting this banner and we can get rid of this heading. We don't need it anymore. And uh we can have some margin as well. Right? So, that can be done via different way in React. So, one second. Maybe let's go here and uh let's say margin top has to be 10. Save. You can see there is now some spacing below the banner. We can have this We can change it to five. Okay. Okay. Yeah, okay, yeah, about the uh I joined late. Could you brief what we are teaching? So, we are building this application. We are continuing with the uh implementation of the shopping cart that we were doing in the previous two sessions. And today I'm going to introduce few more good things in this application. Right? Can you share the official YouTube channel of GFG for recording? Yeah, you can just see the YouTube channel uh Okay. So this is the YouTube channel. Uh okay. And you can see the videos here, I think. This is the GFG YouTube channel, okay. Let me paste the link. Just a second. So try. So this is the channel uh where these videos are available, okay. You can just search like uh and you'll find these videos. You can search for this Masterman, right? You'll find it, I think. Okay. Uh Okay, let's let's focus now. Let's focus now what uh on the things which we need to do today. Uh so we have added the banner. Now what I want is uh I want to add a card functionality. So that, for example, let's say uh what I want is if someone clicks in him in there and if he clicks, we can have a button right over here, right? So let me go to show product and we can basically have a button and that button can basically uh says that, "Okay, add to cart." or something like that, right? So if someone clicks on that add to cart button, we should be we should be adding the Let me just remove this for now. And let me say add to cart. Save. So, there is this add to cart button that we have now. Uh if you want, I can just move this into the next uh I think waiting room. So, I have added, I think, all of the people who are with debating, right? So, all right, guys. I think that's fine. Rest of you rest other people can join through YouTube or Okay, I have I'll admitted all the people who were waiting in the uh were waiting to join the call for an enterprise application. We'll talk about those those uh things. TSX versus JSX uh TypeScript versus JavaScript. We'll talk about those things at the end. But, let me first quickly finish this part, uh the concept that I'm going to discuss. So, let's say box. Let me create a box first. Uh And I think we have it. So, now we have a button right over here. And what I want is that we should display a kind of card right over here, right? And we should display that, okay, the site item is added to the card, right? So, I I also want to display like how many items are there in the card. So, for example, if there are uh four items in the card, then I want to display a kind of badge, right? So, what is a badge? Let me tell you that. Uh yeah, I'm Okay. Badge. Okay. So, that's okay. Uh you can just stop your videos, uh I think, because that's not needed. So, this is what badge is, right? I just want to display the number of items in the card at this place. So, we can have some icon also in at at this place instead of a card and let's have the icons. So you can use material icon from the material UI only. Let me just close this and let's see. Let me just search for icons here. Right, material icons and you can see there are a lot of icons in there and what I want is I want a card icon. Right? So we can use this one if you want, right? So you can see this is a component and we can just place this component inside the navbar. So this is the navbar. Let me just import it like this and instead of a this text, we can basically use this thing. Save and uh you can see the cart button right over here. Right? Or the cart icon right over here. So this is how easy it is to basically add the icons using material UI. Now what I want is if someone clicks on this, it should be added to the cart. So how do you what do you think how we can achieve this? Any idea? How can we do this? So let me increase the font size as well. And okay, what do you think how how we can manage the cart? Chirag is saying use context hook. Okay. Why use context hook? No idea? On click, we need to change the state using event. Definitely, see the first thing would be that definitely we would need an event, right? So, for example, if you click on this button, then we want definitely want to perform some action, right? So, that's understood. That's fine. What's next? State management, all the event on the context. See, uh on click event and listener. See, the thing right over here is so there are two things, okay? So, if you click on this this button, right? So, this is the cart page. We also want to list down all the items which are there in the cart, right? And at the same time, this is my nav bar, right? So, I want to display the number of items in the nav bar, right? So, there are two things. First is I want to display the number of items in the nav bar. Second is I want to display the items actual items which are there in the cart, right? So, two things. Uh let me admit others as well. Okay. So, what we need is what the problem right over here is that this is my cart page, okay? And then the second thing is the nav bar, right? This is my nav bar. Now, at this place, I want to basically display that, okay, these are the number of items in the cart, right? Let's say four, right? I want to display this. Second is I also want to display the items exact items. I want to list down exact items which are there in the cart. So, like this. Uh let me just copy. So, this is what exactly I want. Right? So, you will see the cart information, right? So, the number of items which are there in the cart and the cart itself is basically getting utilized in two components. One is the cart page, second is the navbar. Because in the navbar, we need how many items are there. Here, we need what exactly the items are there in the cart, right? So, I hope the problem statement is clear to everyone. The problem statement is clear? Right? We need cart information in two components, right? So, sometimes what happens is in the applications, right? Whenever we create a enterprise application, so the requirement usually comes in wherein we need to pass some information in multiple components, right? So, what are the different ways by which we can pass data inside the component? What are the different ways by which we can pass the data inside the component? Props, right? Props are the conventional way by which you can basically pass anything inside the component that we already know, right? But, since right over here, we we have two components where we need this information, so we can do this via props, right? So, this can be done via props, but think of a situation wherein we need this information in multiple components. For example, let's say whether the user is logged in or not, so this information can be required in multiple components, so you cannot pass props for all of those components, right? For each of those components, you cannot have just props, right? Because uh we will we will have long props chain in that case, and that's make your application performance slow, right? So, what we need is we need something like a global state, right? So, what we can do is we can create a global state somehow, right? Global state. And this global state can then be passed down to then this global state should be accessible in each component directly without props, right? Not via props, but directly via some other other way, right? So, we can create this global state kind of thing. Herein I can simply have two things. First is I can have cards array, right? Which contain the items which are there in the card, and we can have a card length, right? Uh which could be nothing but cart.length, right? So, cart.length. So, whatever the uh l e n g t h, so whatever the length of your cart is, uh that is what the value of cart length would be, right? So, uh So, so this is what I want now, right? So that you understand this another concept by which we can basically pass some data globally in our React application, right? So that that information can be accessible or can be accessed in all the components out there in React, right? So, uh so what we can do is we can basically use a something called context API, right? So, let me just show you this, use context, right? So, use context is a React hook that lets you subscribe to context from your component, right? Let's see the usage. Uh passing data deeply into the tree, right? Updating data passed via context and all of this, right? So, the main idea of context is that it allows us to basically, you know, we can basically create a context. So, context is a kind of it help us basically creating this global state and then we can basically access this context in our application from any component. Right? Whichever that component is and however deep that component could be, right? So, let's now let's now try and create the context and let's see how we can create the global state in the React application. Right? So, this is a very very classical use case of global like this is a very very classical use case for passing the data globally, right? So, let's now do one thing. Let's say something like a store. Let's create a store. We can call it a store. Store is generally used to denote that okay, this is store is kind of accessible across the application, right? So, what I can now do is I can just create something called cart context. Cart context .jsx, right? It would be a jsx element, right? And I can just say r a f c e and what I can do is So, there are two things. Whenever we create context, so there are two processes. Just look look here carefully. What I'm trying to say is e First is this is let's say your app, right? And then there could be multiple components inside your app, right? There could be multiple components in that. So, the first what we need to do is we need to first, basically pass the context to the app. Right? We should enable the context. Right? And the How do we enable it? With the help of something called context provider. Right? So, first, what we need to do is we have to create a context provider. Right? And then, what we can do is we can use using that provider, we can pass the context in our app. And then, we can consume that provided context inside any component. And we'll see how. Right? So, first, right over here, what I'm going to write is the provider code. How do we create providers? Right? Which can basically uh pass the context in the application. How do we create such providers? Right? So, it would be very similar to this. So, the way we are passing or enabling the browser router, the same way we are going to create our own uh provider. So, this is also a kind of provider. Right? Which basically provides the React router stuff inside our app. Right? So, let's go here and let's say let's call it something called cart context provider. Right? So, it has to be cart second, cart context provider. Right? Like this. And we can uh for now, let's let's put this in. That's okay. We will we we might change it later on. And let me just remove this div as well. We don't need it. Uh we'll see what we can do. So, first of all, what we have to do is we have to create a context. And to create a context, we can use a create context method provided by React. And Okay. So, what I can say is I can I can simply say const uh cart context right? And then I can say create context. And then you can basically initialize this context, right? So, what all values you want inside the context, you can uh put those things here. So, I will have a cart, which would be initially would be an empty cart. Then, next thing I want is the cart length. l e n g t h And that would be uh it could be initially zero, right? Uh just a second. I am facing little difficulty. Okay. So, this is the context. And this is what we are going to pass throughout our application, right? So, we have initialized it with the empty array and the value zero, right? Now, what if we have to do is we have to basically see, whenever you are inserting something into a cart, whenever you are adding item into a card, then card should also update. Right? Card should update. So, your UI should also be re-rendered. So, how we can make sure that whenever you update something and the UI is re-rendered, how we can make sure that? How can we achieve that thing with the help of If something changes, if the card is updated, we also want to update the UI. How do we achieve that thing? With the help of use the state, right? As simple as that. See, why few people are saying use effect. Why not use It's not a side effect I'm talking about. Okay? It's not a side effect. You're not doing anything outside React. Right? What I'm asking is that if you want to basically update the UI, right? If if some variable changes and you want that variable should be repainted to the UI, then definitely it should be a state, right? So, it it can it cannot be a use effect, right? The cart length from Yes, we'll actually get it from there only, Ayush. Okay? Yes, Chirag is correct. Okay? So, what I'll do is I'll simply say cart and to update the cart, we will have a state updating function called set cart. And I'll simply say use a state and this would be a empty empty cart for now. So, I'm initializing this variable cart with the empty array. Now, that's okay. So, what now I can do is I can simply say const uh context context and just uh facing lot of trouble in 1 second now. Just a second. I think this should be fine. Can you see my screen? Okay. So, that's okay. Uh now So, we have a card and set card, the state updating method, and the use state uh that is fine. Now, what I'm going to do is I'll simply say inside the context, I'll basically pass the card that we are going to have and the the card length uh what do we card length should be Okay, yeah, I'm not sure why I'm facing all of these issues. My screen is like as soon as someone does something on Zoom. So, the focus shifted from my VS code to Zoom and that's why I'm facing difficulty in typing. Anyway, so we have a cart and the cart length and the cart length would be cart.length, right? So, this is the context that we have created. Now, this context need to be passed down, right? And how we can do that is basically we can simply take this cart context and whenever we create a context what happens is there is this property provider, right? We get this property called provider and what we can do is we can accept a props here and right over here I can simply say props. children, right? Like this. And that is fine. So, whatever I wrap inside this that whole thing is going to be passed here, right? It's going to get passed here and if I what we can do is we can also attach a value here so that this value is actually a context, right? So, which is nothing but our context object. Uh context object. Okay, Like this. So, let's say if this value is 10, right? So, this whole thing, this whole object will get passed. Just hang on for a minute here. Anyway, uh so, we have a context and we are passing the context inside the provider and whatever now we are going to put here, the context will automatically will get passed out to all the children's, right? So, uh now what I'll do is I'll just go to my main.jsx file and I'll simply say import and uh I'm going So, there are two things. One is the cart context. So, that could be the default export and this could be the named export, right? So, you can read about named export and default export. So, this file is exporting two things, the provider and the context itself, right? So, the provider and the context. Right? So, that's okay. Now, if I go right over here, what I'll do is I'll simply say cart context provider. And what I'll do is I'll just wrap my whole application inside the provider. So, this enables this pass down the context throughout my application. Right? So, if you want to see this, let me show you that as well. Let's go and inspect. Right? And uh what we can do is let's go to components. So, you can see uh there is this thing called cart context provider. Right? Cart context provider. And if you go right over here, uh you can uh this is the provider, and you can see the provider has got these values, the cart and the cart length. Right? So, this is from the extension we can see. Okay? So, the context has been passed, the cart context has been passed inside our whole app, and we can now start accessing it. Now, you have created a context, okay? Let me just bring in uh So, you have passed down the context. Now, you have to consume that passed down context in your React application. So, for example, in my navbar, I want to consume the context. So, how will I do it? I'll simply say cart context. So, see, I'm not importing the provider, I'm importing the context here. And what we need is we need a hook provided by React, which basically help us wire the context to the component, right? So, that hook is known as use context. So, use context hook basically help us consume the context, right? So, let me just format and uh what we can do is we can simply say context is actually use context, and I want to use the context called cart context. Like this, and I can print the value as well. Console log context. And if we go here, open the console, you can see we're getting this object right over here called cart and cart length. So, this is our context only, right? Uh Now, so, if I let me uh return Let me just reset it to zero, and let me pass 10 right over here. If I pass 10, so you can see cart length is 10 here, right? We're Whatever the length we are going to pass in the context, that is also available the same length is available inside our navbar also, right? Right over here. So, this is how we create context at a very basic level, and this is how we consume any context, right? So, uh that's for to react. Uh you can just uh look at the documentation as well. Let's go here. You can see uh theme context provider value is dark. So, uh things like the theme, the user, these can be passed down globally in all the components with the help of context, right? So, I think they have given the uh they have written the demonstration as well how we can create the con- uh how we can create the provider and pass it down. So that's fine. Now uh Now let's do one thing that let's add something to the card, right? How we can add anything to the card? So we can basically create a method we can create a method that add to card and this would be an arrow function and I can have the I can receive the item right over here and I can simply say set card right? And I can just say so inside the set card, so this is a state updating function. What we get is we get the current state as well, right? So the current state or we can call it previous state also. So previous state is the state just before the updation, right? So this is the state just before the updation. So what So this is an array only, right? So whatever the value of card is, that is what the previous state is and we can return the new array here, right? When we are updating it with the item. So let me explain it once let me first do it and then I'll explain it again. So previous state and I'll put the item also, right? So add to card method, what it does is it receives the item and then it uses the state updating function set card and it sets it sets the new array in the card. Uh and how it does it? So it spread all the items which are already there in the previous state, that is the current state or the state just before the updation, that's why previous state. So this is the state just before the updation and the item we have added at the end. So this is how we are adding an item inside the card. I hope this makes sense to everyone. So this is the spread operator that I'm using. Three dots denotes the spread operator. It's spread all the things all the items which are there in the cart. It spreads all of those things inside this array. Right? Yes. So, now what I can do is I can use this method and call it from anywhere. Now, if I want to call it from a anywhere, I can also basically pass this function as a context. Right? So, this is the empty function which I have written right over here. And then what I can do is I can just say add to cart. So, I'm passing the add to cart function inside the context now as well. So, that we can call it from wherever we want. Right? So, that the cart we can insert item inside the cart. Right? And let me simply change this logic also instead of hardcoding it to cart.length. So, whatever the length of your cart is that is what will get populated inside this variable called cart length. Yeah, I'll save. And now that's fine. So, what I'll do is I'll basically display the badge here. So, we can definitely use material UI for that. So, I can simply say a badge. Right? So, this is actually a badge. Right? So, let me just bring in the badge. And So, I'll just format. And instead of this, I'll put save. Uh let's go here. Badge is not defined. Let's bring in the import as well. Let's put that import and this should work. So, you can see the number right over here as well. Right? And it could be secondary. Right? The color could be secondary so that it's like purple color. You can see it now clearly, I think. So, the value is four, right? If I give 10, the value would be 10 right over here. So, if I want the value of this thing, if I want this value to be displayed, then what I can simply do is I can simply go to the navbar and right over here from the context, I can just say cart I can just grab the cart length, I can just destructure the cart length, and I can put it here. Right? Save. So, you can see uh there is nothing right over here, right? Because zero is not recognized as a uh true value. Right? If you give 10, then then it is actually uh printed, but if you say because the cart length right now is zero, right? So, as you add new item, the cart length would be would change and the same would be displayed right over here as well. Right? So, this is very very uh easy. Now, let's do one thing. Let's add the item in the cart. So, how we can do that? By simply going to our show products page and right over here, we have a button. Right? So, let's go to products. And let's click on show. So, if you click on this add to cart button, this item should be added to the cart. Right? So, that is the functionality that we are looking for. Okay? So, how can we do this? So, this can be done. First of all, I need to listen to the click event, right? So, I'll have to write the event on click. What I want is add to cart handler. So, I told you why we call them handler because these functions are not directly called by us. These are called by the in underlying event listener, right? So, hence the handler functions. So, that's okay. Let's just find these functions. Const let's say add to What is the name of the function? Add to cart handler. Okay. And now what I can do is if I want to insert anything into the cart, how can I insert item into the cart now? How can I insert it? How can I insert any item in the cart? We can simply use our add to cart method. That's it. And since it has been passed down as a context, it is accessible right over here, right? So, what I can do is I can just say import first of all, let me just wire up the context with the component, right? So, I can simply say uh context or I can say cart context. We can have better variable names. And I can say use context. And we have a use context. Uh okay, it has been added. And the cart context we can put here. So, this basically wires your component with the context, right? Now, the context values since they are available here, what I can now do is I can say cart context.add to cart and we can supply the object here, right? Whatever the object that we want to add to the cart. So, that object would be what? Uh that object would be nothing but our product. Right? So, whatever the product that we have, that should be basically added as a item inside the cart. So, I can just have a check. So, I can have a early exit right over here if there is no product, then simply return. Right? Do not do anything. Right? If product is there and someone clicks on add to cart button, then what I can do is I can just pass the product. Save. So, here what we are doing is we are passing the product directly and the it it would get passed down to the function and it would be updated to the state. And since the state has updated, we will update the whole context as well. Right? So, let me just show you that. This should work now. And we can print the context as well somewhere. Right? So, let me just print it here only. Uh Let's print the context object here. Okay. Save. So, you can see at this moment context does not the cart does not have any product in there. Uh there is this function that we are passing. That's okay. Cart length is zero because there is no item in there. Right? Uh now, if I if I go and add something to the cart. Just uh second. Okay, I think I have been blocked. Okay, I'm getting it now. So, if I go here and if I you can see if I click on add to cart, you can see the item the array size has increased to one and there is one item which has been added to the cart. That is our product, right? And then if I if I go to my carts page, I can basically see it. So, So, let's go to the carts page and let's also display these items, right? So, we should be able to display the items which are there in the cart onto our carts page as well, right? So, let me say cart and right over here, I'm going to have the cart context because cart context has the cart items. I will simply say uh use context from React and I'm going to use the cart context and I'll grab the cart. And let me just format and here we can basically list down all the items which are there in the cart and we can use some material UI components to do that. Right? Let me grab some horizontal kind of card if it is there. Um I control. So, if you want, you can have this kind of card. Okay. So, what I can do is I can simply go to the component and I can say cart item, right? And inside the cart cart item we can say card item dot jsx right r a f c or we can just paste that thing which we have just copied okay it's using theme we don't need that let's remove these conditions for now we don't need it I'll just put some something default here so that we can customize it quickly save now what I can do is I can rename this as well card item card item and this can be a arrow function also so that we are consistent across export default card item so that's okay we will receive props here and using those props we can basically fill in the data right now let me go to my card so we have this card right over here and what I can do is I can basically say card dot map and I'll get the item and for each item what we have to do is we have to create something called card item card item and let's first see this thing okay uh at least what we are getting here. So, refresh. There is nothing in there. Let me add. So, on refresh, since see, we are not storing the cart permanently in uh right now, which we will do ultimately uh in a moment. We'll actually store it. Right? We will store it in maybe local storage, let's say, for now. But, ideally, this should be uh we should store or update the cart in the back end. We should store it in the uh onto the server side. Right? Anyway. So, let's go here, add to cart, and uh if I go, so you can see we are able to see this cart. Uh now, let me just fix the style for this, and then we can actually display our own data. So, what I can do is I can have a box. And uh So, this is the very uh easy way of just adding a quick styles. So, this could be 300 px. Uh width. That's to be an It has to be an object. So, SX is the prop, which basically accepts a style object. So, this is the style object that I'm passing, and the outer curly braces denotes the JavaScript being injected into JSX. Save. So, you can see the uh We can say 350. That's fine. And uh now, I can basically display the title right over here. So, I can simply say props.title. And uh then we can display the price as well. So, for now I'm just, uh uh, props. price and then we can have the image as well. Uh, props. image Right? Uh, these button we can remove or we can instead have plus and minus button. So, that let's say if you want to increment that item in the card, uh, you can do that as well. Right? So, uh, okay, let me have the actual buttons. So, let's go to material icons. And, uh, I can simply say plus. Or, Okay, I can have this one, add icon. Let me put the add icon. I'll put the add icon here. Save. Let's go here. Let's add item first. And, uh, So, we're getting this plus sign which is okay, okay. Now, let's have minus also. So, that we can increment the item in the card as well. Remove button. So, let's say First of all, let me import and let me just use the remove icon here and we can get rid of this. So, these are kind of icon buttons that we have. And, uh, let's again add few things and we also need to pass the data uh side the cart item component and how we can do that is by simply saying title. Title has to be item.title. And uh image has to be item.image. Description has to be description. item.description And uh price has to be item.price. Save. If you go here, and let's go in there. So, you can see we are kind of getting this. Right? Uh Let me fix the image. Height has to be 100%. So, and we should have margin bottom to be let's say three. I said tell me how we can persist this this data inside the local storage. How we can persist persist this data inside the local storage like permanently? Can we do that? If I want to do it quickly, can we do that? How we can persist this to the local storage, the cart that we have? So, if you observe right over here, if I refresh, the cart is lost, right? The data is lost because it was in the program memory, and once you refresh, the program memory also gets refreshed, and hence it's not available. So, what instead we can do is uh So, what we can do is we can basically dump our cart inside the local storage, right? So, what I can now do is So, that how where we should place that dump part? That item cart. Where we should place that dump dump part? So, whenever the cart changes, right? Whenever the cart changes, I want to sync that change to the local storage, right? Whenever you are updating the cart, right? Whenever, let's say, this cart is changed, I want to sync that change to the local storage. So, local storage local storage Is it a part of React or is it Is it the outside world? Is it a Local storage is a part of React or it is something like which is outside of React? So, this is the outside, right? So, what we will have to do We will have to kind of perform side effects in order to sync this cart to the local storage, right? So, uh How we can write my use effect? So, we can simply say use effect. Use effect, and inside the use effect, I'll say uh whenever the cart changes, right? So, the dependency is gone. Whenever this changes, then simply do something like window.localStorage.setItem. This is the method which is used to set the item in the local storage, and I can simply say cart, and that cart So, I'll have to see this cart is actually a JavaScript array, right? So, I cannot directly uh store anything. So, there are few things. Let me clear this, and let me show you again. So, if you see, this is the local storage. Now, if I do something like local storage.setItem and uh let's say temp. And if I put an object right over here, right? So, for example, let's say A is 10, B is true. If I put a object here, or let's say array of objects here, then this is basically this value is also type casted to a string. So, you will actually see we will We will lose this array, right? So, local storage, so you can see the temp against this temp key, the value is something like object object, right? So, or you can see like this as well. You can call the getItem method, and you can simply say temp. Right? You can see we are getting object object. But, ideally, we should have an array right over here. So, what we can do is we can convert the array into a JSON string, and we can then store it, right? So, what I can do is I can simply say JSON.stringify. This is the method which basically converts the JavaScript object, such as arrays, into a string, into a JSON string, right? So, why we are using JSON string? Because we don't want to lose the array properties, right? So, I'll simply say cart. Right? So, whatever the value of cart is, that will be set against the key cart, right? By stringifying it, right? So, use effect will take care of syncing the cart change to the local storage. But, whenever we refresh, so we will have to load the data from local storage back to our state as well, right? So, so that it's available. So, how I can do is see, since this is a JSON string, uh if you have an object, let's let me just show you this thing. Let me just write it here. So, if you have a JavaScript object, right? And you have a JSON string, right? So, basically, what you can do is from and you can come back here as well, right? So, if you convert JavaScript object into JSON string, then you use this method called JSON.stringify. Stringify. Right? And if you want your JSON string back to JS object, then you can use the method called JSON.parse. Right? So, these are the two things. Now, uh so, what I can now do is I can simply say JSON.parse and I'm going to uh grab window.localStorage.getItem and I want to grab cart. And if cart is not there, then I'll simply say empty array, right? So, this is the JSON string uh for empty array, right? If cart is not there, then treat empty like convert uh this thing into So, if you do basically something like JSON dot parse of this, so you'll actually get an empty array. So, if cart item is not available inside local storage, then basically use this and parse it into an empty array and initialize the cart state, and then it can be used. So, now you will see that data will be uh persistent in the local storage, right? So, if I go right over here and if I click on it to cart, if I go here, so you can see the items uh in there, right? And if I refresh, so you can see again we are able to get this, right? It's not getting lost now because uh we now have local storage uh in place, right? So, it's asking that okay, we should pass our key prop, so let me do that as well. So, uh I can simply say key has to be nothing but item dot ID. It should be fine now. Uh encountered two children with the same key. Okay. Let me use title then. Just has to be unique. Okay. There is a better solution then I can use index as well because I need a unique thing. Right? So, this seems fine, and we have the items in our cart. So, I hope this is clear to everyone how we are able to do this. Okay. So, that's fine. So, this is how you can utilize local storage to basically does this, right? Let me just fix few styles in the card. Right? Uh and margin bottom 10 px. Right? And uh height has to be 200 px. Let me save 100. Actually, it's fine. Let's have 150. Or let's go back to the original height. Not a problem for now. Okay, this is okay. Okay. And uh we can say padding left is 20 px. Right? So, that there is some spacing. Or 40 px. So, this is fine, I think. Uh Right? So, we have the items in the cart now, right? And they are persistent as well. We can add more items. Let's say I'll go and I'll add this as well. So, you can see it is now five. And if I go back and if I add, let's say, just focus on this number. If I click on this, you can see it has now changed to six. You can see these items has also been added to your cart. Right? So, local storage is basically uh So, let me tell you, if you go in your browser, okay? If you go in your browser, then you will see this is the part of the This is all client-side storage, right? So, everything in there is a part of client-side storage. So, whether you use local storage, session storage, index TV, cookies, cache, storage bucket, so these are all the things which are These are all the memory-related stuff which is available onto the client-side, and we are utilizing one of them. So, local storage is also a client-side storage. So, see we will have to write the logic for all of those things, Sharad, definitely. Right? Your question is valid, but uh we are not not focusing on those those things. We are more focusing on how we can utilize React features to achieve few things, right? It's not a full-fledged working application. Definitely, it require lot of things, right? We need to polish it a lot, right? Then only we can achieve all of those production um uh features that you see in other applications, right? So, I'm just trying to make you understand how things works at least for now, okay? So, you can avoid storing sensitive information in the local storage, Ayush, right? Uh and use other storage also for the persistent behavior. Okay. I said tell me one thing. See, this item is same, right? This is the same t-shirt, right? But it has been added four times. Ideally, what should happens is they should have something like quantity, and we should be able to increment and decrement the quantity accordingly, right? if you are adding the same item, it should be the quantity should increase, not the item should not be added separately in the locals in the cart basically, right? So, that is what should happen ideally right over here. How can we implement that? So, there must be some change at this place, right? When we are adding an item, we will basically have to perform a check if that item already exists, then we will increase the quantity, otherwise, we will add it as a new item. Okay? So, so we have to do two things, right? So, check if item already present in the cart. And uh if yes, so how we can check that? So, we can check basis upon the ID that we are getting, right? So, I can simply say is present. Right? So, I can simply say cart dot uh some. So, there is this method called some. It help It basically returns true or false basis upon that check, right? So, what I can do is I can simply say item uh let's call it new item, okay? Let's call it new item. So, item and if we do something like item dot ID, if that is equals to new item .id. Right? So, some will basically check some will basically loop over the cart and it will check if the ID present if the item present in the cart has the same ID as the incoming item, right? Then it will give true, otherwise it will say it's false. So, we can simply say if is present then we should increase the quantity. Right? We should increase the quantity. So, uh let me do one more thing. So, when we are basically adding the item, right? We should add the quantity field as well. So, I'll do product I'll spread the properties which are there in the product and I'll by default keep the quantity as one. Right? So, when we are adding the item to the cart, we will also have the quantity by default as one and then we can basically play around this quantity variable. So, I can simply say if it is already there then only update the quantity. And how we can do that is basically set cart. So, I can say previous state and I can simply say previous state dot map. Right? I'm going to use the map method and I'll simply say item and I'll simply say if item.id Right? Uh if item.id matches the new item .id then what I want is I want to return everything which is there in the item and quantity should be item dot quantity plus one. Right? So, otherwise I'll return the item as it is. So, it's it's a it's a there are a lot of things, right? So, let me let me break it down. So, if you see set card, so this is the callback function. So, whatever is being returned by the map, so map is going to return the new transformed array, right? Basis upon the previous state previous state meaning the state which is just before the updation, right? So, previous state {dot} map which is previous state meaning cart, we are iterating over the cart and we are checking if the I ID of that item is the same as the new item, right? And since it is already present, we have checked that, right? So, what we can do is we can uh simply perform this operation. Right? Otherwise, we can uh so, we can spread all the properties and we can simply say quantity should be incremented by one. And uh otherwise, I'm just going to map the item as it is. I'm not going to increment the quantity, right? So, you can just do chat GPT around this key uh like how this is working if you if you're not able to clearly understand, right? Uh otherwise, if this is not present, then uh then what I'll do is I'll just do this. Right? So, these would be the two conditions. If the item is already present, then this operation will takes place. Otherwise, we will simply add the new item after the state, right? After whatever is there in the cart. So, let me just clear the cart now. And let's see if this logic works. Local storage {dot} clear. And local storage is empty. If I refresh, you will see there is nothing in the cart. I go here, add something. So, you can see the item has been added, but if I add it again, so you can see the length is still one, right? If I go here and expand this, so you'll see the quantity, right? So, you can see the quantity is two, right? So, that is how exactly it works. Now, what I can do is I can also display this inside the cart item, right? I can say typography. We'll display this here. And Yeah, format. And uh it has to be quantity, and we should pass this here as well. QTY should be item.quantity. So, whatever we are receiving from the context, that quantity has to be passed here as well, right? So, if you see, the quantity is two right over here, and let me remove the dollar, and I'll simply write quantity is two, right? So, if I refresh, you can see this is still saved there, right? This is still there. Now, if I go and if I add something new, so the fake is store API is kind of uh creating problem because we are requesting them a lot. Definitely, they might have put a rate limiter off. So, rate limiter basically uh stops someone from, you know, uh bombarding the server again and again, right? With the request. If we go here, if I add this to the cart and uh let's Let's see. You can see two items have been added. Let's add a few more stuff. Let's add this jacket. And uh we might we should We have added four jackets now, right? So, this is This is how easily you can use context to uh basically create these kind of stuff. I Now, we can also display the total amount uh which user has, right? And all of this information. We can display that as well. So, since we have uh the cart and cart has the uh price as well as the quantity, we can compute the total price. Right? So, we can create a kind of grid in which we can have these two things. Right? So, I can say grid. And uh Grid as container and uh We can have a grid. And So, I can put this thing inside a grid. And uh We can have a column of one more column. This has to be a item. H1 total price. Right? So, you can see the column right over here. And uh We can basically have the spacing. Should be 10. Right? Or maybe should be 50. Right? So, we have this right over here, the total price related stuff. Uh Or we can say order details. Right? So, now here right over here, we can basically print the order details. Right? So, those order details would be nothing but the total sum of the cart. Right? So, I can have a We can basically use typography to have all of those things. And let me grab it. typography Okay, let me use H5. This one. format Save. Let's see. Uh let me import this as well. import typography Save. Okay, we need to import. Let's see. Item problem has been removed. Hey. Save. Oh. right. Go to the cart. So, we are getting this heading and right over here, we can simply say total amount. Right? And total amount would be uh we can basically calculate the total amount here. Const total amount it we can use reduce method, right? So, why I'm using reduce method? I can also use for loop. Can anyone tell me? Why we should use reduce method and not the for? So, see, you can do the sum using for loop. You can iterate over the cart and you can do the sum. But it is recommended that we should use reduce method, right? Array reduce method for such things. Why? Does anyone knows it? Can anyone tell me? Why why we should use reduce method? So, see, uh there is this thing called declarative versus imperative way of writing code, right? Declarative versus imperative programming, right? So, uh what is recommended? So, imperative programming is when we uh you know, basically write everything that okay, how the for loop will work, from where it will start, till where it will go, right? When you are specifying all of those things, that is the imperative way of programming and it's not recommended, right? We should because it's more prone to errors. If you're step writing down everything by yourself, then it's more prone to errors and it's not readable at all, right? You're not able to read the code, right? Properly. But declarative way of programming, on the other hand, abstract with with the a way the procedural details focus on the logic and desired outcome, right? It allows the compiler and to basically it increases readability, it increases your code quality, right? So, that's why I'm using reduce, right? I'll say reduce and I'll go and say item. And I'll simply say item. price should be item. dot quantity. So, I'm just multiplying it and I'm just initializing the sum to zero. So, reducer works on two things. So, there has to be a sum and then there has to be item. So, reduce in this function, right? In this callback function which we pass inside the reduce, there are two arguments. One is the accumulator. Accumulator is which is going to accumulate this result. And item is the regular item which is there or the regular entry in your cart, right? So, that will be passed and we can simply say sum plus. I will have to write like this. Sum plus item. price into item. quantity. And sum is basically this sum value is basically initialized to zero and this should be the total amount that we can pass. Now, let's go and say this. So, what is the problem now? QTY is not defined. Hm, okay. Quantity is not defined. Item one second. Okay. And it should be item. quantity. It was just a check. So All right. So now you can see the amount, right? And you can see the lot of zeros in there. So we can use the two fixed method, right? So so that we can round off it. Two fixed MDN. Right? There is this method uh which we can use. Two fixed. Right? So I want to fix it to two decimal place. I can simply say dot two fixed. Save. And you can see the amount right over here. Dollar. So this is the total amount, right? Maybe you can cross-verify or we can just clear up the local storage. And uh you can see the order total is zero right now. If we if I go here and if I add this, so this should be 44.6 if I add two items, right? So Okay. The total item There is Is there a problem with the logic? item.price So this has to be multiplied. Sorry, my bad. Okay? This is fine now. We are We are now getting the correct answer. Right? Again, check that, okay? Let's add few more thing. And uh it should be fine. Right? So you can see the amount is also getting updated. Then we can basically have a checkout button if you want. Right? We can bring in the material UI checkout button. Right? Right over here. So, variant has to be outlined. So, we can have a checkout button which can basically initiate the payment gateway. Right? So, this is This is how we can implement these things. The main takeaway in in all of this discussion or in the today's discussion was the context API. Right? So, that you understand where you can use context and how this makes our life easier. So, that was the main takeaway, guys. Okay? So, uh All right. How to connect to payments? So, then you can use uh things like payment gateways such as a Stripe or Razorpay or any other payment gateway out there. Right? To basically So, on the checkout button, you will have to basically call the uh payment gateway. Payment gateway will uh redirect you to the payments page. You perform the payment and you redirect back uh the user to the success screen. Right? That order has been placed successfully. Something like that. So, I hope that is fine. Uh So, let me just summarize what we have covered uh throughout these sessions. Right? So, we have seen uh how we can use uh React Router. Right? We have seen uh how we can create a layout. Right? We have seen uh the hooks such as use the state and use effect. Use effect is for the for making side effects. Right? So, that we have seen and we have kind of created a simple application which can uh be basically deployed as well. So, if you want to deploy it, so since this is just a front-end application, this can be this can be easily deployed on Netlify. Right? So, let me just show you how you can uh So, you can see Netlify basically uh offers a drag and drop facility. Right? So, what I can do is I can uh once I'm done with my code, right? Once I'm done with my React code, I can just say npm run build, right? So, this will create a production build. Uh and you can see we'll actually get a dist folder. So, dist folder is a distributable folder. Right? Uh let me open this. So, this is the dist folder. It has See, your React code has finally compiled down to the index.html and CSS and JavaScript. Because your browser only understand these two things, right? So, all of this thing, whatever we had done, this was just for the development, right? Ultimately, React code boils down to nothing but the simple thing, that is HTML, CSS, and JavaScript. Right? That is what it is. And now we can deploy this thing. Right? So, what we can do is we can basically just drag and drop. Right? So, I can just drag and drop this thing and it will be quickly deployed on uh So, I'll just say So, it's getting uploaded. You can see uploading. And uh it will be deployed. Right? So, you can see open production deploy. So, you can see this is your app which we had developed. You can create the landing page by yourself and I can simply say products. So, there is there are a few issues which you might face with the Netlify. Right? You can maybe deploy this on Vercel. That is So, you you need to basically configure few things, right? So, let me Just a minute. Let me just grab that link first. Let's go to products. Right? Okay. Uh I'll have to re-one found means error correction online. So, you'll have to make few things, but I can quickly fix it, right? If you want, I can quickly fix it. Let me just delete this distributable file. And we can do a simple jugad for now, right? Uh so, what I can do is instead of uh posting the all products onto {slash} products, we can simply host it at {slash}. So, I'm This is Guys, again, this is just for uh this is just for learning. Don't take it otherwise, right? Actual deployment process is uh quite complex and uh it's not like this drag and drop thing. This is just for you to have fun around it, right? I'll do some jugad right over here, okay? Uh okay. We again have developed distributable thing, and what I'll do is I'll update this. Let's say deploy. So, you can see need to update your site. So, here I can basically again drag and drop after the operation. Uh let me place it here. Uh it's uploading now. So, it would be updated. Let's open this. Right. So, now you can see your website actually, right? And you'll see the products also. Let's try this in Chrome. Okay. So, you can see the products as well, and it's working. You can try it out by yourself. Okay. Uh this is free. You can just sign up with your GitHub account. Netlify is free, by the way. Right? And uh you can avoid clicking on this one now. You can click on login, so you can see the login page. The cart, there is nothing in the cart. Uh now, let me I can fix these these minor issues, I hope. Let's click there. Add two items. Right? And if we go here, you can see the quantity is four and this item has been added. Right? Maybe I'll quickly fix the nav bar, also. Nav bar and instead of this, we should be having this. Right? And uh unless Let me delete the dist folder and we will quickly update again. NPM run dev, NPM run build. This will create a production build and let me finally deploy it once again. Okay. It will be uploaded again. Okay. So, you can see this is fine and if I even click on products, so this is okay okay now. If I go here and come back to products, we are here. Right? So, this is kind of working fine. Maybe the link has been updated, you can try this. Again, now we can have your questions, guys. Okay? Uh see, I can bring uh more of these kind of sessions if you're interested. Uh So you want like on on which topic you want these sessions in future? What to learn further in order to get ready for real world industry? What is the road map? So see first of all if you're in college, right? I would recommend that you do DSA properly, okay? And apart from that to enrich your resume, you should work on the projects like you can pick up these things such as web development or if you're interested or if you're into machine learning kind of stuff, so you can do that as well. But this is the most easier easiest part. You can build your applications, right? You can deploy them and if you're able to build something good, you can monetize your applications as well. Right? So I would recommend that do DSA, do some development stuff, learn front and back and both, create some good applications, put them in your resume, post them to GitHub, right? Put all of those links. So so that your resume is at least you know, it's compelling, right? It's it it's at par with others also, right? Because these days everyone is doing these kind of stuff, the development and all of this, right? Uh Pagination is a easy part to Narendra, I think. You can just Google it or do chat GPT, I think that would be sufficient. Uh payment gateway see payment gateway maybe I'll bring some other video or another session payment gateway or we can continue building this. We can we can integrate payment gateway in the next class in this. I'll talk to the team if they allows us, then we can integrate the payment gateway or we can polish this application further. Right? Or maybe we can do backend integration. So, in the like in these three sessions we have more focused on the front end part. In the upcoming session I can migrate the backend, I can start adding the backend related stuff here. And uh basically we can connect our own backend instead of using fake store APIs. Uh next time we want MERN stack project. MERN stack project? Yes, we can extend uh we can extend this project to the backend as well. Right? Uh yes, and you can also join my course at GFG, right? And that's the online course FSRNA FSRNL course. Uh let me show you that quickly. geeksforgeeks.org So, guys if you know me uh so this is me. You can read about me. Uh I'm working as a software engineer right now at PayU. And uh mostly in the backend, right? Uh but I have been teaching MERN stack for around more than 4 years now. Right? So, you can follow me on LinkedIn as well if you want, right? You can just uh search my name and Okay? Uh I will try and bring more sessions for you guys. Especially we can we can have backend and all of that in the project, right? Maybe that would be interesting stuff. We can like introduce authentication, let's say, right? Authentication is one of the challenging topic, right? And uh I have seen a lot of uh you know uh the experienced developer face difficulty in that. Resume tips. Your resume should be like simple tips are key if you you should have the single page resume, right? I don't know. Second, it should be simple. Don't add fancy stuff, right? Make Keep it formal. And add the experience if you have any. Otherwise like the education part, the projects part. Right? And the other other things, right? You can have those things as well. So meaning you can just see the standard resumes which are out there. That that might help you. Right? Maybe I I can share I have a guide on resume basically. Maybe I'll share it or maybe we can have a session around resume development as well. Projects to be added in resume. See if you have something unique in your mind or not not unique if you have something like which you wanted to build for a long time, you invest time on that, make it, put it in your resume, host it somewhere like on Netlify or Vercel or Render or AWS, right? Put that link in your resume. It increases your credibility, right? You can do those things basically. So the thing is I have seen a lot of people what they do these days is they copy paste the things, right? Just for the sake of adding the things in their resume. Don't do that because you might get questions around that project. Like why did you choose the database that you are using? Why did you choose Node.js on the backend or or whatever the technology that you are using? Right? So, you might you will have to justify those questions or justify your answers that, "Okay, that's why I'm using this database. I'm using MySQL or I'm using MongoDB." So, you should be ready with all of those answers, right? If you are working on a project. You should ask yourself before even creating a project, you should ask yourself, "Okay, this project I'm going to build on MERN. Okay, what kind of problems are solved by MERN? What does this stack brings to the table? Right? So, you have to ask these questions. If I'm using a particular database, what does that database brings to the table? Right? What advantages does it add? Right? So, you should ask those questions. Right? So, we we discuss these things in the in the course as well. If you need kind of structured path towards all of these things, you can join the course. Okay. Okay, so yeah, that's it, guys. Any other question? Yes, I take interviews from PayU. I've taken a lot of interviews at PayU. And apart from PayU, I've taken interviews in my previous orgs as well. Right? So, tips is key that you should be See, you should be confident first of all. And you should not bluff. Right? And interviewers, they are mostly looking your approach. Right? They're mostly looking at your approach. They're least They're not that interested in the final answer. Right? So, we are more as as an interviewer, what I look into the candidate is that the candidate is able to understand the problem statement which I'm trying to give to him. Right? He is able to ask the relevant question out of that problem statement. Right? So, for example, let's say if I have given him that, "Okay, you have to find the prime numbers between A and B." Right? Uh so, let's say A is a number, B is also a number. You have to find all the prime numbers between A and B. So, the next question that should come from the candidate is that, "What should be the range? What could be the maximum value of A and B? Right? How many numbers maximum how many prime maximum prime numbers uh I would be uh processing or I would be uh asking?" Right? So, those questions, if you are able to understand or if you are able to break down the problem statement into smaller problems, and then you are trying to solve it, and you have solved it 80%, then we as an interviewer or in my interviews at least, I have uh like accepted those candidates. Right? So, focus on the basics, right? Don't blow off don't do rectification. Uh right? Go on what and why and how. Uh explore everything. Make your concepts clear. Right? Those are the things which will basically sail you through the interview. Right? Because if you do rectification, you will you will uh just forget everything or you might miss a single thing. You won't be answer you won't be able to answer cross questions. That is another thing. Right? If you do rectification. Certificates are not that important. They are not that important. Certificates are not important if you do not have any not a problem. Right? I don't have any certificates in my resume, by the way. How can we add maps like So, you can basically use the uh APIs such as I I there is this thing called uh uh Dropbox. So, maybe not a Dropbox. Uh One second. Map APIs. Not this one. Mapbox, yes. You can use Mapbox APIs. Right? So, Mapbox is a I think they provide you the there is a premium model as well. You can get few features for free. And you can use Mapbox. Is it good for Sir, I'm learning one stack, so it is good for uh campus placements. Uh uh see, definitely yes. I It is going to enrich your resume with the relevant skill, which is which you are going to work uh in a in a organization, right? So, in a company, you are not going to uh get a question on DSA that, "Okay, this is the DSA question. You have to solve." It's not like that, right? Ultimately, you you will have to do development in the company, right? So, the companies or the startups, they look for the people who are already skilled in those things, right? Which which you are uh for which the profile uh the profile they're hiring for, right? Okay. We can also do this with Java. Some people say that I am learning. What? What you can do in JavaScript? DSA? Yes, if you want See, you can do DSA in JavaScript. Uh there is no harm to it, right? Uh the thing is key uh see, JavaScript is kind of a very flexible language in itself, right? And the concepts such as object-oriented concepts are not that that well defined there, right? So, that's why people try not to go into JavaScript in in uh whenever the DSA comes into picture, right? Because the things such as Java and C++, they are more object-oriented and they help us implement the things uh in a more structured way than JavaScript, right? Otherwise, you can do it. See, ultimately, what matters is the uh the solution that you are bringing to the table, right? Uh Those things are Those things matters the most at the end, right? So, even if you are using Java and you are not able to solve the problem properly, then it doesn't not make any sense, right? So, language is a secondary thing. Primary is the concepts and whether you are able to do that or whether you are confident about whatever you know uh in JavaScript, right? How much DSA important compared to MERN or full MERN? Yeah, at least you should be able you should be good with LeetCode medium questions. Okay, CPP relevant to real-world industry. CPP C++ is mostly used in research, right? So, if you see the browsers uh the JavaScript engine which which these browsers are using, that uh that is written in C++. If you are using MongoDB database, uh the source code is again written in C++. So, it is more low-level and performant language. It is more used to build the tools uh that you might be using, uh but not in the development, right? Like product development. So, if you go in a company like Swiggy or you know, Flipkart, you are not you are hardly going to use C++ it's not there because there we build products which are which which are helpful or uh basically for the people, right? For for stuff like buying things and all of that. So, other tech is much better and basically help you know like create the products in a fast way, right? C++ is too low-level language and it's rare to find good developers for C++. So, that is also another constraint. So, technology mostly most of the companies adopt the technology for which developers are easy easily available in the market. Okay, those all of those things are considered. Okay. So, that's it guys. I think sir, please add today's code on GitHub. Yes, guys I have added I'll definitely push that code also to the GitHub and this is the GitHub by the way. You can follow me on GitHub, right? And just click on follow. And uh I'll try to bring more sessions around these things, okay? So, let me just push it quickly and then we can end the session. So, the code is pushed guys. That is it for today. Uh if you want you can follow me on LinkedIn. Okay, let me show you. You can You can follow me on LinkedIn and uh maybe you can if you want I can share the resume templates and all, okay? That's it for today. Bye-bye.