Build a Shopping Cart with React, Tailwind CSS, and React Context API

hey everyone my name is shahib welcome to my channel kod code today in this video I'm going to show you how you can create this application so this is a small e-commerce application and in this application it doesn't have lot of feature but uh you can filter the products uh based on the category and also you can add the products to the card you can add multiple products so let's add some tablet then mobile and once the products are added you can see how many products we have added to the card so once you click the card so it will show uh the product list and the quantity and the prices and based on the quantity and the price we have the total subtotal products and once you click uh the place order it will uh redirect to this success page so this is what we are going to build in this video so without wasting any time we'll jump to the code so here you can see I have created a small react application I have uh created this application using Create react app and uh for Designing we are going to use uh telin CSS and for routing uh DC router Dom and for icons whatever icons you have used in this application for that I'm going to use uh react icons uh package so let's in install those packages first so for icons you can visit this site react icons. github.io and once you click home so this is the command you have to use to install this package and for react router Dome click the first link get started and tutorial feature [Music] overview let's close this tab I know the what the command I have to run to install it npm install react router Dom and for telin CSS the first link and this two command I have to run and the next step is to copy this and here just replace it and then this you have to paste it in the index. CSS let's remove all the defaults and it says npm Run start so let's check all the packages are installed or not react router Dom is installed then react icons and the telin CSS all done then let's bring up the server npm Run [Music] start okay let's close all the tab and let's change the extension [Music] jsx okay so first we are going to create the pages so we have total homepage then products page and cards page and success page so four pages we are going to have so let's create the pages folder home should be the app.jsx so products. jsx then card. jsx [Music] and success do js6 and I'll be using the RFC [Music] shortcut RFC and for Success also RFC so three pages I have created and one more folder I'm going to create that would be components and in the components uh so This na bar will go to this component ne. jxc okay so now we are going to configure the router so that we are going to do in the index.js so for that I'm going to import create browser router and router provider component so this function we are going to use so it should be an object path home element the parent element should be [Music] app and then children the value should be add a path part would be category and it would be optional element products [Music] okay let me change the extension here that's why the import is not working CT [Music] product I don't know why this import is not working so it would be like import products from pages and then product and similarly next cart and should be [Music] cart and last one success [Music] and this will return the router const Router and now instead of having this app we are going to call this component and one prop is router so this router configuration we have to pass something is wrong here okay card and success let's close and restart okay so there's a small typo see c eou s it should be double C and okay so let's see our routing is working or not cart okay so this is not working because uh in this configuration I have used this uh children uh so for that we need to use the outlet so let's remove all the boiler plate code and here this this Outlet component you have to call from react router Dom so now cart is working fine success is also working and product is also working fine so uh now we are going to design the homepage first or first the neb we are going to design okay so we have this na bar and that we are going to import here Nar I don't know why this import is not working let's do like this NE bar from uh this is okay components and Nar [Music] oops Yeah so our neighbor is here so let's design it so class name W full full width height should be uh 80 80 pixel border and Shadow and this na will having we'll have one icon [Music] and this and one more dip so let's [Music] YouTube I'll take this uh YouTube logo as my application logo and one span here the channel name code all code and the class name [Music] BG okay not background text red 500 600p let's see how it looks okay and text for Excel not 6xl and class name flare X Flex call Item Center okay let's format it for better look so now it came to the center because we did not use the flex class here flex and justify between now you see it's in the proper place we'll use padding Y axis 4 it's it looks similar okay here I have used I think eight or six anyways it looks good and 80 instead of 80 I'm going to use 70 [Music] pixel it should be fine 20 okay Flex justify between item Center okay so next okay we have the uh this uh category so this we are going to [Music] fetch okay for now we are going to hard code it uh it should be nav link [Music] Li Na link and mobile let's copy three [Music] time tablet and laptop it looks like this then class Flex item Center Gap four or Gap should be 10 okay and whenever okay for now it's fine and then here card let's go for the card [Music] icon shopping [Music] cart class name text to [Music] Excel let's increase the padding from x28 okay so currently we have hard coded this one like this and the product data so the data I'm uh displaying here I did not fetch fetch it from any um backend API response uh so I have stored the data under this uh data directory and products J here you can see I have all the products and images I have stored in the this public images folder and the path I have given here and the category I have total uh three categories one is mobile laptop and tablet so this directly I can use to the ne component Swit it of this [Music] and map category and index return return and only one so uh this category is an object each object is having uh level and value we are going to use this value category do value and key there's no need to have this directly I can use the category value as key let's format the page and let's see how it works okay I did not add two and here we are going to pass uh the category dynamically category value so our this thing is working properly okay so first we are going to you know load all the data to the homepage so to manage the state of this application I'm going to use the context API so create the context first so I'll create One Directory context here product context. jxl RFC it's not needed now so let's create the context first export the U C context then create context and default value should be empty array and [Music] now export cost product context provider and here children and this will return return product contest. provider and here children [Music] and this provider we have to WP uh let's go to the index. jsx and here this provider route we have so here we have to wrap [Music] it okay uh okay so let's add one state products set products use State and then what is the are name here products data and here value object products and we have created uh this products page let's go to the products page and const D structure product use context and then product context context so let's see the products are coming properly or not json. stringify okay so here we have the products data so now let's design this thing so let's go to the app.jsx so we wrap this Outlet inside a Di and it should be 80% width which should [Music] be 80% and margin Auto and margin Y axis should be four and the entire application okay let's go to this index CSS padding zero margin zero and background color should be this much and here height should be vertical height and the background BG [Music] white and here let's put some bding P4 now it's look good so neighbor color also have to change NE BG white this color is not matching so let's not change it here we will we can directly for now we can have this P sled 200 and it should be Auto okay so now we are going to load this uh load the product here uh this greed view uh for that um let's go to this product and here products. map then product it will return div key should be product do ID uh let's close all the tab and let's load this okay we we have the ID so we are going to use this ID as a unique key and then one dip should be for one image so product dot image so images are coming proper and ALT product do name let's design it class name should be [Music] W 300 pixel it's more 150 that be fine and [Music] height should be 80 pixel 100 pixel or 120 that would be fine and 200 and 150 and object should be contain so now it looks proper okay so the class name it should be Flex Flex RP Gap should be four or six and let's add class name this weight should be 300 pixel okay so the next we are going to show the div and here product info section let's comment it and here P one more P tag one more P tag so first product name product name product price with dollar sign and we have product some short uh description okay it looks like this yeah class text Center text bold sorry font bold and and images also uh block and margin Auto and this one should be class text extra small and text Gray 500 let's see border width is too much 200 would be fine and we'll be having some padding four and class name Flex Flex call and GAP should be four and this image uh Amy like this okay four is huge and this price should be text small now it looks proper uh but I don't want this uh border here so when we hover it should have some this uh Shadow effect so for that so this is the Dave so when we H we should Shadow medium okay and large let proper and let's remove the bottle okay so the next we are going to add this button let's add some height here so for now let's keep this border and here border height 120 pixel and here on button plus add to cart so let's Design This which should be full background blue 700 text white text Center and text [Music] small and padding two so let's remove this padding from here and we'll add the padding here P2 one and extra small and it should be 600 extra small now we can keep it too let's remove this border and this border also text let's increase the size to 250 or 200 is fine so uh we'll fix this design here here also we are showing okay is 60% so now we are going to implement once uh we you know select this okay so the value should be [Music] level so once we uh navigate to this laptop instead of uh displaying mobile so we are going to display uh this um laptop for tablet only it will show tablet and mobile it will show mobiles so for that let's go to the context product context folder and here let's add a class filter sorry uh function filter and this will take category as parameter and here const filtered [Music] products and this product data do map item or product see product dot category okay we have the category also here product. category triple equals to this category [Music] if category then it will return the product and if category else all set product here filter products uh I do not like this as is this one only the product data so filter products let's pass it as value and here uh in the homepage only we can do it app here so we need to you know fetch this uh panm so for that const category use params and here use effect City and here we can call this and we can pass the C here and we need to call call this one also use context and product constant so let's see it's working or not mobile no it's not working why it's not working let's see category index. j6 maybe typo issue okay okay uh so by mistake I use this map so it would be filter okay uh so now you can see uh for mobile we are displaying the mobiles for tablet only tablets and for laptop only laptops okay so this uh home button it's not working so let's fix this one also uh so this it should be NV link Nev link and to home okay so now once this is active we are changing the color of the active uh this menu item uh sorry NE item so let's implement this one [Music] also let's format this code so const is is active ele element and it will check if element is active or not is active then text blue 600 lse empty string so let's add the class name so this uh this thing okay uh the changing the color it will only work with this enabling component of react router Dom and uh it will not work with uh this only link component so now you can see the mobile is active so the color is changing here okay so next what we are going to build uh we are going when we click this uh okay let's fix this style little bit product P2 or V6 okay uh so when we click this um add to button um and add to button so here we are going to display the count of the product which we have added to the card okay and so first we are going to build this one so let's go to this uh context we add one more State card and sit card use State empty one function add product at cut [Music] here once we click so that time we'll pass product as a parameter and Set Card old card cons not constellate [Music] previous and it should be add a hold cut and now in the pre previous if previous dot length is less than 1 then simply we are going to previous do push this product this product with quantity one else else first we'll check if the product is there uh in the cart so we'll increase the quantity else we are simply going to push um uh push the product as a new element of card so for that const found or is product previous do find broad if broad. ID equals to product. ID if no then again we are going to do the same thing else previous do map broad if Brad ID if Brad do ID equals to ispro ID D then else prod so if the product ID is matching then we are going to increase uh the quantity else we are going to return the product if it is not matching the product oh sorry yes product and then quantity should be is product dot quantity + 1 so add to card is done so let's pass it expect the assignment keyword learn more so error the line number is where is the error okay I did not return it return prev okay says like 25 okay return let's go one more okay add card let's go here and add card and here we are going to call it on click add card and as a parameter let's pass the [Music] product let's close all this thing this before before I have to give it okay let's see uh context let's see the things are adding in the cart Json do stringify cart it's getting called or not I'm not sure CLG thing is coming something is wrong okay it's getting added I did not notice okay quantity one if I add one more time quantity two if I add the next item this is quantity one again the first item at three and second item two okay it's working fine so let's Implement okay so so here we are going to display if we have the count so for count we add invoice and set invoice and here count Z and sub total zero okay uh so whenever the cart is getting updated so use use effect and this card is the dependency so set invoice old previous let uh return new invoice and let's let new invoice equals to object previous do count Zer and subtotal zero and now uh this card we are going to iterate here card dot for each product invoice dot count plus equals product do quantity if it is there and the next one invoice subtotal should be product. quantity into product dot price and we are returning it we can const set count and or set invoice data we can have it like this and we can call it here whenever any products getting added to the card and should have of this we can let's see currently it's 0 0 if I add this product is adding if I add one more see the subtotal is getting increas and count is also showing proper okay so this issue we can fix it later so multiple zeros are coming so let's display this five data to the card so for that let's remove this and we are going to pass this invoice to the value array object and let's go to the card page or it's there in the name bar where is our card here so Dave and here let's put some dummy data zero and make it class name relative and class name absolute top two and right two minus minus and weight should be four height four text h extra small and BG blue 6 and text white color and text it should be Flex item Center justify centers and round should be full so inrease the background color 700 this looks proper now we are going to import this const invoice use con context and product context and now here we are going to display this badge only when we have the uh some uh product in the card if invoice do count count is greater than zero then only we are going to display it and this count we have hardcoded zero inad hardcoded zero let's display that actual count let's format it little bit see there is no product added in the card so I'm going to add one 2 3 4 5 6 so we are done till here so the next when we click here it should get re to the card and we are going to display the products we have added how many quantity uh we have added to the card the product price and we are going to have this functionality also to remove move the product from card and at the end we are going to uh display this alert kind of uh component okay so let's implement this first so this should be link and to cart so let's is working or not okay we are at the card page class should be H screen sorry this is okay we'll fix this issue first here minimum height should be screen and normal height is auto okay so now let's close 7 everything so cart. jsx use context and do context we did not pass the card here cost I'll restructure the cart and now here if we have the cart if cart dot length if cart and length is greater than zero then only we are going to display the card data else else we are going to display this empty add products div empty add products it should be link to home expand empty and this nbar this card [Music] icon it should be class Flex item set enter text 2 Xcel [Music] and justify Center padding 4 and add some Gap four should be huge two [Music] and class name text blue 6 it it's working fine so when we have any product so let's build that one also Dave so card do map then product it will return de and key should be product do ID so we'll have uh the UI like this so first we are going to display the image and let's [Music] add Shadows medium and padding to image product do image and ALT should be product. [Music] name and class name should be withd uh 120 pixel height 80 pixel object fit contain let's add some product and let's increase the P liting more okay now okay here the size a little bit 200 [Music] 120 and padding it's not needed okay uh so next uh phone number sorry the phone product name short description and quantity so let's this one also next item is let's add t b p and p product do name here D1 DT Q Dy and here price and name sorry not the price prod context products should be short description and here class text extra small text Gray 500 and class font bold and this quantity also same okay class Flex Flex call Gap 2 okay and this Flex item Center and the WID is 200 let's add order [Music] here 120 and here let's put some Gap four and let's remove the border and now uh display the price so WID should be 400 pixel or 450 let's move the Border a minimum WID and let fix width and now product dot price add a dollar design is matching or not okay so class font semi Bol and now we have a minus remove button so for that here [Music] remove okay we'll add one button so no need to have any button here let's add [Music] this class name text Red 600 and text Excel 2 Xcel and this should be justify bit pin and cursor pointer okay and the next we are going to create this part subtotal this we have done and then one more deep and one P [Music] tag subtotal then item and then we have the total invoice dollar where is the [Music] invoice invoice dot subtotal and here uh invoice. count invoice. count and items and item first let's see it's getting display or not okay total four items count is greater than one it 10 and items so four items and one place order button so let's add the place order button also should not be button place order color BG blue [Music] 600 text extra small text White and padding two which should be 200 pixel rounded MD okay and class name Flex Flex call Item and GAP four and it will be having Bing three and B Bing y AIS 4 and here it looks proper so now we are going to implement the remove item from the card and let's flux for and Bol so here we don't have the scroll space here right padding bottom let's add some 36 or 40 okay so let's implement this one add to cart remove card so don't need this [Music] stuff let's move the console if product so previous dot splice so first we have to find the product and the cart U cost is product equals to previous do find broad broad dot ID equals to product do ID if it is there then const index previous dot index of a product and then splice index by one so let's pass add to the value the cart card remove card and in the card let's import it and where is the button here so here on click product so let's see it's working or not 1 2 3 4 5 6 7 8 okay so we are going to uh remove the S Galaxy S21 first it's removing total four items we have 3 one done add product okay so we are almost done so now once we click it here right we should display this order successfully placed so let's copy this text and where is the success page order okay and now uh done let's copy this import it here class name text green 600 let's see how it looks okay we did not uh do this we have card so once uh we successfully place the [Music] order instead of text small should be small so once we place all the product should get removed from the card and uh this value right the card total item and sub tootal should get you know reset so so that for that we have to pass these two methods invoice and set invoice and set card set cart and set invoice so that is here invoice [Music] const place order so once we place the order we have to reset and set invoice should be count Z subtotal zero and we have to navigate to the success page so navigate use navigate we can use uh from the Reed Dom and this navigate to success so let's Okay one click what this so let's add few products remove working okay it's the style is not proper so let's fix the style class name Flex item Center justify Center text font bold and GAP two and text 2 XEL y let's increase to two now it looks proper so only one thing it's pending is uh when we add right we should display this product added or when we remove that time also we are displaying product is removed to the card for that I'm not going to use any third party so we are going to do it here so const message set message use state is empty so let's design it we can add it [Music] here we can have a deep class [Music] name let's not use anything here Dave some message class name PG green 600 text text white width 300 pixel and padding to let's see how it looks okay and text should be Center okay and it should be absolute right zero and top should be [Music] 40 not 40 exactly 20 would be fine okay and fixed should this is fixed and round it a little bit and Shadow LG okay uh so [Music] now we are going to display only when we click to add to card and remove from the card so for that if message then only we should display it [Music] message and here set message it's a minimum which should be minimum weight 300 pixel here we can do like this product name added to the cart and while removing removed from the card okay I did not add the message message OnePlus added to the card pixel 6 Apple iPhone 13 but the problem is it's not getting removed so after 1 second or 2 second it should get removed here so here const time out equals to set timeout after 1 second it should get removed set message should be empty and return clear timeout this time out now you see after 1 minute or 400 MC it will get removed and item removed 600 would be fine be sufficient to read the message otherwise it's like very fast iPhone 13 removed pixel 6 removed okay and one more issue is uh we have to we have to to uh fix it to the two digits after this decimal so for that let's go to the cart and subtotal we are displaying here count and invoice then two fix it's a JavaScript function we can put the limit to two okay sorry to fixed now it looks proper so this is all for this video hope you have learned a lot of things I have covered uh react router how the react uh context API Works how you can design the beautiful uh this UI how to use and install telin CSS how uh you can install react icons how you can know display the products adding the products then navigating to if you have learned then like this video and share it to your friends and and if you're new to this Channel Please Subscribe this channel for more video like this thank you so much for watching see you in the next video bye-bye

Channel: CodeOrCode

Views: 398

Keywords: react cart, react cart context, react cart example, react cart component, how to add items to cart using react js, how to remove item from cart in react js, how to create add to cart in react js, how to create a shopping cart in react, react context example, react context api example, what is context api in react, react tailwind css, react tailwind template, react tailwind template free, react project ideas, react project for beginners, react project github

Id: AdmB2CJ9I9E

Length: 77min 33sec (4653 seconds)

Published: Thu Jul 11 2024