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

description
Amazon Clone Code👇 https://github.com/CleverProgrammers/react-challenge-amazon-clone 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=10-sep-sonny-qazi-live-day-4 Day 4 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 #javascript #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 4)', 'heatmap': [{'end': 6791.507, 'start': 6639.868, 'weight': 1}, {'end': 8003.402, 'start': 7688.423, 'weight': 0.784}, {'end': 8609.616, 'start': 8448.914, 'weight': 0.716}, {'end': 9057.11, 'start': 8752.599, 'weight': 0.81}], 'summary': 'Covers building an amazon app, e-commerce checkout process, deploying express api on firebase cloud function, community highlights, 30,000 views, 10,000 members, $89 donations, react spring and firebase for app development, react payment page development, optimizing checkout page with react and stripe integration, setting up stripe and react state management, implementing payment processing with axios and stripe, api setup and integration, live e-commerce transaction demo with a $948 payment, e-commerce app development with cloud firestore, generating $6,000 revenue, and deploying e-commerce app to firebase.', 'chapters': [{'end': 229.279, 'segs': [{'end': 73.281, 'src': 'embed', 'start': 46.237, 'weight': 0, 'content': [{'end': 49.559, 'text': 'So let me just go ahead and copy that link right over here.', 'start': 46.237, 'duration': 3.322}, {'end': 53.572, 'text': 'and I will paste it in and then we can show you guys this.', 'start': 50.931, 'duration': 2.641}, {'end': 56.614, 'text': 'But how are you guys doing? Definitely want to know.', 'start': 53.632, 'duration': 2.982}, {'end': 57.514, 'text': 'Here we go.', 'start': 56.954, 'duration': 0.56}, {'end': 58.895, 'text': "Boom Here's a deployed app.", 'start': 57.634, 'duration': 1.261}, {'end': 61.376, 'text': 'So check it out, guys.', 'start': 60.235, 'duration': 1.141}, {'end': 64.337, 'text': "Everything looks similar to what we've done yesterday.", 'start': 61.836, 'duration': 2.501}, {'end': 66.478, 'text': 'Yeah, but we added a hidden gem.', 'start': 64.357, 'duration': 2.121}, {'end': 67.778, 'text': 'Nice fuzzy.', 'start': 66.878, 'duration': 0.9}, {'end': 69.439, 'text': 'First, if you want to go ahead and sign in.', 'start': 67.818, 'duration': 1.621}, {'end': 70.459, 'text': 'All right.', 'start': 70.099, 'duration': 0.36}, {'end': 71.1, 'text': 'I will do that.', 'start': 70.54, 'duration': 0.56}, {'end': 71.82, 'text': 'Sign in.', 'start': 71.16, 'duration': 0.66}, {'end': 73.281, 'text': 'I remember my email from yesterday.', 'start': 71.84, 'duration': 1.441}], 'summary': 'A new app was deployed with a hidden feature and a sign-in option.', 'duration': 27.044, 'max_score': 46.237, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg46237.jpg'}, {'end': 186.057, 'src': 'embed', 'start': 160.133, 'weight': 1, 'content': [{'end': 168.477, 'text': "Then it's going to process the payment and then it's actually going to push all of this order into the database and it will, yeah, it's quite a bit.", 'start': 160.133, 'duration': 8.344}, {'end': 172.019, 'text': "It'll push it all into the database and it will be attached to this user.", 'start': 168.537, 'duration': 3.482}, {'end': 174.149, 'text': "So let's go ahead and click buy now.", 'start': 172.568, 'duration': 1.581}, {'end': 176.811, 'text': 'And hopefully the demo goes on our side.', 'start': 174.489, 'duration': 2.322}, {'end': 180.713, 'text': "I think you're going to need to queue up some suspenseful music because so much can go wrong here.", 'start': 176.931, 'duration': 3.782}, {'end': 186.057, 'text': "I mean, like, I mean, everything's been breaking lately.", 'start': 180.733, 'duration': 5.324}], 'summary': 'Processing payment, pushing order to database, user attachment, and potential issues.', 'duration': 25.924, 'max_score': 160.133, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg160133.jpg'}, {'end': 240.291, 'src': 'embed', 'start': 210.532, 'weight': 4, 'content': [{'end': 214.153, 'text': "so you can actually see we've got a payment id on the top right.", 'start': 210.532, 'duration': 3.621}, {'end': 216.154, 'text': "yeah, so it's actually processed through stripe.", 'start': 214.153, 'duration': 2.001}, {'end': 219.975, 'text': 'come back to us and everything has run through a payment system.', 'start': 216.154, 'duration': 3.821}, {'end': 221.756, 'text': 'so that is super exciting.', 'start': 219.975, 'duration': 1.781}, {'end': 224.497, 'text': 'let us know if you guys are excited about that in the comments below.', 'start': 221.756, 'duration': 2.741}, {'end': 229.279, 'text': "yeah, and yeah, that's what we're going to be building today a complete e-commerce back-end.", 'start': 224.497, 'duration': 4.782}, {'end': 240.291, 'text': "And, guys, for those of you, guys who are interested in the technical stuff, we're actually deploying an Express API on a cloud function.", 'start': 230.908, 'duration': 9.383}], 'summary': 'Building complete e-commerce back-end with stripe payment processing and deploying express api on cloud function.', 'duration': 29.759, 'max_score': 210.532, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg210532.jpg'}], 'start': 0.249, 'title': 'Building amazon app and e-commerce checkout process', 'summary': 'Covers building the amazon app, hosting the database, and adding stripe payment functionality, with a demo of the deployed app and a hidden gem feature. it also details the e-commerce checkout process, including adding items to the basket, proceeding to checkout, entering card details, and successfully processing a real payment through stripe.', 'chapters': [{'end': 70.459, 'start': 0.249, 'title': 'Building amazon with stripe payments', 'summary': 'Covers building the amazon app, hosting the database, and adding stripe payment functionality, with a demo of the deployed app and a hidden gem feature.', 'duration': 70.21, 'highlights': ['The chapter covers building the Amazon app, hosting the database, and adding Stripe payment functionality.', 'A demo of the deployed app with Stripe payment functionality is showcased.', 'A hidden gem feature is added to the app, allowing users to sign in.']}, {'end': 229.279, 'start': 70.54, 'title': 'E-commerce checkout process', 'summary': 'Details the e-commerce checkout process, including adding items to the basket, proceeding to checkout, entering card details, and successfully processing a real payment through stripe.', 'duration': 158.739, 'highlights': ['The chapter covers the detailed process of adding items to the basket, proceeding to checkout, and entering card details before successfully processing a real payment through Stripe.', 'The narrator adds items to the basket, such as the lean startup, iPad pro, Amazon echo, and two screens.', 'The checkout process involves entering card details, processing the payment through Stripe, and pushing the order details into the database, leading to a successful real payment.', "The demonstration of a real payment processing through Stripe is described as 'super exciting', and the viewers are encouraged to express their excitement in the comments.", 'The narrator expresses nervousness and highlights the possibility of things going wrong during the payment processing, indicating previous technical issues and the need for suspenseful music.']}], 'duration': 229.03, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg249.jpg', 'highlights': ['The chapter covers building the Amazon app, hosting the database, and adding Stripe payment functionality.', 'A demo of the deployed app with Stripe payment functionality is showcased.', 'The chapter covers the detailed process of adding items to the basket, proceeding to checkout, and entering card details before successfully processing a real payment through Stripe.', 'A hidden gem feature is added to the app, allowing users to sign in.', 'The narrator adds items to the basket, such as the lean startup, iPad pro, Amazon echo, and two screens.', 'The checkout process involves entering card details, processing the payment through Stripe, and pushing the order details into the database, leading to a successful real payment.', "The demonstration of a real payment processing through Stripe is described as 'super exciting', and the viewers are encouraged to express their excitement in the comments.", 'The narrator expresses nervousness and highlights the possibility of things going wrong during the payment processing, indicating previous technical issues and the need for suspenseful music.']}, {'end': 929.199, 'segs': [{'end': 469.008, 'src': 'embed', 'start': 443.541, 'weight': 5, 'content': [{'end': 448.766, 'text': 'Exactly, guys, you have to be in the Facebook group to be a part of that prize draw at the end, right?', 'start': 443.541, 'duration': 5.225}, {'end': 453.77, 'text': 'So make sure you submit that homework, post them Facebook comments and do all those things that we said.', 'start': 448.826, 'duration': 4.944}, {'end': 461.818, 'text': "Exactly And what else are we gonna be covering today? So then everybody has a nice little roadmap of like all the functionality they're gonna build.", 'start': 454.251, 'duration': 7.567}, {'end': 467.043, 'text': "Should we go to the PowerPoint? Yeah, so let's jump over to that PowerPoint, yeah.", 'start': 462.178, 'duration': 4.865}, {'end': 469.008, 'text': 'Okay, dope.', 'start': 468.008, 'duration': 1}], 'summary': 'Join the facebook group for prize draw, submit homework, participate in discussions, and cover functionality in powerpoint.', 'duration': 25.467, 'max_score': 443.541, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg443541.jpg'}, {'end': 588.678, 'src': 'embed', 'start': 560.402, 'weight': 0, 'content': [{'end': 563.923, 'text': 'This is gonna be the last functionality that we need to build.', 'start': 560.402, 'duration': 3.521}, {'end': 566.824, 'text': "And with Stripe, you'll now be able to accept payments.", 'start': 564.143, 'duration': 2.681}, {'end': 569.706, 'text': "Yep So it's a huge thing here, guys.", 'start': 567.605, 'duration': 2.101}, {'end': 572.688, 'text': "Like I don't, that's not underestimate how much we're going to be doing today.", 'start': 569.746, 'duration': 2.942}, {'end': 576.251, 'text': 'Like that processing of a payment is absolutely.', 'start': 573.089, 'duration': 3.162}, {'end': 577.795, 'text': 'Super valuable.', 'start': 576.975, 'duration': 0.82}, {'end': 580.116, 'text': "So that's gonna be a super, super valuable skill to have.", 'start': 578.055, 'duration': 2.061}, {'end': 588.678, 'text': "Yup If you're on YouTube and you're wondering how can we donate or how can you donate, the link is underneath the chat and you can donate from there.", 'start': 580.456, 'duration': 8.222}], 'summary': 'Introducing stripe for accepting payments, a valuable skill for donating online.', 'duration': 28.276, 'max_score': 560.402, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg560402.jpg'}, {'end': 829.927, 'src': 'embed', 'start': 803.955, 'weight': 6, 'content': [{'end': 808.278, 'text': "But we also want to keep delivering value because some people yell at us and they're like, stop talking about donations.", 'start': 803.955, 'duration': 4.323}, {'end': 810.435, 'text': "So we're trying to do our best here, guys.", 'start': 808.874, 'duration': 1.561}, {'end': 814.798, 'text': 'So Boris, nice.', 'start': 811.856, 'duration': 2.942}, {'end': 817.659, 'text': 'I like his Amazon build that he did.', 'start': 815.078, 'duration': 2.581}, {'end': 824.824, 'text': "These are your guys' homework submissions that you actually- In fact, I linked five really awesome mentions inside the slides.", 'start': 818.08, 'duration': 6.744}, {'end': 825.624, 'text': 'All right, okay.', 'start': 825.144, 'duration': 0.48}, {'end': 827.485, 'text': 'I will follow those slides.', 'start': 825.924, 'duration': 1.561}, {'end': 828.386, 'text': 'Okay, dope.', 'start': 827.886, 'duration': 0.5}, {'end': 829.927, 'text': 'All right, so here we go.', 'start': 829.026, 'duration': 0.901}], 'summary': 'Discussion about creating value and acknowledging homework submissions.', 'duration': 25.972, 'max_score': 803.955, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg803955.jpg'}, {'end': 929.199, 'src': 'embed', 'start': 850.824, 'weight': 4, 'content': [{'end': 851.265, 'text': 'Thank you, dude.', 'start': 850.824, 'duration': 0.441}, {'end': 852.593, 'text': 'Guys, thank you so much.', 'start': 851.533, 'duration': 1.06}, {'end': 856.175, 'text': 'I think this is our fastest breaking $100 on donations.', 'start': 852.634, 'duration': 3.541}, {'end': 857.976, 'text': 'Fastest in 14 minutes.', 'start': 856.575, 'duration': 1.401}, {'end': 858.516, 'text': 'Thank you.', 'start': 858.016, 'duration': 0.5}, {'end': 861.017, 'text': 'With none of my donation being in there.', 'start': 859.056, 'duration': 1.961}, {'end': 863.859, 'text': 'Dude, hover over the products in this build.', 'start': 862.058, 'duration': 1.801}, {'end': 867.98, 'text': 'Ooh Silky smooth.', 'start': 864.139, 'duration': 3.841}, {'end': 871.242, 'text': 'Bradley, bro, you crushed it with this.', 'start': 868.581, 'duration': 2.661}, {'end': 872.803, 'text': 'All right, let me check.', 'start': 872.042, 'duration': 0.761}, {'end': 874.543, 'text': 'Let me put it through a little stress test.', 'start': 872.963, 'duration': 1.58}, {'end': 877.985, 'text': 'Damn Oh, the subtotal is there too.', 'start': 875.604, 'duration': 2.381}, {'end': 879.866, 'text': 'Remove from basket.', 'start': 878.745, 'duration': 1.121}, {'end': 881.877, 'text': 'Yo, it updated live.', 'start': 880.717, 'duration': 1.16}, {'end': 883.718, 'text': 'Remove from basket, updated live.', 'start': 882.077, 'duration': 1.641}, {'end': 887.138, 'text': 'Nice Do I have a sign in? Dude, nice.', 'start': 883.738, 'duration': 3.4}, {'end': 887.918, 'text': 'We got everything.', 'start': 887.178, 'duration': 0.74}, {'end': 890.679, 'text': 'Yeah Awesome stuff, Bradley.', 'start': 888.859, 'duration': 1.82}, {'end': 893.54, 'text': "Bradley, you're going to be leading the next challenge.", 'start': 891.859, 'duration': 1.681}, {'end': 896.94, 'text': "All right, let's check out what this guy got.", 'start': 894.84, 'duration': 2.1}, {'end': 899.821, 'text': 'What was his name? Ritik Pal.', 'start': 897.44, 'duration': 2.381}, {'end': 900.521, 'text': 'Ritik Pal.', 'start': 900.021, 'duration': 0.5}, {'end': 902.421, 'text': "Okay, so let's go here, Ritik.", 'start': 901.041, 'duration': 1.38}, {'end': 903.822, 'text': 'Nice job on this.', 'start': 902.622, 'duration': 1.2}, {'end': 906.582, 'text': 'Wait, how does everybody.', 'start': 904.862, 'duration': 1.72}, {'end': 907.983, 'text': 'How did everybody.', 'start': 906.582, 'duration': 1.401}, {'end': 909.163, 'text': 'Check out the slider, though.', 'start': 907.983, 'duration': 1.18}, {'end': 909.803, 'text': 'Look at the top.', 'start': 909.243, 'duration': 0.56}, {'end': 912.013, 'text': "He's actually added a slider.", 'start': 910.751, 'duration': 1.262}, {'end': 914.256, 'text': 'Oh, he has a slider at the top.', 'start': 912.514, 'duration': 1.742}, {'end': 917.541, 'text': 'Nice The carousel images, right? Yep.', 'start': 914.437, 'duration': 3.104}, {'end': 919.284, 'text': "That's clean.", 'start': 918.162, 'duration': 1.122}, {'end': 924.552, 'text': "Dope And where's the animation showing? I remember you were like.", 'start': 920.286, 'duration': 4.266}, {'end': 927.558, 'text': 'Is this the React flip move? This is not React flip move.', 'start': 925.396, 'duration': 2.162}, {'end': 929.199, 'text': "I haven't used React flip move here.", 'start': 927.638, 'duration': 1.561}], 'summary': 'Fastest $100 donations in 14 minutes; impressed with product build and live updates.', 'duration': 78.375, 'max_score': 850.824, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg850824.jpg'}], 'start': 230.908, 'title': 'Amazon clone: full stack development and community highlights', 'summary': 'Covers deploying an express api on a firebase cloud function, adding stripe functionality, building a checkout page, and using firestore for the real-time database, along with enthusiastic community engagement, upcoming technical agenda, and overwhelming response with 30,000 views, 10,000 members, and $89 donations including a $50 contribution.', 'chapters': [{'end': 406.922, 'start': 230.908, 'title': 'Amazon clone: full stack development with express api and stripe functionality', 'summary': "Covers deploying an express api on a firebase cloud function, adding stripe functionality, building a checkout page, and using firestore for the real-time database, while highlighting a successful app deployment and the impact on a participant's learning.", 'duration': 176.014, 'highlights': ['Participants will be building an Amazon clone and adding stripe functionality today.', 'The chapter will cover building a checkout page and creating a cloud function to process Stripe payments.', 'The Firebase Cloud Function will run the express server, utilizing a man stack build with Firestore for the real-time database.', 'A participant successfully deployed their Amazon store and expressed the learning impact and determination it brought.']}, {'end': 600.342, 'start': 407.402, 'title': 'Community building and technical skills', 'summary': 'Highlighted the enthusiastic community engagement, emphasizing the importance of being part of the facebook group, and announced the upcoming technical agenda including building the my orders page and implementing a payment processing functionality with stripe, with 30,000 views and significant engagement.', 'duration': 192.94, 'highlights': ['The chapter emphasized the importance of being part of the Facebook group for participation in the prize draw and learning opportunities, showcasing community engagement.', 'Announcement of the upcoming technical agenda including building the My Orders page and implementing payment processing functionality with Stripe, highlighting the value and significance of these skills.', 'Acknowledgment of the enthusiastic community engagement with 30,000 views and significant engagement, underlining the impact and reach of the content.', 'Encouragement for community interaction and submissions, with specific mention of a participant claiming the challenge will help in securing a job, showcasing the tangible benefits of the program.', 'Acknowledgment of donations, with a specific mention of 30,000 views and the significant engagement, highlighting the impact and reach of the content.']}, {'end': 929.199, 'start': 602.202, 'title': 'Community challenge highlights', 'summary': 'Witnessed an overwhelming response with over 300 submissions, 10,000 members in the slack group, and received donations totaling $89, including a $50 donation, within a short time span.', 'duration': 326.997, 'highlights': ['The chapter witnessed an overwhelming response with over 300 submissions, showcasing active participation within the community.', 'The Slack group has over 10,000 members, fostering a supportive community atmosphere for collaboration and assistance.', 'Donations totaling $89 were received within a short time span, including a significant $50 donation, reflecting strong community support.']}], 'duration': 698.291, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg230908.jpg', 'highlights': ['The chapter witnessed an overwhelming response with over 300 submissions, showcasing active participation within the community.', 'The Slack group has over 10,000 members, fostering a supportive community atmosphere for collaboration and assistance.', 'Acknowledgment of the enthusiastic community engagement with 30,000 views and significant engagement, underlining the impact and reach of the content.', 'Donations totaling $89 were received within a short time span, including a significant $50 donation, reflecting strong community support.', 'Announcement of the upcoming technical agenda including building the My Orders page and implementing payment processing functionality with Stripe, highlighting the value and significance of these skills.', 'The Firebase Cloud Function will run the express server, utilizing a man stack build with Firestore for the real-time database.', 'Participants will be building an Amazon clone and adding stripe functionality today.', 'The chapter will cover building a checkout page and creating a cloud function to process Stripe payments.', 'Encouragement for community interaction and submissions, with specific mention of a participant claiming the challenge will help in securing a job, showcasing the tangible benefits of the program.', 'The chapter emphasized the importance of being part of the Facebook group for participation in the prize draw and learning opportunities, showcasing community engagement.', 'A participant successfully deployed their Amazon store and expressed the learning impact and determination it brought.']}, {'end': 2000.25, 'segs': [{'end': 1269.571, 'src': 'embed', 'start': 1240.796, 'weight': 1, 'content': [{'end': 1246.638, 'text': "If you're like hey, I need every single detail, because we don't have the time to go into every single detail or a five-day challenge.", 'start': 1240.796, 'duration': 5.842}, {'end': 1250.219, 'text': "you're looking for that, then the next move for you is profit with JavaScript.", 'start': 1246.638, 'duration': 3.581}, {'end': 1251.759, 'text': 'So we just want to be transparent about that.', 'start': 1250.239, 'duration': 1.52}, {'end': 1255.401, 'text': "That's where you can go deep and learn all of these things inside out.", 'start': 1252.02, 'duration': 3.381}, {'end': 1259.597, 'text': "If you can't keep up with us during the live, it's okay.", 'start': 1256.954, 'duration': 2.643}, {'end': 1260.939, 'text': 'Do the best you can.', 'start': 1260.098, 'duration': 0.841}, {'end': 1262.501, 'text': 'Rewatch the video if you have to.', 'start': 1260.999, 'duration': 1.502}, {'end': 1269.571, 'text': 'And we will also give you solution files so then you can just go and grab them from GitHub and be good to go.', 'start': 1263.422, 'duration': 6.149}], 'summary': 'Join the profit with javascript challenge to deep dive into the content and access solution files on github.', 'duration': 28.775, 'max_score': 1240.796, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg1240796.jpg'}, {'end': 1336.965, 'src': 'embed', 'start': 1309.513, 'weight': 0, 'content': [{'end': 1313.634, 'text': 'And guys, after this challenge is over, we have a surprise for you guys.', 'start': 1309.513, 'duration': 4.121}, {'end': 1317.235, 'text': 'So make sure you stay tuned for the surprise day six.', 'start': 1313.674, 'duration': 3.561}, {'end': 1320.556, 'text': 'And here is homework for today dip.', 'start': 1317.935, 'duration': 2.621}, {'end': 1322.297, 'text': "You're going to, you want to go for it.", 'start': 1320.596, 'duration': 1.701}, {'end': 1328.098, 'text': "Yeah So that we're going to be deploying the completed e-commerce app to Firebase.", 'start': 1322.777, 'duration': 5.321}, {'end': 1330.019, 'text': 'That means full payment functionality.', 'start': 1328.138, 'duration': 1.881}, {'end': 1336.965, 'text': 'That means everything works, the signing in the payment, all of that juicy stuff, plus some animations and some extra fancy stuff on top of that.', 'start': 1330.099, 'duration': 6.866}], 'summary': 'After the challenge, a surprise awaits on day six: deploying the completed e-commerce app to firebase with full payment functionality, signing in, and animations.', 'duration': 27.452, 'max_score': 1309.513, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg1309513.jpg'}, {'end': 1475.398, 'src': 'embed', 'start': 1447.625, 'weight': 2, 'content': [{'end': 1452.849, 'text': 'So rather than a portrait, try and shoot in horizontal, and that will allow us to watch the video a little bit easier.', 'start': 1447.625, 'duration': 5.224}, {'end': 1455.29, 'text': "Oh yeah, that's actually a really good point.", 'start': 1453.129, 'duration': 2.161}, {'end': 1462.015, 'text': "So when you're shooting it, what you can do is you can go to video, flip it, and then make sure you do this.", 'start': 1455.35, 'duration': 6.665}, {'end': 1469.86, 'text': 'And once it flips to horizontal mode, you can have your project right behind you, and then you can just look at the camera and talk from here.', 'start': 1462.895, 'duration': 6.965}, {'end': 1475.398, 'text': "Yeah, I don't think it shows it properly there, but guys, yeah, just literally the wrong way on the phone.", 'start': 1470.677, 'duration': 4.721}], 'summary': 'Shoot videos horizontally for better viewing experience.', 'duration': 27.773, 'max_score': 1447.625, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg1447625.jpg'}, {'end': 1800.37, 'src': 'embed', 'start': 1764.164, 'weight': 3, 'content': [{'end': 1768.205, 'text': 'I also saw somebody actually said that you, they use, and this is another good one guys.', 'start': 1764.164, 'duration': 4.041}, {'end': 1774.047, 'text': "So you can actually have it as this, or you could also write, I'm going to write in a comment here.", 'start': 1769.985, 'duration': 4.062}, {'end': 1781.482, 'text': 'You could also write user dot email or guest.', 'start': 1774.067, 'duration': 7.415}, {'end': 1794.768, 'text': 'you can actually go ahead and do that actually go ahead, um, okay, it looks like sunny connection.', 'start': 1781.482, 'duration': 13.286}, {'end': 1799.029, 'text': 'yep, was that me or was that you?', 'start': 1794.768, 'duration': 4.261}, {'end': 1800.37, 'text': "um, i'm not sure.", 'start': 1799.029, 'duration': 1.341}], 'summary': 'Discussion about using user dot email or guest in a comment.', 'duration': 36.206, 'max_score': 1764.164, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg1764164.jpg'}], 'start': 929.919, 'title': 'E-commerce app development and animation challenge reactions', 'summary': "Discusses participants' reactions to an animation challenge, e-commerce app development using react spring and firebase, community engagement, testimonials, and roi maximization. it also includes practical coding demonstrations and technical challenges such as using the ternary operator and handling poor connection issues during live streaming.", 'chapters': [{'end': 968.245, 'start': 929.919, 'title': 'Animation challenge reactions', 'summary': "Discusses the reactions of the participants to an animation challenge, with mentions of hover effects and react flip move, and praise for chetan's work.", 'duration': 38.326, 'highlights': ['Participants added hover effects and other animations in reaction to a challenge.', 'One participant used React flip move and another created something impressive, earning praise.', 'The mention of Gary Vee and the overall enthusiasm for animations.']}, {'end': 1742.06, 'start': 969.551, 'title': 'E-commerce app development: react spring, firebase & profit with javascript', 'summary': "Highlights e-commerce app development using react spring and firebase, showcases community engagement and testimonials, and emphasizes the upcoming launch of 'profit with javascript'. it also includes a discussion on maximizing the roi from the challenge, deploying a full e-commerce app to firebase, and shooting a video testimonial for the experience. the chapter concludes with a focus on ongoing learning opportunities and practical coding demonstrations.", 'duration': 772.509, 'highlights': ['The chapter highlights e-commerce app development using React Spring and Firebase', 'Showcases community engagement and testimonials', "Emphasizes the upcoming launch of 'Profit with JavaScript'", 'Discussion on maximizing the ROI from the challenge', 'Deploying a full e-commerce app to Firebase', 'Shooting a video testimonial for the experience', 'Focus on ongoing learning opportunities and practical coding demonstrations']}, {'end': 2000.25, 'start': 1742.12, 'title': 'Code discussion and technical challenges', 'summary': 'Discusses technical challenges, including the use of the ternary operator, browser history in react rua, and handling poor connection issues while live streaming on youtube and facebook.', 'duration': 258.13, 'highlights': ['Discussion on technical challenges including the use of the ternary operator and browser history in React Rua.', 'Challenges with poor connection during live streaming on YouTube and Facebook.']}], 'duration': 1070.331, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg929919.jpg', 'highlights': ['E-commerce app development using React Spring and Firebase', 'Maximizing ROI from the challenge', 'Practical coding demonstrations and technical challenges', 'Community engagement and testimonials', "Participants' reactions to an animation challenge"]}, {'end': 3314.493, 'segs': [{'end': 2227.603, 'src': 'embed', 'start': 2204.131, 'weight': 0, 'content': [{'end': 2211.458, 'text': "History is really going to be It's got more use cases because link, again, it translates it to an actual link.", 'start': 2204.131, 'duration': 7.327}, {'end': 2212.519, 'text': "Sometimes you don't want that.", 'start': 2211.678, 'duration': 0.841}, {'end': 2217.063, 'text': 'Sometimes you want to keep a button, have the button functionality, but only have it redirect.', 'start': 2212.579, 'duration': 4.484}, {'end': 2218.985, 'text': "So that's the reason why you might want to do that.", 'start': 2217.463, 'duration': 1.522}, {'end': 2221.807, 'text': "So yeah, we're going to be building this payment component.", 'start': 2219.645, 'duration': 2.162}, {'end': 2223.529, 'text': "So let's go ahead and build that.", 'start': 2221.887, 'duration': 1.642}, {'end': 2227.603, 'text': "So I'm going to go ahead and add in.", 'start': 2225.482, 'duration': 2.121}], 'summary': 'Discussing the need to customize link functionality in building a payment component.', 'duration': 23.472, 'max_score': 2204.131, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg2204131.jpg'}, {'end': 2330.025, 'src': 'embed', 'start': 2284.52, 'weight': 1, 'content': [{'end': 2291.445, 'text': 'And this container is going to contain all of the checkout information, all of the review items and delivery.', 'start': 2284.52, 'duration': 6.925}, {'end': 2295.748, 'text': "So, Kazi, just for reference now, let's go ahead and pull up the main app.", 'start': 2291.825, 'duration': 3.923}, {'end': 2298.838, 'text': 'Okay Dope.', 'start': 2298.098, 'duration': 0.74}, {'end': 2299.578, 'text': "Let's do that.", 'start': 2298.918, 'duration': 0.66}, {'end': 2303.119, 'text': "So we'll go over here to the deployed app.", 'start': 2299.758, 'duration': 3.361}, {'end': 2306.76, 'text': "Yep So here you can see we've got the delivery address.", 'start': 2303.759, 'duration': 3.001}, {'end': 2309.72, 'text': "We've got the, uh, uh, the items.", 'start': 2307.26, 'duration': 2.46}, {'end': 2315.121, 'text': "Um, and then we've got the, um, payment method, right? All right.", 'start': 2310.62, 'duration': 4.501}, {'end': 2318.142, 'text': "So let's write that down so we can visually break it down.", 'start': 2315.141, 'duration': 3.001}, {'end': 2321.762, 'text': "So delivery address is that's going to be like a separate thing, right? Yep.", 'start': 2318.222, 'duration': 3.54}, {'end': 2326.243, 'text': "And we're going to refer to one of, one of those things as the, payment section.", 'start': 2321.842, 'duration': 4.401}, {'end': 2327.984, 'text': "Okay So that's going to be a payment section.", 'start': 2326.263, 'duration': 1.721}, {'end': 2329.085, 'text': 'Uh huh.', 'start': 2328.764, 'duration': 0.321}, {'end': 2330.025, 'text': 'Payment section.', 'start': 2329.125, 'duration': 0.9}], 'summary': 'Discussing checkout information, review items, and delivery in app interface.', 'duration': 45.505, 'max_score': 2284.52, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg2284520.jpg'}, {'end': 2636.248, 'src': 'embed', 'start': 2608.933, 'weight': 3, 'content': [{'end': 2616.757, 'text': "Um, so here we have the P tag and now inside of this P tag guys, we're going to have the user's email.", 'start': 2608.933, 'duration': 7.824}, {'end': 2626.463, 'text': "So here I'm going to say user, you know, and I'm having the optional training to protect it in case the user is undefined.", 'start': 2616.777, 'duration': 9.686}, {'end': 2627.583, 'text': 'Okay For any reason.', 'start': 2626.703, 'duration': 0.88}, {'end': 2631.085, 'text': 'Oh, Tony or Cortez dude just dropped another donation.', 'start': 2628.064, 'duration': 3.021}, {'end': 2632.646, 'text': 'Nine 99.', 'start': 2631.465, 'duration': 1.181}, {'end': 2633.566, 'text': 'Thank you so much.', 'start': 2632.646, 'duration': 0.92}, {'end': 2634.207, 'text': 'Thank you.', 'start': 2633.687, 'duration': 0.52}, {'end': 2635.327, 'text': 'That is huge.', 'start': 2634.267, 'duration': 1.06}, {'end': 2636.248, 'text': 'Thank you so much.', 'start': 2635.608, 'duration': 0.64}], 'summary': 'Demonstrating coding with p tag, handling undefined user, and acknowledging $9.99 donation', 'duration': 27.315, 'max_score': 2608.933, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg2608933.jpg'}], 'start': 2000.27, 'title': 'React payment page development', 'summary': 'Covers the process of developing a payment page in react with a focus on reusability, bem methodology, integrating stripe for payment processing, and benefits of writing good code.', 'chapters': [{'end': 2541.239, 'start': 2000.27, 'title': 'Using history.push for redirect', 'summary': 'Discusses the use of history.push for programmatically redirecting users, creating a payment component, and structuring the payment section within the component for an amazon clone, with a focus on maintaining button functionality and redirecting, as well as the structure of the payment section.', 'duration': 540.969, 'highlights': ['The chapter discusses the use of history.push for programmatically redirecting users', 'Creating a payment component', 'Structuring the payment section within the component']}, {'end': 3314.493, 'start': 2542.243, 'title': 'React payment page development', 'summary': 'Covers the process of developing a payment page in react, emphasizing the reusability of components and the use of bem methodology, and includes insights on integrating stripe for payment processing and the benefits of writing good code.', 'duration': 772.25, 'highlights': ['The chapter emphasizes the reusability of components and the use of BEM methodology, simplifying the payment page development process.', 'Insights are provided on the integration of Stripe for payment processing, including the potential for recurring subscription payments.', 'The importance of writing good code for reusability and efficiency is emphasized throughout the chapter.']}], 'duration': 1314.223, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg2000270.jpg', 'highlights': ['Insights are provided on the integration of Stripe for payment processing, including the potential for recurring subscription payments.', 'The chapter emphasizes the reusability of components and the use of BEM methodology, simplifying the payment page development process.', 'The importance of writing good code for reusability and efficiency is emphasized throughout the chapter.', 'The chapter discusses the use of history.push for programmatically redirecting users', 'Creating a payment component', 'Structuring the payment section within the component']}, {'end': 4055.395, 'segs': [{'end': 3435.557, 'src': 'embed', 'start': 3405.141, 'weight': 5, 'content': [{'end': 3407.462, 'text': 'So you can see it centered it, and that looks pretty clean.', 'start': 3405.141, 'duration': 2.321}, {'end': 3413.367, 'text': "And we also gave a border bottom of light gray, right? So we've got that checkout in the middle of the screen now.", 'start': 3407.903, 'duration': 5.464}, {'end': 3417.084, 'text': "The next thing we're going to do is we're going to target that anchor tag.", 'start': 3413.882, 'duration': 3.202}, {'end': 3421.988, 'text': 'So the one which, where it says the two or zero items, and here the way we do that is,', 'start': 3417.324, 'duration': 4.664}, {'end': 3435.557, 'text': "we say the following so we go ahead and we target and we say payment container the H1 inside of it and we're saying target the anchor inside of that and the text decoration to none.", 'start': 3421.988, 'duration': 13.569}], 'summary': 'Styling the checkout screen with centered alignment and light gray border, targeting anchor tag for text decoration.', 'duration': 30.416, 'max_score': 3405.141, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg3405141.jpg'}, {'end': 3500.913, 'src': 'embed', 'start': 3467.978, 'weight': 0, 'content': [{'end': 3469.859, 'text': "I'm going to go ahead and say display flex.", 'start': 3467.978, 'duration': 1.881}, {'end': 3473.205, 'text': 'So as soon as we do that, we should see it kick into action.', 'start': 3470.843, 'duration': 2.362}, {'end': 3474.366, 'text': 'There you go.', 'start': 3473.225, 'duration': 1.141}, {'end': 3478.409, 'text': 'So you see the delivery address and its information went into a row.', 'start': 3474.726, 'duration': 3.683}, {'end': 3484.994, 'text': "And then we have some padding margin and a border bottom we're about to drop in right now.", 'start': 3479.33, 'duration': 5.664}, {'end': 3485.714, 'text': 'So there we go.', 'start': 3485.014, 'duration': 0.7}, {'end': 3488.456, 'text': "Okay, so we've got that dropping in.", 'start': 3485.734, 'duration': 2.722}, {'end': 3493.06, 'text': 'Save and it will look a little bit more clean.', 'start': 3489.197, 'duration': 3.863}, {'end': 3495.182, 'text': "So you see it's spaced out a little bit.", 'start': 3493.38, 'duration': 1.802}, {'end': 3500.913, 'text': "So we get a very nice spaced out situation now, so everything isn't so scrunched up.", 'start': 3495.722, 'duration': 5.191}], 'summary': 'Using display flex for delivery address, creating padding, margin, and border bottom for a cleaner look.', 'duration': 32.935, 'max_score': 3467.978, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg3467978.jpg'}, {'end': 3759.061, 'src': 'embed', 'start': 3730.805, 'weight': 3, 'content': [{'end': 3740.691, 'text': 'When you say card capturing, you mean like when I pop in my credit card details here, something needs to be able to handle this, right? Yeah.', 'start': 3730.805, 'duration': 9.886}, {'end': 3742.652, 'text': "So we didn't actually write the code for that.", 'start': 3740.831, 'duration': 1.821}, {'end': 3747.735, 'text': 'We use something which is provided to us from Stripe and they capture your details.', 'start': 3742.672, 'duration': 5.063}, {'end': 3749.754, 'text': 'Yep Okay.', 'start': 3749.033, 'duration': 0.721}, {'end': 3751.995, 'text': "It's a Stripe library, right? Yep.", 'start': 3749.794, 'duration': 2.201}, {'end': 3759.061, 'text': 'Exactly So Gobikin Shanmugam says cloud functions are free to use.', 'start': 3752.096, 'duration': 6.965}], 'summary': 'Stripe handles credit card details, gobikin says cloud functions are free', 'duration': 28.256, 'max_score': 3730.805, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg3730805.jpg'}, {'end': 3913.916, 'src': 'embed', 'start': 3889.751, 'weight': 4, 'content': [{'end': 3897.455, 'text': 'So at Stripe was a Stripe dash JS, right? So this is the first dependency we want to install.', 'start': 3889.751, 'duration': 7.704}, {'end': 3898.956, 'text': 'This will allow us to act.', 'start': 3898.016, 'duration': 0.94}, {'end': 3903.199, 'text': 'This will allow us to pull in Stripe into our app and the second one.', 'start': 3898.996, 'duration': 4.203}, {'end': 3908.172, 'text': "is going to be something slightly similar named, but it's slightly different.", 'start': 3903.669, 'duration': 4.503}, {'end': 3913.916, 'text': "You need both of these to get the app working, okay? So we've just gone ahead and installed the first one.", 'start': 3908.212, 'duration': 5.704}], 'summary': 'Installing stripe dash js and its dependency is necessary for app functionality.', 'duration': 24.165, 'max_score': 3889.751, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg3889751.jpg'}], 'start': 3314.513, 'title': 'Optimizing checkout page with react and stripe integration', 'summary': 'Highlights optimizing the checkout page with react, including adding a checkout link, styling the payment container, utilizing flexbox for layout, and adjusting item percentages, as well as discussing the integration of stripe for payment processing and the use of firebase cloud functions, highlighting the need to upgrade to blaze plan for free usage and the installation of dependencies like stripe-js and react stripe js.', 'chapters': [{'end': 3576.8, 'start': 3314.513, 'title': 'Optimizing checkout page with react', 'summary': 'Highlights the process of optimizing the checkout page using react, including adding a checkout link, styling the payment container, utilizing flexbox for layout, and adjusting item percentages for improved display.', 'duration': 262.287, 'highlights': ['The chapter highlights the process of optimizing the checkout page using React, including adding a checkout link and styling the payment container.', 'Utilizing flexbox to adjust the layout and spacing of the payment section.', 'Adjusting item percentages to optimize the display of payment titles and addresses.', 'Demonstrating the process of adding items to the basket and updating the display.']}, {'end': 4055.395, 'start': 3578.308, 'title': 'Stripe integration and firebase cloud functions', 'summary': 'Discusses the integration of stripe for payment processing and the use of firebase cloud functions, highlighting the need to upgrade to blaze plan for free usage and the installation of dependencies like stripe-js and react stripe js.', 'duration': 477.087, 'highlights': ['The chapter discusses the integration of Stripe for payment processing and the use of Firebase Cloud Functions.', 'The need to upgrade to Blaze plan for free usage is emphasized, enabling the usage of cloud functions without incurring charges.', 'The installation of dependencies like Stripe-JS and React Stripe JS is demonstrated for the app to function effectively.']}], 'duration': 740.882, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg3314513.jpg', 'highlights': ['Discussing the integration of Stripe for payment processing and the use of Firebase Cloud Functions.', 'The need to upgrade to Blaze plan for free usage is emphasized, enabling the usage of cloud functions without incurring charges.', 'Utilizing flexbox to adjust the layout and spacing of the payment section.', 'The chapter highlights the process of optimizing the checkout page using React, including adding a checkout link and styling the payment container.', 'Adjusting item percentages to optimize the display of payment titles and addresses.', 'The installation of dependencies like Stripe-JS and React Stripe JS is demonstrated for the app to function effectively.', 'Demonstrating the process of adding items to the basket and updating the display.']}, {'end': 5499.524, 'segs': [{'end': 4247.131, 'src': 'embed', 'start': 4217.601, 'weight': 5, 'content': [{'end': 4220.644, 'text': 'Do we need secret key? We may do in a bit.', 'start': 4217.601, 'duration': 3.043}, {'end': 4222.887, 'text': 'We may do in a bit, yeah.', 'start': 4221.285, 'duration': 1.602}, {'end': 4224.428, 'text': 'On the back end, I think we need the secret key.', 'start': 4222.947, 'duration': 1.481}, {'end': 4225.249, 'text': 'Oh, yeah, for sure.', 'start': 4224.488, 'duration': 0.761}, {'end': 4227.892, 'text': 'If you want to click on Developers on the left panel.', 'start': 4225.409, 'duration': 2.483}, {'end': 4231.697, 'text': 'So developers on the left.', 'start': 4230.376, 'duration': 1.321}, {'end': 4233.419, 'text': 'Yep Click that.', 'start': 4232.118, 'duration': 1.301}, {'end': 4235.681, 'text': 'And then here, guys, you want to click on API keys.', 'start': 4233.479, 'duration': 2.202}, {'end': 4238.103, 'text': 'This is the way that you can always find it.', 'start': 4236.101, 'duration': 2.002}, {'end': 4240.405, 'text': 'So API keys.', 'start': 4239.605, 'duration': 0.8}, {'end': 4241.226, 'text': 'And there we go.', 'start': 4240.746, 'duration': 0.48}, {'end': 4243.168, 'text': 'So you want to copy that publishable key.', 'start': 4241.546, 'duration': 1.622}, {'end': 4247.131, 'text': 'Okay Give me one second.', 'start': 4246.05, 'duration': 1.081}], 'summary': 'Discussion about obtaining a secret key for the api, involving accessing developers panel and copying the publishable key.', 'duration': 29.53, 'max_score': 4217.601, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg4217601.jpg'}, {'end': 4714.359, 'src': 'embed', 'start': 4683.206, 'weight': 6, 'content': [{'end': 4686.569, 'text': 'Wait, where are you doing this? Because is it showing us? Okay.', 'start': 4683.206, 'duration': 3.363}, {'end': 4689.771, 'text': "Yeah So you've got this right here.", 'start': 4686.589, 'duration': 3.182}, {'end': 4691.413, 'text': "So we've got error and disabled.", 'start': 4689.951, 'duration': 1.462}, {'end': 4694.875, 'text': 'So error, set error equals use state no.', 'start': 4692.774, 'duration': 2.101}, {'end': 4698.378, 'text': 'And disabled, set disabled equals use state true.', 'start': 4695.476, 'duration': 2.902}, {'end': 4702.101, 'text': 'Now this is how you write variables inside of React pretty much.', 'start': 4699.159, 'duration': 2.942}, {'end': 4703.803, 'text': "So we're just creating two pieces of state.", 'start': 4702.241, 'duration': 1.562}, {'end': 4714.359, 'text': "And what we're going to say here is whenever we write into the card elements, This is essentially what's going to happen.", 'start': 4704.603, 'duration': 9.756}], 'summary': 'Creating error and disabled states in react components.', 'duration': 31.153, 'max_score': 4683.206, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg4683206.jpg'}, {'end': 5023.158, 'src': 'embed', 'start': 4994.671, 'weight': 0, 'content': [{'end': 4996.352, 'text': 'So stay tuned and we have that.', 'start': 4994.671, 'duration': 1.681}, {'end': 4998.794, 'text': 'We have a lot of juicy stuff today, so stay on this.', 'start': 4996.412, 'duration': 2.382}, {'end': 5003.398, 'text': "Right So let's go ahead and import the currency format and the get basket tool.", 'start': 4999.355, 'duration': 4.043}, {'end': 5006.123, 'text': 'Whoa, what a CLP.', 'start': 5004.261, 'duration': 1.862}, {'end': 5008.685, 'text': 'We got a nice big donation.', 'start': 5006.263, 'duration': 2.422}, {'end': 5011.107, 'text': "I think it's a $4 donation by Mateus.", 'start': 5008.805, 'duration': 2.302}, {'end': 5012.609, 'text': 'He goes, thank you so much for doing this stuff.', 'start': 5011.187, 'duration': 1.422}, {'end': 5015.291, 'text': "It's the first time I use Super Chat because you really deserve it.", 'start': 5012.649, 'duration': 2.642}, {'end': 5017.693, 'text': 'Greetings from Chile.', 'start': 5015.912, 'duration': 1.781}, {'end': 5019.174, 'text': 'Damn Nice.', 'start': 5017.813, 'duration': 1.361}, {'end': 5019.655, 'text': 'Thank you.', 'start': 5019.275, 'duration': 0.38}, {'end': 5022.557, 'text': "international, and it's crazy.", 'start': 5020.856, 'duration': 1.701}, {'end': 5023.158, 'text': "that's sick.", 'start': 5022.557, 'duration': 0.601}], 'summary': 'Received a $4 donation in clp from mateus. greetings from chile.', 'duration': 28.487, 'max_score': 4994.671, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg4994671.jpg'}, {'end': 5324.385, 'src': 'embed', 'start': 5264.871, 'weight': 4, 'content': [{'end': 5271.438, 'text': "jesus christ, this is not a challenge for any of them, it's a challenge for us literally.", 'start': 5264.871, 'duration': 6.567}, {'end': 5273.48, 'text': 'oh my god, oh man.', 'start': 5271.438, 'duration': 2.042}, {'end': 5278.133, 'text': "So now we've got this span which says if it's processing, say processing.", 'start': 5274.11, 'duration': 4.023}, {'end': 5283.096, 'text': "Otherwise, just say, why now? So let's go ahead and save.", 'start': 5278.333, 'duration': 4.763}, {'end': 5289.1, 'text': "And what we need to do now is processing and succeeded aren't actually declared anywhere.", 'start': 5283.716, 'duration': 5.384}, {'end': 5292.862, 'text': 'So we need to go ahead and introduce those pieces of state.', 'start': 5289.42, 'duration': 3.442}, {'end': 5294.744, 'text': "So the first one I'm going to introduce is succeeded.", 'start': 5292.962, 'duration': 1.782}, {'end': 5298.646, 'text': "So let's go ahead and import that.", 'start': 5295.504, 'duration': 3.142}, {'end': 5300.247, 'text': 'Add that in here, sorry.', 'start': 5299.367, 'duration': 0.88}, {'end': 5305.232, 'text': 'Succeeded And the second one is going to be processing.', 'start': 5300.808, 'duration': 4.424}, {'end': 5306.934, 'text': 'So this one right here.', 'start': 5305.913, 'duration': 1.021}, {'end': 5311.757, 'text': "So we've got const processing equals set processing, and that's going to be some use state.", 'start': 5307.434, 'duration': 4.323}, {'end': 5316.36, 'text': 'And then what we have is we have all four set up now.', 'start': 5312.998, 'duration': 3.362}, {'end': 5324.385, 'text': "So now we have, okay, let's save it.", 'start': 5316.52, 'duration': 7.865}], 'summary': 'Introducing state components succeeded and processing using usestate, to be saved.', 'duration': 59.514, 'max_score': 5264.871, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg5264871.jpg'}, {'end': 5393.083, 'src': 'embed', 'start': 5352.547, 'weight': 1, 'content': [{'end': 5360.195, 'text': "alright. so underneath it, what we're gonna do is, outside of this div, Whenever we have an error, we already have a piece of error, an error,", 'start': 5352.547, 'duration': 7.648}, {'end': 5361.115, 'text': 'a piece of error state.', 'start': 5360.195, 'duration': 0.92}, {'end': 5364.958, 'text': "So inside the form, but outside the div, we're going to have this line of code.", 'start': 5361.616, 'duration': 3.342}, {'end': 5372.783, 'text': "So it says if there's an error only then show the div with the error and okay, that's just a sort of like failsafe.", 'start': 5364.978, 'duration': 7.805}, {'end': 5379.407, 'text': "It's going to allow you to sort of have some, um, some error sort of message on the screen.", 'start': 5372.823, 'duration': 6.584}, {'end': 5384.17, 'text': "If there's anything wrong with the card, for example, the card number or anything like that, it will pop up at that point.", 'start': 5379.427, 'duration': 4.743}, {'end': 5389.303, 'text': "So, Now we're going to implement these two things, the handle submit and the handle change.", 'start': 5384.731, 'duration': 4.572}, {'end': 5393.083, 'text': "And they're going to be the most important things for you guys to get this working.", 'start': 5389.903, 'duration': 3.18}], 'summary': 'Implementing error handling for form submission and user input.', 'duration': 40.536, 'max_score': 5352.547, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg5352547.jpg'}], 'start': 4055.455, 'title': 'Setting up stripe and react state management', 'summary': 'Involves setting up an account on stripe, recommending its use over paypal for e-commerce, retrieving api keys, integrating stripejs and react stripejs, and implementing react state management and rendering, contributing to a full stack build with payment integration.', 'chapters': [{'end': 4137.582, 'start': 4055.455, 'title': 'Setting up account on stripe', 'summary': 'Involves setting up an account on stripe, requiring the input of email, full name, password, and confirmed password, with an emphasis on the simplicity and ease of the process, as well as the absence of the need for card details.', 'duration': 82.127, 'highlights': ['Setting up an account on Stripe involves adding email, full name, password, and confirmed password, and emphasizing the simplicity and ease of the process.', 'Creating an account on stripe is completely free and does not require card details.', 'Emphasis on the simplicity and ease of setting up an account on Stripe.']}, {'end': 4682.34, 'start': 4137.582, 'title': 'Setting up stripe for e-commerce', 'summary': 'Covers the process of setting up stripe for an e-commerce app, including the recommendation to use stripe over paypal, the retrieval of api keys, the integration of stripejs and react stripejs, and the creation of a payment form with card element and handling of form submission and input change.', 'duration': 544.758, 'highlights': ['The recommendation to use Stripe over PayPal', 'Retrieval of API keys and integration of StripeJS and React StripeJS', 'Creation of a payment form with card element and handling of form submission and input change']}, {'end': 5100.675, 'start': 4683.206, 'title': 'React state management and rendering', 'summary': 'Covers the implementation of react state management and rendering, including setting error and disabled states, handling card element changes, and rendering order total using currency format and get basket total, amidst live stream interactions and technical challenges.', 'duration': 417.469, 'highlights': ['The chapter covers the implementation of React state management and rendering, including setting error and disabled states, handling card element changes, and rendering order total using currency format and get basket total', 'Live stream interactions and technical challenges, including comments from Maribond, a computer malfunction, and audience engagement', 'Encouragement for saving files while coding and the significance of regular saving']}, {'end': 5499.524, 'start': 5100.695, 'title': 'Building order total and button state', 'summary': 'Covers the addition of the order total feature, button state functionality, and introduction of processing and succeeded states, contributing to a full stack build with payment integration.', 'duration': 398.829, 'highlights': ['The addition of the order total feature and its importance for later.', 'Introduction of processing and succeeded states for button state functionality.', 'Implementation of handle submit for payment integration.', 'Stoppage of multiple button clicks by setting processing to true.']}], 'duration': 1444.069, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg4055455.jpg', 'highlights': ['The chapter covers the implementation of React state management and rendering, including setting error and disabled states, handling card element changes, and rendering order total using currency format and get basket total', 'Retrieval of API keys and integration of StripeJS and React StripeJS', 'The recommendation to use Stripe over PayPal', 'Setting up an account on Stripe involves adding email, full name, password, and confirmed password, and emphasizing the simplicity and ease of the process', 'The addition of the order total feature and its importance for later', 'Introduction of processing and succeeded states for button state functionality', 'Implementation of handle submit for payment integration', 'Stoppage of multiple button clicks by setting processing to true', 'Creating an account on stripe is completely free and does not require card details', 'Emphasis on the simplicity and ease of setting up an account on Stripe']}, {'end': 7392.129, 'segs': [{'end': 5948.831, 'src': 'embed', 'start': 5922.063, 'weight': 3, 'content': [{'end': 5926.374, 'text': "And then I'm going to pass in the basket, and that's how we find the basket total.", 'start': 5922.063, 'duration': 4.311}, {'end': 5934.32, 'text': "Now, Stripe expects every total or amount when we're coding.", 'start': 5926.834, 'duration': 7.486}, {'end': 5938.083, 'text': "So a lot of people are saying they can't see at the moment, Kazi.", 'start': 5934.34, 'duration': 3.743}, {'end': 5939.304, 'text': "I don't think that's correct.", 'start': 5938.123, 'duration': 1.181}, {'end': 5940.465, 'text': 'I think you guys can see.', 'start': 5939.344, 'duration': 1.121}, {'end': 5942.106, 'text': "Oh, right, they can't see.", 'start': 5941.145, 'duration': 0.961}, {'end': 5944.127, 'text': "Can't see what? Because you're not following me.", 'start': 5942.126, 'duration': 2.001}, {'end': 5946.369, 'text': 'Oh, crap.', 'start': 5945.729, 'duration': 0.64}, {'end': 5948.831, 'text': "Yeah So guys, I'll run through that again.", 'start': 5946.929, 'duration': 1.902}], 'summary': 'Discussion on coding for stripe, clarifying visibility issues.', 'duration': 26.768, 'max_score': 5922.063, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg5922063.jpg'}, {'end': 5999.147, 'src': 'embed', 'start': 5974.419, 'weight': 0, 'content': [{'end': 5979.882, 'text': 'So now guys, it said away Axios and we basically create an object and inside it we said method post.', 'start': 5974.419, 'duration': 5.463}, {'end': 5982.523, 'text': 'Okay And then URL.', 'start': 5980.142, 'duration': 2.381}, {'end': 5984.464, 'text': 'And here we have back ticks.', 'start': 5983.223, 'duration': 1.241}, {'end': 5987.682, 'text': "And it's basically saying forward slash payments.", 'start': 5985.421, 'duration': 2.261}, {'end': 5988.782, 'text': 'All right.', 'start': 5988.562, 'duration': 0.22}, {'end': 5990.583, 'text': 'Forward slash create.', 'start': 5989.503, 'duration': 1.08}, {'end': 5992.604, 'text': "Then we're saying total.", 'start': 5991.363, 'duration': 1.241}, {'end': 5994.865, 'text': 'Okay So total.', 'start': 5993.024, 'duration': 1.841}, {'end': 5999.147, 'text': 'And then this is question mark total because this is something called a query param.', 'start': 5995.545, 'duration': 3.602}], 'summary': 'Creating a post request with axios to /payments/create, using query param total.', 'duration': 24.728, 'max_score': 5974.419, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg5974419.jpg'}, {'end': 6107.523, 'src': 'embed', 'start': 6077.13, 'weight': 4, 'content': [{'end': 6080.492, 'text': 'Like an all out donation, like freaking war.', 'start': 6077.13, 'duration': 3.362}, {'end': 6082.373, 'text': "And he's like a knight leading it.", 'start': 6080.692, 'duration': 1.681}, {'end': 6083.353, 'text': 'Thanks, Gabriel.', 'start': 6082.653, 'duration': 0.7}, {'end': 6084.214, 'text': 'Appreciate you, brother.', 'start': 6083.393, 'duration': 0.821}, {'end': 6086.375, 'text': 'Thank you so much, dude.', 'start': 6085.194, 'duration': 1.181}, {'end': 6087.275, 'text': 'Thank you.', 'start': 6086.855, 'duration': 0.42}, {'end': 6089.616, 'text': "I'll match you.", 'start': 6088.856, 'duration': 0.76}, {'end': 6094.678, 'text': 'Get basket total times 100 to get the subunits.', 'start': 6091.797, 'duration': 2.881}, {'end': 6098.08, 'text': 'Now, this essentially creates that.', 'start': 6095.198, 'duration': 2.882}, {'end': 6107.523, 'text': "So it goes ahead and we're going to basically once we set up this end point, we'll be able to call it and we should get some kind of response.", 'start': 6099.4, 'duration': 8.123}], 'summary': 'Discussion about donation matching and setting up an endpoint for response.', 'duration': 30.393, 'max_score': 6077.13, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg6077130.jpg'}, {'end': 6623.217, 'src': 'embed', 'start': 6595.605, 'weight': 1, 'content': [{'end': 6604.589, 'text': 'This is where we essentially go ahead and build a full stack application, okay? Yep.', 'start': 6595.605, 'duration': 8.984}, {'end': 6606.59, 'text': "Somebody says you didn't import use history.", 'start': 6604.729, 'duration': 1.861}, {'end': 6608.15, 'text': 'Hey, good catch, dude.', 'start': 6606.61, 'duration': 1.54}, {'end': 6611.752, 'text': 'Yeah, Daniel Soladoi.', 'start': 6608.791, 'duration': 2.961}, {'end': 6613.833, 'text': "That's dope, dude.", 'start': 6612.772, 'duration': 1.061}, {'end': 6616.174, 'text': 'Hopefully my pronunciation is perfect.', 'start': 6613.853, 'duration': 2.321}, {'end': 6619.916, 'text': "We've also got some other things which we haven't imported, like use effect.", 'start': 6617.294, 'duration': 2.622}, {'end': 6621.676, 'text': "We'll fix that in a sec.", 'start': 6620.776, 'duration': 0.9}, {'end': 6623.217, 'text': "We'll come back to this anyway afterwards.", 'start': 6621.716, 'duration': 1.501}], 'summary': 'Building a full stack application with some missing imports will be fixed later.', 'duration': 27.612, 'max_score': 6595.605, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg6595605.jpg'}, {'end': 6791.507, 'src': 'heatmap', 'start': 6639.868, 'weight': 1, 'content': [{'end': 6640.869, 'text': "That'll be insane.", 'start': 6639.868, 'duration': 1.001}, {'end': 6643.489, 'text': "Honestly, it'll be insane, guys.", 'start': 6640.889, 'duration': 2.6}, {'end': 6645.19, 'text': 'I cannot wait for that.', 'start': 6643.97, 'duration': 1.22}, {'end': 6648.85, 'text': 'So this, guys, is not pulling from the normal axioms.', 'start': 6645.888, 'duration': 2.962}, {'end': 6650.891, 'text': "It's pulling from the local file axioms.", 'start': 6648.87, 'duration': 2.021}, {'end': 6652.011, 'text': "So make sure you don't do that.", 'start': 6650.931, 'duration': 1.08}, {'end': 6655.193, 'text': 'And then the final one says, unexpected use of history.', 'start': 6652.672, 'duration': 2.521}, {'end': 6660.576, 'text': 'And what line is that, Kazi? What? Oh, I see.', 'start': 6655.233, 'duration': 5.343}, {'end': 6663.078, 'text': 'Line 53, colon 13.', 'start': 6661.197, 'duration': 1.881}, {'end': 6664.619, 'text': 'Boom All right.', 'start': 6663.078, 'duration': 1.541}, {'end': 6667.12, 'text': 'The reason why that happened is because we need to set up the history.', 'start': 6664.639, 'duration': 2.481}, {'end': 6670.582, 'text': 'So we say const history equals use history.', 'start': 6667.14, 'duration': 3.442}, {'end': 6671.783, 'text': 'Like so.', 'start': 6671.383, 'duration': 0.4}, {'end': 6675.545, 'text': 'And that will actually go ahead and get rid of that last error.', 'start': 6673.044, 'duration': 2.501}, {'end': 6678.586, 'text': "Nice So we've got the terminal up, guys.", 'start': 6675.565, 'duration': 3.021}, {'end': 6681.547, 'text': "Let's jump into Cloud Functions.", 'start': 6678.986, 'duration': 2.561}, {'end': 6685.929, 'text': 'So here we say Firebase init.', 'start': 6682.508, 'duration': 3.421}, {'end': 6693.656, 'text': 'Now here, I want you guys to pay close attention, right? So here, this list pops up.', 'start': 6687.91, 'duration': 5.746}, {'end': 6694.757, 'text': "We're all familiar with this list.", 'start': 6693.676, 'duration': 1.081}, {'end': 6698, 'text': "But now we're going to tick the functions one.", 'start': 6694.797, 'duration': 3.203}, {'end': 6701.644, 'text': "So I'm going to click functions with the space bar and then hit enter on the keyboard.", 'start': 6698.16, 'duration': 3.484}, {'end': 6706.769, 'text': 'And then this will pop up and it will say which language, JavaScript or TypeScript.', 'start': 6702.685, 'duration': 4.084}, {'end': 6708.891, 'text': "We're going to go ahead and do JavaScript today.", 'start': 6707.189, 'duration': 1.702}, {'end': 6710.833, 'text': "I'm going to hit enter on that.", 'start': 6708.911, 'duration': 1.922}, {'end': 6713.403, 'text': 'Enter, sorry.', 'start': 6712.622, 'duration': 0.781}, {'end': 6718.427, 'text': "And then it says, do you want to use ESLint to catch probable bugs? We're going to hit Y for yes.", 'start': 6713.823, 'duration': 4.604}, {'end': 6720.368, 'text': 'ESLint is quite cool.', 'start': 6719.387, 'duration': 0.981}, {'end': 6725.372, 'text': "Do you want to install your dependencies with NPM now? We're going to hit Y and do yes.", 'start': 6721.028, 'duration': 4.344}, {'end': 6726.332, 'text': 'Oh, I like it.', 'start': 6725.672, 'duration': 0.66}, {'end': 6727.853, 'text': 'It even makes it get ignored for you.', 'start': 6726.372, 'duration': 1.481}, {'end': 6730.275, 'text': 'Yeah, exactly.', 'start': 6728.734, 'duration': 1.541}, {'end': 6733.097, 'text': 'Now, something to know now, guys.', 'start': 6730.295, 'duration': 2.802}, {'end': 6736.72, 'text': 'You have your front end, right? So you essentially have your front end.', 'start': 6733.458, 'duration': 3.262}, {'end': 6741.258, 'text': 'Which is essentially going to be the react app.', 'start': 6737.977, 'duration': 3.281}, {'end': 6743.799, 'text': "so it's everything inside the source folder.", 'start': 6741.258, 'duration': 2.541}, {'end': 6749.12, 'text': 'is your front end up now what we have is this Functions folder.', 'start': 6743.799, 'duration': 5.321}, {'end': 6753.802, 'text': 'so cause, yes, open up the file directory Right.', 'start': 6749.12, 'duration': 4.682}, {'end': 6757.743, 'text': 'so you guys need to really kind of think about this carefully now.', 'start': 6753.802, 'duration': 3.941}, {'end': 6761.524, 'text': 'So we have the source, which is essentially the entire app.', 'start': 6757.743, 'duration': 3.781}, {'end': 6762.006, 'text': 'Okay,', 'start': 6761.886, 'duration': 0.12}, {'end': 6763.028, 'text': "That's the front end app.", 'start': 6762.026, 'duration': 1.002}, {'end': 6764.55, 'text': 'Now the function.', 'start': 6763.509, 'duration': 1.041}, {'end': 6765.331, 'text': 'Hold up one second.', 'start': 6764.57, 'duration': 0.761}, {'end': 6766.854, 'text': "I'm going to help you out here visually.", 'start': 6765.371, 'duration': 1.483}, {'end': 6768.637, 'text': 'Yeah This is our.', 'start': 6767.094, 'duration': 1.543}, {'end': 6770.98, 'text': "Yeah So that's going to be the front end.", 'start': 6769.478, 'duration': 1.502}, {'end': 6772.162, 'text': "Okay So that's the app.", 'start': 6771, 'duration': 1.162}, {'end': 6774.366, 'text': 'All right.', 'start': 6772.923, 'duration': 1.443}, {'end': 6775.127, 'text': 'Then we have.', 'start': 6774.386, 'duration': 0.741}, {'end': 6777.3, 'text': 'the functions folder.', 'start': 6775.779, 'duration': 1.521}, {'end': 6781.182, 'text': 'Now the functions folder is essentially a full backend.', 'start': 6777.46, 'duration': 3.722}, {'end': 6782.443, 'text': "Like I'm not joking guys.", 'start': 6781.382, 'duration': 1.061}, {'end': 6786.265, 'text': 'This is not like some little like toy or whatever.', 'start': 6782.703, 'duration': 3.562}, {'end': 6789.466, 'text': 'I see people saying, well, what about man stack? This is a full backend.', 'start': 6786.305, 'duration': 3.161}, {'end': 6790.207, 'text': "What we're doing right now.", 'start': 6789.486, 'duration': 0.721}, {'end': 6791.507, 'text': 'Okay Yeah.', 'start': 6790.227, 'duration': 1.28}], 'summary': 'Setting up cloud functions using firebase init with javascript and eslint for catching bugs and installing dependencies with npm.', 'duration': 151.639, 'max_score': 6639.868, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg6639868.jpg'}, {'end': 7199.11, 'src': 'embed', 'start': 7173.536, 'weight': 2, 'content': [{'end': 7180.617, 'text': "So now, every single time we get a thing where you guys got a job or you're making an income, send it to us,", 'start': 7173.536, 'duration': 7.081}, {'end': 7183.798, 'text': "we're gonna record it and we're just gonna start documenting it all in one place.", 'start': 7180.617, 'duration': 3.181}, {'end': 7185.778, 'text': "Exactly That'd be dope.", 'start': 7184.517, 'duration': 1.261}, {'end': 7187.52, 'text': 'And then we can reach that 5, 000 goal.', 'start': 7185.918, 'duration': 1.602}, {'end': 7188.38, 'text': 'Oh, yeah.', 'start': 7188.12, 'duration': 0.26}, {'end': 7188.941, 'text': "That'd be beautiful.", 'start': 7188.4, 'duration': 0.541}, {'end': 7190.863, 'text': 'And we can make it public so everybody can see it, too.', 'start': 7188.961, 'duration': 1.902}, {'end': 7191.623, 'text': "That'd be so cool.", 'start': 7190.883, 'duration': 0.74}, {'end': 7193.365, 'text': 'Yeah, exactly.', 'start': 7192.384, 'duration': 0.981}, {'end': 7199.11, 'text': 'Maribond says, I just landed my first client, too.', 'start': 7195.046, 'duration': 4.064}], 'summary': 'Document all income to reach the 5,000 goal and make it public.', 'duration': 25.574, 'max_score': 7173.536, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg7173536.jpg'}], 'start': 5501.224, 'title': 'Implementing payment processing with axios and stripe', 'summary': 'Details the process of implementing payment processing using axios and stripe, covering the generation of client secrets, making post requests with axios, and converting currency subunits for stripe, with a crucial emphasis on updating the special stripe secret when the basket changes.', 'chapters': [{'end': 5568.942, 'start': 5501.224, 'title': 'Stripe integration process', 'summary': 'Outlines the process of integrating stripe for processing payments, including the necessity of obtaining a client secret before initiating the payment.', 'duration': 67.718, 'highlights': ['The necessity of obtaining a client secret before initiating the payment, which involves informing Stripe of the intended payment amount, such as $50.', "The availability of Stripe without the need for importation, due to previous usage of 'use Stripe'.", 'The process of connecting Stripe based on previous actions, indicating the progress made in the integration.', 'The step-by-step process of integrating Stripe, including the pre-step of obtaining a client secret before processing the payment.']}, {'end': 6319.13, 'start': 5569.082, 'title': 'Implementing payment processing with axios and stripe', 'summary': 'Details the process of implementing payment processing using axios and stripe, covering the generation of client secrets, making post requests with axios, and converting currency subunits for stripe, with a crucial emphasis on updating the special stripe secret when the basket changes.', 'duration': 750.048, 'highlights': ['The chapter details the process of implementing payment processing using Axios and Stripe', 'Emphasizes the importance of updating the special Stripe secret when the basket changes', 'Explains the significance of converting currency subunits for Stripe', 'Describes the process of making post requests with Axios for payment processing']}, {'end': 6568.677, 'start': 6319.97, 'title': 'React javascript career advancement', 'summary': 'Discusses career advancement through a react javascript job obtained due to the assistance provided, along with a progress update on the donation rally, reaching over $200 in donations.', 'duration': 248.707, 'highlights': ['A progress update on the donation rally, reaching over $200 in donations and getting closer to the $5,000 target every day.', 'Career advancement through obtaining a job in React JavaScript with the assistance provided.', 'Overview of the payment processing logic and the use of Stripe for card payments.', 'Plans to build the back end to support the discussed functionalities and API calls using Cloud Functions and Axios.']}, {'end': 7022.194, 'start': 6569.141, 'title': 'Building full stack application with react and firebase', 'summary': 'Discusses setting up a full stack application with react and firebase, including handling payment pages, terminal setup, backend functions, and the importance of commitment in becoming a developer.', 'duration': 453.053, 'highlights': ['Setting up a full stack application with React and Firebase', 'Importance of commitment in becoming a developer', 'Handling payment pages and preventing return to the payment page on browser back', 'Terminal setup for backend functions']}, {'end': 7392.129, 'start': 7022.735, 'title': 'Building express app on cloud functions', 'summary': 'Discusses building an express app and hosting it on a cloud function, aiming to scale and serve as a full back end, with a goal to record and document 5,000 job or gig enrollments, and the installation of express, cause, and stripe dependencies.', 'duration': 369.394, 'highlights': ['The goal is to record and document 5,000 job or gig enrollments, emphasizing the need to start a counter and document every income to reach the goal.', 'Discussion about installing express, cause, and stripe dependencies, including commands and requirements for each installation.', 'Plans to host an express app on a cloud function, emphasizing its scalability and potential as a full back end.', 'Exchange about obtaining a secret key for stripe and the page to retrieve it from, ensuring the confidentiality and security of the key.', 'Excitement over individuals landing jobs due to tutorials, with one person claiming to have landed a job at Google and the subsequent humorous exchange about it.']}], 'duration': 1890.905, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg5501224.jpg', 'highlights': ['The necessity of obtaining a client secret before initiating the payment, such as $50', 'The chapter details the process of implementing payment processing using Axios and Stripe', 'A progress update on the donation rally, reaching over $200 in donations', 'Setting up a full stack application with React and Firebase', 'The goal is to record and document 5,000 job or gig enrollments']}, {'end': 8598.793, 'segs': [{'end': 8003.402, 'src': 'heatmap', 'start': 7688.423, 'weight': 0.784, 'content': [{'end': 7700.557, 'text': "now we're going to go ahead and say app.use, express.json, and this will allow us to sort of send data and pass it in the json format.", 'start': 7688.423, 'duration': 12.134}, {'end': 7702.737, 'text': 'think of it that way right now.', 'start': 7700.557, 'duration': 2.18}, {'end': 7704.258, 'text': "here's the api routes.", 'start': 7702.737, 'duration': 1.521}, {'end': 7709.279, 'text': 'okay, so what we like to do is we like to set up a dummy route to sort of test if things are working.', 'start': 7704.258, 'duration': 5.021}, {'end': 7717.521, 'text': "so for this one we're going to go ahead and use a forward slash and then we're going to go and this will give us something called a request and a response.", 'start': 7709.279, 'duration': 8.242}, {'end': 7719.88, 'text': 'This is how an API works.', 'start': 7718.559, 'duration': 1.321}, {'end': 7724.385, 'text': "Now, for this one, we're just going to make it super simple.", 'start': 7720.641, 'duration': 3.744}, {'end': 7730.711, 'text': "So we're going to check that it works by saying result.status is 200, if you call this.", 'start': 7724.845, 'duration': 5.866}, {'end': 7734.194, 'text': 'And it should send back a message saying, hello, world.', 'start': 7731.452, 'duration': 2.742}, {'end': 7736.757, 'text': 'Hello, world.', 'start': 7735.776, 'duration': 0.981}, {'end': 7738.839, 'text': "Let's save.", 'start': 7738.238, 'duration': 0.601}, {'end': 7748.446, 'text': "Now what we're going to do is go ahead and I'm going to show you guys how this works.", 'start': 7740.822, 'duration': 7.624}, {'end': 7756.85, 'text': "So to finally get this thing up and running, we say exports dot API because it's going to be our API and we say functions.", 'start': 7748.486, 'duration': 8.364}, {'end': 7758.351, 'text': 'This is where the cloud functions come in.', 'start': 7756.991, 'duration': 1.36}, {'end': 7765.215, 'text': 'HTTPS because the secure function we say on request like this right on request and we say app.', 'start': 7758.371, 'duration': 6.844}, {'end': 7774.767, 'text': 'Right now, this is the setup needed to get the backend express app running on a cloud function.', 'start': 7766.4, 'duration': 8.367}, {'end': 7782.513, 'text': 'Okay Now to actually get this up and running on your local, what we can do is we can actually emulate it.', 'start': 7774.827, 'duration': 7.686}, {'end': 7787.878, 'text': "Okay So to emulate it, there's a very nice command that we can do and cause I just want you to copy this command.", 'start': 7782.533, 'duration': 5.345}, {'end': 7790.884, 'text': 'and run this in the, actually I can do it.', 'start': 7788.983, 'duration': 1.901}, {'end': 7797.507, 'text': "So inside of the terminal right now, what I'm going to go ahead and do is run functions.", 'start': 7792.184, 'duration': 5.323}, {'end': 7799.487, 'text': "I'm going to write, sorry, Firebase.", 'start': 7797.527, 'duration': 1.96}, {'end': 7802.929, 'text': "We're going to say Firebase because we're going to emulate it, guys.", 'start': 7800.628, 'duration': 2.301}, {'end': 7804.069, 'text': "We're not going to deploy it just yet.", 'start': 7802.949, 'duration': 1.12}, {'end': 7807.971, 'text': "We're going to emulate it, see if it works, and then we're going to deploy it and then change it.", 'start': 7804.089, 'duration': 3.882}, {'end': 7815.454, 'text': "So we're going to say Firebase emulators, so emulators, and we're going to say colon start.", 'start': 7807.991, 'duration': 7.463}, {'end': 7817.735, 'text': "We're going to hit enter.", 'start': 7816.574, 'duration': 1.161}, {'end': 7822.096, 'text': 'And what this will do is it will spin up right?', 'start': 7818.854, 'duration': 3.242}, {'end': 7826.839, 'text': 'So it will actually go ahead and spin up a server right?', 'start': 7822.136, 'duration': 4.703}, {'end': 7828.76, 'text': 'So it will spin up like an express server.', 'start': 7826.999, 'duration': 1.761}, {'end': 7830.981, 'text': 'And it will actually go ahead.', 'start': 7829.34, 'duration': 1.641}, {'end': 7833.603, 'text': 'And it should pop up a window as well.', 'start': 7831.361, 'duration': 2.242}, {'end': 7835.684, 'text': "So I'm not sure if that popped up for you, Qazi.", 'start': 7834.043, 'duration': 1.641}, {'end': 7838.966, 'text': 'But it would have actually popped up a few windows for you.', 'start': 7836.945, 'duration': 2.021}, {'end': 7842.408, 'text': "Nope I don't see any windows yet at least.", 'start': 7840.267, 'duration': 2.141}, {'end': 7842.728, 'text': 'Hold on.', 'start': 7842.428, 'duration': 0.3}, {'end': 7843.188, 'text': 'Let me see.', 'start': 7842.768, 'duration': 0.42}, {'end': 7844.029, 'text': 'Let me.', 'start': 7843.208, 'duration': 0.821}, {'end': 7852.422, 'text': "So if you'd go to the terminal now, bro, don't see any windows.", 'start': 7847.998, 'duration': 4.424}, {'end': 7860.57, 'text': 'So if you go to the terminal and scroll up on the log, this is something for all of you guys to do.', 'start': 7853.663, 'duration': 6.907}, {'end': 7862.912, 'text': 'So, and go ahead and click on that.', 'start': 7861.11, 'duration': 1.802}, {'end': 7865.754, 'text': 'Yeah, there we go.', 'start': 7862.992, 'duration': 2.762}, {'end': 7870.599, 'text': 'Now this will show you the logs from the function, right? So this is like our backend logs right now.', 'start': 7865.774, 'duration': 4.825}, {'end': 7872.841, 'text': "So you don't want to close this running command.", 'start': 7871.019, 'duration': 1.822}, {'end': 7877.32, 'text': 'because this will actually keep on running the stuff.', 'start': 7873.978, 'duration': 3.342}, {'end': 7883.222, 'text': 'So if you scroll a little bit further up on the logs, Kazi, on the terminal, sorry.', 'start': 7877.34, 'duration': 5.882}, {'end': 7886.144, 'text': 'Okay Yeah, scroll a little bit further up.', 'start': 7883.242, 'duration': 2.902}, {'end': 7893.947, 'text': 'And if you go a little bit past this, you should see, down, down, stop, a little bit down.', 'start': 7887.004, 'duration': 6.943}, {'end': 7896.688, 'text': 'Yeah, there we go.', 'start': 7893.967, 'duration': 2.721}, {'end': 7900.59, 'text': 'So it says HTTP function initialized, and it will give you a URL.', 'start': 7896.928, 'duration': 3.662}, {'end': 7904.484, 'text': 'Now that URL is an API endpoint.', 'start': 7901.482, 'duration': 3.002}, {'end': 7910.687, 'text': 'So can we just copy that into the code over here? Maybe so you can see that.', 'start': 7904.504, 'duration': 6.183}, {'end': 7913.448, 'text': 'So yeah, there we go.', 'start': 7912.408, 'duration': 1.04}, {'end': 7915.61, 'text': 'So this is an example endpoint.', 'start': 7913.749, 'duration': 1.861}, {'end': 7917.431, 'text': 'Okay So this is an example endpoint.', 'start': 7915.65, 'duration': 1.781}, {'end': 7925.135, 'text': "Now, if we want to call this endpoint, right? So this is the forward slash, which means it's the default one.", 'start': 7918.251, 'duration': 6.884}, {'end': 7930.898, 'text': "So cause he won't want you to do is go ahead and write a command, click on this and we should see hello world.", 'start': 7925.435, 'duration': 5.463}, {'end': 7933.891, 'text': 'So it says res is not defined.', 'start': 7932.63, 'duration': 1.261}, {'end': 7936.352, 'text': "And that's because you see here we said res.", 'start': 7933.931, 'duration': 2.421}, {'end': 7937.833, 'text': 'This should be response.', 'start': 7936.672, 'duration': 1.161}, {'end': 7940.735, 'text': 'Because this should be response.', 'start': 7938.854, 'duration': 1.881}, {'end': 7942.015, 'text': "So I'm going to go ahead and save it.", 'start': 7940.755, 'duration': 1.26}, {'end': 7946.158, 'text': 'And the good thing about an emulator is it does it really quick, which means that we can go ahead and test it.', 'start': 7942.496, 'duration': 3.662}, {'end': 7947.438, 'text': "Hey, let's go.", 'start': 7946.558, 'duration': 0.88}, {'end': 7950.1, 'text': "Nice So that's dope, guys.", 'start': 7947.458, 'duration': 2.642}, {'end': 7953.041, 'text': 'So we have an API running right now.', 'start': 7950.12, 'duration': 2.921}, {'end': 7954.102, 'text': "So that's really cool.", 'start': 7953.301, 'duration': 0.801}, {'end': 7957.224, 'text': 'Now we have the API running.', 'start': 7955.603, 'duration': 1.621}, {'end': 7961.726, 'text': "And what we're going to do is obviously hello world isn't that exciting.", 'start': 7958.404, 'duration': 3.322}, {'end': 7965.552, 'text': "But I mean, it's pretty cool that we actually have that running on a cloud function.", 'start': 7962.21, 'duration': 3.342}, {'end': 7970.716, 'text': "Yeah, we're emulating it now to make sure everything works, to debug and do all that sort of stuff.", 'start': 7966.413, 'duration': 4.303}, {'end': 7973.719, 'text': "And then we're going to go ahead and deploy it.", 'start': 7971.237, 'duration': 2.482}, {'end': 7977.882, 'text': 'deploy the app and then you have these two completely powerful apps running.', 'start': 7973.719, 'duration': 4.163}, {'end': 7983.846, 'text': 'okay?. Now Shyamal Patel says never studied at 2 a.m. in 20 years.', 'start': 7977.882, 'duration': 5.964}, {'end': 7987.589, 'text': "Nice That's awesome, dude.", 'start': 7984.426, 'duration': 3.163}, {'end': 7988.55, 'text': 'All right.', 'start': 7987.609, 'duration': 0.941}, {'end': 7991.752, 'text': 'So we created this route, right? Yeah.', 'start': 7989.49, 'duration': 2.262}, {'end': 7995.739, 'text': "Now, I'm going to show you guys a test of how a sort of endpoint works.", 'start': 7992.298, 'duration': 3.441}, {'end': 8003.402, 'text': "So if I was to go ahead and copy this exact same route, let's say this is forward slash like let's go ahead and say forward slash Kazi,", 'start': 7996.16, 'duration': 7.242}], 'summary': 'Setting up and testing a basic api with express.js and cloud functions.', 'duration': 314.979, 'max_score': 7688.423, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg7688423.jpg'}, {'end': 7942.015, 'src': 'embed', 'start': 7918.251, 'weight': 2, 'content': [{'end': 7925.135, 'text': "Now, if we want to call this endpoint, right? So this is the forward slash, which means it's the default one.", 'start': 7918.251, 'duration': 6.884}, {'end': 7930.898, 'text': "So cause he won't want you to do is go ahead and write a command, click on this and we should see hello world.", 'start': 7925.435, 'duration': 5.463}, {'end': 7933.891, 'text': 'So it says res is not defined.', 'start': 7932.63, 'duration': 1.261}, {'end': 7936.352, 'text': "And that's because you see here we said res.", 'start': 7933.931, 'duration': 2.421}, {'end': 7937.833, 'text': 'This should be response.', 'start': 7936.672, 'duration': 1.161}, {'end': 7940.735, 'text': 'Because this should be response.', 'start': 7938.854, 'duration': 1.881}, {'end': 7942.015, 'text': "So I'm going to go ahead and save it.", 'start': 7940.755, 'duration': 1.26}], 'summary': "Fixing endpoint call to display 'hello world' response", 'duration': 23.764, 'max_score': 7918.251, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg7918251.jpg'}, {'end': 8088.215, 'src': 'embed', 'start': 8059.35, 'weight': 1, 'content': [{'end': 8064.993, 'text': "So now if we save it, it's actually going to bug out on the right because I don't think it will show you.", 'start': 8059.35, 'duration': 5.643}, {'end': 8065.613, 'text': "Okay, that's fine.", 'start': 8065.053, 'duration': 0.56}, {'end': 8068.895, 'text': "So now let's go and say app.host.", 'start': 8066.153, 'duration': 2.742}, {'end': 8072.467, 'text': "Cause we're going to make a post request.", 'start': 8070.606, 'duration': 1.861}, {'end': 8074.748, 'text': 'Okay So APIs have different types of requests.', 'start': 8072.547, 'duration': 2.201}, {'end': 8075.889, 'text': 'They have get requests.', 'start': 8075.108, 'duration': 0.781}, {'end': 8076.689, 'text': 'They have post requests.', 'start': 8075.909, 'duration': 0.78}, {'end': 8077.39, 'text': 'They have different things.', 'start': 8076.709, 'duration': 0.681}, {'end': 8078.31, 'text': 'All right.', 'start': 8077.41, 'duration': 0.9}, {'end': 8081.212, 'text': 'Somebody says they got so much into the screen that they burned their toast.', 'start': 8078.35, 'duration': 2.862}, {'end': 8088.215, 'text': "Nice Um, so now we've got a post request.", 'start': 8084.013, 'duration': 4.202}], 'summary': 'Discussion about making a post request and different types of api requests.', 'duration': 28.865, 'max_score': 8059.35, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg8059350.jpg'}, {'end': 8461.079, 'src': 'embed', 'start': 8428.048, 'weight': 0, 'content': [{'end': 8433.45, 'text': "Dude, I'm getting pretty excited about, like coding up some stuff on, you know, just like a live stream outside of this,", 'start': 8428.048, 'duration': 5.402}, {'end': 8434.771, 'text': 'like a Twitch type of live stream.', 'start': 8433.45, 'duration': 1.321}, {'end': 8439.132, 'text': 'And just like actually just relaxing and coding something together.', 'start': 8435.211, 'duration': 3.921}, {'end': 8440.953, 'text': 'That would actually be so fun.', 'start': 8439.172, 'duration': 1.781}, {'end': 8442.633, 'text': "That's what me and David did earlier.", 'start': 8441.253, 'duration': 1.38}, {'end': 8448.894, 'text': 'We literally went ahead and- Uh, we just kind of had like some music in the background and we were just coding.', 'start': 8442.673, 'duration': 6.221}, {'end': 8451.115, 'text': 'I was like, this is such a vibe.', 'start': 8448.914, 'duration': 2.201}, {'end': 8454.096, 'text': 'No, we did this earlier when we were setting everything up.', 'start': 8451.175, 'duration': 2.921}, {'end': 8456.837, 'text': "It'll be such a, yeah, that'll be such a live future.", 'start': 8454.236, 'duration': 2.601}, {'end': 8458.978, 'text': 'Yeah 100%.', 'start': 8457.317, 'duration': 1.661}, {'end': 8460.418, 'text': 'Yeah I want to do that.', 'start': 8458.978, 'duration': 1.44}, {'end': 8461.079, 'text': "That'd be sick.", 'start': 8460.438, 'duration': 0.641}], 'summary': 'Excited about coding a live stream on twitch with music, aiming for a fun and relaxed vibe.', 'duration': 33.031, 'max_score': 8428.048, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg8428048.jpg'}], 'start': 7393.029, 'title': 'Api setup and integration', 'summary': 'Discusses setting up api with react and stripe, setting up an express app on a cloud function, creating and testing api endpoints, and integrating axios for backend app development, emphasizing key processes and code snippets for each setup.', 'chapters': [{'end': 7670.395, 'start': 7393.029, 'title': 'Setting up an api with react and stripe', 'summary': 'Discusses setting up an api with react and stripe, emphasizing the process of generating a new key, configuring app settings, and defining the necessary components for api setup.', 'duration': 277.366, 'highlights': ['The chapter discusses setting up an API with React and Stripe', 'Emphasizing the process of generating a new key', 'Configuring app settings and defining the necessary components for API setup']}, {'end': 7886.144, 'start': 7670.395, 'title': 'Setting up express app on cloud function', 'summary': 'Covers setting up an express app on a cloud function, including using app.use for express.json to send data in json format, creating api routes, and emulating the setup with firebase emulators.', 'duration': 215.749, 'highlights': ['Using app.use for express.json allows sending data in JSON format', 'Creating API routes and setting up a dummy route to test functionality', 'Emulating the setup with Firebase emulators before deployment']}, {'end': 8405.3, 'start': 7887.004, 'title': 'Creating and testing api endpoints', 'summary': 'Demonstrates creating and testing api endpoints, including a get request, a post request for creating a payment intent, and handling response statuses, emphasizing the use of specific code snippets and debug console logs.', 'duration': 518.296, 'highlights': ['The chapter demonstrates creating and testing API endpoints, including a GET request, a POST request for creating a payment intent, and handling response statuses, emphasizing the use of specific code snippets and debug console logs.', 'The tutorial shows how to create and test API endpoints, including a demonstration of a GET request and a POST request for creating a payment intent using specific code snippets and debug console logs.', 'The tutorial emphasizes the use of specific code snippets and debug console logs to demonstrate the creation and testing of API endpoints, including a GET request and a POST request for creating a payment intent.']}, {'end': 8598.793, 'start': 8405.3, 'title': 'Backend app development and axios integration', 'summary': 'Covers setting up local api endpoints for a backend app, integrating axios with the base url, and making requests in payment.js to obtain the client secret, emphasizing the console log verification and inspection using localhost 3000.', 'duration': 193.493, 'highlights': ['Setting up local API endpoints for a backend app and integrating Axios with the base URL, utilizing localhost 5001 and the forward slash API for requests.', 'Making requests in payment.js to obtain the client secret and emphasizing the console log verification for the client secret.', 'Inspection using localhost 3000, including opening the inspector and hiding error messages for a smooth coding experience.']}], 'duration': 1205.764, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg7393029.jpg', 'highlights': ['The chapter demonstrates creating and testing API endpoints, including a GET request, a POST request for creating a payment intent, and handling response statuses, emphasizing the use of specific code snippets and debug console logs.', 'Setting up local API endpoints for a backend app and integrating Axios with the base URL, utilizing localhost 5001 and the forward slash API for requests.', 'Using app.use for express.json allows sending data in JSON format and creating API routes, including setting up a dummy route to test functionality.', 'The chapter discusses setting up an API with React and Stripe, emphasizing the process of generating a new key and configuring app settings.']}, {'end': 9603.154, 'segs': [{'end': 8629.229, 'src': 'embed', 'start': 8598.833, 'weight': 0, 'content': [{'end': 8609.616, 'text': 'Yep Uh, I know if you click on default where it says default, get rid of, get rid of, uh, M M for get rid of the, um, Oh, okay.', 'start': 8598.833, 'duration': 10.783}, {'end': 8610.837, 'text': "Don't worry about it.", 'start': 8609.636, 'duration': 1.201}, {'end': 8611.737, 'text': 'Just go to the one.', 'start': 8611.077, 'duration': 0.66}, {'end': 8613.817, 'text': 'Hold on.', 'start': 8613.357, 'duration': 0.46}, {'end': 8617.922, 'text': 'What though? Ah, there we go.', 'start': 8614.878, 'duration': 3.044}, {'end': 8620.304, 'text': 'Warnings Yeah, there we go.', 'start': 8618.863, 'duration': 1.441}, {'end': 8621.705, 'text': 'And the arrows.', 'start': 8621.044, 'duration': 0.661}, {'end': 8625.427, 'text': 'Yeah So we just want to show you guys the exact what we have right now.', 'start': 8621.745, 'duration': 3.682}, {'end': 8629.229, 'text': 'So now if you want to go ahead and add some items to your basket.', 'start': 8625.867, 'duration': 3.362}], 'summary': 'Instruction on modifying settings and adding items to basket.', 'duration': 30.396, 'max_score': 8598.833, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg8598833.jpg'}, {'end': 9057.11, 'src': 'heatmap', 'start': 8752.599, 'weight': 0.81, 'content': [{'end': 8753.979, 'text': 'Yep Okay.', 'start': 8752.599, 'duration': 1.38}, {'end': 8757.94, 'text': "And then let's click on, uh, proceed to check out.", 'start': 8754.859, 'duration': 3.081}, {'end': 8761.252, 'text': 'Done Client secret is.', 'start': 8759.332, 'duration': 1.92}, {'end': 8763.833, 'text': 'Hey Nice.', 'start': 8761.532, 'duration': 2.301}, {'end': 8765.933, 'text': "Let's go.", 'start': 8763.913, 'duration': 2.02}, {'end': 8768.354, 'text': "Exactly And then let's actually look.", 'start': 8766.854, 'duration': 1.5}, {'end': 8772.695, 'text': 'If you look on the left, Kazi, so the terminal that was running our backend can you see?', 'start': 8768.394, 'duration': 4.301}, {'end': 8779.316, 'text': 'We actually had a console log which actually said payment request received.', 'start': 8773.055, 'duration': 6.261}, {'end': 8780.356, 'text': 'boom for this amount.', 'start': 8779.316, 'duration': 1.04}, {'end': 8782.857, 'text': 'On the left, on the terminal.', 'start': 8781.437, 'duration': 1.42}, {'end': 8785.618, 'text': 'Code terminal.', 'start': 8785.037, 'duration': 0.581}, {'end': 8789.068, 'text': 'Okay What about it? No, at the bottom, bottom.', 'start': 8786.378, 'duration': 2.69}, {'end': 8790.609, 'text': 'It says, boom.', 'start': 8790.209, 'duration': 0.4}, {'end': 8792.09, 'text': 'It says, payment request received, boom.', 'start': 8790.709, 'duration': 1.381}, {'end': 8793.37, 'text': 'Oh, what the? OK.', 'start': 8792.17, 'duration': 1.2}, {'end': 8795.371, 'text': 'You see that? Yeah, yeah, yeah, right there.', 'start': 8793.51, 'duration': 1.861}, {'end': 8805.436, 'text': 'So what it did, guys, is it went to our back end, got a payment request for that amount in subunits.', 'start': 8796.112, 'duration': 9.324}, {'end': 8808.237, 'text': 'And then it actually went back to the front end.', 'start': 8806.036, 'duration': 2.201}, {'end': 8809.798, 'text': 'So it sent it back as a response.', 'start': 8808.257, 'duration': 1.541}, {'end': 8815.14, 'text': 'And then we rendered it on the screen as that secret key, which was that PI stuff right?', 'start': 8810.458, 'duration': 4.682}, {'end': 8818.73, 'text': 'So if we scroll to the bottom of the inspector, Yeah, we should be able to see.', 'start': 8815.38, 'duration': 3.35}, {'end': 8819.271, 'text': 'There we go.', 'start': 8818.87, 'duration': 0.401}, {'end': 8820.233, 'text': "That's the secret key.", 'start': 8819.291, 'duration': 0.942}, {'end': 8824.32, 'text': 'Now that key is essentially what is going to power the transaction.', 'start': 8820.493, 'duration': 3.827}, {'end': 8827.806, 'text': "Okay So that's going to power the entire transaction.", 'start': 8824.34, 'duration': 3.466}, {'end': 8829.069, 'text': 'So this is really, really good.', 'start': 8827.827, 'duration': 1.242}, {'end': 8837.084, 'text': 'Now what we can do is we go back to payment.js, go down, and we can carry on.', 'start': 8830.181, 'duration': 6.903}, {'end': 8839.304, 'text': 'My next one would be around $500.', 'start': 8837.124, 'duration': 2.18}, {'end': 8840.425, 'text': 'Just got to slip the first.', 'start': 8839.304, 'duration': 1.121}, {'end': 8844.686, 'text': 'Oh, nice, dude.', 'start': 8841.625, 'duration': 3.061}, {'end': 8851.769, 'text': "So now we're going to go ahead and on 950.", 'start': 8845.587, 'duration': 6.182}, {'end': 8852.449, 'text': 'So payment.js.', 'start': 8851.769, 'duration': 0.68}, {'end': 8853.549, 'text': 'You forgot to hit mute, bro.', 'start': 8852.469, 'duration': 1.08}, {'end': 8856.11, 'text': 'I need to know.', 'start': 8853.569, 'duration': 2.541}, {'end': 8857.951, 'text': 'There we go.', 'start': 8857.591, 'duration': 0.36}, {'end': 8863.177, 'text': "Right, so in payment.js, now we're going to go ahead and do.", 'start': 8859.315, 'duration': 3.862}, {'end': 8867.919, 'text': 'Right, so the payment actually went through, Qazi.', 'start': 8863.177, 'duration': 4.742}, {'end': 8870.561, 'text': "So let's open up.", 'start': 8868.159, 'duration': 2.402}, {'end': 8871.481, 'text': "No, it didn't go through yet.", 'start': 8870.561, 'duration': 0.92}, {'end': 8872.302, 'text': "It hasn't gone through yet.", 'start': 8871.701, 'duration': 0.601}, {'end': 8872.882, 'text': 'Not nice.', 'start': 8872.342, 'duration': 0.54}, {'end': 8876.184, 'text': "Right, so let's move our face off the screen.", 'start': 8872.902, 'duration': 3.282}, {'end': 8881.586, 'text': "Done Right, let's go to that card at the bottom, where it says card number.", 'start': 8876.724, 'duration': 4.862}, {'end': 8885.768, 'text': "And guys, when you're using the test keys, you have to use 424242.", 'start': 8883.047, 'duration': 2.721}, {'end': 8889.637, 'text': 'Just keep typing in 424242.', 'start': 8885.768, 'duration': 3.869}, {'end': 8893.119, 'text': 'this bit right, all right, hold on, hold on, hold on, hold on, hold on, hold on.', 'start': 8889.637, 'duration': 3.482}, {'end': 8897.961, 'text': "i'm gonna make it go up, so it's damn, how high up is it?", 'start': 8893.119, 'duration': 4.842}, {'end': 8899.602, 'text': 'there we go all right.', 'start': 8897.961, 'duration': 1.641}, {'end': 8903.003, 'text': 'so yeah, in the card number right, four, two, four, two, four, two.', 'start': 8899.602, 'duration': 3.401}, {'end': 8906.005, 'text': "i just don't stop writing four, two forever, yep.", 'start': 8903.003, 'duration': 3.002}, {'end': 8911.545, 'text': 'and then click on buy now, and then it says processing, and then boom Right.', 'start': 8906.005, 'duration': 5.54}, {'end': 8915.409, 'text': 'Oh, now I want you to pay attention to a few things.', 'start': 8912.286, 'duration': 3.123}, {'end': 8919.432, 'text': 'The URL on the, on the top says Ford slash orders.', 'start': 8915.989, 'duration': 3.443}, {'end': 8920.273, 'text': 'Yep Right.', 'start': 8919.572, 'duration': 0.701}, {'end': 8923.756, 'text': "So we're going to build that page and it would actually take us over there.", 'start': 8920.593, 'duration': 3.163}, {'end': 8925.838, 'text': 'Now cause he go over to stripe.', 'start': 8924.356, 'duration': 1.482}, {'end': 8932.163, 'text': 'All right, guys, this is going to blow your mind if it works.', 'start': 8927.199, 'duration': 4.964}, {'end': 8936.186, 'text': 'Right Hey, Oh shit, bro.', 'start': 8932.884, 'duration': 3.302}, {'end': 8937.227, 'text': 'Today I made $948 in my store.', 'start': 8936.226, 'duration': 1.001}, {'end': 8941.172, 'text': "Hey, let's go, guys.", 'start': 8940.07, 'duration': 1.102}, {'end': 8944.555, 'text': 'And if you notice, if you push that to the right-hand side, Kazi.', 'start': 8941.252, 'duration': 3.303}, {'end': 8947.519, 'text': 'Push this to the right-hand side.', 'start': 8945.096, 'duration': 2.423}, {'end': 8951.243, 'text': 'Notice how that $948.94 is the exact same amount that is on our terminal.', 'start': 8947.539, 'duration': 3.704}, {'end': 8957.985, 'text': 'oh so, let me.', 'start': 8956.524, 'duration': 1.461}, {'end': 8962.546, 'text': "so that's how you guys know that we're not messing around, right?", 'start': 8957.985, 'duration': 4.561}, {'end': 8966.268, 'text': "so that's actually human that went through.", 'start': 8962.546, 'duration': 3.722}, {'end': 8970.449, 'text': "so, and like uh, warp says oh yeah, because that's it, it worked, dude.", 'start': 8966.268, 'duration': 4.181}, {'end': 8977.052, 'text': "so now what we can do is let's go ahead and let's go to the perfect time to drop this in.", 'start': 8970.449, 'duration': 6.603}, {'end': 8982.954, 'text': "i think that's pretty cool and alexander goes, not gonna lie.", 'start': 8977.052, 'duration': 5.902}, {'end': 8990.062, 'text': "I have learned more from your live streams over the past few days than what I've learned over the last three years at my education.", 'start': 8984.358, 'duration': 5.704}, {'end': 8991.943, 'text': "That's amazing, dude.", 'start': 8991.142, 'duration': 0.801}, {'end': 8993.504, 'text': "That's amazing.", 'start': 8992.803, 'duration': 0.701}, {'end': 8996.866, 'text': 'Let me just give it a little air horn.', 'start': 8993.524, 'duration': 3.342}, {'end': 8999.467, 'text': "Hey That's exactly what we aim for, guys.", 'start': 8997.426, 'duration': 2.041}, {'end': 9004.73, 'text': "So let's go ahead and delete beast.", 'start': 9001.448, 'duration': 3.282}, {'end': 9005.631, 'text': 'Thank you for the donation.', 'start': 9004.79, 'duration': 0.841}, {'end': 9006.872, 'text': 'He goes, I love the CP team.', 'start': 9005.671, 'duration': 1.201}, {'end': 9007.952, 'text': 'Sunny, take rest first.', 'start': 9006.892, 'duration': 1.06}, {'end': 9022.965, 'text': "As in REST API, let's go! Go ahead and go to the top of Stripe.", 'start': 9010.282, 'duration': 12.683}, {'end': 9024.586, 'text': "I'll go to the top.", 'start': 9023.746, 'duration': 0.84}, {'end': 9026.146, 'text': 'And go to Payments.', 'start': 9024.726, 'duration': 1.42}, {'end': 9031.448, 'text': 'And then you can see, there you go.', 'start': 9029.707, 'duration': 1.741}, {'end': 9032.548, 'text': "Let's make that full screen.", 'start': 9031.488, 'duration': 1.06}, {'end': 9040.031, 'text': "And if you can see if you click that, that's a full guys, that is an actual payment, right? So it's a dummy payment.", 'start': 9033.98, 'duration': 6.051}, {'end': 9041.293, 'text': "So it's not actually charged a card.", 'start': 9040.051, 'duration': 1.242}, {'end': 9044.342, 'text': 'But that is a full payment.', 'start': 9041.82, 'duration': 2.522}, {'end': 9049.945, 'text': 'And the way you actually go ahead and make this a real payment is you switch from using the test keys to the real keys.', 'start': 9044.402, 'duration': 5.543}, {'end': 9051.706, 'text': "And that's inside of the API section.", 'start': 9050.005, 'duration': 1.701}, {'end': 9052.447, 'text': 'OK, here we go.', 'start': 9051.846, 'duration': 0.601}, {'end': 9057.11, 'text': 'Shahid says, making clones is actually very helpful to both learn and impress.', 'start': 9052.787, 'duration': 4.323}], 'summary': 'Successfully processed a payment for $948.94, demonstrating backend and frontend integration with stripe for a dummy payment.', 'duration': 304.511, 'max_score': 8752.599, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg8752599.jpg'}, {'end': 8897.961, 'src': 'embed', 'start': 8868.159, 'weight': 2, 'content': [{'end': 8870.561, 'text': "So let's open up.", 'start': 8868.159, 'duration': 2.402}, {'end': 8871.481, 'text': "No, it didn't go through yet.", 'start': 8870.561, 'duration': 0.92}, {'end': 8872.302, 'text': "It hasn't gone through yet.", 'start': 8871.701, 'duration': 0.601}, {'end': 8872.882, 'text': 'Not nice.', 'start': 8872.342, 'duration': 0.54}, {'end': 8876.184, 'text': "Right, so let's move our face off the screen.", 'start': 8872.902, 'duration': 3.282}, {'end': 8881.586, 'text': "Done Right, let's go to that card at the bottom, where it says card number.", 'start': 8876.724, 'duration': 4.862}, {'end': 8885.768, 'text': "And guys, when you're using the test keys, you have to use 424242.", 'start': 8883.047, 'duration': 2.721}, {'end': 8889.637, 'text': 'Just keep typing in 424242.', 'start': 8885.768, 'duration': 3.869}, {'end': 8893.119, 'text': 'this bit right, all right, hold on, hold on, hold on, hold on, hold on, hold on.', 'start': 8889.637, 'duration': 3.482}, {'end': 8897.961, 'text': "i'm gonna make it go up, so it's damn, how high up is it?", 'start': 8893.119, 'duration': 4.842}], 'summary': 'Discussion on using test keys with card number 424242.', 'duration': 29.802, 'max_score': 8868.159, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg8868159.jpg'}, {'end': 9005.631, 'src': 'embed', 'start': 8977.052, 'weight': 1, 'content': [{'end': 8982.954, 'text': "i think that's pretty cool and alexander goes, not gonna lie.", 'start': 8977.052, 'duration': 5.902}, {'end': 8990.062, 'text': "I have learned more from your live streams over the past few days than what I've learned over the last three years at my education.", 'start': 8984.358, 'duration': 5.704}, {'end': 8991.943, 'text': "That's amazing, dude.", 'start': 8991.142, 'duration': 0.801}, {'end': 8993.504, 'text': "That's amazing.", 'start': 8992.803, 'duration': 0.701}, {'end': 8996.866, 'text': 'Let me just give it a little air horn.', 'start': 8993.524, 'duration': 3.342}, {'end': 8999.467, 'text': "Hey That's exactly what we aim for, guys.", 'start': 8997.426, 'duration': 2.041}, {'end': 9004.73, 'text': "So let's go ahead and delete beast.", 'start': 9001.448, 'duration': 3.282}, {'end': 9005.631, 'text': 'Thank you for the donation.', 'start': 9004.79, 'duration': 0.841}], 'summary': 'Viewers find live streams more educational. significant impact - learning in days vs. years.', 'duration': 28.579, 'max_score': 8977.052, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg8977052.jpg'}], 'start': 8598.833, 'title': 'E-commerce and app development', 'summary': 'Covers live e-commerce transaction demo with a $948 payment, live stream learning, practical project importance, and rapid commercial app development with firebase integration.', 'chapters': [{'end': 8947.519, 'start': 8598.833, 'title': 'E-commerce transaction demonstration', 'summary': 'Showcased a live demonstration of an e-commerce transaction, including adding items to the basket, checking out, and processing a payment, with a highlight of receiving a $948 payment in the store.', 'duration': 348.686, 'highlights': ['The demonstration showcased the process of adding items to the basket and proceeding to checkout, with a mention of adding the Echo and Samsung products.', 'A donation of 10 Bulgarian currency was received during the demonstration, showcasing engagement with the audience.', 'The live demonstration included a real-time payment processing, with a highlight of receiving a $948 payment in the store.', 'The demonstration involved testing the payment process using test keys, specifically using the card number 424242 for testing the transaction.', 'The demonstration involved showcasing the URL redirection to /orders upon successful payment, along with a celebration of making $948 in the store.']}, {'end': 9342.37, 'start': 8947.539, 'title': 'Live stream learning and updates', 'summary': 'Demonstrates live stream interactions, including a demonstration of a dummy payment, the impact of learning on viewers, and the importance of practical projects in resumes, emphasizing the value of hands-on experience over traditional education.', 'duration': 394.831, 'highlights': ["The chapter demonstrates a dummy payment process, illustrating how to switch from test keys to real keys and the impact of the demonstration on the audience's learning experience.", 'A viewer expresses that they have learned more from live streams in the past few days than in three years of education, highlighting the practical value of the content.', 'A viewer shares an experience where showcasing practical projects like an Instagram clone in their resume helped them secure an internship interview, emphasizing the practical value of hands-on projects in career advancement.', 'The importance of practical projects in resumes is emphasized by a CTO, stating that relevant projects are a main criteria for selecting interview candidates, highlighting the value of hands-on experience in the job market.', 'The significance of showcasing practical projects in resumes is emphasized, with the demonstration of practical skills being more impressive to employers than traditional degrees, highlighting the practical value of hands-on experience in career development.']}, {'end': 9603.154, 'start': 9342.79, 'title': 'Building functional commercial app', 'summary': 'Demonstrates building a fully functional commercial app at a fast pace, including testing orders, updating order total, implementing payment, and pushing orders into the database using firebase.', 'duration': 260.364, 'highlights': ['The chapter demonstrates building a fully functional commercial app at a fast pace, including testing orders, updating order total, implementing payment, and pushing orders into the database using Firebase.', 'The app is tested for adding products to the basket, updating the order total, and making successful payments, resulting in increased sales and a functional store.', 'The process involves setting up Firebase, accessing Firestore, and pushing orders into the database, with a mention of receiving over a thousand dollars in real money.', 'The speaker emphasizes the speed and ease of building a fully functional commercial app, highlighting the impressive skills and capabilities demonstrated in the process.']}], 'duration': 1004.321, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg8598833.jpg', 'highlights': ['The demonstration involved testing the payment process using test keys, specifically using the card number 424242 for testing the transaction.', 'The demonstration showcased the process of adding items to the basket and proceeding to checkout, with a mention of adding the Echo and Samsung products.', 'The live demonstration included a real-time payment processing, with a highlight of receiving a $948 payment in the store.', 'The process involves setting up Firebase, accessing Firestore, and pushing orders into the database, with a mention of receiving over a thousand dollars in real money.', 'The chapter demonstrates building a fully functional commercial app at a fast pace, including testing orders, updating order total, implementing payment, and pushing orders into the database using Firebase.']}, {'end': 11927.639, 'segs': [{'end': 10151.332, 'src': 'embed', 'start': 10120.962, 'weight': 0, 'content': [{'end': 10124.465, 'text': 'Do you want me to refresh this? You can do.', 'start': 10120.962, 'duration': 3.503}, {'end': 10125.966, 'text': "There's nothing in the database right now.", 'start': 10124.565, 'duration': 1.401}, {'end': 10128.407, 'text': 'All right.', 'start': 10128.227, 'duration': 0.18}, {'end': 10130.989, 'text': "Yeah Now let's go to the basket.", 'start': 10129.068, 'duration': 1.921}, {'end': 10132.771, 'text': 'All right.', 'start': 10132.33, 'duration': 0.441}, {'end': 10135.072, 'text': 'You want me to click the basket? One item? Yep.', 'start': 10133.111, 'duration': 1.961}, {'end': 10136.573, 'text': 'Click it.', 'start': 10135.092, 'duration': 1.481}, {'end': 10138.395, 'text': 'And then click on proceed to check out.', 'start': 10137.074, 'duration': 1.321}, {'end': 10139.476, 'text': 'All right.', 'start': 10139.275, 'duration': 0.201}, {'end': 10140.816, 'text': 'Well, by the way, thank you so much.', 'start': 10139.496, 'duration': 1.32}, {'end': 10143.478, 'text': 'My girlfriend just brought me some food.', 'start': 10141.057, 'duration': 2.421}, {'end': 10144.079, 'text': 'Much needed food.', 'start': 10143.498, 'duration': 0.581}, {'end': 10146.828, 'text': 'Yeah Thank you.', 'start': 10145.34, 'duration': 1.488}, {'end': 10151.332, 'text': 'Oh man, hot sauce too? Sick.', 'start': 10147.369, 'duration': 3.963}], 'summary': 'Refresh database, add item to basket, proceed to checkout. gratitude for food received.', 'duration': 30.37, 'max_score': 10120.962, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg10120962.jpg'}, {'end': 11742.656, 'src': 'embed', 'start': 11717.518, 'weight': 2, 'content': [{'end': 11723.255, 'text': "Nice And this one is basically, it's going to have a render text and we can get rid of these fragments like so.", 'start': 11717.518, 'duration': 5.737}, {'end': 11727.439, 'text': "And this is going to say, it's going to have a H3 with the class name order total.", 'start': 11723.935, 'duration': 3.504}, {'end': 11729.641, 'text': "This one's going to say order total with the value.", 'start': 11727.459, 'duration': 2.182}, {'end': 11732.744, 'text': 'The value is going to be order.data.amount.', 'start': 11729.661, 'duration': 3.083}, {'end': 11738.013, 'text': 'And remember, we had to pass in the subunit.', 'start': 11733.268, 'duration': 4.745}, {'end': 11738.693, 'text': 'In cents.', 'start': 11738.113, 'duration': 0.58}, {'end': 11739.594, 'text': "It's in cents.", 'start': 11738.994, 'duration': 0.6}, {'end': 11742.656, 'text': "So it's like if it's $10, it's going to be like $10, 000.", 'start': 11739.614, 'duration': 3.042}], 'summary': 'Updating render text to display order total in cents with class name h3.', 'duration': 25.138, 'max_score': 11717.518, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg11717518.jpg'}, {'end': 11797.059, 'src': 'embed', 'start': 11758.717, 'weight': 3, 'content': [{'end': 11762.32, 'text': 'So go back up here and say import currency format from React currency format.', 'start': 11758.717, 'duration': 3.603}, {'end': 11763.521, 'text': 'There we go.', 'start': 11763.08, 'duration': 0.441}, {'end': 11769.565, 'text': "And here, now inside of order, let's go ahead and style it.", 'start': 11764.581, 'duration': 4.984}, {'end': 11771.807, 'text': "So we're going to say .", 'start': 11769.885, 'duration': 1.922}, {'end': 11775.49, 'text': "order Let's actually refresh the right-hand side.", 'start': 11771.807, 'duration': 3.683}, {'end': 11781.294, 'text': 'Done And there we go.', 'start': 11775.51, 'duration': 5.784}, {'end': 11790.997, 'text': "Nice So now we're actually going to say padding of 40 pixels, margin of 20 pixels.", 'start': 11781.815, 'duration': 9.182}, {'end': 11795.379, 'text': 'Herman says, insane, guys.', 'start': 11793.478, 'duration': 1.901}, {'end': 11796.199, 'text': 'Brilliant job.', 'start': 11795.439, 'duration': 0.76}, {'end': 11797.059, 'text': 'Keep it up.', 'start': 11796.319, 'duration': 0.74}], 'summary': 'Implemented currency format in react, styled order with 40px padding and 20px margin. received positive feedback.', 'duration': 38.342, 'max_score': 11758.717, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg11758717.jpg'}, {'end': 11895.626, 'src': 'embed', 'start': 11866.084, 'weight': 1, 'content': [{'end': 11874.227, 'text': "Okay And then before we wrap up with that, we're going to go to orders.css and we're going to add the following.", 'start': 11866.084, 'duration': 8.143}, {'end': 11885.631, 'text': "So orders.css, we're going to say for all of the orders, we're going to say padding of 20 pixels and 80 pixels.", 'start': 11874.867, 'duration': 10.764}, {'end': 11889.232, 'text': "So it's going to be 20 top and bottom, 80 left and right.", 'start': 11885.891, 'duration': 3.341}, {'end': 11895.626, 'text': "And then we're going to say the orders, H1, oops, orders.", 'start': 11889.612, 'duration': 6.014}], 'summary': 'In orders.css, add padding of 20px top and bottom, 80px left and right for all orders.', 'duration': 29.542, 'max_score': 11866.084, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg11866084.jpg'}], 'start': 9603.534, 'title': 'E-commerce app development', 'summary': 'Covers setting up a collection in cloud firestore, adding payment functionality to a firebase application, implementing real-time order management system, and styling and formatting e-commerce orders, with a focus on database setup, debugging, real-time updates, and css styling.', 'chapters': [{'end': 9687.729, 'start': 9603.534, 'title': 'Setting up collection in cloud firestore', 'summary': 'Discusses setting up a collection in cloud firestore, including creating a database in test mode and organizing user orders into a collection.', 'duration': 84.195, 'highlights': ["Users can create a database or Firestore and set it to test mode by clicking on the 'Create Database' option, ensuring smooth setup.", 'Users will have a collection of orders in Cloud Firestore, with each user having a unique collection for their orders, thereby facilitating efficient organization.', 'The chapter covers the process of setting up a collection in Cloud Firestore, emphasizing the importance of test mode and efficient organization of user orders.']}, {'end': 10800.985, 'start': 9689.536, 'title': 'Adding payment functionality to firebase', 'summary': 'Details the process of adding payment functionality to a firebase application, highlighting the need for firebase config file, setting up firestore, and the process of pushing orders into the database, with emphasis on debugging and resolving issues, culminating in a successful demonstration.', 'duration': 1111.449, 'highlights': ['The process of adding payment functionality to a Firebase application, including the need for Firebase config file and setting up Firestore, is detailed to ensure a smooth integration and operation.', 'The process of pushing orders into the database is thoroughly explained, covering the import of DB from local firebase, accessing user collections, and setting order details, providing a comprehensive understanding of the database operation.', 'The chapter emphasizes the importance of debugging and resolving issues, showcasing the identification and correction of a small code error that led to successful database entry, serving as a valuable lesson for developers.']}, {'end': 11638.635, 'start': 10801.185, 'title': 'Real-time orders management', 'summary': 'Discusses the implementation of real-time order management system using usestate, useeffect, and firebase, allowing users to view their most recent orders, with real-time updates and a discussion on the potential use for a thank you page.', 'duration': 837.45, 'highlights': ['The chapter discusses the implementation of real-time order management system using useState, useEffect, and Firebase.', 'The discussion includes the potential use for a thank you page when somebody orders, to show what they ordered.', 'The transcript features an inspiring story of a self-taught developer with a learning disability, demonstrating determination and resilience.']}, {'end': 11927.639, 'start': 11638.835, 'title': 'E-commerce order styling', 'summary': "Demonstrates the process of styling and formatting an e-commerce order, including importing and using currency format, adding css for styling, and addressing a specific issue with the 'remove from basket' button.", 'duration': 288.804, 'highlights': ['The chapter demonstrates the process of styling and formatting an e-commerce order, including importing and using currency format.', "It includes adding CSS for styling the orders and addressing a specific issue with the 'remove from basket' button.", 'The tutorial also shows the implementation of position relative and absolute for the order components, resulting in a visually appealing layout.']}], 'duration': 2324.105, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg9603534.jpg', 'highlights': ['Users can create a database or Firestore and set it to test mode for smooth setup', 'The process of adding payment functionality to a Firebase application is detailed', 'The chapter discusses the implementation of real-time order management system', 'The chapter demonstrates the process of styling and formatting an e-commerce order']}, {'end': 14225.729, 'segs': [{'end': 11963.279, 'src': 'embed', 'start': 11927.659, 'weight': 1, 'content': [{'end': 11931.341, 'text': "Yeah What are you removing from basket? There's no more basket anymore.", 'start': 11927.659, 'duration': 3.682}, {'end': 11932.142, 'text': 'Yeah, exactly.', 'start': 11931.521, 'duration': 0.621}, {'end': 11938.045, 'text': "Right So here, what we can do is inside of checkout product, let's go ahead and pass a prop called hide button.", 'start': 11932.202, 'duration': 5.843}, {'end': 11940.846, 'text': "Let's go inside of checkout product.", 'start': 11938.065, 'duration': 2.781}, {'end': 11946.169, 'text': "And then here, we're going to go ahead and pass in another prop called hide button.", 'start': 11941.927, 'duration': 4.242}, {'end': 11953.876, 'text': "And we're going to say, Only render this button if it's not hidden.", 'start': 11946.889, 'duration': 6.987}, {'end': 11963.279, 'text': "So if it's not hidden, then we will render this button like so.", 'start': 11953.896, 'duration': 9.383}], 'summary': 'Modifying checkout product to hide button if necessary.', 'duration': 35.62, 'max_score': 11927.659, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg11927659.jpg'}, {'end': 12278.056, 'src': 'embed', 'start': 12251.488, 'weight': 3, 'content': [{'end': 12256.912, 'text': "So now inside of the button and payment, let's go to payment.css.", 'start': 12251.488, 'duration': 5.424}, {'end': 12258.113, 'text': 'All right.', 'start': 12256.992, 'duration': 1.121}, {'end': 12261.035, 'text': 'So payment.css is missing some styles right now.', 'start': 12258.173, 'duration': 2.862}, {'end': 12265.888, 'text': "And the one that we're interested in is exactly for payment details.", 'start': 12262.126, 'duration': 3.762}, {'end': 12271.432, 'text': 'So we need to go to payment details and go to do.', 'start': 12265.948, 'duration': 5.484}, {'end': 12277.175, 'text': 'Right So firstly, we want to say target the form inside of payment details.', 'start': 12272.052, 'duration': 5.123}, {'end': 12278.056, 'text': "So I'm going to add it here.", 'start': 12277.195, 'duration': 0.861}], 'summary': 'Adding missing styles to payment.css for payment details form.', 'duration': 26.568, 'max_score': 12251.488, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg12251488.jpg'}, {'end': 12630.196, 'src': 'embed', 'start': 12587.547, 'weight': 4, 'content': [{'end': 12598.735, 'text': 'launched a firecracker and that one firecracker set a fire and, just like, lit up all of california on fire, like all of california,', 'start': 12587.547, 'duration': 11.188}, {'end': 12602.286, 'text': 'is like burning down, Damn.', 'start': 12598.735, 'duration': 3.551}, {'end': 12604.37, 'text': 'Holy crap, dude.', 'start': 12603.128, 'duration': 1.242}, {'end': 12609.041, 'text': 'The intensity.', 'start': 12604.391, 'duration': 4.65}, {'end': 12617.244, 'text': "I think the reality is kicking in, you know, as I say it, but okay, let's keep going.", 'start': 12613.841, 'duration': 3.403}, {'end': 12619.366, 'text': 'Yeah All right.', 'start': 12617.604, 'duration': 1.762}, {'end': 12622.749, 'text': "So let's go ahead and deploy now.", 'start': 12619.686, 'duration': 3.063}, {'end': 12630.196, 'text': "So she's like, wait, I wasn't laughing at the fire.", 'start': 12623.47, 'duration': 6.726}], 'summary': 'A single firecracker caused a massive fire in california, intensifying the situation.', 'duration': 42.649, 'max_score': 12587.547, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg12587547.jpg'}, {'end': 12796.884, 'src': 'embed', 'start': 12767.771, 'weight': 0, 'content': [{'end': 12769.512, 'text': "So right at the bottom, there's like an expansion.", 'start': 12767.771, 'duration': 1.741}, {'end': 12771.065, 'text': 'Yeah Yeah.', 'start': 12769.672, 'duration': 1.393}, {'end': 12772.326, 'text': 'Yeah Yeah.', 'start': 12771.646, 'duration': 0.68}, {'end': 12777.93, 'text': 'And then you see where it says the bottom, where it says blaze page, you go, you guys are going to be on something where it says spark.', 'start': 12772.346, 'duration': 5.584}, {'end': 12783.114, 'text': "Okay So it'll say spark at the bottom, but then what you want to click is modify.", 'start': 12779.912, 'duration': 3.202}, {'end': 12783.575, 'text': 'Okay Okay.', 'start': 12783.214, 'duration': 0.361}, {'end': 12786.036, 'text': "I'm going to highlight this so people can see what you're talking about.", 'start': 12783.615, 'duration': 2.421}, {'end': 12790.74, 'text': "So here it's for you guys, I'll say spark, but for us it says blaze.", 'start': 12786.056, 'duration': 4.684}, {'end': 12795.744, 'text': "Yeah Then what you're going to do is click on modify or upgrade if it's free.", 'start': 12791.681, 'duration': 4.063}, {'end': 12796.884, 'text': "So we'll just click that.", 'start': 12795.964, 'duration': 0.92}], 'summary': 'Instructions for modifying or upgrading to spark at the bottom of the page.', 'duration': 29.113, 'max_score': 12767.771, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg12767771.jpg'}, {'end': 14105.068, 'src': 'embed', 'start': 14063.405, 'weight': 2, 'content': [{'end': 14066.947, 'text': 'Wait, did you just deploy it right now or no? Give it one second.', 'start': 14063.405, 'duration': 3.542}, {'end': 14068.968, 'text': 'Still doing it.', 'start': 14066.967, 'duration': 2.001}, {'end': 14072.01, 'text': 'Greatest ever says this comment section is so funny today.', 'start': 14068.988, 'duration': 3.022}, {'end': 14072.95, 'text': "Damn, I'm in tears.", 'start': 14072.05, 'duration': 0.9}, {'end': 14080.795, 'text': "Yeah, guys, don't mess around with BEM.", 'start': 14079.174, 'duration': 1.621}, {'end': 14087.278, 'text': "Kazi's food must be stale now.", 'start': 14084.656, 'duration': 2.622}, {'end': 14090.159, 'text': 'Dude, please eat it right now.', 'start': 14087.998, 'duration': 2.161}, {'end': 14096.703, 'text': "Yeah, it's, you know, it's definitely gone a little bit colder.", 'start': 14092.941, 'duration': 3.762}, {'end': 14105.068, 'text': 'What I have here, I got some chicken, got some sweet potatoes.', 'start': 14101.446, 'duration': 3.622}], 'summary': 'Casual conversation about food and deployment in progress.', 'duration': 41.663, 'max_score': 14063.405, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg14063405.jpg'}], 'start': 11927.659, 'title': 'E-commerce store development', 'summary': 'Demonstrates creating an e-commerce store processing two orders, generating $6,000 revenue, enhancing payment screen ui with css adjustments, and discussing health concerns and accents.', 'chapters': [{'end': 12095.136, 'start': 11927.659, 'title': 'Implementing conditional rendering in checkout process', 'summary': 'Demonstrates implementing conditional rendering in the checkout process, passing props to hide button, styling a button, adding functionality to sign out, navigating to orders, and testing the checkout process.', 'duration': 167.477, 'highlights': ['The chapter demonstrates implementing conditional rendering in the checkout process, passing props to hide button, and styling a button.', 'Functionality of signing out is showcased, emphasizing the seamless transition to sign back in with the same credentials.', 'The process of navigating to orders is detailed, including the implementation of link to /orders and testing its functionality.', 'A demonstration of testing the checkout process is provided, including adding items to the cart and proceeding to checkout.']}, {'end': 12532.427, 'start': 12097.245, 'title': 'E-commerce store development', 'summary': 'Demonstrates the creation of an e-commerce store that successfully processes two orders, generating a revenue of $6,000 and enhances the ui of the payment screen with css adjustments, while also discussing health concerns and accents.', 'duration': 435.182, 'highlights': ['The e-commerce store successfully processes two orders, generating a revenue of $6,000.', 'CSS adjustments are made to enhance the UI of the payment screen.', 'Discussion about health concerns and accents takes place during the development process.', 'The creator discusses deploying the e-commerce store to a live environment and addresses environmental challenges.', 'The chapter includes lighthearted banter about regional accents and personal health issues while providing a live demonstration of e-commerce store development.']}, {'end': 12767.751, 'start': 12533.407, 'title': 'California fire incident', 'summary': 'Describes a gender reveal party fire incident in california, leading to a widespread fire outbreak, and the deployment of a cloud function with firebase, highlighting the need to upgrade the plan to blaze in case of deployment failure.', 'duration': 234.344, 'highlights': ['The gender reveal party in California led to a widespread fire outbreak, affecting the entire state.', 'Instructions for deploying a cloud function with Firebase were provided, emphasizing the need to deploy only the backend and upgrade the plan to Blaze in case of failure.', 'The need to upgrade the plan to Blaze in Firebase was highlighted as crucial for successful deployment.', 'The intensity of the fire outbreak in California was described with emphasis on its widespread impact.']}, {'end': 13250.984, 'start': 12767.771, 'title': 'Deploying and configuring firebase', 'summary': 'Covers the process of deploying and configuring a firebase project, including upgrading the plan from spark to blaze, deploying backend cloud functions, accessing and testing the live url, building and deploying the front end, and resolving deployment issues.', 'duration': 483.213, 'highlights': ['The Firebase project is upgraded from the Spark plan to the Blaze plan, which is a free upgrade and requires adding card details for verification.', 'The backend is deployed into Cloud Functions and a live URL is tested, confirming successful deployment and accessibility.', 'The front end is built and deployed using Firebase deploy, which is a convenient and seamless process through the Firebase CLI.', 'An issue arises during deployment, leading to the need for a rebuild of the front end and verification of its accessibility.']}, {'end': 14225.729, 'start': 13251.444, 'title': 'Firebase deployment troubleshooting', 'summary': 'Involves troubleshooting firebase deployment, including discussions on firebase commands, file structures, and deployment issues, and ends with a promotional announcement for a reactjs developer roadmap livestream.', 'duration': 974.285, 'highlights': ['The chapter involves troubleshooting Firebase deployment, including discussions on Firebase commands, file structures, and deployment issues.', 'Promotional announcement for a ReactJS developer roadmap livestream.', 'Discussion on Firebase pricing and reassurance about the minimal impact of 10,000 reads.']}], 'duration': 2298.07, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg11927659.jpg', 'highlights': ['The e-commerce store successfully processes two orders, generating a revenue of $6,000.', 'The Firebase project is upgraded from the Spark plan to the Blaze plan, which is a free upgrade and requires adding card details for verification.', 'The chapter demonstrates implementing conditional rendering in the checkout process, passing props to hide button, and styling a button.', 'The process of navigating to orders is detailed, including the implementation of link to /orders and testing its functionality.', 'The backend is deployed into Cloud Functions and a live URL is tested, confirming successful deployment and accessibility.']}, {'end': 15080.429, 'segs': [{'end': 14509.069, 'src': 'embed', 'start': 14476.849, 'weight': 5, 'content': [{'end': 14478.713, 'text': "because we still haven't seen your face.", 'start': 14476.849, 'duration': 1.864}, {'end': 14484.202, 'text': 'And so when you actually make these videos, this is the first time we actually get to see a lot of you.', 'start': 14479.093, 'duration': 5.109}, {'end': 14486.426, 'text': "And it's like, wow, this is awesome.", 'start': 14484.483, 'duration': 1.943}, {'end': 14487.849, 'text': 'And we wanna do this for you guys.', 'start': 14486.607, 'duration': 1.242}, {'end': 14491.531, 'text': 'So again, video experience, make it simple.', 'start': 14487.889, 'duration': 3.642}, {'end': 14495.896, 'text': 'The questions are right here for you, okay? So make sure the questions are right there.', 'start': 14491.932, 'duration': 3.964}, {'end': 14497.257, 'text': "It's like who are you right?", 'start': 14495.916, 'duration': 1.341}, {'end': 14504.885, 'text': "So you're gonna answer hey, I'm somebody, whatever your name is right?", 'start': 14497.717, 'duration': 7.168}, {'end': 14509.069, 'text': "Hey, I'm John and I just started coding like last year.", 'start': 14505.125, 'duration': 3.944}], 'summary': 'Enhance video experience by featuring more personal content, encouraging engagement and simplicity.', 'duration': 32.22, 'max_score': 14476.849, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg14476849.jpg'}, {'end': 14658.115, 'src': 'embed', 'start': 14621.808, 'weight': 0, 'content': [{'end': 14623.169, 'text': 'but raja was perfectly fine.', 'start': 14621.808, 'duration': 1.361}, {'end': 14624.91, 'text': 'he said here is the proof.', 'start': 14623.169, 'duration': 1.741}, {'end': 14625.831, 'text': 'yeah, so check this out.', 'start': 14624.91, 'duration': 0.921}, {'end': 14626.712, 'text': 'this is pretty crazy.', 'start': 14625.831, 'duration': 0.881}, {'end': 14637.827, 'text': "he said, here's the proof and he just sent his like entire proof and there's clear proof of clearing $3, 700 project dude, Nice, dude.", 'start': 14626.712, 'duration': 11.115}, {'end': 14639.908, 'text': 'Fuck Yeah, some real shit.', 'start': 14638.368, 'duration': 1.54}, {'end': 14642.749, 'text': "That's awesome, dude.", 'start': 14640.729, 'duration': 2.02}, {'end': 14644.01, 'text': "Nas, I'm sending this.", 'start': 14642.749, 'duration': 1.261}, {'end': 14647.671, 'text': 'you please do not freaking lose it, bro.', 'start': 14644.01, 'duration': 3.661}, {'end': 14648.612, 'text': "All right, what's the name??", 'start': 14647.671, 'duration': 0.941}, {'end': 14658.115, 'text': "Rafi, something, Rafi, cuz, that's my first name, Raja.", 'start': 14651.813, 'duration': 6.302}], 'summary': 'Raja cleared a $3,700 project, which is awesome.', 'duration': 36.307, 'max_score': 14621.808, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg14621808.jpg'}, {'end': 14788.471, 'src': 'embed', 'start': 14751.499, 'weight': 4, 'content': [{'end': 14753.74, 'text': "That makes everything we've done worth it.", 'start': 14751.499, 'duration': 2.241}, {'end': 14756.082, 'text': 'And then it also allows us to make a connection with you.', 'start': 14753.8, 'duration': 2.282}, {'end': 14759.864, 'text': "So the next time you're in the stream, you're not just like a tag, the greatest ever.", 'start': 14756.102, 'duration': 3.762}, {'end': 14761.424, 'text': "You're actually a real human being.", 'start': 14759.884, 'duration': 1.54}, {'end': 14764.306, 'text': 'And like, we know who you are and we have a relationship with you.', 'start': 14761.444, 'duration': 2.862}, {'end': 14771.71, 'text': 'Exactly I just want to highlight John window said I got my second full-stack job, second full-stack job.', 'start': 14765.267, 'duration': 6.443}, {'end': 14774.011, 'text': 'Thanks to studying off these dudes videos.', 'start': 14771.75, 'duration': 2.261}, {'end': 14775.292, 'text': "That's awesome dude.", 'start': 14774.632, 'duration': 0.66}, {'end': 14778.734, 'text': 'Uh, John window on, on, uh, YouTube.', 'start': 14776.453, 'duration': 2.281}, {'end': 14788.471, 'text': 'uh, oh, what insane dude i mean that goes in our counter right?', 'start': 14781.486, 'duration': 6.985}], 'summary': 'Creating a connection with viewers, leading to a second full-stack job for a viewer, highlighting the impact of their content.', 'duration': 36.972, 'max_score': 14751.499, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg14751499.jpg'}, {'end': 14986.048, 'src': 'embed', 'start': 14954.602, 'weight': 2, 'content': [{'end': 14956.382, 'text': 'Yeah I mean, yeah.', 'start': 14954.602, 'duration': 1.78}, {'end': 14959.663, 'text': 'So if you, if somebody, if somehow you can get me the link, I can drop it in.', 'start': 14956.482, 'duration': 3.181}, {'end': 14963.805, 'text': "Oh, it's just that same form I was showing on the thing.", 'start': 14959.683, 'duration': 4.122}, {'end': 14967.786, 'text': 'If you click on share form, right.', 'start': 14963.825, 'duration': 3.961}, {'end': 14969.386, 'text': 'It will give you a link.', 'start': 14967.806, 'duration': 1.58}, {'end': 14974.428, 'text': 'Okay I got it.', 'start': 14972.207, 'duration': 2.221}, {'end': 14978.346, 'text': "All right, here's the link, guys.", 'start': 14977.085, 'duration': 1.261}, {'end': 14980.026, 'text': "A lot of you are saying you're gonna do it.", 'start': 14978.566, 'duration': 1.46}, {'end': 14981.487, 'text': 'Awesome, I just dropped it in.', 'start': 14980.206, 'duration': 1.281}, {'end': 14986.048, 'text': "Click that link, it's an Airtable link, and that should allow you to post your thing.", 'start': 14981.587, 'duration': 4.461}], 'summary': 'Discussion about sharing a link for a form on airtable.', 'duration': 31.446, 'max_score': 14954.602, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg14954602.jpg'}], 'start': 14226.37, 'title': 'Deploying e-commerce app and video testimonial', 'summary': 'Highlights the deployment of an e-commerce app to firebase, including the requirement to submit a video testimonial and screenshots for a chance to win a $6,000 online coding bootcamp, emphasizing human interaction and the impact of the training, with a mention of a participant securing their second full-stack job.', 'chapters': [{'end': 14879.251, 'start': 14226.37, 'title': 'Deploying e-commerce app and video testimonial', 'summary': 'Highlights the deployment of an e-commerce app to firebase, including the requirement to submit a video testimonial and screenshots for a chance to win a $6,000 online coding bootcamp, with emphasis on the importance of human interaction and the impact of the training on participants, along with a mention of a participant securing their second full-stack job.', 'duration': 652.881, 'highlights': ['The chapter highlights the deployment of an e-commerce app to Firebase.', 'Participants are required to submit a video testimonial and screenshots for a chance to win a $6,000 online coding bootcamp.', 'Emphasis is placed on the importance of human interaction and the impact of the training on participants.', 'Mention of a participant securing their second full-stack job.']}, {'end': 15080.429, 'start': 14879.491, 'title': 'Encouraging video submissions for projects', 'summary': 'Discusses the encouragement for video submissions, with several participants expressing their intention to submit their projects, and the facilitation of the submission process through an airtable link and a mention of sharing the link in the facebook group and youtube chat.', 'duration': 200.938, 'highlights': ['Several participants express their intention to submit their projects, creating a sense of engagement and community support.', 'Facilitation of the submission process is discussed, including the provision of an Airtable link and plans for sharing the link in the Facebook group and YouTube chat.', 'Encouragement is given for well-framed, visually appealing video submissions with the project in the background, creating a sense of expectation for the quality of submissions.']}], 'duration': 854.059, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sB2b3ZYMQgg/pics/sB2b3ZYMQgg14226370.jpg', 'highlights': ['Participants are required to submit a video testimonial and screenshots for a chance to win a $6,000 online coding bootcamp.', 'Emphasis is placed on the importance of human interaction and the impact of the training on participants.', 'Several participants express their intention to submit their projects, creating a sense of engagement and community support.', 'Facilitation of the submission process is discussed, including the provision of an Airtable link and plans for sharing the link in the Facebook group and YouTube chat.', 'Mention of a participant securing their second full-stack job.', 'Encouragement is given for well-framed, visually appealing video submissions with the project in the background, creating a sense of expectation for the quality of submissions.', 'The chapter highlights the deployment of an e-commerce app to Firebase.']}], 'highlights': ['The e-commerce store successfully processes two orders, generating a revenue of $6,000.', 'The chapter witnessed an overwhelming response with over 300 submissions, showcasing active participation within the community.', 'Acknowledgment of the enthusiastic community engagement with 30,000 views and significant engagement, underlining the impact and reach of the content.', 'Donations totaling $89 were received within a short time span, including a significant $50 donation, reflecting strong community support.', 'The necessity of obtaining a client secret before initiating the payment, such as $50', 'The demonstration included a real-time payment processing, with a highlight of receiving a $948 payment in the store.', 'The Firebase project is upgraded from the Spark plan to the Blaze plan, which is a free upgrade and requires adding card details for verification.', 'The chapter covers building the Amazon app, hosting the database, and adding Stripe payment functionality.', 'The chapter covers the detailed process of adding items to the basket, proceeding to checkout, and entering card details before successfully processing a real payment through Stripe.', 'The chapter covers the implementation of React state management and rendering, including setting error and disabled states, handling card element changes, and rendering order total using currency format and get basket total']}