title
🔴 Build a Slack Clone in React JS (Realtime chat app using Firebase)

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=9-aug-slack-clone-sonny-qazi&utm_campaign=live-everyday&utm_term=warm&utm_affiliate_link=true In this FREE LIVE training, Qazi & Sonny will show you how to build a Slack Clone with REACT JS (Real-time chat app with 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=9-aug-slack-clone-sonny-qazi&utm_campaign=live-everyday&utm_term=warm&utm_affiliate_link=true&course_name=REACT #javascript #bootstrap5 #reactjs Biz / Sponsorships 👉 https://www.cleverprogrammer.com/partnerships

detail
{'title': '🔴 Build a Slack Clone in React JS (Realtime chat app using Firebase)', 'heatmap': [{'end': 4444.053, 'start': 4282.354, 'weight': 0.746}, {'end': 5470.862, 'start': 5167.148, 'weight': 0.869}, {'end': 6946.73, 'start': 6794.732, 'weight': 0.841}, {'end': 8429.821, 'start': 8123.106, 'weight': 0.836}, {'end': 9610.017, 'start': 9455.885, 'weight': 0.882}, {'end': 9904.296, 'start': 9753.88, 'weight': 0.909}, {'end': 12715.485, 'start': 12554.622, 'weight': 0.725}, {'end': 13451.848, 'start': 13300.872, 'weight': 0.733}, {'end': 13894.328, 'start': 13744.157, 'weight': 0.817}], 'summary': 'Tutorial series covers building a slack clone in react js, including real-time channel addition, google and firebase authentication, css styling, database setup, real-time firebase integration, dynamic url implementation, real-time room details update, front-end development, firebase integration, implementing data layers, google authentication, chat input, and real-time messaging app development with firebase integration and deployment.', 'chapters': [{'end': 694.934, 'segs': [{'end': 74.703, 'src': 'embed', 'start': 27.389, 'weight': 2, 'content': [{'end': 31.091, 'text': "It's gonna be a Slack app that you're gonna be building from scratch.", 'start': 27.389, 'duration': 3.702}, {'end': 33.772, 'text': 'So hopefully you guys are super excited about that.', 'start': 31.491, 'duration': 2.281}, {'end': 38.475, 'text': "It's gonna have a few key components that we wanna highlight here.", 'start': 34.513, 'duration': 3.962}, {'end': 42.517, 'text': "So first I'm just gonna demo it and then we're gonna walk through it.", 'start': 39.275, 'duration': 3.242}, {'end': 44.898, 'text': 'So you can see how it just hit sign in.', 'start': 42.597, 'duration': 2.301}, {'end': 46.579, 'text': "So it's sign in functionality.", 'start': 45.218, 'duration': 1.361}, {'end': 50.401, 'text': "And now I'm gonna go through the entire authentication process.", 'start': 47.2, 'duration': 3.201}, {'end': 56.305, 'text': 'And as soon as I go through the authentication process, you guys can see I am in the Instagram channel.', 'start': 51.942, 'duration': 4.363}, {'end': 62.408, 'text': "I can go to the YouTube channel, right? It's completely mobile responsive.", 'start': 56.785, 'duration': 5.623}, {'end': 65.39, 'text': 'And what else can we do, Sunny?', 'start': 63.649, 'duration': 1.741}, {'end': 66.811, 'text': 'We can even add channels, right?', 'start': 65.43, 'duration': 1.381}, {'end': 71.401, 'text': "Yes, you can add a channel and it'll dynamically pop in and everything's real time guys.", 'start': 67.679, 'duration': 3.722}, {'end': 74.703, 'text': 'Yep, everything is real time, you guys.', 'start': 72.141, 'duration': 2.562}], 'summary': 'Building a slack app with sign-in, authentication, and real-time features.', 'duration': 47.314, 'max_score': 27.389, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs27389.jpg'}, {'end': 345.122, 'src': 'embed', 'start': 294.677, 'weight': 0, 'content': [{'end': 298.719, 'text': "It's going to make the app look beautiful and very nice.", 'start': 294.677, 'duration': 4.042}, {'end': 304.463, 'text': 'We also have CSS variables in this build.', 'start': 298.98, 'duration': 5.483}, {'end': 305.424, 'text': 'Got it.', 'start': 304.983, 'duration': 0.441}, {'end': 308.505, 'text': "We're going to be highlighting CSS variables as well for you guys.", 'start': 305.464, 'duration': 3.041}, {'end': 309.626, 'text': "That's powerful.", 'start': 308.986, 'duration': 0.64}, {'end': 314.866, 'text': "Yeah And I'm imagining we're going to be using Flexbox.", 'start': 310.627, 'duration': 4.239}, {'end': 316.927, 'text': 'Yep So we have Flexbox.', 'start': 315.706, 'duration': 1.221}, {'end': 322.31, 'text': "And then once we've built everything, we actually are going to go ahead and use Firebase Hosting to deploy the app.", 'start': 317.347, 'duration': 4.963}, {'end': 326.032, 'text': 'Beautiful Got it.', 'start': 324.171, 'duration': 1.861}, {'end': 327.493, 'text': 'And is there anything?', 'start': 326.512, 'duration': 0.981}, {'end': 330.815, 'text': 'are we doing anything with the real-time database, with this app, or no?', 'start': 327.493, 'duration': 3.322}, {'end': 335.558, 'text': 'Yes, so the entire chat is powered by, not just the chat.', 'start': 331.556, 'duration': 4.002}, {'end': 339.96, 'text': "You saw when Kazi added, so we can see like there's a bunch of channels that got added.", 'start': 335.918, 'duration': 4.042}, {'end': 345.122, 'text': 'All of those are dynamically being pulled in with the real-time database.', 'start': 340.68, 'duration': 4.442}], 'summary': 'The app will utilize css variables and flexbox, and will be deployed using firebase hosting. the chat functionality is powered by a real-time database.', 'duration': 50.445, 'max_score': 294.677, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs294677.jpg'}, {'end': 672.159, 'src': 'embed', 'start': 643.991, 'weight': 1, 'content': [{'end': 656.231, 'text': "Actually I'm gonna just change my email and And now what I will do is I'm gonna click here, go to console, and then I'm good to go.", 'start': 643.991, 'duration': 12.24}, {'end': 657.992, 'text': "I'm good to go and get started.", 'start': 656.431, 'duration': 1.561}, {'end': 664.175, 'text': 'And you know, guys, what Firebase is basically a set of tools that Google have put together.', 'start': 658.532, 'duration': 5.643}, {'end': 672.159, 'text': "How I like to think of it is it's a, you know, if I were to give them like a tagline, I would just say it's an easy AWS.", 'start': 664.475, 'duration': 7.684}], 'summary': 'Exploring firebase tools for development, comparing it to an easy aws.', 'duration': 28.168, 'max_score': 643.991, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs643991.jpg'}], 'start': 0.229, 'title': 'Building slack app from scratch and real-time channel addition', 'summary': 'Covers building a slack app from scratch with sign-in functionality and an entire authentication process, and it also showcases the real-time addition of channels in a slack clone app with dynamic pop-ins and authentication using google and firebase. the technologies used include material ui, flexbox, google user authentication, css variables, react context api, and react router.', 'chapters': [{'end': 50.401, 'start': 0.229, 'title': 'Building slack app from scratch', 'summary': 'Covers building a slack app from scratch with sign-in functionality and an entire authentication process.', 'duration': 50.172, 'highlights': ['The chapter covers building a Slack app from scratch with sign-in functionality and an entire authentication process.', 'The app will have sign-in functionality and an entire authentication process.']}, {'end': 694.934, 'start': 51.942, 'title': 'Real-time channel addition and technology overview', 'summary': 'Showcases the real-time addition of channels in a slack clone app with dynamic pop-ins and authentication using google and firebase, while highlighting the technologies used including material ui, flexbox, google user authentication, css variables, react context api, and react router.', 'duration': 642.992, 'highlights': ['The chapter showcases the real-time addition of channels in a Slack clone app with dynamic pop-ins and authentication using Google and Firebase.', 'Material UI, Flexbox, Google user authentication, CSS variables, React Context API, and React Router are highlighted as the technologies used in the app.', 'The real-time database powers the entire chat and dynamically pulls in channels, with 500+ live viewers and real-time interactions demonstrated during the session.', 'The chapter emphasizes the mobile responsiveness of the app, supporting Google authentication, and engaging 500+ live viewers in real time.', 'The Firebase platform is highlighted as an easy-to-use tool for authentication, hosting, and machine learning, providing a friendly alternative to AWS.']}], 'duration': 694.705, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs229.jpg', 'highlights': ['The real-time database powers the entire chat and dynamically pulls in channels, with 500+ live viewers and real-time interactions demonstrated during the session.', 'The Firebase platform is highlighted as an easy-to-use tool for authentication, hosting, and machine learning, providing a friendly alternative to AWS.', 'The chapter emphasizes the mobile responsiveness of the app, supporting Google authentication, and engaging 500+ live viewers in real time.', 'Material UI, Flexbox, Google user authentication, CSS variables, React Context API, and React Router are highlighted as the technologies used in the app.', 'The chapter covers building a Slack app from scratch with sign-in functionality and an entire authentication process.']}, {'end': 1589.462, 'segs': [{'end': 733.515, 'src': 'embed', 'start': 694.974, 'weight': 0, 'content': [{'end': 696.835, 'text': "So it's literally the simple AWS.", 'start': 694.974, 'duration': 1.861}, {'end': 698.236, 'text': 'Yep Awesome.', 'start': 697.455, 'duration': 0.781}, {'end': 701.438, 'text': "For project name, I'm just going to go ahead and type in Slack.", 'start': 698.256, 'duration': 3.182}, {'end': 703.459, 'text': "clone and we're gonna hit, continue.", 'start': 701.738, 'duration': 1.721}, {'end': 706.101, 'text': 'and, by the way, you guys, this is amazing.', 'start': 703.459, 'duration': 2.642}, {'end': 709.183, 'text': "we're currently at eight 900 viewers.", 'start': 706.101, 'duration': 3.082}, {'end': 710.784, 'text': 'so that is brilliant.', 'start': 709.183, 'duration': 1.601}, {'end': 713.886, 'text': "and i'm sorry if you're watching, this is a replay and you're annoyed.", 'start': 710.784, 'duration': 3.102}, {'end': 720.57, 'text': 'i apologize about that, but we just love the community and we love getting excited with the community, the energy you guys give us.', 'start': 713.886, 'duration': 6.684}, {'end': 722.271, 'text': "so we can't lose that, all right.", 'start': 720.57, 'duration': 1.701}, {'end': 725.132, 'text': "so yeah, exactly, Can't lose that.", 'start': 722.271, 'duration': 2.861}, {'end': 726.533, 'text': "Let's try and hit 1,000.", 'start': 725.392, 'duration': 1.141}, {'end': 728.393, 'text': "I think we're going to break 1,000 today, dude.", 'start': 726.533, 'duration': 1.86}, {'end': 729.253, 'text': 'Right? 930 already.', 'start': 728.413, 'duration': 0.84}, {'end': 733.515, 'text': 'Yeah I love everybody who comes in, you know, repeatedly.', 'start': 729.754, 'duration': 3.761}], 'summary': 'Excited about aws project with 900 viewers aiming for 1,000, appreciating community support.', 'duration': 38.541, 'max_score': 694.974, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs694974.jpg'}, {'end': 796.833, 'src': 'embed', 'start': 755.14, 'weight': 3, 'content': [{'end': 764.383, 'text': "so tomorrow, the same time, we're going to be going live and talking about full stack developer roadmap from 2020 to 2021.", 'start': 755.14, 'duration': 9.243}, {'end': 769.824, 'text': 'so if you have, you know, dreams of becoming a web developer, you want to be highly paid.', 'start': 764.383, 'duration': 5.441}, {'end': 771.365, 'text': "we're going to be talking about that tomorrow.", 'start': 769.824, 'duration': 1.541}, {'end': 780.799, 'text': 'so make sure you put that on your calendar and show up, And then we have some amazing stuff on Wednesday and Thursday lined up for you guys as well.', 'start': 771.365, 'duration': 9.434}, {'end': 783.361, 'text': 'And then, on Friday, Sunny, what are we doing on Friday??', 'start': 780.879, 'duration': 2.482}, {'end': 794.311, 'text': "On Friday, we are building the Instagram Reels clone, which is exciting, because a lot of you guys have noticed that TikTok's gone down now.", 'start': 784.642, 'duration': 9.669}, {'end': 796.833, 'text': 'What was that? Yeah, yeah, go for it.', 'start': 794.371, 'duration': 2.462}], 'summary': 'Live session on full stack developer roadmap 2020-2021, instagram reels clone on friday.', 'duration': 41.693, 'max_score': 755.14, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs755140.jpg'}, {'end': 840.96, 'src': 'embed', 'start': 812.902, 'weight': 4, 'content': [{'end': 817.424, 'text': "We're going to go ahead and build a clone of exactly that, just like we did for TikTok.", 'start': 812.902, 'duration': 4.522}, {'end': 819.065, 'text': "It's really loud.", 'start': 818.165, 'duration': 0.9}, {'end': 820.786, 'text': "So I'll just show you guys.", 'start': 819.205, 'duration': 1.581}, {'end': 828.588, 'text': 'So Instagram Reels is gonna be this thing.', 'start': 826.425, 'duration': 2.163}, {'end': 837.24, 'text': "It's gonna be super, super popular and we wanna jump on it and help you guys start building it and adding it before really even anybody else.", 'start': 828.648, 'duration': 8.592}, {'end': 839.279, 'text': 'Yeah, exactly.', 'start': 838.499, 'duration': 0.78}, {'end': 839.94, 'text': 'All right.', 'start': 839.699, 'duration': 0.241}, {'end': 840.96, 'text': 'Our clone is ready.', 'start': 840.04, 'duration': 0.92}], 'summary': 'Building a clone of instagram reels, aiming for early adoption and popularity.', 'duration': 28.058, 'max_score': 812.902, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs812902.jpg'}, {'end': 981.179, 'src': 'embed', 'start': 949.33, 'weight': 6, 'content': [{'end': 950.551, 'text': "okay, we'll do it.", 'start': 949.33, 'duration': 1.221}, {'end': 956.861, 'text': "All right, guys, so we're gonna be getting into the build in just a second.", 'start': 953.615, 'duration': 3.246}, {'end': 962.371, 'text': "And you know, these are some of the technical difficulties that we've been having.", 'start': 957.582, 'duration': 4.789}, {'end': 963.631, 'text': "Hopefully it'll clear out.", 'start': 962.431, 'duration': 1.2}, {'end': 967.293, 'text': 'And Sunny is also gonna be here in one to two weeks from now.', 'start': 963.852, 'duration': 3.441}, {'end': 972.755, 'text': "So basically we're gonna be able to just do, jump into all of this stuff and work on it together.", 'start': 967.933, 'duration': 4.822}, {'end': 975.076, 'text': 'I think that could be really, really cool.', 'start': 972.795, 'duration': 2.281}, {'end': 976.617, 'text': 'And you guys will be able to see everything.', 'start': 975.116, 'duration': 1.501}, {'end': 981.179, 'text': 'Now, just keep in mind that this build is gonna be pretty involved.', 'start': 977.137, 'duration': 4.042}], 'summary': 'Technical difficulties resolved, sunny joining in 1-2 weeks, collaborative work on a complex build.', 'duration': 31.849, 'max_score': 949.33, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs949330.jpg'}, {'end': 1523.654, 'src': 'embed', 'start': 1494.62, 'weight': 5, 'content': [{'end': 1498.222, 'text': "because that's going to help you be really fast when you're building these apps out right?", 'start': 1494.62, 'duration': 3.602}, {'end': 1502.906, 'text': "So, with that said, what we're going to do is, firstly, we're going to do our BEM naming convention here.", 'start': 1498.803, 'duration': 4.103}, {'end': 1503.426, 'text': "So we're going to say..", 'start': 1502.926, 'duration': 0.5}, {'end': 1506.82, 'text': 'class name equals header like this.', 'start': 1503.857, 'duration': 2.963}, {'end': 1512.805, 'text': "so, sunny, just one thing for you you're probably just gonna have to speak a lot louder just because your phone like.", 'start': 1506.82, 'duration': 5.985}, {'end': 1516.688, 'text': "you're gonna have to speak obnoxiously loud where it's like almost uncomfortable.", 'start': 1512.805, 'duration': 3.883}, {'end': 1523.654, 'text': 'because i think, yeah, yeah, phone audio is low and maybe you can even lower your fan or something right.', 'start': 1516.688, 'duration': 6.966}], 'summary': 'Discussion on using bem naming convention for class names and adjusting audio for better communication.', 'duration': 29.034, 'max_score': 1494.62, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs1494620.jpg'}], 'start': 694.974, 'title': 'Aws project excitement and instagram reels clone', 'summary': 'Discusses the excitement around an aws project with 900 viewers and a goal to reach 1,000, emphasizing the community energy and enthusiasm. it also covers upcoming live sessions, technical difficulties, and building the instagram reels clone, with a focus on react components and bem naming convention.', 'chapters': [{'end': 733.515, 'start': 694.974, 'title': 'Aws project excitement', 'summary': 'Discusses the excitement around an aws project with 900 viewers and a goal to reach 1,000, emphasizing the community energy and enthusiasm.', 'duration': 38.541, 'highlights': ['The excitement around an AWS project with 900 viewers', 'The goal to reach 1,000 viewers', 'Emphasizing the community energy and enthusiasm']}, {'end': 1589.462, 'start': 733.555, 'title': 'Building instagram reels clone', 'summary': 'Discusses upcoming live sessions, technical difficulties, and building the instagram reels clone, with a focus on react components and bem naming convention.', 'duration': 855.907, 'highlights': ['The chapter discusses upcoming live sessions, technical difficulties, and building the Instagram Reels clone, with a focus on React components and BEM naming convention.', 'The session mentions the upcoming live sessions scheduled for the week and the plan to discuss the full stack developer roadmap from 2020 to 2021, aiming to attract aspiring web developers.', "The chapter highlights the plan to build an Instagram Reels clone in response to TikTok's decline, aiming to capitalize on the emerging trend and help the audience get ahead of the competition.", 'The discussion centers around technical difficulties, including lagging, screen sharing issues, and audio quality, impacting the collaborative work on the app development.', 'The chapter emphasizes the importance of React components and BEM naming convention in building the app, providing insights into the coding process and tool usage.']}], 'duration': 894.488, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs694974.jpg', 'highlights': ['The goal to reach 1,000 viewers', 'The excitement around an AWS project with 900 viewers', 'Emphasizing the community energy and enthusiasm', 'The plan to discuss the full stack developer roadmap from 2020 to 2021, aiming to attract aspiring web developers', "The plan to build an Instagram Reels clone in response to TikTok's decline, aiming to capitalize on the emerging trend and help the audience get ahead of the competition", 'The chapter emphasizes the importance of React components and BEM naming convention in building the app, providing insights into the coding process and tool usage', 'The discussion centers around technical difficulties, including lagging, screen sharing issues, and audio quality, impacting the collaborative work on the app development', 'The session mentions the upcoming live sessions scheduled for the week']}, {'end': 3832.479, 'segs': [{'end': 1680.851, 'src': 'embed', 'start': 1654.659, 'weight': 4, 'content': [{'end': 1660.802, 'text': "So now what we're going to do is we've got header.js, and what we're going to be doing is we're going to basically split it up.", 'start': 1654.659, 'duration': 6.143}, {'end': 1665.184, 'text': 'so we have header left, header search, which is going to be the middle, and then header right.', 'start': 1660.802, 'duration': 4.382}, {'end': 1670.826, 'text': 'Now. we do this because, whenever we have any layout, we want to use Flexbox and,', 'start': 1666.124, 'duration': 4.702}, {'end': 1677.429, 'text': 'in order to make Flexbox super easy to style and do all things that we need to do with it, we pretty much containerize everything.', 'start': 1670.826, 'duration': 6.603}, {'end': 1680.851, 'text': 'So we draw containers around all the different parts of the web page.', 'start': 1677.449, 'duration': 3.402}], 'summary': 'Splitting header.js into header left, search, and right for flexbox layout.', 'duration': 26.192, 'max_score': 1654.659, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs1654659.jpg'}, {'end': 2642.129, 'src': 'embed', 'start': 2612.599, 'weight': 2, 'content': [{'end': 2616.64, 'text': 'And just remember, just keep showing up, guys, and you will be a better developer over time.', 'start': 2612.599, 'duration': 4.041}, {'end': 2619.12, 'text': "So the next thing what we're going to do is we're going to target..", 'start': 2616.7, 'duration': 2.42}, {'end': 2621.204, 'text': 'that material UI icon.', 'start': 2619.824, 'duration': 1.38}, {'end': 2625.425, 'text': 'Now, material UI actually adds a class, right? So it adds a little class.', 'start': 2621.244, 'duration': 4.181}, {'end': 2627.386, 'text': "And I'm just going to grab a snippet here.", 'start': 2626.025, 'duration': 1.361}, {'end': 2628.826, 'text': 'So what it does, it adds a class.', 'start': 2627.406, 'duration': 1.42}, {'end': 2634.527, 'text': 'And in order to target that class, what we need to do is we need to say header left, material UI.', 'start': 2629.286, 'duration': 5.241}, {'end': 2636.527, 'text': 'So this is the class right here.', 'start': 2635.107, 'duration': 1.42}, {'end': 2642.129, 'text': "So it's, oh my god, my code editor is freezing out.", 'start': 2636.587, 'duration': 5.542}], 'summary': 'Consistent effort leads to improvement in development skills.', 'duration': 29.53, 'max_score': 2612.599, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs2612599.jpg'}, {'end': 2994.324, 'src': 'embed', 'start': 2966.937, 'weight': 1, 'content': [{'end': 2971.021, 'text': "So we do this, and it's going to freak out because it's like, whoa, whoa, whoa, you don't have a sidebar component.", 'start': 2966.937, 'duration': 4.084}, {'end': 2972.583, 'text': "So I'm going to go ahead and create a sidebar.", 'start': 2971.041, 'duration': 1.542}, {'end': 2975.085, 'text': 'Do sidebar.js like this.', 'start': 2973.003, 'duration': 2.082}, {'end': 2976.947, 'text': 'And now if I do rfce..', 'start': 2975.726, 'duration': 1.221}, {'end': 2978.833, 'text': 'There we go.', 'start': 2978.433, 'duration': 0.4}, {'end': 2980.895, 'text': "We've got the sidebar, which is awesome.", 'start': 2978.873, 'duration': 2.022}, {'end': 2987.999, 'text': 'So if I do sidebar and I do class name equals sidebar like this, then we have the sidebar up and running.', 'start': 2981.355, 'duration': 6.644}, {'end': 2991.382, 'text': "And then what we're going to do just to get very fast to this, we're going to say import.", 'start': 2988.36, 'duration': 3.022}, {'end': 2994.324, 'text': "Every single time I make a new file, I'm going to follow this process.", 'start': 2991.742, 'duration': 2.582}], 'summary': 'Creating a sidebar component using sidebar.js and importing it for fast file creation.', 'duration': 27.387, 'max_score': 2966.937, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs2966937.jpg'}, {'end': 3104.134, 'src': 'embed', 'start': 3071.588, 'weight': 3, 'content': [{'end': 3072.649, 'text': "So now we're going to do.", 'start': 3071.588, 'duration': 1.061}, {'end': 3074.871, 'text': 'Yeah Nice.', 'start': 3073.53, 'duration': 1.341}, {'end': 3078.495, 'text': 'We just got another donation by Abin Pai.', 'start': 3074.912, 'duration': 3.583}, {'end': 3079.456, 'text': 'So let me pop it up.', 'start': 3078.535, 'duration': 0.921}, {'end': 3080.237, 'text': 'Let me pop it up.', 'start': 3079.476, 'duration': 0.761}, {'end': 3080.877, 'text': 'Now go.', 'start': 3080.477, 'duration': 0.4}, {'end': 3081.318, 'text': 'Go for it.', 'start': 3080.977, 'duration': 0.341}, {'end': 3087.062, 'text': 'Appreciate your tremendous amount of efforts these tutorials helped me a lot to tune my skills.', 'start': 3082.418, 'duration': 4.644}, {'end': 3089.743, 'text': "Thank you Sonny and Kazi to teach us You're welcome, dude.", 'start': 3087.122, 'duration': 2.621}, {'end': 3093.526, 'text': 'We are super glad that you guys are finding value from these videos.', 'start': 3089.784, 'duration': 3.742}, {'end': 3097.509, 'text': "Yeah, we'll keep on awesome, nice.", 'start': 3094.247, 'duration': 3.262}, {'end': 3104.134, 'text': "so We created the sidebar.js, and what we're gonna do now is we're gonna go ahead and create the next step.", 'start': 3097.509, 'duration': 6.625}], 'summary': 'Received another donation and positive feedback. continuing with sidebar.js creation.', 'duration': 32.546, 'max_score': 3071.588, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs3071588.jpg'}, {'end': 3808.811, 'src': 'embed', 'start': 3777.317, 'weight': 0, 'content': [{'end': 3781.8, 'text': "whoa dude, wow, look at this, we've got loads of people dropping donations.", 'start': 3777.317, 'duration': 4.483}, {'end': 3784.862, 'text': 'oh my god.', 'start': 3781.8, 'duration': 3.062}, {'end': 3788.365, 'text': 'and diego serrano, damn, thank you guys.', 'start': 3784.862, 'duration': 3.503}, {'end': 3791.906, 'text': 'we massively appreciate that really great work.', 'start': 3789.105, 'duration': 2.801}, {'end': 3795.447, 'text': 'i learned a lot from you guys and then diego just dropped ten dollars.', 'start': 3791.906, 'duration': 3.541}, {'end': 3799.168, 'text': 'what the hell, guys, we are above fifty dollars in donations.', 'start': 3795.447, 'duration': 3.721}, {'end': 3801.189, 'text': 'thank you so much.', 'start': 3799.168, 'duration': 2.021}, {'end': 3802.769, 'text': "thank you dude, that's insane.", 'start': 3801.189, 'duration': 1.58}, {'end': 3806.991, 'text': 'we love that, right.', 'start': 3802.769, 'duration': 4.222}, {'end': 3808.811, 'text': 'um, oh wow.', 'start': 3806.991, 'duration': 1.82}], 'summary': 'Excited reactions to receiving over $50 in donations, expressing gratitude and amazement.', 'duration': 31.494, 'max_score': 3777.317, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs3777317.jpg'}], 'start': 1589.482, 'title': 'Building and styling ui components', 'summary': 'Covers setting up bem naming convention for css, importing css files, building header components with material ui, styling with flexbox and css variables, targeting and styling material ui icon in react, and creating sidebar components with css styling. the live session also received over $50 in donations.', 'chapters': [{'end': 1653.633, 'start': 1589.482, 'title': 'Setting up bem naming convention and importing css files', 'summary': 'Discusses setting up bem naming convention for css classes and importing header.css file, followed by facing a technical issue with skype during screen sharing.', 'duration': 64.151, 'highlights': ['Importing header.css file after setting up BEM naming convention for CSS classes.', 'Facing technical issue with Skype during screen sharing.', 'Discussion about creating header.css file and following the process for setting up files.', 'Need to keep the video off for a little bit due to technical issues with the computer.']}, {'end': 2302.703, 'start': 1654.659, 'title': 'Building header components with material ui', 'summary': 'Discusses breaking down header.js into three sections: header left, header search, and header right, using flexbox to style and containerize each section, and installing material ui core and icons for the project.', 'duration': 648.044, 'highlights': ['The chapter discusses breaking down header.js into three sections: header left, header search, and header right. The speaker explains the process of breaking down the header.js file into three distinct sections: header left, header search, and header right, to organize and structure the header component.', 'Using Flexbox to style and containerize each section is emphasized. The speaker highlights the importance of using Flexbox to easily style and containerize each section of the web page, ensuring flexibility and efficient layout design.', 'The process of installing Material UI core and icons is discussed. The chapter goes through the process of installing Material UI core and icons, with a step-by-step guide on installing and utilizing the necessary components for the project.']}, {'end': 2611.839, 'start': 2302.703, 'title': 'Styling header component with flexbox and css variables', 'summary': 'Involves styling the header component using flexbox and css variables, achieving quick and slick results, and also discusses the benefits of pattern recognition in improving react development skills.', 'duration': 309.136, 'highlights': ['Styling the header component using flexbox and CSS variables The speaker demonstrates using flexbox to style the header component, achieving quick and slick results.', 'Benefits of pattern recognition in improving React development skills The speaker discusses the benefits of pattern recognition in improving React development skills and emphasizes the value of consistent learning and improvement.']}, {'end': 3093.526, 'start': 2612.599, 'title': 'Styling material ui icon in react', 'summary': 'Discusses targeting and styling material ui icon in react, including setting classes, margins, flex properties, background colors, text alignment, and responsiveness, leading to a completed header and preparations for building a sidebar component.', 'duration': 480.927, 'highlights': ['The chapter discusses targeting and styling Material UI icon in React, including setting classes, margins, flex properties, background colors, text alignment, and responsiveness. The discussion involves targeting the Material UI icon, setting margins, flex properties, background colors, text alignment, and ensuring responsiveness.', 'Leading to a completed header and preparations for building a sidebar component. The completion of styling results in a finished header, and the process of creating a sidebar component begins.', 'The speaker shares insights and interactions with the audience, including acknowledging a donation and expressing gratitude. The speaker engages with the audience by acknowledging a donation, expressing gratitude, and providing updates, creating an interactive and appreciative environment.']}, {'end': 3832.479, 'start': 3094.247, 'title': 'Creating sidebar components with css styling', 'summary': 'Covers the creation of sidebar components using display flex, adding borders, changing text colors, and using material ui icons, with a total of over $50 in donations received during the live session.', 'duration': 738.232, 'highlights': ['The chapter covers the creation of sidebar components, including sidebar header and sidebar info, using display flex and adding borders for styling.', 'The process includes changing the text color to white and using Material UI icons for a visual representation, such as a green dot and a pencil icon.', 'The session received over $50 in donations from viewers, with specific donations mentioned, including a $11 donation from Ewald Hertel and a $10 donation from Diego Serrano.']}], 'duration': 2242.997, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs1589482.jpg', 'highlights': ['The session received over $50 in donations from viewers, with specific donations mentioned, including a $11 donation from Ewald Hertel and a $10 donation from Diego Serrano.', 'The chapter covers the creation of sidebar components, including sidebar header and sidebar info, using display flex and adding borders for styling.', 'The chapter discusses targeting and styling Material UI icon in React, including setting classes, margins, flex properties, background colors, text alignment, and responsiveness.', 'The speaker shares insights and interactions with the audience, including acknowledging a donation and expressing gratitude.', 'The chapter discusses breaking down header.js into three sections: header left, header search, and header right. The speaker explains the process of breaking down the header.js file into three distinct sections: header left, header search, and header right, to organize and structure the header component.']}, {'end': 5091.728, 'segs': [{'end': 3866.81, 'src': 'embed', 'start': 3832.539, 'weight': 0, 'content': [{'end': 3833.159, 'text': "That's the mission.", 'start': 3832.539, 'duration': 0.62}, {'end': 3835.401, 'text': 'Exactly We love that guys.', 'start': 3834.1, 'duration': 1.301}, {'end': 3836.121, 'text': 'Thank you.', 'start': 3835.681, 'duration': 0.44}, {'end': 3840.67, 'text': 'Nice Someone goes, oh wow, chat is making it rain.', 'start': 3836.482, 'duration': 4.188}, {'end': 3842.631, 'text': 'Yeah, seriously, thank you guys.', 'start': 3841.15, 'duration': 1.481}, {'end': 3844.233, 'text': 'Yeah, thank you guys.', 'start': 3842.671, 'duration': 1.562}, {'end': 3849.718, 'text': "So now we're going to basically go ahead and target that H2, and I want to give it a font size of 15 pixels,", 'start': 3844.273, 'duration': 5.445}, {'end': 3852.961, 'text': 'font weight of 900 pixels and a margin bottom of 5 pixels.', 'start': 3849.718, 'duration': 3.243}, {'end': 3856.824, 'text': 'So as soon as I hit save, notice that Clever Programmer should look a bit different now.', 'start': 3853.001, 'duration': 3.823}, {'end': 3860.468, 'text': 'Nice Ties it in a bit neater, looks a lot cleaner that way.', 'start': 3857.125, 'duration': 3.343}, {'end': 3866.81, 'text': "Now, for the H3, so where it says Rafi Qazi, I'm going to go ahead and target that with the following.", 'start': 3861.104, 'duration': 5.706}], 'summary': 'Adjusting h2 and h3 font sizes and weights for a cleaner look.', 'duration': 34.271, 'max_score': 3832.539, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs3832539.jpg'}, {'end': 3946.195, 'src': 'embed', 'start': 3925.212, 'weight': 2, 'content': [{'end': 3934.619, 'text': "but i'm going to show you guys how you could do a nested css selector right, so you could do sidebar info, h3 and then the material ui, uh, class.", 'start': 3925.212, 'duration': 9.407}, {'end': 3939.129, 'text': "so i'm just showing you this um, just so that you guys know that you can do that right?", 'start': 3934.619, 'duration': 4.51}, {'end': 3941.971, 'text': 'And then, pretty much so, you can write it like this', 'start': 3939.509, 'duration': 2.462}, {'end': 3946.195, 'text': 'You can say the direct charge, which is a H3, and then target the material UI icon.', 'start': 3941.991, 'duration': 4.204}], 'summary': 'Demonstrating how to use nested css selectors for targeting specific elements within a webpage.', 'duration': 20.983, 'max_score': 3925.212, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs3925212.jpg'}, {'end': 4017.841, 'src': 'embed', 'start': 3970.906, 'weight': 4, 'content': [{'end': 3975.727, 'text': "I know people are like, yo, Qazi, what are you doing? You're breaking the flow with these donations.", 'start': 3970.906, 'duration': 4.821}, {'end': 3976.247, 'text': "I'm sorry.", 'start': 3975.827, 'duration': 0.42}, {'end': 3977.267, 'text': 'I cannot help it.', 'start': 3976.287, 'duration': 0.98}, {'end': 3979.208, 'text': "Just skip the video if you're watching the replay.", 'start': 3977.327, 'duration': 1.881}, {'end': 3984.369, 'text': 'But YMO just dropped $20.', 'start': 3979.228, 'duration': 5.141}, {'end': 3985.989, 'text': 'And he says, I learned so much React here.', 'start': 3984.369, 'duration': 1.62}, {'end': 3988.25, 'text': 'I might be a full-time React dev one day.', 'start': 3986.029, 'duration': 2.221}, {'end': 3991.251, 'text': 'So I so wish you will do a Figma clone one day.', 'start': 3988.71, 'duration': 2.541}, {'end': 3993.071, 'text': 'And I really like that property-based panel.', 'start': 3991.311, 'duration': 1.76}, {'end': 3994.991, 'text': 'Thank you so much, brother.', 'start': 3993.991, 'duration': 1}, {'end': 3996.712, 'text': "And we'll definitely consider doing that.", 'start': 3995.051, 'duration': 1.661}, {'end': 4000.895, 'text': 'yeah, and oh my god, ron.', 'start': 3997.634, 'duration': 3.261}, {'end': 4007.077, 'text': 'alex just dropped 25 and he says you, i tried to join pwj profit with javascript, but my card got declined.', 'start': 4000.895, 'duration': 6.182}, {'end': 4013.119, 'text': "just send us an email at support at cleverprogrammer.com or dm me on instagram and we'll help you out.", 'start': 4007.077, 'duration': 6.042}, {'end': 4017.841, 'text': "yep, definitely, get in touch with one of us and we'll be sure to sort that out for you.", 'start': 4013.119, 'duration': 4.722}], 'summary': 'During the live stream, ymo donated $20 and expressed gratitude for learning react, while alex donated $25 and sought help for joining pwj profit with javascript.', 'duration': 46.935, 'max_score': 3970.906, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs3970906.jpg'}, {'end': 4071.823, 'src': 'embed', 'start': 4042.507, 'weight': 7, 'content': [{'end': 4043.248, 'text': 'Give me one second.', 'start': 4042.507, 'duration': 0.741}, {'end': 4043.849, 'text': 'Do it again.', 'start': 4043.268, 'duration': 0.581}, {'end': 4048.674, 'text': 'When you do those kind of changes, like say if I go ahead and comment this out and save it.', 'start': 4044.089, 'duration': 4.585}, {'end': 4051.377, 'text': 'So look, this is all front end, guys.', 'start': 4049.355, 'duration': 2.022}, {'end': 4052.498, 'text': 'Make me come online, bro.', 'start': 4051.417, 'duration': 1.081}, {'end': 4053.379, 'text': 'Make me come online.', 'start': 4052.538, 'duration': 0.841}, {'end': 4054.039, 'text': 'Come on, bro.', 'start': 4053.419, 'duration': 0.62}, {'end': 4057.282, 'text': 'And boom.', 'start': 4054.82, 'duration': 2.462}, {'end': 4058.784, 'text': 'That is nice.', 'start': 4057.382, 'duration': 1.402}, {'end': 4060.806, 'text': 'Man, I enjoy it, man.', 'start': 4059.404, 'duration': 1.402}, {'end': 4062.227, 'text': 'I have fun with this stuff.', 'start': 4060.886, 'duration': 1.341}, {'end': 4066.551, 'text': "Yeah, it's like the small things give you so much satisfaction when you're doing front end.", 'start': 4062.807, 'duration': 3.744}, {'end': 4067.332, 'text': 'Yeah, joy.', 'start': 4066.571, 'duration': 0.761}, {'end': 4068.773, 'text': 'And everyone ties it together.', 'start': 4067.392, 'duration': 1.381}, {'end': 4070.723, 'text': 'really nice.', 'start': 4070.003, 'duration': 0.72}, {'end': 4071.823, 'text': 'okay, awesome.', 'start': 4070.723, 'duration': 1.1}], 'summary': 'A conversation about front-end work, expressing enjoyment and satisfaction. no quantifiable data provided.', 'duration': 29.316, 'max_score': 4042.507, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs4042507.jpg'}, {'end': 4113.777, 'src': 'embed', 'start': 4088.567, 'weight': 6, 'content': [{'end': 4094.068, 'text': 'what we could do is we could create something like this we could create a sidebar option component right.', 'start': 4088.567, 'duration': 5.501}, {'end': 4094.908, 'text': 'that might be cool.', 'start': 4094.068, 'duration': 0.84}, {'end': 4096.127, 'text': 'and then we could just pretty much do this.', 'start': 4094.908, 'duration': 1.219}, {'end': 4100.312, 'text': 'And then we can pretty much pass in different props every time.', 'start': 4097.35, 'duration': 2.962}, {'end': 4104.154, 'text': 'so I can go ahead and say icon equals And we could pass in an icon.', 'start': 4100.312, 'duration': 3.842}, {'end': 4105.033, 'text': 'at this point.', 'start': 4104.154, 'duration': 0.879}, {'end': 4111.336, 'text': "notice how I used a capital I, because I'm passing a prop, a Component, as a prop.", 'start': 4105.033, 'duration': 6.303}, {'end': 4113.777, 'text': "so that's why you need to do that, and then I can plus the title in.", 'start': 4111.336, 'duration': 2.441}], 'summary': 'Creating a sidebar option component with the ability to pass in different props like icon and title.', 'duration': 25.21, 'max_score': 4088.567, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs4088567.jpg'}, {'end': 4153.929, 'src': 'embed', 'start': 4127.006, 'weight': 9, 'content': [{'end': 4130.83, 'text': 'Eventually, the angle is we basically went down and we had a bunch of sidebar options.', 'start': 4127.006, 'duration': 3.824}, {'end': 4133.792, 'text': "Let's go ahead and implement this and see how we can do that.", 'start': 4131.31, 'duration': 2.482}, {'end': 4142.917, 'text': "Also, I'm going to show you guys how we can actually get the entire rest of the sidebar built out now by reusing one component, which is insane.", 'start': 4133.892, 'duration': 9.025}, {'end': 4145.979, 'text': "I'm going to show you guys how to do all of that now.", 'start': 4143.058, 'duration': 2.921}, {'end': 4149.761, 'text': "SidebarOption, let's go ahead and create that sidebarOption.js.", 'start': 4146.14, 'duration': 3.621}, {'end': 4153.929, 'text': 'Boom And we should be in that file now.', 'start': 4151.546, 'duration': 2.383}], 'summary': 'Implementing sidebar options and reusing one component for building the entire sidebar.', 'duration': 26.923, 'max_score': 4127.006, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs4127006.jpg'}, {'end': 4262.484, 'src': 'embed', 'start': 4234.963, 'weight': 8, 'content': [{'end': 4238.488, 'text': "And what I'm going to do to make life a little easier later on, I'm going to go ahead and style that.", 'start': 4234.963, 'duration': 3.525}, {'end': 4240.19, 'text': "So let's go back to cyber options.", 'start': 4238.528, 'duration': 1.662}, {'end': 4242.894, 'text': "Sorry And let's go ahead and do class name.", 'start': 4240.21, 'duration': 2.684}, {'end': 4245.858, 'text': 'Oops Class name equals.', 'start': 4242.974, 'duration': 2.884}, {'end': 4249.098, 'text': 'Sidebar option dot underscore icon.', 'start': 4246.457, 'duration': 2.641}, {'end': 4251.879, 'text': 'So sidebar option underscore icon.', 'start': 4249.138, 'duration': 2.741}, {'end': 4257.062, 'text': 'And if you guys are enjoying the BEM naming convention, let us know in the comments and smash the thumbs up button,', 'start': 4252.2, 'duration': 4.862}, {'end': 4260.303, 'text': "because that has really changed my life since I've been using it.", 'start': 4257.062, 'duration': 3.241}, {'end': 4262.484, 'text': "And I hope that's benefited some of you guys as well.", 'start': 4260.423, 'duration': 2.061}], 'summary': 'Demonstrating bem naming convention for coding styles.', 'duration': 27.521, 'max_score': 4234.963, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs4234963.jpg'}, {'end': 4444.053, 'src': 'heatmap', 'start': 4282.354, 'weight': 0.746, 'content': [{'end': 4286.796, 'text': 'Oh yeah, Hey, you wrote a special event.', 'start': 4282.354, 'duration': 4.442}, {'end': 4288.437, 'text': 'fun, Scott, nice.', 'start': 4286.796, 'duration': 1.641}, {'end': 4291.418, 'text': "So then we've done that, guys, and now what we can do is to test that out.", 'start': 4288.437, 'duration': 2.981}, {'end': 4297.959, 'text': "I'm gonna go to sidebar, go ahead and get, remove all of this and, and let's just test it with one thing first, before we go crazy,", 'start': 4291.418, 'duration': 6.541}, {'end': 4301.52, 'text': "let's go here and let's just do an insert icon.", 'start': 4297.959, 'duration': 3.561}, {'end': 4304.921, 'text': "uh, so the one that i found for this one, i didn't get the exact matches.", 'start': 4301.52, 'duration': 3.401}, {'end': 4309.823, 'text': "you can go ahead and try and find some, but these are near enough, pretty much what we're going to do for our demo.", 'start': 4304.921, 'duration': 4.902}, {'end': 4313.864, 'text': "so we've got the insert comment icon with a title of threads.", 'start': 4309.823, 'duration': 4.041}, {'end': 4317.906, 'text': 'so now, if i pass this in And thank you so much.', 'start': 4313.864, 'duration': 4.042}, {'end': 4321.128, 'text': "Wow It's like $6 donation.", 'start': 4319.367, 'duration': 1.761}, {'end': 4322.169, 'text': 'Thank you so much.', 'start': 4321.168, 'duration': 1.001}, {'end': 4324.171, 'text': 'Really appreciate it.', 'start': 4322.589, 'duration': 1.582}, {'end': 4325.432, 'text': 'Really, really appreciate that, dude.', 'start': 4324.191, 'duration': 1.241}, {'end': 4326.312, 'text': 'Thank you very much.', 'start': 4325.492, 'duration': 0.82}, {'end': 4330.496, 'text': "What we're going to do is we're going to import this.", 'start': 4327.773, 'duration': 2.723}, {'end': 4339.262, 'text': "We're going to say import sidebar option, sidebar option from sidebar option like this sidebar option.", 'start': 4330.516, 'duration': 8.746}, {'end': 4339.723, 'text': 'There we go.', 'start': 4339.483, 'duration': 0.24}, {'end': 4342.043, 'text': 'save it.', 'start': 4341.483, 'duration': 0.56}, {'end': 4345.964, 'text': "boom, and guys, we've got so much content coming for you guys in this one video.", 'start': 4342.043, 'duration': 3.921}, {'end': 4352.026, 'text': "so like, just just be prepared, guys, that's all i'm gonna say, because it gets, it's gonna get hella intense soon.", 'start': 4345.964, 'duration': 6.062}, {'end': 4354.267, 'text': 'so exciting stuff coming.', 'start': 4352.026, 'duration': 2.241}, {'end': 4358.108, 'text': "um, what i'm gonna do is so, yeah, there we go.", 'start': 4354.267, 'duration': 3.841}, {'end': 4360.469, 'text': "so we've got the sidebar option there, nice.", 'start': 4358.108, 'duration': 2.361}, {'end': 4363.87, 'text': 'so um, oh yeah.', 'start': 4360.469, 'duration': 3.401}, {'end': 4366.211, 'text': "that's why i was wondering why is that coming inside of there?", 'start': 4363.87, 'duration': 2.341}, {'end': 4368.472, 'text': 'so this needs to be outside the div, guys, you know.', 'start': 4366.211, 'duration': 2.261}, {'end': 4372.512, 'text': "so this needs to be outside that div, otherwise it will come at that point, which we don't want.", 'start': 4368.472, 'duration': 4.04}, {'end': 4375.574, 'text': 'we want to be underneath right, awesome.', 'start': 4372.512, 'duration': 3.062}, {'end': 4378.055, 'text': "so that's where i changed that line right there.", 'start': 4375.574, 'duration': 2.481}, {'end': 4385.3, 'text': "so now what we're going to do is, inside of sidebar option, we saw that it's rendering out the icon, which is nice, okay, so let's carry on with that.", 'start': 4378.055, 'duration': 7.245}, {'end': 4391.923, 'text': "so, and now we're going to say is, if an icon was passed in, so i want to make this super customizable, right,", 'start': 4385.3, 'duration': 6.623}, {'end': 4393.624, 'text': 'i want to make this like really customized.', 'start': 4391.923, 'duration': 1.701}, {'end': 4402.069, 'text': "honestly, if you pass me an icon, then i'm going to render out the following so i want to render out a h3 tag underneath it which has the title in it,", 'start': 4393.624, 'duration': 8.445}, {'end': 4404.871, 'text': 'because i want it to basically have the icon and then the title.', 'start': 4402.069, 'duration': 2.802}, {'end': 4413.415, 'text': "so whatever title you passed in, but if you didn't pass an icon right i want it to be then i want it to basically have.", 'start': 4404.871, 'duration': 8.544}, {'end': 4420.399, 'text': "so i'm gonna have a h3, so i'm gonna h3 and i'm basically gonna have something like this i'm gonna have a,", 'start': 4413.415, 'duration': 6.984}, {'end': 4423.521, 'text': "so i'm gonna have a hashtag and i'm gonna have a title.", 'start': 4420.399, 'duration': 3.122}, {'end': 4428.144, 'text': "and the reason why i want to do this is because, if we don't pass an icon in, i want it to be a channel.", 'start': 4423.521, 'duration': 4.623}, {'end': 4433.37, 'text': "So I'm going to reuse this component layer and I want it to be a channel if we don't pass anything in.", 'start': 4429.569, 'duration': 3.801}, {'end': 4435.971, 'text': 'So at this point, you can see threads comes through.', 'start': 4433.39, 'duration': 2.581}, {'end': 4444.053, 'text': "But if I went ahead and did something like this now, so if I went ahead and created another one and I didn't pass an icon with this one and say,", 'start': 4436.571, 'duration': 7.482}], 'summary': 'Developing and testing a customizable sidebar option with icons and titles for a video project.', 'duration': 161.699, 'max_score': 4282.354, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs4282354.jpg'}, {'end': 4590.345, 'src': 'embed', 'start': 4560.928, 'weight': 10, 'content': [{'end': 4566.19, 'text': "so now i'm going to basically say i want it so that when we hover over it we change the background color.", 'start': 4560.928, 'duration': 5.262}, {'end': 4567.891, 'text': "so i'm going to say cyber option, hover,", 'start': 4566.19, 'duration': 1.701}, {'end': 4574.553, 'text': "and i'm going to make the background color like this is the purple that they have when you hover over stuff on slack.", 'start': 4567.891, 'duration': 6.662}, {'end': 4582.336, 'text': 'so now, if we actually go and hover over it, we should be able to see that it actually highlights.', 'start': 4574.553, 'duration': 7.783}, {'end': 4584.357, 'text': "so let's go ahead and hover over kazi.", 'start': 4582.336, 'duration': 2.021}, {'end': 4590.345, 'text': 'Hey, look at that.', 'start': 4588.024, 'duration': 2.321}], 'summary': "Changing background color on hover for cyber option to mimic slack's purple highlight.", 'duration': 29.417, 'max_score': 4560.928, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs4560928.jpg'}, {'end': 4715.344, 'src': 'embed', 'start': 4688.049, 'weight': 1, 'content': [{'end': 4690.811, 'text': "so it basically is it's going to resemble like an icon.", 'start': 4688.049, 'duration': 2.762}, {'end': 4696.456, 'text': "but what i'm going to do instead is, i'm going to say, give that hashtag temp 10 pixels padding.", 'start': 4690.811, 'duration': 5.645}, {'end': 4699.318, 'text': 'so now you can see it just falls in line with the rest of it.', 'start': 4696.456, 'duration': 2.862}, {'end': 4700.139, 'text': 'so it looks really nice.', 'start': 4699.318, 'duration': 0.821}, {'end': 4704.597, 'text': "And then for that H3, I'm going to say give it a font weight of 500..", 'start': 4700.794, 'duration': 3.803}, {'end': 4707.459, 'text': 'So if we go ahead and do that, font weight of 500.', 'start': 4704.597, 'duration': 2.862}, {'end': 4707.919, 'text': 'There we go.', 'start': 4707.459, 'duration': 0.46}, {'end': 4708.92, 'text': 'Looks super clean.', 'start': 4708.199, 'duration': 0.721}, {'end': 4715.344, 'text': 'David Jonathan says, have learned so much from these guys in just one night doing the cover tracker than any other tutorial out there.', 'start': 4709.68, 'duration': 5.664}], 'summary': 'Applying 10 pixels padding to hashtag, setting h3 font weight to 500 for a clean look. learning satisfaction noted by david jonathan.', 'duration': 27.295, 'max_score': 4688.049, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs4688049.jpg'}, {'end': 4842.341, 'src': 'embed', 'start': 4814.664, 'weight': 11, 'content': [{'end': 4820.426, 'text': 'Whenever you have a breaks or horizontal line, you can actually do the following.', 'start': 4814.664, 'duration': 5.762}, {'end': 4822.087, 'text': 'You can actually go ahead and say this.', 'start': 4820.446, 'duration': 1.641}, {'end': 4830.131, 'text': 'I basically want to have a few more cyber options, but I want a line between them, because this is going to say when we start to show the channels.', 'start': 4822.627, 'duration': 7.504}, {'end': 4832.793, 'text': 'So here I can write horizontal row.', 'start': 4830.931, 'duration': 1.862}, {'end': 4834.254, 'text': "So that's basically adding a line.", 'start': 4832.933, 'duration': 1.321}, {'end': 4837.917, 'text': 'I can go to my sidebar.css and now I can add the following.', 'start': 4834.274, 'duration': 3.643}, {'end': 4842.341, 'text': 'I can say, go and target that horizontal row, which is inside of the sidebar.', 'start': 4837.978, 'duration': 4.363}], 'summary': 'Demonstrates how to add a horizontal line in css by targeting the specific element in the sidebar.', 'duration': 27.677, 'max_score': 4814.664, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs4814664.jpg'}, {'end': 4924.449, 'src': 'embed', 'start': 4898.814, 'weight': 12, 'content': [{'end': 4904.156, 'text': 'then all we ask is you just smash the thumbs up button and to get this video out to as many people so it can help them out.', 'start': 4898.814, 'duration': 5.342}, {'end': 4905.216, 'text': 'Just like it helps you out.', 'start': 4904.296, 'duration': 0.92}, {'end': 4909.778, 'text': "Yeah, I don't think there's a massive gap, especially with I mean with most programming languages.", 'start': 4905.436, 'duration': 4.342}, {'end': 4915.08, 'text': "there's massive gap like try to find really good and tons of good stuff on Django, where they're building clones.", 'start': 4909.778, 'duration': 5.302}, {'end': 4915.781, 'text': "You won't find it.", 'start': 4915.1, 'duration': 0.681}, {'end': 4917.542, 'text': 'with react.', 'start': 4916.721, 'duration': 0.821}, {'end': 4922.006, 'text': 'there was a huge gap with that and simba just oh my goodness.', 'start': 4917.542, 'duration': 4.464}, {'end': 4924.449, 'text': 'thank you so much, simba.', 'start': 4922.006, 'duration': 2.443}], 'summary': 'Emphasizing the need to share the video and expressing gratitude for bridging knowledge gaps in programming languages.', 'duration': 25.635, 'max_score': 4898.814, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs4898814.jpg'}, {'end': 5013.025, 'src': 'embed', 'start': 4984.083, 'weight': 13, 'content': [{'end': 4989.547, 'text': "Yeah And with react.js, I really think that I think we're filling a massive gap on projects.", 'start': 4984.083, 'duration': 5.464}, {'end': 4992.849, 'text': "And I really think it's going to produce a lot of developers.", 'start': 4989.847, 'duration': 3.002}, {'end': 4996.492, 'text': 'hopefully a lot of you guys go and get jobs as react developers.', 'start': 4992.849, 'duration': 3.643}, {'end': 4997.613, 'text': 'you know from these tutorials.', 'start': 4996.492, 'duration': 1.121}, {'end': 5000.112, 'text': "Yeah, that's our goal.", 'start': 4998.951, 'duration': 1.161}, {'end': 5001.053, 'text': "That's pretty much our goal.", 'start': 5000.292, 'duration': 0.761}, {'end': 5008.28, 'text': "It's pretty much get as many developers to start their journey or to improve their journey through these videos.", 'start': 5001.113, 'duration': 7.167}, {'end': 5013.025, 'text': 'And that, guys, to us is like enough of a reward that we could ever ask for.', 'start': 5008.961, 'duration': 4.064}], 'summary': 'Using react.js to fill gap, aiming for many developers to get jobs and improve their journey through tutorials.', 'duration': 28.942, 'max_score': 4984.083, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs4984083.jpg'}], 'start': 3832.539, 'title': 'Css styling and react development', 'summary': "Covers applying css styling and flexbox to html elements, and discusses livestream donations including $20 from ymo and $25 from alex, highlighting react development, creating reusable sidebar options, using bem naming convention for styling, and the impact of react clones on viewers' feedback and career opportunities.", 'chapters': [{'end': 3970.806, 'start': 3832.539, 'title': 'Css styling and flexbox tutorial', 'summary': 'Covers the application of css styling and flexbox to target specific html elements, adjusting font size, weight, and alignment, resulting in a neater and cleaner layout.', 'duration': 138.267, 'highlights': ['The H3 is targeted using a nested CSS selector to apply flexbox and center the text and icon, resulting in a cleaner look with a font size of 13 pixels and a font weight of 400 pixels.', 'The H2 is styled with a font size of 15 pixels, font weight of 900 pixels, and a margin bottom of 5 pixels, enhancing the appearance of the text.', 'The tutorial demonstrates the use of nested CSS selectors to apply styles to specific elements, providing flexibility in organizing and maintaining the main page layout.', 'The chapter emphasizes using CSS selectors and properties to create a visually appealing and organized user interface, catering to individual preferences and coding practices.']}, {'end': 4234.414, 'start': 3970.906, 'title': 'Livestream donations and react development', 'summary': 'Highlights a livestream where viewers made donations, including $20 from ymo who expressed learning react and potential career change, and $25 from alex encountering issues with a javascript course payment. qazi discusses front-end development, satisfaction in small details, and creating reusable sidebar options using react components.', 'duration': 263.508, 'highlights': ['YMO donates $20 expressing learning React and potential career change. YMO donated $20 and mentioned learning React and aspiring to be a full-time React developer.', 'Alex donates $25, encountering issues with a JavaScript course payment. Alex made a $25 donation and mentioned encountering payment issues for a JavaScript course.', 'Discussion on front-end development and satisfaction in small details. Qazi discusses front-end development and the satisfaction derived from small details in the process.', 'Creating reusable sidebar options using React components. Qazi explains the concept of creating a reusable sidebar option component using React and demonstrates its implementation.']}, {'end': 4854.012, 'start': 4234.963, 'title': 'Styling sidebar options', 'summary': 'Covers styling the sidebar options using bem naming convention, importing icons, making the component customizable, and adding hover effects. it demonstrates reusing the component, improving aesthetics, and creating a horizontal row for channels.', 'duration': 619.049, 'highlights': ['Styling sidebar options using BEM naming convention and importing icons The speaker discusses styling the sidebar options using BEM naming convention and importing icons, emphasizing how it has changed their life and benefited the audience.', 'Making the sidebar component customizable and reusing it The speaker demonstrates making the sidebar component highly customizable and reusable, showcasing how it can render different options based on the passed parameters.', 'Adding hover effects and improving aesthetics The speaker explains adding hover effects to the sidebar options to enhance user experience, highlighting the changes in background color and opacity to make the options more interactive and visually appealing.', 'Creating a horizontal row for channels The speaker showcases creating a horizontal row for the channels, demonstrating an additional design element to separate different sections of the sidebar.']}, {'end': 5091.728, 'start': 4854.032, 'title': 'React clones impact', 'summary': 'Highlights the impact of creating react clones, including positive feedback from viewers, such as saving money on courses, receiving job interviews, and landing jobs, as well as the goal of filling a gap in learning resources for react development.', 'duration': 237.696, 'highlights': ["Positive impact on viewers' learning journey, with examples of viewers saving money on courses and receiving job interviews, including an interview with Google. Viewers express gratitude for the React clones, mentioning saving money on courses and receiving job interviews, including an interview with Google.", 'Goal of filling a gap in learning resources for React development and helping developers start or improve their journey through the provided videos. The goal is to fill a gap in learning resources for React development and help developers start or improve their journey through the provided videos.', 'Viewer feedback indicating the impact of the React clones, with examples of positive reception and practical application in portfolios. Viewers share positive feedback and practical application of React clones in portfolios, leading to interview opportunities.']}], 'duration': 1259.189, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs3832539.jpg', 'highlights': ['The H2 is styled with a font size of 15 pixels, font weight of 900 pixels, and a margin bottom of 5 pixels, enhancing the appearance of the text.', 'The H3 is targeted using a nested CSS selector to apply flexbox and center the text and icon, resulting in a cleaner look with a font size of 13 pixels and a font weight of 400 pixels.', 'The tutorial demonstrates the use of nested CSS selectors to apply styles to specific elements, providing flexibility in organizing and maintaining the main page layout.', 'The chapter emphasizes using CSS selectors and properties to create a visually appealing and organized user interface, catering to individual preferences and coding practices.', 'Alex donates $25, encountering issues with a JavaScript course payment. Alex made a $25 donation and mentioned encountering payment issues for a JavaScript course.', 'YMO donates $20 expressing learning React and potential career change. YMO donated $20 and mentioned learning React and aspiring to be a full-time React developer.', 'Creating reusable sidebar options using React components. Qazi explains the concept of creating a reusable sidebar option component using React and demonstrates its implementation.', 'Discussion on front-end development and satisfaction in small details. Qazi discusses front-end development and the satisfaction derived from small details in the process.', 'Styling sidebar options using BEM naming convention and importing icons The speaker discusses styling the sidebar options using BEM naming convention and importing icons, emphasizing how it has changed their life and benefited the audience.', 'Making the sidebar component customizable and reusing it The speaker demonstrates making the sidebar component highly customizable and reusable, showcasing how it can render different options based on the passed parameters.', 'Adding hover effects and improving aesthetics The speaker explains adding hover effects to the sidebar options to enhance user experience, highlighting the changes in background color and opacity to make the options more interactive and visually appealing.', 'Creating a horizontal row for channels The speaker showcases creating a horizontal row for the channels, demonstrating an additional design element to separate different sections of the sidebar.', "Positive impact on viewers' learning journey, with examples of viewers saving money on courses and receiving job interviews, including an interview with Google. Viewers express gratitude for the React clones, mentioning saving money on courses and receiving job interviews, including an interview with Google.", 'Goal of filling a gap in learning resources for React development and helping developers start or improve their journey through the provided videos. The goal is to fill a gap in learning resources for React development and help developers start or improve their journey through the provided videos.', 'Viewer feedback indicating the impact of the React clones, with examples of positive reception and practical application in portfolios. Viewers share positive feedback and practical application of React clones in portfolios, leading to interview opportunities.']}, {'end': 5810.738, 'segs': [{'end': 5158.482, 'src': 'embed', 'start': 5091.728, 'weight': 0, 'content': [{'end': 5096.914, 'text': 'so you never have to pay for your breakfast or food again because they literally cover that stuff.', 'start': 5091.728, 'duration': 5.186}, {'end': 5102.44, 'text': 'so you pretty much be sorted, guys, learning a job like that, nice.', 'start': 5096.914, 'duration': 5.526}, {'end': 5104.002, 'text': "so we've added the add icon.", 'start': 5102.44, 'duration': 1.562}, {'end': 5112.658, 'text': "so now we've got channel, add channels down here and then The goal is, guys underneath here, once we connect the database right?", 'start': 5104.002, 'duration': 8.656}, {'end': 5114.761, 'text': "So let's go ahead and scroll down a little bit.", 'start': 5113.099, 'duration': 1.662}, {'end': 5120.71, 'text': "So once we've got the database here, what I'm going to do is here I will connect to DB.", 'start': 5114.781, 'duration': 5.929}, {'end': 5122.432, 'text': "So this is basically where I'll connect to DB.", 'start': 5120.79, 'duration': 1.642}, {'end': 5126.037, 'text': 'and list all the channels.', 'start': 5123.474, 'duration': 2.563}, {'end': 5128.619, 'text': 'So list all the rest of the channels.', 'start': 5127.298, 'duration': 1.321}, {'end': 5137.207, 'text': "Again, you guessed it, we'd be using the sidebar option again and again and again and again, but once we connect from the DB.", 'start': 5128.699, 'duration': 8.508}, {'end': 5139.93, 'text': 'So this will basically be mapping through the DB and getting everything.', 'start': 5137.227, 'duration': 2.703}, {'end': 5143.112, 'text': 'once we implement that functionality.', 'start': 5140.79, 'duration': 2.322}, {'end': 5144.733, 'text': 'Just wanna say a few things.', 'start': 5143.252, 'duration': 1.481}, {'end': 5146.634, 'text': 'One, thank you guys so much.', 'start': 5145.093, 'duration': 1.541}, {'end': 5149.736, 'text': 'We just broke over $100 in donations.', 'start': 5146.674, 'duration': 3.062}, {'end': 5151.978, 'text': 'So thank you, thank you, thank you with that.', 'start': 5149.796, 'duration': 2.182}, {'end': 5156.121, 'text': 'We just got another donation that just came in by Shubham.', 'start': 5152.398, 'duration': 3.723}, {'end': 5157.181, 'text': 'So thank you so much for that.', 'start': 5156.141, 'duration': 1.04}, {'end': 5158.482, 'text': 'He says, you guys rock.', 'start': 5157.542, 'duration': 0.94}], 'summary': 'Job covers food expenses, database connection, $100+ in donations received.', 'duration': 66.754, 'max_score': 5091.728, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs5091728.jpg'}, {'end': 5470.862, 'src': 'heatmap', 'start': 5167.148, 'weight': 0.869, 'content': [{'end': 5174.36, 'text': 'Second thing is we just broke over 20,000 views on this video in the last one something hour.', 'start': 5167.148, 'duration': 7.212}, {'end': 5177.13, 'text': "Damn, that's insane.", 'start': 5175.649, 'duration': 1.481}, {'end': 5180.152, 'text': "That's so, that's faster than, oh my God, that's crazy guys.", 'start': 5177.17, 'duration': 2.982}, {'end': 5181.572, 'text': 'We really appreciate that.', 'start': 5180.432, 'duration': 1.14}, {'end': 5182.013, 'text': 'Holy crap.', 'start': 5181.592, 'duration': 0.421}, {'end': 5183.874, 'text': 'Yeah So this is huge.', 'start': 5182.053, 'duration': 1.821}, {'end': 5188.596, 'text': 'All you guys, you know, hitting that like button and we broke over 1000 likes as well, which is huge.', 'start': 5184.014, 'duration': 4.582}, {'end': 5191.438, 'text': 'It really goes out to a lot of other people.', 'start': 5189.277, 'duration': 2.161}, {'end': 5193.799, 'text': "It's a community that we're creating, cultivating.", 'start': 5191.478, 'duration': 2.321}, {'end': 5197.141, 'text': 'And yeah, with that said, thank you guys.', 'start': 5194.579, 'duration': 2.562}, {'end': 5198.622, 'text': "And let's continue with the training.", 'start': 5197.361, 'duration': 1.261}, {'end': 5201.123, 'text': 'Yeah Amazing.', 'start': 5199.802, 'duration': 1.321}, {'end': 5202.144, 'text': 'Love that guys.', 'start': 5201.523, 'duration': 0.621}, {'end': 5203.805, 'text': 'Nice Okay.', 'start': 5202.984, 'duration': 0.821}, {'end': 5206.221, 'text': "So we've got sidebar option.", 'start': 5203.825, 'duration': 2.396}, {'end': 5214.864, 'text': "awesome. so now what we're going to do, guys, is we are actually going to go ahead and um, just connect to db and list all the channels.", 'start': 5206.221, 'duration': 8.643}, {'end': 5215.324, 'text': 'okay, yeah.', 'start': 5214.864, 'duration': 0.46}, {'end': 5222.426, 'text': 'so now what we can actually go ahead and do, i guess at this point, is we could do firebase.', 'start': 5215.324, 'duration': 7.102}, {'end': 5224.387, 'text': "um, yeah, let's actually go ahead and implement firebase.", 'start': 5222.426, 'duration': 1.961}, {'end': 5228.488, 'text': "so now what we're going to do is let's go ahead and head over to firebase.com.", 'start': 5224.387, 'duration': 4.101}, {'end': 5232.875, 'text': "So let's go to firebase.com.", 'start': 5230.652, 'duration': 2.223}, {'end': 5240.625, 'text': "Nice And let's go to, we've created our project, I think, right? Mm-hmm.", 'start': 5233.816, 'duration': 6.809}, {'end': 5242.687, 'text': 'Yes, we set that up in the beginning.', 'start': 5241.107, 'duration': 1.58}, {'end': 5246.128, 'text': 'And then what we want to do is- I love this comment.', 'start': 5243.127, 'duration': 3.001}, {'end': 5248.769, 'text': 'It says, Qazi and team, you guys are on another level.', 'start': 5246.148, 'duration': 2.621}, {'end': 5250.769, 'text': 'All these amazing Qazi at Clever.', 'start': 5248.929, 'duration': 1.84}, {'end': 5252.349, 'text': "I'm going to switch to this email.", 'start': 5250.789, 'duration': 1.56}, {'end': 5254.25, 'text': "Let's verify.", 'start': 5253.069, 'duration': 1.181}, {'end': 5257.93, 'text': "I'm going to just put the camera on my face while I type in my password.", 'start': 5254.27, 'duration': 3.66}, {'end': 5264.032, 'text': "And then as soon as that will log me in, which I think it's doing, I shared the screen again.", 'start': 5258.771, 'duration': 5.261}, {'end': 5266.472, 'text': "And we're going to pop into our Slack clone that we built.", 'start': 5264.232, 'duration': 2.24}, {'end': 5268.013, 'text': 'And what are we looking for??', 'start': 5267.132, 'duration': 0.881}, {'end': 5269.793, 'text': 'Are we trying to get access to the database Sunny??', 'start': 5268.033, 'duration': 1.76}, {'end': 5273.71, 'text': 'By the way, are we done with the sidebar??', 'start': 5271.048, 'duration': 2.662}, {'end': 5277.712, 'text': "Okay, so let's change the topic.", 'start': 5276.251, 'duration': 1.461}, {'end': 5283.816, 'text': "We're actually still doing it, but I think it'll be more informative if we tell them that we're setting up the database at this point.", 'start': 5277.752, 'duration': 6.064}, {'end': 5290.521, 'text': 'Set up real-time database.', 'start': 5286.278, 'duration': 4.243}, {'end': 5293.565, 'text': 'for slack.', 'start': 5292.745, 'duration': 0.82}, {'end': 5295.926, 'text': 'Nice Okay, cool.', 'start': 5294.286, 'duration': 1.64}, {'end': 5297.547, 'text': "So that's now added there.", 'start': 5295.966, 'duration': 1.581}, {'end': 5300.488, 'text': 'And this is good, right? Register app.', 'start': 5298.207, 'duration': 2.281}, {'end': 5301.428, 'text': 'Yeah, this is all good.', 'start': 5300.548, 'duration': 0.88}, {'end': 5308.131, 'text': "Nice And then we're going to do is Yeah, we don't need this, guys.", 'start': 5304.45, 'duration': 3.681}, {'end': 5310.232, 'text': 'And to install the modules.', 'start': 5308.151, 'duration': 2.081}, {'end': 5318.665, 'text': 'To install this, so just make sure you copy this and paste this and install Firebase, npm install, global Firebase tools.', 'start': 5311.314, 'duration': 7.351}, {'end': 5321.329, 'text': "So do that if you haven't already installed it.", 'start': 5318.685, 'duration': 2.644}, {'end': 5323.513, 'text': 'You guys might need to do sudo as well.', 'start': 5321.349, 'duration': 2.164}, {'end': 5325.235, 'text': "Now we're going to need to go database, Sonny.", 'start': 5323.573, 'duration': 1.662}, {'end': 5328.478, 'text': 'So yeah, so we can do that now.', 'start': 5326.616, 'duration': 1.862}, {'end': 5331.161, 'text': "So let's go to database and then let's click on create database.", 'start': 5328.518, 'duration': 2.643}, {'end': 5333.564, 'text': "Oh, you're trying to get the config, huh? I see.", 'start': 5331.742, 'duration': 1.822}, {'end': 5334.506, 'text': 'I see.', 'start': 5334.225, 'duration': 0.281}, {'end': 5335.927, 'text': "Yeah We'll do that one afterwards.", 'start': 5334.546, 'duration': 1.381}, {'end': 5337.069, 'text': "Yeah And then we'll do the config.", 'start': 5335.967, 'duration': 1.102}, {'end': 5339.111, 'text': 'So you got to click on start in test mode.', 'start': 5337.089, 'duration': 2.022}, {'end': 5340.393, 'text': "We're going to go in test mode.", 'start': 5339.332, 'duration': 1.061}, {'end': 5343.617, 'text': 'Yep Hit done and just choose, leave it as default.', 'start': 5340.433, 'duration': 3.184}, {'end': 5345.059, 'text': "You guys, we're going to hit done here.", 'start': 5343.657, 'duration': 1.402}, {'end': 5353.164, 'text': "then, as soon as this loads, we're gonna show you guys a few things and how we even set up our config file,", 'start': 5345.799, 'duration': 7.365}, {'end': 5369.395, 'text': "and this cloud firestore is gonna be the real-time database where we're gonna be storing the comments and the profile images and the avatar images and the timestamps for each text message that comes through Exactly.", 'start': 5353.164, 'duration': 16.231}, {'end': 5379.798, 'text': 'So, once this is done, guys, what we need to do is we basically have a front-end, so we have React and we also want to connect the back-end,', 'start': 5369.415, 'duration': 10.383}, {'end': 5381.758, 'text': 'so our Firebase back-end.', 'start': 5379.798, 'duration': 1.96}, {'end': 5383.659, 'text': 'So how do we do that? We need a config.', 'start': 5381.798, 'duration': 1.861}, {'end': 5386.699, 'text': "Yeah So now let's go to config.", 'start': 5384.659, 'duration': 2.04}, {'end': 5388.78, 'text': "Boom So I'm going to go Project Settings.", 'start': 5387.259, 'duration': 1.521}, {'end': 5391.141, 'text': 'Boom, just config.', 'start': 5390.08, 'duration': 1.061}, {'end': 5393.523, 'text': "And I'm going to hit copy over here.", 'start': 5391.781, 'duration': 1.742}, {'end': 5402.81, 'text': "And once that's done, I will open up files here, open up a new file in source, and then I'll just do firebase.js.", 'start': 5394.083, 'duration': 8.727}, {'end': 5405.472, 'text': 'And I like to just paste it here and hit save.', 'start': 5403.41, 'duration': 2.062}, {'end': 5408.674, 'text': "Exactly So that's perfect.", 'start': 5406.652, 'duration': 2.022}, {'end': 5412.58, 'text': 'Once we have that in there, we pretty much have the keys.', 'start': 5409.976, 'duration': 2.604}, {'end': 5415.564, 'text': 'We have the keys to connect our front-end to our back-end.', 'start': 5412.86, 'duration': 2.704}, {'end': 5421.613, 'text': 'So with that said, what we need to do as an extra step is we need to go back to our terminal.', 'start': 5415.945, 'duration': 5.668}, {'end': 5424.498, 'text': "So let's go back to VS Code and do Command J.", 'start': 5422.094, 'duration': 2.404}, {'end': 5428.779, 'text': 'So back to our terminal.', 'start': 5427.197, 'duration': 1.582}, {'end': 5430.522, 'text': "And then there's two command J to bring it up.", 'start': 5429.08, 'duration': 1.442}, {'end': 5435.748, 'text': "And basically here, what we're going to do is we're actually going to go ahead and do npm install.", 'start': 5430.922, 'duration': 4.826}, {'end': 5437.37, 'text': 'Wait, where are you? Hold on.', 'start': 5435.788, 'duration': 1.582}, {'end': 5440.134, 'text': "Are you on two? No, I'm just requested yet.", 'start': 5437.591, 'duration': 2.543}, {'end': 5440.534, 'text': 'There we go.', 'start': 5440.174, 'duration': 0.36}, {'end': 5441.956, 'text': "So now I'm on three.", 'start': 5440.875, 'duration': 1.081}, {'end': 5445.552, 'text': 'ready LS.', 'start': 5443.991, 'duration': 1.561}, {'end': 5446.112, 'text': 'yeah, there we go.', 'start': 5445.552, 'duration': 0.56}, {'end': 5454.295, 'text': 'yeah. so now what you want to do, guys, is firstly CD into the correct directory and then you want to do MPM install.', 'start': 5446.112, 'duration': 8.183}, {'end': 5456.616, 'text': 'so I firebase right.', 'start': 5454.295, 'duration': 2.321}, {'end': 5464.178, 'text': 'this will install firebase into your project and it will pull in all the dependencies that you need to get everything up and running right.', 'start': 5456.616, 'duration': 7.562}, {'end': 5466.279, 'text': "so that's really really simple.", 'start': 5464.178, 'duration': 2.101}, {'end': 5470.862, 'text': "once you can pretty much carry on while that's doing that, and So, at the top of this file,", 'start': 5466.279, 'duration': 4.583}], 'summary': 'The video has gained over 20,000 views and 1000 likes. they are setting up firebase for real-time database.', 'duration': 303.714, 'max_score': 5167.148, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs5167148.jpg'}, {'end': 5532.531, 'src': 'embed', 'start': 5504.727, 'weight': 3, 'content': [{'end': 5511.013, 'text': "Yeah, don't use the real-time database, because it's basically the real-time database is like a big NoSQL database, right?", 'start': 5504.727, 'duration': 6.286}, {'end': 5512.414, 'text': "So it's just a big JSON tree.", 'start': 5511.033, 'duration': 1.381}, {'end': 5514.116, 'text': "But you can't search that tree.", 'start': 5512.814, 'duration': 1.302}, {'end': 5515.096, 'text': "You can't do all that stuff.", 'start': 5514.136, 'duration': 0.96}, {'end': 5517.238, 'text': 'In Firestore, you can search.', 'start': 5515.177, 'duration': 2.061}, {'end': 5518.299, 'text': "There's indexing.", 'start': 5517.378, 'duration': 0.921}, {'end': 5519.32, 'text': "It's faster.", 'start': 5518.459, 'duration': 0.861}, {'end': 5520.922, 'text': "It's a lot more powerful.", 'start': 5519.801, 'duration': 1.121}, {'end': 5523.604, 'text': "And it's a hybrid between NoSQL and SQL.", 'start': 5520.942, 'duration': 2.662}, {'end': 5524.185, 'text': 'you said right?', 'start': 5523.604, 'duration': 0.581}, {'end': 5526.406, 'text': "essentially, yeah, essentially they've.", 'start': 5524.725, 'duration': 1.681}, {'end': 5532.531, 'text': "they've looked at what you can get from a sql database and the sort of disadvantages of using a no sql database,", 'start': 5526.406, 'duration': 6.125}], 'summary': 'Firestore is faster, more powerful, and allows search with indexing. it is a hybrid between nosql and sql.', 'duration': 27.804, 'max_score': 5504.727, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs5504727.jpg'}, {'end': 5816.362, 'src': 'embed', 'start': 5787.758, 'weight': 4, 'content': [{'end': 5794.56, 'text': 'Dude, we all admire you so much as a leader, as just a great human being and a great friend.', 'start': 5787.758, 'duration': 6.802}, {'end': 5797.821, 'text': 'And we all, in a way, even look up to you, dude.', 'start': 5795.34, 'duration': 2.481}, {'end': 5803.283, 'text': 'So thank you so much for being a part of this community and growing Clever Programmer with all of us.', 'start': 5798.181, 'duration': 5.102}, {'end': 5806.764, 'text': "Because Clever Programmer would not be where it's at without Nas.", 'start': 5803.763, 'duration': 3.001}, {'end': 5810.738, 'text': "I don't even think we would have Sonny on the team without Nas.", 'start': 5808.396, 'duration': 2.342}, {'end': 5816.362, 'text': "Yeah And all these live streams we're doing would not be happening without Nas.", 'start': 5811.819, 'duration': 4.543}], 'summary': "Nas is admired as a leader and friend, pivotal to clever programmer's growth and live streams.", 'duration': 28.604, 'max_score': 5787.758, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs5787758.jpg'}], 'start': 5091.728, 'title': 'Database and firebase setup', 'summary': 'Covers connecting to a database, listing all channels, adding new channels, implementing firebase backend, celebrating over $100 in donations, 20,000 views, and over 1000 likes, and highlighting community engagement.', 'chapters': [{'end': 5137.207, 'start': 5091.728, 'title': 'Database connection and channel listing', 'summary': 'Discusses connecting to a database and listing all channels, which will allow for free breakfast and food covered and adding new channels, providing a sorted learning job.', 'duration': 45.479, 'highlights': ['Connecting to a database will result in free breakfast and food being covered, providing a sorted learning job.', 'Listing all channels after connecting to the database will be done via the sidebar option.', 'Adding new channels is made possible by the addition of the add icon.']}, {'end': 5810.738, 'start': 5137.227, 'title': 'Firebase backend setup and community milestones', 'summary': "Covers the implementation of firebase backend, celebrating over $100 in donations, 20,000 views on the video, and over 1000 likes, while also highlighting the community's engagement and the significance of firestore over the real-time database in firebase.", 'duration': 673.511, 'highlights': ['The chapter covers the implementation of Firebase backend, celebrating over $100 in donations, 20,000 views on the video, and over 1000 likes. The team celebrates breaking over $100 in donations, reaching over 20,000 views on the video, and surpassing 1000 likes, showcasing community engagement and support.', 'The significance of Firestore over the real-time database in Firebase is discussed, emphasizing its advantages in searching, indexing, speed, and functionality. The discussion emphasizes the advantages of Firestore over the real-time database in Firebase, highlighting its capabilities in searching, indexing, speed, and overall functionality.', "Acknowledgment and appreciation for Nas's contribution to Clever Programmer as a leader and main JavaScript instructor. The team expresses admiration and gratitude to Nas for his leadership, instruction, and contributions to the Clever Programmer community, recognizing his significant role in the team's growth."]}], 'duration': 719.01, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs5091728.jpg', 'highlights': ['Listing all channels after connecting to the database will be done via the sidebar option.', 'Adding new channels is made possible by the addition of the add icon.', 'The chapter covers the implementation of Firebase backend, celebrating over $100 in donations, 20,000 views on the video, and over 1000 likes.', 'The significance of Firestore over the real-time database in Firebase is discussed, emphasizing its advantages in searching, indexing, speed, and functionality.', "Acknowledgment and appreciation for Nas's contribution to Clever Programmer as a leader and main JavaScript instructor."]}, {'end': 7791.224, 'segs': [{'end': 6074.867, 'src': 'embed', 'start': 6046.794, 'weight': 4, 'content': [{'end': 6051.315, 'text': 'And then what we can do is for each of those rooms, we can actually add another collection within them called messages.', 'start': 6046.794, 'duration': 4.521}, {'end': 6055.696, 'text': "So let's go ahead and add a collection inside of one of those rooms.", 'start': 6051.335, 'duration': 4.361}, {'end': 6056.737, 'text': 'So not here.', 'start': 6055.736, 'duration': 1.001}, {'end': 6061.077, 'text': 'So if you see on the right, So inside the document, you can add another collection.', 'start': 6057.157, 'duration': 3.92}, {'end': 6065.2, 'text': 'So inside the general, so you see on the right, it says start collection.', 'start': 6061.897, 'duration': 3.303}, {'end': 6067.261, 'text': 'Ah, right here.', 'start': 6066.621, 'duration': 0.64}, {'end': 6074.867, 'text': "So we're now trying to create, this is how we basically create like a relational database inside of here, right? Yeah.", 'start': 6068.142, 'duration': 6.725}], 'summary': 'Creating a relational database by adding collections within rooms.', 'duration': 28.073, 'max_score': 6046.794, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs6046794.jpg'}, {'end': 6946.73, 'src': 'heatmap', 'start': 6794.732, 'weight': 0.841, 'content': [{'end': 6801.976, 'text': "right like this, and if i save it right, so kazi, let's get the localhost on the right yep.", 'start': 6794.732, 'duration': 7.244}, {'end': 6804.523, 'text': 'And this is a moment of truth.', 'start': 6803.281, 'duration': 1.242}, {'end': 6807.566, 'text': "So firstly, we need to import use effect because we're using that.", 'start': 6804.563, 'duration': 3.003}, {'end': 6809.669, 'text': "So let's go ahead and import that at the top.", 'start': 6807.626, 'duration': 2.043}, {'end': 6810.63, 'text': 'Use effect.', 'start': 6810.189, 'duration': 0.441}, {'end': 6817.678, 'text': 'Boom And now, guys, as soon as I save this, this should be connecting to the database with this magic over here.', 'start': 6810.67, 'duration': 7.008}, {'end': 6822.688, 'text': 'It should be setting the channels array, right? So it should be updating the channels array.', 'start': 6818.527, 'duration': 4.161}, {'end': 6824.949, 'text': 'And we get this ID and name structure back.', 'start': 6823.068, 'duration': 1.881}, {'end': 6832.191, 'text': 'And then what happens is it will essentially go down here and it will re-render the channels onto the screen.', 'start': 6825.409, 'duration': 6.782}, {'end': 6836.792, 'text': 'So we should see now two channels at the bottom of the screen if everything went well.', 'start': 6832.231, 'duration': 4.561}, {'end': 6838.273, 'text': "So let's go ahead and save this.", 'start': 6836.953, 'duration': 1.32}, {'end': 6841.831, 'text': 'and oh okay.', 'start': 6839.51, 'duration': 2.321}, {'end': 6845.313, 'text': 'so it says the collection is not a function.', 'start': 6841.831, 'duration': 3.482}, {'end': 6847.333, 'text': "so let's go ahead and debug this.", 'start': 6845.313, 'duration': 2.02}, {'end': 6852.996, 'text': "so we've got db.collection rooms on snapshot set channels.", 'start': 6847.333, 'duration': 5.663}, {'end': 6856.167, 'text': "So let's see why this is happening.", 'start': 6854.847, 'duration': 1.32}, {'end': 6858.088, 'text': "So we're importing DB from Firebase.", 'start': 6856.187, 'duration': 1.901}, {'end': 6859.188, 'text': "Let's go and check it out.", 'start': 6858.168, 'duration': 1.02}, {'end': 6860.129, 'text': 'So we export this.', 'start': 6859.208, 'duration': 0.921}, {'end': 6862.069, 'text': "Perfect Let's go to sidebar.", 'start': 6860.249, 'duration': 1.82}, {'end': 6865.01, 'text': "Let's save this again because the file doesn't look like it's saved properly.", 'start': 6862.089, 'duration': 2.921}, {'end': 6868.372, 'text': 'Default A collection.', 'start': 6867.071, 'duration': 1.301}, {'end': 6869.872, 'text': 'Let me see why this is happening.', 'start': 6868.572, 'duration': 1.3}, {'end': 6872.933, 'text': 'DB.collection rooms on the snapshot.', 'start': 6869.892, 'duration': 3.041}, {'end': 6877.715, 'text': 'Snapshot Hey, there we go.', 'start': 6872.973, 'duration': 4.742}, {'end': 6878.935, 'text': "Just haven't saved the file.", 'start': 6878.015, 'duration': 0.92}, {'end': 6881.056, 'text': 'Oh, nice.', 'start': 6880.676, 'duration': 0.38}, {'end': 6889.705, 'text': "Yeah, so you guys can see at the bottom there, we've got YouTube and general, right? Whoa, hold up, hold up, hold up.", 'start': 6881.84, 'duration': 7.865}, {'end': 6895.349, 'text': "Okay, it's always nice to see that like come through.", 'start': 6891.607, 'duration': 3.742}, {'end': 6901.313, 'text': 'Yeah So where is our local hosts right here, yeah? Yeah.', 'start': 6895.369, 'duration': 5.944}, {'end': 6910.983, 'text': 'And you are telling me that this YouTube one is coming from our database right here? Yeah.', 'start': 6902.094, 'duration': 8.889}, {'end': 6913.604, 'text': "And remember, because it's using a snapshot.", 'start': 6911.123, 'duration': 2.481}, {'end': 6921.546, 'text': "remember what I said, guys, if we change it or anything happens, it will refire, which means if you change the name right now, cause he's like okay.", 'start': 6913.604, 'duration': 7.942}, {'end': 6922.247, 'text': 'All right.', 'start': 6921.586, 'duration': 0.661}, {'end': 6929.029, 'text': "So let's, so guys, here is the general, right? It's coming straight from the database.", 'start': 6922.307, 'duration': 6.722}, {'end': 6935.391, 'text': "Now to prove our point, we're going to change it from general to Instagram and watch what happens.", 'start': 6929.089, 'duration': 6.302}, {'end': 6940.649, 'text': 'Boom Damn, son.', 'start': 6937.108, 'duration': 3.541}, {'end': 6942.009, 'text': 'That is slick.', 'start': 6941.069, 'duration': 0.94}, {'end': 6946.07, 'text': 'Exactly No refresh, no nothing.', 'start': 6943.069, 'duration': 3.001}, {'end': 6946.73, 'text': 'Guys, come on.', 'start': 6946.11, 'duration': 0.62}], 'summary': 'Developing and testing code to connect to and update a database, resulting in successful display of channels and real-time updates.', 'duration': 151.998, 'max_score': 6794.732, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs6794732.jpg'}, {'end': 6913.604, 'src': 'embed', 'start': 6881.84, 'weight': 3, 'content': [{'end': 6889.705, 'text': "Yeah, so you guys can see at the bottom there, we've got YouTube and general, right? Whoa, hold up, hold up, hold up.", 'start': 6881.84, 'duration': 7.865}, {'end': 6895.349, 'text': "Okay, it's always nice to see that like come through.", 'start': 6891.607, 'duration': 3.742}, {'end': 6901.313, 'text': 'Yeah So where is our local hosts right here, yeah? Yeah.', 'start': 6895.369, 'duration': 5.944}, {'end': 6910.983, 'text': 'And you are telling me that this YouTube one is coming from our database right here? Yeah.', 'start': 6902.094, 'duration': 8.889}, {'end': 6913.604, 'text': "And remember, because it's using a snapshot.", 'start': 6911.123, 'duration': 2.481}], 'summary': 'Discussion about youtube and general data sources from the local database.', 'duration': 31.764, 'max_score': 6881.84, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs6881840.jpg'}, {'end': 7324.329, 'src': 'embed', 'start': 7291.146, 'weight': 0, 'content': [{'end': 7293.067, 'text': 'This is going to handle all the routing.', 'start': 7291.146, 'duration': 1.921}, {'end': 7295.367, 'text': 'When I say routing, I mean the page routing.', 'start': 7293.487, 'duration': 1.88}, {'end': 7300.809, 'text': "We're going to check all of our contents of the app inside of our routing, so our router.", 'start': 7295.407, 'duration': 5.402}, {'end': 7310.151, 'text': "What we're going to say now is that we're going to say, we always want to show the header regardless of what we're inside of.", 'start': 7302.409, 'duration': 7.742}, {'end': 7315.693, 'text': 'Then inside the app body, so remember we spoke about this before and we have the logic here for the sidebar.', 'start': 7310.712, 'duration': 4.981}, {'end': 7318.914, 'text': "What I'm going to have here is a switch, something called a switch.", 'start': 7315.713, 'duration': 3.201}, {'end': 7324.329, 'text': "What a switch does is essentially it basically checks the route that we're in.", 'start': 7320.027, 'duration': 4.302}], 'summary': 'Handling page routing with a switch to check current route.', 'duration': 33.183, 'max_score': 7291.146, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs7291146.jpg'}], 'start': 5811.819, 'title': 'Real-time firebase integration in react', 'summary': 'Covers the creation of firestore rooms and messages, real-time database access in the sidebar component, integration with react router, and react chat component creation. it includes implementing real-time database access, react router, and chat component creation, with a live donation of $10 mentioned.', 'chapters': [{'end': 6365.318, 'start': 5811.819, 'title': 'Creating firestore rooms and messages', 'summary': 'Discusses the process of creating firestore rooms and messages, including adding a collection called rooms, setting up a collection called messages, and using the useeffect hook to populate the sidebar with a list of channels using react.', 'duration': 553.499, 'highlights': ['The chapter discusses the process of creating Firestore rooms and messages. The transcript primarily focuses on creating Firestore rooms and messages, demonstrating the steps for adding a collection called Rooms and setting up a collection called Messages.', 'Adding a collection called Rooms and setting up a collection called Messages. The transcript includes detailed steps for adding a collection called Rooms in Firestore and setting up a collection called Messages within a room, including defining the structure of the message document.', 'Using the useEffect hook to populate the sidebar with a list of channels using React. The chapter explains the use of the useEffect hook in React to populate the sidebar with a list of channels, demonstrating the syntax and functionality of the useEffect hook.']}, {'end': 6704.511, 'start': 6365.318, 'title': 'Real-time database access in sidebar component', 'summary': "Discusses the implementation of real-time database access in the sidebar component, with an emphasis on the impact on users' lives and the motivation it provides, as well as the specific code implementation to run once when the sidebar component loads, and the process of accessing and mapping through the database snapshots and documents.", 'duration': 339.193, 'highlights': ["The chapter discusses the implementation of real-time database access in the sidebar component, highlighting the positive impact on users' lives and the motivation it provides.", 'Detailed explanation of the code implementation to run once when the sidebar component loads, with an emphasis on specifying empty dependencies and accessing the database.', 'Explanation of accessing and mapping through the database snapshots and documents, including the process of looping over each document and retrieving specific data such as IDs and names.']}, {'end': 7220.418, 'start': 6705.291, 'title': 'Real-time database integration and react router', 'summary': 'Demonstrates real-time integration with firebase, updating channels and rendering them onto the screen, allowing seamless switching between channels without refreshing using react router, and plans to utilize the react context api for authentication.', 'duration': 515.127, 'highlights': ['The chapter demonstrates real-time integration with Firebase, updating channels and rendering them onto the screen, allowing seamless switching between channels without refreshing using React Router.', 'The app loads with access to channels on the side, providing a clean and efficient user interface.', 'The completion of the sidebar and the plans to utilize the React context API for authentication.', 'The demonstration of seamlessly switching between TikTok and Instagram without refreshing, similar to the fast switching ability shown in the example.']}, {'end': 7432.459, 'start': 7220.818, 'title': 'React router implementation', 'summary': 'Covers the implementation of react router, showing how to handle page routing and render appropriate screens based on the route, with a live donation of $10 and upcoming coaching call mentioned.', 'duration': 211.641, 'highlights': ['The chapter covers the implementation of React Router, showing how to handle page routing and render appropriate screens based on the route, with a live donation of $10 and upcoming coaching call mentioned.', 'A live donation of $10 was made during the session.', 'Mentions an upcoming React coaching call with Sunny.']}, {'end': 7791.224, 'start': 7432.459, 'title': 'React chat component creation', 'summary': 'Details the creation of a chat component in react, utilizing the use params hook to retrieve parameters from the url, demonstrating the use of react hooks and providing layout improvements through css.', 'duration': 358.765, 'highlights': ['Creation of chat component and utilization of use params hook for URL parameter retrieval The chapter discusses the creation of a chat component in React and demonstrates the use of the use params hook to retrieve parameters, such as room IDs, from the URL.', 'Demonstration of React hooks and their significance The chapter emphasizes the importance of utilizing React hooks, such as use params, use state, and use effect, and explains their role in simplifying development tasks.', 'Improvement of layout using CSS flexbox and view height property Layout improvements are showcased through the use of CSS flexbox and setting the height of the chat body to 100 view height, providing a more visually appealing design.']}], 'duration': 1979.405, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs5811819.jpg', 'highlights': ['The chapter covers the implementation of React Router, showing how to handle page routing and render appropriate screens based on the route, with a live donation of $10 and upcoming coaching call mentioned.', 'The chapter demonstrates real-time integration with Firebase, updating channels and rendering them onto the screen, allowing seamless switching between channels without refreshing using React Router.', 'Using the useEffect hook to populate the sidebar with a list of channels using React.', 'Creation of chat component and utilization of use params hook for URL parameter retrieval.', 'Improvement of layout using CSS flexbox and view height property.']}, {'end': 9173.517, 'segs': [{'end': 8429.821, 'src': 'heatmap', 'start': 8123.106, 'weight': 0.836, 'content': [{'end': 8129.229, 'text': "We're going to do the same thing for the header left, so as in the channel name.", 'start': 8123.106, 'duration': 6.123}, {'end': 8135.952, 'text': "Firstly, I want to transform it so that way if it ever comes through the database, it will be lowercase because that's how they do it in Slack.", 'start': 8129.389, 'duration': 6.563}, {'end': 8141.6, 'text': 'and secondly, what i want to do is i want to say go and target the little star icon.', 'start': 8136.738, 'duration': 4.862}, {'end': 8145.542, 'text': 'so the little star icon which is inside of the channel name.', 'start': 8141.6, 'duration': 3.942}, {'end': 8154.922, 'text': "so it's inside of channel name and we're saying target it, give it a margin left to 10 pixels and a font of 18 pixels and if i save that, There we go.", 'start': 8145.542, 'duration': 9.38}, {'end': 8157.564, 'text': "We've got the little star, right? We've got the little star going there.", 'start': 8154.942, 'duration': 2.622}, {'end': 8164.908, 'text': "And what we can do now is firstly, I'm going to add a rule of flex grow so it can grow if it needs to grow.", 'start': 8159.185, 'duration': 5.723}, {'end': 8171.692, 'text': "I'm going to say if it does ever overflowed, so the sort of this chat screen, we should be able to scroll it.", 'start': 8164.928, 'duration': 6.764}, {'end': 8177.418, 'text': "then i'm going to say padding bottom of 150 pixels, and this is, i'll explain this one later.", 'start': 8172.575, 'duration': 4.843}, {'end': 8185.061, 'text': 'but padding bottom is basically going to give us quite a nice, clean sort of finish when it comes to, uh, when we add the input at the bottom,', 'start': 8177.418, 'duration': 7.643}, {'end': 8186.862, 'text': "which i'll explain afterwards.", 'start': 8185.061, 'duration': 1.801}, {'end': 8189.644, 'text': "so don't worry if that doesn't make sense now.", 'start': 8186.862, 'duration': 2.782}, {'end': 8190.964, 'text': 'um, okay.', 'start': 8189.644, 'duration': 1.32}, {'end': 8195.187, 'text': "so, with that said, i think the final thing i'm going to do is for the channel name.", 'start': 8190.964, 'duration': 4.223}, {'end': 8196.767, 'text': "i'm going to say display flex.", 'start': 8195.187, 'duration': 1.58}, {'end': 8202.784, 'text': 'so display flex, and that should pull the general in line with the chat.', 'start': 8196.767, 'duration': 6.017}, {'end': 8204.985, 'text': 'okay, nice with the star.', 'start': 8202.784, 'duration': 2.201}, {'end': 8205.584, 'text': 'so there we go.', 'start': 8204.985, 'duration': 0.599}, {'end': 8211.968, 'text': "we've got a nice little header on the chat now which is looking a lot, lot cleaner, right.", 'start': 8205.584, 'duration': 6.384}, {'end': 8214.79, 'text': "um, so that's really really nice, really clean.", 'start': 8211.968, 'duration': 2.822}, {'end': 8216.07, 'text': 'um, awesome.', 'start': 8214.79, 'duration': 1.28}, {'end': 8218.571, 'text': 'so we have header right, done.', 'start': 8216.07, 'duration': 2.501}, {'end': 8223.093, 'text': 'and then now what i want to do is actually have the chat messages and the chat input.', 'start': 8218.571, 'duration': 4.522}, {'end': 8226.615, 'text': 'so, kazi, what do we have on the current activity on the top?', 'start': 8223.093, 'duration': 3.522}, {'end': 8234.88, 'text': "Oh yeah, we're still doing the sort of selecting it and then making it so you enter a room right?", 'start': 8230.638, 'duration': 4.242}, {'end': 8237.123, 'text': "Yeah, yeah, that's how we're doing it.", 'start': 8235.842, 'duration': 1.281}, {'end': 8238.523, 'text': 'yeah, where you add channel.', 'start': 8237.123, 'duration': 1.4}, {'end': 8243.748, 'text': 'In our app, you mean, right? Yeah, basically you add channel and you can add it.', 'start': 8239.424, 'duration': 4.324}, {'end': 8246.651, 'text': 'Okay, so on the sidebar.', 'start': 8243.768, 'duration': 2.883}, {'end': 8248.232, 'text': 'so on that sidebar option.', 'start': 8246.651, 'duration': 1.581}, {'end': 8255.758, 'text': 'what I want to do is I want to have it so that when you click one of those channels, so when you click on this, for example, it should go ahead, and.', 'start': 8248.232, 'duration': 7.526}, {'end': 8258.58, 'text': 'Kind of like this, right, where it allows you to create a channel.', 'start': 8255.758, 'duration': 2.822}, {'end': 8260.769, 'text': 'Yeah, so we need to do that as well.', 'start': 8259.588, 'duration': 1.181}, {'end': 8261.749, 'text': 'Yeah, exactly.', 'start': 8260.949, 'duration': 0.8}, {'end': 8264.191, 'text': "So let's go ahead and do that one first.", 'start': 8262.228, 'duration': 1.963}, {'end': 8265.511, 'text': 'So sidebar option.', 'start': 8264.37, 'duration': 1.141}, {'end': 8271.034, 'text': 'So for the sidebar, so we want to have a add channel icon, right? So this one, add channel icon.', 'start': 8265.611, 'duration': 5.423}, {'end': 8277.878, 'text': 'And you see, what I can do is I can pass another prop in called add channel option, right? So this is add channel option.', 'start': 8271.074, 'duration': 6.804}, {'end': 8283.941, 'text': 'So this is basically going to be a prop that supercharges that one which says if you have this, do some stuff right?', 'start': 8277.897, 'duration': 6.044}, {'end': 8288.664, 'text': "So what I'm going to do is go inside of sidebar option, include that here.", 'start': 8284.701, 'duration': 3.963}, {'end': 8289.724, 'text': "so i'm going to say include that.", 'start': 8288.664, 'duration': 1.06}, {'end': 8292.726, 'text': "so we have sidebar option and i'm going to say include that.", 'start': 8289.724, 'duration': 3.002}, {'end': 8301.57, 'text': "and then what we're going to say is um, i'm going to say sidebar, one second.", 'start': 8292.726, 'duration': 8.844}, {'end': 8303.611, 'text': 'we have sidebar.', 'start': 8301.57, 'duration': 2.041}, {'end': 8304.611, 'text': 'yep, sidebar option.', 'start': 8303.611, 'duration': 1}, {'end': 8306.812, 'text': 'make sure it looks clean right.', 'start': 8304.611, 'duration': 2.201}, {'end': 8309.013, 'text': 'yeah, exactly, it looked really nice and clean.', 'start': 8306.812, 'duration': 2.201}, {'end': 8314.156, 'text': 'oh, there we go.', 'start': 8309.013, 'duration': 5.143}, {'end': 8316.232, 'text': 'Had to get the GIFs out.', 'start': 8315.151, 'duration': 1.081}, {'end': 8320.034, 'text': "Can't resist it, you know?", 'start': 8318.833, 'duration': 1.201}, {'end': 8323.837, 'text': 'So now what we want to do, guys, is two things right?', 'start': 8321.235, 'duration': 2.602}, {'end': 8331.701, 'text': 'So, firstly, what I want to do is I want to have it so that if we have a.', 'start': 8324.357, 'duration': 7.344}, {'end': 8335.384, 'text': 'So, for example, if I click on any of the channels right?', 'start': 8331.701, 'duration': 3.683}, {'end': 8343.189, 'text': 'So you noticed how, when we added those channels, we gave the channels at the bottom so that the ones like the channel ID.', 'start': 8335.424, 'duration': 7.765}, {'end': 8349.055, 'text': "the ones that we pulled from the database, we gave it an ID, right? So what I'm going to do is I'm also going to pass those through.", 'start': 8344.091, 'duration': 4.964}, {'end': 8353.638, 'text': "So I'm going to say, if you've got an ID, and some of them are going to have add channel options.", 'start': 8349.075, 'duration': 4.563}, {'end': 8360.102, 'text': 'So what are we trying to achieve here? So inside that sidebar option, if firstly, so we want to basically have it.', 'start': 8353.678, 'duration': 6.424}, {'end': 8362.763, 'text': 'So this div right?', 'start': 8360.242, 'duration': 2.521}, {'end': 8366.826, 'text': "So this div that you can pretty much hover over, I'm going to say if you click it right?", 'start': 8362.784, 'duration': 4.042}, {'end': 8371.906, 'text': 'If you click it and you have that add channel option right?', 'start': 8366.887, 'duration': 5.019}, {'end': 8379.49, 'text': "So the one where we have that channel option, then I want you to basically fire off the add channel function, which we haven't wrote yet.", 'start': 8371.947, 'duration': 7.543}, {'end': 8384.191, 'text': 'Otherwise I want you to fire off something called a select channel option.', 'start': 8380.17, 'duration': 4.021}, {'end': 8388.733, 'text': "So select channel, right? And now we don't have any of these.", 'start': 8384.312, 'duration': 4.421}, {'end': 8391.495, 'text': 'Can you just explain what this means like visually?', 'start': 8389.214, 'duration': 2.281}, {'end': 8396.296, 'text': 'So, for example, if I go to real slack, so what does this functionality do?', 'start': 8391.515, 'duration': 4.781}, {'end': 8397.917, 'text': "that we're trying to add on click?", 'start': 8396.296, 'duration': 1.621}, {'end': 8401.868, 'text': "So I'm saying if you've clicked the add channel, so here they have a add channel.", 'start': 8398.706, 'duration': 3.162}, {'end': 8402.788, 'text': 'So like a plus sign like this.', 'start': 8401.888, 'duration': 0.9}, {'end': 8405.209, 'text': 'Yeah Here they have a plus sign.', 'start': 8403.268, 'duration': 1.941}, {'end': 8407.15, 'text': 'We just have it as a option.', 'start': 8405.249, 'duration': 1.901}, {'end': 8409.411, 'text': 'So it looks like one of the options that you can click.', 'start': 8407.29, 'duration': 2.121}, {'end': 8410.172, 'text': 'Got it.', 'start': 8409.912, 'duration': 0.26}, {'end': 8415.935, 'text': "But we're saying, if it's that special type of button and we click on the create channel,", 'start': 8410.192, 'duration': 5.743}, {'end': 8422.198, 'text': "then we want it to basically pop up with like a little alert saying we'll enter the channel name and it should create the channel for us.", 'start': 8415.935, 'duration': 6.263}, {'end': 8423.118, 'text': 'Got it.', 'start': 8422.778, 'duration': 0.34}, {'end': 8424.019, 'text': 'Yeah Right.', 'start': 8423.378, 'duration': 0.641}, {'end': 8428.381, 'text': "Otherwise, if it's not that one, when we click on the channel, it should just select the channel.", 'start': 8424.459, 'duration': 3.922}, {'end': 8429.821, 'text': 'Got it.', 'start': 8429.421, 'duration': 0.4}], 'summary': 'Styling header and sidebar, adding functionality for channel selection and creation.', 'duration': 306.715, 'max_score': 8123.106, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs8123106.jpg'}, {'end': 8154.922, 'src': 'embed', 'start': 8129.389, 'weight': 2, 'content': [{'end': 8135.952, 'text': "Firstly, I want to transform it so that way if it ever comes through the database, it will be lowercase because that's how they do it in Slack.", 'start': 8129.389, 'duration': 6.563}, {'end': 8141.6, 'text': 'and secondly, what i want to do is i want to say go and target the little star icon.', 'start': 8136.738, 'duration': 4.862}, {'end': 8145.542, 'text': 'so the little star icon which is inside of the channel name.', 'start': 8141.6, 'duration': 3.942}, {'end': 8154.922, 'text': "so it's inside of channel name and we're saying target it, give it a margin left to 10 pixels and a font of 18 pixels and if i save that, There we go.", 'start': 8145.542, 'duration': 9.38}], 'summary': 'Transform text to lowercase for database, style star icon in channel name.', 'duration': 25.533, 'max_score': 8129.389, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs8129389.jpg'}, {'end': 8439.069, 'src': 'embed', 'start': 8410.192, 'weight': 3, 'content': [{'end': 8415.935, 'text': "But we're saying, if it's that special type of button and we click on the create channel,", 'start': 8410.192, 'duration': 5.743}, {'end': 8422.198, 'text': "then we want it to basically pop up with like a little alert saying we'll enter the channel name and it should create the channel for us.", 'start': 8415.935, 'duration': 6.263}, {'end': 8423.118, 'text': 'Got it.', 'start': 8422.778, 'duration': 0.34}, {'end': 8424.019, 'text': 'Yeah Right.', 'start': 8423.378, 'duration': 0.641}, {'end': 8428.381, 'text': "Otherwise, if it's not that one, when we click on the channel, it should just select the channel.", 'start': 8424.459, 'duration': 3.922}, {'end': 8429.821, 'text': 'Got it.', 'start': 8429.421, 'duration': 0.4}, {'end': 8439.069, 'text': "Okay So firstly, let's go ahead and tackle the select channel, right? So what we're going to do is I'm going to write const select channel.", 'start': 8429.962, 'duration': 9.107}], 'summary': 'Developing a feature to create and select channels, aiming for a smooth user experience.', 'duration': 28.877, 'max_score': 8410.192, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs8410192.jpg'}, {'end': 8531.559, 'src': 'embed', 'start': 8502.079, 'weight': 1, 'content': [{'end': 8503.539, 'text': "So what is this? It's history.", 'start': 8502.079, 'duration': 1.46}, {'end': 8510.962, 'text': 'So history is whenever you click on a link or you go back a page, forward a page, the way that a web browser does that is,', 'start': 8504.58, 'duration': 6.382}, {'end': 8513.703, 'text': 'it has like a track record called history, right? Yeah.', 'start': 8510.962, 'duration': 2.741}, {'end': 8515.284, 'text': "And what we're going to do in this case?", 'start': 8514.123, 'duration': 1.161}, {'end': 8522.966, 'text': "we're going to say when you click on that icon or you click on this sort of channel, we're going to push the next page into history.", 'start': 8515.284, 'duration': 7.682}, {'end': 8524.747, 'text': "So we're going to basically force a redirect.", 'start': 8522.987, 'duration': 1.76}, {'end': 8526.908, 'text': 'Okay Got it.', 'start': 8525.988, 'duration': 0.92}, {'end': 8528.776, 'text': "Yes, we're basically going to redirect you.", 'start': 8527.335, 'duration': 1.441}, {'end': 8530.538, 'text': 'Pranav1 just donated.', 'start': 8529.257, 'duration': 1.281}, {'end': 8531.559, 'text': 'He says, great work, guys.', 'start': 8530.558, 'duration': 1.001}], 'summary': 'Web browser history tracks user navigation and enables forced redirects. pranav1 donated.', 'duration': 29.48, 'max_score': 8502.079, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs8502079.jpg'}, {'end': 8709.76, 'src': 'embed', 'start': 8683.381, 'weight': 0, 'content': [{'end': 8692.749, 'text': "I'm going to say if you have a channel name, go to the DB, go to the collection rooms and add you guessed it,", 'start': 8683.381, 'duration': 9.368}, {'end': 8696.511, 'text': 'add a document in there with the name of channel name.', 'start': 8692.749, 'duration': 3.762}, {'end': 8702.215, 'text': 'So this will pretty much go in and add a room with that channel name, and it will give it the name key.', 'start': 8696.731, 'duration': 5.484}, {'end': 8709.76, 'text': 'And then basically, because we render everything based off that and we have a real-time listener attached, that should work as easy as that, guys.', 'start': 8702.315, 'duration': 7.445}], 'summary': 'Add channel name to db collection rooms to create room with real-time listener.', 'duration': 26.379, 'max_score': 8683.381, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs8683381.jpg'}, {'end': 9135.613, 'src': 'embed', 'start': 9105.323, 'weight': 4, 'content': [{'end': 9110.966, 'text': 'So useState, useEffect, save.', 'start': 9105.323, 'duration': 5.643}, {'end': 9114.988, 'text': 'Yep And it should be refreshing.', 'start': 9113.187, 'duration': 1.801}, {'end': 9123.569, 'text': "Okay, so now it's saying document is not a function because we're doing DB, doc collection.", 'start': 9118.9, 'duration': 4.669}, {'end': 9126.435, 'text': "Oh, sorry, it's not doc, it's doc, guys.", 'start': 9123.89, 'duration': 2.545}, {'end': 9127.718, 'text': "Sorry, it's doc, yeah.", 'start': 9126.636, 'duration': 1.082}, {'end': 9132.831, 'text': 'Awesome And now if you click on, say that.', 'start': 9130.31, 'duration': 2.521}, {'end': 9135.613, 'text': 'And I just want to share, I want to share this with you guys as well.', 'start': 9132.912, 'duration': 2.701}], 'summary': 'Discussion on using usestate, useeffect, and resolving document function issue.', 'duration': 30.29, 'max_score': 9105.323, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs9105323.jpg'}], 'start': 7791.224, 'title': 'Implementing dynamic room id in url', 'summary': 'Explains implementing dynamic room id in the url using database operations, useeffect, and usestate, with practical walkthrough and recommended resources. it also covers react router dom and dynamic web development, including history manipulation, dynamic url redirection, and real-time database updates through coding examples.', 'chapters': [{'end': 8031.608, 'start': 7791.224, 'title': 'Using hooks in functional components', 'summary': 'Discusses the usage of hooks like usestate and useeffect in functional components, emphasizing their exclusivity to functional components and demonstrating the implementation of chat header with channel name, hashtag, and icons.', 'duration': 240.384, 'highlights': ['The chapter explains the usage of hooks like useState and useEffect in functional components, exclusively, and highlights the inability to use them in class-based components.', 'It demonstrates the implementation of a chat header with channel name, hashtag, and icons, paving the way for future database integration and styling enhancements.', 'The chat header design includes elements like the channel name, hashtag, star outline, and info outlined, providing a visual representation of room details and functionality to be implemented.']}, {'end': 8145.542, 'start': 8031.608, 'title': 'Optimizing chat header styling', 'summary': 'Outlines the process of styling a chat header, including using display flex, padding of 20 pixels, and font size adjustments to achieve a clean and cohesive look.', 'duration': 113.934, 'highlights': ['Using display flex and align center to create a neat and organized layout for the chat header.', 'Applying padding of 20 pixels to provide adequate spacing within the chat header.', 'Adjusting font size to enhance visual appeal and ensure alignment of elements within the header.', 'Utilizing margin and font size adjustments to customize the positioning and appearance of specific icons within the header.']}, {'end': 8458.429, 'start': 8145.542, 'title': 'Styling chat interface and adding channel options', 'summary': 'Covers styling the chat interface by adding margin, padding, and flex display, then introduces the process of adding channel options with the ability to select or add channels based on user interaction.', 'duration': 312.887, 'highlights': ['Introduced styling for the chat interface by setting margin, padding, and flex display, resulting in a cleaner and organized appearance.', 'Discussed the process of adding channel options, including the functionality to select or add channels based on user interaction, with the aim of creating a pop-up alert for adding channels and selecting channels when clicking on them.']}, {'end': 8870.892, 'start': 8458.509, 'title': 'React router dom and dynamic web development', 'summary': 'Explains the usage of react router dom and dynamic web development, including the implementation of history manipulation, dynamic url redirection, and real-time database updates through practical coding examples.', 'duration': 412.383, 'highlights': ['The usage of React Router DOM and history manipulation in web development is simplified, enabling dynamic URL changes and redirection. React Router DOM provides a simplified way of manipulating history, allowing dynamic URL changes and redirection, enhancing the user experience.', 'Real-time database updates are demonstrated through practical coding examples, showcasing the addition of channels and rooms instantly reflecting in the database. Practical demonstrations exhibit real-time database updates, where the addition of channels and rooms instantly reflects in the database, enhancing the responsiveness of the web application.', 'Implementation of dynamic web development techniques ensures efficient loading of necessary content, preventing unnecessary loading of entire applications or channels with numerous messages. Dynamic web development techniques ensure efficient loading of necessary content, preventing unnecessary loading of entire applications or channels with numerous messages, optimizing performance.']}, {'end': 9173.517, 'start': 8871.032, 'title': 'Implementing dynamic room id in url', 'summary': 'Covers implementing dynamic room id in the url, using database operations, useeffect, and usestate, with a practical walkthrough and recommended resources.', 'duration': 302.485, 'highlights': ['Implementing dynamic room ID in the URL with database operations The chapter focuses on using database operations to dynamically populate the room ID in the URL, ensuring a seamless and linked workflow.', 'Explanation of useEffect and useState with practical walkthrough A practical walkthrough of implementing useEffect and useState, with a focus on their functionality and the significance of dependency updates.', 'Recommendation of usehooks.com for powerful hooks A recommendation of usehooks.com as a valuable resource for powerful hooks, adding significant value to coding practices.']}], 'duration': 1382.293, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs7791224.jpg', 'highlights': ['The chapter explains the usage of hooks like useState and useEffect in functional components, exclusively, and highlights the inability to use them in class-based components.', 'The usage of React Router DOM and history manipulation in web development is simplified, enabling dynamic URL changes and redirection.', 'Real-time database updates are demonstrated through practical coding examples, showcasing the addition of channels and rooms instantly reflecting in the database.', 'Implementing dynamic room ID in the URL with database operations The chapter focuses on using database operations to dynamically populate the room ID in the URL, ensuring a seamless and linked workflow.', 'Introduced styling for the chat interface by setting margin, padding, and flex display, resulting in a cleaner and organized appearance.']}, {'end': 10071.378, 'segs': [{'end': 9614.359, 'src': 'heatmap', 'start': 9441.482, 'weight': 3, 'content': [{'end': 9444.645, 'text': 'So whenever you see use history, use parameter, use effect, use state, they will hook.', 'start': 9441.482, 'duration': 3.163}, {'end': 9445.466, 'text': "You know it's a hook.", 'start': 9444.665, 'duration': 0.801}, {'end': 9447.668, 'text': 'Yeah, functional components only.', 'start': 9446.007, 'duration': 1.661}, {'end': 9449.731, 'text': 'Yep, got it.', 'start': 9447.688, 'duration': 2.043}, {'end': 9455.745, 'text': 'Awesome So now we are pulling in the room details, right, which is really, really handy.', 'start': 9450.822, 'duration': 4.923}, {'end': 9460.728, 'text': 'But we also want to do the same thing for the messages.', 'start': 9455.885, 'duration': 4.843}, {'end': 9462.61, 'text': 'So in this case, db.collection rooms.', 'start': 9460.748, 'duration': 1.862}, {'end': 9465.551, 'text': "And then what I'm going to say is go to that room.", 'start': 9463.13, 'duration': 2.421}, {'end': 9469.054, 'text': 'So let me say doc room ID.', 'start': 9465.611, 'duration': 3.443}, {'end': 9470.955, 'text': 'So use the room ID from the URL param.', 'start': 9469.134, 'duration': 1.821}, {'end': 9475.053, 'text': "And then I'm going to say go to the collection inside of it.", 'start': 9471.59, 'duration': 3.463}, {'end': 9481.879, 'text': 'So if it has messages, so remember we had one which we added messages to, right? Go ahead in messages.', 'start': 9475.413, 'duration': 6.466}, {'end': 9485.161, 'text': "And then I'm going to say order those messages.", 'start': 9482.359, 'duration': 2.802}, {'end': 9486.342, 'text': 'Oh, my bad.', 'start': 9485.522, 'duration': 0.82}, {'end': 9488.464, 'text': "It wasn't showing your code for a second.", 'start': 9486.863, 'duration': 1.601}, {'end': 9491.607, 'text': "Okay So we've got collection messages.", 'start': 9488.684, 'duration': 2.923}, {'end': 9494.269, 'text': 'Order by timestamp.', 'start': 9492.127, 'duration': 2.142}, {'end': 9499.854, 'text': "So it's actually going to go into the document, order it by the timestamp in a sending order.", 'start': 9494.469, 'duration': 5.385}, {'end': 9503.141, 'text': 'Then I can attach this now saying on snapshot.', 'start': 9500.74, 'duration': 2.401}, {'end': 9504.561, 'text': 'So this is really powerful.', 'start': 9503.681, 'duration': 0.88}, {'end': 9507.082, 'text': "So what we're doing here, guys, is we're going into the room that you're in.", 'start': 9504.581, 'duration': 2.501}, {'end': 9511.164, 'text': "We're actually going to be checking the messages collection inside that room.", 'start': 9507.582, 'duration': 3.582}, {'end': 9517.326, 'text': "Then what I'm going to do is I'm going to create another piece of state called RoomMessages.", 'start': 9511.804, 'duration': 5.522}, {'end': 9522.187, 'text': "This one is just RoomMessages and I'm basically going to do the following.", 'start': 9519.466, 'duration': 2.721}, {'end': 9524.148, 'text': "So I'm going to say set the RoomMessages.", 'start': 9522.207, 'duration': 1.941}, {'end': 9527.009, 'text': 'In this case, set RoomMessages to snapshot.', 'start': 9524.228, 'duration': 2.781}, {'end': 9529.83, 'text': "So I'll drop this on a new line and say snapshot docs.", 'start': 9527.029, 'duration': 2.801}, {'end': 9537.369, 'text': "maps through every single one, and i'm just going to say go ahead and get me the doc data, all right, which is whatever.", 'start': 9530.74, 'duration': 6.629}, {'end': 9538.751, 'text': 'so remember those things that we added.', 'start': 9537.369, 'duration': 1.382}, {'end': 9546.587, 'text': 'um, so all of the things like um, The message, the user, the user image, all that stuff.', 'start': 9538.751, 'duration': 7.836}, {'end': 9553.51, 'text': "We're going to go ahead and map that into set room images, right? So now, Kazi, what we're going to do is I'm going to go ahead and show you.", 'start': 9546.747, 'duration': 6.763}, {'end': 9559.853, 'text': 'So if we do console.log room messages, so console.log room messages like this.', 'start': 9553.55, 'duration': 6.303}, {'end': 9562.133, 'text': "Now, let's go ahead and check that.", 'start': 9560.513, 'duration': 1.62}, {'end': 9564.014, 'text': 'And then we see snapshot is not defined.', 'start': 9562.233, 'duration': 1.781}, {'end': 9567.115, 'text': "So, oh, I haven't actually done this correctly.", 'start': 9564.674, 'duration': 2.441}, {'end': 9574.831, 'text': 'It should be snapshot ES6 function, right? So now if we go ahead and save this.', 'start': 9567.175, 'duration': 7.656}, {'end': 9581.937, 'text': "So you're looping through the messages in the room and then like writing out all of those messages? Yeah.", 'start': 9575.391, 'duration': 6.546}, {'end': 9586.101, 'text': 'So no, not writing them out, but it should say, so now I should say messages like this.', 'start': 9581.997, 'duration': 4.104}, {'end': 9589.304, 'text': "And let's go ahead and we should see in the console.", 'start': 9586.921, 'duration': 2.383}, {'end': 9592.166, 'text': 'There is some room that has it.', 'start': 9589.904, 'duration': 2.262}, {'end': 9596.63, 'text': "I just don't exactly remember which one it is, but it's one of the ones we had made earlier.", 'start': 9592.286, 'duration': 4.344}, {'end': 9597.291, 'text': "So I'll just..", 'start': 9596.71, 'duration': 0.581}, {'end': 9601.273, 'text': "So right now messages are empty and I'll just keep switching rooms.", 'start': 9597.991, 'duration': 3.282}, {'end': 9604.374, 'text': 'So empty, empty, Instagram has it.', 'start': 9601.593, 'duration': 2.781}, {'end': 9605.115, 'text': 'Boom, there we go.', 'start': 9604.414, 'duration': 0.701}, {'end': 9610.017, 'text': 'And then the messages, yep, this is the message that I had added earlier.', 'start': 9605.535, 'duration': 4.482}, {'end': 9614.359, 'text': "So I'll just prove it to everybody by popping that up on the left-hand side.", 'start': 9610.057, 'duration': 4.302}], 'summary': 'Using hooks to fetch and display messages from different rooms in a chat application.', 'duration': 172.877, 'max_score': 9441.482, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs9441482.jpg'}, {'end': 9638.685, 'src': 'embed', 'start': 9604.414, 'weight': 0, 'content': [{'end': 9605.115, 'text': 'Boom, there we go.', 'start': 9604.414, 'duration': 0.701}, {'end': 9610.017, 'text': 'And then the messages, yep, this is the message that I had added earlier.', 'start': 9605.535, 'duration': 4.482}, {'end': 9614.359, 'text': "So I'll just prove it to everybody by popping that up on the left-hand side.", 'start': 9610.057, 'duration': 4.302}, {'end': 9616.821, 'text': 'And we will go to..', 'start': 9615.4, 'duration': 1.421}, {'end': 9621.451, 'text': 'Instagram, which is right here.', 'start': 9619.77, 'duration': 1.681}, {'end': 9626.836, 'text': 'And here we got messages and inside of this, we got that right there.', 'start': 9621.672, 'duration': 5.164}, {'end': 9638.685, 'text': 'So you guys can see that this message right here matches that message right there.', 'start': 9627.176, 'duration': 11.509}], 'summary': 'Demonstrating message matching between platforms and confirming consistency.', 'duration': 34.271, 'max_score': 9604.414, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs9604414.jpg'}, {'end': 9905.717, 'src': 'heatmap', 'start': 9734.774, 'weight': 1, 'content': [{'end': 9740.116, 'text': "We've got message, timestamp, user, and user image, right? So we've got these four here.", 'start': 9734.774, 'duration': 5.342}, {'end': 9746.998, 'text': "And what we're going to do now is inside of here, the image is going to be, you guessed it, the user image.", 'start': 9740.877, 'duration': 6.121}, {'end': 9753.82, 'text': "So it's going to be user image, right? Then you've got a div, which is going to have the message information.", 'start': 9747.198, 'duration': 6.622}, {'end': 9755.84, 'text': 'And so remember, I like to containerize things.', 'start': 9753.88, 'duration': 1.96}, {'end': 9760.121, 'text': 'So message info is going to live inside of here.', 'start': 9756.3, 'duration': 3.821}, {'end': 9765.483, 'text': "And we're going to have a H4, right? And inside this H4, we're going to have the user's name.", 'start': 9760.161, 'duration': 5.322}, {'end': 9766.623, 'text': "So we're going to have the user's name.", 'start': 9765.503, 'duration': 1.12}, {'end': 9771.086, 'text': "So user and then we're going to have i'm going to span sort of like.", 'start': 9766.663, 'duration': 4.423}, {'end': 9775.707, 'text': "so imagine it would look like this it'll say user and then it will have like some kind of timestamp here.", 'start': 9771.086, 'duration': 4.621}, {'end': 9783.369, 'text': "so i'm just gonna write timestamp and then i'm gonna have a p tag underneath that, just saying the message that they have right.", 'start': 9775.707, 'duration': 7.662}, {'end': 9792.406, 'text': "so just, very simply, i'm just gonna have here is the message or i can just say message, yes, or message like this right message And save it.", 'start': 9783.369, 'duration': 9.037}, {'end': 9795.368, 'text': 'Nice So we have those things in place.', 'start': 9792.927, 'duration': 2.441}, {'end': 9798.59, 'text': "And what I'm going to do just to kind of get this very simply working, I'm going to go here.", 'start': 9795.468, 'duration': 3.122}, {'end': 9801.091, 'text': "I'm basically going to implement this very lightly.", 'start': 9799.17, 'duration': 1.921}, {'end': 9804.473, 'text': "So I'm going to go ahead and say room messages dot map.", 'start': 9801.111, 'duration': 3.362}, {'end': 9807.715, 'text': 'So room messages dot map.', 'start': 9804.553, 'duration': 3.162}, {'end': 9810.27, 'text': 'Then here, you actually get the message.', 'start': 9808.57, 'duration': 1.7}, {'end': 9814.551, 'text': "You're going to say for every message, go ahead and render out the following.", 'start': 9810.29, 'duration': 4.261}, {'end': 9818.412, 'text': "I'm going to say render a message out like this.", 'start': 9814.591, 'duration': 3.821}, {'end': 9823.213, 'text': 'But remember, what we could do is we could have it so it says message.message, message.blah, blah, blah.', 'start': 9818.872, 'duration': 4.341}, {'end': 9826.054, 'text': 'But instead, what we could do is we could destructure it.', 'start': 9823.573, 'duration': 2.481}, {'end': 9827.274, 'text': 'I can split this apart.', 'start': 9826.094, 'duration': 1.18}, {'end': 9829.774, 'text': 'I can say destructure at this point.', 'start': 9827.394, 'duration': 2.38}, {'end': 9832.335, 'text': 'In order to do that, you put a parentheses and you put the destructure.', 'start': 9829.854, 'duration': 2.481}, {'end': 9836.956, 'text': "I'm going to break it apart at this point and say, get the message, timestamp, user, and user image.", 'start': 9832.355, 'duration': 4.601}, {'end': 9840.115, 'text': 'So all of this stuff, and save it.', 'start': 9838.214, 'duration': 1.901}, {'end': 9845.997, 'text': "And now, what we should see is it's going to freak out because something hasn't been done correctly.", 'start': 9840.515, 'duration': 5.482}, {'end': 9848.778, 'text': 'This is because we have an extra.', 'start': 9846.577, 'duration': 2.201}, {'end': 9852.659, 'text': "This is because we have two of these, which we shouldn't have.", 'start': 9850.338, 'duration': 2.321}, {'end': 9853.379, 'text': 'So there we go.', 'start': 9852.719, 'duration': 0.66}, {'end': 9855.26, 'text': 'We save it.', 'start': 9854.72, 'duration': 0.54}, {'end': 9856.78, 'text': "And now I'm going to import message.", 'start': 9855.44, 'duration': 1.34}, {'end': 9866.287, 'text': 'So it says message is not defined as we say import message from message like this, save it.', 'start': 9856.86, 'duration': 9.427}, {'end': 9868.049, 'text': "Now, let's go ahead and see.", 'start': 9866.307, 'duration': 1.742}, {'end': 9870.512, 'text': 'What does that say? Room messages.', 'start': 9868.069, 'duration': 2.443}, {'end': 9882.744, 'text': 'Right. so remember room messages.', 'start': 9881.303, 'duration': 1.441}, {'end': 9888.367, 'text': 'guys, is should actually be firstly, room messages should be a array right?', 'start': 9882.744, 'duration': 5.623}, {'end': 9892.129, 'text': "So it should be an array, because then it won't break the mapping problem.", 'start': 9888.387, 'duration': 3.742}, {'end': 9895.531, 'text': 'So we need to initialize it with an empty piece of states.', 'start': 9892.149, 'duration': 3.382}, {'end': 9896.472, 'text': "That way it doesn't freak out.", 'start': 9895.571, 'duration': 0.901}, {'end': 9902.435, 'text': "So you see now, it actually loaded, but that picture's huge, right? So it actually has Rishi timestamp, and then it has coaching call schedule.", 'start': 9896.772, 'duration': 5.663}, {'end': 9904.296, 'text': "It's right there, so that's good.", 'start': 9903.036, 'duration': 1.26}, {'end': 9905.717, 'text': 'Rishi timestamp, boom.', 'start': 9904.636, 'duration': 1.081}], 'summary': 'Implementing message rendering with user info and timestamp', 'duration': 170.943, 'max_score': 9734.774, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs9734774.jpg'}, {'end': 9919.949, 'src': 'embed', 'start': 9892.149, 'weight': 4, 'content': [{'end': 9895.531, 'text': 'So we need to initialize it with an empty piece of states.', 'start': 9892.149, 'duration': 3.382}, {'end': 9896.472, 'text': "That way it doesn't freak out.", 'start': 9895.571, 'duration': 0.901}, {'end': 9902.435, 'text': "So you see now, it actually loaded, but that picture's huge, right? So it actually has Rishi timestamp, and then it has coaching call schedule.", 'start': 9896.772, 'duration': 5.663}, {'end': 9904.296, 'text': "It's right there, so that's good.", 'start': 9903.036, 'duration': 1.26}, {'end': 9905.717, 'text': 'Rishi timestamp, boom.', 'start': 9904.636, 'duration': 1.081}, {'end': 9907.218, 'text': 'Yeah Yeah.', 'start': 9905.737, 'duration': 1.481}, {'end': 9916.747, 'text': 'Now, so should I give you a smaller image? No, no, no, no, no.', 'start': 9910.252, 'duration': 6.495}, {'end': 9917.488, 'text': "That's really good.", 'start': 9916.888, 'duration': 0.6}, {'end': 9919.949, 'text': 'Cause we actually gonna, we wanna style it.', 'start': 9918.409, 'duration': 1.54}], 'summary': 'Initializing with empty states prevents issues. image loaded with rishi timestamp and coaching call schedule.', 'duration': 27.8, 'max_score': 9892.149, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs9892149.jpg'}], 'start': 9173.517, 'title': 'Real-time room details update', 'summary': "Showcases real-time room details update feature using the latest hooks, fetching data instantly, enabling users to see updates in real-time, and providing a seamless user experience. it also discusses the usage of usehistory, useparams, and useeffect from react and react router dom, along with creating custom hooks, and covers the implementation of fetching and displaying messages from a database in a chat application, utilizing react's optional chaining feature for robustness.", 'chapters': [{'end': 9392.291, 'start': 9173.517, 'title': 'Real-time room details update', 'summary': 'Showcases a real-time room details update feature, using the latest hooks and fetching data instantly, enabling users to see updates in real-time and providing a seamless user experience.', 'duration': 218.774, 'highlights': ['The chapter demonstrates the real-time update of room details, using hooks and fetching data instantly. Showcases the implementation of real-time update feature using the latest hooks and instantly fetching data.', 'Users can see updates in real-time and experience a seamless and fast process. Enables users to see updates in real-time and provides a seamless user experience.', 'The system fetches data and connects to the database instantly, using the room ID. Explains how the system instantly fetches data, connects to the database using the room ID, and provides a fast user experience.']}, {'end': 10071.378, 'start': 9392.351, 'title': 'React hooks and react router dom', 'summary': "Discusses the usage of usehistory, useparams, and useeffect from react and react router dom, along with creating custom hooks. it also covers the implementation of fetching and displaying messages from a database in a chat application, utilizing react's optional chaining feature for robustness.", 'duration': 679.027, 'highlights': ['The chapter explains the usage of useHistory, useParams, and useEffect from React and React Router DOM, along with the possibility of creating custom hooks.', 'It details the process of fetching and displaying messages from a database in a chat application, including setting up state with snapshot data and mapping through messages to render them.', "The implementation of React's optional chaining feature is highlighted, providing a more robust way to handle undefined values and asynchronous operations."]}], 'duration': 897.861, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs9173517.jpg', 'highlights': ['Showcases real-time room details update feature using the latest hooks and instantly fetching data.', 'Enables users to see updates in real-time and provides a seamless user experience.', 'Explains how the system instantly fetches data, connects to the database using the room ID, and provides a fast user experience.', 'Explains the usage of useHistory, useParams, and useEffect from React and React Router DOM, along with creating custom hooks.', 'Details the process of fetching and displaying messages from a database in a chat application, including setting up state with snapshot data and mapping through messages to render them.', "Highlights the implementation of React's optional chaining feature, providing a more robust way to handle undefined values and asynchronous operations."]}, {'end': 11787.653, 'segs': [{'end': 10978.575, 'src': 'embed', 'start': 10955.94, 'weight': 1, 'content': [{'end': 10964.926, 'text': "So, firstly, the login stuff, guys, is extremely secure when it's through Firebase, because we're using their API to handle the authentication,", 'start': 10955.94, 'duration': 8.986}, {'end': 10967.448, 'text': 'which they have then gone and connected to Google.', 'start': 10964.926, 'duration': 2.522}, {'end': 10971.17, 'text': 'They have then gone and connected to the different providers.', 'start': 10967.748, 'duration': 3.422}, {'end': 10975.272, 'text': "And if we're using the email and password authentication, we're using it through their API.", 'start': 10971.57, 'duration': 3.702}, {'end': 10978.575, 'text': 'So this is Google level of authentication.', 'start': 10975.453, 'duration': 3.122}], 'summary': 'Using firebase for extremely secure login with google-level authentication.', 'duration': 22.635, 'max_score': 10955.94, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs10955940.jpg'}, {'end': 11220.637, 'src': 'embed', 'start': 11190.787, 'weight': 0, 'content': [{'end': 11192.448, 'text': "Firstly, I'm going to make it look a little bit nicer.", 'start': 11190.787, 'duration': 1.661}, {'end': 11198.452, 'text': "I'm going to say margin top of 50 pixels, transform the text because by default, Google makes it all uppercase.", 'start': 11192.468, 'duration': 5.984}, {'end': 11201.815, 'text': "So I'm going to say inherit, which makes it the normal as I've written it.", 'start': 11198.472, 'duration': 3.343}, {'end': 11207.759, 'text': "Background color of green because that's some of the ones I've seen designs on and the color of the text is white.", 'start': 11202.395, 'duration': 5.364}, {'end': 11210.741, 'text': "Okay, so that's already a much nicer button than what we saw.", 'start': 11207.899, 'duration': 2.842}, {'end': 11214.873, 'text': "Then what I'm going to go ahead and do.", 'start': 11212.972, 'duration': 1.901}, {'end': 11220.637, 'text': "I'm going to go ahead and say the login container, so the stuff that contains all of that stuff.", 'start': 11214.873, 'duration': 5.764}], 'summary': 'Styling changes made to button: margin top 50px, text transformed to normal case, green background, white text color.', 'duration': 29.85, 'max_score': 11190.787, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs11190787.jpg'}, {'end': 11493.889, 'src': 'embed', 'start': 11431.92, 'weight': 2, 'content': [{'end': 11442.31, 'text': "so const, sign in right, equals e and then boom, and guys, if you are watching still, we're going to be using the react context api very soon.", 'start': 11431.92, 'duration': 10.39}, {'end': 11445.193, 'text': "um so, keep stay tuned if you're interested in that.", 'start': 11442.31, 'duration': 2.883}, {'end': 11450.428, 'text': "uh, here we're gonna say e dot, prevent default, Because we need to.", 'start': 11445.193, 'duration': 5.235}, {'end': 11455.51, 'text': "actually, at this point we don't need, but at this point, yeah, I mean I would include this, but you don't actually need this.", 'start': 11450.428, 'duration': 5.082}, {'end': 11458.291, 'text': 'I previously had it as a form, so I had it as that so.', 'start': 11455.61, 'duration': 2.681}, {'end': 11461.293, 'text': 'But then for now we can get rid of that either prevent default.', 'start': 11459.072, 'duration': 2.221}, {'end': 11470.119, 'text': 'Yeah, And then what we can do is we can actually say or if people who were a lot of people who have been asking what companies are using Firebase.', 'start': 11462.031, 'duration': 8.088}, {'end': 11478.408, 'text': "guys, if you just Google top companies using Firebase, you're going to come up with companies like Instacart, Twitch and many others.", 'start': 11470.119, 'duration': 8.289}, {'end': 11482.812, 'text': 'So go ahead and definitely check that out the resources on stack share.io.', 'start': 11478.848, 'duration': 3.964}, {'end': 11490.646, 'text': 'And you can just see a list of tons and tons of companies using Firebase.', 'start': 11484.76, 'duration': 5.886}, {'end': 11493.889, 'text': 'So yes, lots of big professional companies do use it.', 'start': 11490.686, 'duration': 3.203}], 'summary': 'The speaker discusses using the react context api and mentions companies like instacart and twitch using firebase.', 'duration': 61.969, 'max_score': 11431.92, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs11431920.jpg'}, {'end': 11587.225, 'src': 'embed', 'start': 11558.645, 'weight': 6, 'content': [{'end': 11564.407, 'text': 'um. so now what we can do is we can say auth and guys, this is how crazy it is.', 'start': 11558.645, 'duration': 5.762}, {'end': 11571.037, 'text': 'yeah, dot, sign in with pop-up And you basically pass the provider, which was that Google one.', 'start': 11564.407, 'duration': 6.63}, {'end': 11576.48, 'text': 'And then you say, then when you get a result back, go ahead.', 'start': 11572.018, 'duration': 4.462}, {'end': 11579.181, 'text': "And just for now, let's just go ahead and console log the result.", 'start': 11576.62, 'duration': 2.561}, {'end': 11582.023, 'text': 'Right Right.', 'start': 11581.122, 'duration': 0.901}, {'end': 11587.225, 'text': "And then if there's ever an error, like this is not over complicated things just to catch that error.", 'start': 11582.543, 'duration': 4.682}], 'summary': 'Demonstrating authentication process with google provider and handling errors', 'duration': 28.58, 'max_score': 11558.645, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs11558645.jpg'}, {'end': 11641.185, 'src': 'embed', 'start': 11606.545, 'weight': 3, 'content': [{'end': 11607.386, 'text': 'This is going to break.', 'start': 11606.545, 'duration': 0.841}, {'end': 11608.626, 'text': 'Watch This is going to break.', 'start': 11607.466, 'duration': 1.16}, {'end': 11609.567, 'text': "I'm going to call it before.", 'start': 11608.726, 'duration': 0.841}, {'end': 11611.867, 'text': "It's going to cut off in a sec.", 'start': 11610.626, 'duration': 1.241}, {'end': 11612.508, 'text': 'There we go.', 'start': 11611.967, 'duration': 0.541}, {'end': 11616.452, 'text': 'You see it says the identity provider configuration is disabled.', 'start': 11612.528, 'duration': 3.924}, {'end': 11618.374, 'text': 'Firstly, I just want to point out two things here.', 'start': 11616.532, 'duration': 1.842}, {'end': 11625.32, 'text': 'This is why having a catch is really good because it catches the error, it will show you the error, and it does it in a graceful way.', 'start': 11618.714, 'duration': 6.606}, {'end': 11629.402, 'text': 'So what it means by this, guys, is we need to go over to Firebase right now.', 'start': 11626.221, 'duration': 3.181}, {'end': 11634.783, 'text': "The alert message is actually coming from this line over here where we're catching it.", 'start': 11629.642, 'duration': 5.141}, {'end': 11641.185, 'text': 'So error.message is built in errors in Firebase, huh? And then they just read it out for you.', 'start': 11635.303, 'duration': 5.882}], 'summary': 'The identity provider is disabled, firebase error caught gracefully.', 'duration': 34.64, 'max_score': 11606.545, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs11606545.jpg'}, {'end': 11742.219, 'src': 'embed', 'start': 11709.52, 'weight': 4, 'content': [{'end': 11710.44, 'text': 'We can just go ahead and click.', 'start': 11709.52, 'duration': 0.92}, {'end': 11716.225, 'text': 'Okay Click sign in with Google and look at this guys.', 'start': 11710.48, 'duration': 5.745}, {'end': 11718.659, 'text': 'Whoa OK.', 'start': 11716.933, 'duration': 1.726}, {'end': 11720.926, 'text': 'Click on is come out with a Google login.', 'start': 11718.839, 'duration': 2.087}, {'end': 11722.452, 'text': "That's a good sign.", 'start': 11720.947, 'duration': 1.505}, {'end': 11723.054, 'text': 'And in the console.', 'start': 11722.472, 'duration': 0.582}, {'end': 11727.251, 'text': "Hey, let's go.", 'start': 11724.81, 'duration': 2.441}, {'end': 11731.614, 'text': 'So now if you click that user, so you get a bunch of stuff here, guys.', 'start': 11727.271, 'duration': 4.343}, {'end': 11732.394, 'text': 'You get the user.', 'start': 11731.634, 'duration': 0.76}, {'end': 11733.695, 'text': 'You get some credentials.', 'start': 11732.414, 'duration': 1.281}, {'end': 11735.576, 'text': "And it's really powerful here, guys.", 'start': 11733.755, 'duration': 1.821}, {'end': 11742.219, 'text': 'You actually get a token that you can use with the Google APIs, which is really powerful.', 'start': 11735.596, 'duration': 6.623}], 'summary': 'Demonstrating google login process and accessing user credentials and token.', 'duration': 32.699, 'max_score': 11709.52, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs11709520.jpg'}], 'start': 10071.518, 'title': 'Front-end development and firebase integration', 'summary': 'Covers optional chaining, community support, front-end functionality, google authentication, react, firebase, user authentication, css display grid, and firebase authentication with key points including cleaner code, 30,000 community views, front-end functionality implementation, google authentication addition, user authentication using react and firebase, css display grid for layout, and firebase authentication ease of implementation.', 'chapters': [{'end': 10215.957, 'start': 10071.518, 'title': 'Optional chaining and community support', 'summary': 'Highlights the benefits of optional chaining for cleaner code and emphasizes the importance of a supportive community, with the community recently celebrating 30,000 views and encouraging further engagement through likes.', 'duration': 144.439, 'highlights': ['The community recently achieved 30,000 views, expressing gratitude and encouraging engagement through likes.', 'Emphasizing the importance of surrounding oneself with positive, like-minded individuals for personal and professional growth.', 'Discussing the benefits of optional chaining for cleaner code and nested optional chaining for increased efficiency.']}, {'end': 10715.629, 'start': 10216.017, 'title': 'Front-end functionality and google authentication', 'summary': 'Demonstrates the implementation of front-end functionality including image resizing, timestamp formatting, and message styling, and emphasizes the integration of back-end functionality and the upcoming addition of google authentication with firebase.', 'duration': 499.612, 'highlights': ['The chapter demonstrates the implementation of front-end functionality including image resizing, timestamp formatting, and message styling, and emphasizes the integration of back-end functionality and the upcoming addition of Google Authentication with Firebase.', "The speaker showcases the resizing of images by setting the height and width to 50 pixels and ensuring the aspect ratio is maintained with the 'object-fit: contain' property, resulting in a clean and visually appealing display.", "The speaker illustrates the transformation of timestamps retrieved from a Firebase database using the 'toDate' and 'new Date' functions to convert the timestamp to the correct format and display it in a clean and organized manner, exemplifying 'Rishi's method' as a clear output.", 'The addition of styling to the message timestamp, including changing the color to gray, adjusting the font weight, and adding left padding, contributes to a cleaner and well-spaced interface for message display.', 'The chapter anticipates the integration of Google Authentication with Firebase, highlighting the ease and speed of implementing authentication and expressing an intent to establish a partnership with Firebase, emphasizing the potential benefits for both parties.']}, {'end': 11493.889, 'start': 10715.629, 'title': 'React, firebase, and user authentication', 'summary': 'Discusses implementing user authentication using react and firebase, explaining the process of displaying different components based on user login status, and the security features provided by firebase for secure authentication and deployment.', 'duration': 778.26, 'highlights': ['The chapter discusses implementing user authentication using React and Firebase It covers the process of displaying different components based on user login status and the security features provided by Firebase.', 'The security features provided by Firebase for secure authentication and deployment It explains the security measures, including the use of Firebase API for authentication, connection to Google, and restrictions on accessing the site from unauthorized domains.', 'Companies using Firebase for authentication It mentions professional companies such as Instacart and Twitch using Firebase for authentication and suggests checking resources on stack share.io for more examples.', "Displaying different components based on user login status It explains the process of rendering different components, such as a login page or the rest of the app, based on the user's login status.", 'Explanation of creating a login component and its styling It details the process of creating a login component, including adding a login container, positioning elements, and styling using Material UI.']}, {'end': 11787.653, 'start': 11494.764, 'title': 'Firebase authentication and css display grid', 'summary': 'Discusses the power of css display grid for layout and the process of setting up google authentication using firebase, highlighting the ease of implementation and the retrieval of user data.', 'duration': 292.889, 'highlights': ['The power of CSS display grid for layout is explained, emphasizing its time-saving capabilities and mind-blowing effectiveness. The speaker mentions that using display grid and place items has saved them hours of work and describes it as mind-blowing and very powerful.', 'The process of setting up Google Authentication using Firebase is detailed, highlighting the simplicity of importing auth and provider and the ease of enabling Google sign-in method. The speaker explains the process of importing auth and provider from Firebase, setting it up for Google Auth provider, and enabling the Google sign-in method with ease.', 'The retrieval of user data and the availability of an authenticated token for Google APIs are discussed, showcasing the powerful capabilities of Firebase Authentication. The speaker demonstrates the retrieval of user data and the availability of an authenticated token for Google APIs, highlighting the powerful capabilities of Firebase Authentication.']}], 'duration': 1716.135, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs10071518.jpg', 'highlights': ['30,000 community views achieved, encouraging engagement through likes', 'Optional chaining for cleaner code and increased efficiency', 'Front-end functionality implementation including image resizing and timestamp formatting', 'Upcoming addition of Google Authentication with Firebase', 'User authentication using React and Firebase, displaying different components based on user login status', 'Security features provided by Firebase for secure authentication and deployment', 'Professional companies such as Instacart and Twitch using Firebase for authentication', 'CSS display grid for layout, emphasizing time-saving capabilities and effectiveness', 'Setting up Google Authentication using Firebase, simplicity of importing auth and provider', 'Retrieval of user data and availability of authenticated token for Google APIs using Firebase Authentication']}, {'end': 12873.23, 'segs': [{'end': 12233.13, 'src': 'embed', 'start': 12188.093, 'weight': 0, 'content': [{'end': 12193.397, 'text': "you know we'll have to, like, go inside of app and then chat and then this and then access user like that.", 'start': 12188.093, 'duration': 5.304}, {'end': 12199.061, 'text': 'Instead of that, we wanna have a data layer on the you know, just imagine like one bucket,', 'start': 12193.797, 'duration': 5.264}, {'end': 12202.083, 'text': 'and then we can access the user from anywhere within the app.', 'start': 12199.061, 'duration': 3.022}, {'end': 12207.067, 'text': 'So if we wanna use them within our, component of chat, we can just directly use it.', 'start': 12202.123, 'duration': 4.944}, {'end': 12212.07, 'text': 'If we want to access an inside bar, we can directly use it instead of like.', 'start': 12207.367, 'duration': 4.703}, {'end': 12218.194, 'text': 'if app knows about user, then the way we access users to like drill down every single level.', 'start': 12212.07, 'duration': 6.124}, {'end': 12220.596, 'text': "So that's what we're doing right now.", 'start': 12218.614, 'duration': 1.982}, {'end': 12228.066, 'text': 'With all the technology, when we talk about redux or when we talk about context APIs,', 'start': 12221.076, 'duration': 6.99}, {'end': 12233.13, 'text': "what we're really talking about is this main concept called data layer, this thing right here.", 'start': 12228.066, 'duration': 5.064}], 'summary': 'Proposing a data layer for easy user access across app components.', 'duration': 45.037, 'max_score': 12188.093, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs12188093.jpg'}, {'end': 12715.485, 'src': 'heatmap', 'start': 12554.622, 'weight': 0.725, 'content': [{'end': 12567.324, 'text': 'and now all i need to do, guys, is i need to pass in the initial state, the initial state, initial, oh god, initial state here.', 'start': 12554.622, 'duration': 12.702}, {'end': 12575.186, 'text': 'so initial state like this, and i need to pass in the reducer, so i need to pass in the reducer.', 'start': 12567.324, 'duration': 7.862}, {'end': 12579.048, 'text': 'so the reducer is here, okay, like this.', 'start': 12575.186, 'duration': 3.862}, {'end': 12588.052, 'text': 'and now to get that working, i need to import those correct import those things from the um, from the file that we basically created them in.', 'start': 12579.048, 'duration': 9.004}, {'end': 12591.013, 'text': 'so now i can go ahead, save here, save here.', 'start': 12588.052, 'duration': 2.961}, {'end': 12594.895, 'text': 'and at this point, guys, just to show you guys, state provider, where we set it up.', 'start': 12591.013, 'duration': 3.882}, {'end': 12598.116, 'text': 'remember, it took an initial state and reducer.', 'start': 12594.895, 'duration': 3.221}, {'end': 12601.058, 'text': "those are the ones that we're passing in in index.js.", 'start': 12598.116, 'duration': 2.942}, {'end': 12603.613, 'text': "so here That's how we set everything up.", 'start': 12601.058, 'duration': 2.555}, {'end': 12605.496, 'text': "With that said, that's actually everything set up.", 'start': 12603.653, 'duration': 1.843}, {'end': 12611.343, 'text': 'We actually have at that point set up our data layer and everything is correct and working as it should be.', 'start': 12605.796, 'duration': 5.547}, {'end': 12627.556, 'text': 'With that done, what we can now do is we can pretty much go ahead and pull the user from the data layer instead of pulling this dumb state variable.', 'start': 12613.206, 'duration': 14.35}, {'end': 12633.939, 'text': 'Here what we can do is we can say const, and the way we do it is the first value is the state, the second value is something called dispatch.', 'start': 12627.596, 'duration': 6.343}, {'end': 12638.842, 'text': 'Here we can say useStateValue, and useStateValue is what we set up here.', 'start': 12634.92, 'duration': 3.922}, {'end': 12642.784, 'text': 'Remember this third line, and this is how we essentially pull from the data layer.', 'start': 12638.862, 'duration': 3.922}, {'end': 12654.027, 'text': 'so use state value and what i can say here is i need to import that firstly to import use state value like this And I need to do this.', 'start': 12643.911, 'duration': 10.116}, {'end': 12660.81, 'text': 'So now we actually can, we can get the state and we can destructure and say, go and get the user from the state.', 'start': 12654.067, 'duration': 6.743}, {'end': 12666.593, 'text': "Okay So now if I go ahead and use this one, now what I'm doing is I can go ahead and remove this.", 'start': 12661.291, 'duration': 5.302}, {'end': 12669.215, 'text': "I can say now I'm doing is I'm getting the user from the state.", 'start': 12666.734, 'duration': 2.481}, {'end': 12674.598, 'text': 'And remember guys, when we set this up inside the reducer, we set the initial value of the user to be no.', 'start': 12669.255, 'duration': 5.343}, {'end': 12678.66, 'text': 'Okay So the initial value of these to be known.', 'start': 12676.519, 'duration': 2.141}, {'end': 12685.521, 'text': 'So if I save this now, we should see cause if you actually have the local host open on the right, we should actually see that.', 'start': 12678.68, 'duration': 6.841}, {'end': 12688.662, 'text': 'Yep Let me actually go ahead.', 'start': 12686.642, 'duration': 2.02}, {'end': 12690.643, 'text': "And so let's take a look at that.", 'start': 12688.822, 'duration': 1.821}, {'end': 12693.263, 'text': 'Boom, boom, boom, right there.', 'start': 12691.783, 'duration': 1.48}, {'end': 12694.604, 'text': 'All right.', 'start': 12693.283, 'duration': 1.321}, {'end': 12695.504, 'text': 'And what am I looking at?', 'start': 12694.724, 'duration': 0.78}, {'end': 12704.102, 'text': 'Now we can see that the user in the reducer was by default null, which means that inside of app.js,', 'start': 12697.001, 'duration': 7.101}, {'end': 12709.023, 'text': "it makes sense that it's showing the login page because we're saying there is a null user.", 'start': 12704.102, 'duration': 4.921}, {'end': 12715.485, 'text': "But just to prove it, that it works now, let's say I had a user called Sunny, and I saved it inside the reducer.", 'start': 12709.043, 'duration': 6.442}], 'summary': 'Set up data layer, import state, and retrieve user from data layer.', 'duration': 160.863, 'max_score': 12554.622, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs12554622.jpg'}], 'start': 11788.834, 'title': 'Implementing data layers', 'summary': 'Discusses the coverage of firebase db rules and the potential interest in creating a tutorial video, demonstrates the implementation of react context api to eliminate prop drilling and plans for collaboration with firebase, and covers the process of implementing a data layer with redux for efficient data management.', 'chapters': [{'end': 11832.386, 'start': 11788.834, 'title': 'Firebase db rules coverage', 'summary': "Discusses the potential coverage of firebase db rules in response to a viewer's donation of five euros and expresses willingness to cover it in a video if enough interest is generated, emphasizing the lack of tutorials and the difficulty in understanding firebase rules.", 'duration': 43.552, 'highlights': ["The chapter addresses a viewer's donation of five euros and expresses willingness to cover Firebase DB rules in a video if enough interest is generated.", 'The speaker acknowledges the lack of tutorials and the difficulty in understanding Firebase rules, expressing interest in learning more about it.']}, {'end': 12277.554, 'start': 11832.406, 'title': 'Implementing react context api', 'summary': "Demonstrates the process of implementing the react context api to create a data layer for the app, allowing the user's information to be accessed and utilized across any component, aiming to eliminate prop drilling and provide direct access to the user's data. the chapter also discusses plans to collaborate with firebase for potential projects and interviews.", 'duration': 445.148, 'highlights': ["The chapter demonstrates the process of implementing the React Context API to create a data layer for the app, aiming to eliminate prop drilling and provide direct access to the user's data. This highlights the main focus of the chapter, emphasizing the purpose of implementing the React Context API and its impact on providing direct access to the user's data across different components.", "The chapter also discusses plans to collaborate with Firebase for potential projects and interviews. This highlights the future plans for collaboration with Firebase, indicating potential projects and interviews, showcasing the chapter's broader scope beyond the technical implementation of the React Context API.", 'The chapter emphasizes the concept of a data layer, explaining its function as a centralized bucket to store and instantly access user data throughout the app. This highlights the explanation of the data layer concept, clarifying its role as a centralized storage for user data and its purpose in providing instant access across the app.']}, {'end': 12873.23, 'start': 12277.554, 'title': 'Implementing data layer with redux', 'summary': 'Covers the process of implementing a data layer with redux, including setting initial state, defining action types, creating a reducer, and using the state provider, ultimately enabling efficient data management and access.', 'duration': 595.676, 'highlights': ['The chapter covers the process of implementing a data layer with Redux The transcript details the step-by-step process of setting up a data layer using Redux for efficient data management and access.', 'including setting initial state, defining action types, creating a reducer, and using the state provider Key steps involve setting the initial state, defining action types, creating a reducer function to manage state updates, and utilizing the state provider for efficient data handling.', 'enabling efficient data management and access By implementing Redux for the data layer, the process enables efficient management and access of data within the application.']}], 'duration': 1084.396, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs11788834.jpg', 'highlights': ['The chapter emphasizes the concept of a data layer, explaining its function as a centralized bucket to store and instantly access user data throughout the app.', 'The chapter covers the process of implementing a data layer with Redux, detailing the step-by-step process of setting up a data layer using Redux for efficient data management and access.', "The chapter demonstrates the process of implementing the React Context API to create a data layer for the app, aiming to eliminate prop drilling and provide direct access to the user's data."]}, {'end': 13665.656, 'segs': [{'end': 13072.726, 'src': 'embed', 'start': 13046.363, 'weight': 1, 'content': [{'end': 13052.345, 'text': "Now, inside that reducer, what we're doing is we're updating our state with the action dot user, which is the user that we dispatched right?", 'start': 13046.363, 'duration': 5.982}, {'end': 13058.879, 'text': 'Now, what that does is it updates the user in the data layer which is being checked against here,', 'start': 13052.995, 'duration': 5.884}, {'end': 13062.422, 'text': 'which means that we then pass the login flow and we go inside the app.', 'start': 13058.879, 'duration': 3.543}, {'end': 13065.504, 'text': 'So really, really powerful stuff.', 'start': 13064.203, 'duration': 1.301}, {'end': 13072.726, 'text': 'Now, we need to refactor our app so that it pulls in information from the correct places.', 'start': 13066.721, 'duration': 6.005}], 'summary': 'Reducer updates state with action.user, passing login flow to app.', 'duration': 26.363, 'max_score': 13046.363, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs13046363.jpg'}, {'end': 13227.585, 'src': 'embed', 'start': 13198.523, 'weight': 0, 'content': [{'end': 13201.985, 'text': 'So, now what we can do is if we click sign in with Google.', 'start': 13198.523, 'duration': 3.462}, {'end': 13205.367, 'text': 'Yeah And we log in.', 'start': 13202.365, 'duration': 3.002}, {'end': 13211.851, 'text': 'So, now the name in the sidebar and the picture in the header should be the ones that you sign in with.', 'start': 13206.068, 'duration': 5.783}, {'end': 13216.594, 'text': 'All right, so once we sign in, you see, boom.', 'start': 13214.332, 'duration': 2.262}, {'end': 13221.279, 'text': 'Hey, look, it says Rafi Qazi on the top left, and it has your picture.', 'start': 13217.355, 'duration': 3.924}, {'end': 13222.3, 'text': 'Oh, nice.', 'start': 13221.299, 'duration': 1.001}, {'end': 13223.561, 'text': 'Yeah, it has both.', 'start': 13222.5, 'duration': 1.061}, {'end': 13227.585, 'text': 'Yeah, it has both those things, right, which is super clean.', 'start': 13224.702, 'duration': 2.883}], 'summary': 'After signing in with google, the name and picture should update accordingly, as demonstrated by rafi qazi.', 'duration': 29.062, 'max_score': 13198.523, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs13198523.jpg'}, {'end': 13277.929, 'src': 'embed', 'start': 13254.241, 'weight': 3, 'content': [{'end': 13260.924, 'text': 'But, I mean, we just implemented an entire data layer using the React context API, and it was super simple to do that.', 'start': 13254.241, 'duration': 6.683}, {'end': 13267.265, 'text': 'right. so this just goes to show the power of what we have when we use the react context API.', 'start': 13261.562, 'duration': 5.703}, {'end': 13270.766, 'text': "so definitely let me know in the comments and I'll be amazing to see.", 'start': 13267.265, 'duration': 3.501}, {'end': 13274.408, 'text': "okay, now I can see a few people saying I'm blown away, this is insane.", 'start': 13270.766, 'duration': 3.642}, {'end': 13276.329, 'text': "so that's really nice to see that.", 'start': 13274.408, 'duration': 1.921}, {'end': 13277.929, 'text': "okay, so let's keep it going.", 'start': 13276.329, 'duration': 1.6}], 'summary': 'Implemented data layer with react context api, received positive feedback.', 'duration': 23.688, 'max_score': 13254.241, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs13254241.jpg'}, {'end': 13334.011, 'src': 'embed', 'start': 13300.872, 'weight': 4, 'content': [{'end': 13304.794, 'text': 'So the chat input for and then guys, we are actually getting ready to deploy it.', 'start': 13300.872, 'duration': 3.922}, {'end': 13308.195, 'text': 'So chat input, where do we use this, we use this inside of the chat.', 'start': 13304.894, 'duration': 3.301}, {'end': 13309.953, 'text': 'So chat.', 'start': 13308.255, 'duration': 1.698}, {'end': 13316.197, 'text': "so down here, what we're going to do is we're going to have another section down here and this is going to be something like this.", 'start': 13309.953, 'duration': 6.244}, {'end': 13316.738, 'text': "so it's going to be.", 'start': 13316.197, 'duration': 0.541}, {'end': 13322.262, 'text': "we're going to have a chat input field and this is going to need two things.", 'start': 13316.738, 'duration': 5.524}, {'end': 13323.923, 'text': "it's going to need whatever channel we're in.", 'start': 13322.262, 'duration': 1.661}, {'end': 13325.965, 'text': "right. it's going to need whatever channel we're in.", 'start': 13323.923, 'duration': 2.042}, {'end': 13327.846, 'text': "so we're going to use the room details.", 'start': 13325.965, 'duration': 1.881}, {'end': 13330.148, 'text': 'remember those room details that we pulled in earlier.', 'start': 13327.846, 'duration': 2.302}, {'end': 13330.968, 'text': 'so the room details.', 'start': 13330.148, 'duration': 0.82}, {'end': 13332.59, 'text': "we're going to say whatever channel we're in.", 'start': 13330.968, 'duration': 1.622}, {'end': 13334.011, 'text': 'go ahead and use the room details name.', 'start': 13332.59, 'duration': 1.421}], 'summary': 'Deploying chat input for chat, utilizing room details for channel names.', 'duration': 33.139, 'max_score': 13300.872, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs13300872.jpg'}, {'end': 13451.848, 'src': 'heatmap', 'start': 13300.872, 'weight': 0.733, 'content': [{'end': 13304.794, 'text': 'So the chat input for and then guys, we are actually getting ready to deploy it.', 'start': 13300.872, 'duration': 3.922}, {'end': 13308.195, 'text': 'So chat input, where do we use this, we use this inside of the chat.', 'start': 13304.894, 'duration': 3.301}, {'end': 13309.953, 'text': 'So chat.', 'start': 13308.255, 'duration': 1.698}, {'end': 13316.197, 'text': "so down here, what we're going to do is we're going to have another section down here and this is going to be something like this.", 'start': 13309.953, 'duration': 6.244}, {'end': 13316.738, 'text': "so it's going to be.", 'start': 13316.197, 'duration': 0.541}, {'end': 13322.262, 'text': "we're going to have a chat input field and this is going to need two things.", 'start': 13316.738, 'duration': 5.524}, {'end': 13323.923, 'text': "it's going to need whatever channel we're in.", 'start': 13322.262, 'duration': 1.661}, {'end': 13325.965, 'text': "right. it's going to need whatever channel we're in.", 'start': 13323.923, 'duration': 2.042}, {'end': 13327.846, 'text': "so we're going to use the room details.", 'start': 13325.965, 'duration': 1.881}, {'end': 13330.148, 'text': 'remember those room details that we pulled in earlier.', 'start': 13327.846, 'duration': 2.302}, {'end': 13330.968, 'text': 'so the room details.', 'start': 13330.148, 'duration': 0.82}, {'end': 13332.59, 'text': "we're going to say whatever channel we're in.", 'start': 13330.968, 'duration': 1.622}, {'end': 13334.011, 'text': 'go ahead and use the room details name.', 'start': 13332.59, 'duration': 1.421}, {'end': 13342.078, 'text': "I'm also going to say we need the channel ID because we need to know from this component where to push the message.", 'start': 13335.317, 'duration': 6.761}, {'end': 13348.399, 'text': 'We pass those two things in so that we can automatically go ahead and build that.', 'start': 13343.939, 'duration': 4.46}, {'end': 13350.54, 'text': "Then what we're going to do is we're going to go create it.", 'start': 13348.779, 'duration': 1.761}, {'end': 13351.84, 'text': "We're going to say chat input.", 'start': 13350.56, 'duration': 1.28}, {'end': 13353.44, 'text': "We're going to create these things.", 'start': 13352.6, 'duration': 0.84}, {'end': 13354.74, 'text': "I'm going to say chat input.js.", 'start': 13353.46, 'duration': 1.28}, {'end': 13358.041, 'text': "Then I'm going to say rfce.", 'start': 13356.381, 'duration': 1.66}, {'end': 13371.816, 'text': "Then I'm going to go ahead and give this a class name, equals um chat input, and frank just said that redux is way longer to implement.", 'start': 13361.062, 'duration': 10.754}, {'end': 13378.078, 'text': 'yes, 100 dude is is really really um something else to implement that as compared to this.', 'start': 13371.816, 'duration': 6.262}, {'end': 13379.038, 'text': 'uh, the greatest ever says.', 'start': 13378.078, 'duration': 0.96}, {'end': 13380.759, 'text': 'sunny, we appreciate everything you do and the whole team.', 'start': 13379.038, 'duration': 1.721}, {'end': 13381.479, 'text': "we're super thankful.", 'start': 13380.759, 'duration': 0.72}, {'end': 13382.939, 'text': "you're all an amazing bunch.", 'start': 13381.479, 'duration': 1.46}, {'end': 13385.7, 'text': 'we appreciate, we appreciate you guys watching honestly,', 'start': 13382.939, 'duration': 2.761}, {'end': 13392.675, 'text': "it's really really amazing to see that you guys are actually watching on this and picking up some value from it, so we really do love that Right.", 'start': 13385.7, 'duration': 6.975}, {'end': 13396.077, 'text': "So now what we're going to do is we are going to have inside of the chat input.", 'start': 13393.095, 'duration': 2.982}, {'end': 13399.219, 'text': "I'm going to have a form because I want to have like this enter behavior.", 'start': 13396.097, 'duration': 3.122}, {'end': 13403.981, 'text': 'So whenever I type inside of an input and I hit enter, I want it to submit the form.', 'start': 13399.259, 'duration': 4.722}, {'end': 13406.083, 'text': "Okay Then I'm going to have an input field.", 'start': 13404.202, 'duration': 1.881}, {'end': 13409.039, 'text': 'So input, Input like this.', 'start': 13406.123, 'duration': 2.916}, {'end': 13411.5, 'text': "We don't actually need to say it's type text.", 'start': 13409.879, 'duration': 1.621}, {'end': 13412.741, 'text': "By default, it's type text.", 'start': 13411.74, 'duration': 1.001}, {'end': 13419.304, 'text': "The placeholder in this case is going to be something where it says so what I'm going to do at this point?", 'start': 13413.101, 'duration': 6.203}, {'end': 13423.846, 'text': "actually, just to show it a bit easier, I'm going to save this at this point, go back to chat and render this.", 'start': 13419.304, 'duration': 4.542}, {'end': 13425.887, 'text': "I'm going to go ahead and import this at the top.", 'start': 13423.966, 'duration': 1.921}, {'end': 13432.09, 'text': "I'm going to say import message from, oh God, so import.", 'start': 13425.907, 'duration': 6.183}, {'end': 13436.135, 'text': 'the following.', 'start': 13435.635, 'duration': 0.5}, {'end': 13441.38, 'text': "So I'm going to say input chat input like this, save like this.", 'start': 13436.155, 'duration': 5.225}, {'end': 13444.922, 'text': 'And now we have the chat input, which we should see on this.', 'start': 13442, 'duration': 2.922}, {'end': 13448.125, 'text': 'Okay So Kazi, I think you need to go ahead and, okay.', 'start': 13444.983, 'duration': 3.142}, {'end': 13451.848, 'text': "So what I'm going to do actually at this point is I'm going to go to my reducer and force a login.", 'start': 13448.185, 'duration': 3.663}], 'summary': 'Developing a chat input with channel details and form behavior.', 'duration': 150.976, 'max_score': 13300.872, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs13300872.jpg'}, {'end': 13630.61, 'src': 'embed', 'start': 13603.791, 'weight': 6, 'content': [{'end': 13611.684, 'text': "We're also going to go ahead and set the next steps, which is basically we need to keep track of what the user is putting inside of the input field.", 'start': 13603.791, 'duration': 7.893}, {'end': 13613.587, 'text': 'I need to basically create a React variable.', 'start': 13611.884, 'duration': 1.703}, {'end': 13621.448, 'text': "In this case, I'm going to do input, set input, set input equals useState.", 'start': 13613.627, 'duration': 7.821}, {'end': 13625.229, 'text': "I'm setting up the variable and I'm saying, by default, the initial value is going to be empty.", 'start': 13621.468, 'duration': 3.761}, {'end': 13630.61, 'text': 'In order to map this to our input field, I need to say value equals the input in our state.', 'start': 13625.969, 'duration': 4.641}], 'summary': 'Set up react variable to track user input in input field', 'duration': 26.819, 'max_score': 13603.791, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs13603791.jpg'}], 'start': 12874.248, 'title': 'Implementing google authentication and chat input', 'summary': "Details the process of implementing google authentication using the react context api and integrating user information into the app's interface, and discusses implementing a chat input field and message submission functionality with a focus on frontend development and real-time interaction.", 'chapters': [{'end': 13276.329, 'start': 12874.248, 'title': 'Implementing google authentication', 'summary': "Details the process of implementing google authentication using the react context api, dispatching actions, updating the data layer, and integrating user information into the app's header and sidebar.", 'duration': 402.081, 'highlights': ["The chapter explains the process of dispatching a 'set user' action into the data layer upon logging in with Google, updating the state with the dispatched user information, and integrating it into the app's header and sidebar.", 'It highlights the simplicity and power of implementing a data layer using the React context API compared to the complex process of implementing Redux.', "The chapter demonstrates the seamless integration of Google authentication into the app, showcasing the user's name and profile picture in the header and sidebar upon successful login.", "It emphasizes the efficiency and ease of updating user information in the app's UI, showcasing the immediate display of the user's name and picture upon successful Google authentication."]}, {'end': 13665.656, 'start': 13276.329, 'title': 'Implementing chat input and message submission', 'summary': 'Discusses implementing a chat input field and message submission functionality, using room details and channel id, and utilizing react usestate for user input tracking, with a focus on frontend development and real-time interaction.', 'duration': 389.327, 'highlights': ['Implementing chat input field and message submission functionality The chapter focuses on adding a chat input field and enabling message submission, emphasizing the importance of real-time interaction and user engagement.', 'Utilizing room details and channel ID for message submission The discussion involves using room details and channel ID to facilitate message submission, enhancing the user experience and enabling real-time communication within specific channels.', 'Utilizing useState for tracking user input The implementation utilizes React useState to track and update user input, ensuring a seamless frontend experience and efficient handling of user interactions.', 'Frontend development and real-time interaction focus The emphasis is on frontend development and real-time interaction, showcasing the importance of user engagement and dynamic user experiences.']}], 'duration': 791.408, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs12874248.jpg', 'highlights': ["The chapter demonstrates the seamless integration of Google authentication into the app, showcasing the user's name and profile picture in the header and sidebar upon successful login.", "The chapter explains the process of dispatching a 'set user' action into the data layer upon logging in with Google, updating the state with the dispatched user information, and integrating it into the app's header and sidebar.", "It emphasizes the efficiency and ease of updating user information in the app's UI, showcasing the immediate display of the user's name and picture upon successful Google authentication.", 'The chapter highlights the simplicity and power of implementing a data layer using the React context API compared to the complex process of implementing Redux.', 'Utilizing room details and channel ID for message submission The discussion involves using room details and channel ID to facilitate message submission, enhancing the user experience and enabling real-time communication within specific channels.', 'Implementing chat input field and message submission functionality The chapter focuses on adding a chat input field and enabling message submission, emphasizing the importance of real-time interaction and user engagement.', 'Utilizing useState for tracking user input The implementation utilizes React useState to track and update user input, ensuring a seamless frontend experience and efficient handling of user interactions.', 'Frontend development and real-time interaction focus The emphasis is on frontend development and real-time interaction, showcasing the importance of user engagement and dynamic user experiences.']}, {'end': 14777.238, 'segs': [{'end': 13733.729, 'src': 'embed', 'start': 13709.736, 'weight': 0, 'content': [{'end': 13716.578, 'text': "Can you see, all of these things that we've set up, guys, are actually allowing us to do some really powerful stuff at this point in time, right?", 'start': 13709.736, 'duration': 6.842}, {'end': 13721.14, 'text': "So now we're going to say if channel ID.", 'start': 13717.979, 'duration': 3.161}, {'end': 13724.821, 'text': "so if we have a channel ID present, we're going to say db.collection.", 'start': 13721.14, 'duration': 3.681}, {'end': 13726.742, 'text': "So we're going to go to rooms.", 'start': 13724.841, 'duration': 1.901}, {'end': 13730.427, 'text': 'going to say go to the document channel id.', 'start': 13727.765, 'duration': 2.662}, {'end': 13733.729, 'text': 'because, remember, we passed inside of the youtube.', 'start': 13730.427, 'duration': 3.302}], 'summary': 'Setting up allows powerful operations like db.collection and document retrieval.', 'duration': 23.993, 'max_score': 13709.736, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs13709736.jpg'}, {'end': 13894.328, 'src': 'heatmap', 'start': 13744.157, 'weight': 0.817, 'content': [{'end': 13751.581, 'text': "so we're going to go inside of the messages collection for that room and then we're going to add the message right.", 'start': 13744.157, 'duration': 7.424}, {'end': 13758.73, 'text': 'so remember, when kazi added that message previously, he added a message, a timestamp, a user and a user image.', 'start': 13751.581, 'duration': 7.149}, {'end': 13761.534, 'text': "so for the message i'm going to add an input.", 'start': 13758.73, 'duration': 2.804}, {'end': 13766.037, 'text': "okay, so i'm going to add an input for the timestamp.", 'start': 13761.534, 'duration': 4.503}, {'end': 13772.082, 'text': "i'm going to do the following so i need to actually go ahead and import firebase from the actual module firebase at the top.", 'start': 13766.037, 'duration': 6.045}, {'end': 13774.505, 'text': "and what i'm going to say is, i'm going to say go to firebase.", 'start': 13772.082, 'duration': 2.423}, {'end': 13778.148, 'text': "and what we're going to do is, timestamp should never be our local timestamp.", 'start': 13774.505, 'duration': 3.643}, {'end': 13782.408, 'text': 'it should be whatever is on the firebase server.', 'start': 13778.148, 'duration': 4.26}, {'end': 13784.529, 'text': 'so the one that we want to use is this one.', 'start': 13782.408, 'duration': 2.121}, {'end': 13790.294, 'text': "so on site, on the firestore server, we're going to use the field value server timestamp.", 'start': 13784.529, 'duration': 5.765}, {'end': 13798.06, 'text': "and the reason why we use this one, guys, is because, regardless if i'm sending this from london or la or wherever i am in the world,", 'start': 13790.294, 'duration': 7.766}, {'end': 13800.843, 'text': "it's going to have the consistent timestamp.", 'start': 13798.06, 'duration': 2.783}, {'end': 13804.886, 'text': "so it doesn't matter what time zone you're in, it'll be the server timestamp, okay.", 'start': 13800.843, 'duration': 4.043}, {'end': 13811.998, 'text': "And then what I'm going to do is and then on the front end, we can render it in our own sort of uh, local timestamp time area.", 'start': 13805.836, 'duration': 6.162}, {'end': 13815.638, 'text': "Right now for the user, I'm going to use their display name as their name.", 'start': 13812.058, 'duration': 3.58}, {'end': 13823.06, 'text': "So display name, which comes through as, as part of the authentication and for the image, I'm going to use the image.", 'start': 13815.659, 'duration': 7.401}, {'end': 13827.041, 'text': 'Uh, so which comes back so we can say image dot photo URL.', 'start': 13823.54, 'duration': 3.501}, {'end': 13829.242, 'text': 'Okay And then.', 'start': 13827.662, 'duration': 1.58}, {'end': 13840.632, 'text': "At that point, what we should be able to see is I need to go ahead and reset the reducer to no because we actually need that user's information now.", 'start': 13830.385, 'duration': 10.247}, {'end': 13844.735, 'text': 'So Kazi, if you want to go ahead and log in.', 'start': 13842.133, 'duration': 2.602}, {'end': 13846.536, 'text': "Let's do it.", 'start': 13845.856, 'duration': 0.68}, {'end': 13847.817, 'text': 'Boom, right there.', 'start': 13846.876, 'duration': 0.941}, {'end': 13850.699, 'text': "I'm ready to log in, bro.", 'start': 13849.278, 'duration': 1.421}, {'end': 13854.482, 'text': 'Nice All right, here we go.', 'start': 13852.781, 'duration': 1.701}, {'end': 13855.723, 'text': "Let's do it.", 'start': 13854.542, 'duration': 1.181}, {'end': 13857.704, 'text': 'Awesome Awesome.', 'start': 13855.743, 'duration': 1.961}, {'end': 13861.151, 'text': 'and nice.', 'start': 13860.291, 'duration': 0.86}, {'end': 13863.552, 'text': 'and now we see that message instagram right.', 'start': 13861.151, 'duration': 2.401}, {'end': 13867.632, 'text': "so let's go ahead and type in a message and let's type in like test.", 'start': 13863.552, 'duration': 4.08}, {'end': 13870.753, 'text': 'hey, look at that dude.', 'start': 13867.632, 'duration': 3.121}, {'end': 13875.494, 'text': "yeah, so it's coming in nice, right, but it looks ugly, but it works.", 'start': 13870.753, 'duration': 4.741}, {'end': 13879.354, 'text': 'okay, which is really really nice.', 'start': 13875.494, 'duration': 3.86}, {'end': 13880.955, 'text': 'and so it looks really really nice.', 'start': 13879.354, 'duration': 1.601}, {'end': 13883.315, 'text': 'and we have that scrollable sidebar, which is awesome.', 'start': 13880.955, 'duration': 2.36}, {'end': 13886.236, 'text': "okay, now, what we're gonna do now?", 'start': 13883.315, 'duration': 2.921}, {'end': 13888.376, 'text': 'whereas if it looks ugly, bro, all right.', 'start': 13886.236, 'duration': 2.14}, {'end': 13894.328, 'text': "Now what we're going to do is we're going to style that chat input so it looks really clean, okay?", 'start': 13888.863, 'duration': 5.465}], 'summary': 'Adding messages with server timestamp, user details, and styling chat input.', 'duration': 150.171, 'max_score': 13744.157, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs13744157.jpg'}, {'end': 13804.886, 'src': 'embed', 'start': 13778.148, 'weight': 1, 'content': [{'end': 13782.408, 'text': 'it should be whatever is on the firebase server.', 'start': 13778.148, 'duration': 4.26}, {'end': 13784.529, 'text': 'so the one that we want to use is this one.', 'start': 13782.408, 'duration': 2.121}, {'end': 13790.294, 'text': "so on site, on the firestore server, we're going to use the field value server timestamp.", 'start': 13784.529, 'duration': 5.765}, {'end': 13798.06, 'text': "and the reason why we use this one, guys, is because, regardless if i'm sending this from london or la or wherever i am in the world,", 'start': 13790.294, 'duration': 7.766}, {'end': 13800.843, 'text': "it's going to have the consistent timestamp.", 'start': 13798.06, 'duration': 2.783}, {'end': 13804.886, 'text': "so it doesn't matter what time zone you're in, it'll be the server timestamp, okay.", 'start': 13800.843, 'duration': 4.043}], 'summary': 'Using firestore server timestamp for consistent timestamps regardless of location.', 'duration': 26.738, 'max_score': 13778.148, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs13778148.jpg'}, {'end': 13978.65, 'src': 'embed', 'start': 13926.301, 'weight': 2, 'content': [{'end': 13929.244, 'text': 'Are we done with adding a React context API??', 'start': 13926.301, 'duration': 2.943}, {'end': 13933.788, 'text': "Yeah, so we're just adding the ability to send a message.", 'start': 13929.364, 'duration': 4.424}, {'end': 13938.284, 'text': "Hey, so we're done with the React context API.", 'start': 13934.802, 'duration': 3.482}, {'end': 13945.409, 'text': 'You guys now add ability to send messages and Slack channels.', 'start': 13938.364, 'duration': 7.045}, {'end': 13946.689, 'text': 'Boom, here we go.', 'start': 13945.669, 'duration': 1.02}, {'end': 13953.375, 'text': 'Awesome IPA Bega says, how often do you Google and use Stack Overflow? Dude, all the time.', 'start': 13946.709, 'duration': 6.666}, {'end': 13955.476, 'text': "It's a completely natural developer thing.", 'start': 13953.575, 'duration': 1.901}, {'end': 13962.219, 'text': "Trust me, I've worked with some amazing senior developers and it's something where every developer does that.", 'start': 13956.276, 'duration': 5.943}, {'end': 13963.639, 'text': 'They will use Google.', 'start': 13962.399, 'duration': 1.24}, {'end': 13968.042, 'text': 'So my advice on that front is master the ability to Google.', 'start': 13963.879, 'duration': 4.163}, {'end': 13969.383, 'text': "that's literally a master.", 'start': 13968.042, 'duration': 1.341}, {'end': 13973.406, 'text': 'the ability to Google, and you will go far places, my friend, like you.', 'start': 13969.383, 'duration': 4.023}, {'end': 13978.65, 'text': "literally, yeah, you have to become really good at googling, and that's going to make you go a long way.", 'start': 13973.406, 'duration': 5.244}], 'summary': 'Added react context api, message sending in slack channels. emphasized using google and stack overflow for development.', 'duration': 52.349, 'max_score': 13926.301, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs13926301.jpg'}, {'end': 14083.602, 'src': 'embed', 'start': 14046.592, 'weight': 5, 'content': [{'end': 14047.652, 'text': 'There we go.', 'start': 14046.592, 'duration': 1.06}, {'end': 14052.436, 'text': "And now what we're going to do is we're going to basically target the button.", 'start': 14048.413, 'duration': 4.023}, {'end': 14057.019, 'text': "So the button, guys, what I'm going to do is I'm going to say we don't actually need it to be this.", 'start': 14052.956, 'duration': 4.063}, {'end': 14058.5, 'text': 'We can just say display none.', 'start': 14057.359, 'duration': 1.141}, {'end': 14064.364, 'text': 'The reason why we need the button there, though, is so that we have that enter, on click, submit functionality.', 'start': 14058.98, 'duration': 5.384}, {'end': 14066.365, 'text': 'So this is a trick in development.', 'start': 14064.404, 'duration': 1.961}, {'end': 14074.291, 'text': 'And basically what you do is you actually have a hidden button there, which is acting as a submit.', 'start': 14066.946, 'duration': 7.345}, {'end': 14083.602, 'text': 'Because if you, if you go ahead and type in, so if I go to the chat input, so this button here works.', 'start': 14075.999, 'duration': 7.603}], 'summary': 'Using a hidden button to enable enter and submit functionality in development.', 'duration': 37.01, 'max_score': 14046.592, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs14046592.jpg'}, {'end': 14221.347, 'src': 'embed', 'start': 14191.818, 'weight': 8, 'content': [{'end': 14196.725, 'text': "So to deploy it, you don't have to go to Firebase, something I do every single time.", 'start': 14191.818, 'duration': 4.907}, {'end': 14200.13, 'text': "And all we're gonna do is we're gonna do Firebase in it.", 'start': 14198.087, 'duration': 2.043}, {'end': 14202.253, 'text': "Make sure you're inside of the Slack clone.", 'start': 14200.33, 'duration': 1.923}, {'end': 14205.017, 'text': "That's step one.", 'start': 14202.593, 'duration': 2.424}, {'end': 14207.34, 'text': "And as you're going through it, choose hosting.", 'start': 14205.037, 'duration': 2.303}, {'end': 14213.005, 'text': "Also, just to add here, guys, you might have to do Firebase login before you do that if you're not logged in.", 'start': 14208.263, 'duration': 4.742}, {'end': 14213.885, 'text': 'Oh, yeah.', 'start': 14213.485, 'duration': 0.4}, {'end': 14216.846, 'text': 'Make sure to do Firebase login as well.', 'start': 14213.945, 'duration': 2.901}, {'end': 14221.347, 'text': 'And guys, please keep it clean when you guys jump in there.', 'start': 14217.866, 'duration': 3.481}], 'summary': 'Deploy firebase using firebase init inside slack clone, choose hosting.', 'duration': 29.529, 'max_score': 14191.818, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs14191818.jpg'}, {'end': 14296.219, 'src': 'embed', 'start': 14267.3, 'weight': 6, 'content': [{'end': 14273.343, 'text': "When you deploy it, this is the only folder that's gonna go and push it into the cloud, then all your friends and everybody can use the app.", 'start': 14267.3, 'duration': 6.043}, {'end': 14280.932, 'text': "And what it does is it takes out a lot of things that you don't need like hot reloading, right Sunny? Yep, exactly.", 'start': 14274.144, 'duration': 6.788}, {'end': 14283.794, 'text': 'It takes out all of the developer heavy stuff.', 'start': 14280.972, 'duration': 2.822}, {'end': 14286.735, 'text': 'So it becomes a very optimized, very lightweight build.', 'start': 14283.814, 'duration': 2.921}, {'end': 14291.257, 'text': "That's why it says optimized production build right here, you guys when it says that.", 'start': 14286.875, 'duration': 4.382}, {'end': 14296.219, 'text': "So we're going to be ready to party in a very little bit.", 'start': 14291.737, 'duration': 4.482}], 'summary': 'Deployed app becomes optimized, lightweight build for users, eliminating unnecessary features.', 'duration': 28.919, 'max_score': 14267.3, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs14267300.jpg'}, {'end': 14358.174, 'src': 'embed', 'start': 14335.751, 'weight': 7, 'content': [{'end': 14345.777, 'text': "So as long as we get timestamps from our viewers or ourselves for anything that's important, I figured out how to clip it and we can clip it now.", 'start': 14335.751, 'duration': 10.026}, {'end': 14347.718, 'text': "Oh, that's insane.", 'start': 14346.817, 'duration': 0.901}, {'end': 14351.259, 'text': "And just make a lot of content that's valuable for everybody that's here.", 'start': 14347.838, 'duration': 3.421}, {'end': 14353.14, 'text': "Yeah, that's insane.", 'start': 14352.14, 'duration': 1}, {'end': 14353.941, 'text': 'Love that.', 'start': 14353.561, 'duration': 0.38}, {'end': 14358.174, 'text': "Yeah, so that's why if you guys find something, just let us know the timestamps, we can do it.", 'start': 14354.352, 'duration': 3.822}], 'summary': 'Content can now be clipped using timestamps provided by viewers for valuable content.', 'duration': 22.423, 'max_score': 14335.751, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs14335751.jpg'}, {'end': 14459.407, 'src': 'embed', 'start': 14423.787, 'weight': 9, 'content': [{'end': 14426.169, 'text': "And with that said, guys, let's go ahead and just deploy it now.", 'start': 14423.787, 'duration': 2.382}, {'end': 14429.591, 'text': "So if you're ready, let's do it.", 'start': 14426.649, 'duration': 2.942}, {'end': 14431.092, 'text': "We're going to do Firebase deploy.", 'start': 14429.611, 'duration': 1.481}, {'end': 14434.034, 'text': 'And now the moment of truth, you guys.', 'start': 14431.252, 'duration': 2.782}, {'end': 14435.455, 'text': 'Now we wait.', 'start': 14434.514, 'duration': 0.941}, {'end': 14443.578, 'text': 'Five, four, three, two, one.', 'start': 14436.155, 'duration': 7.423}, {'end': 14445.919, 'text': "let's click it, let's see if it works.", 'start': 14443.578, 'duration': 2.341}, {'end': 14447.76, 'text': "let's see if it works.", 'start': 14445.919, 'duration': 1.841}, {'end': 14452.561, 'text': 'hold on, hold on, and here we go.', 'start': 14447.76, 'duration': 4.801}, {'end': 14459.407, 'text': "So let's go ahead and check this out.", 'start': 14457.546, 'duration': 1.861}], 'summary': 'Deploying firebase, waiting for a response, then checking the results.', 'duration': 35.62, 'max_score': 14423.787, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs14423787.jpg'}, {'end': 14722.72, 'src': 'embed', 'start': 14694.681, 'weight': 10, 'content': [{'end': 14699.465, 'text': "That way when we drop the full stack developer guide tomorrow, and it's going to be meaty, guys.", 'start': 14694.681, 'duration': 4.784}, {'end': 14701.286, 'text': "It's going to be filled with content.", 'start': 14699.485, 'duration': 1.801}, {'end': 14703.728, 'text': "We're going to have a big presentation on it tomorrow.", 'start': 14701.547, 'duration': 2.181}, {'end': 14706.03, 'text': 'And you guys know our content.', 'start': 14704.349, 'duration': 1.681}, {'end': 14708.132, 'text': 'We try to make it as valuable as possible.', 'start': 14706.29, 'duration': 1.842}, {'end': 14710.354, 'text': "And it's going to pop up right over here.", 'start': 14708.732, 'duration': 1.622}, {'end': 14716.377, 'text': "if you put your notifications on that way, if you're bored, if you want to learn something, you just want to like,", 'start': 14710.954, 'duration': 5.423}, {'end': 14722.72, 'text': 'kind of watch netflix and also learn and improve your career, you can just click on that.', 'start': 14716.377, 'duration': 6.343}], 'summary': 'Launching a comprehensive full stack developer guide with valuable content and a big presentation tomorrow.', 'duration': 28.039, 'max_score': 14694.681, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs14694681.jpg'}], 'start': 13665.716, 'title': 'Real-time messaging app development', 'summary': 'Delves into developing a real-time messaging app with firebase integration, leveraging react context api, and deploying to firebase, while emphasizing the importance of lightweight build and live deployment showcasing real-time database updates.', 'chapters': [{'end': 13926.281, 'start': 13665.716, 'title': 'Real-time messaging app development', 'summary': 'Discusses the development of a real-time messaging app, focusing on implementing a feature that allows users to post messages in specific channels. it also covers the integration of firebase for server timestamps and user information retrieval, resulting in a functional but visually unappealing messaging feature.', 'duration': 260.565, 'highlights': ['Implementation of real-time messaging feature for specific channels The chapter discusses the development of a real-time messaging app, focusing on implementing a feature that allows users to post messages in specific channels.', 'Integration of Firebase for server timestamps and user information retrieval It covers the integration of Firebase for server timestamps and user information retrieval, resulting in a functional messaging feature with consistent timestamps and user information.', 'Functional but visually unappealing messaging feature The implementation results in a functional messaging feature, although visually unappealing, with scrollable sidebar and basic message posting functionality.']}, {'end': 14132.129, 'start': 13926.301, 'title': 'Adding react context api and the power of googling', 'summary': 'Discusses adding the ability to send messages in slack channels through the react context api and emphasizes the importance of mastering the ability to google as a developer, while also providing css tips for positioning elements and using hidden buttons for functionality.', 'duration': 205.828, 'highlights': ['The importance of mastering the ability to Google as a developer The speaker emphasizes the natural tendency for developers to frequently use Google and Stack Overflow, highlighting the advice to master the ability to Google for success.', 'Adding the ability to send messages in Slack channels through the React context API The chapter discusses the completion of adding the ability to send messages in Slack channels using the React context API.', 'CSS tips for positioning elements and using hidden buttons for functionality The speaker provides CSS tips for positioning elements using properties like position relative and display flex, as well as utilizing hidden buttons for functionality, demonstrating their powerful capabilities in development.']}, {'end': 14358.174, 'start': 14132.129, 'title': 'Deployment to firebase', 'summary': 'Discusses the final steps of deploying an app to firebase, including the process of building and optimizing the production build, with an emphasis on the importance of a lightweight build. additionally, it mentions the ability to create clips from live streams for valuable content creation.', 'duration': 226.045, 'highlights': ['The final step in the deployment process is to build the app, ensuring it is optimized and lightweight, which is achieved by removing developer heavy stuff and creating an optimized production build. The optimized production build is emphasized as a crucial step in the deployment process, ensuring a lightweight and optimized app for hosting online.', 'The ability to create clips from live streams for valuable content creation is mentioned, with the process of clipping and uploading content being highlighted. The ability to create valuable content through the process of clipping and uploading from live streams is discussed, emphasizing the potential for content creation and sharing.', 'The deployment process involves steps such as Firebase initialization, choosing hosting, and performing a build, with a focus on ensuring the app is ready for hosting in the cloud. The process of deploying to Firebase involves several steps such as Firebase initialization, choosing hosting, and performing a build to prepare the app for hosting in the cloud.']}, {'end': 14777.238, 'start': 14358.754, 'title': 'App deployment live stream', 'summary': 'Covers the live deployment of an app using firebase, showcasing real-time database updates and stress testing, with audience interaction and excitement, concluding with a call-to-action for future content and engagement.', 'duration': 418.484, 'highlights': ['The app is deployed live using Firebase, involving real-time database updates and stress testing, with audience interaction and excitement. The live deployment of the app using Firebase, showcasing real-time database updates and stress testing, while engaging with the audience and generating excitement.', 'The call-to-action encourages viewers to like and subscribe, emphasizing the upcoming full stack developer guide, and promoting audience engagement. Encouraging viewers to like, subscribe, and turn on notifications, while promoting the upcoming full stack developer guide and audience engagement.']}], 'duration': 1111.522, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Oo4ziTddOxs/pics/Oo4ziTddOxs13665716.jpg', 'highlights': ['Implementation of real-time messaging feature for specific channels', 'Integration of Firebase for server timestamps and user information retrieval', 'Functional but visually unappealing messaging feature', 'Adding the ability to send messages in Slack channels through the React context API', 'The importance of mastering the ability to Google as a developer', 'CSS tips for positioning elements and using hidden buttons for functionality', 'The final step in the deployment process is to build the app, ensuring it is optimized and lightweight', 'The ability to create clips from live streams for valuable content creation', 'The deployment process involves steps such as Firebase initialization, choosing hosting, and performing a build', 'The app is deployed live using Firebase, involving real-time database updates and stress testing', 'The call-to-action encourages viewers to like and subscribe, emphasizing the upcoming full stack developer guide']}], 'highlights': ['Real-time database powers chat with 500+ live viewers', 'Firebase platform highlighted as easy-to-use tool for authentication', 'Mobile responsiveness supporting Google authentication and 500+ live viewers', 'Material UI, Flexbox, Google authentication, CSS variables, React Context API, and React Router used in app', 'Building a Slack app from scratch with sign-in functionality', 'Goal to reach 1,000 viewers', 'Excitement around AWS project with 900 viewers', 'Discussing full stack developer roadmap from 2020 to 2021', "Plan to build Instagram Reels clone in response to TikTok's decline", 'Importance of React components and BEM naming convention', 'Technical difficulties impacting collaborative work on app development', 'Upcoming live sessions scheduled for the week', 'Session received over $50 in donations with specific mentions', 'Creation of sidebar components using display flex and borders for styling', 'Targeting and styling Material UI icon in React', 'Breaking down header.js into three sections for organization', 'Styling H2 and H3 with nested CSS selectors', 'Demonstration of nested CSS selectors for specific element styles', "Positive impact on viewers' learning journey with examples", 'Goal of filling a gap in learning resources for React development', 'Viewer feedback indicating impact of React clones', 'Listing all channels via sidebar option after connecting to database', 'Implementation of Firebase backend with over $100 in donations', 'Significance of Firestore over real-time database in Firebase', "Acknowledgment and appreciation for Nas's contribution to Clever Programmer", 'Implementation of React Router for page routing and live donation mentioned', 'Real-time integration with Firebase and seamless channel switching', 'Usage of useEffect hook to populate sidebar with list of channels', 'Creation of chat component and utilization of useParams hook', 'Improvement of layout using CSS flexbox and view height property', 'Usage of hooks like useState and useEffect in functional components', 'Simplified usage of React Router DOM and history manipulation', 'Demonstration of real-time database updates through coding examples', 'Implementing dynamic room ID in URL with database operations', 'Introduction of styling for chat interface with margin, padding, and flex display', 'Showcasing real-time room details update feature using latest hooks', 'Explanation of system instantly fetching data and connecting to database', 'Usage of useHistory, useParams, and useEffect from React and React Router DOM', 'Details of fetching and displaying messages from database in chat application', "Highlights implementation of React's optional chaining feature", '30,000 community views achieved with encouragement for engagement', 'Front-end functionality implementation including image resizing and timestamp formatting', 'Upcoming addition of Google Authentication with Firebase', 'User authentication using React and Firebase with different components based on login status', 'Security features provided by Firebase for secure authentication and deployment', 'Professional companies using Firebase for authentication', 'CSS display grid for layout with time-saving capabilities', 'Setting up Google Authentication using Firebase with simplicity of importing auth and provider', 'Retrieval of user data and availability of authenticated token for Google APIs using Firebase Authentication', 'Emphasis on data layer as centralized bucket for user data storage and access', 'Process of implementing data layer with Redux and React Context API', 'Seamless integration of Google authentication into app', "Dispatching 'set user' action into data layer upon Google login", "Efficiency and ease of updating user information in app's UI", 'Utilizing room details and channel ID for message submission', 'Implementing chat input field and message submission functionality', 'Utilizing useState for tracking user input', 'Frontend development and real-time interaction focus', 'Implementation of real-time messaging feature for specific channels', 'Integration of Firebase for server timestamps and user information retrieval', 'Functional but visually unappealing messaging feature', 'Adding ability to send messages in Slack channels through React context API', 'Importance of mastering the ability to Google as a developer', 'CSS tips for positioning elements and using hidden buttons for functionality', 'Final step in deployment process to build optimized and lightweight app', 'Ability to create clips from live streams for valuable content creation', 'Deployment process involving Firebase initialization, hosting choice, and build', 'Live deployment using Firebase with real-time database updates and stress testing', 'Encouragement for viewers to like and subscribe with upcoming full stack developer guide']}