title
React Tutorial: Build an e-commerce site from scratch using React and Netlify

description
Lean step-by-step how to create a full e-commerce store web site using React.js. Also learn how to deploy the site using Netlify. Set-up files: https://github.com/john-smilga/setup-filese-react-phone-e-commerce-project Tutorial from Coding Addict. Check out the Coding Addict YouTube channel: https://www.youtube.com/codingaddict -- Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://medium.freecodecamp.org

detail
{'title': 'React Tutorial: Build an e-commerce site from scratch using React and Netlify', 'heatmap': [{'end': 1144.046, 'start': 676.121, 'weight': 0.751}, {'end': 2052.992, 'start': 1814.141, 'weight': 0.754}, {'end': 2724.49, 'start': 2266.886, 'weight': 0.838}, {'end': 5220.447, 'start': 4765.685, 'weight': 0.749}, {'end': 9079.671, 'start': 8848.029, 'weight': 0.855}, {'end': 11353.641, 'start': 11119.322, 'weight': 0.817}, {'end': 12256.351, 'start': 12027.883, 'weight': 1}, {'end': 12940.049, 'start': 12705.894, 'weight': 0.712}], 'summary': 'Develop an e-commerce platform using reactjs, showcasing cart functionality, modal interactions, item management, and successful testing of paypal sandbox with a purchase of $69.30. the tutorial covers react application development, technology investigation, react router setup, styling components, proper usage of arrow functions, progress in web development, web ui design, building e-commerce functionality, modal container styling, optimizing cart display, working with jsx and cart items, tax calculation, paypal integration, and deployment on netlify.', 'chapters': [{'end': 438.854, 'segs': [{'end': 73.041, 'src': 'embed', 'start': 44.221, 'weight': 0, 'content': [{'end': 50.286, 'text': "we're going to have a modal with a text of item added to the cart and then the information about the product.", 'start': 44.221, 'duration': 6.065}, {'end': 58.571, 'text': 'Now, in the model, we have two options either we can continue shopping, which will gonna bring us back to a products page,', 'start': 51.026, 'duration': 7.545}, {'end': 60.533, 'text': 'Or we can go to the cart now.', 'start': 58.571, 'duration': 1.962}, {'end': 62.554, 'text': "first Let's check it out the car now.", 'start': 60.533, 'duration': 2.021}, {'end': 66.457, 'text': 'as you can see, once I add it to the cart, The item is going to be in the car now.', 'start': 62.554, 'duration': 3.903}, {'end': 73.041, 'text': "I'm not going to explore right now the quantity, because I would want to do that once we have more products in the car.", 'start': 66.457, 'duration': 6.584}], 'summary': 'Modal pops up after adding item to the cart, with options to continue shopping or go to cart. the item is added to the cart instantly.', 'duration': 28.82, 'max_score': 44.221, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR444221.jpg'}, {'end': 187.751, 'src': 'embed', 'start': 139.973, 'weight': 1, 'content': [{'end': 148.958, 'text': "but even though we added the item through the details page, as you can see, the icon when we're hovering over the product is displayed in cart.", 'start': 139.973, 'duration': 8.985}, {'end': 152.7, 'text': 'so again we cannot add the item twice in the cart,', 'start': 148.958, 'duration': 3.742}, {'end': 161.345, 'text': "because the whole idea is that once we go to the cart we're going to be able to manipulate the amount of items in a cart the cart itself,", 'start': 152.7, 'duration': 8.645}, {'end': 164.427, 'text': 'not by adding the same product multiple times in the cart.', 'start': 161.345, 'duration': 3.082}, {'end': 173.149, 'text': "and also, if i'm going to click on the details of the specific item that i added in the cart, the cart icon is also going to say in cart,", 'start': 164.927, 'duration': 8.222}, {'end': 176.869, 'text': 'and again we can click all day long, but nothing is going to change.', 'start': 173.149, 'duration': 3.72}, {'end': 182.53, 'text': 'so we have successfully added two items to the cart and now i would want to add a few more,', 'start': 176.869, 'duration': 5.661}, {'end': 187.751, 'text': 'just so we can see how we can manipulate the amount and tax and subtotal.', 'start': 182.53, 'duration': 5.221}], 'summary': 'Unable to add item twice in cart, focus on manipulating cart items', 'duration': 47.778, 'max_score': 139.973, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR4139973.jpg'}, {'end': 441.035, 'src': 'embed', 'start': 414.225, 'weight': 4, 'content': [{'end': 418.366, 'text': "And then obviously the URL that we're using as well as email.", 'start': 414.225, 'duration': 4.141}, {'end': 423.668, 'text': "Now, if I'm going to go to a sandbox, to the actual testing account that we're going to be using,", 'start': 418.966, 'duration': 4.702}, {'end': 430.55, 'text': 'notice that the purchase that was made on 15 December to a test store is successful with a $69.30..', 'start': 423.668, 'duration': 6.882}, {'end': 435.232, 'text': 'And this was the value that we sent it out to a PayPal.', 'start': 430.55, 'duration': 4.682}, {'end': 438.854, 'text': 'now we also have an option of canceling the purchase.', 'start': 435.612, 'duration': 3.242}, {'end': 441.035, 'text': "so if i'm going to go back to the store,", 'start': 438.854, 'duration': 2.181}], 'summary': 'Successful test purchase of $69.30 sent to paypal with option to cancel.', 'duration': 26.81, 'max_score': 414.225, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR4414225.jpg'}], 'start': 0.309, 'title': 'Reactjs e-commerce project highlights and testing paypal sandbox', 'summary': 'Showcases the development of an e-commerce platform using reactjs, illustrating cart functionality, modal interactions, and item management. it also demonstrates manipulating cart items and testing paypal sandbox, resulting in a successful test purchase of $69.30 on 15 december.', 'chapters': [{'end': 204.181, 'start': 0.309, 'title': 'Reactjs e-commerce project highlights', 'summary': 'Showcases the development of an e-commerce platform utilizing reactjs, illustrating the addition of products to the cart, modal interactions, and the management of items and cart functionality.', 'duration': 203.872, 'highlights': ['The application allows for adding products to the cart and displays a modal confirmation upon successful addition. The application provides the functionality to add products to the cart, triggering a modal confirmation upon successful addition of the item, enhancing user experience.', 'The cart functionality includes the manipulation of the quantity of items, displaying the total subtotal and tax. The cart functionality enables users to manipulate the quantity of items, displaying the total subtotal and tax, providing a comprehensive shopping experience.', 'The system prevents adding the same product multiple times to the cart, ensuring efficient cart management. The system prevents the addition of the same product multiple times to the cart, ensuring efficient cart management and preventing duplication of items.']}, {'end': 438.854, 'start': 204.461, 'title': 'Manipulating cart items and testing paypal sandbox', 'summary': 'Demonstrates the manipulation of cart items, including adding, removing, and clearing items, and testing paypal sandbox for payment processing, resulting in a successful test purchase of $69.30 on 15 december.', 'duration': 234.393, 'highlights': ['Demonstrating manipulation of cart items The demonstration includes adding, removing, and clearing items from the cart, with changes in item total, subtotal tax, and overall total reflecting the manipulation.', 'Testing PayPal Sandbox The testing involves setting up the PayPal Sandbox, logging in with a test account, making a test purchase of $69.30, and checking the success message and details in the console.']}], 'duration': 438.545, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR4309.jpg', 'highlights': ['The application provides the functionality to add products to the cart, triggering a modal confirmation upon successful addition of the item, enhancing user experience.', 'The cart functionality enables users to manipulate the quantity of items, displaying the total subtotal and tax, providing a comprehensive shopping experience.', 'The system prevents the addition of the same product multiple times to the cart, ensuring efficient cart management and preventing duplication of items.', 'Demonstrating manipulation of cart items including adding, removing, and clearing items from the cart, with changes in item total, subtotal tax, and overall total reflecting the manipulation.', 'Testing PayPal Sandbox involves setting up the PayPal Sandbox, logging in with a test account, making a test purchase of $69.30, and checking the success message and details in the console.']}, {'end': 1628.362, 'segs': [{'end': 478.404, 'src': 'embed', 'start': 438.854, 'weight': 0, 'content': [{'end': 441.035, 'text': "so if i'm going to go back to the store,", 'start': 438.854, 'duration': 2.181}, {'end': 450.219, 'text': "let's say we're going to add one item and we're going to go to a cart and again try to do the paypal and after logging in instead of clicking the pay now,", 'start': 441.035, 'duration': 9.184}, {'end': 457.083, 'text': "where i would want to buy the items that were added to my cart, i'm just going to close the tab and check it out what we're going to have right now.", 'start': 450.219, 'duration': 6.864}, {'end': 460.606, 'text': "So now I'm going to be directed back to the cart.", 'start': 457.623, 'duration': 2.983}, {'end': 462.708, 'text': "So the purchase wasn't successful.", 'start': 461.087, 'duration': 1.621}, {'end': 466.532, 'text': "And if we're going to go to inspect, check it out what we're going to have.", 'start': 463.149, 'duration': 3.383}, {'end': 468.014, 'text': "So we're going to have the console.", 'start': 466.572, 'duration': 1.442}, {'end': 470.416, 'text': 'And as you can see, the payment was canceled.', 'start': 468.574, 'duration': 1.842}, {'end': 474.16, 'text': 'So instead of succeeded, the payment did not go through.', 'start': 470.857, 'duration': 3.303}, {'end': 478.404, 'text': 'So what technologies are we going to be using to build this project?', 'start': 474.881, 'duration': 3.523}], 'summary': 'Failed purchase attempt using paypal, leading to payment cancellation.', 'duration': 39.55, 'max_score': 438.854, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR4438854.jpg'}, {'end': 529.775, 'src': 'embed', 'start': 501.349, 'weight': 2, 'content': [{'end': 508.551, 'text': "We're going to have some of it with a just bootstrap classes and some of it with a styled components.", 'start': 501.349, 'duration': 7.202}, {'end': 512.496, 'text': "we're also going to work with a react router.", 'start': 509.031, 'duration': 3.465}, {'end': 518.543, 'text': "so we're going to set up our routing with a react router to have our single page application,", 'start': 512.496, 'duration': 6.047}, {'end': 523.99, 'text': "as well as we're going to work with a context api to have one single source of truth.", 'start': 518.543, 'duration': 5.447}, {'end': 529.775, 'text': "So all the actions that we're going to be doing throughout this application we're going to be stored in one place,", 'start': 524.511, 'duration': 5.264}], 'summary': 'Building a web app with react using bootstrap, styled components, react router, and context api for centralized state management.', 'duration': 28.426, 'max_score': 501.349, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR4501349.jpg'}, {'end': 891.436, 'src': 'embed', 'start': 861.948, 'weight': 3, 'content': [{'end': 864.79, 'text': "Now the Bootstrap we're going to install using the NPM.", 'start': 861.948, 'duration': 2.842}, {'end': 873.196, 'text': "So I'm going to stop my server for now, and we're just going to clear the terminal and let's write the command, which is going to be NPM.", 'start': 865.331, 'duration': 7.865}, {'end': 875.178, 'text': "And we're going to be looking for install.", 'start': 873.757, 'duration': 1.421}, {'end': 878.101, 'text': 'Right away would want the dash dash save.', 'start': 875.798, 'duration': 2.303}, {'end': 880.444, 'text': 'So this is going to be saved as our dependency.', 'start': 878.221, 'duration': 2.223}, {'end': 882.586, 'text': "And here we're going to just write bootstrap.", 'start': 881.044, 'duration': 1.542}, {'end': 885.649, 'text': "So just like that, we're going to start installing the bootstrap.", 'start': 883.167, 'duration': 2.482}, {'end': 891.436, 'text': "So while the bootstrap is being installed, we're going to head over to Google Fonts.", 'start': 886.27, 'duration': 5.166}], 'summary': 'Installing bootstrap using npm with --save option', 'duration': 29.488, 'max_score': 861.948, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR4861948.jpg'}, {'end': 1097.018, 'src': 'embed', 'start': 1067.772, 'weight': 5, 'content': [{'end': 1070.014, 'text': "Within the container, let's place a row.", 'start': 1067.772, 'duration': 2.242}, {'end': 1074.359, 'text': "And within the row, let's do, I don't know, two column layout.", 'start': 1070.655, 'duration': 3.704}, {'end': 1075.781, 'text': "So let's say column six.", 'start': 1074.419, 'duration': 1.362}, {'end': 1078.564, 'text': "And let's say column number one.", 'start': 1076.622, 'duration': 1.942}, {'end': 1088.432, 'text': "column number one and let's copy and paste it and just like that, we're going to save this, and you know what we have everything working.", 'start': 1079.665, 'duration': 8.767}, {'end': 1095.377, 'text': 'as you can see, we have two column layout, so bootstrap is available and also let me save the index.html.', 'start': 1088.432, 'duration': 6.945}, {'end': 1097.018, 'text': 'so we have our fonts now.', 'start': 1095.377, 'duration': 1.641}], 'summary': 'Creating a container with a two-column layout using bootstrap, saving index.html, and adding fonts.', 'duration': 29.246, 'max_score': 1067.772, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR41067772.jpg'}, {'end': 1185.586, 'src': 'heatmap', 'start': 676.121, 'weight': 6, 'content': [{'end': 683.887, 'text': 'and it is important that you copy and paste the files to the same folder, otherwise your application is not going to work the same as mine.', 'start': 676.121, 'duration': 7.766}, {'end': 691.573, 'text': "so, as you can see, we have data.js, where we're going to have all the information about the product, as well as logo SVG,", 'start': 683.887, 'duration': 7.686}, {'end': 693.575, 'text': 'which will going to be used, obviously, for our logo.', 'start': 691.573, 'duration': 2.002}, {'end': 700.403, 'text': 'So let me just grab these two files and I would want to go to a source folder in my working project.', 'start': 694.016, 'duration': 6.387}, {'end': 702.885, 'text': 'So let me grab them and copy and paste them.', 'start': 700.763, 'duration': 2.122}, {'end': 710.473, 'text': "And as you can see, it's going to say, well, would you want to replace the logo SVG? And I would want to replace it.", 'start': 703.266, 'duration': 7.207}, {'end': 713.176, 'text': "So I'm just going to say replace the logo SVG.", 'start': 710.854, 'duration': 2.322}, {'end': 720.402, 'text': 'Next, we would want to get the images because as you can see, we have images folder with all the images for the product.', 'start': 713.856, 'duration': 6.546}, {'end': 723.045, 'text': 'Now this folder is not going to go in the source.', 'start': 720.943, 'duration': 2.102}, {'end': 726.148, 'text': 'In fact, this is going to go in the public folder.', 'start': 723.906, 'duration': 2.242}, {'end': 733.612, 'text': "because I'm going to show you two ways how we can in fact get the images in the create react app.", 'start': 726.608, 'duration': 7.004}, {'end': 738.294, 'text': 'so this is going to be the second option, where the images are in our public folder.', 'start': 733.612, 'duration': 4.682}, {'end': 743.597, 'text': 'so these are going to be things that we need to get from the set of files to our working project.', 'start': 738.294, 'duration': 5.303}, {'end': 749.22, 'text': "and once we're done doing that, I can just see what I'm going to have in my code editor.", 'start': 743.597, 'duration': 5.623}, {'end': 753.963, 'text': "so in my Visual Studio code, and since I'm using the Visual Studio Code,", 'start': 749.22, 'duration': 4.743}, {'end': 761.387, 'text': "I'm going to open up the integrated terminal which comes with a Visual Studio Code, and then we're going to run npm start,", 'start': 753.963, 'duration': 7.424}, {'end': 764.149, 'text': "which we're going to start our development server.", 'start': 761.387, 'duration': 2.762}, {'end': 770.513, 'text': "now, before I do that, I'm going to open up the new window, just so I can see it side by side with my text editor.", 'start': 764.149, 'duration': 6.364}, {'end': 778.818, 'text': 'so let me run the npm start and this should open up the development server in the browser under the localhost of 3000.', 'start': 770.513, 'duration': 8.305}, {'end': 787.083, 'text': "so, While this is going to be loading, I'm going to do one more thing where I would want to show you the project,", 'start': 778.818, 'duration': 8.265}, {'end': 789.665, 'text': "as we're working in the bigger browser.", 'start': 787.083, 'duration': 2.582}, {'end': 791.466, 'text': 'So in the bigger browser window.', 'start': 789.945, 'duration': 1.521}, {'end': 793.968, 'text': "In this case, again, I'm going to do the new window.", 'start': 792.027, 'duration': 1.941}, {'end': 795.809, 'text': "So I'm going to open up the new window.", 'start': 794.408, 'duration': 1.401}, {'end': 798.371, 'text': "So let's write localhost 3000.", 'start': 796.089, 'duration': 2.282}, {'end': 802.594, 'text': 'And sure enough, we have our application right now in the bigger window.', 'start': 798.371, 'duration': 4.223}, {'end': 810.619, 'text': "Because while we're going to be working in the project, it helps us to see the application in the bigger browser window.", 'start': 803.334, 'duration': 7.285}, {'end': 815.003, 'text': "so this is going to be the application where we're going to have in the bigger browser window.", 'start': 811.019, 'duration': 3.984}, {'end': 819.948, 'text': 'however, like i said, we would also want to open up the smaller browser window.', 'start': 815.003, 'duration': 4.945}, {'end': 824.372, 'text': "so we're going to say localhost 3000 and sure enough we have our application.", 'start': 819.948, 'duration': 4.424}, {'end': 827.535, 'text': "so this is what we're going to see all the time throughout the project.", 'start': 824.372, 'duration': 3.163}, {'end': 832.52, 'text': "however, if there's going to be some changes that i would want you to see on the bigger browser window,", 'start': 827.535, 'duration': 4.985}, {'end': 835.243, 'text': "i'm just going to navigate over here to this react app.", 'start': 832.52, 'duration': 2.723}, {'end': 837.125, 'text': "now you don't have to do this.", 'start': 835.763, 'duration': 1.362}, {'end': 841.029, 'text': "i'm just doing this because i think it's going to be easier for you to follow along.", 'start': 837.125, 'duration': 3.904}, {'end': 845.534, 'text': 'you can just work here with your smaller localhost dev server.', 'start': 841.029, 'duration': 4.505}, {'end': 850.22, 'text': 'now this would be a setup and now we can move on and start working on our project.', 'start': 845.534, 'duration': 4.686}, {'end': 857.605, 'text': 'the first order of business would be getting the Google Fonts, Font Awesome and Bootstrap.', 'start': 851.461, 'duration': 6.144}, {'end': 861.188, 'text': 'So everything that has to do with a CSS.', 'start': 858.125, 'duration': 3.063}, {'end': 864.79, 'text': "Now the Bootstrap we're going to install using the NPM.", 'start': 861.948, 'duration': 2.842}, {'end': 873.196, 'text': "So I'm going to stop my server for now, and we're just going to clear the terminal and let's write the command, which is going to be NPM.", 'start': 865.331, 'duration': 7.865}, {'end': 875.178, 'text': "And we're going to be looking for install.", 'start': 873.757, 'duration': 1.421}, {'end': 878.101, 'text': 'Right away would want the dash dash save.', 'start': 875.798, 'duration': 2.303}, {'end': 880.444, 'text': 'So this is going to be saved as our dependency.', 'start': 878.221, 'duration': 2.223}, {'end': 882.586, 'text': "And here we're going to just write bootstrap.", 'start': 881.044, 'duration': 1.542}, {'end': 885.649, 'text': "So just like that, we're going to start installing the bootstrap.", 'start': 883.167, 'duration': 2.482}, {'end': 891.436, 'text': "So while the bootstrap is being installed, we're going to head over to Google Fonts.", 'start': 886.27, 'duration': 5.166}, {'end': 895.821, 'text': 'And that is as easy as just typing Google Fonts in the Google search.', 'start': 891.676, 'duration': 4.145}, {'end': 898.362, 'text': 'And then we would want two types of fonts.', 'start': 896.601, 'duration': 1.761}, {'end': 904.606, 'text': 'The first one is going to be Oswald and the second one is going to be permanent marker.', 'start': 899.023, 'duration': 5.583}, {'end': 907.028, 'text': "Let's start with Oswald.", 'start': 905.587, 'duration': 1.441}, {'end': 909.57, 'text': "So in the search box, I'm just going to write Oswald.", 'start': 907.408, 'duration': 2.162}, {'end': 912.832, 'text': "And this is the font that we're going to use for the whole body.", 'start': 910.23, 'duration': 2.602}, {'end': 914.973, 'text': "So I'm just going to add a font.", 'start': 913.472, 'duration': 1.501}, {'end': 918.075, 'text': 'And the second one, like I said, is going to be permanent marker.', 'start': 915.533, 'duration': 2.542}, {'end': 920.837, 'text': "So I'm going to be looking for the permanent marker.", 'start': 918.735, 'duration': 2.102}, {'end': 925.539, 'text': "now. i'm not going to add any type of specific fonts, any extra.", 'start': 921.457, 'duration': 4.082}, {'end': 928.66, 'text': "i'm just going to go with a most basic ones.", 'start': 925.539, 'duration': 3.121}, {'end': 936.163, 'text': "and what we're going to do is we're just going to grab this link, copy and paste it, and we're going to paste it in our index.html.", 'start': 928.66, 'duration': 7.503}, {'end': 945.667, 'text': "so if i'm going to open up the sidebar, we're going to head over to index.html in the public folder And we're going to find where is our head tag.", 'start': 936.163, 'duration': 9.504}, {'end': 948.649, 'text': 'Now within the head tag, as you can see, we have the title.', 'start': 946.227, 'duration': 2.422}, {'end': 951.451, 'text': "So while we're here right away, let's change the title.", 'start': 949.169, 'duration': 2.282}, {'end': 956.935, 'text': "And I'm going to call this the, not the store, but I'm just going to say store recording.", 'start': 952.131, 'duration': 4.804}, {'end': 960.737, 'text': 'But obviously you can name it whatever your app is going to be named.', 'start': 957.395, 'duration': 3.342}, {'end': 962.879, 'text': "So here I'm going to write recording.", 'start': 960.777, 'duration': 2.102}, {'end': 965.06, 'text': 'And just like that, I have my title.', 'start': 963.619, 'duration': 1.441}, {'end': 968.802, 'text': 'Now next, I would be looking for the Google Fonts.', 'start': 965.62, 'duration': 3.182}, {'end': 972.145, 'text': "So I'm just going to write the comment of Google.", 'start': 968.903, 'duration': 3.242}, {'end': 976.846, 'text': "fonts and we're just gonna copy and paste the fonts right here.", 'start': 973.285, 'duration': 3.561}, {'end': 979.787, 'text': 'so I have my Google fonts in the document.', 'start': 976.846, 'duration': 2.941}, {'end': 985.689, 'text': 'now also, as you can see, the bootstrap has done loading, so I have it as my dependency.', 'start': 979.787, 'duration': 5.902}, {'end': 988.609, 'text': 'so again we can start up the dev server.', 'start': 985.689, 'duration': 2.92}, {'end': 992.43, 'text': "so again we're gonna write the NPM and what's gonna say start.", 'start': 988.609, 'duration': 3.821}, {'end': 998.152, 'text': 'so just like that, we have our server back on and we are seeing all the changes live.', 'start': 992.43, 'duration': 5.722}, {'end': 1003.593, 'text': "Now let's head over to app.js and let's grab the bootstrap.", 'start': 998.972, 'duration': 4.621}, {'end': 1007.174, 'text': 'Because if we would want to use the bootstrap, we also need to import it.', 'start': 1004.114, 'duration': 3.06}, {'end': 1013.676, 'text': 'And since the app is going to be our main component, where all our components is going to meet,', 'start': 1007.795, 'duration': 5.881}, {'end': 1015.997, 'text': "we're going to write here that we would want to import.", 'start': 1013.676, 'duration': 2.321}, {'end': 1019.719, 'text': "And what we're going to be importing? Well, we're going to be importing the bootstrap.", 'start': 1016.617, 'duration': 3.102}, {'end': 1026.143, 'text': 'So since the bootstrap is in the node modules, we can just access it by typing bootstrap.', 'start': 1020.24, 'duration': 5.903}, {'end': 1029.005, 'text': "And then we're looking for a distribution folder.", 'start': 1026.704, 'duration': 2.301}, {'end': 1033.167, 'text': "Then within the distribution folder, there's going to be a CSS folder.", 'start': 1029.586, 'duration': 3.581}, {'end': 1041.873, 'text': "And then within this CSS folder, we're looking for bootstrap file bootstrap min.css.", 'start': 1033.647, 'duration': 8.226}, {'end': 1043.915, 'text': 'I believe that was the correct file.', 'start': 1042.194, 'duration': 1.721}, {'end': 1050.959, 'text': 'And once we have the file, as you can see, now we save it and we should have already some changes seen.', 'start': 1044.615, 'duration': 6.344}, {'end': 1052.92, 'text': "And here we'll have an app.", 'start': 1051.679, 'duration': 1.241}, {'end': 1058.623, 'text': 'Now within the app, what I would want is get rid of all the information that I have right now.', 'start': 1053.58, 'duration': 5.043}, {'end': 1061.105, 'text': "So let's just get rid of the whole div.", 'start': 1059.404, 'duration': 1.701}, {'end': 1064.889, 'text': "And let's test it out whether the actual bootstrap is working.", 'start': 1061.785, 'duration': 3.104}, {'end': 1067.151, 'text': "So I'm going to start with a container.", 'start': 1065.429, 'duration': 1.722}, {'end': 1070.014, 'text': "Within the container, let's place a row.", 'start': 1067.772, 'duration': 2.242}, {'end': 1074.359, 'text': "And within the row, let's do, I don't know, two column layout.", 'start': 1070.655, 'duration': 3.704}, {'end': 1075.781, 'text': "So let's say column six.", 'start': 1074.419, 'duration': 1.362}, {'end': 1078.564, 'text': "And let's say column number one.", 'start': 1076.622, 'duration': 1.942}, {'end': 1088.432, 'text': "column number one and let's copy and paste it and just like that, we're going to save this, and you know what we have everything working.", 'start': 1079.665, 'duration': 8.767}, {'end': 1095.377, 'text': 'as you can see, we have two column layout, so bootstrap is available and also let me save the index.html.', 'start': 1088.432, 'duration': 6.945}, {'end': 1097.018, 'text': 'so we have our fonts now.', 'start': 1095.377, 'duration': 1.641}, {'end': 1100.181, 'text': 'obviously, we still need to work with them in css.', 'start': 1097.018, 'duration': 3.163}, {'end': 1108.585, 'text': 'this is the reason why nothing changed with our fonts right now and before we leave the index html, i also would want to grab the font awesome.', 'start': 1100.181, 'duration': 8.404}, {'end': 1118.789, 'text': "so, as you can see, once we go to font awesome.com, we have a very easy option of just start using it for free, and here we're going to get our cdn.", 'start': 1108.585, 'duration': 10.204}, {'end': 1124.752, 'text': 'now again, we just need to grab the cdn and copy and paste it in our index html.', 'start': 1118.789, 'duration': 5.963}, {'end': 1132.576, 'text': "so, just like that, let me make a comment that this is going to be font Awesome and we're going to copy and paste the CDN.", 'start': 1124.752, 'duration': 7.824}, {'end': 1135.619, 'text': 'So now we should have a font awesome available.', 'start': 1133.017, 'duration': 2.602}, {'end': 1144.046, 'text': 'Again if we want to test it out in the app.js we might as well in one of the columns try to place one of the font awesome icons.', 'start': 1136.179, 'duration': 7.867}, {'end': 1148.789, 'text': "So let's create a span and let's say FAS and FA home.", 'start': 1144.586, 'duration': 4.203}, {'end': 1152.831, 'text': 'So the most standard and basic font awesome icon.', 'start': 1149.249, 'duration': 3.582}, {'end': 1155.013, 'text': 'And just like that we have our icon.', 'start': 1153.432, 'duration': 1.581}, {'end': 1161.417, 'text': "So we're good to go to a app CSS and start working with our styles.", 'start': 1155.553, 'duration': 5.864}, {'end': 1170.72, 'text': 'since we have our fonts available as well, as we would want to add a little bit of styling to our application right off the bat.', 'start': 1161.997, 'duration': 8.723}, {'end': 1177.862, 'text': 'so in the app css, i would just want to select everything that i have currently in there and just delete it.', 'start': 1170.72, 'duration': 7.142}, {'end': 1185.586, 'text': "and since we're going to be using the custom variables from the css, I would want to set up first the root.", 'start': 1177.862, 'duration': 7.724}], 'summary': 'Setting up project files and importing google fonts, font awesome, and bootstrap using npm and cdn.', 'duration': 52.569, 'max_score': 676.121, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR4676121.jpg'}, {'end': 1336.525, 'src': 'embed', 'start': 1309.71, 'weight': 4, 'content': [{'end': 1315.673, 'text': 'so let me head back to the google fonts and, as you can see, we have the options of how we can include the fonts.', 'start': 1309.71, 'duration': 5.963}, {'end': 1319.855, 'text': "so first let's select the oswald and let's add it to the whole body.", 'start': 1315.673, 'duration': 4.182}, {'end': 1324.998, 'text': "so we're going to say font family for the body and we would be looking for the oswald.", 'start': 1319.855, 'duration': 5.143}, {'end': 1328.76, 'text': 'however, the issue here is very simple.', 'start': 1325.618, 'duration': 3.142}, {'end': 1336.525, 'text': "since we are using the bootstrap, since we have included the bootstrap with our app css or, i'm sorry, with our app js,", 'start': 1328.76, 'duration': 7.765}], 'summary': 'Using google fonts to include oswald in the body, but facing issue with bootstrap inclusion', 'duration': 26.815, 'max_score': 1309.71, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR41309710.jpg'}, {'end': 1475.825, 'src': 'embed', 'start': 1449.307, 'weight': 8, 'content': [{'end': 1456.051, 'text': 'So you could do it with a CSS, splitting it in a different file or writing your whole CSS in the app CSS.', 'start': 1449.307, 'duration': 6.744}, {'end': 1463.336, 'text': 'But the whole point is to show you how powerful are the style components with the fact that we can reuse the component.', 'start': 1456.712, 'duration': 6.624}, {'end': 1467.419, 'text': 'And again, this will going to make sense as we start working with them.', 'start': 1463.496, 'duration': 3.923}, {'end': 1475.825, 'text': 'But for now, I just want to tell you, if you really hate CSS, if you really hate the style components, you can write everything here in the app CSS.', 'start': 1467.799, 'duration': 8.026}], 'summary': 'Style components allow powerful reuse of components in css.', 'duration': 26.518, 'max_score': 1449.307, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR41449307.jpg'}], 'start': 438.854, 'title': 'Failed payment, technology investigation, react application with bootstrap, and custom styling', 'summary': 'Demonstrates a failed payment process and explores technologies for a project. it also covers building a react application with bootstrap, styled components, react router, and context api as part of a udemy course. additionally, it includes setting up bootstrap, integrating font awesome, defining custom variables, and creating reusable classes for styling.', 'chapters': [{'end': 478.404, 'start': 438.854, 'title': 'Failed payment and technology investigation', 'summary': 'Demonstrates a failed payment process while exploring the technologies to be utilized for a project.', 'duration': 39.55, 'highlights': ['The payment process failed, resulting in the cancellation of the transaction and providing insight into the user experience and potential issues. (Quantity: 3)', 'The user intentionally closed the tab instead of proceeding with the payment, indicating a deliberate action that resulted in the unsuccessful transaction. (Quantity: 2)', 'The chapter also hints at an upcoming project and the inquiry into the technologies that will be employed, signifying a transition to the next phase of development. (Quantity: 1)']}, {'end': 1043.915, 'start': 479.125, 'title': 'Building a react application with bootstrap and styled components', 'summary': 'Covers building a react application with bootstrap for easy css, exploring styled components, working with react router and context api, and deploying the application on netlify, as part of a udemy course. it also includes setting up the application, importing files, installing dependencies like bootstrap and google fonts, and incorporating them into the project.', 'duration': 564.79, 'highlights': ['The chapter covers building a React application with Bootstrap for easy CSS, exploring styled components, working with React Router and Context API, and deploying the application on Netlify, as part of a Udemy course. This provides an overview of the key areas covered in the chapter, including the use of Bootstrap and styled components, working with React Router and Context API, and deploying the application on Netlify.', 'Installing Bootstrap using NPM and incorporating it into the project. Describes the process of installing Bootstrap using NPM and integrating it into the project for styling purposes.', 'Incorporating Google Fonts into the project and making changes in the index.html file. Explains the steps for adding Google Fonts to the project and modifying the index.html file to include the fonts.', 'Setting up the application, importing files, and installing dependencies like Bootstrap and Google Fonts. Highlights the initial steps involved in setting up the application, importing necessary files, and installing dependencies such as Bootstrap and Google Fonts.']}, {'end': 1628.362, 'start': 1044.615, 'title': 'Setting up bootstrap and custom styling', 'summary': 'Covers setting up bootstrap for a two-column layout, integrating font awesome, defining custom variables for colors and fonts, and creating reusable classes for styling in the app.css file.', 'duration': 583.747, 'highlights': ['Setting up Bootstrap for a two-column layout The speaker demonstrates setting up a two-column layout using Bootstrap by creating a container, row, and two columns, affirming the availability and functionality of Bootstrap.', 'Integrating Font Awesome and testing with an icon The process of integrating Font Awesome by obtaining the CDN and then testing it by placing an icon within the app.js is explained, showcasing the successful inclusion of Font Awesome icons.', 'Defining custom variables for colors and fonts The creation of custom variables for colors (main blue, light blue, main white, main dark, main yellow) and fonts (Oswald) is detailed, providing a structured approach for styling with custom variables.', "Creating reusable classes for styling in the app.css file The creation of reusable classes for styling, such as 'title' with custom font family and 'text blue' and 'text bright' for different color values, is highlighted, emphasizing the approach of reusability in styling."]}], 'duration': 1189.508, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR4438854.jpg', 'highlights': ['The payment process failed, providing insight into user experience and potential issues. (Quantity: 3)', 'The user intentionally closed the tab, resulting in the unsuccessful transaction. (Quantity: 2)', 'The chapter covers building a React application with Bootstrap, styled components, React Router, and Context API. (Quantity: 1)', 'Installing Bootstrap using NPM and incorporating it into the project. (Quantity: 1)', 'Incorporating Google Fonts into the project and making changes in the index.html file. (Quantity: 1)', 'Setting up Bootstrap for a two-column layout. (Quantity: 1)', 'Integrating Font Awesome and testing with an icon. (Quantity: 1)', 'Defining custom variables for colors and fonts. (Quantity: 1)', 'Creating reusable classes for styling in the app.css file. (Quantity: 1)']}, {'end': 3287.728, 'segs': [{'end': 1654.781, 'src': 'embed', 'start': 1629.042, 'weight': 1, 'content': [{'end': 1637.096, 'text': 'So, just like this, we have our basic glasses set up and we can start moving towards the working on our components.', 'start': 1629.042, 'duration': 8.054}, {'end': 1644.331, 'text': "Like I mentioned in the intro, for the application, we're going to be using the React router.", 'start': 1638.726, 'duration': 5.605}, {'end': 1648.735, 'text': "So as you can see, if I'm on the product, this is going to be my main page.", 'start': 1644.872, 'duration': 3.863}, {'end': 1654.781, 'text': 'However, once we click on the cart, notice the URL has the forward slash of cart added.', 'start': 1649.236, 'duration': 5.545}], 'summary': 'Setting up basic glasses for components using react router for application.', 'duration': 25.739, 'max_score': 1629.042, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR41629042.jpg'}, {'end': 1727.255, 'src': 'embed', 'start': 1694.125, 'weight': 4, 'content': [{'end': 1697.565, 'text': "Now we're done with a CSS, at least for now.", 'start': 1694.125, 'duration': 3.44}, {'end': 1704.607, 'text': "And then we also can delete some of the stuff from this app.js because it's not necessary.", 'start': 1698.246, 'duration': 6.361}, {'end': 1708.648, 'text': "As well as I'm going to close the index.html because we do not need it.", 'start': 1705.187, 'duration': 3.461}, {'end': 1713.29, 'text': "And let me get rid of these containers because we definitely don't need them.", 'start': 1709.368, 'duration': 3.922}, {'end': 1717.671, 'text': "And then the only thing we're going to use for now is just going to be a React fragment.", 'start': 1714.01, 'duration': 3.661}, {'end': 1727.255, 'text': "And for those of you who don't know what is a React fragment, a React fragment just allows us to simulate the HTML tag.", 'start': 1718.392, 'duration': 8.863}], 'summary': 'Removing unnecessary css, app.js code, index.html, and containers, utilizing react fragment for html simulation.', 'duration': 33.13, 'max_score': 1694.125, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR41694125.jpg'}, {'end': 2052.992, 'src': 'heatmap', 'start': 1814.141, 'weight': 0.754, 'content': [{'end': 1818.745, 'text': "now, since this is going to be a component, we're going to start with an uppercase letter,", 'start': 1814.141, 'duration': 4.604}, {'end': 1824.208, 'text': "And for all the components that we're going to be creating right now, the syntax is going to be very basic.", 'start': 1819.445, 'duration': 4.763}, {'end': 1829.832, 'text': "Now I'm going to use my snippets extension that I have where I can just write RCC.", 'start': 1824.709, 'duration': 5.123}, {'end': 1832.674, 'text': 'So this is going to be a class based component.', 'start': 1830.352, 'duration': 2.322}, {'end': 1839.438, 'text': 'And just like that, you can see that I have import from React and the class already set up as well as the export default.', 'start': 1833.074, 'duration': 6.364}, {'end': 1849.76, 'text': "and only thing i'm going to write within the navbar is, i'm just going to say hello, hello from navbar, hello from navbar.", 'start': 1840.058, 'duration': 9.702}, {'end': 1855.342, 'text': "and just like that, i have my navbar component and, like i said, we're going to have a few of them.", 'start': 1849.76, 'duration': 5.582}, {'end': 1857.142, 'text': 'so the first one is going to be navbar.', 'start': 1855.342, 'duration': 1.8}, {'end': 1860.863, 'text': "then we're looking product list, which is going to be all the products.", 'start': 1857.142, 'duration': 3.721}, {'end': 1865.586, 'text': 'also, we would want to have the details, the cart and the default one.', 'start': 1860.863, 'duration': 4.723}, {'end': 1870.871, 'text': "As you can see with an application once we're using the React Router.", 'start': 1866.086, 'duration': 4.785}, {'end': 1877.779, 'text': "if I'm going to apply some kind of route that we don't have, so let's say I would be looking for I don't know store.", 'start': 1870.871, 'duration': 6.908}, {'end': 1879.34, 'text': 'So store.', 'start': 1878.279, 'duration': 1.061}, {'end': 1881.402, 'text': 'And as you can see, the page is not found.', 'start': 1879.841, 'duration': 1.561}, {'end': 1888.348, 'text': "Now what you see here is the Netlify response, because I'm showing you the deployed project on the Netlify.", 'start': 1882.063, 'duration': 6.285}, {'end': 1894.053, 'text': "But in the project that we're currently working in, you'll see the difference of React Router.", 'start': 1889.009, 'duration': 5.044}, {'end': 1896.735, 'text': "So again, this is not the page that we're going to be setting up.", 'start': 1894.433, 'duration': 2.302}, {'end': 1900.778, 'text': "This is the Netlify's response to a page not found.", 'start': 1897.235, 'duration': 3.543}, {'end': 1904.939, 'text': "However, we're going to set up something really similar with a React router.", 'start': 1901.138, 'duration': 3.801}, {'end': 1909.161, 'text': "So let me go back to the site and let's start working on our next components.", 'start': 1905.42, 'duration': 3.741}, {'end': 1912.762, 'text': 'So like I said, the first one is going to be navbar.js.', 'start': 1909.601, 'duration': 3.161}, {'end': 1918.264, 'text': "Then we're looking for another component, which will going to be product list.", 'start': 1913.442, 'duration': 4.822}, {'end': 1920.365, 'text': "So I'm going to start with a new file.", 'start': 1918.764, 'duration': 1.601}, {'end': 1924.306, 'text': "Again, we're going to call this product list.js.", 'start': 1920.825, 'duration': 3.481}, {'end': 1926.387, 'text': "And again, we're going to start with a capital letter.", 'start': 1924.406, 'duration': 1.981}, {'end': 1931.211, 'text': "so again we're going to use the rcc and for those of you who don't know,", 'start': 1926.887, 'duration': 4.324}, {'end': 1941.061, 'text': 'what extensions are we using for the rest of the project we have the extensions and within the extensions i have the bracket pair colorizer,', 'start': 1931.211, 'duration': 9.85}, {'end': 1945.044, 'text': "as well as we're looking for the react snippets.", 'start': 1941.061, 'duration': 3.983}, {'end': 1953.074, 'text': 'so react snippets are the ones who allows us to create the snippets on the fly, meaning create components on the fly.', 'start': 1945.044, 'duration': 8.03}, {'end': 1960.624, 'text': "so we don't need to waste our time by retyping something that is redundant and that is not necessary to know each and every time,", 'start': 1953.074, 'duration': 7.55}, {'end': 1967.912, 'text': "meaning you write it once and then you know what you're creating, so there's no point of rewriting it every single time.", 'start': 1961.104, 'duration': 6.808}, {'end': 1975.199, 'text': "so, by the way, these are the extensions that i'm using, but if you would watch one of the first projects, you obviously would know that.", 'start': 1967.912, 'duration': 7.287}, {'end': 1976.861, 'text': 'so let me go back.', 'start': 1975.199, 'duration': 1.662}, {'end': 1980.025, 'text': "let's close the extensions because we don't need them right now.", 'start': 1976.861, 'duration': 3.164}, {'end': 1982.688, 'text': "like i said here, we're going to be returning the product list.", 'start': 1980.025, 'duration': 2.663}, {'end': 1985.349, 'text': "Now again, we're going to do very simply.", 'start': 1983.448, 'duration': 1.901}, {'end': 1992.531, 'text': "We're going to have a heading three and hello from product, product list.", 'start': 1985.369, 'duration': 7.162}, {'end': 1997.393, 'text': 'Now, within the product list, we will going to be returning a single product,', 'start': 1993.172, 'duration': 4.221}, {'end': 2001.895, 'text': 'because the product list is going to be parent container for each and every product.', 'start': 1997.393, 'duration': 4.502}, {'end': 2008.757, 'text': "So what we would want also in the product list is to import and we're going to be looking for the product.", 'start': 2002.515, 'duration': 6.242}, {'end': 2010.878, 'text': "So that's going to be the name of the file.", 'start': 2009.197, 'duration': 1.681}, {'end': 2014.601, 'text': "And for now we haven't obviously created that component.", 'start': 2011.498, 'duration': 3.103}, {'end': 2017.142, 'text': "So as you can see right now it's just looking for a navbar.", 'start': 2015.061, 'duration': 2.081}, {'end': 2026.049, 'text': "But if we're going to go back to components folder and we're going to say I would want to add a new file and I'm going to call this file product.js.", 'start': 2017.683, 'duration': 8.366}, {'end': 2028.731, 'text': 'So just like that I have my product file.', 'start': 2026.549, 'duration': 2.182}, {'end': 2031.113, 'text': 'again same spiel.', 'start': 2029.211, 'duration': 1.902}, {'end': 2035.036, 'text': "we're going to do rcc, which creates a class based component.", 'start': 2031.113, 'duration': 3.923}, {'end': 2039.46, 'text': "now, in this case this is going to be product component and we're just going to write a hello.", 'start': 2035.036, 'duration': 4.424}, {'end': 2041.682, 'text': "and you know what let's do heading 3,", 'start': 2039.46, 'duration': 2.222}, {'end': 2052.992, 'text': 'hello from product and once we have created the product maybe you know what we can just get rid of this product list and just return the product,', 'start': 2041.682, 'duration': 11.31}], 'summary': 'Creating react components for navbar, product list, and product with basic syntax and importing', 'duration': 238.851, 'max_score': 1814.141, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR41814141.jpg'}, {'end': 2087.909, 'src': 'embed', 'start': 2055.934, 'weight': 0, 'content': [{'end': 2057.935, 'text': 'So we can just say that we were returning the product.', 'start': 2055.934, 'duration': 2.001}, {'end': 2060.657, 'text': 'However, we would need to import it.', 'start': 2058.436, 'duration': 2.221}, {'end': 2065.559, 'text': "So I'm going to write product and just like that, we have our product list and product component.", 'start': 2060.677, 'duration': 4.882}, {'end': 2068.321, 'text': "Now there's three more components we need to create.", 'start': 2066.3, 'duration': 2.021}, {'end': 2071.943, 'text': 'One of them is going to be details for the details page.', 'start': 2069.681, 'duration': 2.262}, {'end': 2074.504, 'text': 'The second one is going to be for cart page.', 'start': 2071.983, 'duration': 2.521}, {'end': 2080.927, 'text': 'And then the default one, if the route does not match any of the components that we have.', 'start': 2074.664, 'duration': 6.263}, {'end': 2083.868, 'text': "So let's go ahead and let's speed it up maybe a little bit.", 'start': 2081.487, 'duration': 2.381}, {'end': 2087.909, 'text': 'A new component, the component name is going to be details.', 'start': 2084.487, 'duration': 3.422}], 'summary': 'Creating product list, product component, details page, cart page, and default component.', 'duration': 31.975, 'max_score': 2055.934, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR42055934.jpg'}, {'end': 2724.49, 'src': 'heatmap', 'start': 2266.886, 'weight': 0.838, 'content': [{'end': 2274.072, 'text': 'then we are setting our sites to a details, so details component.', 'start': 2266.886, 'duration': 7.186}, {'end': 2278.095, 'text': 'after that we have the cart, so cart component.', 'start': 2274.072, 'duration': 4.023}, {'end': 2283.86, 'text': "and last but not least, we're looking for the details component or, i'm sorry, default component, my bad.", 'start': 2278.095, 'duration': 5.765}, {'end': 2291.948, 'text': 'and just like that we should have hello from map bar, hello from product, hello from details from cart and page not found.', 'start': 2284.5, 'duration': 7.448}, {'end': 2297.294, 'text': "and if we're gonna go and check it out on the bigger screen, we're gonna have the same result again.", 'start': 2291.948, 'duration': 5.346}, {'end': 2299.056, 'text': 'nothing earth shattering.', 'start': 2297.294, 'duration': 1.762}, {'end': 2303.682, 'text': 'however, we have our structure to start working with a react router.', 'start': 2299.056, 'duration': 4.626}, {'end': 2313.12, 'text': 'the react router does not come with a react, so we would need to use again the npm to install it.', 'start': 2305.097, 'duration': 8.023}, {'end': 2316.101, 'text': 'so again, let me stop the development server.', 'start': 2313.12, 'duration': 2.981}, {'end': 2322.803, 'text': "let me clear the terminal so we can see a little bit better what we're writing and again we're going to go for npm.", 'start': 2316.101, 'duration': 6.702}, {'end': 2333.488, 'text': "then we're looking for the install command and then we would want to use again dash, dash, save, and we're looking for react router, router,", 'start': 2322.803, 'duration': 10.685}, {'end': 2335.25, 'text': 'and the name is going to be done.', 'start': 2333.488, 'duration': 1.762}, {'end': 2337.172, 'text': 'so not just react router.', 'start': 2335.25, 'duration': 1.922}, {'end': 2345.2, 'text': "we need to have a react dash router, dash, and just like that we're going to be installing the react router.", 'start': 2337.172, 'duration': 8.028}, {'end': 2354.348, 'text': 'once the npm is done, with an install again, we can clear the terminal and start up the development server again.', 'start': 2345.2, 'duration': 9.148}, {'end': 2359.312, 'text': "so let's just write npm start and just like that we have our server running.", 'start': 2354.348, 'duration': 4.964}, {'end': 2364.316, 'text': "now we're all going to need four things from the react router.", 'start': 2359.312, 'duration': 5.004}, {'end': 2370.682, 'text': 'the first one is going to be browser router, which will going to hold the information about all our routes.', 'start': 2364.316, 'duration': 6.366}, {'end': 2375.366, 'text': 'next we would need a switch which is going to be used for grouping routes.', 'start': 2370.682, 'duration': 4.684}, {'end': 2384.828, 'text': "Then we're looking for the route which we're going to display, the specific route as well as link, which will serve as an anchor tag.", 'start': 2376.046, 'duration': 8.782}, {'end': 2394.57, 'text': "So we can go up where we have the import from the React, and right underneath from the import React, we're going to be looking for the import.", 'start': 2385.488, 'duration': 9.082}, {'end': 2398.311, 'text': "Then, like I said, we're going to be looking for browser, router.", 'start': 2395.09, 'duration': 3.221}, {'end': 2404.952, 'text': "However, in most cases, we would want to give it an alias, and we're just going to give it an alias as a router.", 'start': 2398.791, 'duration': 6.161}, {'end': 2411.714, 'text': 'now if we would want to access all our routes throughout the application,', 'start': 2405.732, 'duration': 5.982}, {'end': 2421.536, 'text': 'the router would want to serve as a parent container for all our application, so we could do this in the app.js.', 'start': 2411.714, 'duration': 9.822}, {'end': 2428.038, 'text': "however, i think it's going to be easier for us to see if in fact we're going to do this in the index.js.", 'start': 2421.536, 'duration': 6.502}, {'end': 2431.06, 'text': 'so just the browser router.', 'start': 2428.698, 'duration': 2.362}, {'end': 2433.822, 'text': "we're going to import it in the index.js.", 'start': 2431.06, 'duration': 2.762}, {'end': 2439.387, 'text': "so let me just write import from and let's write react router down.", 'start': 2433.822, 'duration': 5.565}, {'end': 2447.653, 'text': 'however, what i would want right now is just copy and paste this line in my index.js instead of app.js.', 'start': 2439.387, 'duration': 8.266}, {'end': 2454.319, 'text': 'so let me go back to index.js and maybe right underneath the import from the app,', 'start': 2447.653, 'duration': 6.666}, {'end': 2459.563, 'text': 'I would want to import this browser router as router from the React router DOM.', 'start': 2454.779, 'duration': 4.784}, {'end': 2463.007, 'text': 'And as you can see, here we have our app component.', 'start': 2460.324, 'duration': 2.683}, {'end': 2469.332, 'text': 'So we can just pass the router component as the parent component for the whole application.', 'start': 2463.587, 'duration': 5.745}, {'end': 2471.714, 'text': "So just like that, let's write router.", 'start': 2469.853, 'duration': 1.861}, {'end': 2475.856, 'text': "and let's place our app component within this router.", 'start': 2472.515, 'duration': 3.341}, {'end': 2481.919, 'text': "so now our application has access to all the routes that we're going to be creating again.", 'start': 2475.856, 'duration': 6.063}, {'end': 2484.34, 'text': 'we could have done this in the app.js,', 'start': 2481.919, 'duration': 2.421}, {'end': 2498.106, 'text': 'but i think it just makes a little bit less mess if we do this in the index.js and if we work with a switch and the route components in our app.js.', 'start': 2484.34, 'duration': 13.766}, {'end': 2503.409, 'text': "so, like i said here, we're just going to change from browser router and we're going to be looking for two things.", 'start': 2498.106, 'duration': 5.303}, {'end': 2508.412, 'text': 'one of them is going to be switch and the second one is going to be route.', 'start': 2503.409, 'duration': 5.003}, {'end': 2517.277, 'text': 'now, once we have these two things from the react router down, then we would want to decide where we would want to place them, because,', 'start': 2508.412, 'duration': 8.865}, {'end': 2526.364, 'text': 'as you can see in our application, the navbar is going to be shown in all the pages, not only on the index page or on the main page.', 'start': 2517.277, 'duration': 9.087}, {'end': 2531.949, 'text': "So whenever we are setting up the switch, we would need to make sure that we're excluding the navbar.", 'start': 2526.904, 'duration': 5.045}, {'end': 2537.914, 'text': 'So navbar should be displayed on each and every page in our application.', 'start': 2532.389, 'duration': 5.525}, {'end': 2541.237, 'text': "So right after the navbar, we're going to write switch.", 'start': 2538.354, 'duration': 2.883}, {'end': 2543.659, 'text': "So we're looking for the switch component.", 'start': 2541.557, 'duration': 2.102}, {'end': 2548.023, 'text': "and within the switch component, we're going to start grouping our routes.", 'start': 2544.279, 'duration': 3.744}, {'end': 2552.366, 'text': "so the first route that we're going to be looking for is going to be our product.", 'start': 2548.023, 'duration': 4.343}, {'end': 2558.992, 'text': "so here we'll just need to use the route, since obviously this is the one that we got from the react router down,", 'start': 2552.366, 'duration': 6.626}, {'end': 2562.315, 'text': 'and then we need to use two attributes.', 'start': 2558.992, 'duration': 3.323}, {'end': 2563.736, 'text': 'one of them is going to be path.', 'start': 2562.315, 'duration': 1.421}, {'end': 2571.102, 'text': 'so the first one is going to be path and, as you can see, if we would want to use it for the home page, we just use a forward slash.', 'start': 2563.736, 'duration': 7.366}, {'end': 2571.942, 'text': "that's it.", 'start': 2571.102, 'duration': 0.84}, {'end': 2576.765, 'text': 'this is the only thing we need to write, and then we would need to write the component.', 'start': 2571.942, 'duration': 4.823}, {'end': 2580.887, 'text': 'so component, and this is going to be another attribute.', 'start': 2576.765, 'duration': 4.122}, {'end': 2588.491, 'text': 'now, the component attribute in fact points to a component where we would want this route to go to.', 'start': 2580.887, 'duration': 7.604}, {'end': 2596.375, 'text': "so in our case, we're looking for the product list, since this is going to be the main or home component.", 'start': 2588.491, 'duration': 7.884}, {'end': 2601.057, 'text': "that's going to be displayed once the application loads And just like that, we have our first row.", 'start': 2596.375, 'duration': 4.682}, {'end': 2604.397, 'text': 'Now we need to do the same thing for the rest of them.', 'start': 2601.677, 'duration': 2.72}, {'end': 2607.998, 'text': 'And as you can see, we have details, cart, and default.', 'start': 2604.998, 'duration': 3}, {'end': 2614.64, 'text': 'So let me just get rid of first the product list, since this is right now displayed in our component.', 'start': 2608.458, 'duration': 6.182}, {'end': 2616.72, 'text': 'And let me save my application.', 'start': 2615.06, 'duration': 1.66}, {'end': 2618.661, 'text': 'Now let me copy and paste this.', 'start': 2617.361, 'duration': 1.3}, {'end': 2621.562, 'text': 'And like I said, the second one is going to be details.', 'start': 2618.921, 'duration': 2.641}, {'end': 2626.483, 'text': "So in this case, we don't want just forward slash, but we're looking for details.", 'start': 2621.982, 'duration': 4.501}, {'end': 2629.004, 'text': 'and then obviously the component as well.', 'start': 2627.063, 'duration': 1.941}, {'end': 2632.966, 'text': "it's not going to be product list, it's going to be details now.", 'start': 2629.004, 'duration': 3.962}, {'end': 2635.127, 'text': "after that, we're looking for the cart.", 'start': 2632.966, 'duration': 2.161}, {'end': 2639.789, 'text': 'so let me copy and paste it and let me delete the details and you know what.', 'start': 2635.127, 'duration': 4.662}, {'end': 2647.532, 'text': "let's maybe close the sidebar, so we have a little bit of more real estate and let's write that we're looking not for details.", 'start': 2639.789, 'duration': 7.743}, {'end': 2654.455, 'text': "in fact, we're like we're looking for the store as well, as the component is not going to be details, but it's going to be store.", 'start': 2647.532, 'duration': 6.923}, {'end': 2657.961, 'text': 'Now, the last one we would want to set up the default one.', 'start': 2655.136, 'duration': 2.825}, {'end': 2665.776, 'text': 'So if the page is not found, so let me just copy and paste this and we would want to get rid of the path altogether.', 'start': 2658.402, 'duration': 7.374}, {'end': 2668.932, 'text': "So we wouldn't want to have the path.", 'start': 2667.031, 'duration': 1.901}, {'end': 2676.195, 'text': "However, here we're just going to write that this is going to be the component and the component is going to be default or page not found.", 'start': 2669.472, 'duration': 6.723}, {'end': 2677.535, 'text': "It doesn't really matter.", 'start': 2676.535, 'duration': 1}, {'end': 2678.936, 'text': 'However you would want.', 'start': 2677.935, 'duration': 1.001}, {'end': 2688.16, 'text': "And now once I'm going to delete these two components, since I don't want to random them separately, I would want to render them with my router.", 'start': 2679.416, 'duration': 8.744}, {'end': 2690.941, 'text': 'And once we save it, notice there is an issue.', 'start': 2688.72, 'duration': 2.221}, {'end': 2694.422, 'text': 'And the issue is that I selected the wrong variables.', 'start': 2691.461, 'duration': 2.961}, {'end': 2696.623, 'text': "Obviously I'm importing the cart.", 'start': 2694.902, 'duration': 1.721}, {'end': 2700.01, 'text': 'and default, not the stored and detailed.', 'start': 2697.188, 'duration': 2.822}, {'end': 2701.27, 'text': 'So let me fix this.', 'start': 2700.33, 'duration': 0.94}, {'end': 2708.514, 'text': "Let's say here, we're looking for the default as well as for the component, we're looking for the cart instead of store.", 'start': 2701.771, 'duration': 6.743}, {'end': 2712.776, 'text': 'And also the route is going to be cart instead of store.', 'start': 2709.154, 'duration': 3.622}, {'end': 2714.017, 'text': 'So let me save this.', 'start': 2713.157, 'duration': 0.86}, {'end': 2715.658, 'text': "And now let's notice what we have.", 'start': 2714.257, 'duration': 1.401}, {'end': 2717.559, 'text': 'So we have hello from navbar.', 'start': 2716.138, 'duration': 1.421}, {'end': 2719.987, 'text': 'And then this is going to be hello from product.', 'start': 2718.126, 'duration': 1.861}, {'end': 2724.49, 'text': "However, if everything works correctly, there's going to be a mistake.", 'start': 2720.528, 'duration': 3.962}], 'summary': 'Setting up react router with components and npm installation.', 'duration': 457.604, 'max_score': 2266.886, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR42266886.jpg'}, {'end': 2384.828, 'src': 'embed', 'start': 2337.172, 'weight': 2, 'content': [{'end': 2345.2, 'text': "we need to have a react dash router, dash, and just like that we're going to be installing the react router.", 'start': 2337.172, 'duration': 8.028}, {'end': 2354.348, 'text': 'once the npm is done, with an install again, we can clear the terminal and start up the development server again.', 'start': 2345.2, 'duration': 9.148}, {'end': 2359.312, 'text': "so let's just write npm start and just like that we have our server running.", 'start': 2354.348, 'duration': 4.964}, {'end': 2364.316, 'text': "now we're all going to need four things from the react router.", 'start': 2359.312, 'duration': 5.004}, {'end': 2370.682, 'text': 'the first one is going to be browser router, which will going to hold the information about all our routes.', 'start': 2364.316, 'duration': 6.366}, {'end': 2375.366, 'text': 'next we would need a switch which is going to be used for grouping routes.', 'start': 2370.682, 'duration': 4.684}, {'end': 2384.828, 'text': "Then we're looking for the route which we're going to display, the specific route as well as link, which will serve as an anchor tag.", 'start': 2376.046, 'duration': 8.782}], 'summary': 'Installing react router with browser router, switch, route, and link.', 'duration': 47.656, 'max_score': 2337.172, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR42337172.jpg'}, {'end': 3030.04, 'src': 'embed', 'start': 2983.884, 'weight': 5, 'content': [{'end': 2988.388, 'text': "And we're just going to work in the navbar since this is the next component that we would want to create.", 'start': 2983.884, 'duration': 4.504}, {'end': 2997.314, 'text': 'and, like i said first i would want to import a few things, and those few things are the link from the react router down.', 'start': 2988.968, 'duration': 8.346}, {'end': 3006.781, 'text': "so let's start by selecting the link, the, and we're going to say from react router down, so from react router down.", 'start': 2997.314, 'duration': 9.467}, {'end': 3011.985, 'text': 'then also i would want to import the logo, but you know what?', 'start': 3006.781, 'duration': 5.204}, {'end': 3017.329, 'text': "maybe let's get to the logo first and then we're going to worry about the logo because, like I said in the beginning,", 'start': 3011.985, 'duration': 5.344}, {'end': 3025.176, 'text': "I'm going to show you two ways how we can work with images in the create react app, and this is going to be one of the ways.", 'start': 3017.329, 'duration': 7.847}, {'end': 3030.04, 'text': 'so, as you can see, we have the navbar and we have access to a bootstrap.', 'start': 3025.176, 'duration': 4.864}], 'summary': 'Creating navbar component, importing link and logo, demonstrating image handling in create react app.', 'duration': 46.156, 'max_score': 2983.884, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR42983884.jpg'}], 'start': 1629.042, 'title': 'React router, components, and navigation', 'summary': 'Covers setting up react router for navigation, creating components such as navbar, product list, details, and cart, importing and using classes from bootstrap, and utilizing react fragments to avoid unnecessary html elements. it also explains the process of creating and importing react components, including product list, product, details, cart, and default, with a focus on using multiple cursors to efficiently import components into the app.js file. additionally, it covers setting up react router using npm to install it and configuring routes with browser router, switch, route, and link components, ensuring proper navigation and display of components based on the url.', 'chapters': [{'end': 1967.912, 'start': 1629.042, 'title': 'Setting up react router and components', 'summary': 'Covers setting up basic glasses, using react router for navigation, creating components such as navbar, product list, details, and cart, and utilizing react fragments to avoid unnecessary html elements.', 'duration': 338.87, 'highlights': ['Creating components such as navbar, product list, details, and cart The chapter covers creating multiple components such as navbar, product list, details, and cart to be used in the application.', 'Using React router for navigation The chapter discusses implementing React router for navigation, demonstrating the change in URL based on the page, and handling routes that are not found.', 'Utilizing React fragments to avoid unnecessary HTML elements The chapter emphasizes the use of React fragments to simulate HTML tags, reducing the need for unnecessary HTML elements in the code.']}, {'end': 2291.948, 'start': 1967.912, 'title': 'React components and importing', 'summary': 'Explains the process of creating and importing react components, including product list, product, details, cart, and default, with a focus on using multiple cursors to efficiently import components into the app.js file.', 'duration': 324.036, 'highlights': ['The chapter explains the process of creating and importing React components, including product list, product, details, cart, and default, with a focus on using multiple cursors to efficiently import components into the app.js file.', 'The transcript provides a step-by-step guide on creating and importing different components such as product list, product, details, cart, and default, in the context of a React app.', 'The speaker demonstrates the use of multiple cursors to efficiently import components into the app.js file, enhancing the understanding of how to manage imports in a React application.', 'The tutorial emphasizes the importance of creating and importing components in a React application, providing a practical demonstration of the process for product list, product, details, cart, and default components.', 'The speaker focuses on the efficient management of imports in a React application, showcasing the step-by-step process for importing components such as product list, product, details, cart, and default into the app.js file.']}, {'end': 2983.224, 'start': 2291.948, 'title': 'Setting up react router', 'summary': 'Covers setting up react router using npm to install it and configuring routes with browser router, switch, route, and link components, ensuring proper navigation and display of components based on the url.', 'duration': 691.276, 'highlights': ['Configuring React Router using npm to install it The chapter discusses using npm to install react router and its necessary components, such as browser router, switch, route, and link, to set up the routing functionality.', 'Setting up routes with browser router, switch, route, and link components It explains the usage of browser router as a parent container for all routes, switch for grouping routes, route for displaying specific routes, and link as an anchor tag for navigation.', "Ensuring proper navigation and display of components based on the URL The chapter outlines the importance of setting proper paths and the 'exact' attribute to ensure correct display of components based on the URL, and highlights the usage of page not found component for unmatched paths."]}, {'end': 3287.728, 'start': 2983.884, 'title': 'Creating navbar component with react router', 'summary': 'Focuses on creating a navbar component with react router, importing and using classes from bootstrap, and adding an image to the navbar with react. it also includes demonstrating two ways of working with images in a create react app.', 'duration': 303.844, 'highlights': ['The chapter focuses on creating a navbar component with React Router and importing and using classes from Bootstrap. The chapter emphasizes the creation of a navbar component using React Router and importing classes from Bootstrap for styling.', 'The chapter demonstrates two ways of working with images in a Create React App. The tutorial showcases two methods for working with images in a Create React App, emphasizing the process of importing and using images.', 'The process of adding an image to the navbar with React is explained. The tutorial details the process of adding an image to the navbar using React and demonstrates the import and usage of the image within the component.']}], 'duration': 1658.686, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR41629042.jpg', 'highlights': ['Creating components such as navbar, product list, details, and cart', 'Using React router for navigation', 'Configuring React Router using npm to install it', 'Setting up routes with browser router, switch, route, and link components', 'Utilizing React fragments to avoid unnecessary HTML elements', 'The chapter explains the process of creating and importing React components', 'Ensuring proper navigation and display of components based on the URL', 'The chapter focuses on creating a navbar component with React Router and importing and using classes from Bootstrap', 'The chapter demonstrates two ways of working with images in a Create React App', 'The process of adding an image to the navbar with React is explained']}, {'end': 4744.831, 'segs': [{'end': 3379.507, 'src': 'embed', 'start': 3352.413, 'weight': 1, 'content': [{'end': 3357.916, 'text': 'Now why are we using this align items in the center? Because logo is going to be bigger than the text of products.', 'start': 3352.413, 'duration': 5.503}, {'end': 3360.477, 'text': 'So I would want them to be in the same line.', 'start': 3358.376, 'duration': 2.101}, {'end': 3363.939, 'text': 'That is the reason for this align items in the center.', 'start': 3360.998, 'duration': 2.941}, {'end': 3366.28, 'text': 'Now nav item is just going to add the styling.', 'start': 3364.419, 'duration': 1.861}, {'end': 3371.503, 'text': "And then within this list item, this is where, again, we're going to get another link.", 'start': 3366.72, 'duration': 4.783}, {'end': 3373.344, 'text': 'So we have access to the link.', 'start': 3371.923, 'duration': 1.421}, {'end': 3374.304, 'text': 'So we can just say to.', 'start': 3373.364, 'duration': 0.94}, {'end': 3376.786, 'text': 'And again, this is going to be pointing to the product.', 'start': 3374.825, 'duration': 1.961}, {'end': 3379.507, 'text': "So here we're just going to, again, have a forward slash.", 'start': 3377.206, 'duration': 2.301}], 'summary': 'Using align items in the center to handle larger logo, ensuring items are in the same line, and adding styling to nav item.', 'duration': 27.094, 'max_score': 3352.413, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR43352413.jpg'}, {'end': 3485.754, 'src': 'embed', 'start': 3461.158, 'weight': 2, 'content': [{'end': 3469.364, 'text': "So the ML Auto is going to make sure that once we get to the bigger screen now notice it's going to be all the way on the left and as you can see,", 'start': 3461.158, 'duration': 8.206}, {'end': 3476.708, 'text': "m left means margin left to the is going to be auto, meaning it's going to push as far as it can to the left again.", 'start': 3469.364, 'duration': 7.344}, {'end': 3481.471, 'text': "let me make this a little bit bigger and let's go back and let's add this class.", 'start': 3476.708, 'duration': 4.763}, {'end': 3485.754, 'text': "so class name and we're looking for ml and auto.", 'start': 3481.471, 'duration': 4.283}], 'summary': 'Ml auto feature pushes content to the left on bigger screens.', 'duration': 24.596, 'max_score': 3461.158, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR43461158.jpg'}, {'end': 3556.445, 'src': 'embed', 'start': 3529.997, 'weight': 0, 'content': [{'end': 3533.679, 'text': 'And right next to the icon we can just say my cart.', 'start': 3529.997, 'duration': 3.682}, {'end': 3535.781, 'text': 'So something along the lines of this.', 'start': 3534.28, 'duration': 1.501}, {'end': 3540.942, 'text': 'and just like that, we have our navbar that is working.', 'start': 3537.021, 'duration': 3.921}, {'end': 3543.442, 'text': 'so, as you can see, we have the products.', 'start': 3540.942, 'duration': 2.5}, {'end': 3545.103, 'text': 'so this would be the products page.', 'start': 3543.442, 'duration': 1.661}, {'end': 3546.223, 'text': 'then we have the cart.', 'start': 3545.103, 'duration': 1.12}, {'end': 3550.144, 'text': "so we're going to the cart and again now we're going back to the product.", 'start': 3546.223, 'duration': 3.921}, {'end': 3554.125, 'text': "now there's not going to be more links in a navbar, so i cannot show you the details.", 'start': 3550.144, 'duration': 3.981}, {'end': 3556.445, 'text': 'but the idea is going to be again very simple.', 'start': 3554.125, 'duration': 2.32}], 'summary': 'Creating a functional navbar with links to products and cart.', 'duration': 26.448, 'max_score': 3529.997, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR43529997.jpg'}, {'end': 3881.195, 'src': 'embed', 'start': 3852.518, 'weight': 4, 'content': [{'end': 3859.602, 'text': "however, right now, as you can see, the text is capitalized, so we know that the button is working and now just let's start adding the styles.", 'start': 3852.518, 'duration': 7.084}, {'end': 3861.723, 'text': "so we're going to say font size.", 'start': 3859.602, 'duration': 2.121}, {'end': 3873.15, 'text': "so let's start looking for the font size and we're going to go with 1.4, rems and again, sorry css haters, but i really like the style components.", 'start': 3861.723, 'duration': 11.427}, {'end': 3881.195, 'text': "this is what we're going to be doing, let's say background, and now we're going to be looking for the transparent, transparent and just like that,", 'start': 3873.15, 'duration': 8.045}], 'summary': 'Styling the button with 1.4 rems font size and transparent background.', 'duration': 28.677, 'max_score': 3852.518, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR43852518.jpg'}, {'end': 3933.969, 'src': 'embed', 'start': 3902.448, 'weight': 5, 'content': [{'end': 3910.014, 'text': "it's going to be 0.5, rems, solid, and now we would want the color.", 'start': 3902.448, 'duration': 7.566}, {'end': 3916.539, 'text': 'now. remember in the very, very beginning, when we were working with in-app css, we have the variables.', 'start': 3910.014, 'duration': 6.525}, {'end': 3918.1, 'text': 'right now,', 'start': 3916.539, 'duration': 1.561}, {'end': 3931.948, 'text': 'one of the ways how we can get these values the color variables or box shadow values or any kind of css values to a styled component is using the css variables,', 'start': 3918.1, 'duration': 13.848}, {'end': 3933.969, 'text': 'so custom properties.', 'start': 3931.948, 'duration': 2.021}], 'summary': 'Using css variables to transfer values to styled components, such as color and box shadow, from in-app css.', 'duration': 31.521, 'max_score': 3902.448, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR43902448.jpg'}, {'end': 4425.511, 'src': 'embed', 'start': 4397.238, 'weight': 6, 'content': [{'end': 4402.862, 'text': "now i'm not saying that you're going to reuse the same exact button and obviously the variables might change or anything like that,", 'start': 4397.238, 'duration': 5.624}, {'end': 4407.966, 'text': 'but what you can do is you can set up these components and then reuse them,', 'start': 4402.862, 'duration': 5.104}, {'end': 4413.673, 'text': "not only in this project but everywhere where you're working with a styled components.", 'start': 4407.966, 'duration': 5.707}, {'end': 4421.605, 'text': "so your next project, the project after that, and you don't have to switch back and forth between the app css,", 'start': 4413.673, 'duration': 7.932}, {'end': 4425.511, 'text': 'because obviously right now you can use the components in your different projects.', 'start': 4421.605, 'duration': 3.906}], 'summary': 'Set up reusable components for efficient and consistent use across projects.', 'duration': 28.273, 'max_score': 4397.238, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR44397238.jpg'}, {'end': 4459.042, 'src': 'embed', 'start': 4434.314, 'weight': 7, 'content': [{'end': 4440.696, 'text': 'But setting up with a CSS when CSS is in a separate file or you need to look for app CSS.', 'start': 4434.314, 'duration': 6.382}, {'end': 4446.798, 'text': 'it really makes much more easier if all your CSS is exactly in the same component.', 'start': 4440.696, 'duration': 6.102}, {'end': 4449.699, 'text': 'Now, granted, we did not create the component here.', 'start': 4447.318, 'duration': 2.381}, {'end': 4451.679, 'text': 'this. this is a component.', 'start': 4450.319, 'duration': 1.36}, {'end': 4457.201, 'text': "however, as you can see, this is not class based component, so we're not using any kind of state or anything like that,", 'start': 4451.679, 'duration': 5.522}, {'end': 4459.042, 'text': 'but you could have easily done that.', 'start': 4457.201, 'duration': 1.841}], 'summary': 'Using css in the same component can make setup much easier.', 'duration': 24.728, 'max_score': 4434.314, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR44434314.jpg'}, {'end': 4504.865, 'src': 'embed', 'start': 4478.408, 'weight': 3, 'content': [{'end': 4482.855, 'text': "now we're all going to look at how we can work with properties with a style component.", 'start': 4478.408, 'duration': 4.447}, {'end': 4485.018, 'text': "so that's why we're getting different colors.", 'start': 4482.855, 'duration': 2.163}, {'end': 4491.407, 'text': "but the idea is very simple we created only one button and we're just going to reuse it throughout the whole project.", 'start': 4485.018, 'duration': 6.389}, {'end': 4493.851, 'text': "so that's that's the great thing about styled components.", 'start': 4491.407, 'duration': 2.444}, {'end': 4504.865, 'text': "Before you are sick of listening about my blind affection for the styled components, let's just add a little bit of styles to our navbar.", 'start': 4495.097, 'duration': 9.768}], 'summary': 'Utilizing styled components to create reusable button with different colors.', 'duration': 26.457, 'max_score': 4478.408, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR44478408.jpg'}, {'end': 4605.223, 'src': 'embed', 'start': 4581.164, 'weight': 8, 'content': [{'end': 4591.953, 'text': "so for this let's say background, and we're going to be using the color that we have available in our css variables, which is the main blue one.", 'start': 4581.164, 'duration': 10.789}, {'end': 4595.956, 'text': "so let's go back to navbar.js, where we have the var.", 'start': 4591.953, 'duration': 4.003}, {'end': 4602.982, 'text': 'again, the syntax is going to be main blue and just like this, we should have our blue background, and sure enough we do.', 'start': 4595.956, 'duration': 7.026}, {'end': 4605.223, 'text': 'now also, i would want to style the link.', 'start': 4603.562, 'duration': 1.661}], 'summary': 'Using the main blue color as the background in navbar.js for styling the link.', 'duration': 24.059, 'max_score': 4581.164, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR44581164.jpg'}], 'start': 3288.549, 'title': 'Building and styling components', 'summary': 'Covers building a bootstrap navbar with links and a cart button, implementing styled components in react for a button, and styling components in css for reusability in different projects.', 'chapters': [{'end': 3485.754, 'start': 3288.549, 'title': 'Building bootstrap navbar', 'summary': 'Covers the process of building a bootstrap navbar with links to products and a cart button, utilizing classes for styling and alignment, and explaining the importance of aligning items in the center due to different text sizes.', 'duration': 197.205, 'highlights': ['The chapter covers the process of building a Bootstrap navbar with links to products and a cart button. The transcript focuses on adding links for products and a cart button within a Bootstrap navbar.', "Utilizing classes for styling and alignment, and explaining the importance of aligning items in the center due to different text sizes. The speaker utilizes classes like 'navbar nav' and 'nav item' for styling and explains the importance of aligning items in the center due to different text sizes.", 'The ML Auto class is used to ensure alignment on larger screens. The ML Auto class is used to ensure that the cart link is aligned to the left on larger screens.']}, {'end': 3708.38, 'start': 3485.754, 'title': 'Styled components in react', 'summary': 'Introduces the concept of styled components in react, demonstrating the creation of a button and the setup process, emphasizing the simplicity and flexibility of the syntax, while also highlighting the necessity to stop the development server and install the styled components through npm.', 'duration': 222.626, 'highlights': ['The chapter introduces the concept of styled components in React and demonstrates the creation of a button, highlighting the simplicity and flexibility of the syntax.', 'Emphasizes the necessity of stopping the development server and installing the styled components through npm.']}, {'end': 4139.594, 'start': 3708.92, 'title': 'Implementing styled components for button', 'summary': 'Covers the implementation of styled components for a button, including setting styles for text, font size, background, border, color, padding, cursor, margin, transition, and hover effect.', 'duration': 430.674, 'highlights': ['Setting styles for text, font size, background, border, color, padding, cursor, margin, transition, and hover effect for the button component.', 'Demonstrating the use of template literals and CSS properties within styled components for customization.', 'Explaining the utilization of CSS variables and custom properties within styled components for reusability and flexibility.', 'Illustrating the application of hover effect using the AND sign notation in styled components.']}, {'end': 4744.831, 'start': 4140.073, 'title': 'Styling components in css', 'summary': 'Explains how to use styled components to write reusable css and import them in different projects. it demonstrates setting up a separate file for styling, importing styled components, and applying styles using css variables and properties.', 'duration': 604.758, 'highlights': ['Styled components allow for the reuse of CSS in different projects, avoiding the need to switch between different CSS files, improving efficiency and consistency across projects. The chapter emphasizes the ability of styled components to be reused in different projects, leading to improved efficiency and consistency. This feature helps avoid switching between different CSS files and promotes code reusability.', 'Demonstrates setting up a separate file for styling and importing styled components, showcasing the ability to organize and manage CSS in a more structured manner. The chapter demonstrates the process of setting up a separate file for styling and importing styled components, emphasizing the structured organization and management of CSS. This approach enhances code maintainability and scalability.', "Shows the application of CSS variables, such as defining background color using 'var' and CSS properties like text transform and font size for styling links. The chapter showcases the practical application of CSS variables, utilizing 'var' to define background color. It also demonstrates the use of CSS properties like text transform and font size to style links. This approach ensures flexibility and responsiveness in styling."]}], 'duration': 1456.282, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR43288549.jpg', 'highlights': ['The chapter covers building a Bootstrap navbar with links to products and a cart button.', 'Utilizing classes for styling and alignment, and explaining the importance of aligning items in the center due to different text sizes.', 'The ML Auto class is used to ensure alignment on larger screens.', 'The chapter introduces the concept of styled components in React and demonstrates the creation of a button.', 'Setting styles for text, font size, background, border, color, padding, cursor, margin, transition, and hover effect for the button component.', 'Explaining the utilization of CSS variables and custom properties within styled components for reusability and flexibility.', 'Styled components allow for the reuse of CSS in different projects, avoiding the need to switch between different CSS files, improving efficiency and consistency across projects.', 'Demonstrates setting up a separate file for styling and importing styled components, showcasing the ability to organize and manage CSS in a more structured manner.', "Shows the application of CSS variables, such as defining background color using 'var' and CSS properties like text transform and font size for styling links."]}, {'end': 7365.514, 'segs': [{'end': 5220.447, 'src': 'heatmap', 'start': 4745.271, 'weight': 0, 'content': [{'end': 4750.774, 'text': 'Sure enough, we have our navbar ready to go where we have the product, which obviously is going to lead us to the product.', 'start': 4745.271, 'duration': 5.503}, {'end': 4752.715, 'text': 'But we also have the cart page.', 'start': 4751.154, 'duration': 1.561}, {'end': 4754.976, 'text': 'Then again, we can go back to the product.', 'start': 4753.135, 'duration': 1.841}, {'end': 4756.537, 'text': 'and for sure.', 'start': 4755.576, 'duration': 0.961}, {'end': 4765.685, 'text': "if again we can use the browser to look for the details, we can look for details and if there's going to be a page that cannot be found,", 'start': 4756.537, 'duration': 9.148}, {'end': 4768.647, 'text': "let's say page number, i don't know one.", 'start': 4765.685, 'duration': 2.962}, {'end': 4771.45, 'text': 'so just like that, we have the page not found.', 'start': 4768.647, 'duration': 2.803}, {'end': 4776.572, 'text': "so now we're ready to move on and start working on our product now.", 'start': 4771.45, 'duration': 5.122}, {'end': 4789.075, 'text': 'having the e-commerce store, or any store for that matter, in general without the actual products is as useless as the deodorant for the cab drivers.', 'start': 4776.572, 'duration': 12.503}, {'end': 4790.996, 'text': 'it does not do any good.', 'start': 4789.075, 'duration': 1.921}, {'end': 4794.176, 'text': 'so, as you can see in the store, we obviously need to have the products,', 'start': 4790.996, 'duration': 3.18}, {'end': 4798.977, 'text': "otherwise what we're going to be selling it's definitely not going to be this low quality with you.", 'start': 4794.176, 'duration': 4.801}, {'end': 4807.42, 'text': "so let's change this and let's head over to our document and start working on our product list Now again, like I said before,", 'start': 4798.977, 'duration': 8.443}, {'end': 4812.584, 'text': 'I would want to get rid of the few tabs, otherwise this will going to get annoying really fast.', 'start': 4807.42, 'duration': 5.164}, {'end': 4818.748, 'text': "So first I'm going to close the navbar, then the button, and then as well as I would want to close the app.css.", 'start': 4813.004, 'duration': 5.744}, {'end': 4822.05, 'text': "And I also don't need right now the app.js.", 'start': 4819.308, 'duration': 2.742}, {'end': 4826.233, 'text': "So we can close all of them and let's find where we have the product list.", 'start': 4822.47, 'duration': 3.763}, {'end': 4831.736, 'text': 'And in the product list there is few things that we would want to have.', 'start': 4826.973, 'duration': 4.763}, {'end': 4834.358, 'text': 'And first we would want to have some kind of state.', 'start': 4832.236, 'duration': 2.122}, {'end': 4838.899, 'text': "now, for now this state is going to be empty, so it's going to stay state,", 'start': 4834.878, 'duration': 4.021}, {'end': 4845.562, 'text': "and let's say that in the state there's going to be products and those products are going to be equal to a empty array.", 'start': 4838.899, 'duration': 6.663}, {'end': 4854.524, 'text': 'now, next, we would want to start working with a return and for now i would just want to comment out this div, or i would want to delete the div tags,', 'start': 4845.562, 'duration': 8.962}, {'end': 4856.685, 'text': 'maybe, and comment out the product.', 'start': 4854.524, 'duration': 2.161}, {'end': 4861.989, 'text': "so this is not going to mess up everything what we're doing, And let's start again with a React fragment.", 'start': 4856.685, 'duration': 5.304}, {'end': 4865.954, 'text': "So I'm going to say React and we're looking for the fragment.", 'start': 4862.59, 'duration': 3.364}, {'end': 4868.436, 'text': 'So just like that, this is going to be my fragment.', 'start': 4866.454, 'duration': 1.982}, {'end': 4871.84, 'text': "Now let me delete this extra tag that I didn't want.", 'start': 4868.997, 'duration': 2.843}, {'end': 4874.243, 'text': "And then we're going to start with a div.", 'start': 4872.641, 'duration': 1.602}, {'end': 4880.25, 'text': 'The div is going to have classes and the class is going to be padding top bottom is going to be five.', 'start': 4874.864, 'duration': 5.386}, {'end': 4885.653, 'text': 'So this is just going to be for the padding for the whole product list.', 'start': 4881.51, 'duration': 4.143}, {'end': 4888.676, 'text': 'Then after that, I would want to have a container.', 'start': 4886.354, 'duration': 2.322}, {'end': 4891.578, 'text': 'And again, this is going to be a bootstrap class.', 'start': 4888.956, 'duration': 2.622}, {'end': 4895.702, 'text': 'And within the container, we will going to have the title.', 'start': 4892.159, 'duration': 3.543}, {'end': 4899.265, 'text': "Now after the title, there's going to be a row for the product.", 'start': 4896.262, 'duration': 3.003}, {'end': 4902.548, 'text': "So first let's write that this is going to be the row for the product.", 'start': 4899.705, 'duration': 2.843}, {'end': 4904.349, 'text': 'So we can add a comment.', 'start': 4903.068, 'duration': 1.281}, {'end': 4908.653, 'text': "Maybe here we're going to say the product row, something like this.", 'start': 4905.11, 'duration': 3.543}, {'end': 4914.175, 'text': 'and then, once we have the product also I would want the title.', 'start': 4909.253, 'duration': 4.922}, {'end': 4916.956, 'text': 'now, title I would want to create separately.', 'start': 4914.175, 'duration': 2.781}, {'end': 4926.158, 'text': "so let's go back to the components and let's say we're going to be looking for the new file and that is going to be title.js.", 'start': 4916.956, 'duration': 9.202}, {'end': 4931.5, 'text': "now, within our title again, we're going to do the functional component instead,", 'start': 4926.158, 'duration': 5.342}, {'end': 4940.589, 'text': "so we don't need to create a class-based component and the snippet for this is rfc and just like this we're going to have our title component.", 'start': 4931.5, 'duration': 9.089}, {'end': 4946.336, 'text': 'now the title component is going to take two things as a props.', 'start': 4940.589, 'duration': 5.747}, {'end': 4954.943, 'text': "the first one is going to be name, the second one is going to be title and in the return we're going to be returning, in fact the bootstrap row.", 'start': 4946.336, 'duration': 8.607}, {'end': 4960.665, 'text': "so we're going to start within the row and then we would also want to have a column.", 'start': 4954.943, 'duration': 5.722}, {'end': 4968.248, 'text': "so here we're going to be looking for the div with a column of 10, so 10 columns wide on extra small screen.", 'start': 4960.665, 'duration': 7.583}, {'end': 4970.169, 'text': 'it is always going to be in the center.', 'start': 4968.248, 'duration': 1.921}, {'end': 4972.93, 'text': "so this is why we're adding mx auto margin.", 'start': 4970.169, 'duration': 2.761}, {'end': 4978.992, 'text': 'top bottom is going to be two text center as well as text title.', 'start': 4972.93, 'duration': 6.062}, {'end': 4982.813, 'text': 'now, remember what we had for the text title all the way in the beginning.', 'start': 4978.992, 'duration': 3.821}, {'end': 4987.475, 'text': 'we were working in the app css and we had this option for the text title.', 'start': 4982.813, 'duration': 4.662}, {'end': 4996.36, 'text': 'so this is where we are reusing this class in our actual title component let me get back again my suggestions from Emmet.', 'start': 4987.475, 'duration': 8.885}, {'end': 5001.084, 'text': 'and then, within the div, this is where we would want to have a heading one.', 'start': 4996.36, 'duration': 4.724}, {'end': 5004.007, 'text': 'now the heading one is gonna have few classes.', 'start': 5001.084, 'duration': 2.923}, {'end': 5014.336, 'text': 'first of all, class is going to be text, capitalize, capitalize, and as you can see I wrote it wrong capitalize.', 'start': 5004.007, 'duration': 10.329}, {'end': 5022.781, 'text': "then also would want font wait, font weight, and we're going to be looking for bold fonts for the setting one.", 'start': 5014.336, 'duration': 8.445}, {'end': 5025.523, 'text': 'and here we would want to pass the name.', 'start': 5022.781, 'duration': 2.742}, {'end': 5035.449, 'text': "so the prop that we're going to be getting for the title as well as we would want strong tags, strong, let me just grab them strong text.", 'start': 5025.523, 'duration': 9.926}, {'end': 5041.794, 'text': "and then, within a strong text, we're going to have the class name, and class name is going to be text blue, and again,", 'start': 5035.449, 'duration': 6.345}, {'end': 5046.958, 'text': 'this is one of the classes that we created in the very beginning, just to have a blue text.', 'start': 5041.794, 'duration': 5.164}, {'end': 5048.439, 'text': "and here we're going to be passing the title.", 'start': 5046.958, 'duration': 1.481}, {'end': 5053.362, 'text': 'so the way we set up the title that it is reusable.', 'start': 5049.64, 'duration': 3.722}, {'end': 5059.664, 'text': "so only thing we need to pass is the name and the title, and we're going to have ourselves a working title.", 'start': 5053.362, 'duration': 6.302}, {'end': 5061.225, 'text': 'so once we have the title set up.', 'start': 5059.664, 'duration': 1.561}, {'end': 5067.227, 'text': "let's go back to the product list and as you can see, first we would want to import this.", 'start': 5061.225, 'duration': 6.002}, {'end': 5071.989, 'text': "so i'm going to say import and we're importing the title from the title js.", 'start': 5067.227, 'duration': 4.762}, {'end': 5080.536, 'text': "so since this is in the same directory, we're just looking for the title and then let's have it being rendered.", 'start': 5071.989, 'duration': 8.547}, {'end': 5085.941, 'text': "so let's write title and then let's figure out what we would want to write in our title.", 'start': 5080.536, 'duration': 5.405}, {'end': 5089.724, 'text': 'and I believe in the title we have our products.', 'start': 5085.941, 'duration': 3.783}, {'end': 5097.051, 'text': "so for the name prop I'm going to say our, and for the actual title I'm going to say products.", 'start': 5089.724, 'duration': 7.327}, {'end': 5103.815, 'text': 'and just like this, we should have our component ready to go and obviously right now in a cart page.', 'start': 5097.611, 'duration': 6.204}, {'end': 5108.258, 'text': "but if we're going to go back to the products, just like this, we have our products working,", 'start': 5103.815, 'duration': 4.443}, {'end': 5115.983, 'text': 'so everything is displayed fine and now next we would need to start working on this row with our products.', 'start': 5108.258, 'duration': 7.725}, {'end': 5130.895, 'text': "however, i want to do this in the next video because first i would want to show you a few reasons why we wouldn't want just to grab the products directly to our product list component now,", 'start': 5116.463, 'duration': 14.432}, {'end': 5139.282, 'text': "since we're all our experts on the react, we know that if we would want to have some kind of list with a specific component.", 'start': 5130.895, 'duration': 8.387}, {'end': 5150.091, 'text': 'we just need to create it in the state and then, as we loop through the array, we would display this one single component, and life is great.', 'start': 5139.942, 'duration': 10.149}, {'end': 5151.832, 'text': 'that really could work out.', 'start': 5150.091, 'duration': 1.741}, {'end': 5153.233, 'text': 'we have the data right.', 'start': 5151.832, 'duration': 1.401}, {'end': 5160.059, 'text': 'remember, in the very beginning, in the setup files, we had the data and data had data js name.', 'start': 5153.233, 'duration': 6.826}, {'end': 5166.044, 'text': 'so let me just delete this comment because we do not need this anymore for the logo, and sure enough we have the data.', 'start': 5160.059, 'duration': 5.985}, {'end': 5176.072, 'text': "Now data has the name of store product and this is set up as an array and now within the array there's just a bunch of objects,", 'start': 5166.744, 'duration': 9.328}, {'end': 5180.875, 'text': "and each and every object reflects the product that we're going to be displaying on a page.", 'start': 5176.072, 'duration': 4.803}, {'end': 5183.938, 'text': 'So, like I said, we are all experts.', 'start': 5181.536, 'duration': 2.402}, {'end': 5195.127, 'text': "so the only thing we need to do in the product list is we're just going to head over back to the product list and let me just save the data js for now and as you can see right after the title,", 'start': 5183.938, 'duration': 11.189}, {'end': 5196.989, 'text': 'we can do something along the lines like this.', 'start': 5195.127, 'duration': 1.862}, {'end': 5198.631, 'text': 'we can just say import.', 'start': 5196.989, 'duration': 1.642}, {'end': 5204.756, 'text': "then we're going to be looking for the name of the array, now i believe the name of store products.", 'start': 5198.631, 'duration': 6.125}, {'end': 5209.18, 'text': "so let's write store products and now we just need to import it.", 'start': 5204.756, 'duration': 4.424}, {'end': 5212.922, 'text': 'and this was in the data which is not in the same folder.', 'start': 5209.18, 'duration': 3.742}, {'end': 5220.447, 'text': 'so since we know the path is relative, we would need to look outside the components folder and just like that we have our data.', 'start': 5212.922, 'duration': 7.525}], 'summary': 'Preparing the e-commerce store for product listing using react components and importing product data.', 'duration': 48.905, 'max_score': 4745.271, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR44745271.jpg'}, {'end': 5417.844, 'src': 'embed', 'start': 5352.992, 'weight': 3, 'content': [{'end': 5356.336, 'text': "So we're going to have the main component, which in our case would be app component.", 'start': 5352.992, 'duration': 3.344}, {'end': 5358.759, 'text': "and then we're passing all the information down.", 'start': 5356.856, 'duration': 1.903}, {'end': 5363.888, 'text': 'The much better way would be working with the Context API.', 'start': 5359.38, 'duration': 4.508}, {'end': 5371.459, 'text': 'And Context API is very similar to the Redux, where they both try to solve the same problem.', 'start': 5364.508, 'duration': 6.951}, {'end': 5380.39, 'text': "meaning the whole information should be in one place and then we have access let's say in this child without passing unnecessarily these props.", 'start': 5372.12, 'duration': 8.27}, {'end': 5382.111, 'text': 'So without this prop drilling.', 'start': 5380.73, 'duration': 1.381}, {'end': 5387.578, 'text': 'So we have one source of truth and then we can access it anywhere throughout our application.', 'start': 5382.532, 'duration': 5.046}, {'end': 5399.411, 'text': 'so this is exactly what we were going to do that instead of passing this list, this data that we have in the product list or in the app.js,', 'start': 5388.098, 'duration': 11.313}, {'end': 5406.8, 'text': "instead we're going to set up the context api and we're going to be able to access it throughout our application.", 'start': 5399.411, 'duration': 7.389}, {'end': 5417.844, 'text': 'so now that we have decided that we would want to work with a context api, we actually need to do all this setup,', 'start': 5409.036, 'duration': 8.808}], 'summary': 'Using context api to centralize data access, avoiding prop drilling and ensuring one source of truth.', 'duration': 64.852, 'max_score': 5352.992, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR45352992.jpg'}, {'end': 5548.363, 'src': 'embed', 'start': 5524.907, 'weight': 5, 'content': [{'end': 5534.253, 'text': "and then we're going to set this variable equal to react dot, and then we have the method, and the method is create context and just like that,", 'start': 5524.907, 'duration': 9.346}, {'end': 5537.315, 'text': 'we have created the context object.', 'start': 5534.253, 'duration': 3.062}, {'end': 5546.101, 'text': 'now, whenever we create a context object, it comes with two components, and one of them is going to be provider, so provider,', 'start': 5537.315, 'duration': 8.786}, {'end': 5548.363, 'text': 'and the second one is going to be consumer.', 'start': 5546.101, 'duration': 2.262}], 'summary': 'Creating a context object with react, including provider and consumer components.', 'duration': 23.456, 'max_score': 5524.907, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR45524907.jpg'}, {'end': 6975.665, 'src': 'embed', 'start': 6948.722, 'weight': 7, 'content': [{'end': 6952.347, 'text': "And what is going to be in an object? Well, it's going to be the properties that we have in array.", 'start': 6948.722, 'duration': 3.625}, {'end': 6956.092, 'text': "So there's going to be ID, title, image, price, company info,", 'start': 6952.828, 'duration': 3.264}, {'end': 6960.916, 'text': "And also we're going to have the in-card property which in the beginning is going to be false.", 'start': 6956.593, 'duration': 4.323}, {'end': 6963.297, 'text': "And then we're looking for the count and total.", 'start': 6961.436, 'duration': 1.861}, {'end': 6966.219, 'text': "Now we don't need right now the count and total.", 'start': 6963.898, 'duration': 2.321}, {'end': 6967.16, 'text': "We're not going to use them.", 'start': 6966.379, 'duration': 0.781}, {'end': 6968.901, 'text': "In fact, we're going to use them in a context.", 'start': 6967.2, 'duration': 1.701}, {'end': 6973.104, 'text': 'However, we do need ID, title, image, price, and in-card.', 'start': 6969.441, 'duration': 3.663}, {'end': 6975.665, 'text': "Now let's head over back to a product.", 'start': 6973.764, 'duration': 1.901}], 'summary': 'The object will contain id, title, image, price, company info, and in-card property, initially set to false.', 'duration': 26.943, 'max_score': 6948.722, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR46948722.jpg'}, {'end': 7092.712, 'src': 'embed', 'start': 7067.734, 'weight': 8, 'content': [{'end': 7075.899, 'text': 'because we need a product wrapper from styled components and i know that both of them have similar names, but we will have to live with that and then,', 'start': 7067.734, 'duration': 8.165}, {'end': 7077.64, 'text': 'within the product wrapper.', 'start': 7075.899, 'duration': 1.741}, {'end': 7083.764, 'text': "this is where we're going to have start adding our bootstrap And since with the bootstrap, with working with classes,", 'start': 7077.64, 'duration': 6.124}, {'end': 7086.967, 'text': 'we can go right ahead and just knock them out.', 'start': 7083.764, 'duration': 3.203}, {'end': 7088.829, 'text': 'So the first one is going to be column nine.', 'start': 7087.067, 'duration': 1.762}, {'end': 7092.712, 'text': 'So in the extra small screen, this is going to be nine columns wide.', 'start': 7089.389, 'duration': 3.323}], 'summary': 'Styling product wrapper with bootstrap, 9 columns wide on extra small screen.', 'duration': 24.978, 'max_score': 7067.734, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR47067734.jpg'}, {'end': 7324.566, 'src': 'embed', 'start': 7298.006, 'weight': 9, 'content': [{'end': 7302.311, 'text': 'so we have them right now in a public folder and we have just a images folder.', 'start': 7298.006, 'duration': 4.305}, {'end': 7305.513, 'text': 'And now, what I did in my data.', 'start': 7302.871, 'duration': 2.642}, {'end': 7312.338, 'text': 'I just access it with this path where we have image and product and then we have the name of the product.', 'start': 7305.513, 'duration': 6.825}, {'end': 7322.224, 'text': "So this way, basically what we're saying is we right now are looking for the images in the public folder, not in a source folder, because, remember,", 'start': 7312.898, 'duration': 9.326}, {'end': 7324.566, 'text': 'we were doing the imports in the source folder.', 'start': 7322.224, 'duration': 2.342}], 'summary': 'Accessing images in public folder for product display.', 'duration': 26.56, 'max_score': 7298.006, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR47298006.jpg'}], 'start': 4745.271, 'title': 'React e-commerce development', 'summary': 'Discusses e-commerce store development, setting up product list and title component, working with context api, using objects in react components, and react styling and structuring for an application.', 'chapters': [{'end': 4812.584, 'start': 4745.271, 'title': 'E-commerce store development', 'summary': 'Discusses the importance of having products in an e-commerce store, emphasizing that without actual products, the store is as useless as deodorant for cab drivers, and stresses the need for a product list and the navbar to navigate through the product and cart pages.', 'duration': 67.313, 'highlights': ['The importance of having products in an e-commerce store is emphasized, stating that without actual products, the store is as useless as deodorant for cab drivers.', 'The need for a product list in the e-commerce store is highlighted to ensure that the store has actual products to sell.', 'The utilization of the navbar to navigate through the product and cart pages is mentioned as an essential feature for the e-commerce store.']}, {'end': 5352.471, 'start': 4813.004, 'title': 'Setting up product list and title component', 'summary': 'Discusses setting up the product list and title component for a react app, including creating a state for products, importing and rendering the title component, and the potential issues with prop drilling and sharing state among components.', 'duration': 539.467, 'highlights': ['Creating a state for products with an empty array The chapter begins with creating a state for products, initializing it as an empty array, to be utilized for displaying products on the page.', "Importing and rendering the title component The process of importing and rendering the title component is explained, including the usage of props like 'name' and 'title' to make the title component reusable.", 'Potential issues with prop drilling and sharing state among components The potential issues related to prop drilling and the need for sharing state among components, specifically in the context of accessing and controlling product information in different parts of the application, are highlighted.']}, {'end': 6144.049, 'start': 5352.992, 'title': 'Working with context api', 'summary': 'Explains the setup and usage of context api in react, highlighting the elimination of prop drilling and the ability to access data throughout the application, without the need to pass it down the component tree. it emphasizes the creation of a provider and consumer components, as well as the advantages of using context api over traditional prop passing.', 'duration': 791.057, 'highlights': ['The chapter explains the setup and usage of Context API in React. It provides insights into the process of setting up and utilizing the Context API, demonstrating its relevance in the context of React development.', 'Emphasizes the elimination of prop drilling and the ability to access data throughout the application. It underscores the advantage of Context API in eliminating the need for prop drilling and enabling access to data across the application without explicit prop passing.', 'Highlights the creation of a provider and consumer components. It emphasizes the creation and usage of provider and consumer components within the context of the Context API setup, showcasing their significance in managing and accessing data.', 'Discusses the advantages of using Context API over traditional prop passing. It discusses the benefits of utilizing Context API over traditional prop passing methods, emphasizing its convenience and effectiveness in managing and sharing data within the application.']}, {'end': 6881.077, 'start': 6144.049, 'title': 'Using objects in react components', 'summary': 'Discusses using objects as values in react components, including importing and setting up object values, creating state, setting properties, creating methods, and accessing object properties to display information about products.', 'duration': 737.028, 'highlights': ['Setting up object values by importing and using store products and detail product from context.js.', 'Creating state and setting properties such as products and detail product in the product provider.', 'Creating methods such as handle detail and add to cart in the class-based component to handle functionality for products.', 'Accessing object properties and using destructuring to access state properties directly in the component.', 'Displaying information about products by looping through the array and accessing object properties to return and display product details.']}, {'end': 7365.514, 'start': 6881.758, 'title': 'React styling and structuring', 'summary': 'Covers the process of importing styled components and react router dom, structuring the product data, and styling the product wrapper and images, emphasizing the usage of template literals and bootstrap classes.', 'duration': 483.756, 'highlights': ['The chapter covers the process of importing styled components and React router DOM. The speaker emphasizes the need to import styled components and React router DOM to enable styling and navigation functionality.', 'Structuring the product data involves defining the properties in an object, including ID, title, image, price, company info, in-card property, count, and total. The speaker details the properties required in the product data object, such as ID, title, image, price, and in-card property, providing a comprehensive overview of the data structure.', 'Styling the product wrapper involves using template literals and bootstrap classes to define the layout and responsiveness. The speaker explains the process of styling the product wrapper using template literals and bootstrap classes, focusing on creating a responsive layout for the product.', 'The speaker demonstrates the process of obtaining product images from the public folder and utilizing them within the application. The speaker explains the process of accessing product images from the public folder and highlights the importance of ensuring the correct file path for successful image retrieval.']}], 'duration': 2620.243, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR44745271.jpg', 'highlights': ['The importance of having products in an e-commerce store is emphasized, stating that without actual products, the store is as useless as deodorant for cab drivers.', 'The need for a product list in the e-commerce store is highlighted to ensure that the store has actual products to sell.', 'The utilization of the navbar to navigate through the product and cart pages is mentioned as an essential feature for the e-commerce store.', 'The chapter explains the setup and usage of Context API in React, providing insights into the process of setting up and utilizing the Context API, demonstrating its relevance in the context of React development.', 'Emphasizes the elimination of prop drilling and the ability to access data throughout the application, underscoring the advantage of Context API in eliminating the need for prop drilling and enabling access to data across the application without explicit prop passing.', 'Highlights the creation of a provider and consumer components within the context of the Context API setup, showcasing their significance in managing and accessing data.', 'Discusses the benefits of utilizing Context API over traditional prop passing methods, emphasizing its convenience and effectiveness in managing and sharing data within the application.', 'Structuring the product data involves defining the properties in an object, including ID, title, image, price, company info, in-card property, count, and total, providing a comprehensive overview of the data structure.', 'Styling the product wrapper involves using template literals and bootstrap classes to define the layout and responsiveness, focusing on creating a responsive layout for the product.', 'The speaker explains the process of obtaining product images from the public folder and utilizing them within the application, highlighting the importance of ensuring the correct file path for successful image retrieval.']}, {'end': 8578.703, 'segs': [{'end': 7430.712, 'src': 'embed', 'start': 7366.034, 'weight': 0, 'content': [{'end': 7369.616, 'text': "Now let me go back and let's see what else we're going to have in a product.", 'start': 7366.034, 'duration': 3.582}, {'end': 7376.9, 'text': "Now you can also see that I made a mistake where console log is right away returned as we're rendering.", 'start': 7370.536, 'duration': 6.364}, {'end': 7385.726, 'text': 'So in this case what we would want to do and what is the proper way of doing is to have the arrow function that returns this console log.', 'start': 7377.381, 'duration': 8.345}, {'end': 7393.091, 'text': 'As you can see, since the arrow function is returning this implicitly, once I create the arrow function,', 'start': 7385.947, 'duration': 7.144}, {'end': 7396.794, 'text': 'the eight console logs are not showing up and only when I click on it.', 'start': 7393.091, 'duration': 3.703}, {'end': 7398.215, 'text': 'you see, we have you clicked on me.', 'start': 7396.794, 'duration': 1.421}, {'end': 7401.216, 'text': "and sure enough we're going to details now.", 'start': 7398.775, 'duration': 2.441}, {'end': 7406.478, 'text': 'details obviously has nothing in there right now, but at least we know that we have our link.', 'start': 7401.216, 'duration': 5.262}, {'end': 7414.042, 'text': "so later on, once we're going to create the correct html and css in there, then we know that our details is going to be showing.", 'start': 7406.478, 'duration': 7.564}, {'end': 7417.963, 'text': 'so this would be for the image now, right after the image.', 'start': 7414.042, 'duration': 3.921}, {'end': 7426.267, 'text': 'so right after the link there is going to be a button, because notice again in the final product project where we have our button showing up.', 'start': 7417.963, 'duration': 8.304}, {'end': 7429.35, 'text': 'so we would want to create this button here.', 'start': 7426.787, 'duration': 2.563}, {'end': 7430.712, 'text': 'now for the button.', 'start': 7429.35, 'duration': 1.362}], 'summary': 'Using arrow functions to control console logs and plan for future html and css implementations.', 'duration': 64.678, 'max_score': 7366.034, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR47366034.jpg'}, {'end': 7473.899, 'src': 'embed', 'start': 7449.072, 'weight': 3, 'content': [{'end': 7454.799, 'text': "There's going to be a state where the button or where the product is not in the cart and where the product is in the cart.", 'start': 7449.072, 'duration': 5.727}, {'end': 7458.683, 'text': "And for this we're going to be using this in cart value that we have.", 'start': 7455.259, 'duration': 3.424}, {'end': 7460.425, 'text': "So the property that we're getting back.", 'start': 7458.984, 'duration': 1.441}, {'end': 7463.889, 'text': "So in this case let's start first with just a simple button.", 'start': 7460.966, 'duration': 2.923}, {'end': 7466.953, 'text': "So let's write there's going to be HTML element for the button.", 'start': 7464.45, 'duration': 2.503}, {'end': 7469.455, 'text': 'And the class name is going to be very simple.', 'start': 7467.513, 'duration': 1.942}, {'end': 7472.918, 'text': "We're going to say that this is going to be cart BTN.", 'start': 7469.475, 'duration': 3.443}, {'end': 7473.899, 'text': 'So cart button.', 'start': 7473.118, 'duration': 0.781}], 'summary': "Using 'in cart' value to track button and product state.", 'duration': 24.827, 'max_score': 7449.072, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR47449072.jpg'}, {'end': 7613.186, 'src': 'embed', 'start': 7588.747, 'weight': 10, 'content': [{'end': 7596.794, 'text': "so first let me just have it as a arrow function and here let's write that we would want to return a console log or, i'm sorry,", 'start': 7588.747, 'duration': 8.047}, {'end': 7600.377, 'text': 'run the console log and add it to the cart.', 'start': 7596.794, 'duration': 3.583}, {'end': 7606.863, 'text': 'add it to the cart now, also within the value in a button.', 'start': 7600.377, 'duration': 6.486}, {'end': 7613.186, 'text': 'i also would want to do conditional render, because you can see i have the in cart or i have the font awesome icon.', 'start': 7606.863, 'duration': 6.323}], 'summary': 'Using arrow function to add items to cart and conditionally rendering icons.', 'duration': 24.439, 'max_score': 7588.747, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR47588747.jpg'}, {'end': 7889.977, 'src': 'embed', 'start': 7859.803, 'weight': 9, 'content': [{'end': 7863.864, 'text': "And then we're looking for the footer, which will going to be still in the cart.", 'start': 7859.803, 'duration': 4.061}, {'end': 7870.025, 'text': 'So right outside this image container, the one that we have for all our images.', 'start': 7864.324, 'duration': 5.701}, {'end': 7873.686, 'text': 'So right outside it, you know what, we can even make the comment.', 'start': 7870.506, 'duration': 3.18}, {'end': 7876.227, 'text': 'We can say cart footer.', 'start': 7874.286, 'duration': 1.941}, {'end': 7889.977, 'text': "and then i would want right now again the use the bootstrap and for this i'm just going to say card footer which we're going to use the bootstrap class and also there's going to be a value of display flex.", 'start': 7876.707, 'duration': 13.27}], 'summary': 'Adding a footer with a display flex value outside the image container.', 'duration': 30.174, 'max_score': 7859.803, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR47859803.jpg'}, {'end': 8071.373, 'src': 'embed', 'start': 8042.403, 'weight': 6, 'content': [{'end': 8045.704, 'text': 'And as you can see, this is the image and this is the card.', 'start': 8042.403, 'duration': 3.301}, {'end': 8049.585, 'text': "Now, like I said, there's going to be quite a bit of styling involved.", 'start': 8046.244, 'duration': 3.341}, {'end': 8051.726, 'text': 'However, our structure is there.', 'start': 8050.045, 'duration': 1.681}, {'end': 8057.448, 'text': 'So we have all our images, we have the titles, and as you can see the different titles, different images.', 'start': 8052.286, 'duration': 5.162}, {'end': 8064.499, 'text': 'And we just need to make this look a little bit more decent, like what we have here in the final.', 'start': 8058.388, 'duration': 6.111}, {'end': 8071.373, 'text': "And just like that, we arrive at everyone's favorite part, which is CSS.", 'start': 8065.988, 'duration': 5.385}], 'summary': 'Structural elements in place, requires styling for final look.', 'duration': 28.97, 'max_score': 8042.403, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR48042403.jpg'}, {'end': 8119.617, 'src': 'embed', 'start': 8091.029, 'weight': 7, 'content': [{'end': 8093.431, 'text': "Now for the border color, we're going to say transparent.", 'start': 8091.029, 'duration': 2.402}, {'end': 8097.536, 'text': 'transparent, and hopefully i wrote this correctly.', 'start': 8094.272, 'duration': 3.264}, {'end': 8105.024, 'text': 'now. next one is going to be transition, since i would want the color to applied over a period of time.', 'start': 8097.536, 'duration': 7.488}, {'end': 8108.508, 'text': "as you can see, as i'm going to be hovering, we will going to be adding the border.", 'start': 8105.024, 'duration': 3.484}, {'end': 8113.012, 'text': 'however, i would want to add this border over certain period of time.', 'start': 8108.508, 'duration': 4.504}, {'end': 8115.694, 'text': "so this is why we're going to be using transition.", 'start': 8113.012, 'duration': 2.682}, {'end': 8119.617, 'text': 'then the transition is going to be all, so all the properties should be affected.', 'start': 8115.694, 'duration': 3.923}], 'summary': "Using 'transparent' for border color and applying transition effect over all properties for hover effect.", 'duration': 28.588, 'max_score': 8091.029, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR48091029.jpg'}, {'end': 8417.537, 'src': 'embed', 'start': 8394.719, 'weight': 8, 'content': [{'end': 8403.425, 'text': 'I also want the overflow hidden and And the overflow hidden is going to be for the fact of if the image is going to get bigger,', 'start': 8394.719, 'duration': 8.706}, {'end': 8405.327, 'text': 'I would want to hide the overflow.', 'start': 8403.425, 'duration': 1.902}, {'end': 8412.392, 'text': "And again, I'm going to set the other properties and then we're going to comment this out just so we can see why we're using these properties.", 'start': 8405.527, 'duration': 6.865}, {'end': 8414.534, 'text': "It's probably easier once you see what's happening.", 'start': 8412.512, 'duration': 2.022}, {'end': 8417.537, 'text': 'And now first I would want to scale the image.', 'start': 8415.234, 'duration': 2.303}], 'summary': "Setting 'overflow: hidden' to hide overflow when image gets bigger, and scaling the image.", 'duration': 22.818, 'max_score': 8394.719, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR48394719.jpg'}], 'start': 7366.034, 'title': 'Proper usage of arrow functions', 'summary': 'Discusses the proper usage of arrow functions in javascript, highlighting a mistake in the code where console logs are being immediately returned, and the correct way of using an arrow function to prevent the console logs from showing up until clicked.', 'chapters': [{'end': 7406.478, 'start': 7366.034, 'title': 'Proper usage of arrow functions', 'summary': 'Discusses the proper usage of arrow functions in javascript, highlighting a mistake in the code where console logs are being immediately returned, and the correct way of using an arrow function to prevent the console logs from showing up until clicked.', 'duration': 40.444, 'highlights': ["Using arrow functions to implicitly return 'this' prevents immediate rendering of console logs, as evidenced by the absence of console logs until clicked.", 'Identifying the mistake of console logs being immediately returned and illustrating the proper way of utilizing arrow functions in JavaScript.', 'Highlighting the behavior of an arrow function in preventing the immediate display of console logs until triggered by a click event.']}, {'end': 7721.077, 'start': 7406.478, 'title': 'Creating button with conditional rendering', 'summary': 'Discusses creating a button with conditional rendering, utilizing the in cart property to disable the button and display different content based on its state, allowing for functionality such as adding items to the cart.', 'duration': 314.599, 'highlights': ['Utilizing the in cart property to disable the button and display different content based on its state The in cart property is used to determine the state of the button, allowing for conditional rendering and disabling the button when necessary.', 'Creating a button with conditional rendering The chapter covers the process of creating a button with conditional rendering, enabling different content to be displayed based on certain conditions.', 'Functionality like adding items to the cart The discussion includes implementing functionality, such as adding items to the cart, through the created button with conditional rendering.']}, {'end': 8041.883, 'start': 7721.557, 'title': 'Rendering conditional cart values', 'summary': 'Discusses the conditional rendering of cart values, such as in-cart status and displaying product prices and titles using bootstrap classes, to ensure proper functionality and visual presentation of the cart. it also highlights the need for a footer and the importance of aligning elements within the footer for a cohesive design.', 'duration': 320.326, 'highlights': ['The chapter discusses the conditional rendering of cart values, such as in-cart status and displaying product prices and titles using Bootstrap classes, to ensure proper functionality and visual presentation of the cart.', 'It also highlights the need for a footer and the importance of aligning elements within the footer for a cohesive design.']}, {'end': 8578.703, 'start': 8042.403, 'title': 'Styling css for image and card', 'summary': 'Covers the process of styling images and cards using css, including the use of transitions, hover effects, and positioning, providing a detailed walkthrough of the code and its effects.', 'duration': 536.3, 'highlights': ['The process of styling images and cards using CSS The chapter provides a detailed walkthrough of styling images and cards using CSS, including the use of transitions, hover effects, and positioning.', 'Use of transitions for CSS effects The chapter covers the use of transitions in CSS to create effects such as border color changes and image scaling over a defined period of time.', 'Explanation of positioning and overflow properties Detailed explanation of positioning elements using relative and absolute positioning, along with the use of overflow hidden to handle image scaling within a container.']}], 'duration': 1212.669, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR47366034.jpg', 'highlights': ['Identifying the mistake of console logs being immediately returned and illustrating the proper way of utilizing arrow functions in JavaScript.', "Using arrow functions to implicitly return 'this' prevents immediate rendering of console logs, as evidenced by the absence of console logs until clicked.", 'Highlighting the behavior of an arrow function in preventing the immediate display of console logs until triggered by a click event.', 'Utilizing the in cart property to disable the button and display different content based on its state The in cart property is used to determine the state of the button, allowing for conditional rendering and disabling the button when necessary.', 'Creating a button with conditional rendering The chapter covers the process of creating a button with conditional rendering, enabling different content to be displayed based on certain conditions.', 'The chapter discusses the conditional rendering of cart values, such as in-cart status and displaying product prices and titles using Bootstrap classes, to ensure proper functionality and visual presentation of the cart.', 'The process of styling images and cards using CSS The chapter provides a detailed walkthrough of styling images and cards using CSS, including the use of transitions, hover effects, and positioning.', 'Use of transitions for CSS effects The chapter covers the use of transitions in CSS to create effects such as border color changes and image scaling over a defined period of time.', 'Explanation of positioning and overflow properties Detailed explanation of positioning elements using relative and absolute positioning, along with the use of overflow hidden to handle image scaling within a container.', 'It also highlights the need for a footer and the importance of aligning elements within the footer for a cohesive design.', 'Functionality like adding items to the cart The discussion includes implementing functionality, such as adding items to the cart, through the created button with conditional rendering.']}, {'end': 10524.137, 'segs': [{'end': 8608.539, 'src': 'embed', 'start': 8578.703, 'weight': 2, 'content': [{'end': 8585.166, 'text': 'the last thing on our agenda is working with this button, so now we would want to style the button.', 'start': 8578.703, 'duration': 6.463}, {'end': 8589.768, 'text': "So let's start first with a button and we're going to say card BTN.", 'start': 8585.726, 'duration': 4.042}, {'end': 8595.551, 'text': "Now what I would want for the button, we're going to use the position and we would want to place it absolute.", 'start': 8590.308, 'duration': 5.243}, {'end': 8599.272, 'text': 'Like I said, we would want to take it out of the normal flow.', 'start': 8595.651, 'duration': 3.621}, {'end': 8600.713, 'text': 'So absolute.', 'start': 8599.772, 'duration': 0.941}, {'end': 8608.539, 'text': 'And then since we have right now this container as relative for the image container, notice where is our button.', 'start': 8601.293, 'duration': 7.246}], 'summary': 'Styling the button to be positioned absolutely for better placement', 'duration': 29.836, 'max_score': 8578.703, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR48578703.jpg'}, {'end': 8710.554, 'src': 'embed', 'start': 8685.177, 'weight': 1, 'content': [{'end': 8693.065, 'text': "next, after the background, we're going to get rid of the border, so i'm going to write border none as well as we would want a different color,", 'start': 8685.177, 'duration': 7.888}, {'end': 8695.866, 'text': 'And the color value is going to be main white.', 'start': 8693.585, 'duration': 2.281}, {'end': 8697.667, 'text': "So again, let's write var.", 'start': 8696.447, 'duration': 1.22}, {'end': 8701.009, 'text': "Then we're looking for the color actual value.", 'start': 8698.247, 'duration': 2.762}, {'end': 8703.01, 'text': 'And that is going to be main white.', 'start': 8701.489, 'duration': 1.521}, {'end': 8710.554, 'text': 'So just like this, we should have the button with a blue background and with a color of white.', 'start': 8703.53, 'duration': 7.024}], 'summary': 'Removing border and setting white color for button.', 'duration': 25.377, 'max_score': 8685.177, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR48685177.jpg'}, {'end': 8777.385, 'src': 'embed', 'start': 8751.052, 'weight': 0, 'content': [{'end': 8758.676, 'text': "there is one more thing that we need to work on, which is the fact that the button only appears as we're hovering over the product.", 'start': 8751.052, 'duration': 7.624}, {'end': 8762.918, 'text': "Now, how are we going to do this? Well, we're going to use again the transform property.", 'start': 8759.516, 'duration': 3.402}, {'end': 8764.819, 'text': "So let's write transform.", 'start': 8763.418, 'duration': 1.401}, {'end': 8767.48, 'text': "And now we'd want to set some values.", 'start': 8765.359, 'duration': 2.121}, {'end': 8770.382, 'text': "Now for the transform, we're going to use translate.", 'start': 8767.98, 'duration': 2.402}, {'end': 8773.223, 'text': 'And now we can just move the button 100% down.', 'start': 8770.882, 'duration': 2.341}, {'end': 8777.385, 'text': 'and 100 to the right now.', 'start': 8775.164, 'duration': 2.221}], 'summary': 'Using transform property to make button appear on hover; moving it 100% down and 100 to the right.', 'duration': 26.333, 'max_score': 8751.052, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR48751052.jpg'}, {'end': 9079.671, 'src': 'heatmap', 'start': 8848.029, 'weight': 0.855, 'content': [{'end': 8851.292, 'text': "However, again, notice that we're missing our transition.", 'start': 8848.029, 'duration': 3.263}, {'end': 8854.194, 'text': "So let's go to a transition.", 'start': 8851.832, 'duration': 2.362}, {'end': 8855.995, 'text': 'So where we had previously transition.', 'start': 8854.354, 'duration': 1.641}, {'end': 8857.737, 'text': "And let's copy and paste it.", 'start': 8856.616, 'duration': 1.121}, {'end': 8863.52, 'text': 'and just like that, we should have our transition, where, again, the change is happening over time.', 'start': 8858.337, 'duration': 5.183}, {'end': 8869.303, 'text': 'so notice, now the button is showing up exactly after one second, not right away now.', 'start': 8863.52, 'duration': 5.783}, {'end': 8873.585, 'text': 'last thing, i would want to set up the hover effect for the actual button.', 'start': 8869.303, 'duration': 4.282}, {'end': 8876.086, 'text': 'so card btn hover.', 'start': 8873.585, 'duration': 2.501}, {'end': 8877.927, 'text': 'and now we want to change the color.', 'start': 8876.086, 'duration': 1.841}, {'end': 8881.069, 'text': 'so first of all, color is going to go back to main blue.', 'start': 8877.927, 'duration': 3.142}, {'end': 8891.874, 'text': "so main blue is going to be my color when i'm hovering over the button, as well as cursor is going to be pointer, cursor is going to be a pointer.", 'start': 8881.069, 'duration': 10.805}, {'end': 8900.4, 'text': "and now, if everything is set up correctly, as you can see, as i'm hovering now, the color is changing again over one second.", 'start': 8891.874, 'duration': 8.526}, {'end': 8905.142, 'text': "now let's go back to browser, where we have it in a bigger window, and just like that,", 'start': 8900.4, 'duration': 4.742}, {'end': 8911.046, 'text': 'we have all our products showing just like they should in the final project.', 'start': 8905.142, 'duration': 5.904}, {'end': 8916.089, 'text': "hopefully everybody made it through this video and i'll see you guys in the next video.", 'start': 8911.046, 'duration': 5.043}, {'end': 8921.089, 'text': "I am really proud of the progress that we're making.", 'start': 8917.907, 'duration': 3.182}, {'end': 8926.732, 'text': "As you can see, we're done with our product list as well as product component.", 'start': 8921.529, 'duration': 5.203}, {'end': 8933.496, 'text': "Well, we're almost done with a product component because so far we still need to add two methods.", 'start': 8927.493, 'duration': 6.003}, {'end': 8942.041, 'text': 'So we need to fill up the functionality that we have with a cart as well as adding the details page.', 'start': 8933.676, 'duration': 8.365}, {'end': 8946.584, 'text': 'So that way the proper details of the item would be displayed.', 'start': 8942.561, 'duration': 4.023}, {'end': 8950.186, 'text': 'However, there is a thing that we would need to fix.', 'start': 8947.364, 'duration': 2.822}, {'end': 8952.868, 'text': "And in fact, there's going to be two things.", 'start': 8951.207, 'duration': 1.661}, {'end': 8957.871, 'text': 'One is going to be dealing with a prop types in the product JS.', 'start': 8953.688, 'duration': 4.183}, {'end': 8965.076, 'text': 'And the second one is going to be dealing and making sure that we always have the fresh set of data.', 'start': 8958.552, 'duration': 6.524}, {'end': 8967.518, 'text': "Let's start with a prop types.", 'start': 8965.876, 'duration': 1.642}, {'end': 8971.04, 'text': "So we're going to go back to a product JS.", 'start': 8968.158, 'duration': 2.882}, {'end': 8976.804, 'text': "And now let's explore the possibility that there's something wrong with the data.", 'start': 8971.7, 'duration': 5.104}, {'end': 8983.812, 'text': "Now since we all are perfect, let's make the example more interesting where we are not making the data.", 'start': 8977.725, 'duration': 6.087}, {'end': 8986.755, 'text': 'Because of course we would never mess up anything in data.', 'start': 8984.292, 'duration': 2.463}, {'end': 8992.602, 'text': "Let's say your boss gives this job to a sloppy Steve, your co-worker.", 'start': 8987.476, 'duration': 5.126}, {'end': 8997.608, 'text': 'And sure enough, judging by his nickname, sloppy Steve messes it up.', 'start': 8993.163, 'duration': 4.445}, {'end': 9004.371, 'text': "let's say for the price, he says true, so he changes to boolean.", 'start': 8999.028, 'duration': 5.343}, {'end': 9008.694, 'text': "then for the cart, we're going to say that he's going to say something like that.", 'start': 9004.371, 'duration': 4.323}, {'end': 9014.757, 'text': 'so, just like that, steve is starting to mess up all our hard work now.', 'start': 9008.694, 'duration': 6.063}, {'end': 9016.298, 'text': 'is there any way around this?', 'start': 9014.757, 'duration': 1.541}, {'end': 9023.422, 'text': 'so is there any way for us to check it in the product and make sure that we are catching this mistake?', 'start': 9016.298, 'duration': 7.124}, {'end': 9030.288, 'text': 'well, we can use the prop types for that, Because for now, as you can see, since I changed my first product,', 'start': 9023.422, 'duration': 6.866}, {'end': 9038.476, 'text': "I no longer have the amount of money that I'm getting, as well as our in-cart value currently is messed up.", 'start': 9030.288, 'duration': 8.188}, {'end': 9045.823, 'text': 'Because as you can see right now, for my first product, it shows right away that it is in the cart, even though it is not.', 'start': 9038.736, 'duration': 7.087}, {'end': 9049.967, 'text': 'And the reason for that is because we have this in-cart value messed up.', 'start': 9046.424, 'duration': 3.543}, {'end': 9053.291, 'text': "and let's go to a product.js.", 'start': 9050.828, 'duration': 2.463}, {'end': 9061.218, 'text': 'and if we would want to use the prop types, we would need to specifically import them, and the name is going to be prop types.', 'start': 9053.291, 'duration': 7.927}, {'end': 9062.88, 'text': "so i'm going to say prop types.", 'start': 9061.218, 'duration': 1.662}, {'end': 9070.847, 'text': "however, they do come with a react if we're using the create react app, So the only thing we need to do is import them.", 'start': 9062.88, 'duration': 7.967}, {'end': 9074.449, 'text': "So I'm going to write import from the prop types.", 'start': 9070.867, 'duration': 3.582}, {'end': 9079.671, 'text': "And now let's go all the way, navigate to the end of the product.", 'start': 9075.049, 'duration': 4.622}], 'summary': 'The transcript discusses adding transitions, hover effects, and fixing issues with prop types in a product list. it also highlights the progress made in the project.', 'duration': 231.642, 'max_score': 8848.029, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR48848029.jpg'}, {'end': 8905.142, 'src': 'embed', 'start': 8881.069, 'weight': 3, 'content': [{'end': 8891.874, 'text': "so main blue is going to be my color when i'm hovering over the button, as well as cursor is going to be pointer, cursor is going to be a pointer.", 'start': 8881.069, 'duration': 10.805}, {'end': 8900.4, 'text': "and now, if everything is set up correctly, as you can see, as i'm hovering now, the color is changing again over one second.", 'start': 8891.874, 'duration': 8.526}, {'end': 8905.142, 'text': "now let's go back to browser, where we have it in a bigger window, and just like that,", 'start': 8900.4, 'duration': 4.742}], 'summary': 'Button hover changes color to main blue and cursor to pointer.', 'duration': 24.073, 'max_score': 8881.069, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR48881069.jpg'}, {'end': 8983.812, 'src': 'embed', 'start': 8958.552, 'weight': 5, 'content': [{'end': 8965.076, 'text': 'And the second one is going to be dealing and making sure that we always have the fresh set of data.', 'start': 8958.552, 'duration': 6.524}, {'end': 8967.518, 'text': "Let's start with a prop types.", 'start': 8965.876, 'duration': 1.642}, {'end': 8971.04, 'text': "So we're going to go back to a product JS.", 'start': 8968.158, 'duration': 2.882}, {'end': 8976.804, 'text': "And now let's explore the possibility that there's something wrong with the data.", 'start': 8971.7, 'duration': 5.104}, {'end': 8983.812, 'text': "Now since we all are perfect, let's make the example more interesting where we are not making the data.", 'start': 8977.725, 'duration': 6.087}], 'summary': 'Ensuring fresh data and exploring data errors in javascript.', 'duration': 25.26, 'max_score': 8958.552, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR48958552.jpg'}, {'end': 9106.849, 'src': 'embed', 'start': 9080.251, 'weight': 4, 'content': [{'end': 9084.433, 'text': "So we have the end of the component and let's set up our prop types.", 'start': 9080.251, 'duration': 4.182}, {'end': 9089.936, 'text': "So we're going to go where before the style component and let's create our prop types.", 'start': 9084.914, 'duration': 5.022}, {'end': 9099.103, 'text': "so here we'll write product, so that would be the name of the component, and then we're looking for the prop types, and here the syntax is important.", 'start': 9090.396, 'duration': 8.707}, {'end': 9106.849, 'text': "so we'll have to start with a small p, not a capital p, and we're going to set it equal to an object.", 'start': 9099.103, 'duration': 7.746}], 'summary': 'Setting up prop types for the product component.', 'duration': 26.598, 'max_score': 9080.251, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR49080251.jpg'}, {'end': 9331.344, 'src': 'embed', 'start': 9306.843, 'weight': 6, 'content': [{'end': 9318.777, 'text': 'And this issue has everything to do with a fact that in JavaScript, whenever we are assigning the objects to a variable,', 'start': 9306.843, 'duration': 11.934}, {'end': 9321.1, 'text': "in fact we're passing them as a reference.", 'start': 9318.777, 'duration': 2.323}, {'end': 9331.344, 'text': 'Now why do we care about that? You see we have the products which is the property in the state and we are assigning this to an array.', 'start': 9321.821, 'duration': 9.523}], 'summary': 'In javascript, assigning objects to variables passes them as references, impacting state properties like products.', 'duration': 24.501, 'max_score': 9306.843, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR49306843.jpg'}, {'end': 9568.348, 'src': 'embed', 'start': 9525.143, 'weight': 8, 'content': [{'end': 9534.329, 'text': 'so, basically, what we did is we grabbed the first item in the state product and we changed the value in cart,', 'start': 9525.143, 'duration': 9.186}, {'end': 9538.431, 'text': "because this is in fact what we're going to do when we're going to add the product to the court.", 'start': 9534.329, 'duration': 4.102}, {'end': 9540.873, 'text': 'this is going to be similar functionality.', 'start': 9538.431, 'duration': 2.442}, {'end': 9549.878, 'text': 'however, i want to show you the issue with our current setup and then, since we know that we have this.state, we also have the callback function.', 'start': 9540.873, 'duration': 9.005}, {'end': 9558.443, 'text': 'so right after we do the this.setState, we can check the values for the state products and data products and again,', 'start': 9549.878, 'duration': 8.565}, {'end': 9564.446, 'text': 'since this is a callback function, this will going to run instantaneously after we update the state,', 'start': 9558.443, 'duration': 6.003}, {'end': 9568.348, 'text': 'so we cannot come up with some kind of excuses that something is not working.', 'start': 9564.446, 'duration': 3.902}], 'summary': 'Showed issue with current setup and updated state products and data products instantaneously.', 'duration': 43.205, 'max_score': 9525.143, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR49525143.jpg'}, {'end': 9835.691, 'src': 'embed', 'start': 9807.147, 'weight': 10, 'content': [{'end': 9813.832, 'text': "so now i'm setting up my method, and this is the part where you should be coding along, and here we're going to write that.", 'start': 9807.147, 'duration': 6.685}, {'end': 9819.216, 'text': "first we would want to create a empty array, so i'm going to say let products.", 'start': 9813.832, 'duration': 5.384}, {'end': 9821.397, 'text': 'so this is going to be our empty array.', 'start': 9819.216, 'duration': 2.181}, {'end': 9829.845, 'text': 'now, once we have the empty array Now I would want to loop through all the store products, all the array that I have,', 'start': 9821.397, 'duration': 8.448}, {'end': 9835.691, 'text': "and now I'm going to write store products and then I'm writing for each, and then, as I'm looping through,", 'start': 9829.845, 'duration': 5.846}], 'summary': 'Setting up method to create an empty array and loop through store products.', 'duration': 28.544, 'max_score': 9807.147, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR49807147.jpg'}, {'end': 10096.309, 'src': 'embed', 'start': 10074.62, 'weight': 12, 'content': [{'end': 10083.584, 'text': "now, first we're going to set up the details page with just one id that we'll have, and then later on we're going to set up the functionality.", 'start': 10074.62, 'duration': 8.964}, {'end': 10090.106, 'text': "so first, basically, we're going to get the item details and then we're going to set up the functionality,", 'start': 10083.584, 'duration': 6.522}, {'end': 10096.309, 'text': "that every time we're clicking on some kind of image we're getting this specific item.", 'start': 10090.106, 'duration': 6.203}], 'summary': 'Setting up details page with one id, then adding functionality for item selection.', 'duration': 21.689, 'max_score': 10074.62, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR410074620.jpg'}, {'end': 10189.827, 'src': 'embed', 'start': 10162.344, 'weight': 13, 'content': [{'end': 10168.129, 'text': "now let me go and find the details.js, since this is where we're going to be working.", 'start': 10162.344, 'duration': 5.785}, {'end': 10171.271, 'text': "and now let's start first with our imports.", 'start': 10168.129, 'duration': 3.142}, {'end': 10173.713, 'text': 'so first i would want to import product consumer.', 'start': 10171.271, 'duration': 2.442}, {'end': 10181.52, 'text': "so i'm going to start import and then we're looking for product, product, consumer, and where is this located?", 'start': 10173.713, 'duration': 7.807}, {'end': 10183.121, 'text': 'well, obviously this is from the context.', 'start': 10181.52, 'duration': 1.601}, {'end': 10189.827, 'text': "so we're going to have from and then, since we need to do the relative path, we're looking for the context.", 'start': 10183.121, 'duration': 6.706}], 'summary': 'Import product consumer from details.js for relative path in context.', 'duration': 27.483, 'max_score': 10162.344, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR410162344.jpg'}, {'end': 10363.238, 'src': 'embed', 'start': 10333.882, 'weight': 14, 'content': [{'end': 10340.084, 'text': "And again, since I would want to use these values, I think it's going to be easier for me to right away do the structuring.", 'start': 10333.882, 'duration': 6.202}, {'end': 10347.806, 'text': "Because I don't want to reference in the JSX value that detail product and I'm looking for the ID.", 'start': 10340.664, 'duration': 7.142}, {'end': 10350.107, 'text': "then I'm looking for the title, then I'm looking for the price.", 'start': 10347.806, 'duration': 2.301}, {'end': 10352.569, 'text': 'so we can right away do the destructuring.', 'start': 10350.607, 'duration': 1.962}, {'end': 10357.673, 'text': "right here i'm going to write const and then i'm looking for the values of id.", 'start': 10352.569, 'duration': 5.104}, {'end': 10363.238, 'text': 'then we would want a company and again these are values from our data.', 'start': 10357.673, 'duration': 5.565}], 'summary': 'Structuring values for id, title, and price using destructuring.', 'duration': 29.356, 'max_score': 10333.882, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR410333882.jpg'}, {'end': 10435.257, 'src': 'embed', 'start': 10402.849, 'weight': 15, 'content': [{'end': 10405.352, 'text': 'so again this is just a simple function.', 'start': 10402.849, 'duration': 2.503}, {'end': 10413.763, 'text': 'so right before we are in fact doing our return, which will going to contain jsx, we can just grab all these values,', 'start': 10405.352, 'duration': 8.411}, {'end': 10415.244, 'text': "so it's easier for us to work with it.", 'start': 10413.763, 'duration': 1.481}, {'end': 10420.788, 'text': "So here in the JSX, let's start with a bootstrap.", 'start': 10415.945, 'duration': 4.843}, {'end': 10423.79, 'text': 'So for the bootstrap, we would want to start with a container.', 'start': 10421.228, 'duration': 2.562}, {'end': 10427.192, 'text': "So let's build a container, not a button container.", 'start': 10424.41, 'duration': 2.782}, {'end': 10429.733, 'text': "I don't know why it's suggesting the button container.", 'start': 10427.792, 'duration': 1.941}, {'end': 10435.257, 'text': 'And also for the container, we would want a little bit of padding top, bottom.', 'start': 10430.334, 'duration': 4.923}], 'summary': 'The transcript discusses building a container with padding using jsx.', 'duration': 32.408, 'max_score': 10402.849, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR410402849.jpg'}, {'end': 10536.325, 'src': 'embed', 'start': 10506.066, 'weight': 16, 'content': [{'end': 10509.888, 'text': "Later on we're going to set up the functionality where all this is going to be changing.", 'start': 10506.066, 'duration': 3.822}, {'end': 10514.251, 'text': "Once we're going to work with our handle detail method.", 'start': 10510.609, 'duration': 3.642}, {'end': 10518.293, 'text': 'Remember we have this handle detail which for now just has hello from detail.', 'start': 10514.651, 'duration': 3.642}, {'end': 10521.015, 'text': "Well this is where we're going to set up our functionality.", 'start': 10518.834, 'duration': 2.181}, {'end': 10524.137, 'text': "But for now we're just making a boilerplate.", 'start': 10521.575, 'duration': 2.562}, {'end': 10528.94, 'text': "So we're just placing the values in and then later on we're going to be dynamically changing.", 'start': 10524.597, 'duration': 4.343}, {'end': 10536.325, 'text': 'Now, right after the title, there is going to be a row that will start all our UI.', 'start': 10529.66, 'duration': 6.665}], 'summary': 'Setting up functionality for handle detail method, initially a boilerplate.', 'duration': 30.259, 'max_score': 10506.066, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR410506066.jpg'}], 'start': 8578.703, 'title': 'Progress in web development', 'summary': 'Covers styling a button for an image container, progress in the product component, javascript objects and state management, react state management, and setting up details page, addressing issues and implementing solutions, resulting in improved functionality and user experience.', 'chapters': [{'end': 8905.142, 'start': 8578.703, 'title': 'Styling button for image container', 'summary': 'Explains the process of styling a button for an image container, including setting absolute position, coordinates, padding, background color, border, font size, border radius, hover effect, and transition, resulting in a visually appealing and functional button for the image container.', 'duration': 326.439, 'highlights': ['The button is styled with absolute positioning at the bottom right of the image container, using coordinates and padding for visual appeal.', 'Background color and border styling are applied to the button, resulting in a visually appealing design.', "The button's hover effect and transition property are set to ensure a smooth and visually appealing user experience.", 'The hover effect for the button includes a color change and cursor modification, enhancing user interactivity.']}, {'end': 9270.167, 'start': 8905.142, 'title': 'Product component progress', 'summary': 'Covers the progress made in the product component, including the identification and resolution of issues related to prop types, and the implementation of prop types for product component ensuring correct data types and required properties.', 'duration': 365.025, 'highlights': ['The importance of using prop types for checking and catching mistakes in data is emphasized, with examples demonstrating the impact of incorrect data types and the process for identifying and rectifying them. The transcript highlights the necessity of using prop types to validate data, with examples showing how incorrect data types can impact the functionality of the product component, and the process of identifying and rectifying these issues.', 'The process of setting up prop types for the product component is detailed, including the syntax for defining prop types, specifying data types and making properties required, with a demonstration of identifying and resolving issues related to prop types. The transcript explains the process of setting up prop types for the product component, detailing the syntax for defining prop types, specifying data types, making properties required, and demonstrating the identification and resolution of issues related to prop types.', 'The impact of incorrect data types on the functionality of the product component is illustrated, with examples showcasing the errors generated and the process of identifying and correcting the data type issues. The transcript illustrates the impact of incorrect data types on the functionality of the product component, providing examples of the errors generated and detailing the process of identifying and correcting the data type issues.']}, {'end': 9568.348, 'start': 9270.167, 'title': 'Javascript objects and state management', 'summary': 'Discusses the issue of object reference in javascript, demonstrating how changing state products affects store products, and how the use of this.setstate method can lead to unexpected behavior, aiming to fix functionality issues in the application.', 'duration': 298.181, 'highlights': ['The issue with object reference in JavaScript is demonstrated through the example of changing state products affecting store products.', 'The use of this.setState method to modify state values is explained, emphasizing the need to understand its functionality and potential impact on the application.', 'The process of changing the value of in-cart property in the products array using this.setState is detailed, highlighting the potential issues with the current setup.', 'The concept of callback function in this.setState is explained, illustrating its role in checking the values of state products and data products after state update.']}, {'end': 10052.321, 'start': 9568.348, 'title': 'React state management', 'summary': 'Discusses managing state in react, addressing issues with object references, and implementing a solution to obtain fresh set of values, ensuring the original values are retained for multiple functionalities.', 'duration': 483.973, 'highlights': ['Implementing a solution to obtain fresh set of values Describing the process of creating an empty array, looping through the store products, and copying the values to ensure a new set of values is obtained, addressing the object reference issue.', 'Addressing issues with object references Explaining the problem of object referencing in JavaScript and the need to obtain new, fresh values rather than modifying the original values, highlighting the potential consequences of maintaining object references.', 'Managing state in React Discussing the importance of managing state in React and the potential need for obtaining original values for multiple functionalities, emphasizing the significance of addressing state management issues.']}, {'end': 10524.137, 'start': 10053.602, 'title': 'Setting up details page', 'summary': 'Focuses on setting up the details page for an application, including importing necessary components, destructuring data, and creating jsx elements with bootstrap. it also mentions the plan for future functionality implementation.', 'duration': 470.535, 'highlights': ['Setting up the details page with one id and functionality The chapter discusses setting up the details page with a single id and plans to implement functionality for clicking on images to display specific item details.', 'Importing necessary components and modules It covers the process of importing components like product consumer and button container from the context and the react router, necessary for the details page.', 'Destructuring data for easier access and usage in JSX The transcript explains the process of destructuring data, including id, title, image, and price, for easier access and usage within the JSX elements.', 'Creation of JSX elements with Bootstrap for the details page It details the creation of JSX elements with Bootstrap, including setting up containers, text alignment, and styling for the title and other components on the details page.', 'Plan for future functionality implementation The chapter mentions the plan for future functionality implementation, including the intention to work on changing values and implementing the handle detail method.']}], 'duration': 1945.434, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR48578703.jpg', 'highlights': ["The button's hover effect and transition property are set to ensure a smooth and visually appealing user experience.", 'Background color and border styling are applied to the button, resulting in a visually appealing design.', 'The button is styled with absolute positioning at the bottom right of the image container, using coordinates and padding for visual appeal.', 'The hover effect for the button includes a color change and cursor modification, enhancing user interactivity.', 'The process of setting up prop types for the product component is detailed, including the syntax for defining prop types, specifying data types, making properties required, and demonstrating the identification and resolution of issues related to prop types.', 'The impact of incorrect data types on the functionality of the product component is illustrated, with examples showcasing the errors generated and the process of identifying and correcting the data type issues.', 'The importance of managing state in React and the potential need for obtaining original values for multiple functionalities, emphasizing the significance of addressing state management issues.', 'The issue with object reference in JavaScript is demonstrated through the example of changing state products affecting store products.', 'The process of changing the value of in-cart property in the products array using this.setState is detailed, highlighting the potential issues with the current setup.', 'The concept of callback function in this.setState is explained, illustrating its role in checking the values of state products and data products after state update.', 'Implementing a solution to obtain fresh set of values Describing the process of creating an empty array, looping through the store products, and copying the values to ensure a new set of values is obtained, addressing the object reference issue.', 'Addressing issues with object references Explaining the problem of object referencing in JavaScript and the need to obtain new, fresh values rather than modifying the original values, highlighting the potential consequences of maintaining object references.', 'Setting up the details page with one id and functionality The chapter discusses setting up the details page with a single id and plans to implement functionality for clicking on images to display specific item details.', 'Importing necessary components and modules It covers the process of importing components like product consumer and button container from the context and the react router, necessary for the details page.', 'Destructuring data for easier access and usage in JSX The transcript explains the process of destructuring data, including id, title, image, and price, for easier access and usage within the JSX elements.', 'Creation of JSX elements with Bootstrap for the details page It details the creation of JSX elements with Bootstrap, including setting up containers, text alignment, and styling for the title and other components on the details page.', 'Plan for future functionality implementation The chapter mentions the plan for future functionality implementation, including the intention to work on changing values and implementing the handle detail method.']}, {'end': 12278.813, 'segs': [{'end': 10612.644, 'src': 'embed', 'start': 10582.774, 'weight': 0, 'content': [{'end': 10590.858, 'text': "so we're always going to place it in the center as well, as once we get to a medium screen size, there's going to be a two column layout.", 'start': 10582.774, 'duration': 8.084}, {'end': 10599.86, 'text': 'so this is going to be spanning six columns wide and also we would want the margin top bottom to be three, as well as text capitalize,', 'start': 10590.858, 'duration': 9.002}, {'end': 10601.181, 'text': 'text capitalize.', 'start': 10599.86, 'duration': 1.321}, {'end': 10604.642, 'text': 'so just like this, this should be one of our columns.', 'start': 10601.181, 'duration': 3.461}, {'end': 10612.644, 'text': "now, as you can see, since i didn't place anything within this column, it right away created the end one and i didn't need that.", 'start': 10604.642, 'duration': 8.002}], 'summary': 'Design layout includes two-column structure with 6-column width and 3-margin top/bottom.', 'duration': 29.87, 'max_score': 10582.774, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR410582774.jpg'}, {'end': 11091.013, 'src': 'embed', 'start': 11061.803, 'weight': 2, 'content': [{'end': 11065.584, 'text': "We're again, we're going to be checking for the values and we're going to be working with them.", 'start': 11061.803, 'duration': 3.781}, {'end': 11069.085, 'text': 'Because again, these buttons are going to work the same way.', 'start': 11066.044, 'duration': 3.041}, {'end': 11073.786, 'text': 'If the item is going to be a card, we also would want this to show in the details.', 'start': 11069.965, 'duration': 3.821}, {'end': 11076.407, 'text': 'because otherwise this is not going to make sense.', 'start': 11074.246, 'duration': 2.161}, {'end': 11083.35, 'text': "so let's say in the products page we're adding it to the products and then we're coming back here and again we can add it to the products.", 'start': 11076.407, 'duration': 6.943}, {'end': 11086.311, 'text': 'now that is not the idea that we have for this project.', 'start': 11083.35, 'duration': 2.961}, {'end': 11091.013, 'text': "so let me go back again in the details and let's start working on the second button.", 'start': 11086.311, 'duration': 4.702}], 'summary': 'Working on checking values and buttons functionality for products page.', 'duration': 29.21, 'max_score': 11061.803, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR411061803.jpg'}, {'end': 11353.641, 'src': 'heatmap', 'start': 11119.322, 'weight': 0.817, 'content': [{'end': 11123.103, 'text': 'And just like that, we should have our button with the value.', 'start': 11119.322, 'duration': 3.781}, {'end': 11130.369, 'text': "however, there's obviously a case where we would want to still disable it if it is not in the cart.", 'start': 11123.743, 'duration': 6.626}, {'end': 11139.858, 'text': "so let me start a new line for the button container and let's write that there's going to be again the disable attribute and again we're going to do the same thing where we're checking it.", 'start': 11130.369, 'duration': 9.489}, {'end': 11145.983, 'text': "so i'm going to say again if the in cart is true, then we're saying that disabled is going to be true,", 'start': 11139.858, 'duration': 6.125}, {'end': 11148.484, 'text': "which in our case in the beginning it's not going to be.", 'start': 11145.983, 'duration': 2.501}, {'end': 11158.149, 'text': "and then we have the colon and we're going to say if that value is false, so if it's not in the card also the disabled is going to be false.", 'start': 11148.484, 'duration': 9.665}, {'end': 11163.672, 'text': 'now also, once we click this button, this add to cart, in our final project, two things are going to happen.', 'start': 11158.149, 'duration': 5.523}, {'end': 11166.733, 'text': "First of all, we're going to add the item to the cart.", 'start': 11164.392, 'duration': 2.341}, {'end': 11169.074, 'text': "And the second one, we're going to open up the model.", 'start': 11167.313, 'duration': 1.761}, {'end': 11172.255, 'text': "Now, we haven't set up any functionality for them yet.", 'start': 11169.614, 'duration': 2.641}, {'end': 11176.436, 'text': 'However, we do have access to the add to cart.', 'start': 11172.955, 'duration': 3.481}, {'end': 11179.717, 'text': 'Remember, in the very, very beginning, we created this method.', 'start': 11177.036, 'duration': 2.681}, {'end': 11181.258, 'text': 'We have this add to cart.', 'start': 11180.197, 'duration': 1.061}, {'end': 11185.179, 'text': "Now, obviously, there's nothing in here apart from hello from add to cart.", 'start': 11181.738, 'duration': 3.441}, {'end': 11193.205, 'text': "but since right now we're using the value, we have access to this method because, remember again, we passed it down to the value,", 'start': 11185.819, 'duration': 7.386}, {'end': 11195.607, 'text': 'since the value is an object.', 'start': 11193.205, 'duration': 2.402}, {'end': 11201.051, 'text': "so let's go back to the details, let's scroll down and let's actually run this on the click.", 'start': 11195.607, 'duration': 5.444}, {'end': 11202.452, 'text': "so let's say on click.", 'start': 11201.051, 'duration': 1.401}, {'end': 11206.435, 'text': 'so once we click this, I would want to run this function Now.', 'start': 11202.452, 'duration': 3.983}, {'end': 11211.74, 'text': "since I would want to run a function only when I click the button, I'm going to have to place this arrow function here.", 'start': 11206.435, 'duration': 5.305}, {'end': 11218.908, 'text': "So only when I'm going to click the button then I'm going to get back or then I'm going to run my two methods.", 'start': 11212.281, 'duration': 6.627}, {'end': 11225.175, 'text': "And the first one is going to be value and now I'm looking for add to cart since this is the name of the method.", 'start': 11219.449, 'duration': 5.726}, {'end': 11228.716, 'text': "and eventually we're going to be passing an id now.", 'start': 11225.915, 'duration': 2.801}, {'end': 11237.238, 'text': "for now we're not going to be using the id, but remember all the way in the beginning we had this id, so we grabbed the id from the detail product.", 'start': 11228.716, 'duration': 8.522}, {'end': 11238.799, 'text': "so for now, what we're going to do?", 'start': 11237.238, 'duration': 1.561}, {'end': 11247.583, 'text': "we're just going to pass this id and if we want to really make this interesting, Maybe instead of simple console.log, let's just look for the ID.", 'start': 11238.799, 'duration': 8.784}, {'end': 11249.705, 'text': "So let's go back to Add to Cart.", 'start': 11247.984, 'duration': 1.721}, {'end': 11259.972, 'text': "And instead of hello from Add to Cart, we can say ID is, if I'm going to change this to a template literals, I'm going to be able to access this ID.", 'start': 11250.445, 'duration': 9.527}, {'end': 11263.135, 'text': "So I'm going to say that I would want to print out the ID.", 'start': 11260.433, 'duration': 2.702}, {'end': 11265.496, 'text': 'So let me first save the context.', 'start': 11263.615, 'duration': 1.881}, {'end': 11274.903, 'text': "as well, as we're going to save the details and, just like that, we can go to a bigger browser window just so we can see everything better.", 'start': 11266.577, 'duration': 8.326}, {'end': 11281.328, 'text': "so if i'm going to click on the second object, obviously i'm not going to be getting this particular information,", 'start': 11274.903, 'duration': 6.425}, {'end': 11284.21, 'text': 'but we will going to set this up in the next video.', 'start': 11281.328, 'duration': 2.882}, {'end': 11285.811, 'text': 'however, check this out.', 'start': 11284.21, 'duration': 1.601}, {'end': 11287.813, 'text': 'so we have google pixel black.', 'start': 11285.811, 'duration': 2.002}, {'end': 11295.22, 'text': "so we're getting this detailed product and now we have back to products, which is going to be a link that brings us back to products.", 'start': 11287.813, 'duration': 7.407}, {'end': 11305.291, 'text': "or, if i would want to add to cart and obviously i would want to open up the console log so i can would want to see what we're actually having here and we'll have add to cart.", 'start': 11295.22, 'duration': 10.071}, {'end': 11307.893, 'text': 'we have hello from add to cart.', 'start': 11305.291, 'duration': 2.602}, {'end': 11311.697, 'text': 'the id is one, so we know that our functionality is working.', 'start': 11307.893, 'duration': 3.804}, {'end': 11313.118, 'text': 'so you know what?', 'start': 11311.697, 'duration': 1.421}, {'end': 11320.063, 'text': "before we set up the functionality of changing the specific product that we're getting the information about,", 'start': 11313.118, 'duration': 6.945}, {'end': 11326.768, 'text': "why don't we go ahead and look at how we can make this button different with a styled component?", 'start': 11320.063, 'duration': 6.705}, {'end': 11334.153, 'text': 'because, as you can see in the final project, the add to cart, or in cart in our case, is going to be yellow color,', 'start': 11326.768, 'duration': 7.385}, {'end': 11335.954, 'text': "so it's not going to be the blue color.", 'start': 11334.153, 'duration': 1.801}, {'end': 11337.475, 'text': 'that is for the other one.', 'start': 11335.954, 'duration': 1.521}, {'end': 11339.996, 'text': "So let's go ahead first and do that,", 'start': 11338.015, 'duration': 1.981}, {'end': 11346.538, 'text': "and then we're going to set up the functionality where we're getting the specific information about each and every product.", 'start': 11339.996, 'duration': 6.542}, {'end': 11353.641, 'text': 'Another great feature that comes with a styled component is the fact that we can pass the props.', 'start': 11347.719, 'duration': 5.922}], 'summary': 'The transcript discusses implementing button functionality, adding items to cart, and using styled components.', 'duration': 234.319, 'max_score': 11119.322, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR411119322.jpg'}, {'end': 11295.22, 'src': 'embed', 'start': 11263.615, 'weight': 3, 'content': [{'end': 11265.496, 'text': 'So let me first save the context.', 'start': 11263.615, 'duration': 1.881}, {'end': 11274.903, 'text': "as well, as we're going to save the details and, just like that, we can go to a bigger browser window just so we can see everything better.", 'start': 11266.577, 'duration': 8.326}, {'end': 11281.328, 'text': "so if i'm going to click on the second object, obviously i'm not going to be getting this particular information,", 'start': 11274.903, 'duration': 6.425}, {'end': 11284.21, 'text': 'but we will going to set this up in the next video.', 'start': 11281.328, 'duration': 2.882}, {'end': 11285.811, 'text': 'however, check this out.', 'start': 11284.21, 'duration': 1.601}, {'end': 11287.813, 'text': 'so we have google pixel black.', 'start': 11285.811, 'duration': 2.002}, {'end': 11295.22, 'text': "so we're getting this detailed product and now we have back to products, which is going to be a link that brings us back to products.", 'start': 11287.813, 'duration': 7.407}], 'summary': 'Demonstration of navigating through a detailed product, aiming for setup in next video.', 'duration': 31.605, 'max_score': 11263.615, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR411263615.jpg'}, {'end': 11843.112, 'src': 'embed', 'start': 11813.499, 'weight': 1, 'content': [{'end': 11816.341, 'text': 'So item ID is equal to ID.', 'start': 11813.499, 'duration': 2.842}, {'end': 11826.825, 'text': "because again all the products in our array will going to have the property of id, and if that product has the same id as we're passing in,", 'start': 11816.821, 'duration': 10.004}, {'end': 11828.686, 'text': 'we would want to return it now.', 'start': 11826.825, 'duration': 1.861}, {'end': 11837.189, 'text': "obviously we can write this as a one-liner, but maybe to be more precise and show people who maybe don't understand the one-liner,", 'start': 11828.686, 'duration': 8.503}, {'end': 11843.112, 'text': "i just like to return and now we're looking for the product, but again we could have wrote this exactly in one line.", 'start': 11837.189, 'duration': 5.923}], 'summary': 'Return product with matching id using one-liner code.', 'duration': 29.613, 'max_score': 11813.499, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR411813499.jpg'}, {'end': 12256.351, 'src': 'heatmap', 'start': 12027.883, 'weight': 1, 'content': [{'end': 12030.524, 'text': 'and we can end it with a footer.', 'start': 12027.883, 'duration': 2.641}, {'end': 12034.145, 'text': 'now again, if you really wanted to, you can wrap the whole component.', 'start': 12030.524, 'duration': 3.621}, {'end': 12039.966, 'text': "i'm just showing you that you have more than a few options whenever you're working with a product consumer.", 'start': 12034.145, 'duration': 5.821}, {'end': 12043.987, 'text': "so in this case, let's run the product consumer Now.", 'start': 12039.966, 'duration': 4.021}, {'end': 12046.568, 'text': 'like I said, I would want to move it where I have the footer.', 'start': 12043.987, 'duration': 2.581}, {'end': 12050.249, 'text': "So as you can see, I'm interested in this image container.", 'start': 12047.028, 'duration': 3.221}, {'end': 12054.05, 'text': "Now let me grab this and maybe let's add a little bit more space.", 'start': 12050.749, 'duration': 3.301}, {'end': 12056.37, 'text': "So I see exactly where I'm passing this.", 'start': 12054.57, 'duration': 1.8}, {'end': 12064.072, 'text': "And as we're going to navigate, where is the card footer? So right around the image container.", 'start': 12057.15, 'duration': 6.922}, {'end': 12066.653, 'text': 'Now we have the product consumer.', 'start': 12064.592, 'duration': 2.061}, {'end': 12074.18, 'text': 'Now, what we would want right now in the product consumer is, again, we would need to run it as a function.', 'start': 12067.493, 'duration': 6.687}, {'end': 12077.883, 'text': "Obviously, because this is the only way how we're going to access this.", 'start': 12074.88, 'duration': 3.003}, {'end': 12080.526, 'text': "So in this case, again, we're going to be looking for the value.", 'start': 12078.404, 'duration': 2.122}, {'end': 12081.987, 'text': "So I'm going to say value.", 'start': 12080.546, 'duration': 1.441}, {'end': 12086.071, 'text': 'And now in this case, we would again want to have some kind of return.', 'start': 12082.427, 'duration': 3.644}, {'end': 12091.156, 'text': 'Now, what are we returning? Well, in this case, this is just going to be plain old JSX.', 'start': 12086.791, 'duration': 4.365}, {'end': 12095.059, 'text': 'now. in our case, the difference is going to be very simple,', 'start': 12091.796, 'duration': 3.263}, {'end': 12103.225, 'text': "because what we're going to do is we're just going to grab all the div that has the image container and we're going to place it in our jsx.", 'start': 12095.059, 'duration': 8.166}, {'end': 12109.309, 'text': "so again, let me cut this out and let's go where we are returning the jsx and just like that.", 'start': 12103.225, 'duration': 6.084}, {'end': 12115.274, 'text': 'once we save it, we should have right now access to our value handle method.', 'start': 12109.309, 'duration': 5.965}, {'end': 12122.318, 'text': "now, in this case, as you can see, since i would want to run it when we're clicking on the container,", 'start': 12115.994, 'duration': 6.324}, {'end': 12130.384, 'text': "let me get rid of first of all this console log and let's change it, since we know that we have this method available in our value prop.", 'start': 12122.318, 'duration': 8.066}, {'end': 12134.046, 'text': 'remember, we added handle detail as well as we added add to cart.', 'start': 12130.384, 'duration': 3.662}, {'end': 12138.407, 'text': "So let's head back over to product.js and let's run value.", 'start': 12134.546, 'duration': 3.861}, {'end': 12145.809, 'text': "Now what we're looking for? Well, we have the handle details and let me make sure that I'm actually, the name is correct.", 'start': 12138.927, 'duration': 6.882}, {'end': 12148.129, 'text': 'It is handle detail, not details.', 'start': 12146.289, 'duration': 1.84}, {'end': 12149.53, 'text': 'So handle detail.', 'start': 12148.67, 'duration': 0.86}, {'end': 12155.351, 'text': 'However, here we would want to run what? Well, we would want to run it with an ID.', 'start': 12150.35, 'duration': 5.001}, {'end': 12161.213, 'text': 'Where are we getting the ID? Well, we did the destructuring from that particular product.', 'start': 12155.791, 'duration': 5.422}, {'end': 12165.494, 'text': "so, just like that, we're going to change this value to handle detail id now.", 'start': 12161.753, 'duration': 3.741}, {'end': 12172.617, 'text': "next i right away going to pass this add to cart, because we might as well do that, because later on who's going to use it anyway?", 'start': 12165.494, 'duration': 7.123}, {'end': 12183.081, 'text': "so again we can just do value and we're looking for add to cart and again in this case we're going to be passing id and if everything works correctly,", 'start': 12172.617, 'duration': 10.464}, {'end': 12190.764, 'text': "we should have our functionality when, as i click on the product, we're going to be guided to a products page.", 'start': 12183.081, 'duration': 7.683}, {'end': 12197.95, 'text': 'However, in this case we will going to be showing the info only about that particular product.', 'start': 12191.224, 'duration': 6.726}, {'end': 12201.073, 'text': "Now let's head over again to a bigger browser window.", 'start': 12198.531, 'duration': 2.542}, {'end': 12202.574, 'text': 'Let me refresh.', 'start': 12201.633, 'duration': 0.941}, {'end': 12204.056, 'text': "So we're starting the application.", 'start': 12202.714, 'duration': 1.342}, {'end': 12206.738, 'text': "And first of all, let's start back in our product.", 'start': 12204.616, 'duration': 2.122}, {'end': 12210.761, 'text': "So as you can see, I have multiple products and let's test it out.", 'start': 12207.318, 'duration': 3.443}, {'end': 12212.703, 'text': "Let's say with this iPhone 7.", 'start': 12210.802, 'duration': 1.901}, {'end': 12221.271, 'text': "and once we click on the item, i'm getting back the big fat error and now again let's figure out where is the error.", 'start': 12212.703, 'duration': 8.568}, {'end': 12224.914, 'text': 'i can see that in the product everything looks correctly.', 'start': 12221.271, 'duration': 3.643}, {'end': 12233.541, 'text': 'however, it is complaining right now that it cannot find it actually in the details jazz, which is interesting because we know that it worked before.', 'start': 12224.914, 'duration': 8.627}, {'end': 12236.023, 'text': 'remember we were passing the id.', 'start': 12233.541, 'duration': 2.482}, {'end': 12237.445, 'text': "so probably let's figure out.", 'start': 12236.023, 'duration': 1.422}, {'end': 12246.309, 'text': 'maybe in the context i did some kind of mistake and sure enough, as you can see, that with a handle detail, i forgot to pass the id.', 'start': 12237.445, 'duration': 8.864}, {'end': 12250.53, 'text': "so once we're getting the item, i obviously need to pass this id.", 'start': 12246.309, 'duration': 4.221}, {'end': 12254.391, 'text': 'so now everything should work correctly and hopefully it does.', 'start': 12250.53, 'duration': 3.861}, {'end': 12256.351, 'text': "so let's keep our fingers crossed.", 'start': 12254.391, 'duration': 1.96}], 'summary': 'Demonstration of working with product consumer and fixing errors in accessing product details.', 'duration': 228.468, 'max_score': 12027.883, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR412027883.jpg'}], 'start': 10524.597, 'title': 'Web ui design and implementation', 'summary': "Covers ui layout creation, image and text addition, and 'add to cart' button functionality using divs, classes, and styled components in react, emphasizing layout adjustments, product detail page implementation, and conditional rendering.", 'chapters': [{'end': 10625.531, 'start': 10524.597, 'title': 'Ui design code structure', 'summary': 'Explains the process of creating a ui layout with specific column spans and layout adjustments for different screen sizes, emphasizing the need for image placement and text formatting.', 'duration': 100.934, 'highlights': ['The chapter emphasizes the process of creating a UI layout with specific column spans and layout adjustments for different screen sizes, focusing on image placement and text formatting.', 'The column for the image is designed to span 10 columns wide on extra small screens and 6 columns wide on medium screens, with mx auto and a margin top bottom of three, and text capitalize applied.']}, {'end': 11218.908, 'start': 10626.091, 'title': 'Adding image and text to webpage', 'summary': 'Details the process of adding an image and text to a webpage using divs, classes, and variables in react. it covers the steps for adding an image, setting class names, adding text, working with headings, displaying company information, setting the price, adding product info, and creating buttons for navigation and adding items to the cart.', 'duration': 592.817, 'highlights': ["The process of adding an image and text to a webpage using divs, classes, and variables in React The chapter describes the steps for adding an image to a webpage, utilizing the 'image' variable as the image source, and applying the 'image fluid' class from Bootstrap to ensure the image stays within the div.", "Working with headings, displaying company information, and setting the price It covers the process of working with headings such as 'heading one' and 'heading four', utilizing classes from Bootstrap like 'text uppercase' and 'text muted', and displaying the company name and price retrieved from variables.", "Adding product info and creating buttons for navigation and adding items to the cart The chapter explains the process of adding product information, using classes like 'text capitalize' and 'text muted' for styling, and creating buttons for navigation using links and for adding items to the cart, including enabling or disabling the button based on whether the item is in the cart."]}, {'end': 11520.075, 'start': 11219.449, 'title': 'Styling add to cart button with styled components', 'summary': "Discusses adding functionality to the 'add to cart' button, including displaying the item's id, configuring the button color with styled components, and conditional rendering based on passed props.", 'duration': 300.626, 'highlights': ["The chapter discusses adding functionality to the 'add to cart' button The chapter covers adding functionality to the 'add to cart' button to display the item's ID and configure the button color using styled components.", 'Configuring the button color with styled components The chapter explains how to configure the button color using styled components, including passing props and conditional rendering to change the button color based on the passed prop.', "Displaying the item's ID The chapter demonstrates how to display the item's ID when adding it to the cart, utilizing template literals to access and print the ID."]}, {'end': 12278.813, 'start': 11520.075, 'title': 'Styling components and implementing product detail page', 'summary': 'Covers the implementation of styling components with conditional rendering and the setup of a product detail page using a method to retrieve specific items by id, and the utilization of the handle detail method to display product information on clicking the image container.', 'duration': 758.738, 'highlights': ['The chapter covers the implementation of styling components with conditional rendering The transcript discusses the necessity of semicolons in style components to avoid breaking and demonstrates the conditional rendering of border and color based on the prop passed, showcasing the implementation of styling components with conditional rendering.', "Setup of a product detail page using a method to retrieve specific items by ID The method 'getItem' is introduced to retrieve a product by its ID, ensuring reusability and ease of access, as well as the utilization of 'get item' method within the 'handle detail' method to fetch the specific product based on the ID, facilitating the setup of a product detail page using a method to retrieve specific items by ID.", "Utilization of the handle detail method to display product information on clicking the image container The usage of 'handle detail' method is demonstrated to switch the detail product to the selected product on clicking the image container, showcasing the utilization of the 'handle detail' method to display product information on clicking the image container."]}], 'duration': 1754.216, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR410524597.jpg', 'highlights': ['The chapter emphasizes the process of creating a UI layout with specific column spans and layout adjustments for different screen sizes, focusing on image placement and text formatting.', "The process of adding an image and text to a webpage using divs, classes, and variables in React The chapter describes the steps for adding an image to a webpage, utilizing the 'image' variable as the image source, and applying the 'image fluid' class from Bootstrap to ensure the image stays within the div.", "The chapter discusses adding functionality to the 'add to cart' button The chapter covers adding functionality to the 'add to cart' button to display the item's ID and configure the button color using styled components.", 'The chapter covers the implementation of styling components with conditional rendering The transcript discusses the necessity of semicolons in style components to avoid breaking and demonstrates the conditional rendering of border and color based on the prop passed, showcasing the implementation of styling components with conditional rendering.']}, {'end': 13858.885, 'segs': [{'end': 12344.586, 'src': 'embed', 'start': 12321.551, 'weight': 1, 'content': [{'end': 12329.555, 'text': "So we're gonna again say let, and we're gonna be looking for temp, So temp products, this is going to be the name of the array.", 'start': 12321.551, 'duration': 8.004}, {'end': 12334.519, 'text': "And in this case, we're going to restructure whatever product we have in the state.", 'start': 12330.276, 'duration': 4.243}, {'end': 12337.161, 'text': 'So this.state and product.', 'start': 12335.019, 'duration': 2.142}, {'end': 12342.024, 'text': 'So this is going to give us the access to all the products that are in the state.', 'start': 12337.741, 'duration': 4.283}, {'end': 12344.586, 'text': 'And now I would want to find the index.', 'start': 12342.845, 'duration': 1.741}], 'summary': 'Restructure and access products from state to find index.', 'duration': 23.035, 'max_score': 12321.551, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR412321551.jpg'}, {'end': 12438.457, 'src': 'embed', 'start': 12407.228, 'weight': 0, 'content': [{'end': 12414.494, 'text': "So that way, the way we're going to set it up is price is going to be equal to 10 and total is going to be equal to whatever the price is.", 'start': 12407.228, 'duration': 7.266}, {'end': 12422.581, 'text': "So that way you can always change the total by changing the price and they're not connected, both of them together.", 'start': 12415.015, 'duration': 7.566}, {'end': 12425.243, 'text': 'Now back to the context.js.', 'start': 12423.221, 'duration': 2.022}, {'end': 12426.204, 'text': 'Like I said,', 'start': 12425.744, 'duration': 0.46}, {'end': 12438.457, 'text': "the reason why we're looking for the index instead of just finding the product which we could do since we're going to have the access to the ID is the fact that if you're going to do it without the index,", 'start': 12426.204, 'duration': 12.253}], 'summary': 'Setting price to 10, total equals price, allowing independent changes.', 'duration': 31.229, 'max_score': 12407.228, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR412407228.jpg'}, {'end': 12940.049, 'src': 'heatmap', 'start': 12705.894, 'weight': 0.712, 'content': [{'end': 12709.615, 'text': "And we're going to say within the array function, we would want to return.", 'start': 12705.894, 'duration': 3.721}, {'end': 12713.817, 'text': "I don't know why I keep calling this right now array function since this is an arrow function.", 'start': 12710.115, 'duration': 3.702}, {'end': 12716.938, 'text': 'My apologies, I know that for some reason I started doing that.', 'start': 12714.317, 'duration': 2.621}, {'end': 12720.66, 'text': "So anyway, so we're going to write return and what we're returning.", 'start': 12716.978, 'duration': 3.682}, {'end': 12724.101, 'text': 'Well, first of all, I would want to change the products,', 'start': 12721.24, 'duration': 2.861}, {'end': 12731.124, 'text': "since I changed this item in my temporary products array and I'm going to set my products equal to a temp product.", 'start': 12724.101, 'duration': 7.023}, {'end': 12732.425, 'text': 'So that would be the first thing.', 'start': 12731.364, 'duration': 1.061}, {'end': 12737.326, 'text': "now, once i'm done changing the products in my state.", 'start': 12732.885, 'duration': 4.441}, {'end': 12742.267, 'text': 'next i would want to add this specific product to the actual card.', 'start': 12737.326, 'duration': 4.941}, {'end': 12746.668, 'text': "what we're going to do is we're going to target this property and then we're going to set it equal to.", 'start': 12742.267, 'duration': 4.401}, {'end': 12748.768, 'text': "well, what we're going to set it equal to?", 'start': 12746.668, 'duration': 2.1}, {'end': 12750.949, 'text': "first of all, we're going to say this dot state.", 'start': 12748.768, 'duration': 2.181}, {'end': 12754.89, 'text': "so we're looking for the card and now i would want the card values.", 'start': 12750.949, 'duration': 3.941}, {'end': 12757.07, 'text': 'however, i would want to destructure them.', 'start': 12754.89, 'duration': 2.18}, {'end': 12760.791, 'text': "so i'm going to say three dots and now i'm the structuring everything that's in the card.", 'start': 12757.07, 'duration': 3.721}, {'end': 12764.294, 'text': "Now, obviously the first time, there's not going to be nothing in a cart.", 'start': 12761.751, 'duration': 2.543}, {'end': 12765.875, 'text': "So there's going to be zero.", 'start': 12764.814, 'duration': 1.061}, {'end': 12773.641, 'text': "However, later on, as we're adding more and more items, we will going to destructure them and we're going to place them in the cart property.", 'start': 12765.935, 'duration': 7.706}, {'end': 12775.443, 'text': "So again, basically what we're doing?", 'start': 12774.002, 'duration': 1.441}, {'end': 12784.37, 'text': "we're just adding the current items back to the same cart as well as we would want to add the product where we have run the add to cart method.", 'start': 12775.443, 'duration': 8.927}, {'end': 12789.595, 'text': 'So once we save it, if everything is correct, two things should be happening.', 'start': 12784.951, 'duration': 4.644}, {'end': 12793.72, 'text': 'First of all we should be changing the values for these buttons.', 'start': 12790.075, 'duration': 3.645}, {'end': 12796.022, 'text': 'So this should be changing to the end card.', 'start': 12794.18, 'duration': 1.842}, {'end': 12802.41, 'text': 'As well as we should be getting the values from the card added to the actual card.', 'start': 12796.663, 'duration': 5.747}, {'end': 12805.714, 'text': "Now in order to test this let's run the callback function.", 'start': 12802.951, 'duration': 2.763}, {'end': 12809.939, 'text': 'So right after we call this method or we call the function.', 'start': 12806.114, 'duration': 3.825}, {'end': 12815.083, 'text': 'i would want to run the callback function and this is going to be a arrow function.', 'start': 12810.439, 'duration': 4.644}, {'end': 12819.426, 'text': "so in this case i would just want to console log and what we're going to console log?", 'start': 12815.083, 'duration': 4.343}, {'end': 12824.53, 'text': "well, we're just going to console log this dot state, just so we can see the changes that we are doing.", 'start': 12819.426, 'duration': 5.104}, {'end': 12831.375, 'text': "so finally, once we have said everything, let's notice what's going to happen right now, as we're working with the product.", 'start': 12824.53, 'duration': 6.845}, {'end': 12836.541, 'text': 'so once i click in the cart, notice i have added the item in a cart.', 'start': 12831.895, 'duration': 4.646}, {'end': 12842.127, 'text': "so first of all my button is changed, so i cannot do anything as well as if i'm going to go to details.", 'start': 12836.541, 'duration': 5.586}, {'end': 12843.829, 'text': "also, i'm going to have this in cart.", 'start': 12842.127, 'duration': 1.702}, {'end': 12851.679, 'text': "so again, that's the reason why we set up this in cart, in both of the details as well as the actual products,", 'start': 12843.829, 'duration': 7.85}, {'end': 12856.503, 'text': "because right now it is added to the cart and there's nothing we can do about it.", 'start': 12852.159, 'duration': 4.344}, {'end': 12863.208, 'text': 'so basically it is added to the cart and from now on we can just control the values that are actually in the cart.', 'start': 12856.503, 'duration': 6.705}, {'end': 12864.91, 'text': 'so that would be the first thing.', 'start': 12863.208, 'duration': 1.702}, {'end': 12869.534, 'text': "and the second thing, let's check out the actual state that we're console logging.", 'start': 12864.91, 'duration': 4.624}, {'end': 12872.476, 'text': "as you can see first of all we're getting back the object.", 'start': 12869.534, 'duration': 2.942}, {'end': 12875.439, 'text': 'now, as you can see, first i have the cart.', 'start': 12872.476, 'duration': 2.963}, {'end': 12877.3, 'text': "so there's only one item in the cart.", 'start': 12875.439, 'duration': 1.861}, {'end': 12880.303, 'text': "i believe so, because that's the only one item that we added.", 'start': 12877.3, 'duration': 3.003}, {'end': 12882.444, 'text': 'so, as you can see, i have the id.', 'start': 12880.823, 'duration': 1.621}, {'end': 12887.226, 'text': 'i have the title, image, price and company and obviously everything else.', 'start': 12882.444, 'duration': 4.782}, {'end': 12894.929, 'text': "now the second one is going to be detail product and then i'm looking for the product, since obviously in the products i changed it.", 'start': 12887.226, 'duration': 7.703}, {'end': 12897.431, 'text': 'now let me look for the id of three.', 'start': 12894.929, 'duration': 2.502}, {'end': 12902.193, 'text': 'so within the id of three i should have the in cart value of true.', 'start': 12897.431, 'duration': 4.762}, {'end': 12905.474, 'text': 'right now, price is eight and the total is eight.', 'start': 12902.193, 'duration': 3.281}, {'end': 12909.336, 'text': 'so those are the things that we changed again in our product.', 'start': 12905.474, 'duration': 3.862}, {'end': 12911.578, 'text': "Now again I'm going to repeat myself.", 'start': 12909.936, 'duration': 1.642}, {'end': 12914.501, 'text': "You don't have to technically use the index.", 'start': 12912.198, 'duration': 2.303}, {'end': 12918.304, 'text': 'However, the issue is going to be, you will going to change this value.', 'start': 12915.061, 'duration': 3.243}, {'end': 12921.688, 'text': 'You will going to change it here in the product.', 'start': 12918.384, 'duration': 3.304}, {'end': 12924.29, 'text': 'And then the product is going to go all the way to the end.', 'start': 12922.068, 'duration': 2.222}, {'end': 12930.836, 'text': 'So again, that was my solution by just getting the index and then changing these values just like that.', 'start': 12924.811, 'duration': 6.025}, {'end': 12940.049, 'text': "Now I can tell you right away we're not going to be doing any kind of setting up in the local storage for very, very simple reason.", 'start': 12931.577, 'duration': 8.472}], 'summary': 'The transcript discusses adding products to a cart, updating state, and logging changes in the console.', 'duration': 234.155, 'max_score': 12705.894, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR412705894.jpg'}, {'end': 12746.668, 'src': 'embed', 'start': 12716.978, 'weight': 2, 'content': [{'end': 12720.66, 'text': "So anyway, so we're going to write return and what we're returning.", 'start': 12716.978, 'duration': 3.682}, {'end': 12724.101, 'text': 'Well, first of all, I would want to change the products,', 'start': 12721.24, 'duration': 2.861}, {'end': 12731.124, 'text': "since I changed this item in my temporary products array and I'm going to set my products equal to a temp product.", 'start': 12724.101, 'duration': 7.023}, {'end': 12732.425, 'text': 'So that would be the first thing.', 'start': 12731.364, 'duration': 1.061}, {'end': 12737.326, 'text': "now, once i'm done changing the products in my state.", 'start': 12732.885, 'duration': 4.441}, {'end': 12742.267, 'text': 'next i would want to add this specific product to the actual card.', 'start': 12737.326, 'duration': 4.941}, {'end': 12746.668, 'text': "what we're going to do is we're going to target this property and then we're going to set it equal to.", 'start': 12742.267, 'duration': 4.401}], 'summary': 'Updating products in state and adding a specific product to the cart.', 'duration': 29.69, 'max_score': 12716.978, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR412716978.jpg'}, {'end': 13452.217, 'src': 'embed', 'start': 13426.801, 'weight': 3, 'content': [{'end': 13435.547, 'text': 'now, before we start setting up the actual model, i would want to do a little bit of spring cleaning, because if everything is correct,', 'start': 13426.801, 'duration': 8.746}, {'end': 13440.391, 'text': "we shouldn't be anymore using the data, unless maybe we want to check something there.", 'start': 13435.547, 'duration': 4.844}, {'end': 13443.413, 'text': "then for sure, we're done with details as well as product.", 'start': 13440.391, 'duration': 3.022}, {'end': 13452.217, 'text': 'now let me open up the sidebar and as you can see within the components folder, i would want to create another component.', 'start': 13444.033, 'duration': 8.184}], 'summary': 'Preparing to set up the model, cleaning data and creating a new component.', 'duration': 25.416, 'max_score': 13426.801, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR413426801.jpg'}], 'start': 12279.373, 'title': 'Building e-commerce functionality', 'summary': 'Focuses on restructuring the product array, updating properties, and implementing add to cart functionality. it also details the rationale for using index instead of find in a react app and covers working on the model component and creating/rendering a modal component.', 'chapters': [{'end': 12426.204, 'start': 12279.373, 'title': 'Building add to cart functionality', 'summary': 'Focuses on setting up the add to cart functionality by restructuring the product array, updating properties like in cart, count, and total, and ensuring that the total is not directly connected to the price, in order to facilitate future price changes.', 'duration': 146.831, 'highlights': ['The chapter focuses on restructuring the product array, updating properties like in cart, count, and total, and ensuring that the total is not directly connected to the price, in order to facilitate future price changes.', 'The logic involves finding the index of the product in the array, updating properties such as in cart, count, and setting total equal to the price for each item added to the cart.', "The temporary product array 'tempProducts' is created to restructure the state's product array, allowing for easier handling of properties like in cart, count, and total."]}, {'end': 12961.034, 'start': 12426.204, 'title': 'Using index instead of find', 'summary': 'Explains the rationale for using the index instead of find to access and modify products in a react app, detailing the process of finding, accessing, and modifying product properties using the index, and the significance of these changes in the app.', 'duration': 534.83, 'highlights': ['Explanation of using index instead of find to access and modify products in a React app The speaker explains the reason for using the index instead of find to access and modify products in a React app, ensuring that the product is displayed in the correct position and avoiding unintended changes in the product array.', 'Process of finding, accessing, and modifying product properties using the index The transcript details the process of finding the index of the product using the indexOf method, accessing the product using the getItem method, and modifying product properties based on the index.', 'Significance of changes in the app due to using index instead of find The speaker emphasizes the significance of using the index instead of find to ensure that the product is displayed in the correct position and that the changes made to the product properties are accurately reflected in the app.']}, {'end': 13443.413, 'start': 12961.034, 'title': 'Working on model component', 'summary': 'Covers the process of adding items to the cart, updating the cart array, and implementing methods for opening and closing the model component, with a demonstration of integrating these methods into the product and detail components.', 'duration': 482.379, 'highlights': ['Demonstrating the process of adding items to the cart and updating the cart array. Cart array updates from containing one item to two items.', "Setting up methods for opening and closing the model component. Methods 'open modal' and 'close modal' are created to handle the opening and closing of the model component.", "Integrating the created methods into the product and detail components. The 'open modal' method is integrated into both the product and detail components to enable the opening of the model component."]}, {'end': 13858.885, 'start': 13444.033, 'title': 'Creating and rendering a modal component', 'summary': "Details the process of creating a modal component, importing it into app.js, and setting up conditional rendering based on the state property 'modal open', ensuring the modal is displayed only when the property is true.", 'duration': 414.852, 'highlights': ["The chapter details the process of creating a modal component, importing it into app.js, and setting up conditional rendering based on the state property 'modal open', ensuring the modal is displayed only when the property is true. Creating modal component, importing into app.js, conditional rendering based on 'modal open' state property", "The modal component is imported into app.js for rendering, and conditional rendering is set up based on the 'modal open' state property. Importing modal component into app.js, setting up conditional rendering", "The process of conditional rendering for the modal component based on the 'modal open' state property is explained, ensuring it is displayed only when the property is true. Conditional rendering based on 'modal open' state property"]}], 'duration': 1579.512, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR412279373.jpg', 'highlights': ['Restructure product array, update properties like in cart, count, and total', 'Use index instead of find in a React app to access and modify products', 'Demonstrate adding items to the cart and updating the cart array', 'Create modal component, import into app.js, and set up conditional rendering']}, {'end': 15084.244, 'segs': [{'end': 13942.887, 'src': 'embed', 'start': 13919.352, 'weight': 0, 'content': [{'end': 13927.837, 'text': "so first we're going to start with a container, then we're looking for the row and within the row we'll first have a few things.", 'start': 13919.352, 'duration': 8.485}, {'end': 13935.563, 'text': "so first of all there's going to be a column, so I'm going to say column that is going to be spanning your columns wide on a small screen.", 'start': 13927.837, 'duration': 7.726}, {'end': 13942.887, 'text': "then we're looking for the column that is spanning six columns wide on the medium screen as well as on a large screen.", 'start': 13935.563, 'duration': 7.324}], 'summary': 'Using a container, we have a column spanning 6 columns wide on medium and large screens.', 'duration': 23.535, 'max_score': 13919.352, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR413919352.jpg'}, {'end': 13993.763, 'src': 'embed', 'start': 13970.376, 'weight': 1, 'content': [{'end': 13977.024, 'text': 'item added added to the cart, to the cart.', 'start': 13970.376, 'duration': 6.648}, {'end': 13980.168, 'text': 'just like that, we should have our model displayed.', 'start': 13977.024, 'duration': 3.144}, {'end': 13984.993, 'text': 'however, as you can see in the line 18, it is complaining.', 'start': 13980.168, 'duration': 4.825}, {'end': 13986.775, 'text': 'and why it is complaining?', 'start': 13984.993, 'duration': 1.782}, {'end': 13993.763, 'text': "well, because i'm not returning jsx right, so i'm doing the else, but i haven't set up my actual proper return.", 'start': 13986.775, 'duration': 6.988}], 'summary': 'Model not displayed due to jsx return issue at line 18.', 'duration': 23.387, 'max_score': 13970.376, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR413970376.jpg'}, {'end': 14113.119, 'src': 'embed', 'start': 14084.263, 'weight': 3, 'content': [{'end': 14085.904, 'text': 'second, i would want to add some background.', 'start': 14084.263, 'duration': 1.641}, {'end': 14092.449, 'text': "so i'm going to say background, and now we're looking for rgba and you know what we don't need to put it in parentheses,", 'start': 14085.904, 'duration': 6.545}, {'end': 14099.795, 'text': "my bad rgba and for the values, we're going to have 0, 0, 0 and 0.3.", 'start': 14092.449, 'duration': 7.346}, {'end': 14104.337, 'text': "so these are going to be the values, And now let's check it out what we're going to have for a model.", 'start': 14099.795, 'duration': 4.542}, {'end': 14106.437, 'text': "So what's first of all is going to be our setup.", 'start': 14104.677, 'duration': 1.76}, {'end': 14108.758, 'text': 'Now as you can see we are getting somewhere.', 'start': 14107.097, 'duration': 1.661}, {'end': 14111.238, 'text': 'Notice we have this item added to the cart.', 'start': 14109.158, 'duration': 2.08}, {'end': 14113.119, 'text': 'So far so good.', 'start': 14111.958, 'duration': 1.161}], 'summary': 'Discussion on adding background color with rgba values of 0, 0, 0, and 0.3, and progress in setting up a model and adding items to cart.', 'duration': 28.856, 'max_score': 14084.263, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR414084263.jpg'}, {'end': 14605.527, 'src': 'embed', 'start': 14573.66, 'weight': 4, 'content': [{'end': 14576.202, 'text': "We're using the get item again to get the product.", 'start': 14573.66, 'duration': 2.542}, {'end': 14578.864, 'text': "And then we're setting the modal product.", 'start': 14576.722, 'duration': 2.142}, {'end': 14582.767, 'text': 'and, as you can see, just like that we actually do have a mistake.', 'start': 14579.504, 'duration': 3.263}, {'end': 14585.349, 'text': 'it is not product, it is product.', 'start': 14582.767, 'duration': 2.582}, {'end': 14589.513, 'text': "so modal product is set equal to the product that we're getting back.", 'start': 14585.349, 'duration': 4.164}, {'end': 14592.435, 'text': "and here we're going to say modal open is going to be true.", 'start': 14589.513, 'duration': 2.922}, {'end': 14593.877, 'text': 'now for the closed model.', 'start': 14592.435, 'duration': 1.442}, {'end': 14600.703, 'text': 'hopefully i did not mess this one up, because this is very straightforward and here we just have the modal open is set to false.', 'start': 14593.877, 'duration': 6.826}, {'end': 14605.527, 'text': "so again, let me save this and let's see how it looks like in the bigger browser window.", 'start': 14600.703, 'duration': 4.824}], 'summary': 'Using getitem to retrieve product, setting modal product, and toggling modal open/closed.', 'duration': 31.867, 'max_score': 14573.66, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR414573660.jpg'}], 'start': 13858.885, 'title': 'Styling modal containers and cart component setup', 'summary': 'Discusses creating and styling modal containers using styled components, achieving a visually appealing layout and improved functionality. it also covers setting up a cart component with properties, methods, and ui functionality for an e-commerce platform.', 'chapters': [{'end': 13970.376, 'start': 13858.885, 'title': 'Creating modal container with styled components', 'summary': 'Discusses creating a modal container with styled components, setting up a container, row, and columns, and adding specific styles to the elements for bootstrap integration.', 'duration': 111.491, 'highlights': ['The chapter discusses creating a modal container with styled components The transcript focuses on the process of creating a modal container using styled components, demonstrating the use of styled and const to define the modal container.', 'Setting up a container, row, and columns The speaker outlines the process of setting up a container, row, and columns, specifying the width of columns on different screen sizes, demonstrating the use of Bootstrap classes.', 'Adding specific styles to the elements for bootstrap integration The chapter includes adding specific styles to the elements, such as centering the text and capitalizing it, and adding a heading 5 element.']}, {'end': 14270.937, 'start': 13970.376, 'title': 'Modal container styling', 'summary': 'Discusses the process of setting up a modal container and styling it with position, background, display flex, and class names, achieving a centered and visually appealing layout for the model.', 'duration': 300.561, 'highlights': ["The modal container is styled with the 'position: fixed' property, taking up the entire page, with a background set to 'rgba(0, 0, 0, 0.3)', creating the initial setup for the model.", "Applying 'display: flex' and aligning items and content to the center vertically and horizontally enhances the layout, ensuring the model is visually centered.", "Setting the background of the modal using the 'main white' variable ensures the model has a visually appealing white color, completing the styled component.", "Adding the 'Image Fluid' bootstrap class to the image ensures it fits within the container and setting the alternative text to 'product' provides accessibility for the image."]}, {'end': 14666.785, 'start': 14271.438, 'title': 'Styling and functionality adjustments in e-commerce modal', 'summary': "Discusses making styling adjustments for padding and text size, configuring links and buttons for 'continue shopping' and 'go to cart', and correcting the modal open/close functionality, leading to an improved modal display in the e-commerce platform.", 'duration': 395.347, 'highlights': ['Styling adjustments made for padding and text size along with class names in the model for better display and functionality.', "Configuration of 'continue shopping' and 'go to cart' links with corresponding button containers and functions to guide users, providing a seamless shopping experience.", 'Correction of modal open/close functionality, ensuring that the modal opens and closes as intended, leading to an improved user experience.', 'Use of React DevTools and product provider to check and enhance the functionality of the e-commerce platform.']}, {'end': 15084.244, 'start': 14667.265, 'title': 'Setting up cart component', 'summary': 'Discusses setting up the cart component, including adding properties and methods to the state, and preparing for ui setup and functionality, with a focus on increment, decrement, remove item, and clear cart methods.', 'duration': 416.979, 'highlights': ['The cart component is the last component to be set up for the phone shopping cart, and it involves adding properties like sub total, tax, and total to the state. The cart component is the final element required for the phone shopping cart, and it includes setting properties such as sub total, tax, and total in the state.', 'Methods like incrementation, decrementation, removing an item, and clearing the cart are added as placeholders in the cart component to prepare for future functionality. Placeholder methods for incrementing, decrementing, removing an item, and clearing the cart are added to the cart component to facilitate future functionality.', 'The process involves obtaining the methods from the context.js and making them available in the consumer for easier UI setup and method passing. The methods from the context.js are obtained and made available in the consumer to streamline UI setup and method passing.']}], 'duration': 1225.359, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR413858885.jpg', 'highlights': ['The chapter discusses creating a modal container with styled components using styled and const to define the modal container.', 'Setting up a container, row, and columns with specified width and Bootstrap classes.', "Styling the modal container with 'position: fixed', 'display: flex', and 'main white' variable for visually appealing layout.", "Configuring 'continue shopping' and 'go to cart' links with corresponding button containers and functions for a seamless shopping experience.", 'Adding properties like sub total, tax, and total to the state in the cart component for the phone shopping cart.']}, {'end': 16502.198, 'segs': [{'end': 15128.706, 'src': 'embed', 'start': 15103.897, 'weight': 0, 'content': [{'end': 15113.663, 'text': "we're going to create a new folder within the components and the folder name is going to be no other than the cart folder.", 'start': 15103.897, 'duration': 9.766}, {'end': 15121.465, 'text': "within the cart folder, i would right away want to have my cart.js and the moment i'm going to move the cart.js,", 'start': 15113.663, 'duration': 7.802}, {'end': 15128.706, 'text': "what's going to happen is that my application is going to break because obviously, if i'm looking in my app.js,", 'start': 15121.465, 'duration': 7.241}], 'summary': "Creating a new folder named 'cart' within the components.", 'duration': 24.809, 'max_score': 15103.897, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR415103897.jpg'}, {'end': 15241.127, 'src': 'embed', 'start': 15214.942, 'weight': 4, 'content': [{'end': 15221.69, 'text': "so here within the cart, we're going to create another file and the name is going to be package json.", 'start': 15214.942, 'duration': 6.748}, {'end': 15226.996, 'text': "now, within the package json, we're going to set our main file to be cart js.", 'start': 15221.69, 'duration': 5.306}, {'end': 15229.68, 'text': "so i'm going to say main is going to be equal to cart.", 'start': 15226.996, 'duration': 2.684}, {'end': 15234.403, 'text': "Now what we're going to do right now is we're going to restart the server.", 'start': 15231.381, 'duration': 3.022}, {'end': 15241.127, 'text': "So first let's stop the server and then let's do again npm start and just like that.", 'start': 15234.803, 'duration': 6.324}], 'summary': 'Creating package.json with main file cart.js, restarting server.', 'duration': 26.185, 'max_score': 15214.942, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR415214942.jpg'}, {'end': 15616.06, 'src': 'embed', 'start': 15585.411, 'weight': 3, 'content': [{'end': 15586.753, 'text': 'And let me grab this div.', 'start': 15585.411, 'duration': 1.342}, {'end': 15591.199, 'text': "And let's say one, two, three, four, five.", 'start': 15587.634, 'duration': 3.565}, {'end': 15593.001, 'text': 'So now I have six of them.', 'start': 15591.78, 'duration': 1.221}, {'end': 15596.565, 'text': "and let's save this, and obviously we cannot see it right now here.", 'start': 15593.562, 'duration': 3.003}, {'end': 15600.368, 'text': "either way, even if we're going to go to the store, we're not going to see the columns.", 'start': 15596.565, 'duration': 3.803}, {'end': 15607.473, 'text': 'so what i would want right now is go to a recording to the bigger screen and sure enough, as you can see, we have products, products, products,', 'start': 15600.368, 'duration': 7.105}, {'end': 15610.736, 'text': 'and just to double check, we can go to the cart and as you can see,', 'start': 15607.473, 'duration': 3.263}, {'end': 15616.06, 'text': 'nothing is going to be shown here because we have display of none and then display large block.', 'start': 15610.736, 'duration': 5.324}], 'summary': 'Six divs created, products displayed on larger screen', 'duration': 30.649, 'max_score': 15585.411, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR415585411.jpg'}, {'end': 15886.446, 'src': 'embed', 'start': 15860.747, 'weight': 1, 'content': [{'end': 15866.051, 'text': 'And this conditional rendering is going to be based on whether I have any items in the cart.', 'start': 15860.747, 'duration': 5.304}, {'end': 15873.078, 'text': 'So how I can get the items in a cart? Well, remember we have the context where we have the product consumer.', 'start': 15866.992, 'duration': 6.086}, {'end': 15879.484, 'text': "So in this case, let's get the product consumer and we need to import it as a product.", 'start': 15873.678, 'duration': 5.806}, {'end': 15884.225, 'text': "consumer and we're importing from where.", 'start': 15880.962, 'duration': 3.263}, {'end': 15885.566, 'text': 'well, from context.', 'start': 15884.225, 'duration': 1.341}, {'end': 15886.446, 'text': 'so two dots.', 'start': 15885.566, 'duration': 0.88}], 'summary': 'Conditional rendering based on the presence of items in the cart, using product consumer context.', 'duration': 25.699, 'max_score': 15860.747, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR415860747.jpg'}, {'end': 16403.085, 'src': 'embed', 'start': 16373.46, 'weight': 2, 'content': [{'end': 16380.385, 'text': "so this is going to be the props that we're getting now as well as we're going to set up the const, and this is going to be equal to the cart,", 'start': 16373.46, 'duration': 6.925}, {'end': 16389.973, 'text': "because what we're interested is the actual cart in the value, since we don't want to use the value.cart and then do the map instead,", 'start': 16380.385, 'duration': 9.588}, {'end': 16395.919, 'text': "we're just going to look for the actual variable, and this is going to be located in the value.", 'start': 16389.973, 'duration': 5.946}, {'end': 16403.085, 'text': "and since obviously we're already destructuring the value right out of the props, then sure enough we have access to it.", 'start': 16395.919, 'duration': 7.166}], 'summary': 'Setting up const equal to the cart from props for direct access.', 'duration': 29.625, 'max_score': 16373.46, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR416373460.jpg'}], 'start': 15084.744, 'title': 'Setting up cart component and optimizing display in react', 'summary': 'Includes setting up the cart component, creating a responsive web layout, and optimizing the cart display with conditional rendering, resulting in an efficient and user-friendly interface.', 'chapters': [{'end': 15286.236, 'start': 15084.744, 'title': 'Setting up cart component in react', 'summary': 'Describes setting up the cart component in react by creating a new folder, defining the main file in package.json, and restarting the server, resolving import issues and improving file structure.', 'duration': 201.492, 'highlights': ['Creating a new folder within components named cart and defining cart.js as the main file in package.json resolves import issues and improves file structure. Creating a new folder within the components and defining cart.js as the main file in package.json resolves import issues and improves file structure.', 'Setting up placeholders for component methods and UI before finishing functionality streamlines the development process. Setting up placeholders for component methods and UI before finishing functionality streamlines the development process.', 'Restarting the server after defining cart.js as the main file in package.json resolves all import issues. Restarting the server after defining cart.js as the main file in package.json resolves all import issues.']}, {'end': 15455.312, 'start': 15286.856, 'title': 'Setting up cart title and columns', 'summary': "Covers setting up the title 'your cart' and creating the cart columns component in cart.js. the title 'your cart' is added to the cart page, and the cart columns component is set up in the cart component.", 'duration': 168.456, 'highlights': ["The title 'Your Cart' is added to the cart page The title 'Your Cart' is set up within the cart component by importing the title and specifying the name 'Your' for the title.", "Setting up the cart columns component The process of setting up the cart columns component is covered, including importing 'cart columns' and creating the component as a functional component using bootstrap classes."]}, {'end': 15650.516, 'start': 15455.852, 'title': 'Creating responsive web layout', 'summary': 'Covers creating a responsive web layout using container fluid, setting display properties for different screen sizes, and structuring columns for product display and details.', 'duration': 194.664, 'highlights': ['Using container fluid to utilize the whole screen and text center for center alignment. The chapter emphasizes the use of container fluid to maximize screen utilization and text center for center alignment.', 'Setting display properties for different screen sizes and structuring columns for product display and details. The chapter explains the use of display properties to control visibility for different screen sizes and the structuring of columns for product display and details.', 'Defining column widths for different screen sizes and content placement within the columns. Detailed explanation of defining column widths for different screen sizes and placing content within the columns.']}, {'end': 15977.186, 'start': 15651.297, 'title': 'Optimizing cart display and conditional rendering', 'summary': 'Covers optimizing the cart display by removing unnecessary columns and implementing conditional rendering based on the cart contents using context, resulting in a more efficient and user-friendly interface.', 'duration': 325.889, 'highlights': ['Optimizing the cart display by removing unnecessary columns like name and price, resulting in a more streamlined and user-friendly interface.', 'Implementing conditional rendering based on the cart contents using context, allowing for a more efficient rendering of the cart interface.', "Creating a new component 'empty cart' for conditional rendering when the cart is empty, enhancing the user experience with a clear indication of an empty cart."]}, {'end': 16502.198, 'start': 15977.646, 'title': 'React fragment and cart item creation', 'summary': 'Covers creating a react fragment for rendering elements, setting up a temporary value for the cart, and initiating the creation of cart list and cart item components to display items in the cart.', 'duration': 524.552, 'highlights': ['Creating a React fragment for rendering elements Explained the usage of React fragment to contain adjacent elements for rendering as one entity.', 'Setting up a temporary value for the cart Temporary assignment of cart value to store products to facilitate visualization and development.', 'Initiating the creation of cart list and cart item components Started the process of creating cart list and cart item components to display items in the cart, emphasizing the UI representation.']}], 'duration': 1417.454, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR415084744.jpg', 'highlights': ['Creating a new folder within components named cart and defining cart.js as the main file in package.json resolves import issues and improves file structure.', 'Setting up placeholders for component methods and UI before finishing functionality streamlines the development process.', 'Optimizing the cart display by removing unnecessary columns like name and price, resulting in a more streamlined and user-friendly interface.', 'Implementing conditional rendering based on the cart contents using context, allowing for a more efficient rendering of the cart interface.', 'Using container fluid to utilize the whole screen and text center for center alignment.']}, {'end': 17663.681, 'segs': [{'end': 16531.878, 'src': 'embed', 'start': 16502.919, 'weight': 4, 'content': [{'end': 16505.541, 'text': 'And next, we would want to start working with our JSX.', 'start': 16502.919, 'duration': 2.622}, {'end': 16512.786, 'text': 'Now in the JSX, since we have right now access to the cart, and again, you did not have to do this destructuring.', 'start': 16506.241, 'duration': 6.545}, {'end': 16517.848, 'text': "You could have written like value is going to be cart, and then we're looking for a map.", 'start': 16512.885, 'duration': 4.963}, {'end': 16523.413, 'text': 'But again, just by the maybe bad habit, I just did the destructuring maybe of one item.', 'start': 16518.329, 'duration': 5.084}, {'end': 16525.954, 'text': "So maybe it wasn't as necessary.", 'start': 16523.832, 'duration': 2.122}, {'end': 16531.878, 'text': 'But anyway, so we have a cart, which is an array, and now we can map over it or loop through it.', 'start': 16526.355, 'duration': 5.523}], 'summary': 'Introduction to working with jsx and mapping over an array in react.', 'duration': 28.959, 'max_score': 16502.919, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR416502919.jpg'}, {'end': 16627.134, 'src': 'embed', 'start': 16602.826, 'weight': 5, 'content': [{'end': 16611.398, 'text': "So whatever objects we're going to have in this array, as well as let's set up another value prop and let's set this again equal to the value.", 'start': 16602.826, 'duration': 8.572}, {'end': 16616.705, 'text': 'So just like that, we passed the actual methods down to a card item.', 'start': 16611.799, 'duration': 4.906}, {'end': 16622.451, 'text': 'And once I save, I should have this is a cart item eight times.', 'start': 16617.205, 'duration': 5.246}, {'end': 16627.134, 'text': "And you know what? Let me just clear the console because we don't need it right now.", 'start': 16623.051, 'duration': 4.083}], 'summary': 'Array contains 8 cart items, methods passed down.', 'duration': 24.308, 'max_score': 16602.826, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR416602826.jpg'}, {'end': 16782.217, 'src': 'embed', 'start': 16755.83, 'weight': 3, 'content': [{'end': 16765.382, 'text': "so still within whole value, we have all these methods increment, decrement and remove item and now we're ready to do our jsx.", 'start': 16755.83, 'duration': 9.552}, {'end': 16769.465, 'text': "So within return, obviously we're not going to be returning just a simple div.", 'start': 16766.002, 'duration': 3.463}, {'end': 16772.808, 'text': "Instead, we're going to create the parentheses first.", 'start': 16770.065, 'duration': 2.743}, {'end': 16775.231, 'text': "And now we're looking for the row.", 'start': 16773.389, 'duration': 1.842}, {'end': 16782.217, 'text': 'So this is going to be the div with a class of row, as well as the margin top bottom one.', 'start': 16776.01, 'duration': 6.207}], 'summary': 'Methods include increment, decrement, and remove item. jsx to return div with class of row.', 'duration': 26.387, 'max_score': 16755.83, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR416755830.jpg'}, {'end': 16911.477, 'src': 'embed', 'start': 16883.183, 'weight': 6, 'content': [{'end': 16887.225, 'text': "and now we're looking for the alternative where we're going to set again product.", 'start': 16883.183, 'duration': 4.042}, {'end': 16897.529, 'text': "so something like this let's close the image and i'm will going to have an error, because obviously this is not equal to this is in fact the colon,", 'start': 16887.225, 'duration': 10.304}, {'end': 16899.91, 'text': 'and that is the reason why nothing was working.', 'start': 16897.529, 'duration': 2.381}, {'end': 16902.271, 'text': 'so, as you can see, right now we have eight images.', 'start': 16899.91, 'duration': 2.361}, {'end': 16906.234, 'text': 'so just like that, we are done with our first column.', 'start': 16902.851, 'duration': 3.383}, {'end': 16911.477, 'text': "so i'm going to find where the first column ends and now we're going to start working on the second one,", 'start': 16906.234, 'duration': 5.243}], 'summary': 'Fixing error, 8 images added, first column complete, moving to second column.', 'duration': 28.294, 'max_score': 16883.183, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR416883183.jpg'}, {'end': 17117.334, 'src': 'embed', 'start': 17092.345, 'weight': 7, 'content': [{'end': 17097.827, 'text': "Now, within this div, there's going to be another div, and we need to make sure that I know where this column ends,", 'start': 17092.345, 'duration': 5.482}, {'end': 17100.168, 'text': 'since we have a few more columns that we would want to add.', 'start': 17097.827, 'duration': 2.341}, {'end': 17105.631, 'text': 'So in this case let me add just these columns just so I know that this was the end of this column.', 'start': 17100.609, 'duration': 5.022}, {'end': 17115.173, 'text': "40 buttons and then, like i said, within this display flex div there's going to be another div where we're going to place our actual buttons.", 'start': 17106.391, 'duration': 8.782}, {'end': 17117.334, 'text': "so we'll start with a button now.", 'start': 17115.173, 'duration': 2.161}], 'summary': 'Describing the layout with 40 buttons and nested divs.', 'duration': 24.989, 'max_score': 17092.345, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR417092345.jpg'}, {'end': 17555.622, 'src': 'embed', 'start': 17525.325, 'weight': 0, 'content': [{'end': 17529.767, 'text': 'so we know that our values are working and also we see that the value is zero.', 'start': 17525.325, 'duration': 4.442}, {'end': 17534.67, 'text': 'and that is correct, because, remember, in our data the values are zero now.', 'start': 17529.767, 'duration': 4.903}, {'end': 17540.373, 'text': "later, once we're going to be adding this to the cart, obviously this is going to come by default as one,", 'start': 17534.67, 'duration': 5.703}, {'end': 17543.955, 'text': "because there's no point of adding the item in the cart.", 'start': 17540.373, 'duration': 3.582}, {'end': 17546.356, 'text': "however, there's no values now.", 'start': 17543.955, 'duration': 2.401}, {'end': 17549.678, 'text': "last, there's two more things that we would want to create.", 'start': 17546.356, 'duration': 3.322}, {'end': 17555.622, 'text': "like i said, i wanted to check where this column actually ends, And there's two more columns that I would want to set up.", 'start': 17549.678, 'duration': 5.944}], 'summary': 'Data values are currently zero, will default to one when added to cart. two more columns to be set up.', 'duration': 30.297, 'max_score': 17525.325, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR417525325.jpg'}, {'end': 17593.435, 'src': 'embed', 'start': 17564.831, 'weight': 8, 'content': [{'end': 17568.174, 'text': "Where right in the end we're just going to do the total.", 'start': 17564.831, 'duration': 3.343}, {'end': 17571.477, 'text': "So first we're going to do with a last column that's going to be there.", 'start': 17568.574, 'duration': 2.903}, {'end': 17576.06, 'text': 'Not column 10, MX Auto, column large 2.', 'start': 17572.217, 'duration': 3.843}, {'end': 17577.582, 'text': 'All those things are going to stay the same.', 'start': 17576.06, 'duration': 1.522}, {'end': 17581.105, 'text': "However, within a span, I'm just going to do it like this.", 'start': 17577.602, 'duration': 3.503}, {'end': 17583.587, 'text': "Well, first of all, I'm not going to be targeting the price.", 'start': 17581.665, 'duration': 1.922}, {'end': 17586.729, 'text': "I'm going to say that this is going to be the total.", 'start': 17584.407, 'duration': 2.322}, {'end': 17589.832, 'text': 'And then here we would want the strong tags.', 'start': 17587.53, 'duration': 2.302}, {'end': 17593.435, 'text': 'Not stronger, but actually strong tags.', 'start': 17590.993, 'duration': 2.442}], 'summary': 'Adding a total column while excluding price, emphasizing strong tags.', 'duration': 28.604, 'max_score': 17564.831, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR417564831.jpg'}, {'end': 17637.557, 'src': 'embed', 'start': 17612.343, 'weight': 1, 'content': [{'end': 17618.286, 'text': 'so as you can see, this is going to be our total here and obviously again the total is going to be zero for now,', 'start': 17612.343, 'duration': 5.943}, {'end': 17621.047, 'text': "because we haven't set up yet our logic.", 'start': 17618.286, 'duration': 2.761}, {'end': 17624.309, 'text': 'now this was our last column.', 'start': 17621.827, 'duration': 2.482}, {'end': 17631.113, 'text': "however, we would want to have that remove icon, so one before we're going to start working on the remove icon.", 'start': 17624.309, 'duration': 6.804}, {'end': 17637.557, 'text': 'so again, maybe we can just grab this as a template, copy and paste it, get rid of this strong one,', 'start': 17631.113, 'duration': 6.444}], 'summary': 'Setting up logic, adding remove icon to template.', 'duration': 25.214, 'max_score': 17612.343, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR417612343.jpg'}], 'start': 16502.919, 'title': 'Working with jsx and cart items', 'summary': 'Explains looping through a cart array in jsx, passing down item and value props, and setting up methods for incrementing, decrementing, and removing items, resulting in the rendering of eight cart items. it also covers creating jsx for product display and styling buttons and setting up cart items.', 'chapters': [{'end': 16755.83, 'start': 16502.919, 'title': 'Working with jsx and cart items', 'summary': 'Explains looping through a cart array in jsx, passing down item and value props, and structuring the item and value objects to set up methods for incrementing, decrementing, and removing items, resulting in the rendering of eight cart items.', 'duration': 252.911, 'highlights': ['Looping through a cart array in JSX The chapter demonstrates looping through a cart array in JSX, allowing for the rendering of multiple cart items.', 'Passing down item and value props It explains the process of passing down item and value props to a card item, enabling the utilization of methods for incrementing, decrementing, and removing items.', 'Structuring the item and value objects It details the process of structuring the item and value objects to access specific data such as ID, title, image, price total, and count, as well as methods for incrementing, decrementing, and removing items.', 'Rendering of eight cart items The result of setting up the props and methods is the successful rendering of eight cart items, demonstrating the effectiveness of the implemented functionality.']}, {'end': 17195.443, 'start': 16755.83, 'title': 'Creating jsx for product display', 'summary': 'Covers creating jsx for displaying product details using divs, columns, and buttons, including setting up inline styles and onclick events for incrementing and decrementing items.', 'duration': 439.613, 'highlights': ['Setting up JSX for displaying product details using divs, columns, and buttons The transcript covers the process of creating JSX for displaying product details using divs, columns, and buttons, including setting up inline styles and onClick events for incrementing and decrementing items.', "Setting up inline styles for the product image The transcript explains setting up inline styles for the product image, specifying the width and height in REMs, and using the 'image fluid' bootstrap class to ensure the image size remains restricted.", 'Setting up onClick event for decrementing items The transcript details setting up the onClick event for decrementing items, including defining the function to be executed and accessing the unique ID for the item.']}, {'end': 17663.681, 'start': 17196.343, 'title': 'Styling button and setting up cart item', 'summary': 'Covers adding necessary classes to the app css for a button and cart item, styling the button, setting up hover effects, and adding elements for decrement, increment, total, and remove icon in the cart item.', 'duration': 467.338, 'highlights': ["Styling the button by adding necessary classes and setting up hover effects The speaker explains how to style the button by adding necessary classes such as 'button black' and setting up hover effects by changing the background and color.", 'Setting up elements for decrement, increment, total, and remove icon in the cart item The speaker demonstrates setting up elements for decrement, increment, total, and remove icon in the cart item, ensuring the functionality of decrement and increment, and preparing for logic setup for total value.', 'Adding classes to the CSS and preparing for logic setup for total value The speaker covers adding classes for the cart item in CSS, preparing for logic setup for the total value, and demonstrating how the total value is currently set to zero.']}], 'duration': 1160.762, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR416502919.jpg', 'highlights': ['Rendering of eight cart items The result of setting up the props and methods is the successful rendering of eight cart items, demonstrating the effectiveness of the implemented functionality.', 'Looping through a cart array in JSX The chapter demonstrates looping through a cart array in JSX, allowing for the rendering of multiple cart items.', 'Passing down item and value props It explains the process of passing down item and value props to a card item, enabling the utilization of methods for incrementing, decrementing, and removing items.', 'Structuring the item and value objects It details the process of structuring the item and value objects to access specific data such as ID, title, image, price total, and count, as well as methods for incrementing, decrementing, and removing items.', 'Setting up JSX for displaying product details using divs, columns, and buttons The transcript covers the process of creating JSX for displaying product details using divs, columns, and buttons, including setting up inline styles and onClick events for incrementing and decrementing items.', "Setting up inline styles for the product image The transcript explains setting up inline styles for the product image, specifying the width and height in REMs, and using the 'image fluid' bootstrap class to ensure the image size remains restricted.", 'Setting up onClick event for decrementing items The transcript details setting up the onClick event for decrementing items, including defining the function to be executed and accessing the unique ID for the item.', "Styling the button by adding necessary classes and setting up hover effects The speaker explains how to style the button by adding necessary classes such as 'button black' and setting up hover effects by changing the background and color.", 'Setting up elements for decrement, increment, total, and remove icon in the cart item The speaker demonstrates setting up elements for decrement, increment, total, and remove icon in the cart item, ensuring the functionality of decrement and increment, and preparing for logic setup for total value.', 'Adding classes to the CSS and preparing for logic setup for total value The speaker covers adding classes for the cart item in CSS, preparing for logic setup for the total value, and demonstrating how the total value is currently set to zero.']}, {'end': 19251.582, 'segs': [{'end': 18257.453, 'src': 'embed', 'start': 18228.153, 'weight': 0, 'content': [{'end': 18230.735, 'text': 'So the margin in the bottom is going to be three.', 'start': 18228.153, 'duration': 2.582}, {'end': 18236.06, 'text': 'And then we would be looking for the padding of left and right of five.', 'start': 18231.116, 'duration': 4.944}, {'end': 18241.524, 'text': "Now what else we would want in the button? Well, we're going to add a type of, this is going to be a button.", 'start': 18236.76, 'duration': 4.764}, {'end': 18246.746, 'text': 'and within the button, we would also want a clear card.', 'start': 18243.064, 'duration': 3.682}, {'end': 18249.528, 'text': 'this is going to be the text clear card and you know what.', 'start': 18246.746, 'duration': 2.782}, {'end': 18254.952, 'text': "once we save it, i would want first to get rid of the console, because we don't need it right now and, as you can see,", 'start': 18249.528, 'duration': 5.424}, {'end': 18257.453, 'text': 'this would be your clear card and you know what.', 'start': 18254.952, 'duration': 2.501}], 'summary': 'Setting margin at 3, padding at 5, and adding a clear card button', 'duration': 29.3, 'max_score': 18228.153, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR418228153.jpg'}, {'end': 18475.584, 'src': 'embed', 'start': 18451.291, 'weight': 3, 'content': [{'end': 18457.835, 'text': "so again, my d structuring was wrong and you know what, while we're at a context, we might as well just change these values,", 'start': 18451.291, 'duration': 6.544}, {'end': 18460.957, 'text': 'just so we can see that it is actually working.', 'start': 18457.835, 'duration': 3.122}, {'end': 18466.94, 'text': "so let's say car tax is going to be 20 and car total is going to be 30..", 'start': 18460.957, 'duration': 5.983}, {'end': 18469.881, 'text': 'now let me save this in the context.', 'start': 18466.94, 'duration': 2.941}, {'end': 18475.584, 'text': "next let's go back to the cart totals and let's do a proper structuring.", 'start': 18469.881, 'duration': 5.703}], 'summary': 'Restructuring process to update car tax and car total values to 20 and 30, respectively, in the context.', 'duration': 24.293, 'max_score': 18451.291, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR418451291.jpg'}, {'end': 19069.705, 'src': 'embed', 'start': 19041.305, 'weight': 2, 'content': [{'end': 19044.188, 'text': "Now, in order to do this, we're going to go back to context.js.", 'start': 19041.305, 'duration': 2.883}, {'end': 19049.094, 'text': "We're going to find where is our clear cart, and now we're going to set up our functionality.", 'start': 19044.308, 'duration': 4.786}, {'end': 19052.456, 'text': 'And the initial functionality is going to be very simple.', 'start': 19049.814, 'duration': 2.642}, {'end': 19055.297, 'text': "So I'm going to say this dot set state.", 'start': 19052.856, 'duration': 2.441}, {'end': 19058.119, 'text': 'And now we would want to again pass the function.', 'start': 19055.878, 'duration': 2.241}, {'end': 19061.08, 'text': 'And in this case, again, this is going to be a narrow function.', 'start': 19058.719, 'duration': 2.361}, {'end': 19065.443, 'text': "So we're going to be returning the new state in this object.", 'start': 19061.12, 'duration': 4.323}, {'end': 19069.705, 'text': "And we're going to say cart is going to be equal to a empty array.", 'start': 19065.923, 'duration': 3.782}], 'summary': 'Setting up functionality to clear cart with empty array.', 'duration': 28.4, 'max_score': 19041.305, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR419041305.jpg'}], 'start': 17664.342, 'title': 'Cart setup, totals, react, and tax calculation', 'summary': 'Covers setting up onclick event listener for cart, working with cart as an array, integrating paypal button, using react fragments and jsx, and setting up tax and total calculation for the cart.', 'chapters': [{'end': 17729.203, 'start': 17664.342, 'title': 'Js onclickeventlistener and cart setup', 'summary': 'Explains how to set up an onclick event listener for removing items from a cart in javascript, including testing its functionality and adjusting the margin for the cart items.', 'duration': 64.861, 'highlights': ['Setting up onClick event listener for removing items from the cart, and testing its functionality, ensuring the item is removed and logged in console.', 'Adjusting the margin for the cart items to provide more space between them.']}, {'end': 18023.633, 'start': 17729.943, 'title': 'Working with cart and cart totals', 'summary': 'Discusses setting up the cart as an array, adding items to the cart, and working with cart totals including subtotal, total, and tax, and integrating a paypal button.', 'duration': 293.69, 'highlights': ['Setting up the cart as an array and adding items to the cart to demonstrate proper functionality.', 'Working with cart totals including subtotal, total, and tax, and integrating a PayPal button to enable transaction completion.', 'Discussing the creation of the cart totals component and the process of passing and de-structuring values from the context to display cart information.']}, {'end': 18716.651, 'start': 18024.373, 'title': 'Working with react fragments and jsx', 'summary': 'Covers the process of working with react fragments and jsx to create a container, row, column, button, and totals for a shopping cart app, emphasizing the functionality and styling, while addressing issues with variable names and context values.', 'duration': 692.278, 'highlights': ['Creating a container, row, column, button, and totals for a shopping cart app, emphasizing styling and functionality, and addressing issues with variable names and context values.', 'Implementing functionality to clear the cart, display sub-total, tax, and total, and linking the button to the home page, with emphasis on using React Router and basic Bootstrap styles.', 'Developing a method to calculate and display the cart sub-total, tax, and total values, and ensuring the functionality is set up for future use and state changes.']}, {'end': 19251.582, 'start': 18717.372, 'title': 'Setting up tax and total calculation', 'summary': 'Explains how to set up tax and total values based on the subtotal, multiply it by the tax rate, and add them together to get the total, ensuring the correct calculation and clearing functionality for the cart.', 'duration': 534.21, 'highlights': ['Explaining Tax Calculation The transcript provides a detailed explanation of how to calculate the tax by multiplying the subtotal by a specified tax rate, ensuring flexibility in setting different tax rates.', 'Clearing the Cart Functionality The chapter discusses the need to clear the cart, identifies the issues with the current clear cart functionality, and proposes a solution by resetting the product objects back to default.', 'Adding Total Calculation It explains the process of calculating the total by adding the subtotal and tax, ensuring that the total is accurately computed based on the updated subtotal and tax values.']}], 'duration': 1587.24, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR417664342.jpg', 'highlights': ['Integrating a PayPal button to enable transaction completion and discussing the creation of the cart totals component.', 'Developing a method to calculate and display the cart sub-total, tax, and total values, and ensuring the functionality is set up for future use and state changes.', 'Setting up onClick event listener for removing items from the cart, and testing its functionality, ensuring the item is removed and logged in console.', 'Explaining Tax Calculation by multiplying the subtotal by a specified tax rate, ensuring flexibility in setting different tax rates.']}, {'end': 20627.588, 'segs': [{'end': 19387.953, 'src': 'embed', 'start': 19361.924, 'weight': 8, 'content': [{'end': 19369.345, 'text': "Now, this remove item is getting the ID, so we are having the ID that we're going to have to work with this ID.", 'start': 19361.924, 'duration': 7.421}, {'end': 19373.807, 'text': "Now, first, let's start by setting up the two temporary arrays.", 'start': 19370.106, 'duration': 3.701}, {'end': 19379.088, 'text': "We're going to be getting the products from the state as well as cart from the state.", 'start': 19374.267, 'duration': 4.821}, {'end': 19382.29, 'text': "So I'm going to write temp products.", 'start': 19379.608, 'duration': 2.682}, {'end': 19383.55, 'text': 'That would be the name.', 'start': 19382.69, 'duration': 0.86}, {'end': 19387.953, 'text': 'This is going to be equal to the structured this.state products.', 'start': 19384.011, 'duration': 3.942}], 'summary': 'Setting up temporary arrays for products and cart from state.', 'duration': 26.029, 'max_score': 19361.924, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR419361924.jpg'}, {'end': 19480.421, 'src': 'embed', 'start': 19436.461, 'weight': 3, 'content': [{'end': 19443.102, 'text': "So I'm going to say here that we would want item ID is not equal to the actual ID.", 'start': 19436.461, 'duration': 6.641}, {'end': 19450.143, 'text': "So I'm going to say whatever items have different IDs should be returned to the cart.", 'start': 19444.142, 'duration': 6.001}, {'end': 19454.664, 'text': 'And then the item that obviously matches this is not going to be returned.', 'start': 19450.783, 'duration': 3.881}, {'end': 19458.484, 'text': "So that way we're going to remove it from the cart that is actually in the state.", 'start': 19455.064, 'duration': 3.42}, {'end': 19460.925, 'text': 'So this would be with a cart.', 'start': 19458.985, 'duration': 1.94}, {'end': 19464.227, 'text': "Now with the product, there's going to be a little bit more work than more.", 'start': 19461.525, 'duration': 2.702}, {'end': 19466.449, 'text': "So first of all, again, we're going to look for the index.", 'start': 19464.688, 'duration': 1.761}, {'end': 19472.975, 'text': "So we're going to say index, and now we're having temp products index of, and now we're looking for the item.", 'start': 19466.509, 'duration': 6.466}, {'end': 19480.421, 'text': 'Now what item we would want to get index from? And again, we can use the method of this dot, remember we have get item.', 'start': 19473.655, 'duration': 6.766}], 'summary': 'Identify and remove items with different ids from the cart and perform similar actions for products using index and method get item.', 'duration': 43.96, 'max_score': 19436.461, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR419436461.jpg'}, {'end': 19591.344, 'src': 'embed', 'start': 19565.89, 'weight': 4, 'content': [{'end': 19574.235, 'text': "So let me copy and paste it, and we're going to change here the count and we're going to set the count is going to be actually back to zero,", 'start': 19565.89, 'duration': 8.345}, {'end': 19578.337, 'text': "since we are removing from the cart as well as we're going to change the total.", 'start': 19574.235, 'duration': 4.102}, {'end': 19585.121, 'text': "So total is again going to be set back to zero since we're not going to be setting it equal to the price.", 'start': 19578.697, 'duration': 6.424}, {'end': 19591.344, 'text': 'And once we have made these changes, then we would want to use the this.setState again.', 'start': 19585.801, 'duration': 5.543}], 'summary': 'Reset count and total to zero, update state with this.setstate.', 'duration': 25.454, 'max_score': 19565.89, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR419565890.jpg'}, {'end': 19831.182, 'src': 'embed', 'start': 19785.508, 'weight': 0, 'content': [{'end': 19800.695, 'text': "Again, we can use the find method and the find method is going to accept the callback function and within the callback function we would want to say return if the item ID is matching actual the ID that we're passing in.", 'start': 19785.508, 'duration': 15.187}, {'end': 19806.918, 'text': 'So if the ID is exactly the same, then this is going to be equal to a selected product.', 'start': 19801.275, 'duration': 5.643}, {'end': 19812.643, 'text': "and once we're done with this logic, next we would be looking for the index,", 'start': 19808.158, 'duration': 4.485}, {'end': 19822.072, 'text': 'because again we need the specific index of the item where it is in the temporary card, and we know how we can do that, so we can say const index.', 'start': 19812.643, 'duration': 9.429}, {'end': 19826.857, 'text': "now we're looking for the specific index and here this is going to be temp cart.", 'start': 19822.072, 'duration': 4.785}, {'end': 19831.182, 'text': "again we're going to use the same array and now we have the method of index off.", 'start': 19826.857, 'duration': 4.325}], 'summary': 'Using find method to select product by id and finding index in temp cart', 'duration': 45.674, 'max_score': 19785.508, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR419785508.jpg'}, {'end': 19880.265, 'src': 'embed', 'start': 19851.041, 'weight': 2, 'content': [{'end': 19855.325, 'text': "product and we're going to use the index to find this specific product.", 'start': 19851.041, 'duration': 4.284}, {'end': 19858.967, 'text': 'so now, finally, we have access to a specific product.', 'start': 19855.325, 'duration': 3.642}, {'end': 19864.012, 'text': "however, now we're not going to be changing the actual place in the index,", 'start': 19858.967, 'duration': 5.045}, {'end': 19869.016, 'text': "so in this case we're just changing the value for the product and once we're done,", 'start': 19864.012, 'duration': 5.004}, {'end': 19876.041, 'text': "we're going to ship it back to a state without changing the position of the product in the index.", 'start': 19869.016, 'duration': 7.025}, {'end': 19880.265, 'text': "and in this case, let's decide what we would want to change, first of all for this product.", 'start': 19876.041, 'duration': 4.224}], 'summary': 'Using index to access and modify specific product without changing its position.', 'duration': 29.224, 'max_score': 19851.041, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR419851041.jpg'}, {'end': 19929.294, 'src': 'embed', 'start': 19901.922, 'weight': 5, 'content': [{'end': 19909.549, 'text': "So these are the two things that we would want to change because as you can see, we're changing not only quantity, but we're also changing the total.", 'start': 19901.922, 'duration': 7.627}, {'end': 19913.65, 'text': "now how we're going to change this with this incrementation.", 'start': 19910.229, 'duration': 3.421}, {'end': 19920.311, 'text': "well, first of all, since we have the access to the product i'm going to say product count and we would want to add one, and so, obviously,", 'start': 19913.65, 'duration': 6.661}, {'end': 19923.792, 'text': "every time we're going to be clicking, we're just going to increment this by one.", 'start': 19920.311, 'duration': 3.481}, {'end': 19929.294, 'text': "so, whatever the value we currently have this in this count, we'll just want to add by one.", 'start': 19923.792, 'duration': 5.502}], 'summary': 'Proposing to increment product count by one with each click.', 'duration': 27.372, 'max_score': 19901.922, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR419901922.jpg'}, {'end': 20012.924, 'src': 'embed', 'start': 19989.128, 'weight': 6, 'content': [{'end': 19996.353, 'text': "however, before we pass the callback function, as you can see right away, i'm going to pass the callback function Now.", 'start': 19989.128, 'duration': 7.225}, {'end': 19999.875, 'text': 'before that, I have the actual function that can change the values in the state.', 'start': 19996.353, 'duration': 3.522}, {'end': 20003.878, 'text': "Now, we're going to change this by returning the new state.", 'start': 20000.516, 'duration': 3.362}, {'end': 20008.721, 'text': "And in the state, we're going to write cart, since that is the property we want to affect.", 'start': 20004.518, 'duration': 4.203}, {'end': 20012.924, 'text': 'And now we would want to destructure whatever temporary cart that we had.', 'start': 20009.182, 'duration': 3.742}], 'summary': "Passing a callback function to change state values in the 'cart' property.", 'duration': 23.796, 'max_score': 19989.128, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR419989128.jpg'}, {'end': 20288.622, 'src': 'embed', 'start': 20265.231, 'weight': 7, 'content': [{'end': 20273.934, 'text': 'And once we do this, what would be the best action right after that? Well, we can check if the count of the product is in fact zero.', 'start': 20265.231, 'duration': 8.703}, {'end': 20276.935, 'text': 'And then we have right away the method of removing the item.', 'start': 20274.254, 'duration': 2.681}, {'end': 20281.477, 'text': "So that way we also have the access to the same ID that we're going to be using.", 'start': 20277.595, 'duration': 3.882}, {'end': 20284.799, 'text': 'and we can just pass it down to a removing the item.', 'start': 20282.117, 'duration': 2.682}, {'end': 20288.622, 'text': "So that way we don't have to do any kind of extra logic.", 'start': 20285.319, 'duration': 3.303}], 'summary': 'After checking product count, proceed with removal to avoid extra logic.', 'duration': 23.391, 'max_score': 20265.231, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR420265231.jpg'}], 'start': 19251.582, 'title': 'Implementing cart functionality and react router', 'summary': 'Discusses implementing cart functionality, updating cart items logic, decrementing functionality, and introduces react router functionality. it covers the process of adding, removing, and updating cart items, updating cart values and totals, and implementing decrement functionality. additionally, it demonstrates handling page not found errors and navigating back to the home page using the location property and push method.', 'chapters': [{'end': 19720.005, 'start': 19251.582, 'title': 'Implementing cart functionality', 'summary': 'Discusses implementing cart functionality, including adding and removing items from the cart, updating totals, and the need for further work on incrementation and documentation.', 'duration': 468.423, 'highlights': ['Implementing functionality to remove single items from the cart The speaker explains the steps to remove a single item from the cart, including updating the state, changing product properties, and ensuring correct totals.', 'Importance of updating totals when adding or removing items from the cart The speaker emphasizes the need to update totals when items are added or removed from the cart to ensure accuracy in the cart functionality.', 'Identifying the need to work on incrementation and documentation The speaker points out the need to work on incrementation and documentation as the next steps in enhancing the cart functionality.']}, {'end': 19965.413, 'start': 19720.505, 'title': 'Updating cart items logic', 'summary': 'Covers the logic for updating cart items in context.js, including accessing cart values, finding specific products, changing quantity and total, and updating the state. it demonstrates using methods like find, indexof, and destructuring.', 'duration': 244.908, 'highlights': ['The chapter covers the logic for updating cart items in context.js. The chapter provides guidance on updating cart items logic in the context.js file.', 'It demonstrates using methods like find, indexOf, and destructuring. The chapter demonstrates the use of methods like find, indexOf, and destructuring for accessing and manipulating cart items.', 'Changing quantity and total, and updating the state are key points. The chapter emphasizes changing quantity and total, and updating the state as important aspects of the cart items logic.', 'The logic includes accessing cart values and finding specific products. The logic involves accessing cart values and finding specific products using methods like destructuring, find, and indexOf.']}, {'end': 20133.942, 'start': 19966.094, 'title': 'Updating cart totals and values', 'summary': 'Illustrates the process of updating cart values and totals by using callback functions and the add totals method, ensuring accurate real-time calculations and functionality.', 'duration': 167.848, 'highlights': ['The method of adding totals loops through the cart, counts all the totals, and sums them up in a subtotal, ensuring accurate calculations. The add totals method accurately calculates the subtotal by looping through the cart and summing up all the totals.', 'Real-time calculations for the totals, subtotal, tax, and total are ensured by running the add totals method as a callback function, providing the freshest values in the state. Running the add totals method as a callback function ensures real-time calculations for the totals, subtotal, tax, and total, providing the freshest values in the state.', 'The functionality for updating cart values and totals is verified through a demonstration with product incrementation and addition, confirming the correct functionality of the process. The correct functionality of updating cart values and totals is confirmed through a demonstration involving product incrementation and addition.']}, {'end': 20399.3, 'start': 20135.515, 'title': 'Decrementing functionality in context.js', 'summary': 'Discusses the implementation of a decrement functionality in context.js, highlighting the decision to write separate methods for incrementing and decrementing, the process of decrementing a product count, and the subsequent removal of the product if the count is zero.', 'duration': 263.785, 'highlights': ['The decision to write separate methods for incrementing and decrementing The speaker explains the choice to write separate methods for incrementing and decrementing, despite the possibility of combining them into one method, to aid in explanation.', 'The process of decrementing a product count and subsequent removal if count is zero The speaker outlines the process of decrementing a product count by one and then removing the item from the cart if the count becomes zero, emphasizing the logic behind not keeping items with a count of zero.', 'Demonstration of decrementing functionality with a store recording The speaker demonstrates the decrementing functionality with a store recording, adding items to the cart, and showcasing the changes in values as items are incremented and decremented.']}, {'end': 20627.588, 'start': 20399.3, 'title': 'React router and default page', 'summary': 'Introduces the react router functionality and demonstrates how to handle page not found errors, utilizing the location property and the push method to navigate back to the home page.', 'duration': 228.288, 'highlights': ['The chapter introduces the React router functionality and demonstrates how to handle page not found errors. The transcript discusses the usage of React router to handle page not found errors, providing insights into the functionality and implementation.', 'Utilizing the location property and the push method to navigate back to the home page. The usage of the location property and the push method to navigate back to the home page is demonstrated, providing practical insights into handling navigation within the application.']}], 'duration': 1376.006, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR419251582.jpg', 'highlights': ['The add totals method accurately calculates the subtotal by looping through the cart and summing up all the totals.', 'Running the add totals method as a callback function ensures real-time calculations for the totals, subtotal, tax, and total, providing the freshest values in the state.', 'The correct functionality of updating cart values and totals is confirmed through a demonstration involving product incrementation and addition.', 'The chapter provides guidance on updating cart items logic in the context.js file.', 'The logic involves accessing cart values and finding specific products using methods like destructuring, find, and indexOf.', 'The speaker explains the choice to write separate methods for incrementing and decrementing, despite the possibility of combining them into one method, to aid in explanation.', 'The speaker outlines the process of decrementing a product count by one and then removing the item from the cart if the count becomes zero, emphasizing the logic behind not keeping items with a count of zero.', 'The usage of the location property and the push method to navigate back to the home page is demonstrated, providing practical insights into handling navigation within the application.', 'The speaker emphasizes the need to update totals when items are added or removed from the cart to ensure accuracy in the cart functionality.', 'The speaker points out the need to work on incrementation and documentation as the next steps in enhancing the cart functionality.']}, {'end': 22693.287, 'segs': [{'end': 21272.365, 'src': 'embed', 'start': 21244.241, 'weight': 3, 'content': [{'end': 21247.044, 'text': "And now let's head over and create a new component.", 'start': 21244.241, 'duration': 2.803}, {'end': 21253.731, 'text': 'So as you can see our install is finished and within the cart we can create the PayPal button.', 'start': 21247.584, 'duration': 6.147}, {'end': 21257.195, 'text': 'And the component name is just going to be exactly like that.', 'start': 21254.492, 'duration': 2.703}, {'end': 21263.261, 'text': "So we're going to have the new file and the file name is going to be PayPal and we're going to call this button.", 'start': 21257.215, 'duration': 6.046}, {'end': 21272.365, 'text': "so, just like that, this is going to be obviously the js file and we're going to copy and paste everything that we grabbed from the npm package.", 'start': 21264.022, 'duration': 8.343}], 'summary': 'Creating a new paypal button component for the cart using the js file.', 'duration': 28.124, 'max_score': 21244.241, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR421244241.jpg'}, {'end': 21984.36, 'src': 'embed', 'start': 21957.687, 'weight': 0, 'content': [{'end': 21962.93, 'text': "And as we do the forward slash, now we're going to direct the user back to the homepage.", 'start': 21957.687, 'duration': 5.243}, {'end': 21966.253, 'text': 'So these are the two things that I would want to do on the success.', 'start': 21963.411, 'duration': 2.842}, {'end': 21968.614, 'text': 'so that would be the beginning.', 'start': 21966.973, 'duration': 1.641}, {'end': 21977.017, 'text': "now, after that, I would want to work on a total, because, as you can see, I'm passing the prop of total and this is set equal to the total,", 'start': 21968.614, 'duration': 8.403}, {'end': 21981.399, 'text': "and if I'm going to scroll up, notice, my total is going to be what.", 'start': 21977.017, 'duration': 4.382}, {'end': 21984.36, 'text': 'well, for now, this is just going to be one dollar.', 'start': 21981.399, 'duration': 2.961}], 'summary': 'Redirect user to homepage and set total to $1.', 'duration': 26.673, 'max_score': 21957.687, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR421957687.jpg'}, {'end': 22180.658, 'src': 'embed', 'start': 22152.582, 'weight': 2, 'content': [{'end': 22155.404, 'text': 'so we have all the transactions that we created.', 'start': 22152.582, 'duration': 2.822}, {'end': 22163.03, 'text': 'if you remember, in the very beginning, when we had the intro video, this is where we did the transaction for 69.30,', 'start': 22155.404, 'duration': 7.626}, {'end': 22172.436, 'text': "and the more transactions we're going to make, the more transactions are going to show up over here and we also can check it out in the store.", 'start': 22163.03, 'duration': 9.406}, {'end': 22180.658, 'text': 'so either we can log in with a store account because for now it obviously right away logged you in the sandbox as a client,', 'start': 22172.436, 'duration': 8.222}], 'summary': 'The transcript discusses creating transactions, with an example of a transaction for 69.30, and the ability to view them in the store.', 'duration': 28.076, 'max_score': 22152.582, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR422152582.jpg'}, {'end': 22254.635, 'src': 'embed', 'start': 22226.021, 'weight': 1, 'content': [{'end': 22230.706, 'text': 'And the fact is that we are exposing right now our secret key.', 'start': 22226.021, 'duration': 4.685}, {'end': 22232.888, 'text': 'Right now, this is for the PayPal.', 'start': 22231.366, 'duration': 1.522}, {'end': 22239.21, 'text': 'But in general, you should not be showing your API keys, some kind of secret IDs or anything like that.', 'start': 22233.408, 'duration': 5.802}, {'end': 22244.332, 'text': 'So for this, in fact, we were going to create a environment variable.', 'start': 22239.81, 'duration': 4.522}, {'end': 22254.635, 'text': 'Now, in order to create the environment variables, we would need to head over to the root of the project and create a new file.', 'start': 22245.052, 'duration': 9.583}], 'summary': 'Exposing secret key; create environment variable to secure api keys.', 'duration': 28.614, 'max_score': 22226.021, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR422226021.jpg'}, {'end': 22693.287, 'src': 'embed', 'start': 22676.433, 'weight': 4, 'content': [{'end': 22688.883, 'text': "we obviously add it to the cart and our paypal is working and the good news is that we're not right now exposing the secret id key and just like that we're done with our project.", 'start': 22676.433, 'duration': 12.45}, {'end': 22693.287, 'text': 'i hope you guys enjoy the project and i hope to see you on our next project.', 'start': 22688.883, 'duration': 4.404}], 'summary': 'Successfully integrated paypal, preventing exposure of secret key. project completed.', 'duration': 16.854, 'max_score': 22676.433, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR422676433.jpg'}], 'start': 20627.588, 'title': 'Paypal integration and deployment', 'summary': 'Covers creating a 404 error page, deploying a react application on netlify with a paypal button, setting up paypal integration, including passing props to a paypal button and setting up environment variables in react. it emphasizes the ease of deployment on netlify and the significance of securing api keys and sensitive data.', 'chapters': [{'end': 20751.719, 'start': 20627.588, 'title': 'Creating 404 error page', 'summary': "Demonstrates the process of creating a 404 error page with a big text '404' as well as headings 'error' and 'page not found', and displaying the requested url that was not found using props.location and pathname.", 'duration': 124.131, 'highlights': ["The chapter demonstrates the process of creating a 404 error page with a big text '404' as well as headings 'Error' and 'Page Not Found', and displaying the requested URL that was not found using props.location and pathname.", "The text '404' is created using a div with a class name of 'display', creating a very big text on the page.", "The headings 'Error' and 'Page Not Found' are added using heading one and heading two respectively to display the error message on the page.", 'The requested URL that was not found is displayed using props.location and pathname, showing the actual URL that the person was trying to find.']}, {'end': 21403.964, 'start': 20751.719, 'title': 'Deploying react application on netlify with paypal button', 'summary': 'Covers the process of deploying a react application on netlify, including the use of github and the deployment steps, and then adds a paypal button using the react paypal express checkout, providing insights into the process and commands used, emphasizing the ease of deployment on netlify and the straightforward installation of the react paypal express checkout package.', 'duration': 652.245, 'highlights': ['The chapter covers the process of deploying a React application on Netlify The chapter details the steps for deploying a React application on Netlify, emphasizing the straightforward process and the benefits of using Netlify for deployment.', 'Adding a PayPal button using the React PayPal Express checkout The chapter explains the process of adding a PayPal button to the React application using the React PayPal Express checkout package, highlighting the ease of installation and the straightforward commands used.', 'Emphasizing the ease of deployment on Netlify The chapter emphasizes the ease of deploying the application on Netlify, stating that the process is straightforward and easy to follow.', 'Detailing the steps for deploying a React application on Netlify The chapter provides a detailed explanation of the steps involved in deploying a React application on Netlify, including the use of GitHub and the deployment process.', 'The straightforward installation of the React PayPal Express checkout package The chapter highlights the ease of installing the React PayPal Express checkout package, stating that the installation process is straightforward and quick.']}, {'end': 21828.975, 'start': 21403.964, 'title': 'Setting up paypal integration', 'summary': 'Explains how to pass props to a paypal button, set up a paypal sandbox account for testing transactions, and test the integration with a development server, including creating a store, generating api credentials, and creating a sandbox account for testing transactions.', 'duration': 425.011, 'highlights': ['Passing props to PayPal button The chapter explains how to pass additional props like history and total to a PayPal button for displaying user purchases and clearing the cart after a successful purchase.', 'Setting up PayPal sandbox account Detailed steps for setting up a store, creating a phone app, obtaining API credentials, and creating a sandbox account for testing PayPal transactions.', 'Testing PayPal integration with development server The process of testing the PayPal integration with a development server, adding items to the cart, and troubleshooting the PayPal button functionality.']}, {'end': 22294.172, 'start': 21831.977, 'title': 'Setting up paypal integration and deployment', 'summary': 'Details the process of setting up paypal integration, testing transactions in the sandbox environment, fixing issues with passing the correct total amount, and securing api keys using environment variables, ultimately achieving successful deployment.', 'duration': 462.195, 'highlights': ['Testing transactions in the sandbox environment The speaker guides through the process of logging in as a client, making a purchase, and verifying the successful transaction, with a specific example of a $77 transaction and the necessity to check the transactions in the sandbox.', 'Fixing issues with passing the correct total amount The speaker troubleshoots the issue of the total amount being undefined, demonstrates the process of accessing and passing the correct total amount from the cart totals, and highlights the need to fix the issue for the transaction to go through smoothly.', 'Securing API keys using environment variables The chapter emphasizes the importance of securing secret keys and API keys, and provides a step-by-step guide to creating an environment variable file (.env) to avoid exposing sensitive information on GitHub during deployment.']}, {'end': 22693.287, 'start': 22294.172, 'title': 'Setting up environment variables in react', 'summary': "Discusses setting up environment variables in a react application, including creating, accessing, and deploying them, while emphasizing the importance of using a .env file and gitignore. it also highlights the process of setting up environment variables in netlify and deploying the application. additionally, it showcases the significance of securing sensitive data and the convenience of netlify's automatic site building upon github updates.", 'duration': 399.115, 'highlights': ['The importance of using a .env file and gitignore for environment variables Emphasizes the significance of using a .env file for environment variables, especially when restricted to development, and the necessity of including the .env file in gitignore to avoid public exposure, ensuring data security.', 'Process of setting up environment variables in Netlify and deploying the application Explains the process of setting up environment variables in Netlify, including creating build environment variables in the site settings, and demonstrates the deployment process to Netlify, ensuring secure usage of sensitive data.', "Netlify's automatic site building upon GitHub updates Showcases the convenience of Netlify's automatic site building upon GitHub updates, highlighting the seamless process of site rebuilding and deployment without manual intervention, ensuring efficiency in updating and maintaining the application."]}], 'duration': 2065.699, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPQ1-33teR4/pics/wPQ1-33teR420627588.jpg', 'highlights': ['The chapter emphasizes the importance of securing secret keys and API keys, and provides a step-by-step guide to creating an environment variable file (.env) to avoid exposing sensitive information on GitHub during deployment.', 'The process of setting up environment variables in Netlify, including creating build environment variables in the site settings, and demonstrates the deployment process to Netlify, ensuring secure usage of sensitive data.', 'The importance of using a .env file for environment variables, especially when restricted to development, and the necessity of including the .env file in gitignore to avoid public exposure, ensuring data security.', 'The chapter explains how to pass additional props like history and total to a PayPal button for displaying user purchases and clearing the cart after a successful purchase.', "The chapter demonstrates the process of creating a 404 error page with a big text '404' as well as headings 'Error' and 'Page Not Found', and displaying the requested URL that was not found using props.location and pathname."]}], 'highlights': ['The application provides the functionality to add products to the cart, triggering a modal confirmation upon successful addition of the item, enhancing user experience.', 'The cart functionality enables users to manipulate the quantity of items, displaying the total subtotal and tax, providing a comprehensive shopping experience.', 'The system prevents the addition of the same product multiple times to the cart, ensuring efficient cart management and preventing duplication of items.', 'Demonstrating manipulation of cart items including adding, removing, and clearing items from the cart, with changes in item total, subtotal tax, and overall total reflecting the manipulation.', 'Testing PayPal Sandbox involves setting up the PayPal Sandbox, logging in with a test account, making a test purchase of $69.30, and checking the success message and details in the console.', 'The chapter covers building a React application with Bootstrap, styled components, React Router, and Context API.', 'Creating components such as navbar, product list, details, and cart.', 'The chapter covers building a Bootstrap navbar with links to products and a cart button.', 'The importance of having products in an e-commerce store is emphasized, stating that without actual products, the store is as useless as deodorant for cab drivers.', 'Identifying the mistake of console logs being immediately returned and illustrating the proper way of utilizing arrow functions in JavaScript.', "The button's hover effect and transition property are set to ensure a smooth and visually appealing user experience.", 'Creating a modal container with styled components using styled and const to define the modal container.', 'Restructure product array, update properties like in cart, count, and total.', 'The chapter emphasizes the process of creating a UI layout with specific column spans and layout adjustments for different screen sizes, focusing on image placement and text formatting.', 'Integrating a PayPal button to enable transaction completion and discussing the creation of the cart totals component.', 'The add totals method accurately calculates the subtotal by looping through the cart and summing up all the totals.', 'The chapter emphasizes the importance of securing secret keys and API keys, and provides a step-by-step guide to creating an environment variable file (.env) to avoid exposing sensitive information on GitHub during deployment.']}