title
🔴How to Build a TODO app with React + Firebase (LIVE)

description
Want to join a course where you will learn React + Firebase for Beginners and learn how to make an income with those skills? 👉 Click here & enroll 🔥 https://www.cleverprogrammer.com/pwj?ref=https://www.cleverprogrammer.com/a/30476/isBQm8G8&utm_source=youtube&utm_medium=yt-description&utm_content=live-todo-app-sonny-qazi&utm_campaign=live-everyday&utm_term=warm Biz / Sponsorships 👉 https://www.cleverprogrammer.com/partnerships

detail
{'title': '🔴How to Build a TODO app with React + Firebase (LIVE)', 'heatmap': [{'end': 970.005, 'start': 857.678, 'weight': 0.88}, {'end': 6045.511, 'start': 5593.213, 'weight': 0.835}, {'end': 6573.493, 'start': 6457.78, 'weight': 0.763}, {'end': 7538.521, 'start': 7428.389, 'weight': 0.918}], 'summary': 'Sonny and qazi host a live event to build a beginner-friendly to-do app with react and firebase, engaging 160 concurrent viewers and aiming for daily events. the chapters cover setting up firebase, react app structure, material ui benefits in react, firestore database setup, real-time synchronization, and firebase-react integration with a live deployment and crud functionality.', 'chapters': [{'end': 278.881, 'segs': [{'end': 28.208, 'src': 'embed', 'start': 0.049, 'weight': 4, 'content': [{'end': 3.371, 'text': "Sonny, what's up guys? How's it going? Oh man.", 'start': 0.049, 'duration': 3.322}, {'end': 5.553, 'text': 'I have a hidden you, my friend.', 'start': 3.511, 'duration': 2.042}, {'end': 6.513, 'text': 'So give me one second.', 'start': 5.573, 'duration': 0.94}, {'end': 8.115, 'text': "I'm going to have to show you.", 'start': 6.553, 'duration': 1.562}, {'end': 8.635, 'text': 'There we go.', 'start': 8.154, 'duration': 0.481}, {'end': 11.677, 'text': "How's it going guys? My name is Sonny.", 'start': 10.116, 'duration': 1.561}, {'end': 14.419, 'text': "I'm a react developer and I'm pumped for today.", 'start': 11.777, 'duration': 2.642}, {'end': 15.863, 'text': "Damn Let's go, Qazi.", 'start': 14.983, 'duration': 0.88}, {'end': 18.184, 'text': 'Yeah, this is gonna be awesome, guys.', 'start': 16.164, 'duration': 2.02}, {'end': 28.208, 'text': 'We are hoping that we are perfectly live everywhere, but this is going to be us building a to-do app with React and Firebase from scratch.', 'start': 18.264, 'duration': 9.944}], 'summary': 'Sonny, a react developer, is excited to build a to-do app with react and firebase from scratch.', 'duration': 28.159, 'max_score': 0.049, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg49.jpg'}, {'end': 85.301, 'src': 'embed', 'start': 37.852, 'weight': 0, 'content': [{'end': 43.895, 'text': "If you're more intermediate or advanced and you wanna learn Firebase and React, you're also in the right place.", 'start': 37.852, 'duration': 6.043}, {'end': 48.457, 'text': 'We got 92 concurrent viewers right now.', 'start': 46.095, 'duration': 2.362}, {'end': 51.58, 'text': 'Damn Oh, nice.', 'start': 49.318, 'duration': 2.262}, {'end': 52.26, 'text': "120 Let's go.", 'start': 51.72, 'duration': 0.54}, {'end': 53.241, 'text': "Let's go.", 'start': 52.3, 'duration': 0.941}, {'end': 54.542, 'text': 'Holy crap.', 'start': 53.261, 'duration': 1.281}, {'end': 58.606, 'text': 'You should actually tell Jacob to send viewers too.', 'start': 54.622, 'duration': 3.984}, {'end': 59.937, 'text': 'He did.', 'start': 59.537, 'duration': 0.4}, {'end': 61.279, 'text': 'He sent the messenger out.', 'start': 60.078, 'duration': 1.201}, {'end': 62.5, 'text': 'Nice Awesome.', 'start': 61.399, 'duration': 1.101}, {'end': 64.301, 'text': "So we're up to 160 guys.", 'start': 62.94, 'duration': 1.361}, {'end': 65.182, 'text': 'This is amazing.', 'start': 64.422, 'duration': 0.76}, {'end': 70.407, 'text': "Once we get started, we're just going to straight up keep going until it's completely built and live.", 'start': 65.342, 'duration': 5.065}, {'end': 77.213, 'text': "So what I will tell you to do is in the meantime, we're just going to wait a little bit to make sure everybody's here and live.", 'start': 70.707, 'duration': 6.506}, {'end': 82.999, 'text': "And then it's up to you, whether you want to build this app live with us, or you want to just sit here and watch it.", 'start': 77.434, 'duration': 5.565}, {'end': 85.301, 'text': "That's right.", 'start': 83.019, 'duration': 2.282}], 'summary': 'Firebase and react tutorial with 160 viewers, building app live.', 'duration': 47.449, 'max_score': 37.852, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg37852.jpg'}, {'end': 278.881, 'src': 'embed', 'start': 248.557, 'weight': 2, 'content': [{'end': 249.857, 'text': "All right, Sonny, let's go.", 'start': 248.557, 'duration': 1.3}, {'end': 250.898, 'text': "I think we're, we're good.", 'start': 249.917, 'duration': 0.981}, {'end': 252.648, 'text': "Let's do it.", 'start': 252.208, 'duration': 0.44}, {'end': 256.471, 'text': 'Let me take away my text overlay, actually.', 'start': 253.409, 'duration': 3.062}, {'end': 257.971, 'text': "I'm going to just hide it for now.", 'start': 256.491, 'duration': 1.48}, {'end': 260.793, 'text': 'Yep Nice.', 'start': 259.452, 'duration': 1.341}, {'end': 269.661, 'text': "Dope Is it still hiding some of the screen? You see what I'm saying? Let me have a look.", 'start': 263.156, 'duration': 6.505}, {'end': 273.377, 'text': "So it's hiding a little, it's cropping a tiny bit of the window right now.", 'start': 270.054, 'duration': 3.323}, {'end': 276.099, 'text': "Yeah That's what I'm trying to understand.", 'start': 273.877, 'duration': 2.222}, {'end': 278.881, 'text': "Like why it's doing that.", 'start': 276.159, 'duration': 2.722}], 'summary': 'Discussing screen cropping issue, looking to understand and fix it.', 'duration': 30.324, 'max_score': 248.557, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg248557.jpg'}], 'start': 0.049, 'title': 'Building a to-do app with react and firebase', 'summary': 'Involves sonny and qazi building a to-do app with react and firebase live, engaging with 160 concurrent viewers and aiming for a completely beginner-friendly approach. it also showcases the kickoff of a joint live event on all platforms with 264 viewers, aiming to provide a smooth experience and planning to conduct such events daily.', 'chapters': [{'end': 85.301, 'start': 0.049, 'title': 'Building a to-do app with react and firebase', 'summary': 'Involves sonny and qazi building a to-do app with react and firebase live, engaging with 160 concurrent viewers and aiming for a completely beginner-friendly approach.', 'duration': 85.252, 'highlights': ['Sonny and Qazi are live building a to-do app with React and Firebase, engaging with 160 concurrent viewers.', 'The session aims to be completely beginner-friendly for those new to React or Firebase.', 'The chapter will continue until the app is completely built and live.']}, {'end': 278.881, 'start': 87.288, 'title': 'Live joint event kickoff', 'summary': 'Showcases the kickoff of a joint live event on all platforms with 264 viewers, aiming to provide a smooth experience and planning to conduct such events daily.', 'duration': 191.593, 'highlights': ['The chapter begins with the kickoff of a joint live event on all platforms, garnering 264 viewers, aiming to provide a smooth experience for the audience.', 'The speakers express excitement for the joint live event and the possibility of conducting such events daily, emphasizing the goal of smooth and enjoyable experiences for the viewers.', 'The speakers engage with the audience, acknowledging individual presence and excitement, creating an interactive and inclusive environment for the event.', 'The technical aspects of the event are addressed, including sharing screens and optimizing the visual experience for the audience, reflecting a focus on providing high-quality content delivery.']}], 'duration': 278.832, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg49.jpg', 'highlights': ['Sonny and Qazi are live building a to-do app with React and Firebase, engaging with 160 concurrent viewers.', 'The chapter begins with the kickoff of a joint live event on all platforms, garnering 264 viewers, aiming to provide a smooth experience for the audience.', 'The session aims to be completely beginner-friendly for those new to React or Firebase.', 'The speakers engage with the audience, acknowledging individual presence and excitement, creating an interactive and inclusive environment for the event.', 'The speakers express excitement for the joint live event and the possibility of conducting such events daily, emphasizing the goal of smooth and enjoyable experiences for the viewers.', 'The technical aspects of the event are addressed, including sharing screens and optimizing the visual experience for the audience, reflecting a focus on providing high-quality content delivery.', 'The chapter will continue until the app is completely built and live.']}, {'end': 1087.457, 'segs': [{'end': 497.624, 'src': 'embed', 'start': 467.56, 'weight': 0, 'content': [{'end': 471.063, 'text': 'The only reason I was saying that is because the folder is already called.', 'start': 467.56, 'duration': 3.503}, {'end': 473.804, 'text': "Right So we're inside of React to-do right now.", 'start': 471.083, 'duration': 2.721}, {'end': 475.405, 'text': "Yeah, no, we're good here.", 'start': 474.505, 'duration': 0.9}, {'end': 476.786, 'text': "If we just don't have a space.", 'start': 475.465, 'duration': 1.321}, {'end': 478.147, 'text': 'So yeah, React to-do app.', 'start': 477.046, 'duration': 1.101}, {'end': 486.637, 'text': 'Cool So like this or do you want me to still write the next thing? Yeah.', 'start': 479.888, 'duration': 6.749}, {'end': 489.119, 'text': 'So I want you to put the name next to it like this.', 'start': 486.657, 'duration': 2.462}, {'end': 490.299, 'text': "So we'll have something like this.", 'start': 489.139, 'duration': 1.16}, {'end': 491.22, 'text': 'So to do.', 'start': 490.32, 'duration': 0.9}, {'end': 491.86, 'text': 'Got it.', 'start': 491.6, 'duration': 0.26}, {'end': 493.161, 'text': "That's what we typically do.", 'start': 492.101, 'duration': 1.06}, {'end': 497.624, 'text': 'Yeah So guys, MPX is something called Node Package Executor.', 'start': 493.562, 'duration': 4.062}], 'summary': 'Discussing react to-do app and node package executor (mpx).', 'duration': 30.064, 'max_score': 467.56, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg467560.jpg'}, {'end': 558.403, 'src': 'embed', 'start': 530.74, 'weight': 3, 'content': [{'end': 534.922, 'text': 'it was really really cool to go and look at something called component-based design.', 'start': 530.74, 'duration': 4.182}, {'end': 537.223, 'text': "And that's something which we're going to show you today.", 'start': 535.622, 'duration': 1.601}, {'end': 541.117, 'text': "And I think everyone's going to enjoy that because it's really, really powerful.", 'start': 538.096, 'duration': 3.021}, {'end': 544.298, 'text': 'And it means that you only have to write a small amount of code to get a lot out of it.', 'start': 541.197, 'duration': 3.101}, {'end': 549.68, 'text': "Yeah So while that's starting up, Kazi, let's go ahead and set up Firebase.", 'start': 545.979, 'duration': 3.701}, {'end': 553.161, 'text': 'Cool I think I just zoomed in somehow again.', 'start': 550.08, 'duration': 3.081}, {'end': 555.722, 'text': "So I'm going to have to zoom out and then zoom.", 'start': 553.181, 'duration': 2.541}, {'end': 558.403, 'text': 'Yep Cool.', 'start': 557.522, 'duration': 0.881}], 'summary': 'Introduction to component-based design, emphasizing its power and efficiency in writing code.', 'duration': 27.663, 'max_score': 530.74, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg530740.jpg'}, {'end': 830.527, 'src': 'embed', 'start': 800.996, 'weight': 1, 'content': [{'end': 803.897, 'text': "And I'll show you how we do that inside of our code afterwards.", 'start': 800.996, 'duration': 2.901}, {'end': 805.378, 'text': 'So we can click next on this step.', 'start': 804.077, 'duration': 1.301}, {'end': 805.998, 'text': 'Got it.', 'start': 805.678, 'duration': 0.32}, {'end': 809.459, 'text': "So this one's important right now.", 'start': 808.098, 'duration': 1.361}, {'end': 812.223, 'text': 'So here what you want to do is you want to click the copy.', 'start': 810.043, 'duration': 2.18}, {'end': 814.224, 'text': 'You want to open up your terminal.', 'start': 812.663, 'duration': 1.561}, {'end': 817.504, 'text': 'So you can either do this in VS Code or you can do it in a separate terminal.', 'start': 814.444, 'duration': 3.06}, {'end': 821.725, 'text': 'And what you want to do is just paste that command and install that.', 'start': 818.505, 'duration': 3.22}, {'end': 830.527, 'text': 'And what this says is whenever you have npm install with that little dash G, it means install this package across your entire computer.', 'start': 822.425, 'duration': 8.102}], 'summary': 'Demonstrating installation of npm package across computer.', 'duration': 29.531, 'max_score': 800.996, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg800996.jpg'}, {'end': 970.005, 'src': 'heatmap', 'start': 857.678, 'weight': 0.88, 'content': [{'end': 863.001, 'text': 'Mark. yes, so PWJ course, you can definitely do it at your own pace and time.', 'start': 857.678, 'duration': 5.323}, {'end': 870.766, 'text': "Now we have turned it into a membership, so as long as you're a member, you can just go at it at your own pace.", 'start': 864.022, 'duration': 6.744}, {'end': 877.27, 'text': "And Ajay asked, is it React or React Native, Sunny? So that's a really good question.", 'start': 872.387, 'duration': 4.883}, {'end': 878.831, 'text': "It's React what we're doing now.", 'start': 877.29, 'duration': 1.541}, {'end': 881.292, 'text': 'But once you learn this, you can use React Native.', 'start': 879.231, 'duration': 2.061}, {'end': 885.594, 'text': "So just to tell you guys what the two are, React is for when you're doing web development.", 'start': 881.332, 'duration': 4.262}, {'end': 889.376, 'text': "So any website is going to be using React if you're using the library.", 'start': 885.794, 'duration': 3.582}, {'end': 895.239, 'text': 'But if you want to then deploy, say, for example, to iOS or Android apps, then you would use something called React Native.', 'start': 890.016, 'duration': 5.223}, {'end': 897.11, 'text': "But right now we're just doing pure react.", 'start': 895.609, 'duration': 1.501}, {'end': 901.493, 'text': 'Man, this thing keeps doing this weird zoom thing.', 'start': 897.891, 'duration': 3.602}, {'end': 903.374, 'text': 'Like it keeps messing up the zoom.', 'start': 901.713, 'duration': 1.661}, {'end': 909.438, 'text': 'And so maybe we just want to do show entire screen and then zoom in.', 'start': 904.195, 'duration': 5.243}, {'end': 912.921, 'text': 'And I think then this should be good to go.', 'start': 909.678, 'duration': 3.243}, {'end': 914.422, 'text': 'Now, wherever I go, it should be good.', 'start': 913.001, 'duration': 1.421}, {'end': 915.482, 'text': 'Okay Awesome.', 'start': 914.662, 'duration': 0.82}, {'end': 916.183, 'text': 'Great Yeah.', 'start': 915.542, 'duration': 0.641}, {'end': 917.884, 'text': 'Nice So we installed this.', 'start': 916.583, 'duration': 1.301}, {'end': 919.445, 'text': "Let's go next.", 'start': 918.604, 'duration': 0.841}, {'end': 920.426, 'text': 'So we installed that.', 'start': 919.505, 'duration': 0.921}, {'end': 923.468, 'text': 'And then next we need to actually log into our Firebase hosting.', 'start': 920.546, 'duration': 2.922}, {'end': 925.882, 'text': "So Back in, let's go back to the command line.", 'start': 923.528, 'duration': 2.354}, {'end': 927.083, 'text': "Let's do Firebase login.", 'start': 925.902, 'duration': 1.181}, {'end': 930.886, 'text': "And then let's type in Y.", 'start': 928.064, 'duration': 2.822}, {'end': 932.047, 'text': 'So that Y for yes.', 'start': 930.886, 'duration': 1.161}, {'end': 934.689, 'text': 'And then this will pop up a little window.', 'start': 933.148, 'duration': 1.541}, {'end': 936.37, 'text': 'Just need to sign into your account.', 'start': 934.989, 'duration': 1.381}, {'end': 939.553, 'text': 'So they actually take all the headache out of it.', 'start': 937.831, 'duration': 1.722}, {'end': 942.235, 'text': 'So this is literally as simple as it gets to set things up.', 'start': 939.593, 'duration': 2.642}, {'end': 943.836, 'text': 'And then you go, there you go.', 'start': 942.935, 'duration': 0.901}, {'end': 944.997, 'text': "So we've logged into our account.", 'start': 943.856, 'duration': 1.141}, {'end': 951.522, 'text': "We will follow, we'll do the rest of the steps afterwards because this is gonna be deploying the website.", 'start': 946.438, 'duration': 5.084}, {'end': 955.901, 'text': "Yeah, so we can carry on with this once we've actually got the site built.", 'start': 953.1, 'duration': 2.801}, {'end': 956.441, 'text': 'Got it.', 'start': 956.181, 'duration': 0.26}, {'end': 958.382, 'text': "So let's click continue to console.", 'start': 957.021, 'duration': 1.361}, {'end': 962.083, 'text': "Great So here's the magic.", 'start': 959.282, 'duration': 2.801}, {'end': 965.023, 'text': 'So you see where it says Firebase SDK snippet.', 'start': 962.323, 'duration': 2.7}, {'end': 966.864, 'text': 'We want to click on config.', 'start': 965.684, 'duration': 1.18}, {'end': 970.005, 'text': 'Uh-huh Yeah.', 'start': 968.284, 'duration': 1.721}], 'summary': 'Pwj course now a membership, using react for web dev, firebase for hosting, easy setup', 'duration': 112.327, 'max_score': 857.678, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg857678.jpg'}, {'end': 1009.438, 'src': 'embed', 'start': 981.38, 'weight': 2, 'content': [{'end': 987.063, 'text': 'And what we want to do now is now that we have access to this, we can actually go back to the app and then we can implement this afterwards.', 'start': 981.38, 'duration': 5.683}, {'end': 989.785, 'text': 'But we should have got everything set up.', 'start': 988.124, 'duration': 1.661}, {'end': 992.426, 'text': "So let's go over to our folders right now.", 'start': 989.825, 'duration': 2.601}, {'end': 999.75, 'text': 'Yeah, And in the command line what we want to do is because we ran create react app.', 'start': 993.027, 'duration': 6.723}, {'end': 1003.072, 'text': 'we just want to go into the folder that it created the project in.', 'start': 999.75, 'duration': 3.322}, {'end': 1009.438, 'text': "So if we type in LS in the terminal, we should be able to see there's an app So you can see it says to-do app.", 'start': 1003.132, 'duration': 6.306}], 'summary': 'Preparing to implement a react app, accessed through command line and folders.', 'duration': 28.058, 'max_score': 981.38, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg981380.jpg'}], 'start': 279.001, 'title': 'Building react to-do app with firebase', 'summary': 'Discusses building a to-do list app with react and firebase, highlighting the ease of using create react app and the benefits of vs code live share. it also covers setting up firebase for a to-do app, showcasing the power of component-based design and the seamless integration of firebase with react.', 'chapters': [{'end': 530.74, 'start': 279.001, 'title': 'Building react to-do app with firebase', 'summary': 'Discusses building a to-do list app with react and firebase, showcasing the ease of using create react app and the benefits of vs code live share, while demonstrating the power and popularity of react as a library and the seamless integration of firebase for a fully-fledged app.', 'duration': 251.739, 'highlights': ['The chapter discusses the ease of using Create React App, which simplifies the process of starting a React project by running one command in the terminal, providing a starter template and necessary packages.', 'The benefits of VS Code Live Share are highlighted, showcasing the real-time collaborative coding experience on the same terminal and coding platform, and the intention to demonstrate it to the audience if time permits.', 'The power and popularity of React as a library are emphasized, with it being described as fast, widely used, super powerful, and wrapping the web development languages of HTML, CSS, and JavaScript.', 'The seamless integration of Firebase is mentioned, emphasizing the excitement about using Firestore database on Firebase with React, and the intention to deploy a complete, fully-fledged app for the audience to interact with.', 'The chapter also includes a brief explanation of React as a library built by Facebook, widely used and powerful, and the combination of React with Firebase, a product of Google, to create a deployable, interactive app.']}, {'end': 1087.457, 'start': 530.74, 'title': 'Firebase setup and react integration', 'summary': 'Covers setting up firebase for a to-do app, demonstrating the power of component-based design and the ease of connecting it with react, showcasing that firebase is a suite of tools that handle authentication, database hosting, and machine learning, while also explaining the process of setting up firebase hosting and connecting a react app to firebase.', 'duration': 556.717, 'highlights': ['Firebase is a suite of tools that handle authentication, database hosting, and machine learning Firebase not only provides database hosting but also handles authentication and allows for features like deploying websites and implementing machine learning.', 'Demonstrating the power of component-based design and the ease of connecting it with React Component-based design is highlighted as a powerful tool that allows writing a small amount of code to achieve significant results, and the ease of connecting it with React is emphasized.', 'Explaining the process of setting up Firebase hosting and connecting a React app to Firebase The process of setting up Firebase hosting is explained, including registering the app, setting up Firebase hosting, and connecting a React app to Firebase.']}], 'duration': 808.456, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg279001.jpg', 'highlights': ['The chapter discusses the ease of using Create React App, simplifying the process of starting a React project.', 'The benefits of VS Code Live Share are highlighted, showcasing real-time collaborative coding experience.', 'Firebase is a suite of tools handling authentication, database hosting, and machine learning.', 'Demonstrating the power of component-based design and its ease of connection with React.', 'Explaining the process of setting up Firebase hosting and connecting a React app to Firebase.']}, {'end': 2132.138, 'segs': [{'end': 1134.196, 'src': 'embed', 'start': 1106.83, 'weight': 5, 'content': [{'end': 1113.053, 'text': 'So now this is our sort of folder structure, so we can delete index or JS outside, because that was something we made before.', 'start': 1106.83, 'duration': 6.223}, {'end': 1116.348, 'text': 'yeah, yep, So this is going to be all the code.', 'start': 1113.053, 'duration': 3.295}, {'end': 1121.77, 'text': "So let's just set some base rules so that nobody breaks the project and just knows where to go from here.", 'start': 1116.448, 'duration': 5.322}, {'end': 1125.512, 'text': 'So never touch node modules is a safe way of thinking of it.', 'start': 1121.81, 'duration': 3.702}, {'end': 1129.134, 'text': "The only way we're going to touch that is if we do commands in the terminal.", 'start': 1125.932, 'duration': 3.202}, {'end': 1134.196, 'text': "But right now, the one that we're interested in is all of the things we're interested in is inside of source.", 'start': 1129.494, 'duration': 4.702}], 'summary': 'Established folder structure for project, emphasizing rules to avoid breaking project, such as not touching node modules.', 'duration': 27.366, 'max_score': 1106.83, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg1106830.jpg'}, {'end': 1949.798, 'src': 'embed', 'start': 1918.434, 'weight': 4, 'content': [{'end': 1925.925, 'text': "Nice And what we're going to do now is where previously we had these things hard coded, like take dogs for a walk, take the rubbish out.", 'start': 1918.434, 'duration': 7.491}, {'end': 1932.87, 'text': "Now what we're going to do is we're going to basically cut this and we're going to put it inside of our array as a string.", 'start': 1926.405, 'duration': 6.465}, {'end': 1934.712, 'text': "So that's one of the tasks.", 'start': 1933.211, 'duration': 1.501}, {'end': 1938.489, 'text': "And this one we're gonna have here as a second task.", 'start': 1935.367, 'duration': 3.122}, {'end': 1940.331, 'text': "Ah, I see what you're doing, okay.", 'start': 1939.15, 'duration': 1.181}, {'end': 1949.798, 'text': "So like right now, to dos basically starts with, do I have my app screen brush on this computer? I don't, okay.", 'start': 1940.731, 'duration': 9.067}], 'summary': 'Tasks are being moved from hard-coded to an array of strings.', 'duration': 31.364, 'max_score': 1918.434, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg1918434.jpg'}, {'end': 2018.483, 'src': 'embed', 'start': 1986.94, 'weight': 0, 'content': [{'end': 1988.742, 'text': "But remember, it's short term.", 'start': 1986.94, 'duration': 1.802}, {'end': 1993.445, 'text': 'So if we do append something, as soon as we hit refresh, the state is going to go back.', 'start': 1988.782, 'duration': 4.663}, {'end': 1994.105, 'text': 'Exactly Got it.', 'start': 1993.465, 'duration': 0.64}, {'end': 2000.99, 'text': "So it's only storing it in the front end, but as soon as you hit refresh, that array is going to be gone forever.", 'start': 1994.125, 'duration': 6.865}, {'end': 2001.53, 'text': 'Got it.', 'start': 2001.17, 'duration': 0.36}, {'end': 2006.614, 'text': 'So probably during that time, what I would need to do is send it back to my database in that time.', 'start': 2001.61, 'duration': 5.004}, {'end': 2008.415, 'text': 'Yes Got it.', 'start': 2007.714, 'duration': 0.701}, {'end': 2009.055, 'text': 'Exactly that.', 'start': 2008.435, 'duration': 0.62}, {'end': 2009.896, 'text': 'Cool Yeah.', 'start': 2009.115, 'duration': 0.781}, {'end': 2011.357, 'text': 'So the next step now..', 'start': 2010.256, 'duration': 1.101}, {'end': 2012.778, 'text': 'Keep going, keep going, keep going.', 'start': 2011.357, 'duration': 1.421}, {'end': 2018.483, 'text': 'So the next step now is basically we have this list, right? We have this list of to-dos.', 'start': 2014.261, 'duration': 4.222}], 'summary': 'Data is stored only temporarily in the front end, to be sent back to the database later.', 'duration': 31.543, 'max_score': 1986.94, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg1986940.jpg'}, {'end': 2082.802, 'src': 'embed', 'start': 2052.029, 'weight': 3, 'content': [{'end': 2057.231, 'text': 'so in this case, take dogs for a walk and then you can do some stuff with that and you can return like a little element.', 'start': 2052.029, 'duration': 5.202}, {'end': 2063.094, 'text': "So in our case we're going to return the first list item, so this one, and then it's going to go through it again.", 'start': 2057.251, 'duration': 5.843}, {'end': 2066.475, 'text': 'get the second one to take the rubbish out and then we can return the second list item.', 'start': 2063.094, 'duration': 3.381}, {'end': 2073.879, 'text': 'So how do we do that? We say to-dos.map, and then we do something here called an arrow function.', 'start': 2067.016, 'duration': 6.863}, {'end': 2082.802, 'text': 'So the way we write an arrow function is when we go through the todos array, we want to get every single todo, so singular.', 'start': 2074.417, 'duration': 8.385}], 'summary': 'Using arrow functions, return list items from todos array.', 'duration': 30.773, 'max_score': 2052.029, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg2052029.jpg'}], 'start': 1088.523, 'title': 'React development', 'summary': 'Covers setting up react app structure, building a to-do app with firebase, simplifying full stack development with react js and firebase, and understanding react state and props fundamentals, including key concepts, such as folder structure setup, ui and functionality, full stack application development, and state and props manipulation.', 'chapters': [{'end': 1224.322, 'start': 1088.523, 'title': 'Setting up react app structure', 'summary': 'Explains how to set up the folder structure for a react app, including deleting unnecessary files, setting base rules, and modifying the app.js file to create a fresh template.', 'duration': 135.799, 'highlights': ['Setting base rules to not touch node modules to ensure project safety. The instructor emphasizes the rule of never touching the node modules to maintain project integrity and safety.', 'Cleaning up the folder by deleting unnecessary files including test.js, setup test.js, and logo.svg. The process involves deleting unnecessary files like test.js, setup test.js, and logo.svg to create a clean template for the app.', "Modifying app.js file to include a h1 tag with 'hello world' and removing references to the deleted logo file. The app.js file is modified to include a h1 tag with 'hello world' and remove references to the deleted logo file, resulting in a starting point for the app."]}, {'end': 1426.172, 'start': 1225.795, 'title': 'Building to-do app with firebase', 'summary': 'Focuses on building a to-do app, outlining the ui and basic functionality, including adding an input field and a button, as well as creating a list of tasks using unordered list elements.', 'duration': 200.377, 'highlights': ['The chapter focuses on building a to-do app, outlining the UI and basic functionality, including adding an input field and a button, as well as creating a list of tasks using unordered list elements. UI outline, input field, button, list of tasks', 'Discussion about whether to focus on making the app look pretty with Material UI or getting it functionally working. Decision-making process regarding UI design', 'Conversation about muting the microphone and checking the audio settings during the live stream. Technical discussion about audio setup']}, {'end': 1593.379, 'start': 1435.438, 'title': 'React js and firebase: simplifying full stack development', 'summary': 'Discusses the power of react js in creating a full stack application with firebase, simplifying front-end to back-end communication, and enabling real-time data updates, as well as the ease of setting up javascript react syntax in visual studio code.', 'duration': 157.941, 'highlights': ['React JS and Firebase enable full stack app development without traditional back-end components, simplifying front-end to back-end communication and providing real-time data updates. The real power of the React JS is we can create a full stack application with just React and Firebase without anything else like the backend and blah, blah, blah. Firebase takes all the complexity out and enables real-time information updates.', 'Setting up JavaScript React syntax in Visual Studio Code is simplified, with automatic setup upon creating a React app. Visual Studio Code is clever at picking up the language being used, and when creating a React app, everything gets set up automatically.']}, {'end': 2132.138, 'start': 1593.379, 'title': 'React state and props fundamentals', 'summary': 'Covers the fundamentals of using state and props in react, including the use of react hooks, jsx for dynamic javascript, and setting up short-term memory for component-specific data, with a focus on creating and manipulating a to-do list.', 'duration': 538.759, 'highlights': ['The chapter covers the fundamentals of using state and props in React, including the use of React hooks, JSX for dynamic JavaScript, and setting up short-term memory for component-specific data. The chapter delves into the importance of state and props in React, and also introduces the use of React hooks and JSX for dynamic JavaScript, emphasizing the setup of component-specific short-term memory.', 'The focus is on creating and manipulating a to-do list, including the use of state to store and update the list of to-dos without the need for page refresh. The chapter highlights the use of state to store and update a to-do list dynamically, allowing for appending items to the list without needing to refresh the page, and emphasizes the short-term nature of this stored data.', 'The use of JSX for dynamic JavaScript is demonstrated, allowing for the execution of JavaScript within HTML in React components. The chapter showcases the powerful use of JSX for executing dynamic JavaScript within HTML, enabling the demonstration of running JavaScript code, such as performing mathematical operations, within React components.']}], 'duration': 1043.615, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg1088523.jpg', 'highlights': ['React JS and Firebase enable full stack app development without traditional back-end components, simplifying front-end to back-end communication and providing real-time data updates.', 'The chapter covers the fundamentals of using state and props in React, including the use of React hooks, JSX for dynamic JavaScript, and setting up short-term memory for component-specific data.', 'Setting up JavaScript React syntax in Visual Studio Code is simplified, with automatic setup upon creating a React app.', 'The instructor emphasizes the rule of never touching the node modules to maintain project integrity and safety.', 'Cleaning up the folder by deleting unnecessary files including test.js, setup test.js, and logo.svg.', 'The focus is on creating and manipulating a to-do list, including the use of state to store and update the list of to-dos without the need for page refresh.']}, {'end': 3638.488, 'segs': [{'end': 2161.187, 'src': 'embed', 'start': 2133.454, 'weight': 7, 'content': [{'end': 2137.098, 'text': "Can you speak to them just about the overall what we're doing?", 'start': 2133.454, 'duration': 3.644}, {'end': 2145.986, 'text': "And I'm going to download an app real quickly, so then I can actually annotate over the screen, so then they can get visual aid as they're watching.", 'start': 2138.219, 'duration': 7.767}, {'end': 2148.26, 'text': 'okay?. Yeah, sure, dude.', 'start': 2145.986, 'duration': 2.274}, {'end': 2148.6, 'text': "Let's go.", 'start': 2148.3, 'duration': 0.3}, {'end': 2157.565, 'text': "Cool So for those of you guys who are new right now or you just want a little refresher on what we're doing, we are using Firebase and React.", 'start': 2148.62, 'duration': 8.945}, {'end': 2161.187, 'text': "So React is a front-end library and we're using it.", 'start': 2157.985, 'duration': 3.202}], 'summary': 'Using firebase and react for front-end development.', 'duration': 27.733, 'max_score': 2133.454, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg2133454.jpg'}, {'end': 2502.399, 'src': 'embed', 'start': 2444.906, 'weight': 0, 'content': [{'end': 2451.988, 'text': 'But when we type in the input field and click the button or we click the enter key, we want it to basically push and append into that array.', 'start': 2444.906, 'duration': 7.082}, {'end': 2452.608, 'text': 'Right? Yeah.', 'start': 2452.048, 'duration': 0.56}, {'end': 2461.211, 'text': 'So the first step in react is again, we need some kind of short memory, short term memory to remember what we actually type into the input.', 'start': 2452.808, 'duration': 8.403}, {'end': 2469.159, 'text': "So if we just scroll up a little bit and we go to a line six, And now what we're going to do is we're going to add another piece of short-term memory.", 'start': 2461.711, 'duration': 7.448}, {'end': 2474.884, 'text': 'And the pure purpose of this piece of state is going to be to remember what they type in the input.', 'start': 2469.56, 'duration': 5.324}, {'end': 2476.425, 'text': "So here I'm going to say input.", 'start': 2475.284, 'duration': 1.141}, {'end': 2480.889, 'text': "And I'm going to say set input, which is the convention that we use when we're writing a hook.", 'start': 2477.126, 'duration': 3.763}, {'end': 2483.191, 'text': 'And then we say use state.', 'start': 2481.83, 'duration': 1.361}, {'end': 2487.434, 'text': 'So this is exactly the same what we did for the first scenario, guys, with the to-dos.', 'start': 2483.311, 'duration': 4.123}, {'end': 2491.117, 'text': "But this time we're initializing input with an empty string.", 'start': 2487.775, 'duration': 3.342}, {'end': 2494.4, 'text': 'Because when you first land on the page, it should be empty, right? Yep.', 'start': 2491.157, 'duration': 3.243}, {'end': 2496.374, 'text': 'So we do that.', 'start': 2495.413, 'duration': 0.961}, {'end': 2498.456, 'text': 'And now we have our input set up.', 'start': 2496.894, 'duration': 1.562}, {'end': 2502.399, 'text': "Just to be clear, when you say input, you're talking about this over here.", 'start': 2498.476, 'duration': 3.923}], 'summary': 'In react, we use short-term memory to remember input typed in the input field, initializing it with an empty string.', 'duration': 57.493, 'max_score': 2444.906, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg2444906.jpg'}, {'end': 3045.487, 'src': 'embed', 'start': 2997.75, 'weight': 5, 'content': [{'end': 3000.292, 'text': "And that's the set of standards that everyone sort of abides by.", 'start': 2997.75, 'duration': 2.542}, {'end': 3003.213, 'text': 'So every year you get more supercharged features.', 'start': 3000.332, 'duration': 2.881}, {'end': 3005.314, 'text': "So whenever I say ES6, that's what I'm referring to.", 'start': 3003.253, 'duration': 2.061}, {'end': 3011.018, 'text': "So now what we're going to do is we're going to use the set to do's function.", 'start': 3006.295, 'duration': 4.723}, {'end': 3018.073, 'text': "So what we're going to say here is we want to basically update the to do's with and the way we do this.", 'start': 3011.078, 'duration': 6.995}, {'end': 3020.193, 'text': 'so this bit pay very close attention to.', 'start': 3018.073, 'duration': 2.12}, {'end': 3023.474, 'text': "so we need to basically set the to do's to an array.", 'start': 3020.193, 'duration': 3.281}, {'end': 3028.895, 'text': "so we're going to set it to an array, but we need to keep whatever we have in the array currently.", 'start': 3023.474, 'duration': 5.421}, {'end': 3032.136, 'text': "so we're going to use something called a spread.", 'start': 3028.895, 'duration': 3.241}, {'end': 3033.437, 'text': 'and what spread does?', 'start': 3032.136, 'duration': 1.301}, {'end': 3034.717, 'text': 'is we say spread?', 'start': 3033.437, 'duration': 1.28}, {'end': 3041.839, 'text': "that's sick, because that's basically like you're appending it or pushing it to the end of the current state.", 'start': 3034.717, 'duration': 7.122}, {'end': 3045.487, 'text': 'exactly exactly okay.', 'start': 3043.385, 'duration': 2.102}], 'summary': "Es6 standards bring more features annually, using 'set' function to update to-do's with spread method.", 'duration': 47.737, 'max_score': 2997.75, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg2997750.jpg'}, {'end': 3595.297, 'src': 'embed', 'start': 3567.265, 'weight': 4, 'content': [{'end': 3572.248, 'text': 'But what are your thoughts, Sonny? So I think that was a really good way of answering it.', 'start': 3567.265, 'duration': 4.983}, {'end': 3574.309, 'text': 'To be honest, I was the same as Qazi.', 'start': 3572.288, 'duration': 2.021}, {'end': 3575.449, 'text': 'I started self-taught.', 'start': 3574.369, 'duration': 1.08}, {'end': 3579.331, 'text': 'I pretty much got a book from the bookstore, the Apple bookstore.', 'start': 3575.769, 'duration': 3.562}, {'end': 3580.55, 'text': 'taught myself Java.', 'start': 3579.67, 'duration': 0.88}, {'end': 3584.132, 'text': "I would honestly recommend guys, cause I've done a degree approach as well.", 'start': 3581.051, 'duration': 3.081}, {'end': 3595.297, 'text': 'So my viewpoint on this is honestly from what I spent getting a degree and doing that as compared to sort of a bootcamp or doing things practically myself.', 'start': 3584.212, 'duration': 11.085}], 'summary': 'Sonny self-taught java, recommends practical learning over degree approach.', 'duration': 28.032, 'max_score': 3567.265, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg3567265.jpg'}, {'end': 3630.547, 'src': 'embed', 'start': 3605.301, 'weight': 3, 'content': [{'end': 3610.073, 'text': 'So I would recommend the approach that I would always give is give a bootcamp a try first.', 'start': 3605.301, 'duration': 4.772}, {'end': 3617.324, 'text': 'So self-teach and give it a bootcamp a try first, because now, with the internet and with all of the courses available, including Clever Programmer,', 'start': 3610.634, 'duration': 6.69}, {'end': 3619.568, 'text': 'we just have so much at our disposal.', 'start': 3617.324, 'duration': 2.244}, {'end': 3620.89, 'text': 'So give that a try first.', 'start': 3619.608, 'duration': 1.282}, {'end': 3623.185, 'text': 'before you even consider a degree.', 'start': 3621.745, 'duration': 1.44}, {'end': 3628.506, 'text': "If you feel like you, honestly, I'd recommend a degree maybe for machine learning, for those really in-depth things.", 'start': 3623.525, 'duration': 4.981}, {'end': 3630.547, 'text': "But as for coding, I'd recommend a bootcamp.", 'start': 3628.566, 'duration': 1.981}], 'summary': 'Consider trying a coding bootcamp first before pursuing a degree, especially for coding.', 'duration': 25.246, 'max_score': 3605.301, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg3605301.jpg'}], 'start': 2133.454, 'title': 'Firebase, react, and modern javascript', 'summary': 'Introduces firebase and react for web applications, covers the use of react hooks and firebase for simplified state management, demonstrates real-time web development with to-do list feature, and discusses modern javascript and form submission.', 'chapters': [{'end': 2249.331, 'start': 2133.454, 'title': 'Firebase and react for powerful web development', 'summary': 'Introduces the use of firebase and react to build powerful web applications, including examples of popular apps built with react and the real-time capabilities of firebase.', 'duration': 115.877, 'highlights': ['React is a front-end library built by Facebook, used to build powerful applications like Instagram, Tinder, Uber, and the entire Facebook app.', 'Firebase, a service provided by Google, enables hosting applications, database management, and authentication, all in real time.', 'The combination of React and Firebase allows for real-time updates in the app, such as adding to-dos and seeing them instantly on the screen.', 'Web development involves three languages: HTML, CSS, and JavaScript, with React providing a powerful way to wrap them inside a library for enhanced functionality.']}, {'end': 2699.311, 'start': 2249.927, 'title': 'Understanding react hooks and firebase', 'summary': 'Discusses the introduction of react hooks, particularly the usestate hook, and its simplification of state management as opposed to class-based components, along with the integration of firebase to eliminate the need for a backend, offering a simple and fast solution. it also covers the process of using the onchange function to capture input events and update the state in react.', 'duration': 449.384, 'highlights': ['React Hooks, particularly the useState hook, simplifies state management, eliminating the need for class-based components. useState hook simplifies state management, removing the complexity of class-based components.', 'Introduction of Firebase to eliminate the need for a backend, providing a simple and fast solution. Firebase introduced to provide a simple and fast solution, eliminating the need for a backend.', 'Usage of the onChange function to capture input events and update the state in React. The onChange function is used to capture input events and update the state in React, enabling dynamic rendering of input.']}, {'end': 3114.695, 'start': 2699.752, 'title': 'Real-time website updates', 'summary': 'Demonstrates real-time web development by showcasing the creation of a to-do list feature, incorporating es6 features and explaining the use of the spread operator to update the list in the short-term memory, without losing existing data, leading to faster and efficient web development.', 'duration': 414.943, 'highlights': ['The chapter showcases the real-time web development process by demonstrating the creation of a to-do list feature, incorporating ES6 features and explaining the use of the spread operator to update the list in the short-term memory, without losing existing data, leading to faster and efficient web development.', 'The instructor emphasizes the use of the inspector for debugging and recommends console logging as a best practice for effective debugging, illustrating its importance in web development.', 'The instructor explains the significance of ES6 in JavaScript, highlighting its role in providing supercharged features and annual upgrades, which are crucial for efficient web development.', 'The chapter discusses the use of the spread operator in updating the array in the short-term memory, ensuring that the existing data is preserved while adding new elements, showcasing the efficiency of this approach in web development.']}, {'end': 3638.488, 'start': 3114.836, 'title': 'Learning modern javascript', 'summary': 'Discusses learning the most modern version of javascript, preventing page refresh on form submission, and the value of self-taught bootcamp over a degree in coding.', 'duration': 523.652, 'highlights': ['Learning the most modern version of JavaScript is recommended for beginners. The speaker recommends learning the most modern version of JavaScript for beginners to be fine with it and mentions that this is covered in their course profit with JavaScript.', 'Preventing page refresh on form submission by using event.preventDefault in React is emphasized. The importance of preventing page refresh on form submission in React is highlighted, and the method event.preventDefault is mentioned as a solution to achieve this, ensuring the desired behavior of appending to the to-do list can happen normally.', 'The value of self-taught bootcamp over a degree in coding is discussed. The speakers share their experience and recommend trying a bootcamp first for practical, hands-on learning over a degree, especially for coding, due to the abundance of available courses and the immersive nature of coding bootcamps.']}], 'duration': 1505.034, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg2133454.jpg', 'highlights': ['Firebase enables hosting applications, database management, and authentication, all in real time.', 'React provides a powerful way to wrap HTML, CSS, and JavaScript inside a library for enhanced functionality.', 'The combination of React and Firebase allows for real-time updates in the app, such as adding to-dos and seeing them instantly on the screen.', 'React Hooks, particularly the useState hook, simplifies state management, eliminating the need for class-based components.', 'Introduction of Firebase to eliminate the need for a backend, providing a simple and fast solution.', 'The onChange function is used to capture input events and update the state in React, enabling dynamic rendering of input.', 'The chapter showcases the real-time web development process by demonstrating the creation of a to-do list feature, incorporating ES6 features and explaining the use of the spread operator to update the list in the short-term memory, without losing existing data, leading to faster and efficient web development.', 'The instructor emphasizes the use of the inspector for debugging and recommends console logging as a best practice for effective debugging, illustrating its importance in web development.', 'The instructor explains the significance of ES6 in JavaScript, highlighting its role in providing supercharged features and annual upgrades, which are crucial for efficient web development.', 'Learning the most modern version of JavaScript is recommended for beginners.', 'Preventing page refresh on form submission by using event.preventDefault in React is emphasized.', 'The value of self-taught bootcamp over a degree in coding is discussed.']}, {'end': 5481.789, 'segs': [{'end': 3665.215, 'src': 'embed', 'start': 3638.928, 'weight': 4, 'content': [{'end': 3645.069, 'text': 'So definitely, I think if you had to pick between a college or a bootcamp, I would agree, like go to a bootcamp.', 'start': 3638.928, 'duration': 6.141}, {'end': 3647.69, 'text': 'Exactly, exactly that.', 'start': 3646.25, 'duration': 1.44}, {'end': 3649.549, 'text': 'All right.', 'start': 3649.269, 'duration': 0.28}, {'end': 3651.35, 'text': 'Awesome That was a really good question.', 'start': 3649.589, 'duration': 1.761}, {'end': 3652.09, 'text': 'Yeah, thanks for that.', 'start': 3651.39, 'duration': 0.7}, {'end': 3657.692, 'text': "So now let's basically, so we have two options now.", 'start': 3653.831, 'duration': 3.861}, {'end': 3665.215, 'text': 'We can basically either create a component for each of the to-dos or we can introduce material UI.', 'start': 3658.212, 'duration': 7.003}], 'summary': 'Prefer bootcamp over college for learning. considering component creation or using material ui.', 'duration': 26.287, 'max_score': 3638.928, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg3638928.jpg'}, {'end': 3723.714, 'src': 'embed', 'start': 3686.822, 'weight': 1, 'content': [{'end': 3689.703, 'text': "So to install this into our project, it's going to be super simple.", 'start': 3686.822, 'duration': 2.881}, {'end': 3693.585, 'text': 'What we need to do is npm install Material UI core.', 'start': 3690.144, 'duration': 3.441}, {'end': 3695.005, 'text': 'So that first command.', 'start': 3693.965, 'duration': 1.04}, {'end': 3697.326, 'text': 'So if you just want to copy that, go over to VS Code.', 'start': 3695.045, 'duration': 2.281}, {'end': 3699.507, 'text': 'And I think we have to open up a set.', 'start': 3698.267, 'duration': 1.24}, {'end': 3700.808, 'text': 'Okay, yeah, you could do that.', 'start': 3699.567, 'duration': 1.241}, {'end': 3703.769, 'text': 'We just have to make sure we restart the app when we do that.', 'start': 3701.448, 'duration': 2.321}, {'end': 3712.144, 'text': "Yeah So what this is going to do now is it's going to install all of the Material UI core sort of elements into the project.", 'start': 3704.069, 'duration': 8.075}, {'end': 3715.667, 'text': 'So this includes buttons, it includes a bunch of stuff like that.', 'start': 3712.484, 'duration': 3.183}, {'end': 3719.17, 'text': 'And that means that we can get a really nice, clean looking app.', 'start': 3715.687, 'duration': 3.483}, {'end': 3723.714, 'text': "So I'm just going to open up Material UI as well on my computer so I can see what's going on.", 'start': 3720.091, 'duration': 3.623}], 'summary': 'Installing material ui core via npm for clean app look.', 'duration': 36.892, 'max_score': 3686.822, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg3686822.jpg'}, {'end': 4236.348, 'src': 'embed', 'start': 4208.835, 'weight': 9, 'content': [{'end': 4212.937, 'text': "Do you want to do that or should we leave that one? No, no, let's do that because this looks really ugly right now.", 'start': 4208.835, 'duration': 4.102}, {'end': 4220.477, 'text': "Okay, So what we're going to do is, before we do that, let's actually have it as a so.", 'start': 4214.153, 'duration': 6.324}, {'end': 4223.119, 'text': "right now we're rendering on line 36.", 'start': 4220.477, 'duration': 2.642}, {'end': 4229.223, 'text': "in our code we're rendering a list of to-dos right? Line 36, right here.", 'start': 4223.119, 'duration': 6.104}, {'end': 4236.348, 'text': "Yeah, So, right here we're rendering a list of to-dos, but React has this amazing thing called components, right?", 'start': 4229.623, 'duration': 6.725}], 'summary': 'Discussing rendering a list of to-dos with react components on line 36.', 'duration': 27.513, 'max_score': 4208.835, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg4208835.jpg'}, {'end': 4278.239, 'src': 'embed', 'start': 4248.476, 'weight': 10, 'content': [{'end': 4255.062, 'text': 'But then what I was going to say is we actually maybe write a component, and then inside that component, we use Material UI so we can show props.', 'start': 4248.476, 'duration': 6.586}, {'end': 4259.926, 'text': 'Okay, yeah, and then we can show how material or how components work too.', 'start': 4255.202, 'duration': 4.724}, {'end': 4261.728, 'text': 'Yeah, awesome.', 'start': 4261.027, 'duration': 0.701}, {'end': 4267.13, 'text': "So for now, what we're going to do is we're going to basically create a component, which is going to replace this.", 'start': 4262.847, 'duration': 4.283}, {'end': 4270.713, 'text': 'And then if we ever want to change how our to-do looks, we just go to that component.', 'start': 4267.19, 'duration': 3.523}, {'end': 4278.239, 'text': "So what we're going to do now is we're going to create a new file on the left called to-do.js.", 'start': 4270.733, 'duration': 7.506}], 'summary': 'Developing a new component to replace existing one for to-do list.', 'duration': 29.763, 'max_score': 4248.476, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg4248476.jpg'}, {'end': 4320.839, 'src': 'embed', 'start': 4291.789, 'weight': 0, 'content': [{'end': 4294.851, 'text': 'To do input or something, right? Not just to do.', 'start': 4291.789, 'duration': 3.062}, {'end': 4301.275, 'text': 'No, no, it would be a to do because what this component is going to resemble a to do on the screen.', 'start': 4296.072, 'duration': 5.203}, {'end': 4302.536, 'text': "So that's why we're going to call it to do.", 'start': 4301.515, 'duration': 1.021}, {'end': 4304.758, 'text': "So it's like one row, right? Just like one row.", 'start': 4302.556, 'duration': 2.202}, {'end': 4305.358, 'text': 'Yeah, exactly.', 'start': 4304.798, 'duration': 0.56}, {'end': 4306.479, 'text': "It's going to be like one row.", 'start': 4305.378, 'duration': 1.101}, {'end': 4308.14, 'text': 'Exactly All right.', 'start': 4306.719, 'duration': 1.421}, {'end': 4315.176, 'text': "So what I want to show you as well is basically there's this amazing snippet called ES7.", 'start': 4308.573, 'duration': 6.603}, {'end': 4318.678, 'text': 'So if you go to extensions right now, we can just give them a quick demonstration of this one.', 'start': 4315.496, 'duration': 3.182}, {'end': 4320.839, 'text': 'So go to your extensions on the left.', 'start': 4319.258, 'duration': 1.581}], 'summary': 'Discussing the creation of a to do component resembling one row and demonstrating the es7 snippet in the extensions.', 'duration': 29.05, 'max_score': 4291.789, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg4291789.jpg'}, {'end': 4630.662, 'src': 'embed', 'start': 4594.008, 'weight': 2, 'content': [{'end': 4597.708, 'text': "Otherwise, it's going to get very confusing because I'll show you why.", 'start': 4594.008, 'duration': 3.7}, {'end': 4604.45, 'text': "It's because when we go to do this, let's go to app.js.", 'start': 4597.768, 'duration': 6.682}, {'end': 4610.051, 'text': 'When we actually use our to do, so here when we do this, when we say to do, so this is how we do it.', 'start': 4604.73, 'duration': 5.321}, {'end': 4610.531, 'text': 'We say to do.', 'start': 4610.091, 'duration': 0.44}, {'end': 4613.538, 'text': 'and then we just do a closing like that.', 'start': 4611.358, 'duration': 2.18}, {'end': 4620.22, 'text': 'Now, remember the prop was called text, but we want the value of it to be the Todo.', 'start': 4614.239, 'duration': 5.981}, {'end': 4630.662, 'text': 'Do you see what we did there?', 'start': 4622.68, 'duration': 7.982}], 'summary': "Demonstrating how to use 'to do' in app.js for a clearer understanding.", 'duration': 36.654, 'max_score': 4594.008, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg4594008.jpg'}, {'end': 5328.379, 'src': 'embed', 'start': 5302.542, 'weight': 5, 'content': [{'end': 5308.927, 'text': "Yeah, usually it's quite a nice one where you basically, you will go to the end of the line.", 'start': 5302.542, 'duration': 6.385}, {'end': 5313.934, 'text': 'So if you go to where my cursor is right now, So if you go here.', 'start': 5308.947, 'duration': 4.987}, {'end': 5315.814, 'text': 'Add all missing imports.', 'start': 5314.054, 'duration': 1.76}, {'end': 5318.155, 'text': 'Oh, click that.', 'start': 5317.475, 'duration': 0.68}, {'end': 5322.897, 'text': 'Did that work? I mean, I think we had all the imports already, so let me try it.', 'start': 5319.016, 'duration': 3.881}, {'end': 5324.818, 'text': 'So I just deleted a few.', 'start': 5323.598, 'duration': 1.22}, {'end': 5328.379, 'text': 'Source action, add all missing imports.', 'start': 5325.998, 'duration': 2.381}], 'summary': 'Discussing adding missing imports in a code file.', 'duration': 25.837, 'max_score': 5302.542, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg5302542.jpg'}], 'start': 3638.928, 'title': 'Using material ui in react', 'summary': 'Covers the benefits of material ui in react, including installation instructions, handling empty input elements, improving input appearance, using vs code extensions, reusability of react components, and pwj course promotion with a coaching call and community access.', 'chapters': [{'end': 4063, 'start': 3638.928, 'title': 'Material ui in react', 'summary': "Discussed the benefits of using material ui in react to enhance the app's appearance, provided instructions on installing and using material ui components, and addressed an issue of adding empty elements to the to-do list by disabling the button if the input is blank.", 'duration': 424.072, 'highlights': ["The chapter discussed the benefits of using Material UI in React to enhance the app's appearance The chapter emphasized the advantages of using Material UI to improve the app's visual appeal and user interface.", 'Provided instructions on installing and using Material UI components Detailed instructions were provided on how to install Material UI core elements into the project, including buttons and other UI components, to create a clean and appealing app.', "Addressed an issue of adding empty elements to the to-do list by disabling the button if the input is blank The issue of adding empty elements to the to-do list was addressed by disabling the 'add to do' button if the input field is blank, ensuring a more seamless user experience."]}, {'end': 4456.321, 'start': 4063.16, 'title': 'Improving input and using material ui for components', 'summary': 'Discusses improving the input appearance using material ui, demonstrating the use of form control, input label, and components in react with vs code live share, while also highlighting the usage of vs code extensions like es7 react redux snippets and prettier.', 'duration': 393.161, 'highlights': ['The chapter emphasizes using Material UI to improve the appearance of input fields, showcasing the use of form control and input label in the React code, with the aim of enhancing the visual presentation of the input. This demonstrates the practical application of Material UI in web development.', 'The chapter showcases the simultaneous coding collaboration using VS Code Live Share, underlining the efficiency and excitement of real-time collaborative coding in web development, as demonstrated by the joint coding activity of the individuals.', 'The chapter highlights the utilization of VS Code extensions such as ES7 React Redux Snippets and Prettier, emphasizing their practical benefits in simplifying React component code writing and ensuring code formatting consistency, thus enhancing the development experience.', "The chapter mentions the usage of VS Code extension 'Bracket Pair Colorizer' for visually distinguishing and matching brackets and parentheses in the code, facilitating improved code readability and comprehension, which enhances the coding experience."]}, {'end': 4838.779, 'start': 4456.361, 'title': 'React component reusability and pwj course promotion', 'summary': "Discusses reusing react components using props, emphasizing sonny's teaching of react in pwj course with a deadline promotion, and encourages joining the program for a coaching call and community access.", 'duration': 382.418, 'highlights': ['Sonny emphasizes teaching React in PWJ course and encourages joining the program with a deadline promotion. Sonny mentions that in the PWJ course, they are teaching React as a fundamental part of the course and that the price will go up at midnight tonight, encouraging viewers to join the program and take advantage of the promotion.', "Explanation of reusing React components using props and the purpose of props in differentiating components. The chapter discusses the concept of reusing components in React using props to differentiate one component from another, exemplifying the use of props like 'text' to pass through and call the to-do title.", 'Encouragement to join the React coaching call and community access in the PWJ program. The speaker encourages the viewers to join the PWJ program for a React coaching call and community access, stating that it would be silly not to be in the program, and that they can cancel after 29 days if not satisfied.']}, {'end': 5481.789, 'start': 4838.799, 'title': 'React components and material ui', 'summary': 'Discusses the difference between functional and class-based components, the importance of learning both, and the process of creating a to-do component using material ui, including importing dependencies and styling the list.', 'duration': 642.99, 'highlights': ["Functional components and class-based components are both important to know as they form the fundamentals, with functional components being the new way of writing components. Functional components are the new way of writing the components, and it's important to know both functional and class-based components as they form the fundamentals.", 'Creating a to-do component with Material UI involves importing the necessary dependencies like list, list item, and list item text, and styling the list using its own CSS file. The process of creating a to-do component involves importing dependencies such as list, list item, and list item text, and styling the list using its own CSS file.', "The chapter emphasizes the importance of engaging with the audience on platforms like Instagram, requesting viewers to tag and mention the hosts' usernames for interaction and engagement. The hosts encourage audience engagement on Instagram by requesting viewers to tag and mention their usernames, Clever Kazi and SSSS Sanger, to facilitate interaction and engagement."]}], 'duration': 1842.861, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg3638928.jpg', 'highlights': ["The chapter emphasized the advantages of using Material UI to improve the app's visual appeal and user interface.", 'Detailed instructions were provided on how to install Material UI core elements into the project, including buttons and other UI components, to create a clean and appealing app.', "The issue of adding empty elements to the to-do list was addressed by disabling the 'add to do' button if the input field is blank, ensuring a more seamless user experience.", 'The chapter emphasizes using Material UI to improve the appearance of input fields, showcasing the use of form control and input label in the React code, with the aim of enhancing the visual presentation of the input.', 'The chapter highlights the utilization of VS Code extensions such as ES7 React Redux Snippets and Prettier, emphasizing their practical benefits in simplifying React component code writing and ensuring code formatting consistency, thus enhancing the development experience.', 'Sonny mentions that in the PWJ course, they are teaching React as a fundamental part of the course and that the price will go up at midnight tonight, encouraging viewers to join the program and take advantage of the promotion.', "The chapter discusses the concept of reusing components in React using props to differentiate one component from another, exemplifying the use of props like 'text' to pass through and call the to-do title.", 'The speaker encourages the viewers to join the PWJ program for a React coaching call and community access, stating that it would be silly not to be in the program, and that they can cancel after 29 days if not satisfied.', "Functional components are the new way of writing the components, and it's important to know both functional and class-based components as they form the fundamentals.", 'The process of creating a to-do component involves importing dependencies such as list, list item, and list item text, and styling the list using its own CSS file.', 'The hosts encourage audience engagement on Instagram by requesting viewers to tag and mention their usernames, Clever Kazi and SSSS Sanger, to facilitate interaction and engagement.']}, {'end': 6196.612, 'segs': [{'end': 5585.945, 'src': 'embed', 'start': 5556.921, 'weight': 5, 'content': [{'end': 5560.263, 'text': 'So I just want to make sure everybody can get as much as possible.', 'start': 5556.921, 'duration': 3.342}, {'end': 5562.064, 'text': "I'll slow my questions down a little bit.", 'start': 5560.383, 'duration': 1.681}, {'end': 5570.393, 'text': "So if we go to todo.css, and now inside of todo.js, I'm going to add a class name to the list.", 'start': 5563.308, 'duration': 7.085}, {'end': 5576.558, 'text': "So I'm going to say class name equals, and let's just call it todo list.", 'start': 5570.434, 'duration': 6.124}, {'end': 5577.859, 'text': "I can't see where you're writing.", 'start': 5576.598, 'duration': 1.261}, {'end': 5578.66, 'text': 'Oh, OK.', 'start': 5578.119, 'duration': 0.541}, {'end': 5579.44, 'text': "You're writing right here.", 'start': 5578.7, 'duration': 0.74}, {'end': 5580.481, 'text': 'OK Got it.', 'start': 5579.601, 'duration': 0.88}, {'end': 5585.945, 'text': "Yep And then here we just, inside of todo.css now, I'm just adding that CSS rule.", 'start': 5580.501, 'duration': 5.444}], 'summary': "Adding class name 'todo list' to todo.js for css rule.", 'duration': 29.024, 'max_score': 5556.921, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg5556921.jpg'}, {'end': 6045.511, 'src': 'heatmap', 'start': 5593.213, 'weight': 0.835, 'content': [{'end': 5600.076, 'text': "It depends on how we've set things up, but let's, um, save our to do and save, uh, and the to do digest.", 'start': 5593.213, 'duration': 6.863}, {'end': 5600.656, 'text': 'Got it.', 'start': 5600.276, 'duration': 0.38}, {'end': 5602.617, 'text': "And then let's go back.", 'start': 5601.837, 'duration': 0.78}, {'end': 5605.598, 'text': 'Uh, right.', 'start': 5604.818, 'duration': 0.78}, {'end': 5614.082, 'text': 'Okay So this is, this happens typically because we have a component inside of, so material UI has a bunch of rules that is built into it.', 'start': 5606.158, 'duration': 7.924}, {'end': 5616.623, 'text': 'So I think one of them might actually be centering.', 'start': 5614.442, 'duration': 2.181}, {'end': 5623.112, 'text': "Um, what we'll do is I think this actually keep this to the end so we can style it at the end.", 'start': 5618.05, 'duration': 5.062}, {'end': 5630.534, 'text': 'Yep Because we can even host it right now if we want, or I mean, uh, we can even start connecting Firebase to it now.', 'start': 5623.372, 'duration': 7.162}, {'end': 5632.275, 'text': "Yeah, let's do that.", 'start': 5631.375, 'duration': 0.9}, {'end': 5633.335, 'text': "Let's do that for now.", 'start': 5632.435, 'duration': 0.9}, {'end': 5634.916, 'text': "So let's, let's get rid of this for now.", 'start': 5633.355, 'duration': 1.561}, {'end': 5636.237, 'text': 'Um, okay.', 'start': 5635.676, 'duration': 0.561}, {'end': 5641.939, 'text': "So what we're going to do now is remember, guys, in the beginning what we did is we set up Firebase and we got a config.", 'start': 5636.477, 'duration': 5.462}, {'end': 5642.999, 'text': 'so a little config right?', 'start': 5641.939, 'duration': 1.06}, {'end': 5643.219, 'text': 'Yep.', 'start': 5643.079, 'duration': 0.14}, {'end': 5647.203, 'text': 'And what we need to do now is actually connect that config.', 'start': 5644.521, 'duration': 2.682}, {'end': 5650.906, 'text': 'So what I want you to do is create a file called firebase.js.', 'start': 5647.243, 'duration': 3.663}, {'end': 5657.171, 'text': "And this is the beautiful part, because right now it's so quick to do this right?", 'start': 5653.248, 'duration': 3.923}, {'end': 5659.273, 'text': "So that's the config, right?", 'start': 5658.152, 'duration': 1.121}, {'end': 5663.396, 'text': "But what we're going to do now is I have a little snippet of code that I always use.", 'start': 5659.813, 'duration': 3.583}, {'end': 5666.959, 'text': "So I think it's, let me get one second.", 'start': 5664.297, 'duration': 2.662}, {'end': 5675.316, 'text': 'So I always have this snippet of code that I use and all you guys need to do is actually just um copy this.', 'start': 5669.861, 'duration': 5.455}, {'end': 5680.638, 'text': "so pause the video, copy out what i've written here and we'll explain exactly what it's doing.", 'start': 5675.316, 'duration': 5.322}, {'end': 5683.058, 'text': 'so this snippet right here.', 'start': 5680.638, 'duration': 2.42}, {'end': 5688.68, 'text': 'so if we basically so, this one right here.', 'start': 5683.058, 'duration': 5.622}, {'end': 5693.041, 'text': "so it says comment out the top right now, and so this is what it's going to do.", 'start': 5688.68, 'duration': 4.361}, {'end': 5694.581, 'text': "is it's going to import firebase?", 'start': 5693.041, 'duration': 1.54}, {'end': 5696.502, 'text': 'so we need to actually install uh, firebase.', 'start': 5694.581, 'duration': 1.921}, {'end': 5703.647, 'text': 'so kazi, if you want to install firebase to the project, okay, so let me go to Firebase.', 'start': 5696.502, 'duration': 7.145}, {'end': 5704.247, 'text': 'Oh, nice.', 'start': 5703.847, 'duration': 0.4}, {'end': 5706.249, 'text': 'Mark Johnson actually just joined.', 'start': 5704.327, 'duration': 1.922}, {'end': 5709.191, 'text': 'Nice Awesome.', 'start': 5707.73, 'duration': 1.461}, {'end': 5710.012, 'text': 'That is awesome.', 'start': 5709.211, 'duration': 0.801}, {'end': 5713.755, 'text': 'So if you want to go to, not Firebase here.', 'start': 5710.492, 'duration': 3.263}, {'end': 5717.639, 'text': 'So if we go to MPM, what we need to do is MPMI and then Firebase.', 'start': 5713.815, 'duration': 3.824}, {'end': 5725.625, 'text': 'So inside of a terminal, we do MPMI, Firebase.', 'start': 5720.441, 'duration': 5.184}, {'end': 5729.789, 'text': "And what that's going to do is going to install all the Firebase dependencies inside of our project.", 'start': 5725.926, 'duration': 3.863}, {'end': 5730.71, 'text': 'Nice Okay.', 'start': 5730.049, 'duration': 0.661}, {'end': 5733.621, 'text': "So while that's happening, what we can do is we can carry on.", 'start': 5731.38, 'duration': 2.241}, {'end': 5737.123, 'text': 'So we then have this command is Firebase initialize app.', 'start': 5733.661, 'duration': 3.462}, {'end': 5739.025, 'text': 'So this is something that Firebase gives us.', 'start': 5737.304, 'duration': 1.721}, {'end': 5744.788, 'text': 'And all we need to do is that config that Kazi grabbed earlier, all we need to do is basically just copy that.', 'start': 5739.245, 'duration': 5.543}, {'end': 5746.449, 'text': 'So we can get rid of this for a sec.', 'start': 5744.988, 'duration': 1.461}, {'end': 5748.31, 'text': 'And then we can basically just paste that inside of here.', 'start': 5746.529, 'duration': 1.781}, {'end': 5750.011, 'text': "And that's like our key.", 'start': 5749.051, 'duration': 0.96}, {'end': 5755.815, 'text': "So that's going to be the key that gives us the basic, that is going to connect everything that we need to do.", 'start': 5750.912, 'duration': 4.903}, {'end': 5756.895, 'text': "It's going to connect everything.", 'start': 5755.835, 'duration': 1.06}, {'end': 5763.238, 'text': "So it's basically the key to our backend, right? And here we don't need to, we don't need these services.", 'start': 5757.335, 'duration': 5.903}, {'end': 5764.158, 'text': "So I'm going to get rid of this.", 'start': 5763.258, 'duration': 0.9}, {'end': 5772.284, 'text': "And all we're saying here is we're saying using the Firebase app that we just initialized.", 'start': 5765.96, 'duration': 6.324}, {'end': 5780.49, 'text': "So this one right here, we're connecting to fire store and we're basically just storing that in a variable called DB and then online 18.", 'start': 5772.504, 'duration': 7.986}, {'end': 5783.552, 'text': 'So if you scroll down on nine 18, we export that.', 'start': 5780.49, 'duration': 3.062}, {'end': 5788.296, 'text': 'So that way anywhere else in our react that we can just import it and then we have access to the DB.', 'start': 5783.653, 'duration': 4.643}, {'end': 5798.071, 'text': 'So Firestore here, guys, if you just go over to Firebase on Google Chrome.', 'start': 5789.625, 'duration': 8.446}, {'end': 5804.916, 'text': 'Okay So Firebase has a database.', 'start': 5799.912, 'duration': 5.004}, {'end': 5807.378, 'text': 'So if you click on the left, the database tab.', 'start': 5804.936, 'duration': 2.442}, {'end': 5809.619, 'text': 'Left, got it.', 'start': 5808.879, 'duration': 0.74}, {'end': 5813.722, 'text': 'Yep And then you click on Firestore.', 'start': 5810.78, 'duration': 2.942}, {'end': 5815.203, 'text': 'So it will say create database.', 'start': 5813.742, 'duration': 1.461}, {'end': 5820.2, 'text': 'Uh-huh And then you want to click on the start and test mode.', 'start': 5816.304, 'duration': 3.896}, {'end': 5823.2, 'text': 'Yep And click next.', 'start': 5820.76, 'duration': 2.44}, {'end': 5828.042, 'text': 'Yep And here you can set it to US central.', 'start': 5824.421, 'duration': 3.621}, {'end': 5829.582, 'text': "It doesn't really matter to be honest.", 'start': 5828.062, 'duration': 1.52}, {'end': 5833.703, 'text': "Okay What we're going to do here guys, this is setting up the entire sort of database backend.", 'start': 5829.822, 'duration': 3.881}, {'end': 5838.245, 'text': 'So the real time database, the querying, everything is just getting set up right now.', 'start': 5833.723, 'duration': 4.522}, {'end': 5842.006, 'text': "And it's sort of doing all this for us just from what we just did there.", 'start': 5838.545, 'duration': 3.461}, {'end': 5848.426, 'text': "Um, So once that's done, we should be able to actually start using our database.", 'start': 5842.866, 'duration': 5.56}, {'end': 5854.227, 'text': 'And guys, your mind is going to be blown when you see how simple the code is to get this working.', 'start': 5849.686, 'duration': 4.541}, {'end': 5854.887, 'text': "I'm pumped.", 'start': 5854.427, 'duration': 0.46}, {'end': 5856.367, 'text': 'It always amazes me.', 'start': 5854.927, 'duration': 1.44}, {'end': 5858.868, 'text': "Yeah, I'm really, really pumped.", 'start': 5857.147, 'duration': 1.721}, {'end': 5861.628, 'text': "It's really, really nice.", 'start': 5860.648, 'duration': 0.98}, {'end': 5867.129, 'text': "So Abdul said, why DB inside of export? So that's just a syntax.", 'start': 5862.028, 'duration': 5.101}, {'end': 5868.81, 'text': 'You can actually write it a different way.', 'start': 5867.369, 'duration': 1.441}, {'end': 5869.69, 'text': 'You can do it like this.', 'start': 5868.93, 'duration': 0.76}, {'end': 5871.41, 'text': 'You could say export default.', 'start': 5869.73, 'duration': 1.68}, {'end': 5873.964, 'text': "So let's just write it like that for now.", 'start': 5872.243, 'duration': 1.721}, {'end': 5876.284, 'text': 'That means that we can import it easier.', 'start': 5874.764, 'duration': 1.52}, {'end': 5880.205, 'text': "So that's something called import exporting, which I'd recommend.", 'start': 5876.784, 'duration': 3.421}, {'end': 5881.365, 'text': 'We do teach it in the course,', 'start': 5880.225, 'duration': 1.14}, {'end': 5887.447, 'text': "but I'd recommend you check up on what an import and export is and you'll be able to explain what a default and all those things are.", 'start': 5881.365, 'duration': 6.082}, {'end': 5889.387, 'text': 'Yeah Nice.', 'start': 5887.987, 'duration': 1.4}, {'end': 5895.589, 'text': "Because yeah, because one thing I learned about React is like if he didn't do this export line over here,", 'start': 5889.727, 'duration': 5.862}, {'end': 5899.069, 'text': "then in our other files we won't be able to use this exact DB.", 'start': 5895.589, 'duration': 3.48}, {'end': 5901.992, 'text': 'Exactly Yeah.', 'start': 5900.61, 'duration': 1.382}, {'end': 5903.753, 'text': 'Perfect way of putting it.', 'start': 5902.732, 'duration': 1.021}, {'end': 5905.453, 'text': 'Yeah Nice.', 'start': 5903.793, 'duration': 1.66}, {'end': 5906.873, 'text': 'So the database is all set up.', 'start': 5905.653, 'duration': 1.22}, {'end': 5913.315, 'text': 'Beautiful So Firestore has a structure of collection, document, collection, document, collection, document.', 'start': 5907.194, 'duration': 6.121}, {'end': 5915.076, 'text': 'And it sort of goes on forever.', 'start': 5913.715, 'duration': 1.361}, {'end': 5916.996, 'text': "What is a collection? It's just like an array.", 'start': 5915.096, 'duration': 1.9}, {'end': 5920.377, 'text': 'And then inside of the collection, you just have an array.', 'start': 5917.737, 'duration': 2.64}, {'end': 5929.34, 'text': 'So in our case, if you click on start a collection, and our collection is going to be called to-dos, right? Yeah.', 'start': 5920.397, 'duration': 8.943}, {'end': 5930.377, 'text': 'So you can go next.', 'start': 5929.656, 'duration': 0.721}, {'end': 5934.5, 'text': "And then the first document, we don't have to type in the auto ID.", 'start': 5930.597, 'duration': 3.903}, {'end': 5936.642, 'text': "But in the field, what we're going to do is text.", 'start': 5934.8, 'duration': 1.842}, {'end': 5939.684, 'text': "So remember, guys, that's how we sort of set it up.", 'start': 5937.963, 'duration': 1.721}, {'end': 5941.626, 'text': 'So text can be like take the dogs out for a walk.', 'start': 5939.725, 'duration': 1.901}, {'end': 5943.728, 'text': 'Or it could be like we could even call it a task.', 'start': 5941.686, 'duration': 2.042}, {'end': 5945.529, 'text': 'Yeah, we can call it a task.', 'start': 5944.649, 'duration': 0.88}, {'end': 5946.81, 'text': 'Or a to-do.', 'start': 5945.67, 'duration': 1.14}, {'end': 5948.592, 'text': 'Yeah, or to-do.', 'start': 5947.951, 'duration': 0.641}, {'end': 5951.675, 'text': 'And the value should be the actual to-do itself.', 'start': 5948.892, 'duration': 2.783}, {'end': 5953.216, 'text': 'So take dogs out or something like that.', 'start': 5951.695, 'duration': 1.521}, {'end': 5958.04, 'text': 'Nice And click save.', 'start': 5957.119, 'duration': 0.921}, {'end': 5960.545, 'text': 'Hey, look at that.', 'start': 5959.865, 'duration': 0.68}, {'end': 5962.406, 'text': 'I love my emojis.', 'start': 5961.366, 'duration': 1.04}, {'end': 5965.047, 'text': 'Nice And then look at that.', 'start': 5963.467, 'duration': 1.58}, {'end': 5966.368, 'text': "That's already in the database.", 'start': 5965.087, 'duration': 1.281}, {'end': 5968.729, 'text': "It's got a field, it's got a value and so forth.", 'start': 5966.608, 'duration': 2.121}, {'end': 5978.613, 'text': 'So now I guess our mission is to connect our React app to this database and start pulling it in so that if we open up app.js.', 'start': 5969.449, 'duration': 9.164}, {'end': 5986.458, 'text': 'So do you remember when we set up the initial state right?', 'start': 5982.256, 'duration': 4.202}, {'end': 5990.72, 'text': 'For to-dos, we actually hard-coded the beginning values right?', 'start': 5987.659, 'duration': 3.061}, {'end': 5992.601, 'text': 'Yep, yep, we did.', 'start': 5991.22, 'duration': 1.381}, {'end': 5994.842, 'text': 'So if we go to the top, so yeah.', 'start': 5993.121, 'duration': 1.721}, {'end': 5996.623, 'text': 'So we actually hard-coded these beginning values.', 'start': 5995.042, 'duration': 1.581}, {'end': 6001.505, 'text': "So now instead of these, we're gonna get it from the database? Yes, exactly.", 'start': 5996.683, 'duration': 4.822}, {'end': 6007.688, 'text': "So now if we press Command B, you'll be able to hide the sidebar and it should give you some more screen.", 'start': 6002.385, 'duration': 5.303}, {'end': 6009.889, 'text': 'Yeah, there you go.', 'start': 6009.269, 'duration': 0.62}, {'end': 6014.456, 'text': "And then, so now what we're gonna do is We can get rid of this console log for now.", 'start': 6010.409, 'duration': 4.047}, {'end': 6020.66, 'text': "So what we're going to do is we actually want the to-dos to be empty initially, right? We don't want them to have anything inside.", 'start': 6014.716, 'duration': 5.944}, {'end': 6027.406, 'text': "And then what we're going to use is we need to now, so let's actually run the scenario in our head.", 'start': 6020.68, 'duration': 6.726}, {'end': 6045.511, 'text': 'So when the app loads, we need to listen to the database and fetch new to-dos as they get refreshed, as they get added, removed.', 'start': 6027.426, 'duration': 18.085}], 'summary': 'Setting up firebase to connect react app to firestore database for real-time data storage and retrieval.', 'duration': 452.298, 'max_score': 5593.213, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg5593213.jpg'}, {'end': 5934.5, 'src': 'embed', 'start': 5905.653, 'weight': 1, 'content': [{'end': 5906.873, 'text': 'So the database is all set up.', 'start': 5905.653, 'duration': 1.22}, {'end': 5913.315, 'text': 'Beautiful So Firestore has a structure of collection, document, collection, document, collection, document.', 'start': 5907.194, 'duration': 6.121}, {'end': 5915.076, 'text': 'And it sort of goes on forever.', 'start': 5913.715, 'duration': 1.361}, {'end': 5916.996, 'text': "What is a collection? It's just like an array.", 'start': 5915.096, 'duration': 1.9}, {'end': 5920.377, 'text': 'And then inside of the collection, you just have an array.', 'start': 5917.737, 'duration': 2.64}, {'end': 5929.34, 'text': 'So in our case, if you click on start a collection, and our collection is going to be called to-dos, right? Yeah.', 'start': 5920.397, 'duration': 8.943}, {'end': 5930.377, 'text': 'So you can go next.', 'start': 5929.656, 'duration': 0.721}, {'end': 5934.5, 'text': "And then the first document, we don't have to type in the auto ID.", 'start': 5930.597, 'duration': 3.903}], 'summary': "Firestore database set up with 'to-dos' collection and auto id for first document", 'duration': 28.847, 'max_score': 5905.653, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg5905653.jpg'}, {'end': 6127.039, 'src': 'embed', 'start': 6096.855, 'weight': 0, 'content': [{'end': 6098.376, 'text': "we'll sort of replace it as we need to.", 'start': 6096.855, 'duration': 1.521}, {'end': 6101.498, 'text': 'so the function we write as an arrow function.', 'start': 6098.376, 'duration': 3.122}, {'end': 6108.843, 'text': 'so you just do this and honestly, all you need to know at this point is that this loads.', 'start': 6101.498, 'duration': 7.345}, {'end': 6114.306, 'text': 'so this code here fires when the app loads.', 'start': 6108.843, 'duration': 5.463}, {'end': 6115.507, 'text': 'so when app.js?', 'start': 6114.306, 'duration': 1.201}, {'end': 6122.832, 'text': "so when the component that we're in, when it loads, this code here is going to fire and this dependencies right here.", 'start': 6115.507, 'duration': 7.325}, {'end': 6124.513, 'text': 'you basically have an array here.', 'start': 6122.832, 'duration': 1.681}, {'end': 6127.039, 'text': 'Whatever is inside this array.', 'start': 6125.177, 'duration': 1.862}], 'summary': 'An arrow function is used to fire code when the app loads, with a dependency array.', 'duration': 30.184, 'max_score': 6096.855, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg6096855.jpg'}, {'end': 6196.612, 'src': 'embed', 'start': 6147.779, 'weight': 3, 'content': [{'end': 6150.92, 'text': "And every single time the input loads, it's gonna fire it off as well.", 'start': 6147.779, 'duration': 3.141}, {'end': 6152.461, 'text': "So you see, it's very powerful, this hook.", 'start': 6151.06, 'duration': 1.401}, {'end': 6154.502, 'text': 'Yeah, so basically this.', 'start': 6152.861, 'duration': 1.641}, {'end': 6161.624, 'text': 'it took me a while to wrap my mind around this before, but basically how I think of this is, for example,', 'start': 6154.502, 'duration': 7.122}, {'end': 6172.168, 'text': "if he made it to whenever this input variable happens, the use effect would be firing every single time I type here because I'm changing the input.", 'start': 6161.624, 'duration': 10.544}, {'end': 6176.112, 'text': 'But if he so then the input actually is the dependency.', 'start': 6172.668, 'duration': 3.444}, {'end': 6180.015, 'text': 'If he has no dependency, meaning he just has that like empty array.', 'start': 6176.832, 'duration': 3.183}, {'end': 6186.622, 'text': 'What that means is like, the only time it fires is when I refresh the page or I start the page.', 'start': 6180.536, 'duration': 6.086}, {'end': 6196.612, 'text': "But after the page has started, it will actually like never fire again based on any it's not watching for any changes anymore.", 'start': 6187.182, 'duration': 9.43}], 'summary': 'The use effect hook fires every time the input variable changes, with an empty array meaning it only fires on page refresh or start.', 'duration': 48.833, 'max_score': 6147.779, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg6147779.jpg'}], 'start': 5481.849, 'title': 'Setting up firebase and firestore database with react', 'summary': 'Covers setting up firebase with react, emphasizing file naming conventions, initializing firebase, installing dependencies, and setting up firestore database. it also explains the structure of firestore database, connecting a react app, and using useeffect hook to listen to database changes and fetch new todos.', 'chapters': [{'end': 5905.453, 'start': 5481.849, 'title': 'Setting up firebase with react', 'summary': 'Covers setting up firebase with react, emphasizing the importance of file naming conventions and explaining the process of initializing firebase, installing dependencies, and setting up the firestore database, with a focus on simplicity and ease of use.', 'duration': 423.604, 'highlights': ['Explaining the reasoning behind capitalized file names for components, to quickly identify them, especially in a production environment, where it grows quite big, aiding in quick identification of components. Capitalized file names aid in quick identification of components, especially in a growing production environment.', 'Discussing the process of initializing Firebase, installing Firebase dependencies, and setting up the Firestore database, emphasizing the simplicity and ease of use of the code. Emphasizing the simplicity and ease of use in initializing Firebase, installing dependencies, and setting up the Firestore database.', 'Guiding through the steps to create a file called firebase.js, initializing Firebase app, and connecting to Firestore, with a focus on the simplicity and ease of the setup process. Guiding through the steps to create a file called firebase.js, initializing Firebase app, and connecting to Firestore with a focus on simplicity and ease of use.']}, {'end': 6196.612, 'start': 5905.653, 'title': 'Setting up firestore database', 'summary': 'Explains the structure of firestore database, setting up collections and documents, connecting a react app to the database, and using useeffect hook to listen to database changes and fetch new todos.', 'duration': 290.959, 'highlights': ['Explaining the structure of Firestore database as collection, document, collection, document, and so on, resembling an array. Firestore has a structure of collection, document, collection, document, collection, document, resembling an array.', "Setting up a collection named 'to-dos' and adding a document with a field 'text' for tasks like 'take the dogs out for a walk'. Setting up a collection named 'to-dos' and adding a document with a field 'text' for tasks like 'take the dogs out for a walk'.", 'Adapting the React app to fetch initial values from the database instead of hard-coding them. Adapting the React app to fetch initial values from the database instead of hard-coding them.', 'Using useEffect hook to listen to the database and fetch new todos as they get refreshed, added, or removed. Using useEffect hook to listen to the database and fetch new todos as they get refreshed, added, or removed.']}], 'duration': 714.763, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg5481849.jpg', 'highlights': ['Capitalized file names aid in quick identification of components, especially in a growing production environment.', 'Emphasizing the simplicity and ease of use in initializing Firebase, installing dependencies, and setting up the Firestore database.', 'Guiding through the steps to create a file called firebase.js, initializing Firebase app, and connecting to Firestore with a focus on simplicity and ease of use.', 'Firestore has a structure of collection, document, collection, document, collection, document, resembling an array.', "Setting up a collection named 'to-dos' and adding a document with a field 'text' for tasks like 'take the dogs out for a walk'.", 'Adapting the React app to fetch initial values from the database instead of hard-coding them.', 'Using useEffect hook to listen to the database and fetch new todos as they get refreshed, added, or removed.']}, {'end': 7073.1, 'segs': [{'end': 6387.405, 'src': 'embed', 'start': 6342.803, 'weight': 4, 'content': [{'end': 6347.005, 'text': 'So remember when Kazi added a task or like a to-do inside of that collection.', 'start': 6342.803, 'duration': 4.202}, {'end': 6349.146, 'text': "So we're saying go and get all of the docs.", 'start': 6347.406, 'duration': 1.74}, {'end': 6352.428, 'text': "And then we're going to say map through every single one of the docs.", 'start': 6349.607, 'duration': 2.821}, {'end': 6356.951, 'text': "So docs are in this case right now, docs is every single to-do that I've added to the database.", 'start': 6352.448, 'duration': 4.503}, {'end': 6358.692, 'text': "Right now it's only one that I've added.", 'start': 6357.091, 'duration': 1.601}, {'end': 6360.873, 'text': 'Exactly Got it.', 'start': 6359.752, 'duration': 1.121}, {'end': 6363.074, 'text': "So I'm mapping through all of the docs.", 'start': 6361.573, 'duration': 1.501}, {'end': 6365.529, 'text': "then we're going to say for every single doc.", 'start': 6363.647, 'duration': 1.882}, {'end': 6370.032, 'text': "because remember the syntax for this is you've got the plural here and the singular here.", 'start': 6365.529, 'duration': 4.503}, {'end': 6378.699, 'text': "so every time you loop through for every single doc, in this case right, set it inside of to do's.", 'start': 6370.032, 'duration': 8.667}, {'end': 6380.36, 'text': "yeah, so so we're saying that.", 'start': 6378.699, 'duration': 1.661}, {'end': 6384.203, 'text': 'so, right now this is kind of like the the more complex bit here.', 'start': 6380.36, 'duration': 3.843}, {'end': 6387.405, 'text': "so we're saying snapshot.docs.map through all the docs.", 'start': 6384.203, 'duration': 3.202}], 'summary': 'Mapping through the one added to-do in database.', 'duration': 44.602, 'max_score': 6342.803, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg6342803.jpg'}, {'end': 6573.493, 'src': 'heatmap', 'start': 6457.78, 'weight': 0.763, 'content': [{'end': 6462.504, 'text': "where right now what we're doing here and we can actually console log this to make this a bit clearer.", 'start': 6457.78, 'duration': 4.724}, {'end': 6470.49, 'text': "Yeah So what we're going to do here is if I just do console dot log and I do this, so let's do snapshot dot to do is right.", 'start': 6463.064, 'duration': 7.426}, {'end': 6470.87, 'text': 'Hold on.', 'start': 6470.53, 'duration': 0.34}, {'end': 6472.311, 'text': 'Let me, okay, cool.', 'start': 6470.91, 'duration': 1.401}, {'end': 6476.474, 'text': 'So this part here is getting that specific to do.', 'start': 6472.411, 'duration': 4.063}, {'end': 6485.081, 'text': "And so So I'll show you actually, if we don't add the to do here.", 'start': 6477.715, 'duration': 7.366}, {'end': 6486.262, 'text': 'What does this return?', 'start': 6485.121, 'duration': 1.141}, {'end': 6488.103, 'text': 'What does this whole thing like?', 'start': 6486.302, 'duration': 1.801}, {'end': 6493.867, 'text': 'what is this thing inside of the parentheses here gets evaluated to once this entire loop finishes running?', 'start': 6488.103, 'duration': 5.764}, {'end': 6496.73, 'text': "So we've console logged it.", 'start': 6495.068, 'duration': 1.662}, {'end': 6498.031, 'text': "So save it and run it and you'll see.", 'start': 6496.77, 'duration': 1.261}, {'end': 6500.873, 'text': "Okay Yeah, because that's the best way to see it.", 'start': 6498.131, 'duration': 2.742}, {'end': 6502.514, 'text': 'And then you can play around with what you get back.', 'start': 6500.893, 'duration': 1.621}, {'end': 6505.716, 'text': 'Refresh So now if we, yep.', 'start': 6502.754, 'duration': 2.962}, {'end': 6506.617, 'text': 'So if we refresh.', 'start': 6505.736, 'duration': 0.881}, {'end': 6511.621, 'text': 'So Whoa, it just happened.', 'start': 6507.958, 'duration': 3.663}, {'end': 6514.571, 'text': 'Okay, so Firebase does not contain a default.', 'start': 6512.768, 'duration': 1.803}, {'end': 6516.733, 'text': 'Oh, because we need to save the Firebase file.', 'start': 6514.671, 'duration': 2.062}, {'end': 6524.163, 'text': "Okay So if you notice, guys, whenever you don't save a file, it's got that little circle.", 'start': 6518.756, 'duration': 5.407}, {'end': 6526.126, 'text': "So that's sometimes what happens.", 'start': 6524.744, 'duration': 1.382}, {'end': 6530.492, 'text': 'So useEffect, also we need to import useEffect as well inside of app.js.', 'start': 6526.647, 'duration': 3.845}, {'end': 6537.395, 'text': 'Oh, so if you click it again, and you go down one, yep, there you go.', 'start': 6533.472, 'duration': 3.923}, {'end': 6538.876, 'text': "Oh, no, it didn't do it.", 'start': 6538.195, 'duration': 0.681}, {'end': 6539.736, 'text': "It's still not there.", 'start': 6538.896, 'duration': 0.84}, {'end': 6542.559, 'text': "Yeah, so sometimes that doesn't work.", 'start': 6540.877, 'duration': 1.682}, {'end': 6543.659, 'text': 'But yeah, useEffect.', 'start': 6542.579, 'duration': 1.08}, {'end': 6546.642, 'text': 'Nice, OK.', 'start': 6545.601, 'duration': 1.041}, {'end': 6550.445, 'text': 'Ooh, clean.', 'start': 6548.543, 'duration': 1.902}, {'end': 6555.629, 'text': 'So can you see, it actually grabbed the take dogs out, right? Yep.', 'start': 6550.865, 'duration': 4.764}, {'end': 6558.19, 'text': "So it doesn't take dogs out.", 'start': 6556.249, 'duration': 1.941}, {'end': 6560.552, 'text': 'Oh, it takes dog out from my database.', 'start': 6558.251, 'duration': 2.301}, {'end': 6561.233, 'text': 'That is sick.', 'start': 6560.592, 'duration': 0.641}, {'end': 6564.31, 'text': "Yeah, that's beautiful.", 'start': 6562.429, 'duration': 1.881}, {'end': 6565.85, 'text': 'Okay Right.', 'start': 6565.25, 'duration': 0.6}, {'end': 6573.493, 'text': "Well, but what we want, what we kind of want to do here is let's, um, let's make the console a little bigger so we can just see it.", 'start': 6566.27, 'duration': 7.223}], 'summary': 'Developers debug and test code using console log, useeffect, and firebase functionalities.', 'duration': 115.713, 'max_score': 6457.78, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg6457780.jpg'}, {'end': 6641.014, 'src': 'embed', 'start': 6610.724, 'weight': 0, 'content': [{'end': 6611.864, 'text': 'Ah, so this is an array.', 'start': 6610.724, 'duration': 1.14}, {'end': 6617.307, 'text': 'So this will return to us an array of objects, that piece of code.', 'start': 6611.904, 'duration': 5.403}, {'end': 6623.431, 'text': "So basically when I do set to dos, then it's set the to dos to that array of objects.", 'start': 6617.347, 'duration': 6.084}, {'end': 6628.945, 'text': "Yes But if we did that, so that's the bit where we that that's where everyone makes little error.", 'start': 6624.562, 'duration': 4.383}, {'end': 6641.014, 'text': "So if we did this, right, so this wouldn't work, because ours are to dues are only right now set to handle arrays, not array of objects.", 'start': 6629.005, 'duration': 12.009}], 'summary': 'Discussion on handling arrays and array of objects for to dos.', 'duration': 30.29, 'max_score': 6610.724, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg6610724.jpg'}, {'end': 6753.59, 'src': 'embed', 'start': 6724.924, 'weight': 6, 'content': [{'end': 6726.745, 'text': "It's just going to say whenever there's a snapshot.", 'start': 6724.924, 'duration': 1.821}, {'end': 6732.769, 'text': "So whenever anything changes in that database, if we push it, if we do anything, it's just going to basically fire this line of code off.", 'start': 6727.005, 'duration': 5.764}, {'end': 6738.532, 'text': 'Yeah So this is actually all the hard works done at this point.', 'start': 6733.489, 'duration': 5.043}, {'end': 6739.733, 'text': 'So we can actually get rid of this.', 'start': 6738.552, 'duration': 1.181}, {'end': 6743.206, 'text': 'So as soon as the app loads now.', 'start': 6740.905, 'duration': 2.301}, {'end': 6746.487, 'text': 'so if you save this and we go back to our app as soon as this loads,', 'start': 6743.206, 'duration': 3.281}, {'end': 6752.19, 'text': "it would actually refresh and then it would show us the stuff that's in our database.", 'start': 6746.487, 'duration': 5.703}, {'end': 6753.59, 'text': 'So you see that? Nice, beautiful.', 'start': 6752.21, 'duration': 1.38}], 'summary': 'Automated code triggers on database changes for instant app refresh.', 'duration': 28.666, 'max_score': 6724.924, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg6724924.jpg'}], 'start': 6197.987, 'title': 'Database listener and real-time sync', 'summary': 'Covers setting up a database listener in app.js to run code once when the app loads, never attaching a listener again to reduce browser stress, and using firebase realtime database for real-time data synchronization, allowing instant updates and additions.', 'chapters': [{'end': 6274.672, 'start': 6197.987, 'title': 'Database listener setup in app.js', 'summary': 'Discusses setting up a database listener in app.js to run a snippet of code once when the app loads, never attaching a listener again to reduce browser stress, and importing the special db from firebase to listen for database changes.', 'duration': 76.685, 'highlights': ['Setting up a database listener to run the code once when the app loads and never again reduces browser stress', 'Importing the special DB from Firebase to listen for database changes']}, {'end': 7073.1, 'start': 6275.373, 'title': 'Real-time database synchronization', 'summary': 'Explains how to use firebase realtime database to synchronize and update data in real time, providing a detailed walkthrough of the code and its functionality, allowing for instant data updates and additions.', 'duration': 797.727, 'highlights': ['The code sets up a listener to fire an event every time the database changes, providing a snapshot of the data, which can be used to update the local state. The code sets up a listener to fire an event every time the database changes, providing a snapshot of the data, enabling real-time updates and synchronization.', 'The process involves mapping through the documents in the database and extracting the necessary data to update the local state, ensuring that the data matches the required format. The process involves mapping through the documents in the database and extracting the necessary data to update the local state, ensuring that the data matches the required format for display.', 'A single line of code is used to add new data to the database, triggering a snapshot that updates the local state instantly, demonstrating the seamless real-time synchronization functionality. A single line of code is used to add new data to the database, triggering a snapshot that updates the local state instantly, demonstrating the seamless real-time synchronization functionality.', 'The explanation covers the importance of using server timestamps to ensure accurate and consistent time data across different locations, addressing potential timing issues. The explanation covers the importance of using server timestamps to ensure accurate and consistent time data across different locations, addressing potential timing issues.']}], 'duration': 875.113, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg6197987.jpg', 'highlights': ['Using firebase realtime database for real-time data synchronization, allowing instant updates and additions', 'Setting up a database listener to run the code once when the app loads and never again reduces browser stress', 'The code sets up a listener to fire an event every time the database changes, providing a snapshot of the data, enabling real-time updates and synchronization', 'A single line of code is used to add new data to the database, triggering a snapshot that updates the local state instantly, demonstrating the seamless real-time synchronization functionality', 'The process involves mapping through the documents in the database and extracting the necessary data to update the local state, ensuring that the data matches the required format for display', 'Importing the special DB from Firebase to listen for database changes', 'The explanation covers the importance of using server timestamps to ensure accurate and consistent time data across different locations, addressing potential timing issues']}, {'end': 7978.322, 'segs': [{'end': 7148.667, 'src': 'embed', 'start': 7121.84, 'weight': 6, 'content': [{'end': 7126.784, 'text': "So what we might need to do now is actually delete all the current to-dos, because they're not going to have timestamps.", 'start': 7121.84, 'duration': 4.944}, {'end': 7132.808, 'text': 'So if we go into Firestore and we just go there, what we can do is a shortcut.', 'start': 7127.765, 'duration': 5.043}, {'end': 7139.473, 'text': 'for this is if you go on the three dots on the top right, so those three dots click, delete collection and just type in to-dos.', 'start': 7132.808, 'duration': 6.665}, {'end': 7142.502, 'text': 'Yep, to-dos.', 'start': 7141.681, 'duration': 0.821}, {'end': 7143.863, 'text': 'We can delete the collection.', 'start': 7142.942, 'duration': 0.921}, {'end': 7144.763, 'text': 'And once we..', 'start': 7143.883, 'duration': 0.88}, {'end': 7148.667, 'text': "Guys, if there's no collection, even if we push a collection in, it will create one for us.", 'start': 7144.763, 'duration': 3.904}], 'summary': 'Consider deleting current to-dos without timestamps in firestore to create a new collection for better organization.', 'duration': 26.827, 'max_score': 7121.84, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg7121840.jpg'}, {'end': 7323.783, 'src': 'embed', 'start': 7298.96, 'weight': 1, 'content': [{'end': 7305.581, 'text': "so if you go to firestore now, yeah, go to the collection and refresh, because you're gonna have to refresh this to get there.", 'start': 7298.96, 'duration': 6.621}, {'end': 7309.182, 'text': "they're not made with react.", 'start': 7305.581, 'duration': 3.601}, {'end': 7312.842, 'text': 'and then so you see each of these have a unique id.', 'start': 7309.182, 'duration': 3.66}, {'end': 7316.543, 'text': 'right, yep, that they get by themselves.', 'start': 7312.842, 'duration': 3.701}, {'end': 7322.002, 'text': "that's what it was sorting by alphabetically the unique id Beautiful.", 'start': 7316.543, 'duration': 5.459}, {'end': 7323.783, 'text': 'So wait, hold on, hold on.', 'start': 7322.823, 'duration': 0.96}], 'summary': 'Discussion about firestore collection with unique ids and manual refresh.', 'duration': 24.823, 'max_score': 7298.96, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg7298960.jpg'}, {'end': 7409.696, 'src': 'embed', 'start': 7380.477, 'weight': 9, 'content': [{'end': 7383.479, 'text': "Firstly, let's deploy it and then we'll give that a go because that's a really nice idea.", 'start': 7380.477, 'duration': 3.002}, {'end': 7386.241, 'text': 'But I think deploying it would be a cooler thing to try first.', 'start': 7383.519, 'duration': 2.722}, {'end': 7389.343, 'text': 'Yep And then we can add the delete functionality too.', 'start': 7386.641, 'duration': 2.702}, {'end': 7395.167, 'text': "What is this complaint that's happening? I can just ignore that, right? Yeah.", 'start': 7390.584, 'duration': 4.583}, {'end': 7401.211, 'text': 'So this is actually quite an important thing, right? Keys are important in React.', 'start': 7395.207, 'duration': 6.004}, {'end': 7409.696, 'text': "For the sort of For going through this demo, I don't think we would go through everything on the keys because I think it might take a bit of time.", 'start': 7401.651, 'duration': 8.045}], 'summary': 'Deploying and trying the delete functionality in react demo, emphasizing the importance of keys.', 'duration': 29.219, 'max_score': 7380.477, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg7380477.jpg'}, {'end': 7538.521, 'src': 'heatmap', 'start': 7428.389, 'weight': 0.918, 'content': [{'end': 7431.851, 'text': 'Down So to deploy is so simple.', 'start': 7428.389, 'duration': 3.462}, {'end': 7432.832, 'text': 'Firebase deploy.', 'start': 7432.051, 'duration': 0.781}, {'end': 7434.983, 'text': "Yeah Yeah, that's it, literally.", 'start': 7432.852, 'duration': 2.131}, {'end': 7436.964, 'text': 'So now if you want to go to your terminal.', 'start': 7435.003, 'duration': 1.961}, {'end': 7439.366, 'text': 'Yeah Yep.', 'start': 7437.465, 'duration': 1.901}, {'end': 7443.449, 'text': 'And what we need to do now is do something called Firebase Space Init.', 'start': 7439.926, 'duration': 3.523}, {'end': 7449.053, 'text': 'Right? And this is going to pop up the Firebase CLI.', 'start': 7445.53, 'duration': 3.523}, {'end': 7451.014, 'text': "So it's a really nice sort of user experience here.", 'start': 7449.193, 'duration': 1.821}, {'end': 7455.117, 'text': 'And now what we want to do is just go to Hosting and press Spacebar.', 'start': 7451.034, 'duration': 4.083}, {'end': 7458.52, 'text': "And not Firestore or anything else because we've already set that up.", 'start': 7455.718, 'duration': 2.802}, {'end': 7466.261, 'text': "Yeah I mean, Firestore, so if you add this here, what it's going to do is it's going to give you a file to determine security rules.", 'start': 7459.659, 'duration': 6.602}, {'end': 7470.882, 'text': "Yeah So if you want to apply security rules to your database, that's where you can bring it in here.", 'start': 7466.541, 'duration': 4.341}, {'end': 7472.382, 'text': 'But we can do that later if you want.', 'start': 7470.922, 'duration': 1.46}, {'end': 7475.003, 'text': "But I mean, I haven't actually tinkered too much with the rules.", 'start': 7472.442, 'duration': 2.561}, {'end': 7475.543, 'text': 'Got it.', 'start': 7475.063, 'duration': 0.48}, {'end': 7477.203, 'text': 'But hosting is where we do it here.', 'start': 7475.563, 'duration': 1.64}, {'end': 7478.904, 'text': 'So if you do hosting and then press Enter.', 'start': 7477.243, 'duration': 1.661}, {'end': 7482.925, 'text': 'Cool Then you just click on Use Existing Project.', 'start': 7479.144, 'duration': 3.781}, {'end': 7486.445, 'text': 'Cool We find the one that we had.', 'start': 7483.185, 'duration': 3.26}, {'end': 7486.645, 'text': 'This one.', 'start': 7486.485, 'duration': 0.16}, {'end': 7489.066, 'text': "So I think it's the TodoApp CP, right? Yeah.", 'start': 7486.665, 'duration': 2.401}, {'end': 7492.839, 'text': "And then here, this bit's really careful, guys.", 'start': 7490.618, 'duration': 2.221}, {'end': 7494.56, 'text': 'You have to type in build.', 'start': 7492.879, 'duration': 1.681}, {'end': 7496.882, 'text': 'Yeah So this is a React thing.', 'start': 7494.9, 'duration': 1.982}, {'end': 7499.723, 'text': 'So all of our build stuff goes into a photo called build.', 'start': 7496.922, 'duration': 2.801}, {'end': 7501.064, 'text': 'So, yeah, we do that.', 'start': 7499.963, 'duration': 1.101}, {'end': 7508.648, 'text': 'And then here, so React is a single-page app, which means all of the entire app loads in one go.', 'start': 7502.104, 'duration': 6.544}, {'end': 7510.889, 'text': 'So here we want to click yes, yes.', 'start': 7509.088, 'duration': 1.801}, {'end': 7513.391, 'text': 'Ooh, really? Ooh.', 'start': 7511.63, 'duration': 1.761}, {'end': 7515.252, 'text': 'Damn So this will be a yes.', 'start': 7514.131, 'duration': 1.121}, {'end': 7517.553, 'text': "Okay Because by default, it's a no.", 'start': 7515.692, 'duration': 1.861}, {'end': 7519.194, 'text': "So you can't just hit enter here.", 'start': 7517.613, 'duration': 1.581}, {'end': 7524.909, 'text': 'yeah, you would have to type in yes, yeah, cool, and then there we go.', 'start': 7520.245, 'duration': 4.664}, {'end': 7530.034, 'text': 'so now what we need to do is run two commands, one after another.', 'start': 7524.909, 'duration': 5.125}, {'end': 7533.097, 'text': 'so the first command is going to be npm run build.', 'start': 7530.034, 'duration': 3.063}, {'end': 7538.521, 'text': "so if you want to run that one first, and what that's going to do, guys, is, it's basically going to.", 'start': 7533.097, 'duration': 5.424}], 'summary': 'Deploying with firebase cli, setting up hosting, and running npm run build to deploy the react app.', 'duration': 110.132, 'max_score': 7428.389, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg7428389.jpg'}, {'end': 7778.767, 'src': 'embed', 'start': 7758.373, 'weight': 8, 'content': [{'end': 7771.803, 'text': 'because whether you use Python and Django or you use any other whatever you use making to-do list apps and all of this stuff you have to add so much tedious functionality to make it fully CRUD enabled,', 'start': 7758.373, 'duration': 13.43}, {'end': 7776.086, 'text': "even if it's like with a REST API, and you have to have so many routes and so much stuff.", 'start': 7771.803, 'duration': 4.283}, {'end': 7777.747, 'text': 'and this is just single page.', 'start': 7776.086, 'duration': 1.661}, {'end': 7778.767, 'text': 'because normally, Sunny,', 'start': 7777.747, 'duration': 1.02}], 'summary': 'Developing crud-enabled to-do list apps in python and django requires adding tedious functionality and numerous routes.', 'duration': 20.394, 'max_score': 7758.373, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg7758373.jpg'}, {'end': 7932.826, 'src': 'embed', 'start': 7855.449, 'weight': 0, 'content': [{'end': 7861.672, 'text': 'So now what we need to do is we need to remember we were doing it to a flat array here, right? Yep.', 'start': 7855.449, 'duration': 6.223}, {'end': 7865.627, 'text': 'Now what we want to do is we need that object.', 'start': 7863.566, 'duration': 2.061}, {'end': 7875.149, 'text': 'We can keep this structure, but we need the ID because we need to know which document.', 'start': 7866.987, 'duration': 8.162}, {'end': 7876.629, 'text': "It is that we're trying to delete.", 'start': 7875.449, 'duration': 1.18}, {'end': 7878.869, 'text': 'Yeah Got it.', 'start': 7878.229, 'duration': 0.64}, {'end': 7882.19, 'text': 'We need to know which document, which ID to delete.', 'start': 7878.889, 'duration': 3.301}, {'end': 7886.031, 'text': 'Here. what we can do now is we can actually do so.', 'start': 7882.29, 'duration': 3.741}, {'end': 7892.143, 'text': "this is again we already understand what this bit's doing, so we just need to create an object, right?", 'start': 7886.031, 'duration': 6.112}, {'end': 7893.323, 'text': "So it's going to be an object.", 'start': 7892.203, 'duration': 1.12}, {'end': 7899.546, 'text': "And here what we're going to do is we're going to say that object is going to have a key with to do right?", 'start': 7894.504, 'duration': 5.042}, {'end': 7902.947, 'text': "And that's going to have what we had previously right?", 'start': 7900.106, 'duration': 2.841}, {'end': 7905.589, 'text': "But it's also going to have an ID.", 'start': 7903.748, 'duration': 1.841}, {'end': 7909.29, 'text': 'And this ID is going to be doc.id.', 'start': 7906.049, 'duration': 3.241}, {'end': 7914.052, 'text': "So what we're doing here now is we're not just having the flat structure that we had before.", 'start': 7909.71, 'duration': 4.342}, {'end': 7919.155, 'text': 'We have an object where the to do yes is what we had before.', 'start': 7914.953, 'duration': 4.202}, {'end': 7921.418, 'text': 'But we also have the ID.', 'start': 7919.977, 'duration': 1.441}, {'end': 7922.739, 'text': 'Got it.', 'start': 7922.379, 'duration': 0.36}, {'end': 7927.422, 'text': "Yep And we're still going to have an array of objects, right? Yes.", 'start': 7922.919, 'duration': 4.503}, {'end': 7929.064, 'text': "So now we're going to do an array of objects.", 'start': 7927.683, 'duration': 1.381}, {'end': 7932.826, 'text': "But if we save this now, it's going to break.", 'start': 7929.144, 'duration': 3.682}], 'summary': 'Transforming flat array to include ids for deletion, maintaining structure.', 'duration': 77.377, 'max_score': 7855.449, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg7855449.jpg'}, {'end': 7990.246, 'src': 'embed', 'start': 7960.934, 'weight': 4, 'content': [{'end': 7965.315, 'text': "because a lot of people actually get jobs while they're on the course or they get clients while they're on the course.", 'start': 7960.934, 'duration': 4.381}, {'end': 7970.336, 'text': 'Right The 17 year old has landed his own coaching client, which is insane.', 'start': 7965.615, 'duration': 4.721}, {'end': 7971.336, 'text': "He's actually on the court.", 'start': 7970.516, 'duration': 0.82}, {'end': 7973.436, 'text': 'Amanath, right? Yeah.', 'start': 7971.396, 'duration': 2.04}, {'end': 7975.517, 'text': 'Amanath actually landed one hundred and eighty dollars.', 'start': 7973.516, 'duration': 2.001}, {'end': 7978.322, 'text': 'From a coaching call, which is insane guys.', 'start': 7976.301, 'duration': 2.021}, {'end': 7982.463, 'text': "Yeah Yeah, so you can definitely do that That's crazy.", 'start': 7978.542, 'duration': 3.921}, {'end': 7983.504, 'text': 'Yes local host.', 'start': 7982.583, 'duration': 0.921}, {'end': 7990.246, 'text': 'So if you go back now cause you to you so it says to do you need to save this Yeah, uh-huh.', 'start': 7983.804, 'duration': 6.442}], 'summary': 'While on the course, many people secure jobs or clients, with one 17-year-old landing a coaching client and earning $180 from a coaching call.', 'duration': 29.312, 'max_score': 7960.934, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg7960934.jpg'}], 'start': 7073.14, 'title': 'Firebase and react integration', 'summary': "Discusses firebase server timestamp usage for data consistency, firestore timestamp sorting for ordering data, deployment using firebase cli resulting in a live app, and react's demand and ease of integration with firebase, emphasizing job opportunities and website development speed.", 'chapters': [{'end': 7216.855, 'start': 7073.14, 'title': 'Firebase timestamp usage', 'summary': 'Discusses the usage of firebase server timestamp to maintain consistent data across different locations, suggests deleting current to-dos to ensure timestamp consistency, and mentions a shortcut for deleting collections in firestore.', 'duration': 143.715, 'highlights': ['Discussing the usage of Firebase server timestamp for consistent data across different locations. The Firebase server timestamp is used to ensure that the timestamp remains consistent for all users, regardless of their location.', 'Suggesting the deletion of current to-dos to ensure timestamp consistency. The speaker recommends deleting current to-dos to maintain timestamp consistency when pushing in new data, as the existing to-dos may not have timestamps.', "Mentioning a shortcut for deleting collections in Firestore. A shortcut for deleting collections in Firestore is mentioned, where the speaker instructs to click on the three dots, select 'delete collection', and type in the collection name to delete it."]}, {'end': 7696.927, 'start': 7216.855, 'title': 'Firestore timestamp sorting and deployment', 'summary': 'Discusses ordering data in firestore by timestamp, implementing descending order to display the most recent entries, and deploying the application using firebase cli, resulting in a live app accessible through a hosting url.', 'duration': 480.072, 'highlights': ["The chapter discusses ordering data in Firestore by timestamp, implementing descending order to display the most recent entries. The discussion involves using 'order by' with the 'timestamp' as the key and setting the order as descending to ensure the most recent data is displayed.", "Deploying the application using Firebase CLI results in a live app accessible through a hosting URL. The deployment process involves running 'npm run build' to create an efficient package, followed by 'Firebase deploy' to deploy the app, resulting in a live app accessible through a hosting URL.", "The Firebase CLI provides a simple deployment process, bundling the entire app into an efficient, tiny package for deployment. The Firebase CLI simplifies deployment by bundling the entire app into an efficient, tiny package using 'npm run build' and deploying it through a simple 'Firebase deploy' command."]}, {'end': 7978.322, 'start': 7696.927, 'title': "React's power and demand", 'summary': 'Highlights the simplicity and speed of using react with firebase, emphasizing its high demand and job opportunities, and discussing the ease of adding functionality and creating production-ready websites.', 'duration': 281.395, 'highlights': ['React is highly demanded and one of the hottest trends globally, with records of people checking it out from around the world.', 'Using React with Firebase allows for fast turnaround time in building production-ready websites, with simple deployment and update processes.', 'Learning React can lead to job opportunities, as evidenced by a 17-year-old landing a coaching client and earning $180 while still on the course.', 'Adding CRUD functionality with React is remarkably simple compared to other frameworks or languages, such as Python and Django, saving time and effort in development.']}], 'duration': 905.182, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg7073140.jpg', 'highlights': ['Firebase server timestamp ensures consistent data for all users.', 'Deleting current to-dos maintains timestamp consistency for new data.', 'Shortcut for deleting collections in Firestore is mentioned.', 'Firestore orders data by timestamp in descending order for recent entries.', 'Firebase CLI deployment results in a live app accessible through a hosting URL.', 'Firebase CLI simplifies deployment by bundling the entire app into an efficient package.', 'React is highly demanded globally, leading to job opportunities.', 'React with Firebase allows fast turnaround time in building production-ready websites.', 'Learning React can lead to job opportunities and quick earnings.', 'Adding CRUD functionality with React is remarkably simple, saving time and effort.']}, {'end': 10765.617, 'segs': [{'end': 10180.557, 'src': 'embed', 'start': 10157.805, 'weight': 0, 'content': [{'end': 10165.369, 'text': 'so underneath full underneath firebase, we can have a real-time database.', 'start': 10157.805, 'duration': 7.564}, {'end': 10166.81, 'text': 'yep, so real-time database.', 'start': 10165.369, 'duration': 1.441}, {'end': 10173.746, 'text': "so. And the crazy thing is, guys, I don't think you understand that building a real time database is actually harder than you think.", 'start': 10166.81, 'duration': 6.936}, {'end': 10177.031, 'text': 'If you do it the traditional way, you have to have web sockets.', 'start': 10173.926, 'duration': 3.105}, {'end': 10180.557, 'text': "You have to have like a, usually you'd use something called socket.io.", 'start': 10177.091, 'duration': 3.466}], 'summary': 'Firebase offers real-time database, challenging to build traditionally.', 'duration': 22.752, 'max_score': 10157.805, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg10157805.jpg'}, {'end': 10429.954, 'src': 'embed', 'start': 10399.904, 'weight': 5, 'content': [{'end': 10402.826, 'text': 'A SQL database you pretty much have.', 'start': 10399.904, 'duration': 2.922}, {'end': 10404.627, 'text': 'and also Chirag says sir, I have one question.', 'start': 10402.826, 'duration': 1.801}, {'end': 10405.588, 'text': 'Yeah, shoot your questions.', 'start': 10404.647, 'duration': 0.941}, {'end': 10406.188, 'text': "We'll answer them.", 'start': 10405.628, 'duration': 0.56}, {'end': 10407.369, 'text': 'No worries.', 'start': 10406.248, 'duration': 1.121}, {'end': 10410.591, 'text': 'So SQL database, you have very clear structure.', 'start': 10407.709, 'duration': 2.882}, {'end': 10412.131, 'text': 'You have primary keys and tables.', 'start': 10410.631, 'duration': 1.5}, {'end': 10414.633, 'text': 'You have foreign keys which link to other tables.', 'start': 10412.532, 'duration': 2.101}, {'end': 10420.13, 'text': "There's a very clear definition of how things should be laid out, right? Yeah in no sequel.", 'start': 10415.488, 'duration': 4.642}, {'end': 10423.811, 'text': "There is no structure There's literally a case of what is good practice.", 'start': 10420.57, 'duration': 3.241}, {'end': 10424.632, 'text': 'What is bad practice?', 'start': 10423.851, 'duration': 0.781}, {'end': 10429.954, 'text': "So let's say, in sequel databases you do something called normalization, right?", 'start': 10424.672, 'duration': 5.282}], 'summary': 'Sql databases have clear structure and normalization, while nosql databases lack structure.', 'duration': 30.05, 'max_score': 10399.904, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg10399904.jpg'}, {'end': 10526.205, 'src': 'embed', 'start': 10502.655, 'weight': 4, 'content': [{'end': 10512.179, 'text': "So what else is left for what we're doing right now? So I guess like the styling of the app is something which we could mess around with.", 'start': 10502.655, 'duration': 9.524}, {'end': 10518.482, 'text': 'But otherwise, functionality wise, I think we have a complete built Firebase app.', 'start': 10512.759, 'duration': 5.723}, {'end': 10520.682, 'text': 'Awesome A Firebase React app.', 'start': 10518.682, 'duration': 2}, {'end': 10523.204, 'text': 'It has full CRUD functionality, material UI.', 'start': 10520.963, 'duration': 2.241}, {'end': 10526.205, 'text': "It's using the latest ES6 standards with React hooks.", 'start': 10523.224, 'duration': 2.981}], 'summary': 'Completed firebase react app with full crud functionality and material ui, using latest es6 standards with react hooks.', 'duration': 23.55, 'max_score': 10502.655, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg10502655.jpg'}, {'end': 10595.284, 'src': 'embed', 'start': 10571.71, 'weight': 3, 'content': [{'end': 10579.452, 'text': 'And once I started getting into React and I started picking up things, it really blew my mind, especially just because,', 'start': 10571.71, 'duration': 7.742}, {'end': 10585.014, 'text': 'once I learned about components and how they work, the development is so clean and then my apps are so fast.', 'start': 10579.452, 'duration': 5.562}, {'end': 10593.161, 'text': 'And then adding like the Firebase on top of it, I mean, and everything just happens in real time, that is freaking mind-blowing.', 'start': 10585.934, 'duration': 7.227}, {'end': 10595.284, 'text': "Yeah, that's it.", 'start': 10594.303, 'duration': 0.981}], 'summary': 'Learning react improved development efficiency and app speed; firebase integration provided real-time updates.', 'duration': 23.574, 'max_score': 10571.71, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg10571710.jpg'}, {'end': 10711.417, 'src': 'embed', 'start': 10689.045, 'weight': 2, 'content': [{'end': 10698.029, 'text': 'Some of the things that makes it different from any other program is really the fact that you have success coaches that are with you.', 'start': 10689.045, 'duration': 8.984}, {'end': 10702.371, 'text': 'So, Sunny, can you tell me a little bit about the success coaches part?', 'start': 10698.689, 'duration': 3.682}, {'end': 10707.954, 'text': 'Yeah, so, success coaches are really where I personally feel like.', 'start': 10703.47, 'duration': 4.484}, {'end': 10711.417, 'text': 'your development at your like progression as a developer excels,', 'start': 10707.954, 'duration': 3.463}], 'summary': 'This program stands out with success coaches who drive developer progression.', 'duration': 22.372, 'max_score': 10689.045, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg10689045.jpg'}], 'start': 7978.542, 'title': 'React, firebase, and material ui integration', 'summary': 'Discusses troubleshooting a react error, implementing a delete function using firebase and material ui icons, integrating material ui icons into a react app, adding a modal for editing to-dos, implementing recursive modals in material ui, and building a firebase react app with crud functionality and material ui designs.', 'chapters': [{'end': 8028.208, 'start': 7978.542, 'title': 'Troubleshooting react error', 'summary': 'Discusses troubleshooting a react error caused by passing an object instead of a string, leading to an invalid react child error at line 48 in the code.', 'duration': 49.666, 'highlights': ["The error occurs due to passing an object instead of a string, resulting in the 'Objects are not valid as a React child' error message.", "The issue is identified at line 48 in the code file apt.js, where the variable 'to do' is no longer a string."]}, {'end': 8501.389, 'start': 8028.956, 'title': 'Implementing a delete function', 'summary': 'Covers implementing a delete function for to-do items, using firebase, material ui icons, and addressing spam in the online environment.', 'duration': 472.433, 'highlights': ["The delete function for to-do items is implemented using Firebase, allowing users to remove to-do items by clicking a 'delete me' button, demonstrating the ability to manipulate data in the database with a single line of code.", "The process involves importing 'DB' from Firebase, accessing the 'todo' collection, and using the 'delete' method with the specific ID of the to-do item to remove it from the database.", 'Material UI icons are suggested for enhancing the delete button, providing a simple process for installing and using the icon pack to improve the user interface and experience.', 'The chapter addresses and responds to spam in the online environment, emphasizing the importance of maintaining a clean and organized community for effective learning and collaboration.']}, {'end': 8911.902, 'start': 8501.389, 'title': 'Material ui icon integration', 'summary': 'Covers the process of integrating material ui icons into a react app, including navigating the material ui website, importing icons, and deploying the app using firebase, aiming to improve user experience and functionality.', 'duration': 410.513, 'highlights': ["The process of integrating Material UI icons into a React app was covered, including navigating the Material UI website and importing icons. The discussion involved navigating the Material UI website, locating and importing specific icons like 'bin' and 'delete forever', and integrating them into the app for improved functionality.", 'The deployment process of the app using Firebase was detailed, including commands to rebuild and deploy the app, and potential issues with cached versions. The process of rebuilding and deploying the app using Firebase was explained, with a focus on potential issues related to cached versions and the need to refresh the hosting URL for resolving these issues.', 'The idea of implementing a filter for user comments using natural language processing and creating a cloud function for message filtering was discussed. The concept of adding a filter for user comments using natural language processing and creating a cloud function for message filtering was proposed, aiming to improve user experience by filtering out inappropriate content.']}, {'end': 9361.19, 'start': 8914.123, 'title': 'React app development: adding modal for editing to-do list', 'summary': 'Covers the process of adding a modal for editing to-dos using material ui, including implementing state, handling open and close functions, and discussing the use of codesandbox for collaborative development.', 'duration': 447.067, 'highlights': ['The chapter covers the process of adding a modal for editing to-dos using Material UI, including implementing state, handling open and close functions, and discussing the use of CodeSandbox for collaborative development.', 'When using create React app, it automatically sets everything up, including React scripts.', 'Adding a modal for editing to-dos involves implementing state to handle open and close functions.', 'The use of CodeSandbox is discussed for collaborative development, allowing people to follow along and avoiding the starting setup headache.']}, {'end': 10044.737, 'start': 9361.27, 'title': 'Implementing recursive modals in material ui', 'summary': "Explains the implementation of recursive modals in material ui, including nested modals, usage of 'usestyles' hook for styling, updating the to-do list in firestore, and handling input values and placeholders.", 'duration': 683.467, 'highlights': ["The implementation of recursive modals in Material UI, showcasing nested modals and usage of 'useStyles' hook for styling.", "Explanation of updating the to-do list in Firestore, including the use of 'merge true' to prevent overwriting existing data.", "Handling input values and placeholders, demonstrating the initial value of the input as the todo's value and setting a placeholder for the input field."]}, {'end': 10765.617, 'start': 10046.759, 'title': 'Building firebase react app', 'summary': 'Covers building a firebase react app with full crud functionality and material ui designs, utilizing the latest es6 standards with react hooks and demonstrating the ease of deployment, highlighting the benefits of using firebase and react, and the powerful features of profit with javascript course.', 'duration': 718.858, 'highlights': ['The app has full CRUD functionality, Material UI designs, and utilizes the latest ES6 standards with React hooks. The app demonstrates usage of full CRUD functionality and Material UI designs with the latest ES6 standards and React hooks, showcasing its modern and efficient development approach.', 'Firebase and React are highlighted for their ease of deployment and real-time functionality, showcasing the benefits of using these technologies. The tutorial emphasizes the ease of deployment and real-time functionality provided by Firebase and React, underlining the advantages of utilizing these technologies in app development.', 'The Profit with JavaScript course is highlighted for offering success coaches who provide personalized video feedback, fostering individual development and progression as a developer. The Profit with JavaScript course is promoted for its unique feature of providing success coaches who offer personalized video feedback, enhancing the learning experience and fostering individual development and progression as a developer.']}], 'duration': 2787.075, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqgTr-nd7Cg/pics/VqgTr-nd7Cg7978542.jpg', 'highlights': ['The app has full CRUD functionality, Material UI designs, and utilizes the latest ES6 standards with React hooks.', 'The tutorial emphasizes the ease of deployment and real-time functionality provided by Firebase and React, underlining the advantages of utilizing these technologies in app development.', 'The process of integrating Material UI icons into a React app was covered, including navigating the Material UI website and importing icons.', "The implementation of recursive modals in Material UI, showcasing nested modals and usage of 'useStyles' hook for styling.", "The delete function for to-do items is implemented using Firebase, allowing users to remove to-do items by clicking a 'delete me' button, demonstrating the ability to manipulate data in the database with a single line of code.", "The error occurs due to passing an object instead of a string, resulting in the 'Objects are not valid as a React child' error message."]}], 'highlights': ['Sonny and Qazi host a live event to build a beginner-friendly to-do app with React and Firebase, engaging 160 concurrent viewers.', 'The chapter discusses the ease of using Create React App, simplifying the process of starting a React project.', 'React JS and Firebase enable full stack app development without traditional back-end components, simplifying front-end to back-end communication and providing real-time data updates.', 'Firebase enables hosting applications, database management, and authentication, all in real time.', "The chapter emphasized the advantages of using Material UI to improve the app's visual appeal and user interface.", 'Capitalized file names aid in quick identification of components, especially in a growing production environment.', 'Using firebase realtime database for real-time data synchronization, allowing instant updates and additions', 'Firebase server timestamp ensures consistent data for all users.', 'The app has full CRUD functionality, Material UI designs, and utilizes the latest ES6 standards with React hooks.']}