title
🔴Build Amazon Clone w/ Full E-Commerce + Stripe using React JS for Beginners (Challenge Day 2) | Pt3

description
Join the REACT challenge (7th September) 👉 https://www.cleverprogrammer.com/5-day-react-javascript-challenge?utm_campaign=react-challenge-sept-20&utm_source=facebook&utm_medium=yt-description&utm_content=8-sep-sonny-qazi-live-day-2 Day 2 of the React JS Challenge, Sonny & Qazi will be building the E-Commerce Amazon clone LIVE! 🚀. SHOW UP. You don't want to miss this 💯. #reactjs #amazon #challenge Biz / Sponsorships 👉 https://www.cleverprogrammer.com/partnerships

detail
{'title': '🔴Build Amazon Clone w/ Full E-Commerce + Stripe using React JS for Beginners (Challenge Day 2) | Pt3', 'heatmap': [{'end': 4599.222, 'start': 4527.282, 'weight': 0.835}, {'end': 5730.89, 'start': 5655.836, 'weight': 1}], 'summary': 'Covers handling live session issues, amazon header styling, building home and product components, e-commerce website styling, react component customization, react website development, reactor inside of react, react context api implementation, redux and context api, building a shopping basket with 1500+ live participants and aims for a 120k salary.', 'chapters': [{'end': 1119.494, 'segs': [{'end': 109.832, 'src': 'embed', 'start': 83.966, 'weight': 2, 'content': [{'end': 89.107, 'text': "Right In the meantime, guys, let's go ahead and fire off some questions that you're interested about the challenge.", 'start': 83.966, 'duration': 5.141}, {'end': 90.708, 'text': "Let us know who's here.", 'start': 89.467, 'duration': 1.241}, {'end': 93.328, 'text': 'And we apologize for this connection stuff, guys.', 'start': 90.768, 'duration': 2.56}, {'end': 98.989, 'text': "It it just happens when we go live sometimes and it's a pain, but it's going to be fine.", 'start': 93.348, 'duration': 5.641}, {'end': 102.87, 'text': 'Yeah Yeah.', 'start': 99.009, 'duration': 3.861}, {'end': 107.271, 'text': "Like the game, sometimes it just happens and there's really not much we can do about it.", 'start': 103.03, 'duration': 4.241}, {'end': 109.832, 'text': "Even, you know, you don't want this to happen, of course.", 'start': 107.371, 'duration': 2.461}], 'summary': 'Discussion about technical difficulties during live event.', 'duration': 25.866, 'max_score': 83.966, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pxWe-nlOSY4/pics/pxWe-nlOSY483966.jpg'}, {'end': 290.985, 'src': 'embed', 'start': 241.809, 'weight': 0, 'content': [{'end': 245.31, 'text': 'I am hustling and getting this zip file up for you guys.', 'start': 241.809, 'duration': 3.501}, {'end': 254.715, 'text': 'guys, when i look at my internet, it says 700 down, like download speed 700 megabits per second, and then, like upload, is like 35,', 'start': 246.73, 'duration': 7.985}, {'end': 256.315, 'text': 'just like your connection is excellent.', 'start': 254.715, 'duration': 1.6}, {'end': 262.359, 'text': "yeah, yeah, oh man, i'm just trying to unzip this.", 'start': 256.315, 'duration': 6.044}, {'end': 263.62, 'text': "okay, it's just unzipping.", 'start': 262.359, 'duration': 1.261}, {'end': 267.282, 'text': "now, all right, bear with us guys, once we get google down, but we're up.", 'start': 263.62, 'duration': 3.662}, {'end': 268.959, 'text': 'Yeah, exactly.', 'start': 268.078, 'duration': 0.881}, {'end': 270.181, 'text': 'Google went down, guys.', 'start': 269.019, 'duration': 1.162}, {'end': 271.262, 'text': 'Firebase went down.', 'start': 270.341, 'duration': 0.921}, {'end': 274.467, 'text': "So, you know, we're pretty good.", 'start': 271.903, 'duration': 2.564}, {'end': 275.228, 'text': "We're pretty good.", 'start': 274.687, 'duration': 0.541}, {'end': 276.409, 'text': 'All right.', 'start': 275.248, 'duration': 1.161}, {'end': 277.431, 'text': "It's almost done, guys.", 'start': 276.489, 'duration': 0.942}, {'end': 279.493, 'text': "I'll share with you guys the progress right now.", 'start': 277.491, 'duration': 2.002}, {'end': 281.136, 'text': "We've got a thousand people back on the stream.", 'start': 279.513, 'duration': 1.623}, {'end': 282.658, 'text': 'Thank you guys for being patient.', 'start': 281.196, 'duration': 1.462}, {'end': 288.182, 'text': "It's okay guys Champs, I can't believe that you guys are still here.", 'start': 283.138, 'duration': 5.044}, {'end': 289.323, 'text': 'Like thank you guys.', 'start': 288.262, 'duration': 1.061}, {'end': 290.985, 'text': 'That is crazy.', 'start': 289.383, 'duration': 1.602}], 'summary': 'Internet speed: 700 mbps down, 35 mbps up. stream: 1000 people back, google and firebase went down temporarily.', 'duration': 49.176, 'max_score': 241.809, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pxWe-nlOSY4/pics/pxWe-nlOSY4241809.jpg'}, {'end': 421.134, 'src': 'embed', 'start': 396.076, 'weight': 4, 'content': [{'end': 402.56, 'text': "Use that time that you lost to go ahead and catch up and get caught up to the point that we're at right now.", 'start': 396.076, 'duration': 6.484}, {'end': 407.944, 'text': "So I'm just going ahead and installing the modules because I got Kazi's files sent over to me.", 'start': 403.001, 'duration': 4.943}, {'end': 411.527, 'text': "So we're doing it on this machine and that should be done in just a sec.", 'start': 408.725, 'duration': 2.802}, {'end': 415.009, 'text': 'But what we were doing guys is we were working on this right here.', 'start': 411.647, 'duration': 3.362}, {'end': 417.571, 'text': 'So we were working on the Amazon header.', 'start': 415.049, 'duration': 2.522}, {'end': 421.134, 'text': "So this thing right here at the top, let's go ahead and it's just installed.", 'start': 417.731, 'duration': 3.403}], 'summary': 'Installing modules to catch up on amazon header work.', 'duration': 25.058, 'max_score': 396.076, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pxWe-nlOSY4/pics/pxWe-nlOSY4396076.jpg'}, {'end': 547.14, 'src': 'embed', 'start': 516.37, 'weight': 6, 'content': [{'end': 518.991, 'text': 'we had the header search, which was the container.', 'start': 516.37, 'duration': 2.621}, {'end': 520.292, 'text': 'So this is the container for everything.', 'start': 519.071, 'duration': 1.221}, {'end': 521.792, 'text': 'It was display flex flex one.', 'start': 520.332, 'duration': 1.46}, {'end': 534.997, 'text': "which flex one actually went ahead and gave us this where it's spread out to the rest of the flex one basically says they want it to like stretch as big as it can go.", 'start': 521.792, 'duration': 13.205}, {'end': 540.158, 'text': "Okay Now what we're going to do is we are going to do the right hand side.", 'start': 535.017, 'duration': 5.141}, {'end': 541.919, 'text': "So right now you can actually see what's over here.", 'start': 540.178, 'duration': 1.741}, {'end': 547.14, 'text': 'But if I go ahead and zoom in, you can see it says hello guests sign in all that beautiful stuff.', 'start': 541.979, 'duration': 5.161}], 'summary': 'Using display flex and flex one to stretch container for header search.', 'duration': 30.77, 'max_score': 516.37, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pxWe-nlOSY4/pics/pxWe-nlOSY4516370.jpg'}, {'end': 949.067, 'src': 'embed', 'start': 925.781, 'weight': 7, 'content': [{'end': 933.724, 'text': 'So if I go ahead and click and add some more items to the basket, it goes ahead and updates to the basket as such.', 'start': 925.781, 'duration': 7.943}, {'end': 938.705, 'text': "right. so that's going to give us a clean look and feel to the app.", 'start': 933.724, 'duration': 4.981}, {'end': 940.865, 'text': "so with that we're going to carry on.", 'start': 938.705, 'duration': 2.16}, {'end': 947.807, 'text': "we've got the basket looking a bit cleaner and then what we're going to do is we're also going to go ahead and target this header basket count.", 'start': 940.865, 'duration': 6.942}, {'end': 949.067, 'text': "so let's go back to our css.", 'start': 947.807, 'duration': 1.26}], 'summary': "App's basket updated with cleaner look, targeting header basket count in css.", 'duration': 23.286, 'max_score': 925.781, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pxWe-nlOSY4/pics/pxWe-nlOSY4925781.jpg'}, {'end': 1124.679, 'src': 'embed', 'start': 1095.282, 'weight': 5, 'content': [{'end': 1096.983, 'text': 'So that is very, very powerful.', 'start': 1095.282, 'duration': 1.701}, {'end': 1098.023, 'text': 'And stick through it.', 'start': 1097.303, 'duration': 0.72}, {'end': 1099.864, 'text': "I mean, we're all sticking through it with you.", 'start': 1098.283, 'duration': 1.581}, {'end': 1101.484, 'text': 'Exactly, guys.', 'start': 1100.644, 'duration': 0.84}, {'end': 1110.707, 'text': "And guys like Kazi said, if you can't stick through this, those numbers that we said yesterday, the 120K salary, those things they require,", 'start': 1101.604, 'duration': 9.103}, {'end': 1111.728, 'text': 'that 110% that we talked about.', 'start': 1110.707, 'duration': 1.021}, {'end': 1119.494, 'text': 'They require that discipline, that not quitting when the push gets going and when it gets hard.', 'start': 1113.248, 'duration': 6.246}, {'end': 1122.777, 'text': "Just like now, it's completely fine if things don't make sense.", 'start': 1119.934, 'duration': 2.843}, {'end': 1124.679, 'text': 'Do not quit though.', 'start': 1123.157, 'duration': 1.522}], 'summary': 'Staying disciplined and not quitting is crucial for achieving the 120k salary and 110% effort.', 'duration': 29.397, 'max_score': 1095.282, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pxWe-nlOSY4/pics/pxWe-nlOSY41095282.jpg'}], 'start': 2.535, 'title': 'Handling live session issues and coding amazon header styling', 'summary': 'Discusses overcoming connection challenges in live sessions, with a peak download speed of 700 mbps and an upload speed of 35, and the process of styling amazon headers through code, engaging an audience of around 1400 participants and aiming for a 120k salary.', 'chapters': [{'end': 359.371, 'start': 2.535, 'title': 'Handling connection issues in live session', 'summary': 'Discusses the challenges faced during a live session, including connection issues and the impact on the audience, while emphasizing the need to stay positive and overcome technical difficulties, with a peak download speed of 700 megabits per second and an upload speed of 35, and the stream recovering with a thousand viewers after losing around 10,000.', 'duration': 356.836, 'highlights': ['The stream recovered with a thousand viewers after losing around 10,000, showcasing the impact of the connection issues on the audience.', 'The speaker mentioned a peak download speed of 700 megabits per second and an upload speed of 35, emphasizing the excellent connection before facing issues.', 'The discussion emphasized the need to stay positive and overcome technical difficulties, highlighting the importance of handling connection issues during live sessions.', 'The chapter addressed the challenges faced during a live session, including connection issues and their impact on the audience, while emphasizing the need to stay positive and overcome technical difficulties.']}, {'end': 665.872, 'start': 359.792, 'title': 'Coding amazon header styling', 'summary': 'Discusses the process of styling the amazon header through code, including using flexbox properties and color adjustments, aiming to achieve a specific visual layout, while providing guidance for the audience to catch up on the build and emphasizing resilience in the face of technical challenges. the presentation engages an audience of 1400 participants.', 'duration': 306.08, 'highlights': ['The audience is guided to catch up on the build, leveraging the time lost due to technical issues, to align with the current stage of the project. Encourages audience to use the time lost to catch up and get aligned with the current stage of the project.', 'Resilience and determination are emphasized in the face of technical challenges, with the speaker expressing confidence in overcoming obstacles and maintaining high energy levels. Emphasizes resilience and determination in overcoming technical challenges and maintaining high energy levels.', 'The speaker provides detailed guidance on utilizing flexbox properties and color adjustments to achieve the desired visual layout for the Amazon header. Provides detailed guidance on using flexbox properties and color adjustments to achieve the desired visual layout for the Amazon header.']}, {'end': 1119.494, 'start': 665.872, 'title': 'Amazon clone header styling', 'summary': 'Covers the styling of the amazon clone header, including setting font sizes, adding a shopping basket icon, and emphasizing the importance of commitment and perseverance in learning development, aiming to achieve a 120k salary.', 'duration': 453.622, 'highlights': ['The chapter covers the styling of the Amazon clone header, including setting font sizes, adding a shopping basket icon. The chapter focuses on styling the Amazon clone header, adjusting font sizes and incorporating a shopping basket icon, demonstrating the process of enhancing the visual appeal of the application.', 'Emphasizing the importance of commitment and perseverance in learning development, aiming to achieve a 120K salary. The instructors stress the significance of commitment and perseverance in learning development, highlighting the potential career rewards such as achieving a 120K salary, motivating learners to overcome challenges and stick through the learning process.']}], 'duration': 1116.959, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pxWe-nlOSY4/pics/pxWe-nlOSY42535.jpg', 'highlights': ['The stream recovered with a thousand viewers after losing around 10,000, showcasing the impact of the connection issues on the audience.', 'The speaker mentioned a peak download speed of 700 megabits per second and an upload speed of 35, emphasizing the excellent connection before facing issues.', 'The discussion emphasized the need to stay positive and overcome technical difficulties, highlighting the importance of handling connection issues during live sessions.', 'The chapter addressed the challenges faced during a live session, including connection issues and their impact on the audience, while emphasizing the need to stay positive and overcome technical difficulties.', 'The audience is guided to catch up on the build, leveraging the time lost due to technical issues, to align with the current stage of the project. Encourages audience to use the time lost to catch up and get aligned with the current stage of the project.', 'Resilience and determination are emphasized in the face of technical challenges, with the speaker expressing confidence in overcoming obstacles and maintaining high energy levels. Emphasizes resilience and determination in overcoming technical challenges and maintaining high energy levels.', 'The speaker provides detailed guidance on utilizing flexbox properties and color adjustments to achieve the desired visual layout for the Amazon header. Provides detailed guidance on using flexbox properties and color adjustments to achieve the desired visual layout for the Amazon header.', 'The chapter covers the styling of the Amazon clone header, including setting font sizes, adding a shopping basket icon. The chapter focuses on styling the Amazon clone header, adjusting font sizes and incorporating a shopping basket icon, demonstrating the process of enhancing the visual appeal of the application.', 'Emphasizing the importance of commitment and perseverance in learning development, aiming to achieve a 120K salary. The instructors stress the significance of commitment and perseverance in learning development, highlighting the potential career rewards such as achieving a 120K salary, motivating learners to overcome challenges and stick through the learning process.']}, {'end': 1959.098, 'segs': [{'end': 1147.476, 'src': 'embed', 'start': 1119.934, 'weight': 2, 'content': [{'end': 1122.777, 'text': "Just like now, it's completely fine if things don't make sense.", 'start': 1119.934, 'duration': 2.843}, {'end': 1124.679, 'text': 'Do not quit though.', 'start': 1123.157, 'duration': 1.522}, {'end': 1125.339, 'text': 'Do not quit.', 'start': 1124.759, 'duration': 0.58}, {'end': 1128.202, 'text': "Keep that energy high and let's carry on.", 'start': 1125.4, 'duration': 2.802}, {'end': 1130.845, 'text': "Let's jump back into the code.", 'start': 1128.242, 'duration': 2.603}, {'end': 1134.348, 'text': "You can see we've done the sticky top nav bar in our build.", 'start': 1131.025, 'duration': 3.323}, {'end': 1136.63, 'text': 'It looks really nice, really clean.', 'start': 1134.368, 'duration': 2.262}, {'end': 1142.654, 'text': "What we're going to do now is we are actually going to go ahead and build out the body of the app.", 'start': 1137.271, 'duration': 5.383}, {'end': 1147.476, 'text': 'The body, if we go over to app.js, we called it the home component.', 'start': 1142.874, 'duration': 4.602}], 'summary': 'Building sticky top nav bar; progressing to home component', 'duration': 27.542, 'max_score': 1119.934, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pxWe-nlOSY4/pics/pxWe-nlOSY41119934.jpg'}, {'end': 1201.73, 'src': 'embed', 'start': 1167.825, 'weight': 4, 'content': [{'end': 1170.249, 'text': "Right now here I'm going to go ahead and say import.", 'start': 1167.825, 'duration': 2.424}, {'end': 1178.742, 'text': "Home dot CSS like so and I'm going to create the CSS file so I'm going to say home dot CSS.", 'start': 1172.092, 'duration': 6.65}, {'end': 1185.827, 'text': 'OK, Now here we have the home component loading right?', 'start': 1180.064, 'duration': 5.763}, {'end': 1190.608, 'text': 'So just to prove we can say I am the home component like.', 'start': 1185.867, 'duration': 4.741}, {'end': 1192.728, 'text': 'so we can go ahead and do this right?', 'start': 1190.608, 'duration': 2.12}, {'end': 1201.73, 'text': 'So now what we can see is if I go back to app, I go ahead and get rid of our little comment, go back here,', 'start': 1193.348, 'duration': 8.382}], 'summary': 'Creating and importing home.css for the home component.', 'duration': 33.905, 'max_score': 1167.825, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pxWe-nlOSY4/pics/pxWe-nlOSY41167825.jpg'}, {'end': 1244.236, 'src': 'embed', 'start': 1217.802, 'weight': 1, 'content': [{'end': 1221.764, 'text': "So let's go ahead and deck this home component out and let's make it look good.", 'start': 1217.802, 'duration': 3.962}, {'end': 1229.809, 'text': 'So, with that said, guys, we are going to first have a container inside of our home component, right?', 'start': 1222.485, 'duration': 7.324}, {'end': 1232.57, 'text': "So inside of here we're going to have a home container.", 'start': 1229.829, 'duration': 2.741}, {'end': 1234.291, 'text': "So I'm going to say home underscore container.", 'start': 1232.59, 'duration': 1.701}, {'end': 1237.353, 'text': "And this is two underscores in case you're wondering.", 'start': 1234.891, 'duration': 2.462}, {'end': 1239.154, 'text': "It's part of the BEM convention.", 'start': 1237.393, 'duration': 1.761}, {'end': 1244.236, 'text': 'A lot of people always ask what the drawing tool is, by the way.', 'start': 1241.915, 'duration': 2.321}], 'summary': 'Enhancing the home component with a home container following the bem convention.', 'duration': 26.434, 'max_score': 1217.802, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pxWe-nlOSY4/pics/pxWe-nlOSY41217802.jpg'}, {'end': 1588.74, 'src': 'embed', 'start': 1562.67, 'weight': 0, 'content': [{'end': 1567.436, 'text': "The really nice part about these rows is that they're going to be fully responsive.", 'start': 1562.67, 'duration': 4.766}, {'end': 1571.981, 'text': 'You see the top one has two, the middle one has three, and the last one has one.', 'start': 1567.576, 'duration': 4.405}, {'end': 1576.946, 'text': 'And the part of the homework is going to be that I want you guys to just pretty much play around with this and see what you can do with it.', 'start': 1572.501, 'duration': 4.445}, {'end': 1582.413, 'text': "But what we're going to do now is we're going to say div home underscore underscore row like this.", 'start': 1577.427, 'duration': 4.986}, {'end': 1584.936, 'text': "And we're basically going to go ahead.", 'start': 1583.334, 'duration': 1.602}, {'end': 1588.74, 'text': 'And the goal here is to basically render out a product component.', 'start': 1585.096, 'duration': 3.644}], 'summary': 'Create responsive rows with 2, 3, and 1 elements for a homework task to render a product component.', 'duration': 26.07, 'max_score': 1562.67, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pxWe-nlOSY4/pics/pxWe-nlOSY41562670.jpg'}, {'end': 1651.164, 'src': 'embed', 'start': 1621.336, 'weight': 3, 'content': [{'end': 1627.357, 'text': 'So this one right here is reflecting this row over here and we have the two containers.', 'start': 1621.336, 'duration': 6.021}, {'end': 1628.698, 'text': 'So this is that row over here.', 'start': 1627.478, 'duration': 1.22}, {'end': 1634.359, 'text': 'This one over here is going to reflect these three over here.', 'start': 1629.258, 'duration': 5.101}, {'end': 1639.74, 'text': 'And then we have the final one at the bottom, which is pointing towards this one.', 'start': 1635.019, 'duration': 4.721}, {'end': 1645.122, 'text': 'Okay, now this is going to be completely responsive.', 'start': 1640.02, 'duration': 5.102}, {'end': 1651.164, 'text': "So it's going to calculate on its own based on how many products we put inside as to how to space them out.", 'start': 1645.162, 'duration': 6.002}], 'summary': 'Reflects rows, two containers, responsive to product quantity for spacing.', 'duration': 29.828, 'max_score': 1621.336, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pxWe-nlOSY4/pics/pxWe-nlOSY41621336.jpg'}, {'end': 1742.572, 'src': 'embed', 'start': 1715.486, 'weight': 6, 'content': [{'end': 1721.23, 'text': "then what we're going to do is we are going to go ahead and actually start coding out the product itself.", 'start': 1715.486, 'duration': 5.744}, {'end': 1724.653, 'text': 'So the product itself is going to consist of a few things.', 'start': 1721.31, 'duration': 3.343}, {'end': 1734.6, 'text': "So it's going to consist of a title, a price, a star rating, an image, and then a add to basket button.", 'start': 1725.233, 'duration': 9.367}, {'end': 1737.503, 'text': 'Okay So we need to go ahead and drop this out now.', 'start': 1734.821, 'duration': 2.682}, {'end': 1742.572, 'text': "So the first thing we're going to do is we may have a sort of an info, right?", 'start': 1738.203, 'duration': 4.369}], 'summary': 'Starting coding for product with title, price, star rating, image, and add to basket button', 'duration': 27.086, 'max_score': 1715.486, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pxWe-nlOSY4/pics/pxWe-nlOSY41715486.jpg'}, {'end': 1966.343, 'src': 'embed', 'start': 1938.699, 'weight': 5, 'content': [{'end': 1945.606, 'text': "But let me know in the comment section if you're still pumped because we this is the kind of stuff that we have to deal with.", 'start': 1938.699, 'duration': 6.907}, {'end': 1951.751, 'text': 'We have to overcome this sort of obstacles and tomorrow or maybe later on or very soon because we will be back guys.', 'start': 1945.626, 'duration': 6.125}, {'end': 1953.233, 'text': 'So do not freak out.', 'start': 1951.831, 'duration': 1.402}, {'end': 1956.836, 'text': 'We have a whole week and we are going to fall into these problems.', 'start': 1953.373, 'duration': 3.463}, {'end': 1959.098, 'text': "But it's up to us guys to overcome this stuff.", 'start': 1956.876, 'duration': 2.222}, {'end': 1960.88, 'text': "So let's carry on strong.", 'start': 1959.138, 'duration': 1.742}, {'end': 1966.343, 'text': "So here we've got a P tag and I'm going to go ahead and do a star like so.", 'start': 1961.5, 'duration': 4.843}], 'summary': 'Facing obstacles, but determined to overcome. stay strong and carry on.', 'duration': 27.644, 'max_score': 1938.699, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pxWe-nlOSY4/pics/pxWe-nlOSY41938699.jpg'}], 'start': 1119.934, 'title': 'Building home and product components', 'summary': 'Covers building the home component with a css file, adding a container and banner, and creating a product component in react with product info, price, and star rating, emphasizing diverse product rendering and addressing technical obstacles.', 'chapters': [{'end': 1276.53, 'start': 1119.934, 'title': 'Building home component and styling', 'summary': 'Covers building the home component, creating a css file, and adding a container and banner to the component for a better visual appeal.', 'duration': 156.596, 'highlights': ['The chapter emphasizes the importance of not quitting and maintaining high energy while building the home component, reinforcing perseverance and determination.', 'It explains the process of creating the home component and its corresponding CSS file, providing practical guidance for implementing these elements into the app.', 'The detailed highlight describes the addition of a home container and a banner to enhance the visual appeal of the home component, focusing on improving the user interface for a better user experience.']}, {'end': 1959.098, 'start': 1277.03, 'title': 'React product component tutorial', 'summary': 'Covers a tutorial on creating a product component in react, including adding a product info, price, and star rating, and addressing responsive design and layout for different product configurations, aiming to reflect diverse products and render a finished product square block. the tutorial also emphasizes overcoming technical obstacles and the need to maintain enthusiasm and energy.', 'duration': 682.068, 'highlights': ['Creating Product Component in React The tutorial covers the process of creating a product component in React, including adding product info, price, and star rating.', 'Addressing Responsive Design and Layout The tutorial emphasizes the importance of responsive design and layout for different product configurations, aiming to reflect diverse products and render a finished product square block.', 'Emphasizing Overcoming Technical Obstacles The tutorial highlights the need to overcome technical obstacles, ensuring that issues are addressed to maintain progress and enthusiasm.']}], 'duration': 839.164, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pxWe-nlOSY4/pics/pxWe-nlOSY41119934.jpg', 'highlights': ['The tutorial emphasizes the importance of responsive design and layout for different product configurations, aiming to reflect diverse products and render a finished product square block.', 'The detailed highlight describes the addition of a home container and a banner to enhance the visual appeal of the home component, focusing on improving the user interface for a better user experience.', 'The chapter emphasizes the importance of not quitting and maintaining high energy while building the home component, reinforcing perseverance and determination.', 'Addressing Responsive Design and Layout The tutorial emphasizes the importance of responsive design and layout for different product configurations, aiming to reflect diverse products and render a finished product square block.', 'It explains the process of creating the home component and its corresponding CSS file, providing practical guidance for implementing these elements into the app.', 'Emphasizing Overcoming Technical Obstacles The tutorial highlights the need to overcome technical obstacles, ensuring that issues are addressed to maintain progress and enthusiasm.', 'Creating Product Component in React The tutorial covers the process of creating a product component in React, including adding product info, price, and star rating.']}, {'end': 2450.397, 'segs': [{'end': 1998.351, 'src': 'embed', 'start': 1959.138, 'weight': 5, 'content': [{'end': 1960.88, 'text': "So let's carry on strong.", 'start': 1959.138, 'duration': 1.742}, {'end': 1966.343, 'text': "So here we've got a P tag and I'm going to go ahead and do a star like so.", 'start': 1961.5, 'duration': 4.843}, {'end': 1968.945, 'text': "And you can see like we've got the star rendering out.", 'start': 1967.004, 'duration': 1.941}, {'end': 1972.948, 'text': 'Now imagine I added in sort of a few different stars here.', 'start': 1969.586, 'duration': 3.362}, {'end': 1975.089, 'text': 'So I want to add in like a few different stars.', 'start': 1973.148, 'duration': 1.941}, {'end': 1976.31, 'text': "So let's just say three stars.", 'start': 1975.109, 'duration': 1.201}, {'end': 1980.774, 'text': 'Okay So you can see like in here, for example, it says five.', 'start': 1976.91, 'duration': 3.864}, {'end': 1985.258, 'text': "So I'm going to show you guys how we are going to get to the end result.", 'start': 1980.794, 'duration': 4.464}, {'end': 1988.381, 'text': 'Okay So we have that right there.', 'start': 1985.338, 'duration': 3.043}, {'end': 1990.003, 'text': "And then we're going to have an image.", 'start': 1988.942, 'duration': 1.061}, {'end': 1991.925, 'text': 'So the image is going to be an image of the product.', 'start': 1990.283, 'duration': 1.642}, {'end': 1994.167, 'text': "So let's go ahead and outside of here, we're going to say an image.", 'start': 1991.945, 'duration': 2.222}, {'end': 1997.43, 'text': 'And this is actually going to be outside the product info now.', 'start': 1995.288, 'duration': 2.142}, {'end': 1998.351, 'text': "So we're going to say image.", 'start': 1997.51, 'duration': 0.841}], 'summary': 'Adding multiple stars and an image to the product info.', 'duration': 39.213, 'max_score': 1959.138, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pxWe-nlOSY4/pics/pxWe-nlOSY41959138.jpg'}, {'end': 2048.719, 'src': 'embed', 'start': 2021.082, 'weight': 4, 'content': [{'end': 2024.544, 'text': 'smash the thumbs up button and try and get this video out to as many people as you can.', 'start': 2021.082, 'duration': 3.462}, {'end': 2029.107, 'text': 'obviously, we had a few technical issues earlier, but we are over that and we are going strong.', 'start': 2024.544, 'duration': 4.563}, {'end': 2034.851, 'text': "so let's go back to our source and then what we're going to do is we're going to paste this, and what this is is this picture right here,", 'start': 2029.107, 'duration': 5.744}, {'end': 2036.452, 'text': "so you can see we've got the lean start.", 'start': 2034.851, 'duration': 1.601}, {'end': 2042.136, 'text': "so we've got two products being rendered right now, because i'm dropping two products here, so i'm going to go ahead and clear that up.", 'start': 2036.452, 'duration': 5.684}, {'end': 2043.356, 'text': 'so we have our one product.', 'start': 2042.136, 'duration': 1.22}, {'end': 2048.719, 'text': 'Now, with this, guys, what we are going to do is we are going to.', 'start': 2044.537, 'duration': 4.182}], 'summary': 'Technical issues resolved, showcasing two products, aiming for wider reach.', 'duration': 27.637, 'max_score': 2021.082, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pxWe-nlOSY4/pics/pxWe-nlOSY42021082.jpg'}, {'end': 2129.094, 'src': 'embed', 'start': 2102.141, 'weight': 1, 'content': [{'end': 2106.142, 'text': "And now you can see if we go back to our app, we've got the add to basket button.", 'start': 2102.141, 'duration': 4.001}, {'end': 2107.563, 'text': "Hey, so it's clean.", 'start': 2106.462, 'duration': 1.101}, {'end': 2109.124, 'text': 'Okay Very, very clean.', 'start': 2107.683, 'duration': 1.441}, {'end': 2117.188, 'text': "And now what we are going to do is We're going to style this because right now this does not look nice.", 'start': 2109.924, 'duration': 7.264}, {'end': 2120.99, 'text': "It does not look very good, so let's go ahead and use that.", 'start': 2117.248, 'duration': 3.742}, {'end': 2125.572, 'text': "So let's go back to our product dot CSS and let's make this thing look beautiful.", 'start': 2121.17, 'duration': 4.402}, {'end': 2129.094, 'text': "OK, so the first thing we're going to do is we're going to go to our product.", 'start': 2125.592, 'duration': 3.502}], 'summary': "Styling the 'add to basket' button to improve appearance in product css.", 'duration': 26.953, 'max_score': 2102.141, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pxWe-nlOSY4/pics/pxWe-nlOSY42102141.jpg'}, {'end': 2365.708, 'src': 'embed', 'start': 2335.966, 'weight': 0, 'content': [{'end': 2337.407, 'text': 'So that is the product.', 'start': 2335.966, 'duration': 1.441}, {'end': 2339.628, 'text': 'Okay So we have the product right here.', 'start': 2337.567, 'duration': 2.061}, {'end': 2350.637, 'text': "And what we're going to do next is we are going to go ahead and go to the go to home and for each of these products, right?", 'start': 2340.309, 'duration': 10.328}, {'end': 2356.501, 'text': 'So we have this product right here, but for each of these products, let me go ahead and go over to home.js.', 'start': 2350.657, 'duration': 5.844}, {'end': 2358.303, 'text': 'So where am I? Home.js.', 'start': 2356.621, 'duration': 1.682}, {'end': 2362.145, 'text': 'And we still have over 1500 people watching.', 'start': 2359.083, 'duration': 3.062}, {'end': 2363.486, 'text': 'So you guys are awesome.', 'start': 2362.185, 'duration': 1.301}, {'end': 2365.708, 'text': "Let's keep this energy high guys.", 'start': 2364.027, 'duration': 1.681}], 'summary': '1500 people are watching as the speaker discusses a product and home.js', 'duration': 29.742, 'max_score': 2335.966, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pxWe-nlOSY4/pics/pxWe-nlOSY42335966.jpg'}], 'start': 1959.138, 'title': 'E-commerce website styling', 'summary': "Demonstrates styling an e-commerce website, adding an 'add to basket' button, and applying css to make the product page visually appealing, with over 1500 people watching the live demonstration.", 'chapters': [{'end': 2051.88, 'start': 1959.138, 'title': 'Creating p tag and adding image in demo', 'summary': 'Demonstrates creating a p tag with stars and adding an image of the product outside the product info, while also encouraging engagement with the audience.', 'duration': 92.742, 'highlights': ['The chapter demonstrates creating a P tag with stars.', 'Adding an image of the product outside the product info.', 'Encouraging engagement with the audience by asking them to like and share the video.']}, {'end': 2450.397, 'start': 2052.422, 'title': 'Building e-commerce website styling', 'summary': "Demonstrates styling an e-commerce website, adding a 'add to basket' button and applying css to make the product page visually appealing, with over 1500 people watching the live demonstration.", 'duration': 397.975, 'highlights': ['Demonstrating styling for e-commerce website The chapter demonstrates the process of styling an e-commerce website to improve its visual appeal.', "Adding 'add to basket' button The chapter illustrates the addition of an 'add to basket' button on the website.", 'Applying CSS to improve visual appeal The live demonstration includes applying CSS to enhance the visual appeal of the product page.', 'Live demonstration with over 1500 viewers The demonstration was viewed live by over 1500 people, showcasing a high level of interest in the topic.']}], 'duration': 491.259, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pxWe-nlOSY4/pics/pxWe-nlOSY41959138.jpg', 'highlights': ['Live demonstration with over 1500 viewers The demonstration was viewed live by over 1500 people, showcasing a high level of interest in the topic.', 'Applying CSS to improve visual appeal The live demonstration includes applying CSS to enhance the visual appeal of the product page.', "Adding 'add to basket' button The chapter illustrates the addition of an 'add to basket' button on the website.", 'Demonstrating styling for e-commerce website The chapter demonstrates the process of styling an e-commerce website to improve its visual appeal.', 'Encouraging engagement with the audience by asking them to like and share the video.', 'Adding an image of the product outside the product info.', 'The chapter demonstrates creating a P tag with stars.']}, {'end': 2985.965, 'segs': [{'end': 2494.442, 'src': 'embed', 'start': 2451.377, 'weight': 2, 'content': [{'end': 2455.62, 'text': 'So yeah, we added that little piece of code in which protects us against that max width issue.', 'start': 2451.377, 'duration': 4.243}, {'end': 2461.984, 'text': "The next thing we are going to go ahead and do, so we're going to go back to our code is we're going to go ahead and target that row.", 'start': 2456.501, 'duration': 5.483}, {'end': 2466.527, 'text': "Okay So here I'm going to say home row.", 'start': 2462.004, 'duration': 4.523}, {'end': 2472.049, 'text': "So I'm going to target the, so if we go into our home component, you can see everything sits inside of a home row.", 'start': 2466.787, 'duration': 5.262}, {'end': 2481.133, 'text': "Let's go back into home.css and we can say display flex Z index of one, margin left five pixels, margin right five pixels, save the file and boom.", 'start': 2472.669, 'duration': 8.464}, {'end': 2486.036, 'text': "So you see, That's actually a magic piece of code where that kicks in,", 'start': 2481.453, 'duration': 4.583}, {'end': 2492.7, 'text': 'because what that did is that actually allowed us to then go ahead and it will use up the entire space that it needs to use up,', 'start': 2486.036, 'duration': 6.664}, {'end': 2494.442, 'text': 'and it does all of the things it needs to do.', 'start': 2492.7, 'duration': 1.742}], 'summary': 'Added code to protect against max width issue, targeted row with display flex, z index of 1, margin left/right 5px.', 'duration': 43.065, 'max_score': 2451.377, 'thumbnail': ''}, {'end': 2606.843, 'src': 'embed', 'start': 2578.969, 'weight': 1, 'content': [{'end': 2582.351, 'text': 'You can give it a width of whatever you want it to at this point.', 'start': 2578.969, 'duration': 3.382}, {'end': 2587.514, 'text': "But we're going to keep it as what it was for now.", 'start': 2583.552, 'duration': 3.962}, {'end': 2596.541, 'text': "here we have two product components, um, and they're rendering out as required.", 'start': 2590.7, 'duration': 5.841}, {'end': 2598.702, 'text': 'So if I go ahead and add a third, look what happens guys.', 'start': 2596.561, 'duration': 2.141}, {'end': 2602.583, 'text': 'It just does it in a very responsive way at a fourth.', 'start': 2600.082, 'duration': 2.501}, {'end': 2603.863, 'text': "It's going to figure it out.", 'start': 2603.123, 'duration': 0.74}, {'end': 2604.743, 'text': "It's going to do that thing.", 'start': 2603.923, 'duration': 0.82}, {'end': 2606.843, 'text': "It's going to make it work in the way that we expect it to.", 'start': 2604.843, 'duration': 2}], 'summary': 'Product components render responsively, adding a third component triggers a responsive adjustment.', 'duration': 27.874, 'max_score': 2578.969, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pxWe-nlOSY4/pics/pxWe-nlOSY42578969.jpg'}, {'end': 2952.642, 'src': 'embed', 'start': 2920.864, 'weight': 0, 'content': [{'end': 2924.986, 'text': "This is why I personally love React and it's one of the reasons why React has taken off so well.", 'start': 2920.864, 'duration': 4.122}, {'end': 2928.348, 'text': "So I'm going to go ahead and create this again.", 'start': 2926.427, 'duration': 1.921}, {'end': 2930.749, 'text': 'So now we have the title pulling in here.', 'start': 2928.368, 'duration': 2.381}, {'end': 2936.751, 'text': "So you can see now these ones aren't showing a title because I've only passed props to the first one, which makes sense.", 'start': 2930.769, 'duration': 5.982}, {'end': 2940.373, 'text': "So the second one, we don't want it to be a 1999.", 'start': 2937.492, 'duration': 2.881}, {'end': 2946.617, 'text': "I want this one to say Price, so this one's gonna say price.", 'start': 2940.373, 'duration': 6.244}, {'end': 2952.642, 'text': "Save it and then here, rather than doing one star, I'm gonna show you guys a nice little trick, okay?", 'start': 2947.378, 'duration': 5.264}], 'summary': "React's popularity is due to its flexibility and ease of use.", 'duration': 31.778, 'max_score': 2920.864, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pxWe-nlOSY4/pics/pxWe-nlOSY42920864.jpg'}], 'start': 2451.377, 'title': 'React component customization', 'summary': 'Discusses customizing react components using props, focusing on rendering and styling products while leveraging debugging tricks and responsive design, showcasing the efficient and reusable nature of react.', 'chapters': [{'end': 2494.442, 'start': 2451.377, 'title': 'Fixing max width issue and implementing flex display', 'summary': 'Discusses adding code to protect against a max width issue and implementing flex display to ensure elements use up the entire space needed, with a z index of one, margin left and right of five pixels.', 'duration': 43.065, 'highlights': ['Implementing flex display with specific styling properties such as Z index of one, margin left and right of five pixels.', 'Adding code to protect against a max width issue, ensuring elements use up the entire space needed.']}, {'end': 2985.965, 'start': 2496.383, 'title': 'React component customization', 'summary': 'Discusses customizing react components using props, demonstrating the efficient and reusable nature of react, with a focus on rendering and styling products while leveraging debugging tricks and responsive design.', 'duration': 489.582, 'highlights': ['Demonstrating efficient and reusable nature of React using props for component customization The transcript extensively discusses the usage of props in customizing React components, showcasing the efficient and reusable nature of React.', 'Rendering and styling products with responsive design and debugging tricks The speaker showcases the rendering and styling of products, while also demonstrating the usage of responsive design and debugging tricks to optimize the visual presentation.']}], 'duration': 534.588, 'thumbnail': '', 'highlights': ['Demonstrating efficient and reusable nature of React using props for component customization', 'Rendering and styling products with responsive design and debugging tricks', 'Implementing flex display with specific styling properties such as Z index of one, margin left and right of five pixels', 'Adding code to protect against a max width issue, ensuring elements use up the entire space needed']}, {'end': 4324.765, 'segs': [{'end': 3103.842, 'src': 'embed', 'start': 3082.441, 'weight': 0, 'content': [{'end': 3091.51, 'text': 'So now, guys, this is really cool now, because if we go back to our home and we see if I change the rating to a three, you can see, look at that,', 'start': 3082.441, 'duration': 9.069}, {'end': 3092.231, 'text': 'it changed to a three.', 'start': 3091.51, 'duration': 0.721}, {'end': 3094.393, 'text': "Now guys, if that's pretty cool, let me know.", 'start': 3092.571, 'duration': 1.822}, {'end': 3096.835, 'text': 'This is a clear demonstration of how props work.', 'start': 3094.673, 'duration': 2.162}, {'end': 3099.978, 'text': "So you've got four and if I do five, you've got five stars.", 'start': 3096.855, 'duration': 3.123}, {'end': 3102.561, 'text': "I mean, if we do 10, I mean, you're going to get 10 stars.", 'start': 3100.359, 'duration': 2.202}, {'end': 3103.842, 'text': 'So it works pretty nice.', 'start': 3102.821, 'duration': 1.021}], 'summary': 'Demonstration of props with star rating up to 10.', 'duration': 21.401, 'max_score': 3082.441, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pxWe-nlOSY4/pics/pxWe-nlOSY43082441.jpg'}, {'end': 3388.802, 'src': 'embed', 'start': 3357.96, 'weight': 1, 'content': [{'end': 3362.624, 'text': 'so this page is where all of the exciting, interesting stuff happens right.', 'start': 3357.96, 'duration': 4.664}, {'end': 3370.37, 'text': "so now, because we have all of this basket removing functionality, it's very dynamic, it's very optimized and it can do a lot of stuff.", 'start': 3362.624, 'duration': 7.746}, {'end': 3378.736, 'text': "OK, so what we're going to do now is we're going to, in order to have two pages in a website, you need something called React Router.", 'start': 3371.451, 'duration': 7.285}, {'end': 3388.802, 'text': "OK, now what React Router does is it allows you to notice how on this website when I'm actually see if we notice the top URL.", 'start': 3378.756, 'duration': 10.046}], 'summary': 'Discussion about dynamic and optimized functionality using react router for website pages.', 'duration': 30.842, 'max_score': 3357.96, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pxWe-nlOSY4/pics/pxWe-nlOSY43357960.jpg'}, {'end': 4283.426, 'src': 'embed', 'start': 4254.89, 'weight': 3, 'content': [{'end': 4257.794, 'text': 'So as soon as I click it, boom, we go back to the home page.', 'start': 4254.89, 'duration': 2.904}, {'end': 4258.815, 'text': "That's awesome.", 'start': 4258.014, 'duration': 0.801}, {'end': 4261.759, 'text': "That's slick and that was easy to implement guys.", 'start': 4258.975, 'duration': 2.784}, {'end': 4264.4, 'text': 'Yeah, so you see that was super easy to implement.', 'start': 4262.359, 'duration': 2.041}, {'end': 4268.041, 'text': "And what I'm going to show you is also another very easy thing to do.", 'start': 4264.44, 'duration': 3.601}, {'end': 4271.722, 'text': 'And that lies over here.', 'start': 4268.601, 'duration': 3.121}, {'end': 4275.283, 'text': "So let's go ahead and well, I want it to happen at the basket as well.", 'start': 4271.842, 'duration': 3.441}, {'end': 4278.184, 'text': 'So when I click this basket takes us to that basket page.', 'start': 4275.303, 'duration': 2.881}, {'end': 4283.426, 'text': 'So as you guys might guess it, we go here, we type in link like so.', 'start': 4278.564, 'duration': 4.862}], 'summary': 'Implementing homepage redirection and basket page link was easy and slick.', 'duration': 28.536, 'max_score': 4254.89, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pxWe-nlOSY4/pics/pxWe-nlOSY44254890.jpg'}], 'start': 2986.385, 'title': 'React website development', 'summary': 'Demonstrates rendering product details using react props, building the next page with react router, and implementing efficient routing components. it emphasizes the importance of react router for dynamic page navigation and highlights the ease of implementing functionalities in the code.', 'chapters': [{'end': 3221.514, 'start': 2986.385, 'title': 'React props and rendering demo', 'summary': 'Demonstrates how to use props to render product details, including rating and image, in a react application, with a clear demonstration of how props work and the flexibility to render varying numbers of stars based on the rating.', 'duration': 235.129, 'highlights': ['The chapter demonstrates how to use props to render product details, including rating and image, in a React application, with a clear demonstration of how props work and the flexibility to render varying numbers of stars based on the rating.', 'The instructor showcases the use of arrow functions and mapping to render product ratings dynamically, emphasizing the flexibility to render varying numbers of stars based on the rating, such as rendering three, four, five, or even ten stars based on the provided rating.', 'The chapter also emphasizes the flexibility to render varying numbers of stars based on the rating, such as rendering three, four, five, or even ten stars based on the provided rating, showcasing the dynamic nature of the rendering process and the application of props in React components.', 'The instructor highlights the process of dynamically rendering product details, including the use of props to render product rating and image, showcasing the flexibility to render varying numbers of stars based on the rating, such as rendering three, four, five, or even ten stars based on the provided rating.']}, {'end': 3448.9, 'start': 3223.656, 'title': 'Building react website: next page & react router', 'summary': 'Focuses on building the next page of a react website and implementing react router functionality, emphasizing the quick creation of the front page and the importance of react router for dynamic page navigation, with a call to action for viewers to complete the challenge for potential job opportunities.', 'duration': 225.244, 'highlights': ['The chapter emphasizes the quick creation of the front page, showcasing the power of React in website development.', 'Implementing React Router functionality is highlighted as crucial for dynamic page navigation, demonstrated with the example of changing URLs when navigating different sections of the website.', 'The speaker encourages viewers to complete the challenge, emphasizing that finishing the work by the end of the challenge is essential to be a part of the prize draw and can lead to job opportunities.']}, {'end': 3852.304, 'start': 3448.96, 'title': 'Implementing react router', 'summary': 'Covers the implementation of react router, including the installation process, routing components, and the usage of switch statements for different routes. the implementation allows for dynamic rendering of components based on the route and emphasizes the importance of organizing the code structure efficiently.', 'duration': 403.344, 'highlights': ['The chapter covers the implementation of React Router, including the installation process, routing components, and the usage of switch statements for different routes. The chapter provides detailed guidance on implementing React Router, covering the installation of React Router DOM and the utilization of switch statements for defining specific routes.', 'The implementation allows for dynamic rendering of components based on the route. The implementation enables dynamic rendering of components based on different routes, allowing for a more interactive and customizable user experience.', 'The chapter emphasizes the importance of organizing the code structure efficiently. The chapter highlights the significance of organizing the code structure efficiently, such as rendering components based on specific routes and avoiding code repetition to optimize development efforts.']}, {'end': 4324.765, 'start': 3854.761, 'title': 'Creating checkout page', 'summary': 'Covers the process of creating a checkout page with two sections, implementing an image, rendering the shopping basket, and enabling clickable links using react. it also highlights the impressive audience engagement and the ease of implementing functionalities in the code.', 'duration': 470.004, 'highlights': ['The chapter covers the process of creating a checkout page with two sections, implementing an image, rendering the shopping basket, and enabling clickable links using React.', 'Impressive audience engagement and commitment demonstrated by the 16,000+ viewers, reflecting powerful and moving energy.', 'Demonstrates the ease of implementing functionalities, such as making an image clickable and enabling a link to redirect to the homepage, emphasizing the simplicity of implementing features in the code.', 'Explanation of implementing the subtotal component and receiving positive feedback on the clarity and simplicity of the explanation, showcasing the effective communication of complex concepts.', 'Detailed CSS adjustments for the checkout page, including setting display properties, padding, background color, and height, demonstrating attention to detail in the design and layout of the page.']}], 'duration': 1338.38, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pxWe-nlOSY4/pics/pxWe-nlOSY42986385.jpg', 'highlights': ['The chapter demonstrates how to use props to render product details, including rating and image, in a React application, with a clear demonstration of how props work and the flexibility to render varying numbers of stars based on the rating.', 'The chapter emphasizes the importance of organizing the code structure efficiently, such as rendering components based on specific routes and avoiding code repetition to optimize development efforts.', 'Implementing React Router functionality is highlighted as crucial for dynamic page navigation, demonstrated with the example of changing URLs when navigating different sections of the website.', 'Demonstrates the ease of implementing functionalities, such as making an image clickable and enabling a link to redirect to the homepage, emphasizing the simplicity of implementing features in the code.']}, {'end': 4971.772, 'segs': [{'end': 4353.188, 'src': 'embed', 'start': 4325.245, 'weight': 4, 'content': [{'end': 4329.587, 'text': "It's super, super quick and that's why we love reactor inside of react.", 'start': 4325.245, 'duration': 4.342}, {'end': 4335.25, 'text': 'Okay, so carrying on strong, still over 1500 people love and appreciate you guys.', 'start': 4330.067, 'duration': 5.183}, {'end': 4337.851, 'text': 'Uh, this energy is insane right now.', 'start': 4335.81, 'duration': 2.041}, {'end': 4340.012, 'text': "Um, let's keep on going guys.", 'start': 4338.532, 'duration': 1.48}, {'end': 4344.12, 'text': "So so let's go ahead.", 'start': 4340.292, 'duration': 3.828}, {'end': 4349.725, 'text': "and now what we're going to do is we're going to go to our shopping basket and now i guess the next step, naturally, guys,", 'start': 4344.12, 'duration': 5.605}, {'end': 4353.188, 'text': "is what we're going to do is i'm first i'm going to create the subtotal component.", 'start': 4349.725, 'duration': 3.463}], 'summary': 'Reactor inside react is super quick. over 1500 people appreciate the energy. creating the subtotal component next.', 'duration': 27.943, 'max_score': 4325.245, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pxWe-nlOSY4/pics/pxWe-nlOSY44325245.jpg'}, {'end': 4428.719, 'src': 'embed', 'start': 4400.415, 'weight': 2, 'content': [{'end': 4406.8, 'text': "subtotal.css, save the file, put it back and let's go ahead and code this up.", 'start': 4400.415, 'duration': 6.385}, {'end': 4414.347, 'text': "So what I'm going to use is actually a really nice library called React currency format.", 'start': 4407.321, 'duration': 7.026}, {'end': 4417.529, 'text': "so, in order to install this, it's very simple, guys.", 'start': 4414.847, 'duration': 2.682}, {'end': 4421.113, 'text': 'all you need to do is go ahead and go open up your terminal.', 'start': 4417.529, 'duration': 3.584}, {'end': 4422.734, 'text': 'so command j is my little shortcut.', 'start': 4421.113, 'duration': 1.621}, {'end': 4423.635, 'text': 'do npm?', 'start': 4422.734, 'duration': 0.901}, {'end': 4425.016, 'text': 'i do react.', 'start': 4423.635, 'duration': 1.381}, {'end': 4425.997, 'text': 'currency format.', 'start': 4425.016, 'duration': 0.981}, {'end': 4428.719, 'text': 'this will go ahead and import.', 'start': 4425.997, 'duration': 2.722}], 'summary': 'Using react currency format library to format currency in a simple installation process.', 'duration': 28.304, 'max_score': 4400.415, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pxWe-nlOSY4/pics/pxWe-nlOSY44400415.jpg'}, {'end': 4481.848, 'src': 'embed', 'start': 4455.393, 'weight': 3, 'content': [{'end': 4464.778, 'text': "OK. so what we're going to do now is and if you guys are interesting and getting exciting getting excited because we are going to be covering react context API.", 'start': 4455.393, 'duration': 9.385}, {'end': 4473.263, 'text': 'So if you guys have been wanting to know about react or Redux, then let me know in the comment section right now,', 'start': 4464.858, 'duration': 8.405}, {'end': 4481.848, 'text': "because Redux is on fire and I'm going to show you guys how to go ahead and learn all of that beautiful stuff with the react context API.", 'start': 4473.263, 'duration': 8.585}], 'summary': 'Covering react context api and how to learn it alongside redux.', 'duration': 26.455, 'max_score': 4455.393, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pxWe-nlOSY4/pics/pxWe-nlOSY44455393.jpg'}, {'end': 4599.222, 'src': 'heatmap', 'start': 4527.282, 'weight': 0.835, 'content': [{'end': 4532.548, 'text': "So let's go back over to, uh, I'm going to say zero items.", 'start': 4527.282, 'duration': 5.266}, {'end': 4533.929, 'text': 'There we go.', 'start': 4533.509, 'duration': 0.42}, {'end': 4539.16, 'text': "Okay And then here I'm also going to say, zero.", 'start': 4533.949, 'duration': 5.211}, {'end': 4544.402, 'text': "Okay Now let's go to our checkout page.", 'start': 4539.18, 'duration': 5.222}, {'end': 4550.344, 'text': "Let's render our subtotal by doing auto import, which imports it at the top of the page, save it.", 'start': 4544.842, 'duration': 5.502}, {'end': 4553.004, 'text': 'And what we can see now is it says get by.', 'start': 4551.004, 'duration': 2}, {'end': 4556.045, 'text': "Okay So let's go ahead and actually fix some of this.", 'start': 4553.064, 'duration': 2.981}, {'end': 4559.306, 'text': "So this right now, let's say a value of zero.", 'start': 4556.085, 'duration': 3.221}, {'end': 4564.048, 'text': 'And this also is freaking out because it says cannot resolve subtotal.css.', 'start': 4559.946, 'duration': 4.102}, {'end': 4567.469, 'text': "So let's go ahead and make that file subtotal.css.", 'start': 4564.068, 'duration': 3.401}, {'end': 4568.089, 'text': 'Save it.', 'start': 4567.809, 'duration': 0.28}, {'end': 4571.39, 'text': 'I see so many people asking about photo structures.', 'start': 4569.109, 'duration': 2.281}, {'end': 4573.51, 'text': "Guys, don't worry about the photo structures.", 'start': 4571.43, 'duration': 2.08}, {'end': 4578.792, 'text': 'Just get the content down and that is going to be much more important than having fancy photos.', 'start': 4573.55, 'duration': 5.242}, {'end': 4580.312, 'text': 'Okay, so screw all that stuff.', 'start': 4578.892, 'duration': 1.42}, {'end': 4584.253, 'text': 'Focus on the actual learning and everything behind it.', 'start': 4580.712, 'duration': 3.541}, {'end': 4592.638, 'text': 'Okay, so right, so you saw that worked and you can see we have this subtotal over here on the right hand side.', 'start': 4584.313, 'duration': 8.325}, {'end': 4594.339, 'text': 'so we want to get that looking like that.', 'start': 4592.638, 'duration': 1.701}, {'end': 4596.84, 'text': 'okay, we want it to look like this.', 'start': 4594.339, 'duration': 2.501}, {'end': 4599.222, 'text': 'okay, so how do we get it to look like that?', 'start': 4596.84, 'duration': 2.382}], 'summary': 'Troubleshooting and fixing issues with rendering subtotal, emphasizing content over photo structures.', 'duration': 71.94, 'max_score': 4527.282, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pxWe-nlOSY4/pics/pxWe-nlOSY44527282.jpg'}, {'end': 4633.209, 'src': 'embed', 'start': 4604.245, 'weight': 0, 'content': [{'end': 4606.067, 'text': "Let's quickly explain a few of these things.", 'start': 4604.245, 'duration': 1.822}, {'end': 4610.071, 'text': "We'll come to render text in a second, but here we're saying decimal scale of two.", 'start': 4606.708, 'duration': 3.363}, {'end': 4612.674, 'text': 'Go to a T, two decimal places.', 'start': 4610.772, 'duration': 1.902}, {'end': 4614.736, 'text': 'For example, here, two decimal places.', 'start': 4613.074, 'duration': 1.662}, {'end': 4619.32, 'text': 'The value, this is the amount getting passed in here.', 'start': 4615.416, 'duration': 3.904}, {'end': 4622.403, 'text': 'This is going to be part of your homework, guys.', 'start': 4619.921, 'duration': 2.482}, {'end': 4624.786, 'text': 'This is going to be part of the homework.', 'start': 4622.423, 'duration': 2.363}, {'end': 4628.028, 'text': 'I want you guys to try and figure this one out.', 'start': 4626.547, 'duration': 1.481}, {'end': 4629.848, 'text': 'See how you guys can implement that.', 'start': 4628.508, 'duration': 1.34}, {'end': 4631.689, 'text': 'Display type is text.', 'start': 4630.268, 'duration': 1.421}, {'end': 4633.209, 'text': 'We can leave that thousand separate.', 'start': 4631.789, 'duration': 1.42}], 'summary': 'Explaining decimal scale of two, part of homework, implement display type as text.', 'duration': 28.964, 'max_score': 4604.245, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pxWe-nlOSY4/pics/pxWe-nlOSY44604245.jpg'}, {'end': 4887.766, 'src': 'embed', 'start': 4857.171, 'weight': 1, 'content': [{'end': 4858.112, 'text': "Let's click save.", 'start': 4857.171, 'duration': 0.941}, {'end': 4861.354, 'text': 'And then you can see it, it went and aligned it centrally.', 'start': 4858.332, 'duration': 3.022}, {'end': 4864.796, 'text': "Now I'm going to go ahead and target the input field.", 'start': 4861.994, 'duration': 2.802}, {'end': 4867.237, 'text': "I'm going to say, give it a margin, right? Five pixels.", 'start': 4864.856, 'duration': 2.381}, {'end': 4868.498, 'text': "So it's slightly pushed it away.", 'start': 4867.257, 'duration': 1.241}, {'end': 4871.92, 'text': 'And then I want to get the Amazon button styling down.', 'start': 4869.098, 'duration': 2.822}, {'end': 4877.463, 'text': "So it looks like the Amazon button and Hey, somebody says clean as Sonny's hairstyle.", 'start': 4872.36, 'duration': 5.103}, {'end': 4877.923, 'text': 'Thank you, dude.', 'start': 4877.483, 'duration': 0.44}, {'end': 4881.344, 'text': "So subtotal, we're going to target the button inside.", 'start': 4879.083, 'duration': 2.261}, {'end': 4884.985, 'text': "We're going to say background of this beautiful Amazon orange.", 'start': 4881.364, 'duration': 3.621}, {'end': 4887.766, 'text': "And we're going to say back border radius right here.", 'start': 4885.005, 'duration': 2.761}], 'summary': 'Styling the webpage: aligned centrally, margins of 5 pixels, amazon button styling with an orange background and border radius.', 'duration': 30.595, 'max_score': 4857.171, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pxWe-nlOSY4/pics/pxWe-nlOSY44857171.jpg'}], 'start': 4325.245, 'title': 'Reactor inside of react', 'summary': "Discusses creating a 'subtotal' component using react currency format library, emphasizing the simplicity in rendering money and hyping up the upcoming coverage of react context api and redux.", 'chapters': [{'end': 4602.484, 'start': 4325.245, 'title': 'Reactor inside of react', 'summary': "Discusses creating a 'subtotal' component using react currency format library, emphasizing the simplicity in rendering money and hyping up the upcoming coverage of react context api and redux.", 'duration': 277.239, 'highlights': ["The chapter discusses creating a 'subtotal' component using React currency format library, emphasizing the simplicity in rendering money.", 'Over 1500 people are participating and appreciating the content.', 'Upcoming coverage of react context API and Redux is hyped up.']}, {'end': 4971.772, 'start': 4604.245, 'title': 'Rendering text and styling ui', 'summary': 'Covers rendering text with decimal scale, implementing display type, prefix, and dynamic rendering in ui; also styling ui with css, targeting elements, aligning items, and button styling.', 'duration': 367.527, 'highlights': ['The chapter covers rendering text with decimal scale, implementing display type, prefix, and dynamic rendering in UI. The chapter focuses on rendering text with decimal scale of two, implementing display type as text, using dollars as prefix, and dynamic rendering of items and price in the UI.', 'Styling UI with CSS, targeting elements, aligning items, and button styling are also covered. The chapter explains styling UI with CSS, targeting and aligning elements, and applying button styling to achieve a clean and visually appealing UI.']}], 'duration': 646.527, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pxWe-nlOSY4/pics/pxWe-nlOSY44325245.jpg', 'highlights': ['The chapter covers rendering text with decimal scale, implementing display type, prefix, and dynamic rendering in UI.', 'Styling UI with CSS, targeting elements, aligning items, and button styling are also covered.', "The chapter discusses creating a 'subtotal' component using React currency format library, emphasizing the simplicity in rendering money.", 'Upcoming coverage of React context API and Redux is hyped up.', 'Over 1500 people are participating and appreciating the content.']}, {'end': 5528.748, 'segs': [{'end': 5028.242, 'src': 'embed', 'start': 5002.119, 'weight': 1, 'content': [{'end': 5007.924, 'text': "so let's go ahead and see we can add items to the basket, we can remove items and we can do loads of stuff as such.", 'start': 5002.119, 'duration': 5.805}, {'end': 5015.55, 'text': "okay, so this is going to be awesome and this is going to be part of today's um implementation.", 'start': 5007.924, 'duration': 7.626}, {'end': 5017.812, 'text': 'okay, so what i think?', 'start': 5015.55, 'duration': 2.262}, {'end': 5020.535, 'text': "actually It's actually yeah, okay, let's go ahead and do it, okay?", 'start': 5017.812, 'duration': 2.723}, {'end': 5025.48, 'text': 'So what we have now is the React context API.', 'start': 5020.975, 'duration': 4.505}, {'end': 5028.242, 'text': 'Now we have all of our apps right here.', 'start': 5025.84, 'duration': 2.402}], 'summary': 'Implementing react context api for app management.', 'duration': 26.123, 'max_score': 5002.119, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pxWe-nlOSY4/pics/pxWe-nlOSY45002119.jpg'}, {'end': 5407.917, 'src': 'embed', 'start': 5378.298, 'weight': 0, 'content': [{'end': 5382.741, 'text': 'She says, so that every component can get access to the data layer.', 'start': 5378.298, 'duration': 4.443}, {'end': 5394.59, 'text': 'Yes, This is why we want a data layer, so that every single component can have access to that data layer, which means that if we push information in,', 'start': 5382.761, 'duration': 11.829}, {'end': 5399.794, 'text': 'then we can basically go ahead and pull information out wherever we are inside of our app.', 'start': 5394.59, 'duration': 5.204}, {'end': 5403.355, 'text': 'So this is why we actually need to go ahead and use that.', 'start': 5400.934, 'duration': 2.421}, {'end': 5407.917, 'text': 'So with that said, we have that pretty much working.', 'start': 5405.396, 'duration': 2.521}], 'summary': 'Implementing a data layer allows all components to access and utilize data effectively.', 'duration': 29.619, 'max_score': 5378.298, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pxWe-nlOSY4/pics/pxWe-nlOSY45378298.jpg'}, {'end': 5498.38, 'src': 'embed', 'start': 5467.219, 'weight': 2, 'content': [{'end': 5472.062, 'text': 'right, so a reducer is essentially when we have this data layer, right.', 'start': 5467.219, 'duration': 4.843}, {'end': 5481.388, 'text': 'so when we have this data layer that we spoke about earlier, a reducer is essentially how we are able to you see this arrow right here.', 'start': 5472.062, 'duration': 9.326}, {'end': 5486.412, 'text': 'how are we able to actually dispatch this action into the data layer?', 'start': 5481.388, 'duration': 5.024}, {'end': 5490.755, 'text': 'okay, so when i click an add to basket button, so when i click a button like this,', 'start': 5486.412, 'duration': 4.343}, {'end': 5498.38, 'text': 'how does it then go and dispatch the action into the data layer and how do i actually go ahead and pull it Right?', 'start': 5490.755, 'duration': 7.625}], 'summary': 'A reducer dispatches actions to the data layer.', 'duration': 31.161, 'max_score': 5467.219, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pxWe-nlOSY4/pics/pxWe-nlOSY45467219.jpg'}], 'start': 4975.123, 'title': 'React context api implementation and state provider', 'summary': 'Covers the implementation of the react context api, enabling seamless data sharing across components and providing steps for creating the state provider. it also discusses the implementation of state provider and reducer in a data layer, enabling every component to access, manipulate, and update data within the app.', 'chapters': [{'end': 5329.428, 'start': 4975.123, 'title': 'React context api implementation', 'summary': 'Covers the implementation of the react context api to allow adding and removing items from the basket, enabling seamless data sharing across components, and providing steps for creating the state provider.', 'duration': 354.305, 'highlights': ['The implementation of the React Context API allows for adding and removing items from the basket, providing enhanced functionality. Enhanced functionality for adding and removing items from the basket.', 'The React Context API enables seamless data sharing across components, allowing easy access to the data layer from different parts of the application. Seamless data sharing across components for easy access to the data layer.', 'Steps for creating the state provider are provided, offering guidance for setting up the data layer and wrapping the app to provide the data layer to every component. Guidance for creating the state provider to set up the data layer and provide it to every component.']}, {'end': 5528.748, 'start': 5329.788, 'title': 'Implementing state provider and reducer', 'summary': 'Discusses the implementation of state provider and reducer in a data layer, enabling every component to access, manipulate, and update data within the app, with a focus on creating the initial state and understanding the role of the reducer in dispatching actions.', 'duration': 198.96, 'highlights': ['The data layer enables every component to access, manipulate, and update data within the app, ensuring information can be pushed in and pulled out from anywhere in the application. The data layer allows access and manipulation of data across all components, ensuring seamless information flow.', 'Creating the initial state with an empty basket and understanding the role of the reducer in dispatching actions into the data layer. Creating the initial state with an empty basket is essential for understanding how the reducer dispatches actions into the data layer.', 'The reducer plays a crucial part in dispatching actions into the data layer, allowing for the addition of products to the basket and updating the data layer accordingly. The reducer dispatches actions into the data layer, facilitating the addition of products to the basket and updating the data layer.']}], 'duration': 553.625, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pxWe-nlOSY4/pics/pxWe-nlOSY44975123.jpg', 'highlights': ['The data layer allows access and manipulation of data across all components, ensuring seamless information flow.', 'The implementation of the React Context API allows for adding and removing items from the basket, providing enhanced functionality.', 'The reducer dispatches actions into the data layer, facilitating the addition of products to the basket and updating the data layer.']}, {'end': 6088.801, 'segs': [{'end': 5568.546, 'src': 'embed', 'start': 5529.789, 'weight': 0, 'content': [{'end': 5534.313, 'text': "So what we're going to do is we're going to go back to our reducer and hear what we are going to say.", 'start': 5529.789, 'duration': 4.524}, {'end': 5541.176, 'text': 'So the context API and Redux are not the same thing, but they are the same pattern.', 'start': 5534.793, 'duration': 6.383}, {'end': 5549.441, 'text': 'OK, so both use this idea of a store like basically a global store for your application.', 'start': 5541.196, 'duration': 8.245}, {'end': 5558.363, 'text': 'And then you basically have this pattern of dispatching actions into this store and the reducer just listens and says okay, you just updated a basket.', 'start': 5550.101, 'duration': 8.262}, {'end': 5559.203, 'text': 'All right, I know what to do.', 'start': 5558.483, 'duration': 0.72}, {'end': 5561.504, 'text': 'Okay, you just removed an item from the basket.', 'start': 5559.764, 'duration': 1.74}, {'end': 5562.124, 'text': 'I know what to do.', 'start': 5561.584, 'duration': 0.54}, {'end': 5562.944, 'text': "Don't worry.", 'start': 5562.484, 'duration': 0.46}, {'end': 5564.345, 'text': "Like that's what the reducer is doing.", 'start': 5563.004, 'duration': 1.341}, {'end': 5568.546, 'text': 'Okay So at this point, in order to write the reducer, we need to do the following.', 'start': 5564.365, 'duration': 4.181}], 'summary': 'Context api and redux use a store for global application state and dispatch actions to the reducer.', 'duration': 38.757, 'max_score': 5529.789, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pxWe-nlOSY4/pics/pxWe-nlOSY45529789.jpg'}, {'end': 5730.89, 'src': 'heatmap', 'start': 5655.836, 'weight': 1, 'content': [{'end': 5661.899, 'text': 'So whatever it currently was plus whatever we actually decided to add.', 'start': 5655.836, 'duration': 6.063}, {'end': 5666.561, 'text': 'So the action dot item that you passed inside of the action.', 'start': 5661.959, 'duration': 4.602}, {'end': 5669.222, 'text': 'Okay So this will make a lot of sense shortly.', 'start': 5666.601, 'duration': 2.621}, {'end': 5683.685, 'text': 'Okay Um, Now, what we are going to do is we are going to go ahead and actually export the reducer.', 'start': 5669.242, 'duration': 14.443}, {'end': 5685.868, 'text': "We're going to go ahead and export the reducer.", 'start': 5683.986, 'duration': 1.882}, {'end': 5689.812, 'text': 'We also want to have something called a default state.', 'start': 5685.888, 'duration': 3.924}, {'end': 5690.813, 'text': 'Default state.', 'start': 5689.993, 'duration': 0.82}, {'end': 5694.458, 'text': "Here, I'm going to go ahead and say default return state.", 'start': 5691.474, 'duration': 2.984}, {'end': 5700.44, 'text': "Now guys, again, this you don't need to really know exactly what this does, but at this point we need to go ahead and hook it up.", 'start': 5694.818, 'duration': 5.622}, {'end': 5706.401, 'text': 'Okay, so go up to this reducer, go ahead and control spacebar auto import done.', 'start': 5700.54, 'duration': 5.861}, {'end': 5712.043, 'text': 'Okay, so guys, all you need to do is just copy those steps, copy those steps and everything will be okay.', 'start': 5706.421, 'duration': 5.622}, {'end': 5720.826, 'text': 'and you should get to the point where the state provider is not defined, so we need to go ahead and import the state provider as such, so save that.', 'start': 5712.723, 'duration': 8.103}, {'end': 5724.668, 'text': 'Guys, at this point, if I go ahead and do this now,', 'start': 5721.426, 'duration': 3.242}, {'end': 5730.89, 'text': 'we need to connect our add to basket to basically go ahead and push something inside of the data layer.', 'start': 5724.668, 'duration': 6.222}], 'summary': 'Export the reducer and connect add to basket to push inside the data layer.', 'duration': 75.054, 'max_score': 5655.836, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pxWe-nlOSY4/pics/pxWe-nlOSY45655836.jpg'}, {'end': 5872.042, 'src': 'embed', 'start': 5840.026, 'weight': 4, 'content': [{'end': 5844.927, 'text': "And then I'm going to say dispatch an object into the data layer.", 'start': 5840.026, 'duration': 4.901}, {'end': 5852.349, 'text': 'So this dispatch is like a gun, right? So it essentially allows you to shoot into the data layer.', 'start': 5845.227, 'duration': 7.122}, {'end': 5856.45, 'text': 'So like shoot an action, like we said, like the arrow that we showed previously.', 'start': 5852.389, 'duration': 4.061}, {'end': 5858.731, 'text': "That's what we're going to basically be doing here.", 'start': 5857.53, 'duration': 1.201}, {'end': 5859.651, 'text': "So I'm going to say type.", 'start': 5858.751, 'duration': 0.9}, {'end': 5862.892, 'text': "And here we're going to say add to basket.", 'start': 5860.211, 'duration': 2.681}, {'end': 5872.042, 'text': "OK, and then the actual item that we're going to push into the day allow is going to be an item with the ID.", 'start': 5863.916, 'duration': 8.126}], 'summary': "Dispatches an 'add to basket' action with an item id into the data layer.", 'duration': 32.016, 'max_score': 5840.026, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pxWe-nlOSY4/pics/pxWe-nlOSY45840026.jpg'}], 'start': 5529.789, 'title': 'Redux and context api', 'summary': 'Explains the difference between redux and context api, focusing on using a global store, dispatching actions, writing a reducer function, and handling different action types. it covers exporting the reducer, setting default state, connecting add to basket, dispatching actions, and manipulating the data layer, with a demonstration of adding items to the basket and utilizing reducer functionality.', 'chapters': [{'end': 5669.222, 'start': 5529.789, 'title': 'Redux vs context api', 'summary': 'Explains the difference between redux and context api, highlighting the common pattern of using a global store and dispatching actions to the reducer for state management, with a focus on the process of writing a reducer function and handling different action types.', 'duration': 139.433, 'highlights': ['Redux and Context API share the pattern of using a global store and dispatching actions to the reducer Both Redux and Context API utilize the concept of a global store for application state management, with the process of dispatching actions to the reducer for handling state updates.', 'Writing a reducer involves defining a function that takes the state and the action as parameters The process of writing a reducer entails defining a function that accepts the application state and the action being dispatched as parameters to determine how the state should be updated.', 'The reducer listens for different action types and performs state updates based on the action type The reducer is designed to listen for various action types and execute specific state updates based on the type of action being dispatched, such as adding or removing items from the basket.']}, {'end': 6088.801, 'start': 5669.242, 'title': 'Redux reducer export and dispatch', 'summary': 'Covers exporting the reducer, setting default state, connecting add to basket, dispatching actions, and manipulating the data layer, with a demonstration of adding items to the basket and utilizing reducer functionality.', 'duration': 419.559, 'highlights': ['The chapter covers exporting the reducer, setting default state, connecting add to basket, dispatching actions, and manipulating the data layer, with a demonstration of adding items to the basket and utilizing reducer functionality. The chapter provides step-by-step guidance on exporting the reducer, setting a default state, connecting add to basket functionality, dispatching actions to the data layer, and manipulating the data using reducer functionality, including a demonstration of adding and checking items in the basket.', 'The dispatch function is utilized to manipulate the data layer by pushing items into the basket, with a demonstration of adding multiple items and checking the basket state. The dispatch function is demonstrated as a means to manipulate the data layer by pushing items into the basket, with a practical demonstration of adding multiple items and checking the basket state.', 'Encouragement and motivation are provided to the audience to stay engaged and focused on completing the session, emphasizing the potential career benefits of mastering the discussed concepts. The audience is encouraged and motivated to stay engaged, with an emphasis on the potential career benefits of mastering the discussed concepts and completing the session.']}], 'duration': 559.012, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pxWe-nlOSY4/pics/pxWe-nlOSY45529789.jpg', 'highlights': ['Both Redux and Context API utilize the concept of a global store for application state management, with the process of dispatching actions to the reducer for handling state updates.', 'The process of writing a reducer entails defining a function that accepts the application state and the action being dispatched as parameters to determine how the state should be updated.', 'The reducer is designed to listen for various action types and execute specific state updates based on the type of action being dispatched, such as adding or removing items from the basket.', 'The chapter provides step-by-step guidance on exporting the reducer, setting a default state, connecting add to basket functionality, dispatching actions to the data layer, and manipulating the data using reducer functionality, including a demonstration of adding and checking items in the basket.', 'The dispatch function is demonstrated as a means to manipulate the data layer by pushing items into the basket, with a practical demonstration of adding multiple items and checking the basket state.']}, {'end': 7072.488, 'segs': [{'end': 6117.752, 'src': 'embed', 'start': 6088.801, 'weight': 0, 'content': [{'end': 6091.922, 'text': 'oh god, oops, where we have here right, we have the zero.', 'start': 6088.801, 'duration': 3.121}, {'end': 6099.592, 'text': 'Now, what I want to do is, when we add an item to that basket, we want that to dynamically update.', 'start': 6093.323, 'duration': 6.269}, {'end': 6102.156, 'text': 'I want this to dynamically update like this.', 'start': 6100.253, 'duration': 1.903}, {'end': 6106.201, 'text': 'This is the actual app, it dynamically updates.', 'start': 6102.796, 'duration': 3.405}, {'end': 6109.466, 'text': 'This is going to be really cool to actually go ahead and implement.', 'start': 6106.301, 'duration': 3.165}, {'end': 6115.891, 'text': 'We need to actually go ahead and implement this.', 'start': 6111.128, 'duration': 4.763}, {'end': 6117.752, 'text': "Let's go ahead and do that.", 'start': 6115.931, 'duration': 1.821}], 'summary': 'Implement dynamic update for adding items to basket in app.', 'duration': 28.951, 'max_score': 6088.801, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pxWe-nlOSY4/pics/pxWe-nlOSY46088801.jpg'}, {'end': 6214.523, 'src': 'embed', 'start': 6166.064, 'weight': 1, 'content': [{'end': 6168.985, 'text': 'OK, so we hard coded a zero here, but.', 'start': 6166.064, 'duration': 2.921}, {'end': 6176.206, 'text': 'This is how easy and insanely powerful the react context API is.', 'start': 6170.505, 'duration': 5.701}, {'end': 6178.447, 'text': 'What we can do is we can get the basket.', 'start': 6176.827, 'duration': 1.62}, {'end': 6180.968, 'text': 'OK, we can get the basket like so.', 'start': 6179.767, 'duration': 1.201}, {'end': 6190.77, 'text': 'Grab the basket and what we can do is we can scroll down, go here and guys all I need to do at this point is say basket dot length.', 'start': 6181.808, 'duration': 8.962}, {'end': 6192.61, 'text': "That's it.", 'start': 6192.23, 'duration': 0.38}, {'end': 6193.851, 'text': "That's it guys.", 'start': 6193.211, 'duration': 0.64}, {'end': 6194.471, 'text': 'Do that.', 'start': 6194.151, 'duration': 0.32}, {'end': 6199.334, 'text': 'And what I would recommend is that you put a question mark here and this is called optional chaining.', 'start': 6194.992, 'duration': 4.342}, {'end': 6208.419, 'text': "And what this would mean is that if you for any reason don't have the correct value or basket becomes undefined due to an error, it won't freak out.", 'start': 6199.814, 'duration': 8.605}, {'end': 6210.501, 'text': 'It just will gracefully terminate.', 'start': 6208.599, 'duration': 1.902}, {'end': 6212.562, 'text': 'Okay Or gracefully handle the error.', 'start': 6210.541, 'duration': 2.021}, {'end': 6214.523, 'text': "Okay So let's go ahead and add this.", 'start': 6212.582, 'duration': 1.941}], 'summary': 'Demonstrating the simplicity and power of the react context api by accessing and handling the length of the basket with optional chaining for error handling.', 'duration': 48.459, 'max_score': 6166.064, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pxWe-nlOSY4/pics/pxWe-nlOSY46166064.jpg'}, {'end': 6507.926, 'src': 'embed', 'start': 6478.268, 'weight': 3, 'content': [{'end': 6483.072, 'text': 'but go ahead and do the same thing for the subtotal items.', 'start': 6478.268, 'duration': 4.804}, {'end': 6488.936, 'text': 'We can see the number of items that get pulled in from our basket.', 'start': 6483.532, 'duration': 5.404}, {'end': 6500.922, 'text': 'And then the juicy part of the homework is can you guys then take those items that we have in the basket and actually calculate the total price.', 'start': 6489.496, 'duration': 11.426}, {'end': 6507.926, 'text': 'Calculate the total price and the finished result should be a beautiful looking application.', 'start': 6502.023, 'duration': 5.903}], 'summary': 'Calculate total price for items in basket, creating a beautiful application.', 'duration': 29.658, 'max_score': 6478.268, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pxWe-nlOSY4/pics/pxWe-nlOSY46478268.jpg'}, {'end': 6806.291, 'src': 'embed', 'start': 6779.57, 'weight': 4, 'content': [{'end': 6784.653, 'text': "You'll have a full login and the user authentication and everything will be powered by Firebase.", 'start': 6779.57, 'duration': 5.083}, {'end': 6786.754, 'text': "And tomorrow we're going to be deploying the app.", 'start': 6785.013, 'duration': 1.741}, {'end': 6793.578, 'text': "So today, because it's quite an intense amount of work, Naz, what we said is screenshots we'll do for today and tomorrow we'll deploy the app.", 'start': 6787.154, 'duration': 6.424}, {'end': 6794.679, 'text': "So that'll be really nice.", 'start': 6793.938, 'duration': 0.741}, {'end': 6802.927, 'text': "Nice Dude, that's insane to be able to do the login like at this point in time, like first day, guys, the first day, and you already got the login.", 'start': 6794.719, 'duration': 8.208}, {'end': 6806.291, 'text': "you got your, you know your basket, you got, you know, it's all good.", 'start': 6802.927, 'duration': 3.364}], 'summary': 'Firebase powers full login, app deployment tomorrow. impressive progress on first day.', 'duration': 26.721, 'max_score': 6779.57, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pxWe-nlOSY4/pics/pxWe-nlOSY46779570.jpg'}, {'end': 7070.567, 'src': 'embed', 'start': 7040.687, 'weight': 5, 'content': [{'end': 7042.607, 'text': 'Join the amazing community that we got here.', 'start': 7040.687, 'duration': 1.92}, {'end': 7044.268, 'text': "And yeah, let's go.", 'start': 7043.048, 'duration': 1.22}, {'end': 7046.554, 'text': "let's do it right, i think.", 'start': 7044.813, 'duration': 1.741}, {'end': 7049.696, 'text': "with that said, bro, i think we'll wrap up on day two.", 'start': 7046.554, 'duration': 3.142}, {'end': 7051.337, 'text': "it's been an awesome day.", 'start': 7049.696, 'duration': 1.641}, {'end': 7054.758, 'text': 'we had over 1500 consecutive live streams.', 'start': 7051.337, 'duration': 3.421}, {'end': 7058.34, 'text': 'i mean at one point, before the connection issues, we were hitting 3k.', 'start': 7054.758, 'duration': 3.582}, {'end': 7059.721, 'text': 'so you guys are insane.', 'start': 7058.34, 'duration': 1.381}, {'end': 7064.043, 'text': "we appreciate you, guys, and we'll see you guys in tomorrow's video.", 'start': 7059.721, 'duration': 4.322}, {'end': 7066.305, 'text': "right? nos, yes, and tomorrow's video.", 'start': 7064.043, 'duration': 2.262}, {'end': 7070.567, 'text': "hope you guys have a great day and we'll see you in the next one.", 'start': 7066.305, 'duration': 4.262}], 'summary': 'Over 1500 consecutive live streams with peak of 3k viewers, wrapping up day two of an awesome community event.', 'duration': 29.88, 'max_score': 7040.687, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pxWe-nlOSY4/pics/pxWe-nlOSY47040687.jpg'}], 'start': 6088.801, 'title': 'Building shopping basket', 'summary': "Focused on building a dynamic shopping basket, where users were tasked to add items, update the number of items, and calculate the total price for the homework, with plans for tomorrow's session on authentication and deployment. over 1500 consecutive live streams with a peak of 3k were recorded during the event.", 'chapters': [{'end': 6214.523, 'start': 6088.801, 'title': 'Dynamically updating basket in react app', 'summary': 'Discusses dynamically updating the basket in a react app using the usestate value and the react context api to display the number of items added, with the optional chaining for error handling.', 'duration': 125.722, 'highlights': ['Using the useState value to dynamically update the basket in a React app.', 'Implementing the react context API to display the number of items added to the basket.', 'Using optional chaining for error handling when accessing the basket length.']}, {'end': 6873.458, 'start': 6214.803, 'title': 'Building shopping basket', 'summary': "Focused on building a dynamic shopping basket, where users were tasked to add items, update the number of items, and calculate the total price for the homework, along with plans for tomorrow's session on authentication and deployment.", 'duration': 658.655, 'highlights': ["The chapter's main focus was on building a dynamic shopping basket, where users were tasked to add items, update the number of items, and calculate the total price for the homework. Focus on building a dynamic shopping basket, updating the number of items, and calculating the total price for the homework.", "Plans for tomorrow's session include building authentication and deployment, with an emphasis on full login functionality, user authentication, and deployment using Firebase. Tomorrow's session includes building authentication, full login functionality, user authentication, and deployment using Firebase.", 'The chapter also emphasized the importance of practicing the homework, rewatching the videos if necessary, and being prepared for the upcoming session on day two. Emphasis on the importance of practicing the homework, rewatching the videos, and being prepared for day two.']}, {'end': 7072.488, 'start': 6873.458, 'title': 'Stay engaged and connect', 'summary': 'Emphasizes staying engaged in the challenge to score more points, connecting with the community for valuable opportunities, and setting alarms for the next session to ensure participation. over 1500 consecutive live streams with a peak of 3k were recorded during the event.', 'duration': 199.03, 'highlights': ['Over 1500 consecutive live streams were recorded during the event, with a peak of 3k before connection issues, showcasing high engagement from participants.', 'Staying engaged in the challenge allows participants to score more points, contributing to their success in the event.', 'Connecting with the community is highlighted as a source of valuable opportunities and knowledge, emphasizing the importance of building connections.', 'Encouragement to set alarms for the next session and ensure prompt participation, demonstrating the commitment to active involvement in the challenge.', 'Promotion of joining the challenge and interacting with the community, emphasizing the inclusive and rewarding nature of the event.']}], 'duration': 983.687, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pxWe-nlOSY4/pics/pxWe-nlOSY46088801.jpg', 'highlights': ['Using the useState value to dynamically update the basket in a React app.', 'Implementing the react context API to display the number of items added to the basket.', 'Using optional chaining for error handling when accessing the basket length.', "The chapter's main focus was on building a dynamic shopping basket, updating the number of items, and calculating the total price for the homework.", "Plans for tomorrow's session include building authentication and deployment, with an emphasis on full login functionality, user authentication, and deployment using Firebase.", 'Over 1500 consecutive live streams were recorded during the event, with a peak of 3k before connection issues, showcasing high engagement from participants.']}], 'highlights': ['The stream recovered with a thousand viewers after losing around 10,000, showcasing the impact of the connection issues on the audience.', 'The speaker mentioned a peak download speed of 700 megabits per second and an upload speed of 35, emphasizing the excellent connection before facing issues.', 'The discussion emphasized the need to stay positive and overcome technical difficulties, highlighting the importance of handling connection issues during live sessions.', 'The chapter addressed the challenges faced during a live session, including connection issues and their impact on the audience, while emphasizing the need to stay positive and overcome technical difficulties.', 'The audience is guided to catch up on the build, leveraging the time lost due to technical issues, to align with the current stage of the project. Encourages audience to use the time lost to catch up and get aligned with the current stage of the project.', 'Resilience and determination are emphasized in the face of technical challenges, with the speaker expressing confidence in overcoming obstacles and maintaining high energy levels. Emphasizes resilience and determination in overcoming technical challenges and maintaining high energy levels.', 'The speaker provides detailed guidance on utilizing flexbox properties and color adjustments to achieve the desired visual layout for the Amazon header. Provides detailed guidance on using flexbox properties and color adjustments to achieve the desired visual layout for the Amazon header.', 'The chapter covers the styling of the Amazon clone header, including setting font sizes, adding a shopping basket icon. The chapter focuses on styling the Amazon clone header, adjusting font sizes and incorporating a shopping basket icon, demonstrating the process of enhancing the visual appeal of the application.', 'Emphasizing the importance of commitment and perseverance in learning development, aiming to achieve a 120K salary. The instructors stress the significance of commitment and perseverance in learning development, highlighting the potential career rewards such as achieving a 120K salary, motivating learners to overcome challenges and stick through the learning process.', 'The tutorial emphasizes the importance of responsive design and layout for different product configurations, aiming to reflect diverse products and render a finished product square block.', 'The detailed highlight describes the addition of a home container and a banner to enhance the visual appeal of the home component, focusing on improving the user interface for a better user experience.', 'The chapter emphasizes the importance of not quitting and maintaining high energy while building the home component, reinforcing perseverance and determination.', 'Addressing Responsive Design and Layout The tutorial emphasizes the importance of responsive design and layout for different product configurations, aiming to reflect diverse products and render a finished product square block.', 'It explains the process of creating the home component and its corresponding CSS file, providing practical guidance for implementing these elements into the app.', 'Emphasizing Overcoming Technical Obstacles The tutorial highlights the need to overcome technical obstacles, ensuring that issues are addressed to maintain progress and enthusiasm.', 'Creating Product Component in React The tutorial covers the process of creating a product component in React, including adding product info, price, and star rating.', 'Live demonstration with over 1500 viewers The demonstration was viewed live by over 1500 people, showcasing a high level of interest in the topic.', 'Applying CSS to improve visual appeal The live demonstration includes applying CSS to enhance the visual appeal of the product page.', "Adding 'add to basket' button The chapter illustrates the addition of an 'add to basket' button on the website.", 'Demonstrating styling for e-commerce website The chapter demonstrates the process of styling an e-commerce website to improve its visual appeal.', 'The data layer allows access and manipulation of data across all components, ensuring seamless information flow.', 'The implementation of the React Context API allows for adding and removing items from the basket, providing enhanced functionality.', 'Both Redux and Context API utilize the concept of a global store for application state management, with the process of dispatching actions to the reducer for handling state updates.', 'The process of writing a reducer entails defining a function that accepts the application state and the action being dispatched as parameters to determine how the state should be updated.', 'The reducer is designed to listen for various action types and execute specific state updates based on the type of action being dispatched, such as adding or removing items from the basket.', 'The chapter provides step-by-step guidance on exporting the reducer, setting a default state, connecting add to basket functionality, dispatching actions to the data layer, and manipulating the data using reducer functionality, including a demonstration of adding and checking items in the basket.', 'The dispatch function is demonstrated as a means to manipulate the data layer by pushing items into the basket, with a practical demonstration of adding multiple items and checking the basket state.', 'Using the useState value to dynamically update the basket in a React app.', 'Implementing the react context API to display the number of items added to the basket.', 'Using optional chaining for error handling when accessing the basket length.', "The chapter's main focus was on building a dynamic shopping basket, updating the number of items, and calculating the total price for the homework.", "Plans for tomorrow's session include building authentication and deployment, with an emphasis on full login functionality, user authentication, and deployment using Firebase.", 'Over 1500 consecutive live streams were recorded during the event, with a peak of 3k before connection issues, showcasing high engagement from participants.']}