title
🔴 Let's Build a GOOGLE Clone with REACT JS for Beginners!
description
FREE JavaScript Training 👉 https://event.webinarjam.com/register/1/0z8y0u8?ref=https://www.cleverprogrammer.com/a/30476/isBQm8G8&utm_source=youtube&utm_medium=yt-description&utm_content=20-aug-google-clone-sonny-qazi&utm_campaign=live-everyday&utm_term=warm&utm_affiliate_link=true
In this FREE LIVE training, Qazi and Sonny will build a Google Search Clone LIVE with REACT JS and firebase!🚀🔥
Do you want to master React JS & learn how to make an income with your new skills? Click here & enroll NOW: https://www.cleverprogrammer.com/pwj?ref=https://www.cleverprogrammer.com/a/30476/isBQm8G8&utm_source=youtube&utm_medium=yt-description&utm_content=20-aug-google-clone-sonny-qazi&utm_campaign=live-everyday&utm_term=warm&utm_affiliate_link=true&course_name=REACT
#javascript #google #reactjs Biz / Sponsorships 👉 https://www.cleverprogrammer.com/partnerships
detail
{'title': "🔴 Let's Build a GOOGLE Clone with REACT JS for Beginners!", 'heatmap': [{'end': 5914.8, 'start': 5658.998, 'weight': 1}, {'end': 6153.804, 'start': 6028.021, 'weight': 0.746}], 'summary': "Tutorial series focuses on building a google clone with react js, covering areas such as using google's custom search api, react context api, material ui for icons, react router, and debugging tech issues. it emphasizes the goal of producing 5,000 developers with full-time jobs this year and 10,000 next year, and discusses live stream updates and donation milestones.", 'chapters': [{'end': 142.985, 'segs': [{'end': 51.225, 'src': 'embed', 'start': 24.114, 'weight': 0, 'content': [{'end': 29.478, 'text': 'So for example, let me just type in Tesla and hit enter and take a look at this.', 'start': 24.114, 'duration': 5.364}, {'end': 32.279, 'text': 'Boom, all the Tesla stuff is open.', 'start': 30.038, 'duration': 2.241}, {'end': 39.004, 'text': "If I type in react and hit enter, it didn't even refresh and you're here.", 'start': 32.339, 'duration': 6.665}, {'end': 44.643, 'text': 'Exactly And this is actually using the Google custom search API.', 'start': 39.104, 'duration': 5.539}, {'end': 47.444, 'text': 'So this is actually real Google results.', 'start': 44.843, 'duration': 2.601}, {'end': 51.225, 'text': 'You can see, even there, we want like 4 trillion results that come up.', 'start': 47.464, 'duration': 3.761}], 'summary': 'Demo of google custom search api with real google results, with 4 trillion results available.', 'duration': 27.111, 'max_score': 24.114, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM24114.jpg'}, {'end': 142.985, 'src': 'embed', 'start': 77.273, 'weight': 1, 'content': [{'end': 81.094, 'text': 'I hope you guys are actually excited about this Google clone.', 'start': 77.273, 'duration': 3.821}, {'end': 84.234, 'text': "I, we have some people and they're like, whoop, whoop.", 'start': 81.194, 'duration': 3.04}, {'end': 86.315, 'text': "It's a sound of the police by Adam.", 'start': 84.294, 'duration': 2.021}, {'end': 91.076, 'text': 'And Hajera is like, yo, hi everyone.', 'start': 87.235, 'duration': 3.841}, {'end': 93.116, 'text': 'Bojack is pumped.', 'start': 92.096, 'duration': 1.02}, {'end': 94.476, 'text': 'Felipe says clean.', 'start': 93.216, 'duration': 1.26}, {'end': 96.517, 'text': 'He likes the app, the build.', 'start': 94.797, 'duration': 1.72}, {'end': 105.347, 'text': "Yeah And Priyanshu says, hey, Qazi, you won't believe it, but because of your, hold on, let me actually put this here.", 'start': 96.537, 'duration': 8.81}, {'end': 106.768, 'text': 'Holy crap.', 'start': 105.968, 'duration': 0.8}, {'end': 111.831, 'text': "He goes, because of your skills, I landed a job that's worth five lakh rupees.", 'start': 106.868, 'duration': 4.963}, {'end': 115.013, 'text': "That's actually 6, 700 US dollars.", 'start': 112.112, 'duration': 2.901}, {'end': 116.434, 'text': "So that's actually no joke.", 'start': 115.294, 'duration': 1.14}, {'end': 120.917, 'text': 'Oh And he goes, absolute thanks.', 'start': 117.895, 'duration': 3.022}, {'end': 122.578, 'text': "Can't appreciate you more.", 'start': 120.977, 'duration': 1.601}, {'end': 126.02, 'text': "And he goes, best part being that I'm only 14 years old.", 'start': 123.559, 'duration': 2.461}, {'end': 129.936, 'text': 'Whoa Damn, son.', 'start': 126.04, 'duration': 3.896}, {'end': 131.958, 'text': 'Oh, snap.', 'start': 130.917, 'duration': 1.041}, {'end': 135.12, 'text': "That's insane, dude.", 'start': 133.379, 'duration': 1.741}, {'end': 138.262, 'text': 'That is actually huge.', 'start': 136.161, 'duration': 2.101}, {'end': 140.684, 'text': 'Wow Congratulations, Priyanshu.', 'start': 138.442, 'duration': 2.242}, {'end': 142.985, 'text': 'Pumped for you, brother.', 'start': 141.945, 'duration': 1.04}], 'summary': "Priyanshu landed a job worth 6,700 usd due to qazi's help, despite being only 14 years old. excitement and appreciation were expressed by the team.", 'duration': 65.712, 'max_score': 77.273, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM77273.jpg'}], 'start': 0.12, 'title': 'Building google clone with real results', 'summary': 'Focuses on building a google clone that retrieves real google results using the google custom search api, and highlights a successful job landing at 14 years old.', 'chapters': [{'end': 142.985, 'start': 0.12, 'title': 'Building google clone with real results', 'summary': 'Focuses on building a google clone that retrieves real google results using the google custom search api, with a mention of a successful job landing at 14 years old.', 'duration': 142.865, 'highlights': ["The Google clone app retrieves real Google results using the Google custom search API, demonstrating its functionality by searching for 'Tesla' and 'react', with over 4 trillion results showcased for 'Tesla'.", 'A participant shares landing a job worth 5 lakh rupees, equivalent to 6,700 US dollars, at the age of 14, attributing it to the skills learned.', 'The excitement and positive reactions from participants towards the Google clone build are expressed, with individuals expressing their enthusiasm and appreciation.']}], 'duration': 142.865, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM120.jpg', 'highlights': ["The Google clone app retrieves real Google results using the Google custom search API, showcasing over 4 trillion results for 'Tesla'.", 'A participant landed a job worth 5 lakh rupees at the age of 14, attributing it to the skills learned.', 'Excitement and positive reactions from participants towards the Google clone build are expressed.']}, {'end': 2114.312, 'segs': [{'end': 300.952, 'src': 'embed', 'start': 272.356, 'weight': 1, 'content': [{'end': 275.637, 'text': "And then we're going to be actually using an external API today.", 'start': 272.356, 'duration': 3.281}, {'end': 278.399, 'text': "So we're using Google's custom search API.", 'start': 275.658, 'duration': 2.741}, {'end': 283.571, 'text': "And that's how we're getting all of that crazy functionality that you guys are seeing right now,", 'start': 278.719, 'duration': 4.852}, {'end': 287.856, 'text': "when you search something and you're actually pulling live information from Google.", 'start': 283.571, 'duration': 4.285}, {'end': 291.981, 'text': "So we're using actual Google's official API, and we're going to show you guys how to do that.", 'start': 288.737, 'duration': 3.244}, {'end': 296.447, 'text': "And then we're also actually doing something we've never done in a build before.", 'start': 292.762, 'duration': 3.685}, {'end': 300.952, 'text': "We're building our own custom hook today, guys, which is super cool.", 'start': 296.727, 'duration': 4.225}], 'summary': "Using google's custom search api, and creating a custom hook for the first time.", 'duration': 28.596, 'max_score': 272.356, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM272356.jpg'}, {'end': 408.554, 'src': 'embed', 'start': 379.18, 'weight': 0, 'content': [{'end': 384.563, 'text': "It's free for you and it sends the video out to many, many other people who are trying to become developers.", 'start': 379.18, 'duration': 5.383}, {'end': 391.867, 'text': 'Our goal for this year is to produce 5, 000 developers who get full-time jobs.', 'start': 385.143, 'duration': 6.724}, {'end': 394.208, 'text': 'And our goal next year is gonna be 10, 000 developers or more.', 'start': 392.367, 'duration': 1.841}, {'end': 397.47, 'text': 'that have full-time jobs.', 'start': 396.109, 'duration': 1.361}, {'end': 401.491, 'text': 'We want to help produce the most amount of developers on the planet.', 'start': 397.67, 'duration': 3.821}, {'end': 402.772, 'text': "That's the number one goal.", 'start': 401.791, 'duration': 0.981}, {'end': 408.554, 'text': 'And I also want to say this channel, we clever programmers, all of us.', 'start': 403.392, 'duration': 5.162}], 'summary': 'Goal: produce 5,000 full-time developers this year, 10,000 next year.', 'duration': 29.374, 'max_score': 379.18, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM379180.jpg'}, {'end': 753.067, 'src': 'embed', 'start': 725.731, 'weight': 2, 'content': [{'end': 731.254, 'text': 'just like that person we had earlier, right? That jumped on and said, hey, I landed $6, 700 client.', 'start': 725.731, 'duration': 5.523}, {'end': 741.68, 'text': 'So the whole point of this training that I have put together for you guys is so you can see the roadmap from the coding skills to actually making an income.', 'start': 731.815, 'duration': 9.865}, {'end': 745.743, 'text': 'So definitely go register for that training and check it out.', 'start': 742.081, 'duration': 3.662}, {'end': 747.284, 'text': "I think it's gonna bring you a lot of value.", 'start': 745.803, 'duration': 1.481}, {'end': 749.225, 'text': "And with that said, let's keep going.", 'start': 747.744, 'duration': 1.481}, {'end': 753.067, 'text': 'And man, we just had two other amazing donations.', 'start': 749.285, 'duration': 3.782}], 'summary': 'Training aims to show roadmap from coding to income, with $6,700 client success.', 'duration': 27.336, 'max_score': 725.731, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM725731.jpg'}, {'end': 1209.055, 'src': 'embed', 'start': 1185.36, 'weight': 3, 'content': [{'end': 1192.985, 'text': "Yeah, and just so you guys know, like behind the scenes why this is happening is we're doing it in a way where we have a limit of 100 requests.", 'start': 1185.36, 'duration': 7.625}, {'end': 1203.351, 'text': "And what actually has happened is people who are watching this live stream right now went on that URL that's up there and spammed the search to be over 100 requests.", 'start': 1193.385, 'duration': 9.966}, {'end': 1205.532, 'text': "And that's why it didn't open earlier.", 'start': 1204.011, 'duration': 1.521}, {'end': 1209.055, 'text': "So that's why Sunny just built that like mass response and now it's good to go.", 'start': 1205.572, 'duration': 3.483}], 'summary': 'Due to over 100 search requests, sunny built a mass response to resolve the issue.', 'duration': 23.695, 'max_score': 1185.36, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM1185360.jpg'}, {'end': 1382.878, 'src': 'embed', 'start': 1354.323, 'weight': 4, 'content': [{'end': 1356.644, 'text': 'And then we have a few big clones lined up.', 'start': 1354.323, 'duration': 2.321}, {'end': 1360.745, 'text': 'One of them is Discord, because I know a lot of you guys keep asking for it.', 'start': 1356.724, 'duration': 4.021}, {'end': 1368.366, 'text': "And then we're also gonna add new technologies like Node.js and start teaching you guys MongoDB.", 'start': 1361.205, 'duration': 7.161}, {'end': 1371.907, 'text': 'And I know a lot of you are trying to learn those skills as well.', 'start': 1369.006, 'duration': 2.901}, {'end': 1377.715, 'text': 'Behind me right now is actually Frankie.', 'start': 1375.054, 'duration': 2.661}, {'end': 1380.477, 'text': 'And I wanna show you guys a little bit behind the scenes.', 'start': 1378.036, 'duration': 2.441}, {'end': 1382.878, 'text': 'Some of you guys might have known that we got a new place.', 'start': 1380.617, 'duration': 2.261}], 'summary': 'Introducing discord and new tech like node.js and mongodb, with a new place for operations.', 'duration': 28.555, 'max_score': 1354.323, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM1354323.jpg'}], 'start': 143.206, 'title': 'Google-clone, flexbox mastery, javascript training, and livestream updates', 'summary': "Covers building a google clone with react using context api, material ui for icons, react router, google's custom search api, and creating a custom hook, aiming to produce 5,000 developers with full-time jobs this year and 10,000 next year. it also emphasizes the importance of javascript developer training and discusses live stream updates related to technical issues and upcoming projects.", 'chapters': [{'end': 354.028, 'start': 143.206, 'title': 'Building google clone with react', 'summary': "Covers building a google clone with react, including using context api, material ui for icons, react router, google's custom search api, and creating a custom hook for pulling information from google servers, along with using firebase for app setup and deployment.", 'duration': 210.822, 'highlights': ["Covering various technologies and APIs The chapter covers using context API, Material UI for icons, React Router, Google's custom search API, creating a custom hook, and using Firebase for app setup and deployment.", "Utilizing Google's custom search API The tutorial demonstrates the use of Google's custom search API to pull live information from Google, providing a practical example of its functionality.", 'Creating a custom hook for Google server interaction The chapter introduces the creation and use of a custom hook to pull information from Google servers, offering a unique and practical coding experience for the audience.', 'Using Firebase for app setup and deployment The use of Firebase for setting up the app and deploying the Google clone is highlighted, showcasing its role in connecting the app to Google and facilitating deployment.']}, {'end': 690.766, 'start': 354.028, 'title': 'Flexbox mastery and developer goals', 'summary': "Focuses on flexbox, with a goal to produce 5,000 developers with full-time jobs this year and 10,000 next year, while highlighting the channel's growth as the fastest in the world, as well as a live coding session on vs code and firebase setup for a google-clone project.", 'duration': 336.738, 'highlights': ['The channel aims to produce 5,000 developers with full-time jobs this year and 10,000 next year, emphasizing on helping the most developers globally. The goal is to produce 5,000 developers with full-time jobs this year and 10,000 developers next year, aiming to help the most developers globally.', 'The channel is officially recognized as the fastest growing coding channel in the world, surpassing all other coding channels in growth rate. The channel, Clever Programmer, is officially the number one fastest growing coding channel in the world, outpacing all other coding channels in growth rate.', 'Live coding session on VS Code and Firebase setup for a Google-Clone project, with over 750 live viewers and multiple donations. The session includes a live coding demonstration using VS Code and Firebase setup for a Google-Clone project, attracting over 750 live viewers and receiving multiple donations.']}, {'end': 1184.8, 'start': 691.887, 'title': 'Javascript developer training: top 3 mistakes', 'summary': "Introduces a javascript developer training session, highlighting the importance of learning to add to one's portfolio and secure job opportunities, emphasizing the value of the training in bridging coding skills with income generation, and outlining the process of setting up and cleaning up a react app. donations and technical hiccups are also briefly mentioned.", 'duration': 492.913, 'highlights': ['The chapter introduces a JavaScript developer training session, emphasizing the value of the training in bridging coding skills with income generation The speaker emphasizes the importance of the training in helping individuals see the roadmap from coding skills to making an income.', "The chapter highlights the process of setting up and cleaning up a React app The speaker demonstrates setting up and cleaning up a React app, including steps such as opening a Chrome tab, registering for the training, and running 'npm start' to launch the local host with the React logo spinning.", 'The chapter briefly mentions donations and technical hiccups Donations and technical hiccups are briefly mentioned, including receiving donations from Sumit, Sai, Gopi, Romel, and Buscar, as well as experiencing internet connectivity issues and discussing potential solutions.']}, {'end': 1453.053, 'start': 1185.36, 'title': 'Livestream updates and studio tour', 'summary': 'Discusses a live stream technical issue related to 100 requests limit, receiving donations, and viewer count reaching 800. it also mentions upcoming projects such as a google app, uber clone, discord clone, and teaching node.js and mongodb, as well as a studio tour.', 'duration': 267.693, 'highlights': ['The live stream technical issue was caused by viewers exceeding the 100 requests limit, resulting in delayed opening of a URL.', 'The live stream received a $10 donation and reached 800 concurrent viewers and likes.', 'Upcoming projects include a Google app, Uber clone, Discord clone, and teaching Node.js and MongoDB.', 'A new studio setup called the Team CP Mansion is showcased, with plans for further improvements.']}, {'end': 2114.312, 'start': 1453.053, 'title': 'Professional project layout in react', 'summary': 'Discusses creating a professional project layout in react, emphasizing the use of pages and components, troubleshooting technical difficulties, and celebrating the success of the face detection clone, with the goal of helping 5,000 people land full-time jobs in development.', 'duration': 661.259, 'highlights': ['The chapter discusses creating a professional project layout in React, emphasizing the use of pages and components, and troubleshooting technical difficulties.', 'The host celebrates the success of the face detection clone, with the goal of helping 5,000 people land full-time jobs in development.', 'The host encounters and troubleshoots technical difficulties, including a TV shutting down and issues with the live share feature.', 'The chapter emphasizes the use of pages and components in the project layout, reflecting practices in professional environments.', 'The host shares the goal of helping 5,000 people land full-time jobs in development, highlighting the impact of the program.']}], 'duration': 1971.106, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM143206.jpg', 'highlights': ['The channel aims to produce 5,000 developers with full-time jobs this year and 10,000 next year, emphasizing on helping the most developers globally.', "The tutorial demonstrates the use of Google's custom search API to pull live information from Google, providing a practical example of its functionality.", 'The chapter introduces a JavaScript developer training session, emphasizing the value of the training in bridging coding skills with income generation.', 'The live stream technical issue was caused by viewers exceeding the 100 requests limit, resulting in delayed opening of a URL.', 'Upcoming projects include a Google app, Uber clone, Discord clone, and teaching Node.js and MongoDB.']}, {'end': 2931.137, 'segs': [{'end': 2224.533, 'src': 'embed', 'start': 2194.882, 'weight': 1, 'content': [{'end': 2198.404, 'text': "And to get these icons and avatars, we're going to have to use something called Material UI.", 'start': 2194.882, 'duration': 3.522}, {'end': 2202.147, 'text': "So we're going to have to install a bunch of dependencies at this point.", 'start': 2198.444, 'duration': 3.703}, {'end': 2204.348, 'text': "And we do this once and we don't have to do it again.", 'start': 2202.567, 'duration': 1.781}, {'end': 2208.891, 'text': "So Kazi, let's go ahead and install Material UI to begin with.", 'start': 2204.428, 'duration': 4.463}, {'end': 2214.348, 'text': "You're muted cozy.", 'start': 2213.548, 'duration': 0.8}, {'end': 2224.533, 'text': "Material UI, so we got to do npm install, you material UI course, I'm just going to go here, open up a new terminal.", 'start': 2216.389, 'duration': 8.144}], 'summary': 'Installing material ui for icons and avatars using npm once.', 'duration': 29.651, 'max_score': 2194.882, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM2194882.jpg'}, {'end': 2344.207, 'src': 'embed', 'start': 2318.179, 'weight': 2, 'content': [{'end': 2325.505, 'text': "So if you do get lost at any point, know that that's how we found those icons, right? So with that said, we now have material UI.", 'start': 2318.179, 'duration': 7.326}, {'end': 2328.987, 'text': 'So I can go ahead and pop in the icon and the avatar.', 'start': 2325.845, 'duration': 3.142}, {'end': 2333.351, 'text': "So the icon, actually, before we do that, let's go ahead and do one more step.", 'start': 2329.007, 'duration': 4.344}, {'end': 2337.454, 'text': 'So we need to set up React Reader to get these links, right? So I need a few links on the top.', 'start': 2333.431, 'duration': 4.023}, {'end': 2339.315, 'text': "So let's go ahead.", 'start': 2338.555, 'duration': 0.76}, {'end': 2344.207, 'text': "and so, if you go to React Reader on Google, uh-huh, let's do it.", 'start': 2339.315, 'duration': 4.892}], 'summary': 'Setting up material ui and react reader for links and icons.', 'duration': 26.028, 'max_score': 2318.179, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM2318179.jpg'}, {'end': 2390.619, 'src': 'embed', 'start': 2367.487, 'weight': 0, 'content': [{'end': 2375.331, 'text': "So heading over to app.js, React Router requires that we set up something beforehand, right? And it's very simple how we use React Router.", 'start': 2367.487, 'duration': 7.844}, {'end': 2381.614, 'text': 'All we do is we essentially wrap our app in something called a router, right? So we need to import the required dependencies.', 'start': 2375.591, 'duration': 6.023}, {'end': 2384.616, 'text': "So at the top of the file, I'm going to go ahead and pull this in.", 'start': 2381.654, 'duration': 2.962}, {'end': 2387.878, 'text': 'So we have a bunch of dependencies that we put in at this point.', 'start': 2385.156, 'duration': 2.722}, {'end': 2390.619, 'text': "So we've got the router, the switch and the root right?", 'start': 2387.898, 'duration': 2.721}], 'summary': 'Setting up react router in app.js is straightforward with required dependencies such as router, switch, and root.', 'duration': 23.132, 'max_score': 2367.487, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM2367487.jpg'}, {'end': 2730.604, 'src': 'embed', 'start': 2657.69, 'weight': 3, 'content': [{'end': 2658.551, 'text': 'And this one goes to images.', 'start': 2657.69, 'duration': 0.861}, {'end': 2659.632, 'text': "So you see, that's it, guys.", 'start': 2658.571, 'duration': 1.061}, {'end': 2660.913, 'text': "That's four links.", 'start': 2659.672, 'duration': 1.241}, {'end': 2666.237, 'text': "And the reason why we're not using an A tag here is because if I use an A tag, what's going to happen, Ghazi??", 'start': 2660.953, 'duration': 5.284}, {'end': 2672.99, 'text': "it's gonna actually go to that page and refresh, and we don't want that.", 'start': 2668.089, 'duration': 4.901}, {'end': 2678.472, 'text': 'We wanna use the link tag so it has no refresh and it does it instantly.', 'start': 2673.531, 'duration': 4.941}, {'end': 2680.933, 'text': 'So the React way is to use link.', 'start': 2678.512, 'duration': 2.421}, {'end': 2683.814, 'text': 'Exactly, exactly.', 'start': 2682.113, 'duration': 1.701}, {'end': 2689.795, 'text': "Oh man, I don't know why I can't actually see the folders.", 'start': 2683.834, 'duration': 5.961}, {'end': 2691.176, 'text': "That's so annoying.", 'start': 2690.496, 'duration': 0.68}, {'end': 2694.637, 'text': "You can't see the folders and my TV just died again, so give me one second.", 'start': 2691.636, 'duration': 3.001}, {'end': 2697.943, 'text': "Yeah I'm going to rejoin the session, guys.", 'start': 2695.822, 'duration': 2.121}, {'end': 2699.004, 'text': 'So give me two seconds.', 'start': 2697.963, 'duration': 1.041}, {'end': 2701.205, 'text': "I'll rejoin that session that Kazi was doing.", 'start': 2699.084, 'duration': 2.121}, {'end': 2704.286, 'text': 'So bada boom, bada bing.', 'start': 2701.785, 'duration': 2.501}, {'end': 2711.17, 'text': 'Oh, guys, I think we deserve to smash the like button for this today because this is a lot of tech issues.', 'start': 2705.227, 'duration': 5.943}, {'end': 2712.991, 'text': 'A lot of tech issues.', 'start': 2711.59, 'duration': 1.401}, {'end': 2716.433, 'text': 'Like just everything that has never happened before.', 'start': 2713.031, 'duration': 3.402}, {'end': 2718.814, 'text': "Yeah Like now I'm back in.", 'start': 2717.333, 'duration': 1.481}, {'end': 2719.575, 'text': "I'm back in.", 'start': 2718.834, 'duration': 0.741}, {'end': 2722.358, 'text': 'Nice Holy crap.', 'start': 2719.595, 'duration': 2.763}, {'end': 2726.261, 'text': "Guys, when you're live, this is trickier than it looks to debug this stuff.", 'start': 2722.378, 'duration': 3.883}, {'end': 2727.662, 'text': 'So nice.', 'start': 2726.301, 'duration': 1.361}, {'end': 2730.604, 'text': 'Awesome So we have that up and running.', 'start': 2729.223, 'duration': 1.381}], 'summary': 'The session faced technical issues but resolved to use link tag for instant navigation.', 'duration': 72.914, 'max_score': 2657.69, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM2657690.jpg'}], 'start': 2115.433, 'title': 'Setting up tindev and debugging tech issues', 'summary': 'Focuses on creating tindev using material ui and react router, highlighting the benefits of react router for instant page rendering and quicker navigation. it also discusses the challenges and impact of encountering numerous tech issues while debugging css, revealing the difficulties in syncing with a peer and the impact on workflow.', 'chapters': [{'end': 2683.814, 'start': 2115.433, 'title': 'Creating tindev with material ui & react router', 'summary': 'Focuses on setting up the tindev website using material ui for icons and react router for navigation, including installing dependencies and implementing links, with emphasis on the benefits of using react router for instant page rendering and the use of reactor links instead of a tags for quicker navigation.', 'duration': 568.381, 'highlights': ['The chapter focuses on setting up the TinDev website using Material UI for icons and React Router for navigation.', 'Installing dependencies such as Material UI and React Router is essential for setting up the website.', 'The use of React Router allows for instant page rendering based on the route, providing a seamless user experience.', 'The implementation of links using Reactor links instead of A tags ensures quicker navigation without page refresh.']}, {'end': 2931.137, 'start': 2683.834, 'title': 'Debugging css and tech issues', 'summary': 'Highlights a frustrating experience of encountering numerous tech issues while attempting to debug css, leading to multiple rejoin attempts and difficulties in following and syncing with a peer, revealing the challenges of debugging live and the impact of such issues on the workflow.', 'duration': 247.303, 'highlights': ['Encountering numerous technical issues while debugging CSS The speaker expresses frustration and annoyance at not being able to see the folders, experiencing his TV dying, and facing multiple tech issues, such as difficulty in following and syncing with a peer and encountering issues with code not being pushed properly.', 'Multiple rejoin attempts to fix issues The speaker mentions rejoining the session multiple times, indicating the severity and persistence of the tech issues and the impact on the workflow.', "Difficulties in following and syncing with a peer during live debugging The speaker struggles to follow and sync with a peer, encountering issues in properly following and syncing with the peer's location in the code, reflecting the challenges of live debugging and collaboration."]}], 'duration': 815.704, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM2115433.jpg', 'highlights': ['The use of React Router allows for instant page rendering based on the route, providing a seamless user experience.', 'Installing dependencies such as Material UI and React Router is essential for setting up the website.', 'The chapter focuses on setting up the TinDev website using Material UI for icons and React Router for navigation.', 'The implementation of links using Reactor links instead of A tags ensures quicker navigation without page refresh.', 'The speaker mentions rejoining the session multiple times, indicating the severity and persistence of the tech issues and the impact on the workflow.', 'Encountering numerous technical issues while debugging CSS The speaker expresses frustration and annoyance at not being able to see the folders, experiencing his TV dying, and facing multiple tech issues, such as difficulty in following and syncing with a peer and encountering issues with code not being pushed properly.', "Difficulties in following and syncing with a peer during live debugging The speaker struggles to follow and sync with a peer, encountering issues in properly following and syncing with the peer's location in the code, reflecting the challenges of live debugging and collaboration."]}, {'end': 3690.129, 'segs': [{'end': 2969.83, 'src': 'embed', 'start': 2931.157, 'weight': 0, 'content': [{'end': 2942.102, 'text': "Can you see now? Can you see me now if it's hip and hello? Cedric is like, if you have any doubt, just reboot.", 'start': 2931.157, 'duration': 10.945}, {'end': 2943.183, 'text': 'He did that already.', 'start': 2942.182, 'duration': 1.001}, {'end': 2946.585, 'text': 'Let me actually try following you again.', 'start': 2943.983, 'duration': 2.602}, {'end': 2949.546, 'text': 'Try now moving around to different things.', 'start': 2946.765, 'duration': 2.781}, {'end': 2952.047, 'text': 'Okay, so ABC worked.', 'start': 2949.566, 'duration': 2.481}, {'end': 2952.828, 'text': "That's good.", 'start': 2952.348, 'duration': 0.48}, {'end': 2954.389, 'text': "Now we're going to home.css.", 'start': 2952.848, 'duration': 1.541}, {'end': 2969.83, 'text': "No! What if I go into index.css? What is happening? Okay, so index.css worked, but home.css didn't work.", 'start': 2957.344, 'duration': 12.486}], 'summary': "Technical support troubleshoots css, abc worked, index.css worked, home.css didn't work.", 'duration': 38.673, 'max_score': 2931.157, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM2931157.jpg'}, {'end': 3118.177, 'src': 'embed', 'start': 3088.686, 'weight': 1, 'content': [{'end': 3091.586, 'text': 'i wanted to do display flex, this justify content.', 'start': 3088.686, 'duration': 2.9}, {'end': 3095.567, 'text': "if i go ahead and remove that, you'll see it pulls all the header left and header right together.", 'start': 3091.586, 'duration': 3.981}, {'end': 3098.048, 'text': 'so we need that to space between it.', 'start': 3095.567, 'duration': 2.481}, {'end': 3105.75, 'text': "padding means that 20, 20 pixels top and bottom, 30 pixels left and right, right and then align i am centrally so that they're all, uh,", 'start': 3098.048, 'duration': 7.702}, {'end': 3106.45, 'text': 'vertically aligned.', 'start': 3105.75, 'duration': 0.7}, {'end': 3111.792, 'text': "So now that we're back up to speed, what I want to do is all of those links right?", 'start': 3107.228, 'duration': 4.564}, {'end': 3114.654, 'text': 'By default they look like links, which looks ugly right?', 'start': 3111.892, 'duration': 2.762}, {'end': 3115.314, 'text': "We don't want that.", 'start': 3114.674, 'duration': 0.64}, {'end': 3118.177, 'text': "So I'm going to add the following inside of here.", 'start': 3116.155, 'duration': 2.022}], 'summary': 'Using display flex to justify content, adding padding for alignment, and formatting links.', 'duration': 29.491, 'max_score': 3088.686, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM3088686.jpg'}, {'end': 3159.654, 'src': 'embed', 'start': 3129.531, 'weight': 3, 'content': [{'end': 3133.956, 'text': "These actually convert to A tags, but they're just like clever A tags, right?", 'start': 3129.531, 'duration': 4.425}, {'end': 3135.878, 'text': "So what I'm going to do is to style it.", 'start': 3133.976, 'duration': 1.902}, {'end': 3140.943, 'text': "I'm going to say go ahead, go into home header, target the A tag, give it a margin right, 20 pixels.", 'start': 3135.878, 'duration': 5.065}, {'end': 3148.791, 'text': 'This makes it actually go ahead and it fixes the way that it gets rid of that underline by default.', 'start': 3141.303, 'duration': 7.488}, {'end': 3151.809, 'text': 'and then this is the color that they use on google.', 'start': 3149.528, 'duration': 2.281}, {'end': 3153.33, 'text': "so it's a really strange car.", 'start': 3151.809, 'duration': 1.521}, {'end': 3155.091, 'text': "i tried to color, picker it and i couldn't.", 'start': 3153.33, 'duration': 1.761}, {'end': 3159.654, 'text': 'so i just literally grabbed the the source code color that they had, and then the font size of 15 pixels.', 'start': 3155.091, 'duration': 4.563}], 'summary': 'Styling a tags in home header with 20px margin and 15px font size.', 'duration': 30.123, 'max_score': 3129.531, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM3129531.jpg'}, {'end': 3294.964, 'src': 'embed', 'start': 3250.901, 'weight': 4, 'content': [{'end': 3257.123, 'text': "So I'm going to have a grid sort of icon, and the grid icon that we're using in Material UI is called apps icon.", 'start': 3250.901, 'duration': 6.222}, {'end': 3260.764, 'text': 'So what I need to do is this one here, apps icon.', 'start': 3257.563, 'duration': 3.201}, {'end': 3265.825, 'text': 'And what we can do is we can go ahead and import that from Material UI with the following line.', 'start': 3261.504, 'duration': 4.321}, {'end': 3268.466, 'text': 'So apps icon from Material UI icons apps.', 'start': 3265.985, 'duration': 2.481}, {'end': 3272.496, 'text': 'So if I save that now, you should see an icon pop in.', 'start': 3268.946, 'duration': 3.55}, {'end': 3275.438, 'text': "So that's how simple it is to get an icon in your app, guys.", 'start': 3272.836, 'duration': 2.602}, {'end': 3277.88, 'text': "So it's very, very clean, very slick.", 'start': 3275.458, 'duration': 2.422}, {'end': 3283.145, 'text': "And then for the avatar, basically, I'm actually going to use a blank avatar for now.", 'start': 3278.541, 'duration': 4.604}, {'end': 3284.866, 'text': "So we're going to go ahead and pop this in.", 'start': 3283.385, 'duration': 1.481}, {'end': 3288.981, 'text': 'And I need to go ahead and import that from Material UI.', 'start': 3286.48, 'duration': 2.501}, {'end': 3294.964, 'text': "And when we say avatar, we're talking about when you're logged in, you know, that little sort of circle icon.", 'start': 3289.021, 'duration': 5.943}], 'summary': "Import and display 'apps' icon from material ui, and use a blank avatar for user profile.", 'duration': 44.063, 'max_score': 3250.901, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM3250901.jpg'}, {'end': 3418.975, 'src': 'embed', 'start': 3394.442, 'weight': 7, 'content': [{'end': 3401.226, 'text': "Now, what I'm going to do is I'm going to make sure that when we target any of the icons, so this is how you target any icon inside.", 'start': 3394.442, 'duration': 6.784}, {'end': 3406.829, 'text': 'This is saying go inside header right, and this is the class that Material UI gives you by default.', 'start': 3401.986, 'duration': 4.843}, {'end': 3412.352, 'text': 'We can go ahead and do margin right of 20 pixels.', 'start': 3407.89, 'duration': 4.462}, {'end': 3412.852, 'text': 'Hold up.', 'start': 3412.492, 'duration': 0.36}, {'end': 3413.953, 'text': "I don't think it's following you.", 'start': 3412.932, 'duration': 1.021}, {'end': 3418.975, 'text': 'Were you doing a lot of styling? I think you were looking at it.', 'start': 3414.073, 'duration': 4.902}], 'summary': 'Demonstrating targeting icons for styling with material ui.', 'duration': 24.533, 'max_score': 3394.442, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM3394442.jpg'}, {'end': 3467.828, 'src': 'embed', 'start': 3435.225, 'weight': 2, 'content': [{'end': 3437.206, 'text': 'I caught it pretty much right away.', 'start': 3435.225, 'duration': 1.981}, {'end': 3440.769, 'text': 'But Oh, damn it.', 'start': 3438.067, 'duration': 2.702}, {'end': 3441.449, 'text': 'Okay, cool.', 'start': 3440.789, 'duration': 0.66}, {'end': 3444.491, 'text': "I don't know how much CSS you did, but here it is, guys.", 'start': 3441.769, 'duration': 2.722}, {'end': 3445.932, 'text': 'This is.', 'start': 3445.752, 'duration': 0.18}, {'end': 3447.78, 'text': "Yeah, this is what we're doing here, guys.", 'start': 3446.499, 'duration': 1.281}, {'end': 3449.4, 'text': "So I've added header right.", 'start': 3447.8, 'duration': 1.6}, {'end': 3452.482, 'text': 'so display flex, align item centrally, minimum width of 13,.', 'start': 3449.4, 'duration': 3.082}, {'end': 3461.265, 'text': 'view width, justify content, space between and then to give that icon so that grid icon some space between that and the circle avatar.', 'start': 3452.482, 'duration': 8.783}, {'end': 3467.828, 'text': 'I target the icon because this is the class name that Material UI gives every icon and I add a margin right to it.', 'start': 3461.265, 'duration': 6.563}], 'summary': 'Discussed css styling with specific properties and values.', 'duration': 32.603, 'max_score': 3435.225, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM3435225.jpg'}, {'end': 3659.163, 'src': 'embed', 'start': 3634.713, 'weight': 5, 'content': [{'end': 3640.895, 'text': "Now margin top of 10% gives it a little bit of spacing from the top, which is why if I remove it, you'll see Google goes up.", 'start': 3634.713, 'duration': 6.182}, {'end': 3642.456, 'text': "How'd you?", 'start': 3641.836, 'duration': 0.62}, {'end': 3643.056, 'text': "how'd you send it?", 'start': 3642.456, 'duration': 0.6}, {'end': 3643.897, 'text': "How'd you center it?", 'start': 3643.176, 'duration': 0.721}, {'end': 3648.178, 'text': 'So it was centered from.', 'start': 3645.597, 'duration': 2.581}, {'end': 3649.419, 'text': 'that was actually from.', 'start': 3648.178, 'duration': 1.241}, {'end': 3652.92, 'text': 'we did that with.', 'start': 3649.419, 'duration': 3.501}, {'end': 3653.6, 'text': 'where did we do that?', 'start': 3652.92, 'duration': 0.68}, {'end': 3657.562, 'text': 'Um, we sent that that with.', 'start': 3653.981, 'duration': 3.581}, {'end': 3659.163, 'text': 'let me go ahead and double check.', 'start': 3657.562, 'duration': 1.601}], 'summary': 'Discussed margin top of 10% and centering the content.', 'duration': 24.45, 'max_score': 3634.713, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM3634713.jpg'}], 'start': 2931.157, 'title': 'Front-end coding', 'summary': 'Covers debugging and refactoring css, focusing on home.css and index.css, styling the header, and implementing icons using material ui. it also includes implementing flexbox for a responsive top header and adding a google logo with responsive styling, emphasizing aligning items, justifying content, and targeting specific elements for styling.', 'chapters': [{'end': 3352.235, 'start': 2931.157, 'title': 'Debugging and refactoring css', 'summary': 'Describes the process of debugging and refactoring css, including fixing import issues and improving the design of the web page, with a focus on home.css and index.css. it also covers styling the header and implementing icons using material ui.', 'duration': 421.078, 'highlights': ['The process of debugging and refactoring CSS, including fixing import issues and improving the design of the web page, with a focus on home.css and index.css.', 'Styling the header with display flex, justify content, padding, and alignment to enhance the visual layout of the web page.', 'Implementing links and styling them with margin, color, and font size to improve the appearance and functionality of the header.', 'Using Material UI icons, specifically the apps icon, to easily integrate icons into the web page for a clean and slick design.', "Utilizing Material UI's avatar component to simplify the implementation of user profile icons, demonstrating the ease of use and clean design of Material UI components."]}, {'end': 3690.129, 'start': 3352.235, 'title': 'Front-end coding: flexbox and responsive design', 'summary': 'Covers the implementation of flexbox to create a responsive top header and the addition of a google logo with responsive styling, with a focus on aligning items, justifying content, and targeting specific elements for styling.', 'duration': 337.894, 'highlights': ['The top portion of the header is made fully responsive by implementing display flex, aligning items centrally, setting a minimum width of 13 view width, and justifying content space between.', "The Google logo is added with a height of a hundred pixels and styled using the 'object fit contain' to maintain aspect ratio, while the body takes up the remaining space with a margin top of 10% for spacing.", 'The specific targeting of icons inside the header is demonstrated by applying a margin right of 20 pixels to ensure proper spacing between elements.']}], 'duration': 758.972, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM2931157.jpg', 'highlights': ['The process of debugging and refactoring CSS, including fixing import issues and improving the design of the web page, with a focus on home.css and index.css.', 'Styling the header with display flex, justify content, padding, and alignment to enhance the visual layout of the web page.', 'The top portion of the header is made fully responsive by implementing display flex, aligning items centrally, setting a minimum width of 13 view width, and justifying content space between.', 'Implementing links and styling them with margin, color, and font size to improve the appearance and functionality of the header.', 'Using Material UI icons, specifically the apps icon, to easily integrate icons into the web page for a clean and slick design.', "The Google logo is added with a height of a hundred pixels and styled using the 'object fit contain' to maintain aspect ratio, while the body takes up the remaining space with a margin top of 10% for spacing.", "Utilizing Material UI's avatar component to simplify the implementation of user profile icons, demonstrating the ease of use and clean design of Material UI components.", 'The specific targeting of icons inside the header is demonstrated by applying a margin right of 20 pixels to ensure proper spacing between elements.']}, {'end': 4680.691, 'segs': [{'end': 3741.754, 'src': 'embed', 'start': 3716.914, 'weight': 1, 'content': [{'end': 3723.579, 'text': "So flex, if I added flex direction column by default, it's going to take up the entire row in that column.", 'start': 3716.914, 'duration': 6.665}, {'end': 3726.822, 'text': 'Right Oh, that is weird, dude.', 'start': 3724.8, 'duration': 2.022}, {'end': 3728.463, 'text': 'I would never think about that.', 'start': 3726.862, 'duration': 1.601}, {'end': 3733.467, 'text': 'That like flex column, like flex direction column would be used as centered.', 'start': 3729.024, 'duration': 4.443}, {'end': 3740.233, 'text': 'Yeah So like now if I add like a H2 or H1 tag or something, oh, why is my Emmett not working? I say test.', 'start': 3734.648, 'duration': 5.585}, {'end': 3741.754, 'text': "You'll see now.", 'start': 3741.133, 'duration': 0.621}], 'summary': 'Using flex direction column by default will take up the entire row in that column, resulting in centered content.', 'duration': 24.84, 'max_score': 3716.914, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM3716914.jpg'}, {'end': 3814.632, 'src': 'embed', 'start': 3765.8, 'weight': 2, 'content': [{'end': 3766.601, 'text': "I see what you're saying.", 'start': 3765.8, 'duration': 0.801}, {'end': 3768.721, 'text': "Okay It's still using the width with the text.", 'start': 3766.701, 'duration': 2.02}, {'end': 3771.442, 'text': "It's taking up the whole width, but it's left aligned by default.", 'start': 3768.761, 'duration': 2.681}, {'end': 3777.924, 'text': 'So even if the text is like, boom, this big, the text has just taken up all the space to the left.', 'start': 3771.462, 'duration': 6.462}, {'end': 3782.905, 'text': "But with an image, you're saying it will actually put the image in the middle.", 'start': 3778.084, 'duration': 4.821}, {'end': 3788.719, 'text': 'exactly. yeah, but you see, if i do a center tag, it actually uses that.', 'start': 3784.218, 'duration': 4.501}, {'end': 3792.28, 'text': "i. then i sent a tag and i've done a h1, h1, and i sent it all.", 'start': 3788.719, 'duration': 3.561}, {'end': 3797.121, 'text': "that's how i center stuff, dude, that's how, that's how i know this stuff all right.", 'start': 3792.28, 'duration': 4.841}, {'end': 3804.943, 'text': 'yeah, i was gonna say because, yes, this, uh, double check, if you go into um vs code settings quickly,', 'start': 3797.121, 'duration': 7.822}, {'end': 3809.089, 'text': 'just double check that the pretty is on All right.', 'start': 3804.943, 'duration': 4.146}, {'end': 3810.77, 'text': "Yeah, that'll make developing a lot quicker.", 'start': 3809.33, 'duration': 1.44}, {'end': 3814.632, 'text': "So let's go ahead and do format on save.", 'start': 3810.87, 'duration': 3.762}], 'summary': 'Discussion about aligning text and images, using center tag for alignment, and optimizing development with vs code settings.', 'duration': 48.832, 'max_score': 3765.8, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM3765800.jpg'}, {'end': 3920.523, 'src': 'embed', 'start': 3889.134, 'weight': 0, 'content': [{'end': 3891.776, 'text': 'It will have everything we need in that one search component.', 'start': 3889.134, 'duration': 2.642}, {'end': 3897.38, 'text': 'And the reason why I want it to be a component is that we can reuse that component then on the results page.', 'start': 3891.796, 'duration': 5.584}, {'end': 3901.063, 'text': 'So that will help us have some reusability there.', 'start': 3898.701, 'duration': 2.362}, {'end': 3907.608, 'text': "So with that said, what I'm going to do is go over to create a search component.", 'start': 3901.563, 'duration': 6.045}, {'end': 3910.53, 'text': "So I'm going to create a file called search.js.", 'start': 3908.088, 'duration': 2.442}, {'end': 3911.991, 'text': 'So search.js.', 'start': 3910.69, 'duration': 1.301}, {'end': 3913.893, 'text': 'And we should pop in now.', 'start': 3912.051, 'duration': 1.842}, {'end': 3920.523, 'text': "I'm going to do rfce and my snippets aren't working.", 'start': 3916.08, 'duration': 4.443}], 'summary': 'Creating a reusable search component for improved reusability.', 'duration': 31.389, 'max_score': 3889.134, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM3889134.jpg'}, {'end': 3969.57, 'src': 'embed', 'start': 3944.964, 'weight': 4, 'content': [{'end': 3952.766, 'text': "And then what we're going to do now is we are going to go ahead and actually lay this one out.", 'start': 3944.964, 'duration': 7.802}, {'end': 3957.587, 'text': 'So the search field, right? So the first thing we have in the search field is the input field.', 'start': 3952.826, 'duration': 4.761}, {'end': 3961.588, 'text': "So I'm going to go ahead and create a container for that.", 'start': 3958.087, 'duration': 3.501}, {'end': 3965.109, 'text': "So I'm going to say class name equals search.", 'start': 3961.608, 'duration': 3.501}, {'end': 3969.57, 'text': "And this one's going to be called input, right? And inside of here, I'm going to have three things.", 'start': 3965.689, 'duration': 3.881}], 'summary': 'Creating a container for the search field with an input field and three elements inside.', 'duration': 24.606, 'max_score': 3944.964, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM3944964.jpg'}, {'end': 4494.962, 'src': 'embed', 'start': 4464.079, 'weight': 5, 'content': [{'end': 4466.42, 'text': "filled. actually we'll do that afterwards, we'll do afterwards.", 'start': 4464.079, 'duration': 2.341}, {'end': 4469.542, 'text': "so we've got these two buttons here, google search, and i'm feeling lucky.", 'start': 4466.42, 'duration': 3.122}, {'end': 4473.163, 'text': "let's go ahead and style these so they look like we want them to look right.", 'start': 4469.542, 'duration': 3.621}, {'end': 4476.625, 'text': "so let's go ahead and firstly it's going to style the search buttons container.", 'start': 4473.163, 'duration': 3.462}, {'end': 4482.528, 'text': "so i'm going to hop over to the css and say go ahead and pop in a margin top of 30 pixels.", 'start': 4476.625, 'duration': 5.903}, {'end': 4485.329, 'text': 'display, flex, justify content.', 'start': 4482.528, 'duration': 2.801}, {'end': 4486.57, 'text': 'so justify content.', 'start': 4485.329, 'duration': 1.241}, {'end': 4488.09, 'text': 'center was important here.', 'start': 4486.57, 'duration': 1.52}, {'end': 4490.491, 'text': "if i don't have that, it's left aligned.", 'start': 4488.09, 'duration': 2.401}, {'end': 4491.012, 'text': "so it's flex.", 'start': 4490.491, 'duration': 0.521}, {'end': 4494.962, 'text': 'start by default and we want to center it right.', 'start': 4491.012, 'duration': 3.95}], 'summary': 'Styling search buttons container with margin top of 30 pixels and centering using flex display.', 'duration': 30.883, 'max_score': 4464.079, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM4464079.jpg'}], 'start': 3691.636, 'title': 'Web development techniques', 'summary': 'Covers using flexbox for centering elements, creating a reusable search component, and styling a google search bar with specific css properties. it emphasizes the reusability of the search component and the use of material ui library for button styling.', 'chapters': [{'end': 3869.465, 'start': 3691.636, 'title': 'Using flexbox to center elements', 'summary': 'Discusses using flex direction column to center elements and making use of text align center and image tags to achieve center alignment in web development.', 'duration': 177.829, 'highlights': ['Using flex direction column by default takes up the entire row in that column, allowing for centered alignment. The default behavior of flex direction column in taking up the entire row in the column for centered alignment.', 'Applying text align center to an image tag centers the image within the container. The technique of using text align center to center an image within the container.', 'Enabling format on save in VS Code settings can expedite the development process. The advantage of enabling format on save in VS Code settings to speed up the development process.']}, {'end': 4060.116, 'start': 3869.465, 'title': 'Creating reusable search component', 'summary': 'Details the process of creating a reusable search component, emphasizing the reusability of the component and the layout and styling of the search field with icons and input.', 'duration': 190.651, 'highlights': ['The chapter emphasizes the reusability of the search component on the results page.', 'The process involves creating a search component file called search.js and a corresponding CSS file.', 'The layout and styling of the search field involve adding an input container, a placeholder for search, a search icon, an input field, and a mic icon.']}, {'end': 4680.691, 'start': 4060.136, 'title': 'Google search bar styling', 'summary': 'Covers the detailed process of styling a google search bar with specific css properties including border, height, padding, width, margin, and max-width, as well as the use of material ui library for button styling, including variant outline, and the addition of hover functionality with box shadow and background color.', 'duration': 620.555, 'highlights': ['The chapter covers the detailed process of styling a Google search bar with specific CSS properties including border, height, padding, width, margin, and max-width, as well as the use of Material UI library for button styling, including variant outline, and the addition of hover functionality with box shadow and background color.', 'The chapter highlights the use of CSS properties for styling the search bar, such as setting the border, height, padding, width, margin, and max-width, to achieve a specific look and feel, as well as the utilization of Material UI library for button styling, including the variant outline, and the addition of hover functionality with box shadow and background color.', 'The chapter emphasizes the significance of using specific CSS properties to style the search bar, including setting the border, height, padding, width, margin, and max-width, and leveraging the Material UI library for button styling, including variant outline, and implementing hover functionality with box shadow and background color.']}], 'duration': 989.055, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM3691636.jpg', 'highlights': ['The chapter emphasizes the reusability of the search component on the results page.', 'The default behavior of flex direction column in taking up the entire row in the column for centered alignment.', 'The advantage of enabling format on save in VS Code settings to speed up the development process.', 'The technique of using text align center to center an image within the container.', 'The layout and styling of the search field involve adding an input container, a placeholder for search, a search icon, an input field, and a mic icon.', 'The chapter covers the detailed process of styling a Google search bar with specific CSS properties including border, height, padding, width, margin, and max-width, as well as the use of Material UI library for button styling, including variant outline, and the addition of hover functionality with box shadow and background color.']}, {'end': 5479.653, 'segs': [{'end': 4735.606, 'src': 'embed', 'start': 4704.908, 'weight': 4, 'content': [{'end': 4709.052, 'text': 'um, when we sort of hover over it, you get that very, very nice look and feel.', 'start': 4704.908, 'duration': 4.144}, {'end': 4712.635, 'text': 'now there is a little other line that they added on the google button.', 'start': 4709.052, 'duration': 3.583}, {'end': 4722.983, 'text': "so this actually came directly from google button and it says add a linear gradient from the top to the bottom and it's basically a gray to like a white color and it's very subtle.", 'start': 4712.635, 'duration': 10.348}, {'end': 4727.827, 'text': "like it's so subtle to see that uncommented, i mean commented.", 'start': 4722.983, 'duration': 4.844}, {'end': 4735.606, 'text': "So you can see, here it's just like a gray, but here, if you do this, it's actually.", 'start': 4730.363, 'duration': 5.243}], 'summary': 'Discussion about adding a subtle linear gradient to the google button for a nicer look and feel.', 'duration': 30.698, 'max_score': 4704.908, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM4704908.jpg'}, {'end': 4817.935, 'src': 'embed', 'start': 4795.4, 'weight': 3, 'content': [{'end': 4805.987, 'text': "So now, whenever Kazi types inside the search bar, so inside that middle bar, we don't capture or save the input text right?", 'start': 4795.4, 'duration': 10.587}, {'end': 4807.268, 'text': 'We need to keep track of it.', 'start': 4806.007, 'duration': 1.261}, {'end': 4812.151, 'text': "So in order to keep track of the input text, we're going to basically use something called state.", 'start': 4807.808, 'duration': 4.343}, {'end': 4815.953, 'text': 'And state essentially is how you write a variable inside of React.', 'start': 4812.331, 'duration': 3.622}, {'end': 4817.935, 'text': 'So here I can say const.', 'start': 4816.414, 'duration': 1.521}], 'summary': "Kazi's input text in the search bar needs to be tracked using state in react.", 'duration': 22.535, 'max_score': 4795.4, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM4795400.jpg'}, {'end': 5113.532, 'src': 'embed', 'start': 5084.29, 'weight': 1, 'content': [{'end': 5086.192, 'text': "we're about to break a hundred soon.", 'start': 5084.29, 'duration': 1.902}, {'end': 5087.013, 'text': 'this is huge.', 'start': 5086.192, 'duration': 0.821}, {'end': 5087.954, 'text': 'this is gonna be our like.', 'start': 5087.013, 'duration': 0.941}, {'end': 5089.876, 'text': 'what eighth live stream if we did that?', 'start': 5087.954, 'duration': 1.922}, {'end': 5092.098, 'text': "yeah, that's crazy.", 'start': 5089.876, 'duration': 2.222}, {'end': 5094.841, 'text': "so guys, i'm gonna get back into the explanation.", 'start': 5092.098, 'duration': 2.743}, {'end': 5097.945, 'text': "i know i keep getting distracted by donations, but i can't help it.", 'start': 5094.841, 'duration': 3.104}, {'end': 5104.15, 'text': "i always will appreciate it until i'm in the ground, So let's go here.", 'start': 5097.945, 'duration': 6.205}, {'end': 5108.911, 'text': 'So for example, so this is the input, whatever I type gets stored in here.', 'start': 5104.39, 'duration': 4.521}, {'end': 5113.532, 'text': "And then it's also being stored in here giving given it as a value.", 'start': 5109.471, 'duration': 4.061}], 'summary': 'Excited to almost reach 100th live stream, keeps getting distracted by donations.', 'duration': 29.242, 'max_score': 5084.29, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM5084290.jpg'}, {'end': 5178.794, 'src': 'embed', 'start': 5147.581, 'weight': 5, 'content': [{'end': 5151.341, 'text': "What I'm trying to do now is I'm gonna show you guys a really neat trick, right?", 'start': 5147.581, 'duration': 3.76}, {'end': 5162.145, 'text': "Now this trick is basically how to make it so that when you hit the Enter key when you're typing in the input code, when you hit the Enter key,", 'start': 5151.842, 'duration': 10.303}, {'end': 5164.166, 'text': 'they will actually trigger this Google search button.', 'start': 5162.145, 'duration': 2.021}, {'end': 5169.368, 'text': "So how do we do that with very minimal lines of code? I'll show you and it's very impressive when we actually do this.", 'start': 5164.626, 'duration': 4.742}, {'end': 5178.794, 'text': "So to prove that this isn't working, I'm going to do a console log and I'm going to say, you hit search button.", 'start': 5169.789, 'duration': 9.005}], 'summary': 'Demonstrating a trick to trigger google search with minimal code, impressively.', 'duration': 31.213, 'max_score': 5147.581, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM5147581.jpg'}, {'end': 5441.398, 'src': 'embed', 'start': 5410.14, 'weight': 2, 'content': [{'end': 5412.481, 'text': 'ananya says definitely joining pwj.', 'start': 5410.14, 'duration': 2.341}, {'end': 5416.444, 'text': 'uh, good looking, giving back, frank, best of luck.', 'start': 5412.481, 'duration': 3.963}, {'end': 5419.866, 'text': "that's crazy, real motivation, guys, you are making it rain.", 'start': 5416.444, 'duration': 3.422}, {'end': 5421.267, 'text': 'felipe says little.', 'start': 5419.866, 'duration': 1.401}, {'end': 5423.128, 'text': 'yon says oh shit, sonos really.', 'start': 5421.267, 'duration': 1.861}, {'end': 5425.89, 'text': 'uh, you guys are doing a really good job.', 'start': 5423.128, 'duration': 2.762}, {'end': 5437.637, 'text': "awesome, damn bro, i'm just, i'm too hyped, man, i'm too hyped, i know, guys, smash that like button, guys, that's not even a normal job, guys.", 'start': 5426.872, 'duration': 10.765}, {'end': 5441.398, 'text': "yeah, that's like a six-figure job, a six-figure con and with sonos.", 'start': 5437.637, 'duration': 3.761}], 'summary': 'Joining pwj, motivating team, six-figure job with sonos', 'duration': 31.258, 'max_score': 5410.14, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM5410140.jpg'}, {'end': 5486.679, 'src': 'embed', 'start': 5459.449, 'weight': 0, 'content': [{'end': 5463.011, 'text': 'And then next year, I want us to get to 10, 000 people getting jobs.', 'start': 5459.449, 'duration': 3.562}, {'end': 5469.925, 'text': 'Yeah, Cause honestly, the amount of people, especially in like coaching calls or in live streams, that say they landed a job like 100%.', 'start': 5463.76, 'duration': 6.165}, {'end': 5470.766, 'text': 'we should keep track of that.', 'start': 5469.925, 'duration': 0.841}, {'end': 5472.047, 'text': "That'd be awesome.", 'start': 5471.406, 'duration': 0.641}, {'end': 5475.41, 'text': 'Yeah I think that would be amazing if we did that.', 'start': 5472.727, 'duration': 2.683}, {'end': 5476.17, 'text': "I'm pumped.", 'start': 5475.67, 'duration': 0.5}, {'end': 5479.653, 'text': 'Yeah I definitely want to add a lot of those things in here.', 'start': 5476.451, 'duration': 3.202}, {'end': 5482.716, 'text': 'Super, super legit.', 'start': 5480.534, 'duration': 2.182}, {'end': 5484.737, 'text': "And let's get back into the training.", 'start': 5482.876, 'duration': 1.861}, {'end': 5486.679, 'text': 'Nice This is crazy.', 'start': 5485.118, 'duration': 1.561}], 'summary': 'Goal: 10,000 people to land jobs with coaching calls and live streams.', 'duration': 27.23, 'max_score': 5459.449, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM5459449.jpg'}], 'start': 4681.838, 'title': 'Ui design and google search button trigger', 'summary': 'Covers making ui design tweaks like adding linear gradient to buttons, implementing react state management, and triggering the google search button with minimal code. it also celebrates donations received during a live stream and a six-figure consulting project success.', 'chapters': [{'end': 5104.15, 'start': 4681.838, 'title': 'Ui design tweaks and react state management', 'summary': 'Discusses making subtle ui design tweaks, such as adding a linear gradient to buttons for a 3d effect, and implementing react state management for input tracking, while also acknowledging and celebrating donations received during the live stream.', 'duration': 422.312, 'highlights': ['Adding a linear gradient to buttons for a 3D effect The speaker demonstrates how adding a linear gradient to buttons can create a subtle 3D effect, making the button appear more solid and visually appealing.', 'Implementing React state management for input tracking The chapter includes a detailed explanation of using the useState hook in React to manage the state of input text, allowing for real-time tracking and updating as the user types.', 'Acknowledging and celebrating donations received during the live stream The speaker expresses gratitude and excitement for the donations received during the live stream, creating an engaging and supportive atmosphere for the audience.']}, {'end': 5479.653, 'start': 5104.39, 'title': 'Google search button trigger', 'summary': 'Discusses how to trigger the google search button when hitting the enter key in the input field, demonstrating a neat trick with minimal lines of code and celebrating a six-figure consulting project success.', 'duration': 375.263, 'highlights': ['The chapter discusses how to trigger the Google search button when hitting the Enter key in the input field, demonstrating a neat trick with minimal lines of code.', 'Celebration of a six-figure consulting project success and plans to help more people land jobs, aiming for 5,000 and then 10,000 job placements.', 'Engagement and interaction within the community, including expressions of support, congratulations, and plans for future collaboration and celebration.']}], 'duration': 797.815, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM4681838.jpg', 'highlights': ['Celebration of a six-figure consulting project success and plans to help more people land jobs, aiming for 5,000 and then 10,000 job placements.', 'Acknowledging and celebrating donations received during the live stream The speaker expresses gratitude and excitement for the donations received during the live stream, creating an engaging and supportive atmosphere for the audience.', 'Engagement and interaction within the community, including expressions of support, congratulations, and plans for future collaboration and celebration.', 'Implementing React state management for input tracking The chapter includes a detailed explanation of using the useState hook in React to manage the state of input text, allowing for real-time tracking and updating as the user types.', 'Adding a linear gradient to buttons for a 3D effect The speaker demonstrates how adding a linear gradient to buttons can create a subtle 3D effect, making the button appear more solid and visually appealing.', 'The chapter discusses how to trigger the Google search button when hitting the Enter key in the input field, demonstrating a neat trick with minimal lines of code.']}, {'end': 6829.007, 'segs': [{'end': 5586.848, 'src': 'embed', 'start': 5553.661, 'weight': 0, 'content': [{'end': 5557.805, 'text': 'A lot of people end up doing this hacky way of listening to when the enter key is pressed.', 'start': 5553.661, 'duration': 4.144}, {'end': 5558.866, 'text': "Don't do any of that.", 'start': 5558.145, 'duration': 0.721}, {'end': 5562.769, 'text': 'Just do this simple trick, and that will save you so much headache.', 'start': 5558.966, 'duration': 3.803}, {'end': 5568.431, 'text': "What's the trick? Type submit? So you change the div that you're in to a form.", 'start': 5562.789, 'duration': 5.642}, {'end': 5570.613, 'text': 'So all the children are part of the form.', 'start': 5568.512, 'duration': 2.101}, {'end': 5574.437, 'text': 'And then you change the button type of the thing that you want to sort of submit.', 'start': 5571.114, 'duration': 3.323}, {'end': 5578.68, 'text': 'So if we click that button, it will launch the search function, right? Got it.', 'start': 5574.837, 'duration': 3.843}, {'end': 5586.848, 'text': "But if you make the button type submit, it also means when you're in any input field inside of that form and you hit the enter key,", 'start': 5578.7, 'duration': 8.148}], 'summary': 'Convert div to form, change button type to submit for easy enter key handling.', 'duration': 33.187, 'max_score': 5553.661, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM5553661.jpg'}, {'end': 5916.34, 'src': 'heatmap', 'start': 5655.716, 'weight': 3, 'content': [{'end': 5658.958, 'text': "So we're saying push this page into your history.", 'start': 5655.716, 'duration': 3.242}, {'end': 5662.9, 'text': "So it's essentially redirecting you, right? So push this page.", 'start': 5658.998, 'duration': 3.902}, {'end': 5665.562, 'text': "And then we're pushing you to the search page.", 'start': 5662.94, 'duration': 2.622}, {'end': 5667.704, 'text': "So we're pushing into the search page.", 'start': 5666.563, 'duration': 1.141}, {'end': 5675.268, 'text': 'Now, remember, at app.js, we said if you go to the search page, it renders this out, which means that now, Kazi, if you refresh.', 'start': 5668.044, 'duration': 7.224}, {'end': 5677.169, 'text': 'All right.', 'start': 5676.809, 'duration': 0.36}, {'end': 5679.571, 'text': "Let's go ahead and refresh here.", 'start': 5677.269, 'duration': 2.302}, {'end': 5686.135, 'text': 'Yeah Refresh, and you type in something into that search bar.', 'start': 5681.032, 'duration': 5.103}, {'end': 5688.156, 'text': "Why isn't it showing up? OK, there we go.", 'start': 5686.455, 'duration': 1.701}, {'end': 5689.056, 'text': 'Yep Yeah.', 'start': 5688.356, 'duration': 0.7}, {'end': 5691.558, 'text': 'So type something in, and then you hit the Enter key.', 'start': 5689.617, 'duration': 1.941}, {'end': 5697.986, 'text': 'Ooh, nice.', 'start': 5697.086, 'duration': 0.9}, {'end': 5703.688, 'text': "Okay So now it's actually routing me to the search page and this is where you're going to build the actual search page.", 'start': 5698.086, 'duration': 5.602}, {'end': 5706.349, 'text': "That's going to have all the results I imagine.", 'start': 5703.708, 'duration': 2.641}, {'end': 5712.911, 'text': 'Exactly Result one, result two, result three, the little like bar at the top.', 'start': 5707.409, 'duration': 5.502}, {'end': 5715.672, 'text': 'Yeah, exactly.', 'start': 5714.451, 'duration': 1.221}, {'end': 5717.752, 'text': "But let's go back now.", 'start': 5716.212, 'duration': 1.54}, {'end': 5719.453, 'text': "So let's go back to forward slash.", 'start': 5717.812, 'duration': 1.641}, {'end': 5722.88, 'text': "So I'm going to make this component reusable now.", 'start': 5720.618, 'duration': 2.262}, {'end': 5728.583, 'text': "So I'm going to slightly modify this component so that we can use it in other places.", 'start': 5723.16, 'duration': 5.423}, {'end': 5735.668, 'text': "So in the next page, on the results page, we want that search bar, but we don't want the buttons.", 'start': 5729.324, 'duration': 6.344}, {'end': 5737.71, 'text': "We don't want the Google search and I'm feeling lucky buttons.", 'start': 5735.688, 'duration': 2.022}, {'end': 5745.175, 'text': 'So what I can do is inside of search, I can basically go ahead and this is where we pass in something called props.', 'start': 5737.79, 'duration': 7.385}, {'end': 5749.298, 'text': 'So I can actually pass a prop in called hide buttons.', 'start': 5746.496, 'duration': 2.802}, {'end': 5754.759, 'text': 'High buttons, and by default, that value is false.', 'start': 5750.538, 'duration': 4.221}, {'end': 5759.881, 'text': "So if we don't pass anything in, I'm going to say, just assume it's false.", 'start': 5754.779, 'duration': 5.102}, {'end': 5764.722, 'text': 'Then what I can say is, I can say, this is where the buttons are getting rendered.', 'start': 5759.921, 'duration': 4.801}, {'end': 5771.484, 'text': "So I can say, if we don't pass the option to hide the buttons, then I will render out this.", 'start': 5765.402, 'duration': 6.082}, {'end': 5773.064, 'text': 'This is called a ternary.', 'start': 5771.524, 'duration': 1.54}, {'end': 5775.365, 'text': "It's called ternary operator.", 'start': 5773.384, 'duration': 1.981}, {'end': 5776.625, 'text': 'Then I can go ahead and do this.', 'start': 5775.405, 'duration': 1.22}, {'end': 5779.086, 'text': 'So then I can show the buttons.', 'start': 5777.965, 'duration': 1.121}, {'end': 5783.528, 'text': 'Otherwise, I can go ahead and show the same thing.', 'start': 5779.666, 'duration': 3.862}, {'end': 5787.49, 'text': 'I can show the same thing, but I want to hide the buttons.', 'start': 5783.768, 'duration': 3.722}, {'end': 5790.091, 'text': 'So here, very important thing.', 'start': 5788.03, 'duration': 2.061}, {'end': 5793.413, 'text': 'now the buttons here.', 'start': 5790.091, 'duration': 3.322}, {'end': 5800.317, 'text': 'in order to get the enter functionality, you still need to render the button, but you just have to hide it in a very clever way.', 'start': 5793.413, 'duration': 6.904}, {'end': 5803.819, 'text': 'So the way we do that now is I will show you.', 'start': 5801.457, 'duration': 2.362}, {'end': 5809.732, 'text': 'The way we do that is we pretty much go ahead and do such buttons hidden like this.', 'start': 5805.25, 'duration': 4.482}, {'end': 5813.334, 'text': 'Uh, sorry, we just do a button type.', 'start': 5810.893, 'duration': 2.441}, {'end': 5819.157, 'text': 'I can go ahead and give the, um, a class name to this button.', 'start': 5813.894, 'duration': 5.263}, {'end': 5825.08, 'text': 'So I can go ahead and give these buttons a class name and I can say class name buttons hidden.', 'start': 5819.997, 'duration': 5.083}, {'end': 5829.342, 'text': "And then what I'm going to do is to hide it, but keep its functionality.", 'start': 5825.62, 'duration': 3.722}, {'end': 5833.219, 'text': 'can go ahead and do this.', 'start': 5830.217, 'duration': 3.002}, {'end': 5835.32, 'text': 'i can say search buttons hidden.', 'start': 5833.219, 'duration': 2.101}, {'end': 5841.465, 'text': 'i can say display none important like this.', 'start': 5835.32, 'duration': 6.145}, {'end': 5853.853, 'text': 'right, and what this will do is, you see, now, if i go ahead and where we render that, if i go ahead and do the following if i say hide buttons,', 'start': 5841.465, 'duration': 12.388}, {'end': 5858.556, 'text': "you'll see on the right hand side the buttons should disappear.", 'start': 5853.853, 'duration': 4.703}, {'end': 5859.697, 'text': 'so kazi, check this one out.', 'start': 5858.556, 'duration': 1.141}, {'end': 5862.677, 'text': 'yep, this is quite a cool sort of reusability trait.', 'start': 5860.396, 'duration': 2.281}, {'end': 5868.159, 'text': 'so now you see, what we did is, uh, if we go inside, so you see at the bottom it says hide buttons.', 'start': 5862.677, 'duration': 5.482}, {'end': 5870.02, 'text': "yep, all right, i'm passing this prop in.", 'start': 5868.159, 'duration': 1.861}, {'end': 5876.883, 'text': "so if i, if i don't hide the buttons, then and i save it, damn this, yeah.", 'start': 5870.02, 'duration': 6.863}, {'end': 5880.482, 'text': 'and then if i hide the buttons, Oh nice.', 'start': 5876.883, 'duration': 3.599}, {'end': 5882.563, 'text': "So you can, okay, that's sick.", 'start': 5880.522, 'duration': 2.041}, {'end': 5886.725, 'text': 'So you can use that search bar in the search, that bar that you created.', 'start': 5882.583, 'duration': 4.142}, {'end': 5892.868, 'text': "you can use it in the search page and remove the Google search and I'm feeling lucky buttons and then just be good to go.", 'start': 5886.725, 'duration': 6.143}, {'end': 5899.951, 'text': "Exactly But if we refresh here, you'll see that it actually does work, right? So it actually works.", 'start': 5893.928, 'duration': 6.023}, {'end': 5904.914, 'text': "And even if you type something in and hit the enter key, so let's go ahead and type something in and hit the enter key.", 'start': 5900.432, 'duration': 4.482}, {'end': 5908.896, 'text': 'You see, it still worked.', 'start': 5908.015, 'duration': 0.881}, {'end': 5914.8, 'text': 'Wow Even without the buttons present, because the buttons are actually there on the DOM.', 'start': 5909.898, 'duration': 4.902}, {'end': 5916.34, 'text': "So they're actually there on the web page.", 'start': 5914.92, 'duration': 1.42}], 'summary': 'Building a reusable search component with hide buttons functionality for search page, achieving successful functionality and reusability.', 'duration': 260.624, 'max_score': 5655.716, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM5655716.jpg'}, {'end': 5735.668, 'src': 'embed', 'start': 5707.409, 'weight': 2, 'content': [{'end': 5712.911, 'text': 'Exactly Result one, result two, result three, the little like bar at the top.', 'start': 5707.409, 'duration': 5.502}, {'end': 5715.672, 'text': 'Yeah, exactly.', 'start': 5714.451, 'duration': 1.221}, {'end': 5717.752, 'text': "But let's go back now.", 'start': 5716.212, 'duration': 1.54}, {'end': 5719.453, 'text': "So let's go back to forward slash.", 'start': 5717.812, 'duration': 1.641}, {'end': 5722.88, 'text': "So I'm going to make this component reusable now.", 'start': 5720.618, 'duration': 2.262}, {'end': 5728.583, 'text': "So I'm going to slightly modify this component so that we can use it in other places.", 'start': 5723.16, 'duration': 5.423}, {'end': 5735.668, 'text': "So in the next page, on the results page, we want that search bar, but we don't want the buttons.", 'start': 5729.324, 'duration': 6.344}], 'summary': 'Modifying component for reuse, removing buttons on results page.', 'duration': 28.259, 'max_score': 5707.409, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM5707409.jpg'}, {'end': 6035.242, 'src': 'embed', 'start': 6010.47, 'weight': 6, 'content': [{'end': 6016.094, 'text': 'The React Context API is essentially where you can push information into it and you can pull information into it,', 'start': 6010.47, 'duration': 5.624}, {'end': 6021.159, 'text': "and it doesn't matter where you are inside of your app, right?", 'start': 6016.094, 'duration': 5.065}, {'end': 6022.7, 'text': "So it's essentially the Redux plan.", 'start': 6021.179, 'duration': 1.521}, {'end': 6027.581, 'text': "So what we're going to do now is I'm going to show you how to set up the data and I'm going to do it pretty fast.", 'start': 6023.22, 'duration': 4.361}, {'end': 6035.242, 'text': "And the reason why we're going to do it pretty fast is because we actually have an amazing little snippet where we explain how to use the entire React context API,", 'start': 6028.021, 'duration': 7.221}], 'summary': 'React context api allows for flexible data sharing across the app, akin to redux.', 'duration': 24.772, 'max_score': 6010.47, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM6010470.jpg'}, {'end': 6153.804, 'src': 'heatmap', 'start': 6028.021, 'weight': 0.746, 'content': [{'end': 6035.242, 'text': "And the reason why we're going to do it pretty fast is because we actually have an amazing little snippet where we explain how to use the entire React context API,", 'start': 6028.021, 'duration': 7.221}, {'end': 6040.403, 'text': 'which we actually uploaded very recently, which you can go out and check out after this if you get confused.', 'start': 6035.242, 'duration': 5.161}, {'end': 6043.264, 'text': "So let's go ahead and do the following.", 'start': 6040.984, 'duration': 2.28}, {'end': 6044.904, 'text': 'So we need to introduce a few things here.', 'start': 6043.284, 'duration': 1.62}, {'end': 6050.016, 'text': 'So inside of index.js, we need to go ahead and do the following.', 'start': 6045.465, 'duration': 4.551}, {'end': 6051.096, 'text': 'So this is our app.', 'start': 6050.056, 'duration': 1.04}, {'end': 6055.26, 'text': 'We essentially need to wrap it in something called a state provider.', 'start': 6051.717, 'duration': 3.543}, {'end': 6060.504, 'text': 'So what this is going to do is essentially going to provide a data layer around our app.', 'start': 6056.141, 'duration': 4.363}, {'end': 6067.87, 'text': "So it's going to provide a data layer around our app, and our app is going to break because it doesn't know what we're talking about here.", 'start': 6062.766, 'duration': 5.104}, {'end': 6070.332, 'text': "It's saying, hang on, but you don't have a state provider.", 'start': 6068.431, 'duration': 1.901}, {'end': 6077.198, 'text': 'What is that? So what we need to do is go ahead and create a file called stateprovider.js.', 'start': 6070.372, 'duration': 6.826}, {'end': 6085.45, 'text': "Inside of here, I'm going to basically drop a snippet of code and I'm going to explain each of the lines.", 'start': 6079.223, 'duration': 6.227}, {'end': 6088.173, 'text': 'Like I said, guys, at this point, if you get confused,', 'start': 6085.87, 'duration': 2.303}, {'end': 6095.907, 'text': 'then remember we dropped a video which we explained the entire thing in a lot more detail about how you use the React Context API.', 'start': 6088.723, 'duration': 7.184}, {'end': 6101.05, 'text': "But I'll explain it right here in detail so that anyone watching can actually follow along.", 'start': 6096.507, 'duration': 4.543}, {'end': 6105.112, 'text': 'So this is just importing the required dependencies.', 'start': 6101.87, 'duration': 3.242}, {'end': 6109.795, 'text': 'This right here is basically preparing what we like to call the data layer.', 'start': 6105.693, 'duration': 4.102}, {'end': 6113.037, 'text': "So I refer to it as a data layer, so it's actually easy to understand.", 'start': 6109.835, 'duration': 3.202}, {'end': 6116.579, 'text': 'But this is essentially preparing the data layer.', 'start': 6113.457, 'duration': 3.122}, {'end': 6121.939, 'text': 'Then this right here is what we call a higher-order component.', 'start': 6118.556, 'duration': 3.383}, {'end': 6124.922, 'text': "So you see it's a state context and then children.", 'start': 6122.26, 'duration': 2.662}, {'end': 6128.786, 'text': "Now the children that it's referring to is this, so the app.", 'start': 6125.463, 'duration': 3.323}, {'end': 6131.708, 'text': "The app is essentially the children that we're referring to here.", 'start': 6129.506, 'duration': 2.202}, {'end': 6135.111, 'text': 'Then we pass two things, we pass a reducer and initial state.', 'start': 6132.149, 'duration': 2.962}, {'end': 6137.694, 'text': 'A reducer and initial state you can see here.', 'start': 6135.712, 'duration': 1.982}, {'end': 6146.7, 'text': "I'll explain what they are in a second, but essentially the initial state is what that data layer looks like when the app is loaded right,", 'start': 6138.194, 'duration': 8.506}, {'end': 6149.882, 'text': 'the reducer is something which is clever and it listens to changes.', 'start': 6146.7, 'duration': 3.182}, {'end': 6153.804, 'text': 'uh, for that that will be needed from data.', 'start': 6149.882, 'duration': 3.922}], 'summary': 'Explanation of using react context api, preparing data layer and higher-order component.', 'duration': 125.783, 'max_score': 6028.021, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM6028021.jpg'}, {'end': 6113.037, 'src': 'embed', 'start': 6088.723, 'weight': 4, 'content': [{'end': 6095.907, 'text': 'then remember we dropped a video which we explained the entire thing in a lot more detail about how you use the React Context API.', 'start': 6088.723, 'duration': 7.184}, {'end': 6101.05, 'text': "But I'll explain it right here in detail so that anyone watching can actually follow along.", 'start': 6096.507, 'duration': 4.543}, {'end': 6105.112, 'text': 'So this is just importing the required dependencies.', 'start': 6101.87, 'duration': 3.242}, {'end': 6109.795, 'text': 'This right here is basically preparing what we like to call the data layer.', 'start': 6105.693, 'duration': 4.102}, {'end': 6113.037, 'text': "So I refer to it as a data layer, so it's actually easy to understand.", 'start': 6109.835, 'duration': 3.202}], 'summary': 'A video was released explaining the react context api, with a brief explanation provided in the transcript.', 'duration': 24.314, 'max_score': 6088.723, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM6088723.jpg'}, {'end': 6310.339, 'src': 'embed', 'start': 6288.277, 'weight': 5, 'content': [{'end': 6296.602, 'text': "The state is the state of the data layer, and the action is whatever we're dispatching into the data layer, so into the context API.", 'start': 6288.277, 'duration': 8.325}, {'end': 6301.156, 'text': 'I like to add a console log here for debugging purposes.', 'start': 6297.955, 'duration': 3.201}, {'end': 6310.339, 'text': 'That way, whenever we do any manipulation to the data layer, it will actually log out the action that we dispatched.', 'start': 6301.216, 'duration': 9.123}], 'summary': 'Explaining the relationship between state, action, and logging in the data layer.', 'duration': 22.062, 'max_score': 6288.277, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM6288277.jpg'}], 'start': 5480.534, 'title': 'React and form handling', 'summary': 'Covers form submission using the enter key, react viewer for page history, creating reusable search bar components, implementing a data layer with the react context api, and setting up the react context api for building a google search clone.', 'chapters': [{'end': 5613.274, 'start': 5480.534, 'title': 'Form submission trick for handling enter key', 'summary': 'Explains a simple trick to handle form submission using the enter key by changing the outer div to a form and the button type to submit, which triggers the on click and saves time and effort. it also mentions the common mistake of using hacky ways to listen to the enter key and advises against it.', 'duration': 132.74, 'highlights': ['Changing the outer div to a form and the button type to submit triggers the on click, simplifying form submission and saving time and effort.', 'Advising against using hacky ways to listen to the enter key, emphasizing the simplicity and effectiveness of the form submission trick.', 'Clarifying the functionality of making the entire input act like a form and explaining the custom input field concept.']}, {'end': 5964.3, 'start': 5613.394, 'title': 'React viewer and reusable components', 'summary': 'Explains how to use react viewer to handle page history and demonstrates creating a reusable search bar component with the ability to hide buttons, ensuring functionality while maintaining clean layout and enhancing reusability.', 'duration': 350.906, 'highlights': ["Using React Viewer to manage page history The chapter explains how to use React Viewer's history to manage page navigation, demonstrating the process of redirecting the user to the search page upon hitting the search button.", 'Creating a reusable search bar component with the ability to hide buttons The chapter demonstrates how to create a search bar component with the capability to hide buttons, ensuring reusability while maintaining clean layout and functionality, enhancing user experience.', "Hiding buttons using CSS to maintain functionality The chapter explains the technique of hiding buttons using CSS properties like 'display: none' to maintain functionality while achieving a clean layout, enhancing user experience."]}, {'end': 6374.542, 'start': 5964.32, 'title': 'Implementing data layer with react context api', 'summary': 'Outlines the process of setting up a data layer using the react context api, including creating a state provider, initializing the data layer with a term, defining action types, and implementing a reducer to manage dispatched actions.', 'duration': 410.222, 'highlights': ['The chapter explains the process of setting up a data layer using the React Context API, including creating a state provider and initializing the data layer with a term. Creation of state provider, initialization of the data layer with a term', 'It also covers the definition of action types and the implementation of a reducer to manage dispatched actions. Definition of action types, implementation of a reducer', 'The chapter emphasizes the use of the React Context API as a means to push and pull information into the data layer throughout the app. Emphasis on using the React Context API for information management']}, {'end': 6829.007, 'start': 6374.882, 'title': 'Setting up react context api', 'summary': 'Focuses on setting up the react context api, creating a data layer, dispatching actions, and pulling data to build a google search clone, with a mention of successful consulting projects at sonos.', 'duration': 454.125, 'highlights': ['Setting up the React context API and creating a data layer The process involves setting up the reducer, importing dependencies, and wrapping the app inside a data layer, allowing information to be pushed and pulled as needed.', 'Dispatching actions and updating the data layer The dispatch function is used to update the data layer with a specific action type, such as setting the search term, and this allows for tracking user input and updating the data accordingly.', 'Mention of successful consulting project at Sonos A member of the community, Frank, landed a 100,000 a year consulting project at Sonos to build their new React radio station product with React and React Native, showcasing the practical application of React skills in real-world projects.']}], 'duration': 1348.473, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM5480534.jpg', 'highlights': ['Advising against using hacky ways to listen to the enter key, emphasizing the simplicity and effectiveness of the form submission trick.', 'Changing the outer div to a form and the button type to submit triggers the on click, simplifying form submission and saving time and effort.', 'Creating a reusable search bar component with the ability to hide buttons, ensuring reusability while maintaining clean layout and functionality, enhancing user experience.', 'Using React Viewer to manage page history, demonstrating the process of redirecting the user to the search page upon hitting the search button.', 'The chapter explains the process of setting up a data layer using the React Context API, including creating a state provider and initializing the data layer with a term.', 'Dispatching actions and updating the data layer, allowing for tracking user input and updating the data accordingly.', 'Emphasis on using the React Context API for information management.']}, {'end': 8667.286, 'segs': [{'end': 6896.032, 'src': 'embed', 'start': 6850.198, 'weight': 0, 'content': [{'end': 6855.6, 'text': 'Like the course, whatever the course costs, Frank just made six figures inside of that.', 'start': 6850.198, 'duration': 5.402}, {'end': 6857.961, 'text': 'Right, and literally, and I shared this too with everybody.', 'start': 6855.841, 'duration': 2.12}, {'end': 6860.362, 'text': 'Like two weeks before that, Jen got an offer for 96K a year.', 'start': 6858.001, 'duration': 2.361}, {'end': 6864.357, 'text': 'based on the COVID tracker project.', 'start': 6862.256, 'duration': 2.101}, {'end': 6870.561, 'text': "So these are, like I said here, these projects that we're showing you are as real world as it gets.", 'start': 6864.377, 'duration': 6.184}, {'end': 6878.125, 'text': "Yeah And like, truth be told, like what we're offering the course for at the moment is hugely underpriced.", 'start': 6871.782, 'duration': 6.343}, {'end': 6880.107, 'text': 'Like we will be pushing the price up soon.', 'start': 6878.165, 'duration': 1.942}, {'end': 6889.172, 'text': 'It should be 5, 000 to 10, 000, like, you know, coding bootcamps, but we are offering it in a way where more people can actually join it.', 'start': 6880.127, 'duration': 9.045}, {'end': 6892.03, 'text': 'Exactly Exactly.', 'start': 6890.549, 'duration': 1.481}, {'end': 6896.032, 'text': 'So like guys like jump in while you got a chance because it will go up eventually.', 'start': 6892.09, 'duration': 3.942}], 'summary': 'Real-world projects lead to lucrative job offers, course price set to increase soon.', 'duration': 45.834, 'max_score': 6850.198, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM6850198.jpg'}, {'end': 7011.894, 'src': 'embed', 'start': 6985.727, 'weight': 2, 'content': [{'end': 6993.691, 'text': "Okay So the search page is one of the most sort of like fun components to build and we'll go through it and we'll break it down bit by bit.", 'start': 6985.727, 'duration': 7.964}, {'end': 6997.754, 'text': 'Um, but basically it consists of a bunch of different sections.', 'start': 6994.492, 'duration': 3.262}, {'end': 7000.655, 'text': "So we'll stick to the way we do things typically.", 'start': 6997.834, 'duration': 2.821}, {'end': 7003.557, 'text': 'And the search page currently has a header.', 'start': 7000.875, 'duration': 2.682}, {'end': 7005.278, 'text': "So let's go ahead and add that.", 'start': 7004.137, 'duration': 1.141}, {'end': 7007.559, 'text': "So we've got a div with a class name.", 'start': 7005.298, 'duration': 2.261}, {'end': 7011.894, 'text': 'search page.', 'start': 7008.671, 'duration': 3.223}], 'summary': 'Building the search page with header and sections.', 'duration': 26.167, 'max_score': 6985.727, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM6985727.jpg'}, {'end': 8409.98, 'src': 'embed', 'start': 8376.13, 'weight': 4, 'content': [{'end': 8378.432, 'text': 'This is an example of a use Google search.', 'start': 8376.13, 'duration': 2.302}, {'end': 8379.832, 'text': 'We just created a custom hook.', 'start': 8378.451, 'duration': 1.381}, {'end': 8388.154, 'text': "Okay And like the power of this is insane because what we're doing at the end is we're saying return data as an object.", 'start': 8380.932, 'duration': 7.222}, {'end': 8389.294, 'text': 'It returns an object.', 'start': 8388.214, 'duration': 1.08}, {'end': 8390.315, 'text': 'Okay Got it.', 'start': 8389.394, 'duration': 0.921}, {'end': 8392.015, 'text': 'It returns an object.', 'start': 8390.995, 'duration': 1.02}, {'end': 8395.938, 'text': 'Yeah So now what we can do is we can actually go ahead and test this.', 'start': 8392.055, 'duration': 3.883}, {'end': 8397.118, 'text': 'So we can go ahead and do this.', 'start': 8395.998, 'duration': 1.12}, {'end': 8401.558, 'text': 'We can say, go back to your search page and we can say const data.', 'start': 8397.158, 'duration': 4.4}, {'end': 8409.98, 'text': "So whatever's returned as an object like we saw, use Google search like this right?", 'start': 8401.578, 'duration': 8.402}], 'summary': 'Created custom hook to return data as an object, enabling testing.', 'duration': 33.85, 'max_score': 8376.13, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM8376129.jpg'}, {'end': 8608.144, 'src': 'embed', 'start': 8583.283, 'weight': 3, 'content': [{'end': 8588.927, 'text': "Then what's going to happen is it's going to push Tesla, the search term into the data layer.", 'start': 8583.283, 'duration': 5.644}, {'end': 8591.18, 'text': "where it's going to push that into the data layer.", 'start': 8589.54, 'duration': 1.64}, {'end': 8596.561, 'text': "Once that's in the data layer, you can see in search page, we pull it by using useStateValue.", 'start': 8591.901, 'duration': 4.66}, {'end': 8598.022, 'text': 'So now we have that search term.', 'start': 8596.581, 'duration': 1.441}, {'end': 8601.863, 'text': 'And then we use our custom hook that we created called useGoogleSearch.', 'start': 8598.522, 'duration': 3.341}, {'end': 8608.144, 'text': 'We pass that term, and then that will end up making a call to the Google Custom Search API.', 'start': 8602.223, 'duration': 5.921}], 'summary': "Using the search term 'tesla' to make a call to the google custom search api.", 'duration': 24.861, 'max_score': 8583.283, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM8583283.jpg'}], 'start': 6829.167, 'title': 'Building search page and api integration in react', 'summary': "Discusses the value of the course with examples of students' success, setting up custom and google search apis, implementing google search api in react, and creating custom hooks for google search, with practical demonstrations and limitations such as a free limit of a hundred queries a day.", 'chapters': [{'end': 7245.997, 'start': 6829.167, 'title': 'Real-world projects and course value', 'summary': 'Discusses the value of the course, with examples of students making six figures and getting job offers, while highlighting the underpriced nature of the course and the potential price increase, along with a practical demonstration of building a search page component and engaging with the audience.', 'duration': 416.83, 'highlights': ['Frank made six figures inside the course, and Jen received a job offer for 96K a year based on a real-world project, demonstrating the practical value of the course.', 'The course is currently underpriced, with plans to raise the price to 5,000 to 10,000, making it accessible to more people while providing substantial value.', 'The speaker engages the audience by offering a practical demonstration of building a search page component and interacting with the audience through likes and comments.', 'The speaker humorously engages the audience by offering to buy dinner based on likes and joking about coding in PHP, creating an interactive and lighthearted atmosphere.', 'The practical demonstration includes importing the state value hook, testing the functionality, and engaging with a specific audience member who is joining the course.']}, {'end': 7658.034, 'start': 7246.037, 'title': 'Setting up custom search api', 'summary': 'Details the process of setting up the custom search api, including obtaining an api key and creating a keys.js file to access the key, with a free limit of a hundred queries a day, and the plan to create a custom hook.', 'duration': 411.997, 'highlights': ['The chapter details the process of setting up the Custom Search API, including obtaining an API key and creating a keys.js file to access the key, with a free limit of a hundred queries a day.', 'The chapter discusses the plan to create a custom hook for accessing the API key, signaling a new development approach.', 'The chapter emphasizes the importance of hiding sensitive information, such as the API key, during the development process to maintain security and privacy.', 'The chapter mentions the availability of a free training and program through a provided link in the description.']}, {'end': 7944.566, 'start': 7658.714, 'title': 'Setting up google search api', 'summary': 'Covers the process of setting up the google search api, including the steps to access the api, creating a new search engine, and obtaining the search engine id.', 'duration': 285.852, 'highlights': ['The process of setting up the Google Search API, including accessing the API, creating a new search engine, and obtaining the search engine ID.', 'The importance of grabbing the search engine ID and creating a file called useGoogleSearch.js for implementing the API.', "The significance of using 'use' in front of a function to define it as a hook.", "The frustration expressed with the non-responsive nature of Google's interface and the corporate feel of the platform.", 'The mention of Firebase as a startup company before being acquired by Google.']}, {'end': 8334.827, 'start': 7944.566, 'title': 'Implementing google search api in react', 'summary': 'Covers the process of implementing the google search api in react, including importing necessary components, creating a custom hook with state and useeffect, and making an async fetch to retrieve search results from the api.', 'duration': 390.261, 'highlights': ['The process involves importing necessary components such as the API key, setting up a context key to specify the search engine, and creating a custom hook with its own piece of state called data, along with a useEffect dependent on the search term.', "The async fetch function within the custom hook connects to Google's custom search API endpoint using the provided key, context, and search term, and processes the response into JSON format.", 'The chapter also includes a mention of receiving an Uber Eats credit as a thank you for assistance in landing a Sonos gig.', "The detailed implementation involves steps like importing necessary components, creating a custom hook with state and useEffect, and making an async fetch to retrieve search results, including the specific URL and parameters for connecting to Google's custom search API."]}, {'end': 8667.286, 'start': 8335.407, 'title': 'Creating custom hooks for google search', 'summary': 'Discusses creating a custom hook for google search, utilizing the usegooglesearch hook to fetch data from the google custom search api, and testing the implementation by searching for a term like tesla.', 'duration': 331.879, 'highlights': ['Creating a custom hook for Google search and utilizing the useGoogleSearch hook to fetch data from the Google Custom Search API. Demonstrates the creation of a custom hook for Google search and emphasizes the use of the useGoogleSearch hook to fetch data from the Google Custom Search API.', 'Testing the implementation by searching for a term like Tesla and receiving the response from Google. Illustrates the process of testing the created custom hook implementation by searching for a term like Tesla and receiving the response from Google.', 'Recommendation to start with fetch for cleaner implementation and later consider using Axios for more advanced functionalities. Provides a recommendation to start with fetch for a cleaner implementation and suggests considering using Axios for more advanced functionalities.']}], 'duration': 1838.119, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM6829167.jpg', 'highlights': ['Frank made six figures inside the course, and Jen received a job offer for 96K a year based on a real-world project, demonstrating the practical value of the course.', 'The course is currently underpriced, with plans to raise the price to 5,000 to 10,000, making it accessible to more people while providing substantial value.', 'The speaker engages the audience by offering a practical demonstration of building a search page component and interacting with the audience through likes and comments.', 'The process involves importing necessary components such as the API key, setting up a context key to specify the search engine, and creating a custom hook with its own piece of state called data, along with a useEffect dependent on the search term.', "The async fetch function within the custom hook connects to Google's custom search API endpoint using the provided key, context, and search term, and processes the response into JSON format."]}, {'end': 9575.548, 'segs': [{'end': 8743.115, 'src': 'embed', 'start': 8712.97, 'weight': 3, 'content': [{'end': 8714.912, 'text': "Yeah So it's actually going ahead searching.", 'start': 8712.97, 'duration': 1.942}, {'end': 8717.294, 'text': "It's using Google to actually go ahead and do this.", 'start': 8715.472, 'duration': 1.822}, {'end': 8722.378, 'text': "Right So remember, don't spam this because you're going to have a hundred limit.", 'start': 8717.374, 'duration': 5.004}, {'end': 8728.223, 'text': "I think it's a hundred limit, free limit a day, and then you can pretty much put a card on and then you can, if you want, to pay for it.", 'start': 8722.438, 'duration': 5.785}, {'end': 8733.748, 'text': "you have a huge amount of stuff like $5, but I would say, stick to the free quote and I'll show you a little trick now.", 'start': 8728.223, 'duration': 5.525}, {'end': 8743.115, 'text': 'Right? So that entire response that cause you just got, right? So if you go ahead and open up the network panel, cozy, Okay, I will.', 'start': 8733.888, 'duration': 9.227}], 'summary': 'Using google search with a limit of 100 free searches per day, with an option to pay for more searches.', 'duration': 30.145, 'max_score': 8712.97, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM8712970.jpg'}, {'end': 8876.792, 'src': 'embed', 'start': 8849.761, 'weight': 4, 'content': [{'end': 8852.842, 'text': 'so the reason why i was making this a point?', 'start': 8849.761, 'duration': 3.081}, {'end': 8861.125, 'text': 'because once you see this response, i want you to go ahead and do command a on that response and actually copy everything right.', 'start': 8852.842, 'duration': 8.283}, {'end': 8862.765, 'text': 'so copy everything now.', 'start': 8861.125, 'duration': 1.64}, {'end': 8870.268, 'text': "this is really handy for when you're developing, because you don't want to keep attacking the the api because you run out of your quota.", 'start': 8862.765, 'duration': 7.503}, {'end': 8872.869, 'text': "if we keep doing that while we're developing, we're going to easily use up 100 requests.", 'start': 8870.268, 'duration': 2.601}, {'end': 8876.792, 'text': 'So should we put it in?', 'start': 8873.909, 'duration': 2.883}], 'summary': 'Copying responses using command a can help avoid exceeding quota in development by easily using up to 100 requests.', 'duration': 27.031, 'max_score': 8849.761, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM8849761.jpg'}, {'end': 8999.502, 'src': 'embed', 'start': 8970.563, 'weight': 0, 'content': [{'end': 8972.945, 'text': 'Yeah, Tesla, the band starts to show up soon.', 'start': 8970.563, 'duration': 2.382}, {'end': 8974.826, 'text': 'Dope Okay.', 'start': 8973.805, 'duration': 1.021}, {'end': 8979.709, 'text': 'So it may not be exactly to what Google has done, but it is pulling it from Google.', 'start': 8974.846, 'duration': 4.863}, {'end': 8982.911, 'text': 'Because remember, they might have set the engine up slightly different.', 'start': 8979.909, 'duration': 3.002}, {'end': 8985.993, 'text': 'But the point is, it will get the majority of the search terms.', 'start': 8982.971, 'duration': 3.022}, {'end': 8989.536, 'text': 'Thank you, Tejas, for another donation.', 'start': 8987.795, 'duration': 1.741}, {'end': 8992.137, 'text': 'Thank you, Anurag, for another donation.', 'start': 8989.616, 'duration': 2.521}, {'end': 8997.941, 'text': 'And Anurag actually says, check the DM for merch that he made for us.', 'start': 8992.157, 'duration': 5.784}, {'end': 8999.502, 'text': 'So that is awesome.', 'start': 8998.241, 'duration': 1.261}], 'summary': "Tesla band show, pulling data from google, majority of search terms, donations received, anurag's merch mentioned.", 'duration': 28.939, 'max_score': 8970.563, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM8970563.jpg'}, {'end': 9143.341, 'src': 'embed', 'start': 9093.138, 'weight': 5, 'content': [{'end': 9098.079, 'text': "Yeah And to make that super clear for you guys, what I'm going to do is I'm going to chuck that above here like this.", 'start': 9093.138, 'duration': 4.941}, {'end': 9100.32, 'text': "That's the live API call this one.", 'start': 9098.639, 'duration': 1.681}, {'end': 9104.279, 'text': "Yeah But, We don't necessarily want to always do the live API calls.", 'start': 9100.34, 'duration': 3.939}, {'end': 9108.779, 'text': 'So what we can do is we can say const data, get the data from our response instead.', 'start': 9104.339, 'duration': 4.44}, {'end': 9112.78, 'text': 'And our response could be from our local response file.', 'start': 9109.32, 'duration': 3.46}, {'end': 9119.502, 'text': "So this will actually go ahead and it's the exact same shape, the exact same everything, but it's just pulling it from this data instead.", 'start': 9113.38, 'duration': 6.122}, {'end': 9132.291, 'text': 'So now if I do console log data, so because if we go to the search and we open the inspector, I will open the inspector right now.', 'start': 9120.002, 'duration': 12.289}, {'end': 9137.395, 'text': 'Boom Okay.', 'start': 9133.031, 'duration': 4.364}, {'end': 9140.038, 'text': 'Now, if we refresh and we open the console.', 'start': 9137.996, 'duration': 2.042}, {'end': 9143.341, 'text': 'Okay Refresh.', 'start': 9141.279, 'duration': 2.062}], 'summary': 'Demonstrates switching from live api calls to local response file to retrieve data.', 'duration': 50.203, 'max_score': 9093.138, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM9093138.jpg'}, {'end': 9227.418, 'src': 'embed', 'start': 9201.296, 'weight': 2, 'content': [{'end': 9206.901, 'text': "We have the good stuff, right? So let's go ahead and make this all sort of pretty and look nice now.", 'start': 9201.296, 'duration': 5.605}, {'end': 9208.983, 'text': 'So the search page header.', 'start': 9206.961, 'duration': 2.022}, {'end': 9215.872, 'text': "what we're going to do now is at the top of the page we're going to have a link And inside that link we're going to have a search page logo.", 'start': 9208.983, 'duration': 6.889}, {'end': 9217.232, 'text': "So I'm going to go ahead and save this.", 'start': 9215.892, 'duration': 1.34}, {'end': 9220.954, 'text': 'So we have the link at the top, and then we have an image.', 'start': 9218.373, 'duration': 2.581}, {'end': 9227.418, 'text': 'This has a class name of search page logo, and this is just the Google logo, right? So link is not defined.', 'start': 9221.174, 'duration': 6.244}], 'summary': 'Enhancing the search page with a link and a google logo.', 'duration': 26.122, 'max_score': 9201.296, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM9201296.jpg'}, {'end': 9387.768, 'src': 'embed', 'start': 9362.431, 'weight': 10, 'content': [{'end': 9367.535, 'text': 'Then what we can do is we have a bunch of options underneath it.', 'start': 9362.431, 'duration': 5.104}, {'end': 9369.496, 'text': "First, I'm going to go ahead and start some of this stuff.", 'start': 9367.575, 'duration': 1.921}, {'end': 9372.778, 'text': "The actual header itself, I'm going to give the following to it.", 'start': 9369.936, 'duration': 2.842}, {'end': 9378.986, 'text': "I'm going to say it's display flex, Position is sticky because when we scroll down, I want it to basically stick.", 'start': 9372.798, 'duration': 6.188}, {'end': 9381.907, 'text': "I'm going to say top of zero, so it's going to stick to the top.", 'start': 9379.586, 'duration': 2.321}, {'end': 9384.707, 'text': 'Background color white, Z index of 100.', 'start': 9382.507, 'duration': 2.2}, {'end': 9387.768, 'text': "So that way when we're scrolling down, it always stays at the top of the screen.", 'start': 9384.707, 'duration': 3.061}], 'summary': 'Setting the header with display flex, sticky position, white background color, and z index of 100 for it to stick at the top of the screen.', 'duration': 25.337, 'max_score': 9362.431, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM9362431.jpg'}, {'end': 9437.43, 'src': 'embed', 'start': 9404.236, 'weight': 9, 'content': [{'end': 9405.357, 'text': 'um, for the responsiveness.', 'start': 9404.236, 'duration': 1.121}, {'end': 9407.978, 'text': "Cause I didn't, the search page is a little bit less responsive.", 'start': 9405.377, 'duration': 2.601}, {'end': 9415.582, 'text': "So, um, let's go ahead and I think we're muted camera when you said 50 50 split.", 'start': 9408.038, 'duration': 7.544}, {'end': 9416.462, 'text': 'So got it.', 'start': 9415.762, 'duration': 0.7}, {'end': 9419.664, 'text': 'Okay You mean boom like that? Yeah.', 'start': 9416.622, 'duration': 3.042}, {'end': 9420.024, 'text': "Let's do a 50 50.", 'start': 9419.684, 'duration': 0.34}, {'end': 9420.244, 'text': 'Yeah Nice.', 'start': 9420.024, 'duration': 0.22}, {'end': 9429.428, 'text': "And then what we're going to do now is go to, so we have that.", 'start': 9424.906, 'duration': 4.522}, {'end': 9430.008, 'text': 'Yep Nice.', 'start': 9429.448, 'duration': 0.56}, {'end': 9437.43, 'text': "So now what I'm going to say is inside of the header body, what we can actually do at this point is the search itself.", 'start': 9430.148, 'duration': 7.282}], 'summary': 'Discussing responsiveness and making a 50-50 split for search page improvement.', 'duration': 33.194, 'max_score': 9404.236, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM9404236.jpg'}, {'end': 9479.874, 'src': 'embed', 'start': 9451.533, 'weight': 8, 'content': [{'end': 9455.736, 'text': 'And basically go and override those search styles.', 'start': 9451.533, 'duration': 4.203}, {'end': 9458.138, 'text': 'So in search, we had search and search input.', 'start': 9455.796, 'duration': 2.342}, {'end': 9466.384, 'text': 'So go inside, find that, change the margin top to zero, unset the width, unset the margins that we applied before and unset the max width.', 'start': 9458.158, 'duration': 8.226}, {'end': 9469.887, 'text': 'And what it does is it overrides the style, right?', 'start': 9467.245, 'duration': 2.642}, {'end': 9474.09, 'text': "So it overrides the styles that we've previously put on it, which is kind of nice, right?", 'start': 9469.907, 'duration': 4.183}, {'end': 9479.874, 'text': 'So that means that we can reuse it, but we can actually, just from our CSS, go ahead and change the styling of that search box.', 'start': 9474.13, 'duration': 5.744}], 'summary': 'Override search styles to reuse and change styling of search box.', 'duration': 28.341, 'max_score': 9451.533, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM9451533.jpg'}, {'end': 9551.045, 'src': 'embed', 'start': 9524.025, 'weight': 7, 'content': [{'end': 9527.047, 'text': 'So hold on, let me just draw that out with you.', 'start': 9524.025, 'duration': 3.022}, {'end': 9530.51, 'text': 'Let me draw that out what you just said and hold on.', 'start': 9528.048, 'duration': 2.462}, {'end': 9532.452, 'text': 'Jessica just dropped a huge donation, dude.', 'start': 9530.53, 'duration': 1.922}, {'end': 9535.334, 'text': 'Whoa, that is amazing.', 'start': 9532.612, 'duration': 2.722}, {'end': 9536.255, 'text': '100 Mexican dollars.', 'start': 9535.474, 'duration': 0.781}, {'end': 9538.576, 'text': 'Damn, thank you, Jessica.', 'start': 9536.835, 'duration': 1.741}, {'end': 9541.499, 'text': "Jessica says, guys, you're so handsome.", 'start': 9538.897, 'duration': 2.602}, {'end': 9545.081, 'text': "And she goes, moreover, You're super talented in code.", 'start': 9541.639, 'duration': 3.442}, {'end': 9546.382, 'text': 'Thanks for your stream.', 'start': 9545.221, 'duration': 1.161}, {'end': 9549.484, 'text': 'I found how easy it is using Firebase with React.', 'start': 9546.542, 'duration': 2.942}, {'end': 9551.045, 'text': 'Please keep doing it.', 'start': 9549.984, 'duration': 1.061}], 'summary': 'Jessica made a generous donation of 100 mexican dollars and praised the stream for its coding talents and ease of using firebase with react.', 'duration': 27.02, 'max_score': 9524.025, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM9524025.jpg'}], 'start': 8667.286, 'title': 'Using google api for search results and react implementation', 'summary': 'Details using google api to retrieve search results, managing a 100-requests-per-day limit, and implementing a search page header in react, achieving a 50-50 split, and receiving a generous donation of 100 mexican dollars from jessica for their stream.', 'chapters': [{'end': 8916.267, 'start': 8667.286, 'title': 'Using google api to retrieve search results', 'summary': 'Details the process of using the google api to retrieve search results, with a focus on avoiding quota limits and efficiently handling the response, including a 100-requests-per-day limit and the importance of copying the entire response for development purposes.', 'duration': 248.981, 'highlights': ['The chapter details the process of using the Google API to retrieve search results The discussion revolves around the practical steps of using the Google API to obtain search results, demonstrating the process of clicking on items and arrays to retrieve specific information.', 'A 100-requests-per-day limit is mentioned The speaker advises to be mindful of the 100-requests-per-day limit on the Google API, emphasizing the importance of not spamming the system to avoid exceeding the free limit.', 'Importance of copying the entire response for development purposes Emphasis is placed on the necessity of copying the entire response from the API for development purposes, as repeatedly querying the API during development could quickly deplete the quota.']}, {'end': 9301.089, 'start': 8916.327, 'title': 'Google search integration for tesla', 'summary': 'Discusses integrating google search results for tesla, showcasing the process of retrieving and utilizing the data, and leveraging local responses to mimic live api calls to avoid using up quotas.', 'duration': 384.762, 'highlights': ["The chapter discusses integrating Google search results for Tesla The discussion revolves around the process of typing 'Tesla' into Google and obtaining the search results, indicating the functionality of the integration.", 'Showcasing the process of retrieving and utilizing the data The process of retrieving search results from Google, extracting relevant data, and the display link for the search results is highlighted, demonstrating the utilization of the obtained information.', 'Leveraging local responses to mimic live API calls to avoid using up quotas The approach of using local response files to simulate live API calls, avoiding the depletion of quotas, and the method of switching between local and live data are presented as effective strategies.']}, {'end': 9575.548, 'start': 9301.089, 'title': 'Implementing search page header in react', 'summary': 'Discusses the implementation of the search page header in react, including adding a div, making the header sticky, and overriding search styles, achieving a 50-50 split, and receiving a generous donation of 100 mexican dollars from jessica for their stream.', 'duration': 274.459, 'highlights': ['The chapter discusses implementing the search page header in React, including making the header sticky, achieving a 50-50 split, and overriding search styles.', 'Receiving a generous donation of 100 Mexican dollars from Jessica for their stream.', 'Explanation of how to override search styles in React for cleaner styling and reusability.', 'Achieving a 50-50 split for responsiveness in the search page.', 'Adding a div and making the header sticky for the search page in React.']}], 'duration': 908.262, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM8667286.jpg', 'highlights': ['The chapter details the process of using the Google API to retrieve search results', 'The discussion revolves around integrating Google search results for Tesla', 'The chapter discusses implementing the search page header in React, including making the header sticky, achieving a 50-50 split, and overriding search styles', 'A 100-requests-per-day limit is mentioned', 'Importance of copying the entire response for development purposes', 'Showcasing the process of retrieving and utilizing the data', 'Leveraging local responses to mimic live API calls to avoid using up quotas', 'Receiving a generous donation of 100 Mexican dollars from Jessica for their stream', 'Explanation of how to override search styles in React for cleaner styling and reusability', 'Achieving a 50-50 split for responsiveness in the search page', 'Adding a div and making the header sticky for the search page in React']}, {'end': 10278.778, 'segs': [{'end': 9731.421, 'src': 'embed', 'start': 9688.615, 'weight': 0, 'content': [{'end': 9689.095, 'text': 'All right, cool.', 'start': 9688.615, 'duration': 0.48}, {'end': 9690.476, 'text': 'So this is looking good.', 'start': 9689.376, 'duration': 1.1}, {'end': 9696.581, 'text': 'Awesome So you want me to just go to the search page? Yeah.', 'start': 9690.496, 'duration': 6.085}, {'end': 9697.382, 'text': 'And then just stay there.', 'start': 9696.621, 'duration': 0.761}, {'end': 9703.742, 'text': 'Yeah So go to the search page and remember guys, we are actually mocking the response.', 'start': 9698.638, 'duration': 5.104}, {'end': 9708.186, 'text': 'So we will see like a, once we start coding out, it will just be pulling that mock Tesla response.', 'start': 9703.782, 'duration': 4.404}, {'end': 9715.872, 'text': 'So now, and guys, I saw a question earlier of, are we pulling from the Google custom search API? Yes, this is coming from Google.', 'start': 9708.746, 'duration': 7.126}, {'end': 9718.494, 'text': "So it's going to be a complete build.", 'start': 9715.912, 'duration': 2.582}, {'end': 9721.777, 'text': "So with that said, next, what we're going to do is we're going to say div.", 'start': 9718.775, 'duration': 3.002}, {'end': 9723.739, 'text': 'So div.', 'start': 9723.318, 'duration': 0.421}, {'end': 9728.659, 'text': "it's going to be class name equals search page options.", 'start': 9723.739, 'duration': 4.92}, {'end': 9731.421, 'text': 'search page options like this, right?', 'start': 9728.659, 'duration': 2.762}], 'summary': 'Developing a search page with mock tesla response from google api', 'duration': 42.806, 'max_score': 9688.615, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM9688615.jpg'}, {'end': 9817.545, 'src': 'embed', 'start': 9789.785, 'weight': 2, 'content': [{'end': 9792.287, 'text': "So here I'm going to write, oh, thank you very much, Fennum.", 'start': 9789.785, 'duration': 2.502}, {'end': 9793.428, 'text': 'Just dropped a donation.', 'start': 9792.327, 'duration': 1.101}, {'end': 9794.509, 'text': 'Awesome, dude.', 'start': 9793.448, 'duration': 1.061}, {'end': 9798.953, 'text': "He goes, do you make Android apps too? We're going to be dropping React Native soon.", 'start': 9794.549, 'duration': 4.404}, {'end': 9801.796, 'text': 'So that will actually be both iOS and Android.', 'start': 9798.973, 'duration': 2.823}, {'end': 9807.54, 'text': "Yep So now what we're going to have is I'm going to split this into two containers.", 'start': 9802.596, 'duration': 4.944}, {'end': 9809.382, 'text': "I'm going to have options left and options right.", 'start': 9807.56, 'duration': 1.822}, {'end': 9813.78, 'text': 'All right, so options left is going to be inside of this container.', 'start': 9810.336, 'duration': 3.444}, {'end': 9814.962, 'text': "So it's going to div like this.", 'start': 9813.8, 'duration': 1.162}, {'end': 9817.545, 'text': "And then I'm going to have another one, options right.", 'start': 9816.023, 'duration': 1.522}], 'summary': 'Discussing react native for ios and android app development.', 'duration': 27.76, 'max_score': 9789.785, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM9789785.jpg'}, {'end': 9944.479, 'src': 'embed', 'start': 9916.701, 'weight': 3, 'content': [{'end': 9919.043, 'text': 'But once it goes full, but neither is Google.', 'start': 9916.701, 'duration': 2.342}, {'end': 9921.764, 'text': 'But this is still more responsive than Google.', 'start': 9919.643, 'duration': 2.121}, {'end': 9922.305, 'text': "So it's fine.", 'start': 9921.804, 'duration': 0.501}, {'end': 9923.446, 'text': 'I think people will get that.', 'start': 9922.345, 'duration': 1.101}, {'end': 9929.79, 'text': 'Now, one thing I was going to say was once you do want me to switch to it being bigger screen.', 'start': 9923.806, 'duration': 5.984}, {'end': 9932.672, 'text': "just in case there's something we need to show, then let me know and I'll do that.", 'start': 9929.79, 'duration': 2.882}, {'end': 9935.937, 'text': 'Dope Nice.', 'start': 9935.097, 'duration': 0.84}, {'end': 9936.497, 'text': "We're at 198.", 'start': 9936.137, 'duration': 0.36}, {'end': 9939.698, 'text': "We're $2 away from hitting the $200 donation goal.", 'start': 9936.497, 'duration': 3.201}, {'end': 9940.878, 'text': "We've never hit that.", 'start': 9939.978, 'duration': 0.9}, {'end': 9942.059, 'text': 'So that is epic.', 'start': 9940.898, 'duration': 1.161}, {'end': 9943.619, 'text': 'Thank you guys.', 'start': 9942.859, 'duration': 0.76}, {'end': 9944.479, 'text': "That's insane.", 'start': 9943.639, 'duration': 0.84}], 'summary': 'Reached 198, $2 away from $200 goal. epic achievement!', 'duration': 27.778, 'max_score': 9916.701, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM9916701.jpg'}, {'end': 10232.05, 'src': 'embed', 'start': 10205.915, 'weight': 4, 'content': [{'end': 10210.977, 'text': 'Some of the things that are on our agenda are LinkedIn clone, Facebook clone.', 'start': 10205.915, 'duration': 5.062}, {'end': 10213.875, 'text': 'um, what do we?', 'start': 10212.914, 'duration': 0.961}, {'end': 10214.695, 'text': 'what else do we got?', 'start': 10213.875, 'duration': 0.82}, {'end': 10218.017, 'text': "i think we're thinking about discord clone yep, yep.", 'start': 10214.695, 'duration': 3.322}, {'end': 10221.239, 'text': 'so we got some heavy hitter projects coming up.', 'start': 10218.017, 'duration': 3.222}, {'end': 10225.641, 'text': 'so make sure you subscribe to the channel, turn on the notification bell and, uh,', 'start': 10221.239, 'duration': 4.402}, {'end': 10230.144, 'text': 'keep helping us be the number one fastest growing coding channel on the planet.', 'start': 10225.641, 'duration': 4.503}, {'end': 10232.05, 'text': 'Yeah, exactly.', 'start': 10231.249, 'duration': 0.801}], 'summary': 'Agenda includes linkedin, facebook, and discord clones. aim to be the fastest growing coding channel.', 'duration': 26.135, 'max_score': 10205.915, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM10205915.jpg'}, {'end': 10278.778, 'src': 'embed', 'start': 10251.605, 'weight': 5, 'content': [{'end': 10257.449, 'text': 'I asked him about Tinder and TikTok and he already built TikTok clone completely, like already.', 'start': 10251.605, 'duration': 5.844}, {'end': 10259.751, 'text': "And it's using Express and other things.", 'start': 10257.689, 'duration': 2.062}, {'end': 10262.461, 'text': 'Nice, I love that, dude.', 'start': 10260.939, 'duration': 1.522}, {'end': 10263.282, 'text': 'Yeah, 100%, we could do that.', 'start': 10262.561, 'duration': 0.721}, {'end': 10265.184, 'text': "That'd be fun.", 'start': 10263.722, 'duration': 1.462}, {'end': 10276.536, 'text': "Travel with Zane says, wow, it's so scary how real it looks compared to the actual one.", 'start': 10267.486, 'duration': 9.05}, {'end': 10278.778, 'text': 'Beautiful work, Qazi and Sunny, we love you.', 'start': 10276.776, 'duration': 2.002}], 'summary': 'The individual has already built a tiktok clone using express and other technologies.', 'duration': 27.173, 'max_score': 10251.605, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM10251605.jpg'}], 'start': 9575.808, 'title': 'Building search page options', 'summary': 'Covers the development and implementation of search page options for a website, including layout structuring, react native for android app, google custom search api, adding icons and links, layout styling, and progress towards a donation goal.', 'chapters': [{'end': 9828.297, 'start': 9575.808, 'title': 'Building search page options', 'summary': 'Discusses the development of search page options for a website, focusing on structuring the page layout and the use of react native for android app development, while also mentioning the integration with the google custom search api.', 'duration': 252.489, 'highlights': ['The chapter discusses the development of search page options for a website, focusing on structuring the page layout and the use of React Native for Android app development, while also mentioning the integration with the Google custom search API.', "The team is excited about approaching 200, showing enthusiasm and engagement in the project's progress.", "The development involves mocking the response and integrating with the Google custom search API, which indicates the project's technical requirements and scope.", "The discussion also includes the plan to incorporate React Native for Android app development, expanding the project's platform compatibility and potential user base."]}, {'end': 10278.778, 'start': 9828.337, 'title': 'Building search page options', 'summary': 'Covers the process of implementing search page options, including adding icons and links, styling the layout, and preparing for future page building, while also mentioning the progress towards a donation goal and plans for upcoming projects.', 'duration': 450.441, 'highlights': ['The chapter covers the process of implementing search page options, including adding icons and links, styling the layout, and preparing for future page building, while also mentioning the progress towards a donation goal and plans for upcoming projects.', 'The speaker expresses gratitude for a donation and mentions receiving Uber Eats credits, emphasizing the impact on their fitness grind due to the high cost of clean eating.', 'The donation goal of $200 is mentioned, indicating progress towards the goal with a current amount of $198.', 'Upcoming projects such as a LinkedIn clone, Facebook clone, and Discord clone are discussed, with a call to action for viewers to subscribe and turn on notifications for future content.', 'Plans to build apps using the MERN stack (MongoDB, Express, React, Node.js) are mentioned, highlighting collaboration and the development of a TikTok clone using Express.', 'Positive feedback from viewers is shared, expressing appreciation for the work and the realistic appearance of the project being discussed.']}], 'duration': 702.97, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM9575808.jpg', 'highlights': ['The chapter discusses the development of search page options for a website, focusing on structuring the page layout and the use of React Native for Android app development, while also mentioning the integration with the Google custom search API.', "The development involves mocking the response and integrating with the Google custom search API, which indicates the project's technical requirements and scope.", "The discussion also includes the plan to incorporate React Native for Android app development, expanding the project's platform compatibility and potential user base.", 'The donation goal of $200 is mentioned, indicating progress towards the goal with a current amount of $198.', 'Upcoming projects such as a LinkedIn clone, Facebook clone, and Discord clone are discussed, with a call to action for viewers to subscribe and turn on notifications for future content.', 'Plans to build apps using the MERN stack (MongoDB, Express, React, Node.js) are mentioned, highlighting collaboration and the development of a TikTok clone using Express.']}, {'end': 11109.15, 'segs': [{'end': 10328.37, 'src': 'embed', 'start': 10301.411, 'weight': 4, 'content': [{'end': 10304.954, 'text': "guys, all we ask is if you're enjoying the video and you haven't already done so,", 'start': 10301.411, 'duration': 3.543}, {'end': 10309.237, 'text': "just please smash the thumbs up button and it'll just help the video get out to as many people,", 'start': 10304.954, 'duration': 4.283}, {'end': 10314.22, 'text': 'so that so many that that extra person would just get that value from this video.', 'start': 10309.237, 'duration': 4.983}, {'end': 10318.503, 'text': "yep, dope, nice, all right, let's keep this bad boy going.", 'start': 10314.22, 'duration': 4.283}, {'end': 10322.646, 'text': "so now what we're going to do is we're going to say we only want to render, so we're going to put a protective block in.", 'start': 10318.503, 'duration': 4.143}, {'end': 10328.37, 'text': "we're going to say only render the uh, the search results if you provided a search term.", 'start': 10322.646, 'duration': 5.724}], 'summary': 'Encourage viewers to like the video to reach more people. discussing rendering search results only with a search term.', 'duration': 26.959, 'max_score': 10301.411, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM10301411.jpg'}, {'end': 10553.405, 'src': 'embed', 'start': 10506.024, 'weight': 1, 'content': [{'end': 10509.125, 'text': "It's twitch.tv slash cleverprogrammer.", 'start': 10506.024, 'duration': 3.101}, {'end': 10510.466, 'text': 'This is the URL.', 'start': 10509.465, 'duration': 1.001}, {'end': 10518.149, 'text': "So if you guys can just go and take a look at that and just see if that's working properly and having weird feedback or issues, cause that'd be huge.", 'start': 10511.126, 'duration': 7.023}, {'end': 10525.293, 'text': 'Cause we wanna grow on Twitch and we were having trouble last time cause our stream just kept giving us tons of errors.', 'start': 10518.189, 'duration': 7.104}, {'end': 10529.327, 'text': 'Yeah That would be massively useful, guys.', 'start': 10526.485, 'duration': 2.842}, {'end': 10534.911, 'text': "Nice So let's go ahead.", 'start': 10529.347, 'duration': 5.564}, {'end': 10536.853, 'text': 'So we saw we were pulling the information.', 'start': 10534.971, 'duration': 1.882}, {'end': 10539.415, 'text': 'We had data, search information, formatted search time.', 'start': 10536.893, 'duration': 2.522}, {'end': 10540.656, 'text': 'There we go.', 'start': 10540.175, 'duration': 0.481}, {'end': 10547.321, 'text': "And now what we're going to do is we're also going to say for, and rather than here doing Tesla, we're going to say term.", 'start': 10541.316, 'duration': 6.005}, {'end': 10549.462, 'text': 'So whatever the search term was.', 'start': 10547.341, 'duration': 2.121}, {'end': 10553.405, 'text': 'All we can do here is we can replace term here, and I can actually go up and protect term.', 'start': 10549.842, 'duration': 3.563}], 'summary': 'Troubleshooting stream errors on twitch.tv/cleverprogrammer to improve growth and user experience.', 'duration': 47.381, 'max_score': 10506.024, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM10506024.jpg'}, {'end': 10827.246, 'src': 'embed', 'start': 10793.032, 'weight': 0, 'content': [{'end': 10795.533, 'text': 'And then the last thing for this is we want to snip it.', 'start': 10793.032, 'duration': 2.501}, {'end': 10801.939, 'text': 'So p tag, So a P tag, which has a class name of results snippet.', 'start': 10795.854, 'duration': 6.085}, {'end': 10803.56, 'text': 'So this is actually something pretty cool.', 'start': 10801.959, 'duration': 1.601}, {'end': 10811.042, 'text': "Uh, the Google API provides a snippet back when it basically what it does is they'll have some information like a description or something,", 'start': 10804.14, 'duration': 6.902}, {'end': 10812.882, 'text': "and they'll actually go ahead and they'll truncate it.", 'start': 10811.042, 'duration': 1.84}, {'end': 10818.063, 'text': "So I have dot, dot, dot, if it's too big, right? So item dot snippet here.", 'start': 10812.922, 'duration': 5.141}, {'end': 10827.246, 'text': 'So now if I save this now, what we can see is cause I think you need to refresh.', 'start': 10818.224, 'duration': 9.022}], 'summary': 'Google api provides a truncated snippet with description, shown as results snippet class, truncates with dot, dot, dot if too large.', 'duration': 34.214, 'max_score': 10793.032, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM10793032.jpg'}, {'end': 10917.703, 'src': 'embed', 'start': 10884.445, 'weight': 2, 'content': [{'end': 10885.206, 'text': 'Wow Thank you.', 'start': 10884.445, 'duration': 0.761}, {'end': 10887.126, 'text': 'Thank you.', 'start': 10885.846, 'duration': 1.28}, {'end': 10888.787, 'text': "He's like stream is lit.", 'start': 10887.566, 'duration': 1.221}, {'end': 10891.027, 'text': 'And this is amazing because he might have.', 'start': 10889.227, 'duration': 1.8}, {'end': 10893.974, 'text': 'Yes, we broke 200.', 'start': 10891.227, 'duration': 2.747}, {'end': 10894.954, 'text': 'A donation.', 'start': 10893.974, 'duration': 0.98}, {'end': 10898.436, 'text': "Let's go.", 'start': 10895.074, 'duration': 3.362}, {'end': 10900.837, 'text': 'Wow Thank you, you guys.', 'start': 10898.476, 'duration': 2.361}, {'end': 10902.817, 'text': 'We really, really appreciate it.', 'start': 10901.017, 'duration': 1.8}, {'end': 10903.798, 'text': 'That is awesome.', 'start': 10902.938, 'duration': 0.86}, {'end': 10904.258, 'text': 'Thank you.', 'start': 10903.858, 'duration': 0.4}, {'end': 10906.259, 'text': 'Yeah Huge.', 'start': 10905.298, 'duration': 0.961}, {'end': 10908.1, 'text': "Wow That's a mile.", 'start': 10907.119, 'duration': 0.981}, {'end': 10908.88, 'text': "That's a milestone.", 'start': 10908.16, 'duration': 0.72}, {'end': 10909.84, 'text': "That's our first, honey.", 'start': 10908.94, 'duration': 0.9}, {'end': 10912.721, 'text': 'Yeah Two hundred dollars did insane.', 'start': 10910.781, 'duration': 1.94}, {'end': 10917.703, 'text': 'Wow We should invest it into doing giveaways for everybody for sure.', 'start': 10912.761, 'duration': 4.942}], 'summary': 'Celebrating reaching $200 in donations for giveaways.', 'duration': 33.258, 'max_score': 10884.445, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM10884445.jpg'}], 'start': 10278.878, 'title': 'Developing google-like search page and api integration', 'summary': 'Covers the development of a google-like search page with protective measures, data retrieval, google api integration with javascript, donation milestones, result count, and achieving over $200 in donations.', 'chapters': [{'end': 10534.911, 'start': 10278.878, 'title': 'Google-like search page development', 'summary': 'Discusses the development of a google-like search page, including protective measures and data retrieval, aiming to provide value to as many viewers as possible.', 'duration': 256.033, 'highlights': ['The development of a Google-like search page with protective measures and data retrieval. The chapter discusses the process of creating a search page similar to Google, implementing protective measures to render search results only if a search term is provided, and retrieving data such as result count and search time from the response.', 'Encouraging viewers to support the video by smashing the thumbs up button to reach more people. Encouraging viewers to like the video to increase its reach and provide value to more people.', "Requesting feedback on Twitch functionality to improve the streaming experience and grow the audience. Seeking feedback from viewers on the functionality of Twitch to address previous streaming errors and enhance the audience's experience."]}, {'end': 11109.15, 'start': 10534.971, 'title': 'Google api integration and styling', 'summary': 'Discusses the integration of google api with javascript to fetch search results and implement styling, including donation milestones, result count, and styling for search results, achieving over $200 in donations.', 'duration': 574.179, 'highlights': ['The chapter discusses the integration of Google API with JavaScript to fetch search results and implement styling The transcript details the process of using the Google API to fetch search results and the implementation of styling using JavaScript.', 'Donation milestones, result count, and styling for search results, achieving over $200 in donations The transcript mentions achieving over $200 in donations, donation milestones, and implementing styling for search results, including result count and styling elements.', 'Optional chaining used to prevent crashes in mapping through items The use of optional chaining is highlighted as a measure to prevent crashes when mapping through items, ensuring smooth execution.']}], 'duration': 830.272, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM10278878.jpg', 'highlights': ['The chapter discusses the integration of Google API with JavaScript to fetch search results and implement styling.', 'The development of a Google-like search page with protective measures and data retrieval.', 'Achieving over $200 in donations, donation milestones, and implementing styling for search results, including result count and styling elements.', 'Requesting feedback on Twitch functionality to improve the streaming experience and grow the audience.', 'Encouraging viewers to support the video by smashing the thumbs up button to reach more people.']}, {'end': 12300.212, 'segs': [{'end': 11136.512, 'src': 'embed', 'start': 11109.19, 'weight': 7, 'content': [{'end': 11111.913, 'text': 'I remember when me and Kazi started, we got $4.', 'start': 11109.19, 'duration': 2.723}, {'end': 11114.635, 'text': 'I think it was in the donation and we were like, Whoa.', 'start': 11111.913, 'duration': 2.722}, {'end': 11118.578, 'text': "Yeah We lost our minds at four cause that was the most that we've ever done.", 'start': 11114.815, 'duration': 3.763}, {'end': 11121.02, 'text': 'I was like, damn bro.', 'start': 11119.098, 'duration': 1.922}, {'end': 11126.705, 'text': 'Exactly Right.', 'start': 11123.702, 'duration': 3.003}, {'end': 11135.051, 'text': "So now what we're going to do is we have the final thing so that that image right, so that image that we were talking about.", 'start': 11126.725, 'duration': 8.326}, {'end': 11136.512, 'text': 'so what we need to do is here.', 'start': 11135.051, 'duration': 1.461}], 'summary': 'Started with $4 donation, the most ever, aiming for final image.', 'duration': 27.322, 'max_score': 11109.19, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM11109190.jpg'}, {'end': 11298.654, 'src': 'embed', 'start': 11270.179, 'weight': 2, 'content': [{'end': 11272.321, 'text': 'Yeah, that little clean image.', 'start': 11270.179, 'duration': 2.142}, {'end': 11273.821, 'text': 'Yep Yeah.', 'start': 11272.341, 'duration': 1.48}, {'end': 11277.864, 'text': 'Now to finish it, we go back to our code, change this back to term.', 'start': 11274.082, 'duration': 3.782}, {'end': 11282.006, 'text': 'We go back to our mock and we take it away from the mock.', 'start': 11278.504, 'duration': 3.502}, {'end': 11283.707, 'text': 'So this one was the mock API call.', 'start': 11282.046, 'duration': 1.661}, {'end': 11286.729, 'text': 'So this one was the mock API call.', 'start': 11283.767, 'duration': 2.962}, {'end': 11290.227, 'text': 'And we basically undo and we keep the live API call.', 'start': 11287.645, 'duration': 2.582}, {'end': 11291.188, 'text': 'All right.', 'start': 11290.247, 'duration': 0.941}, {'end': 11292.669, 'text': 'Then we save it.', 'start': 11292.008, 'duration': 0.661}, {'end': 11297.233, 'text': 'And now, Fuzzy, go ahead and click the Google button firstly.', 'start': 11293.85, 'duration': 3.383}, {'end': 11298.654, 'text': 'All right.', 'start': 11298.253, 'duration': 0.401}], 'summary': 'Switched from mock to live api call for google button.', 'duration': 28.475, 'max_score': 11270.179, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM11270179.jpg'}, {'end': 11363.27, 'src': 'embed', 'start': 11328.206, 'weight': 1, 'content': [{'end': 11331.487, 'text': "That's insane, right? Let's type in Clever Programmer, Google clone.", 'start': 11328.206, 'duration': 3.281}, {'end': 11335.19, 'text': "Let's see if it comes up.", 'start': 11334.209, 'duration': 0.981}, {'end': 11342.593, 'text': "Damn Let's build a, let's it's too good.", 'start': 11336.23, 'duration': 6.363}, {'end': 11344.054, 'text': 'Right here.', 'start': 11342.613, 'duration': 1.441}, {'end': 11345.335, 'text': 'I can see the image.', 'start': 11344.474, 'duration': 0.861}, {'end': 11346.516, 'text': 'I can see the image too.', 'start': 11345.575, 'duration': 0.941}, {'end': 11347.856, 'text': 'I can zoom in on that image.', 'start': 11346.536, 'duration': 1.32}, {'end': 11352.018, 'text': "That's programmer WhatsApp.", 'start': 11349.957, 'duration': 2.061}, {'end': 11353.039, 'text': "Let's check that.", 'start': 11352.219, 'duration': 0.82}, {'end': 11353.859, 'text': 'Type that in.', 'start': 11353.259, 'duration': 0.6}, {'end': 11356.621, 'text': "Let's go.", 'start': 11354.98, 'duration': 1.641}, {'end': 11360.523, 'text': 'Awesome Right? Very.', 'start': 11358.322, 'duration': 2.201}, {'end': 11363.27, 'text': "So it's super clean.", 'start': 11362.389, 'duration': 0.881}], 'summary': 'Exploring a google clone and programmer whatsapp, expressing excitement about their quality and cleanliness.', 'duration': 35.064, 'max_score': 11328.206, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM11328206.jpg'}, {'end': 11521.52, 'src': 'embed', 'start': 11489.11, 'weight': 0, 'content': [{'end': 11491.731, 'text': 'now, you guys, this is unbelievable.', 'start': 11489.11, 'duration': 2.621}, {'end': 11504.687, 'text': "it's a new record, new record, damn global donation, crazy guys.", 'start': 11491.731, 'duration': 12.956}, {'end': 11507.93, 'text': "okay, i see the problem that's happening with the twitch.", 'start': 11504.687, 'duration': 3.243}, {'end': 11508.991, 'text': "i'll fix it on the next.", 'start': 11507.93, 'duration': 1.061}, {'end': 11519.178, 'text': 'one big man says this guy said chief keith, i know, man, i just saw chf and i just thought chief keith, nice.', 'start': 11508.991, 'duration': 10.187}, {'end': 11521.52, 'text': 'so guys, with that said, we could do it.', 'start': 11519.178, 'duration': 2.342}], 'summary': 'New record global donation reached, resolving twitch issue, aiming for success', 'duration': 32.41, 'max_score': 11489.11, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM11489110.jpg'}, {'end': 11685.763, 'src': 'embed', 'start': 11657.26, 'weight': 3, 'content': [{'end': 11660.542, 'text': 'He goes, deploy the Google clone in Firebase owned by Google.', 'start': 11657.26, 'duration': 3.282}, {'end': 11662.143, 'text': "Let's go.", 'start': 11660.842, 'duration': 1.301}, {'end': 11664.565, 'text': 'All right, I like it, I like it.', 'start': 11662.163, 'duration': 2.402}, {'end': 11668.628, 'text': "All right guys, I'm gonna speed through this before all these other donations start coming in.", 'start': 11664.585, 'duration': 4.043}, {'end': 11675.093, 'text': 'I want this app to be live for all of you beautiful people to see and the first hundred people will get to actually use it.', 'start': 11668.728, 'duration': 6.365}, {'end': 11677.775, 'text': 'After the first hundred people, you will not get to use it.', 'start': 11675.213, 'duration': 2.562}, {'end': 11680.137, 'text': "Please don't spam the search bar.", 'start': 11678.035, 'duration': 2.102}, {'end': 11682.159, 'text': "With that said, let's do it.", 'start': 11680.537, 'duration': 1.622}, {'end': 11685.763, 'text': "So we're going to do Firebase init.", 'start': 11682.819, 'duration': 2.944}], 'summary': 'Deploy google clone in firebase for first 100 users.', 'duration': 28.503, 'max_score': 11657.26, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM11657260.jpg'}, {'end': 11873.157, 'src': 'embed', 'start': 11846.676, 'weight': 4, 'content': [{'end': 11851.22, 'text': 'I would have make my donation, but that option is not supported in my country.', 'start': 11846.676, 'duration': 4.544}, {'end': 11854.303, 'text': 'Well, guess what? Thank you so much.', 'start': 11851.86, 'duration': 2.443}, {'end': 11859.207, 'text': 'Regardless of whether you donate or not, we appreciate everybody equally.', 'start': 11854.503, 'duration': 4.704}, {'end': 11863.932, 'text': 'Whether you donate $100 or $1, we appreciate all of you.', 'start': 11859.848, 'duration': 4.084}, {'end': 11865.374, 'text': 'So thank you so much.', 'start': 11864.453, 'duration': 0.921}, {'end': 11867.576, 'text': 'Even the sentiment really, really matters.', 'start': 11865.694, 'duration': 1.882}, {'end': 11870.098, 'text': "We just love your guys' appreciation and love.", 'start': 11867.996, 'duration': 2.102}, {'end': 11870.559, 'text': 'So thank you.', 'start': 11870.118, 'duration': 0.441}, {'end': 11873.157, 'text': 'All right.', 'start': 11872.596, 'duration': 0.561}], 'summary': 'Donations appreciated equally, regardless of amount or location. thank you for the support.', 'duration': 26.481, 'max_score': 11846.676, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM11846676.jpg'}, {'end': 11995.824, 'src': 'embed', 'start': 11943.557, 'weight': 5, 'content': [{'end': 11945.698, 'text': "Few platforms I'm gonna shoot out rapidly.", 'start': 11943.557, 'duration': 2.141}, {'end': 11947.199, 'text': 'CodeMentor is a good one.', 'start': 11946.018, 'duration': 1.181}, {'end': 11948.859, 'text': 'Upwork is another great one.', 'start': 11947.559, 'duration': 1.3}, {'end': 11952.081, 'text': 'Outside of that, build a solid network of people.', 'start': 11949.219, 'duration': 2.862}, {'end': 11955.542, 'text': "There's a reason why Frank is inside of profit with JavaScript.", 'start': 11952.521, 'duration': 3.021}, {'end': 11960.545, 'text': "So for example, that's another area you guys could join to build a deep network of people.", 'start': 11955.962, 'duration': 4.583}, {'end': 11962.047, 'text': "You don't have to join that program.", 'start': 11960.726, 'duration': 1.321}, {'end': 11965.449, 'text': 'There are many other places, but those are a few resources.', 'start': 11962.067, 'duration': 3.382}, {'end': 11967.591, 'text': "With that said, I'm just going to continue and deploy guys.", 'start': 11965.469, 'duration': 2.122}, {'end': 11969.912, 'text': "Cause I don't want to, I know if you're watching, this is replay.", 'start': 11967.631, 'duration': 2.281}, {'end': 11971.493, 'text': 'You kind of want to just get to the deploy.', 'start': 11969.932, 'duration': 1.561}, {'end': 11973.695, 'text': "So let's go ahead and do it.", 'start': 11971.994, 'duration': 1.701}, {'end': 11976.497, 'text': 'Yeah All right.', 'start': 11974.095, 'duration': 2.402}, {'end': 11988.117, 'text': "So I'm going to hit deploy and It's going to be deployed in five, four, three, two, one.", 'start': 11976.517, 'duration': 11.6}, {'end': 11992.241, 'text': 'And Oh my God.', 'start': 11989.198, 'duration': 3.043}, {'end': 11995.824, 'text': 'Oh my God.', 'start': 11992.261, 'duration': 3.563}], 'summary': 'Recommended platforms: codementor, upwork. build a strong network for success.', 'duration': 52.267, 'max_score': 11943.557, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM11943557.jpg'}, {'end': 12229.362, 'src': 'embed', 'start': 12201.696, 'weight': 8, 'content': [{'end': 12205.178, 'text': 'so we appreciate you guys even more in this video.', 'start': 12201.696, 'duration': 3.482}, {'end': 12206.579, 'text': 'You guys stuck through the end.', 'start': 12205.539, 'duration': 1.04}, {'end': 12209.466, 'text': 'That is huge, you guys.', 'start': 12208.365, 'duration': 1.101}, {'end': 12216.812, 'text': 'Thank you so much for sticking through everything, for being here, for not leaving during those, because yeah, that was quite a lot of work.', 'start': 12209.666, 'duration': 7.146}, {'end': 12222.717, 'text': 'And yeah, guys, if you want, definitely jump into this free training that we have for you.', 'start': 12217.433, 'duration': 5.284}, {'end': 12224.638, 'text': 'The link is in the description below.', 'start': 12223.137, 'duration': 1.501}, {'end': 12227.441, 'text': "It's an epic one hour long webinar.", 'start': 12224.819, 'duration': 2.622}, {'end': 12229.362, 'text': "I think you're going to get a lot of value out of it.", 'start': 12227.521, 'duration': 1.841}], 'summary': 'Appreciation for viewers sticking through video; promoting free one-hour webinar for added value.', 'duration': 27.666, 'max_score': 12201.696, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM12201696.jpg'}], 'start': 11109.19, 'title': 'Google clone deployment and interaction', 'summary': 'Details the deployment process of a google clone, receiving over 210 dollars in global donations, and interaction with the audience, emphasizing the importance of networking and the energetic engagement of the viewers.', 'chapters': [{'end': 11389.29, 'start': 11109.19, 'title': 'Google clone final touch', 'summary': 'Discusses the final adjustments made to a google clone, including adding images to search results and switching to live api calls, resulting in a clean and seamless user experience.', 'duration': 280.1, 'highlights': ['The Google clone was adjusted to display images next to search results, providing a polished and visually appealing user interface. The speaker added CSS rules to display small thumbnail images next to the search results, creating a visually appealing and polished user interface.', 'The code was modified to switch from mock API calls to live API calls, resulting in a seamless user experience without the need for page refresh. The transition from mock API calls to live API calls enabled a seamless user experience without page refresh, enhancing the overall usability of the Google clone.', "Initially starting with a humble $4 donation, the speaker reminisces about the humble beginnings of the project. The speaker recalls the humble beginnings of the project, starting with a modest $4 donation, highlighting the journey and progress made from the project's inception."]}, {'end': 11873.157, 'start': 11389.31, 'title': 'Google clone deployment and donations', 'summary': "Documents the deployment process of a google clone, receiving global donations totaling over 210 dollars and the team's interaction with the audience and their gratitude for the support, while providing step-by-step instructions for deploying the app.", 'duration': 483.847, 'highlights': ['The team received global donations totaling over 210 dollars, setting a new record for donations. The team received donations in Mexican pesos, Swiss francs, euros, and pounds, totaling over 210 dollars, marking a new record for donations.', 'Step-by-step instructions were provided for deploying the Google clone, including installing Firebase tools and initiating the deployment process. The speaker provided detailed instructions, including installing Firebase tools, initiating Firebase login, and performing the deployment process, demonstrating a thorough guide for deploying the Google clone.', 'The team expressed gratitude for the global donations and audience support, emphasizing appreciation for both financial contributions and sentiments. The team expressed gratitude for the global donations, regardless of the amount, and emphasized the importance of audience appreciation and support, creating a positive and thankful atmosphere throughout the transcript.']}, {'end': 12300.212, 'start': 11873.417, 'title': 'Livestream deployment and interaction', 'summary': 'Covers the deployment of a project on firebase, interaction with the audience, and recommendations for freelance platforms, with codementor and upwork mentioned as viable options, while also emphasizing the importance of networking. the deployment process and the subsequent interaction with the audience are detailed, highlighting the energy and engagement of the viewers, along with the appreciation for donations and the encouragement for viewers to participate in a free training webinar.', 'duration': 426.795, 'highlights': ['The deployment process and subsequent interaction with the audience are detailed, highlighting the energy and engagement of the viewers. The chapter covers the deployment of a project on Firebase, interaction with the audience, and recommendations for freelance platforms.', 'Appreciation for donations and the encouragement for viewers to participate in a free training webinar. Emphasizes the appreciation for donations and encourages viewers to participate in a free training webinar.', 'Recommendations for freelance platforms, with CodeMentor and Upwork mentioned as viable options, while also emphasizing the importance of networking. Recommends freelance platforms, mentioning CodeMentor and Upwork as viable options, while emphasizing the importance of networking.']}], 'duration': 1191.022, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DAWWf7q8sqM/pics/DAWWf7q8sqM11109190.jpg', 'highlights': ['The team received global donations totaling over 210 dollars, setting a new record for donations.', 'The Google clone was adjusted to display images next to search results, providing a polished and visually appealing user interface.', 'The code was modified to switch from mock API calls to live API calls, resulting in a seamless user experience without the need for page refresh.', 'The speaker provided detailed instructions for deploying the Google clone, demonstrating a thorough guide for the process.', 'The team expressed gratitude for the global donations and audience support, emphasizing appreciation for both financial contributions and sentiments.', 'The deployment process and subsequent interaction with the audience are detailed, highlighting the energy and engagement of the viewers.', 'Recommendations for freelance platforms, with CodeMentor and Upwork mentioned as viable options, while also emphasizing the importance of networking.', "Initially starting with a humble $4 donation, the speaker reminisces about the humble beginnings of the project, highlighting the journey and progress made from the project's inception.", 'Appreciation for donations and the encouragement for viewers to participate in a free training webinar.']}], 'highlights': ["The Google clone app retrieves real Google results using the Google custom search API, showcasing over 4 trillion results for 'Tesla'.", 'A participant landed a job worth 5 lakh rupees at the age of 14, attributing it to the skills learned.', 'The channel aims to produce 5,000 developers with full-time jobs this year and 10,000 next year, emphasizing on helping the most developers globally.', "The tutorial demonstrates the use of Google's custom search API to pull live information from Google, providing a practical example of its functionality.", 'The process of debugging and refactoring CSS, including fixing import issues and improving the design of the web page, with a focus on home.css and index.css.', 'The chapter emphasizes the reusability of the search component on the results page.', 'Celebration of a six-figure consulting project success and plans to help more people land jobs, aiming for 5,000 and then 10,000 job placements.', 'The course is currently underpriced, with plans to raise the price to 5,000 to 10,000, making it accessible to more people while providing substantial value.', 'The chapter details the process of using the Google API to retrieve search results.', 'The team received global donations totaling over 210 dollars, setting a new record for donations.', 'The Google clone was adjusted to display images next to search results, providing a polished and visually appealing user interface.']}