title
🔴 How to Build a Instagram Clone with REACT JS for Beginners (in 3 Hours!)

description
🚀 Learn React JS for FREE: https://www.cleverprogrammer.com/free?utm_source=youtube&utm_medium=yt-description&utm_campaign=fem-all-day&utm_content=8-jul-20-instagram-clone Do you want to master REACT JS & learn how to make an income with those skills? Click here & enroll NOW 🔥👉 https://www.cleverprogrammer.com/pwj?ref=https://www.cleverprogrammer.com/a/30476/isBQm8G8&utm_source=youtube&utm_medium=yt-description&utm_content=july-8-live-instagram-clone-tutorial-sonny-qazi&utm_campaign=live-everyday&utm_term=warm In this FREE LIVE training, Qazi and Sonny will show you how simple it is to create a full stack, INSTAGRAM CLONE using React, Firebase & Material-UI... 👇 This training covers the following: 👉 Building a Instagram Clone App 💻 👉 Deploying a React app with Firebase Hosting 🌐 👉 How to handle authentication with Firebase 🔑 👉 How to upload images to Firebase Storage and use them on your site! 🖥️ 👉 Real-time database with Firebase’s Firestore 🔥 🌟 Course Contents 🌟 ⌨️: (0:00:00) What we'll be building ⌨️: (0:03:10) Start your REACT project (npx) ⌨️: (0:04:43) Create app on Firebase ⌨️: (0:07:09) Start your react app locally ⌨️: (0:07:53) Clean up your REACT app ⌨️: (0:08:53) Create input field ⌨️: (0:16:01) Add firebase hosting to your app ⌨️: (0:17:47) Add ability to send message ⌨️: (0:27:50) Question: Why use state instead of a normal variable? ⌨️: (0:30:54) Let's use Material-UI ⌨️: (0:37:29) CSS Styling ⌨️: (0:41:39) Add Image, Username, and Caption to Instagram Post ⌨️: (0:53:42) Render out multiple Posts ⌨️: (0:54:35) Is React better than Node.JS for back-end? ⌨️: (0:57:28) How to implement Firebase Database ⌨️: (1:08:17) Access Database, Authentication, and Storage from Firebase ⌨️: (1:09:12) How to use useEffect to Push and Pull data from Database ⌨️: (1:25:29) Firebase User Authentication ⌨️: (2:10:48) Storing IG posts & images in Firebase ⌨️: (2:44:07) Styling Image Uploader ⌨️: (2:52:13) Styling the Instagram Clone App ⌨️: (3:04:27) Add Comments to Instagram Posts ⌨️: (3:28:28) Final Step: Deploying our Instagram App to Firebase Biz / Sponsorships 👉 https://www.cleverprogrammer.com/partnerships

detail
{'title': '🔴 How to Build a Instagram Clone with REACT JS for Beginners (in 3 Hours!)', 'heatmap': [{'end': 1871.078, 'start': 1734.888, 'weight': 0.705}, {'end': 3738.254, 'start': 3335.802, 'weight': 0.82}, {'end': 5739.533, 'start': 5604.648, 'weight': 0.801}, {'end': 6006.388, 'start': 5871.397, 'weight': 0.714}, {'end': 7077.721, 'start': 6941.082, 'weight': 0.723}, {'end': 7611.751, 'start': 7470.216, 'weight': 0.802}], 'summary': 'Learn to build an instagram clone with react and firebase, featuring real-time comments, user account functionalities, and a live audience of 318 people. the tutorial covers setting up firebase, designing instagram post components, customizing react components, integrating firebase functions, implementing file and image upload features, and deploying the app to firebase with real-time comment posting and display.', 'chapters': [{'end': 440.269, 'segs': [{'end': 31.566, 'src': 'embed', 'start': 0.009, 'weight': 0, 'content': [{'end': 6.591, 'text': 'Now, guys, today we are going to be building an Instagram clone with React.', 'start': 0.009, 'duration': 6.582}, {'end': 8.692, 'text': 'So we come to you with another banger.', 'start': 6.651, 'duration': 2.041}, {'end': 14.714, 'text': "This is also gonna have Firebase and user authentication, and it's going to be deployed online.", 'start': 8.772, 'duration': 5.942}, {'end': 21.557, 'text': 'And it has all the functionality, the bells and whistles of Instagram.', 'start': 17.395, 'duration': 4.162}, {'end': 28.259, 'text': "Here is actually Instagram, right? And then here is our app that we're gonna be building.", 'start': 21.617, 'duration': 6.642}, {'end': 31.566, 'text': 'Looks clean, bro.', 'start': 30.546, 'duration': 1.02}], 'summary': 'Building instagram clone with react, firebase, user authentication, and online deployment.', 'duration': 31.557, 'max_score': 0.009, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM9.jpg'}, {'end': 119.143, 'src': 'embed', 'start': 90.383, 'weight': 1, 'content': [{'end': 92.725, 'text': "Nice Let me actually jump on and I'll comment something as well.", 'start': 90.383, 'duration': 2.342}, {'end': 93.246, 'text': 'Go for it.', 'start': 92.825, 'duration': 0.421}, {'end': 102.514, 'text': "Right So if I go over to the comment that cause you just posted and say, what's up guys? So three, two, one.", 'start': 94.246, 'duration': 8.268}, {'end': 105.017, 'text': 'Boom Real time, guys.', 'start': 103.376, 'duration': 1.641}, {'end': 107.518, 'text': 'Yeah Look at that.', 'start': 105.777, 'duration': 1.741}, {'end': 111.199, 'text': "Nice Because, yeah, it's essentially hosted online.", 'start': 107.778, 'duration': 3.421}, {'end': 117.582, 'text': 'And so then you just went and you posted a comment, and then I went and I posted a comment, and boom, it just worked in real time.', 'start': 111.299, 'duration': 6.283}, {'end': 119.143, 'text': 'like that, right? Yeah.', 'start': 117.582, 'duration': 1.561}], 'summary': 'Real-time comments posted online successfully.', 'duration': 28.76, 'max_score': 90.383, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM90383.jpg'}, {'end': 299.681, 'src': 'embed', 'start': 256.923, 'weight': 2, 'content': [{'end': 263.746, 'text': "So for some of the things like the avatar, the buttons that you notice, that's a really nice design library from Google called Material UI.", 'start': 256.923, 'duration': 6.823}, {'end': 266.087, 'text': "So we're going to show you guys how you can use that today.", 'start': 263.766, 'duration': 2.321}, {'end': 267.968, 'text': 'Nice I just logged in.', 'start': 266.907, 'duration': 1.061}, {'end': 271.824, 'text': 'Nice Awesome.', 'start': 269.201, 'duration': 2.623}, {'end': 273.686, 'text': 'So clean.', 'start': 273.165, 'duration': 0.521}, {'end': 279.292, 'text': "Next step, Kazi, while that's getting set up, let's go ahead and set up Firebase.", 'start': 275.508, 'duration': 3.784}, {'end': 281.475, 'text': "Okay, let's do it.", 'start': 279.933, 'duration': 1.542}, {'end': 285.849, 'text': "So while Kazi's doing that, Firebase is a set of tools.", 'start': 282.526, 'duration': 3.323}, {'end': 288.571, 'text': "It's a suite of tools, actually, from Google.", 'start': 286.53, 'duration': 2.041}, {'end': 290.913, 'text': 'And it allows you to do a bunch of different things.', 'start': 288.912, 'duration': 2.001}, {'end': 294.076, 'text': "So today, we're actually going to use three of these different services, or maybe four.", 'start': 290.953, 'duration': 3.123}, {'end': 297.179, 'text': "I think that what we're doing is we're having the database on Firebase.", 'start': 294.356, 'duration': 2.823}, {'end': 299.681, 'text': "So it's going to be a complete back-end solution for that.", 'start': 297.579, 'duration': 2.102}], 'summary': "Using google's material ui for design, setting up firebase for back-end, utilizing three to four services for database management.", 'duration': 42.758, 'max_score': 256.923, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM256923.jpg'}, {'end': 406.312, 'src': 'embed', 'start': 375.72, 'weight': 4, 'content': [{'end': 377.261, 'text': "And that's what keeps us going.", 'start': 375.72, 'duration': 1.541}, {'end': 382.29, 'text': 'Exactly And if you guys are enjoying it, make sure you shoot some Instagram stories and tag me and Kazian.', 'start': 378.183, 'duration': 4.107}, {'end': 383.371, 'text': 'Oh, yeah.', 'start': 382.951, 'duration': 0.42}, {'end': 384.773, 'text': 'We did that, right? We posted.', 'start': 383.431, 'duration': 1.342}, {'end': 385.575, 'text': 'Oh, my God.', 'start': 385.014, 'duration': 0.561}, {'end': 387.177, 'text': 'People are freaking testing the app.', 'start': 385.615, 'duration': 1.562}, {'end': 387.938, 'text': "That's so cool.", 'start': 387.237, 'duration': 0.701}, {'end': 389.379, 'text': 'Oh, nice.', 'start': 388.818, 'duration': 0.561}, {'end': 390.8, 'text': "We've got some live people coming in.", 'start': 389.439, 'duration': 1.361}, {'end': 398.566, 'text': 'Yeah And yeah, guys, where was that post where you said, so yeah, you guys can actually tag us.', 'start': 392.521, 'duration': 6.045}, {'end': 400.847, 'text': 'You guys can shoot an IG story right now.', 'start': 398.946, 'duration': 1.901}, {'end': 406.312, 'text': 'We actually had somebody tag us yesterday and I reposted their story on my Instagram.', 'start': 400.867, 'duration': 5.445}], 'summary': 'App users are actively engaging by posting instagram stories and tagging the speakers, resulting in live interactions and reposts on social media.', 'duration': 30.592, 'max_score': 375.72, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM375720.jpg'}], 'start': 0.009, 'title': 'Building instagram clone with react and firebase', 'summary': 'Covers building an instagram clone with react and firebase, demonstrating photo upload, real-time comments, user account functionalities, and a live audience of 318 people.', 'chapters': [{'end': 158.276, 'start': 0.009, 'title': 'Building instagram clone with react', 'summary': 'Covers building an instagram clone with react, firebase, and user authentication, demonstrating photo upload, real-time comments, and user account functionalities, with a live user count.', 'duration': 158.267, 'highlights': ['The app includes Firebase and user authentication, and demonstrates photo upload, real-time comments, and user account functionalities. The app has Firebase and user authentication, and showcases photo upload, real-time comments, and user account functionalities.', 'The live demonstration shows instant photo upload and real-time comments, with the example of posting a comment in real time. The live demonstration exhibits instant photo upload and real-time comments, with a real-time example of posting a comment.', 'The chapter also mentions the ability to log in, log out, and sign up for user accounts, with a live user count feature. The chapter also discusses logging in, logging out, and signing up for user accounts, along with a live user count feature.']}, {'end': 440.269, 'start': 158.477, 'title': 'Building instagram clone with react and firebase', 'summary': 'Covers the process of building an instagram clone using react and firebase, including setting up the development environment with create react app, integrating material ui for design, and utilizing firebase for back-end services, with a live audience of 318 people.', 'duration': 281.792, 'highlights': ['Setting up development environment with Create React App The first step involves setting up the development environment using Create React App, which simplifies the initial setup process and provides a responsive React template to start with.', 'Utilizing Material UI for design The tutorial demonstrates the use of Material UI, a design library from Google, for elements like avatars and buttons, enhancing the visual appeal of the Instagram clone.', 'Utilizing Firebase for back-end services The chapter extensively covers the use of Firebase, including setting up the database, authentication, deployment of the website, and Firebase Storage for storing and displaying images, providing a comprehensive back-end solution.', 'Audience engagement and promotion The live audience engagement is highlighted, with 318 people participating, and an emphasis on promoting audience interaction by encouraging likes, Instagram stories, and tagging the hosts, showcasing a strong community connection and fostering engagement.']}], 'duration': 440.26, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM9.jpg', 'highlights': ['The chapter covers building an Instagram clone with React and Firebase, showcasing photo upload, real-time comments, and user account functionalities.', 'The live demonstration exhibits instant photo upload and real-time comments, with a real-time example of posting a comment.', 'The tutorial demonstrates the use of Material UI, a design library from Google, for elements like avatars and buttons, enhancing the visual appeal of the Instagram clone.', 'The chapter extensively covers the use of Firebase, including setting up the database, authentication, deployment of the website, and Firebase Storage for storing and displaying images, providing a comprehensive back-end solution.', 'The live audience engagement is highlighted, with 318 people participating, and an emphasis on promoting audience interaction by encouraging likes, Instagram stories, and tagging the hosts, showcasing a strong community connection and fostering engagement.']}, {'end': 1178.893, 'segs': [{'end': 472.299, 'src': 'embed', 'start': 441.016, 'weight': 0, 'content': [{'end': 446.04, 'text': 'Okay, so the next step is if you just want to hit on Firebase, you see that button? Yeah, exactly.', 'start': 441.016, 'duration': 5.024}, {'end': 446.681, 'text': 'That web button.', 'start': 446.08, 'duration': 0.601}, {'end': 449.263, 'text': 'And what we need to do here is just register the app.', 'start': 447.201, 'duration': 2.062}, {'end': 451.104, 'text': 'So we just call it Instagram clone.', 'start': 449.323, 'duration': 1.781}, {'end': 454.467, 'text': 'And we want to tick that little box called set up Firebase hosting.', 'start': 451.605, 'duration': 2.862}, {'end': 461.193, 'text': 'Yep And the next step, we can actually ignore this because we use node modules when we set the app up.', 'start': 454.727, 'duration': 6.466}, {'end': 463.935, 'text': "So we don't actually need to worry about this and click next.", 'start': 461.213, 'duration': 2.722}, {'end': 472.299, 'text': 'And this one, guys, if you have, if you are starting from fresh, you just need to paste this into your terminal and run it.', 'start': 465.496, 'duration': 6.803}], 'summary': 'Register instagram clone app on firebase and set up hosting', 'duration': 31.283, 'max_score': 441.016, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM441016.jpg'}, {'end': 539.209, 'src': 'embed', 'start': 506.071, 'weight': 1, 'content': [{'end': 507.892, 'text': 'so now we have our app registered.', 'start': 506.071, 'duration': 1.821}, {'end': 508.532, 'text': "everything's good.", 'start': 507.892, 'duration': 0.64}, {'end': 511.174, 'text': "uh, the reason why i did that, kazi, by the way, is because you didn't do sudo.", 'start': 508.532, 'duration': 2.642}, {'end': 512.744, 'text': 'Oh yeah.', 'start': 512.364, 'duration': 0.38}, {'end': 519.145, 'text': "So if you guys get that error, you most likely, if you're on a Mac especially, you just need to run sudo npm install.", 'start': 512.823, 'duration': 6.322}, {'end': 521.806, 'text': 'And then what it will do is it will just prompt your password.', 'start': 519.405, 'duration': 2.401}, {'end': 525.366, 'text': "You just enter your password, and then it will have the right permission so you don't run into that issue.", 'start': 521.826, 'duration': 3.54}, {'end': 529.787, 'text': 'Yeah And thanks for giving the video a like, by the way, guys.', 'start': 526.426, 'duration': 3.361}, {'end': 530.487, 'text': 'Appreciate that.', 'start': 529.867, 'duration': 0.62}, {'end': 531.787, 'text': 'Oh, dope.', 'start': 531.167, 'duration': 0.62}, {'end': 532.968, 'text': "Everyone's giving it a like.", 'start': 532.027, 'duration': 0.941}, {'end': 533.908, 'text': 'Nice Yeah.', 'start': 533.028, 'duration': 0.88}, {'end': 539.209, 'text': "Okay So next what we're going to do is we're going to jump back over to our code.", 'start': 535.088, 'duration': 4.121}], 'summary': 'Register app, fix sudo issue, run sudo npm install, prompt password for right permission, proceed to code.', 'duration': 33.138, 'max_score': 506.071, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM506071.jpg'}, {'end': 992.52, 'src': 'embed', 'start': 962.2, 'weight': 2, 'content': [{'end': 962.58, 'text': 'There we go.', 'start': 962.2, 'duration': 0.38}, {'end': 967.183, 'text': "Right Now we need to style the app header because right now it doesn't look the best.", 'start': 962.6, 'duration': 4.583}, {'end': 972.646, 'text': "And if you notice on Instagram, it's very subtle, but they actually have a background color.", 'start': 967.663, 'duration': 4.983}, {'end': 974.767, 'text': "It's like a very subtle gray.", 'start': 973.407, 'duration': 1.36}, {'end': 977.989, 'text': 'Right So what we want is we want the app.', 'start': 975.308, 'duration': 2.681}, {'end': 982.092, 'text': 'So the app is going to have that subtle gray background.', 'start': 978.949, 'duration': 3.143}, {'end': 987.977, 'text': 'So you can demonstrate that by just opening up the Instagram website and you can just show them.', 'start': 982.893, 'duration': 5.084}, {'end': 991.62, 'text': "So you see at the back, there's like a tiny gray, right? Yep.", 'start': 987.997, 'duration': 3.623}, {'end': 992.52, 'text': 'Right there.', 'start': 992.06, 'duration': 0.46}], 'summary': 'Styling the app header with subtle gray background like instagram.', 'duration': 30.32, 'max_score': 962.2, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM962200.jpg'}], 'start': 441.016, 'title': 'Setting up firebase and instagram clone app', 'summary': 'Details setting up firebase for an instagram clone, including registration, hosting, tools installation, and error handling. it also covers clearing out unnecessary files, styling the header, and adding a subtle gray background color for the instagram clone app.', 'chapters': [{'end': 540.949, 'start': 441.016, 'title': 'Setting up firebase for instagram clone', 'summary': 'Details the process of setting up firebase for an instagram clone, including registering the app, setting up firebase hosting, installing firebase tools, and handling potential errors.', 'duration': 99.933, 'highlights': ['The process involves registering the app with Firebase, setting up Firebase hosting, and installing Firebase tools for deployment.', "Running 'sudo npm install' on Mac ensures the right permissions to avoid errors.", "The chapter emphasizes the importance of running 'sudo npm install' to avoid permission-related errors, especially on Mac systems.", 'The tutorial mentions the significance of giving the video a like, showing appreciation for the support received.']}, {'end': 1178.893, 'start': 541.618, 'title': 'Instagram clone app setup', 'summary': 'Covers setting up the instagram clone app, including clearing out unnecessary files, styling the header, and adding a subtle gray background color, with a focus on achieving a fresh and clean slate for development.', 'duration': 637.275, 'highlights': ['Setting up the Instagram clone app involves clearing out unnecessary files, such as test files and app.test.js, and removing the code inside the header, to achieve a fresh starting point for development. The process involves deleting test files, app.test.js, and clearing out the code inside the header to create a clean slate for development.', 'Styling the header involves adding a subtle gray background color to the app and an Instagram logo with an aspect ratio rule to maintain its appearance, achieving a clean and professional look for the app. The header is styled by adding a subtle gray background color to the app and an Instagram logo with an aspect ratio rule to maintain its appearance, creating a clean and professional look for the app.', "Using the Colorzilla Chrome extension, the speaker demonstrates how to grab colors from websites and incorporate them into the app's design, providing a practical tool for developers. The Colorzilla Chrome extension is used to grab colors from websites and incorporate them into the app's design, offering a practical tool for developers."]}], 'duration': 737.877, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM441016.jpg', 'highlights': ['Setting up Firebase involves registering the app, setting up hosting, and installing tools for deployment.', "Running 'sudo npm install' on Mac ensures the right permissions to avoid errors.", 'Clearing out unnecessary files and styling the header are essential steps in setting up the Instagram clone app.', 'Styling the header involves adding a subtle gray background color and an Instagram logo with an aspect ratio rule for a professional look.']}, {'end': 2494.012, 'segs': [{'end': 1201.119, 'src': 'embed', 'start': 1178.893, 'weight': 0, 'content': [{'end': 1186.895, 'text': "so now what we're going to do is there's one last finishing touch here, which is we just add a border bottom and we're going to give it one pixel,", 'start': 1178.893, 'duration': 8.002}, {'end': 1191.296, 'text': "which means it's a very thin border, it's a solid line and we're going to say it's light gray.", 'start': 1186.895, 'duration': 4.401}, {'end': 1192.937, 'text': 'so light gray.', 'start': 1191.296, 'duration': 1.641}, {'end': 1195.437, 'text': 'uh, yeah, there we go like gray.', 'start': 1192.937, 'duration': 2.5}, {'end': 1201.119, 'text': "and uh, now, if we save it, you'll see it's got that little, nice little clean line right.", 'start': 1195.437, 'duration': 5.682}], 'summary': 'Adding a one-pixel light gray border bottom for a clean finishing touch.', 'duration': 22.226, 'max_score': 1178.893, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM1178893.jpg'}, {'end': 1271.863, 'src': 'embed', 'start': 1244.724, 'weight': 1, 'content': [{'end': 1248.245, 'text': "We'll create one, and we're going to call this post.js.", 'start': 1244.724, 'duration': 3.521}, {'end': 1255.256, 'text': "Okay, so this is a component that's gonna design how the post looks.", 'start': 1250.811, 'duration': 4.445}, {'end': 1258.58, 'text': 'So like, for example, here, this is a post.', 'start': 1255.276, 'duration': 3.304}, {'end': 1263.085, 'text': "And so we're gonna design this thing right now, right? Exactly that, yeah.", 'start': 1258.82, 'duration': 4.265}, {'end': 1263.586, 'text': 'Cool, okay.', 'start': 1263.366, 'duration': 0.22}, {'end': 1269.342, 'text': "Perfect So then what we're going to do is we're going to use this really nice extension, and it's called ES7 Snippets.", 'start': 1264.099, 'duration': 5.243}, {'end': 1271.863, 'text': "It's a really, really handy extension that you can do.", 'start': 1270.222, 'duration': 1.641}], 'summary': 'Creating a post.js component to design posts using es7 snippets', 'duration': 27.139, 'max_score': 1244.724, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM1244724.jpg'}, {'end': 1312.472, 'src': 'embed', 'start': 1287.491, 'weight': 2, 'content': [{'end': 1294.257, 'text': 'Beautiful. now what we want to do is we go over to the post and we pretty much just going to add a bunch of.', 'start': 1287.491, 'duration': 6.766}, {'end': 1301.803, 'text': "so we, if we look over at instagram, at their posts that they have at the moment, let's sort of get a rough inspiration.", 'start': 1294.257, 'duration': 7.546}, {'end': 1310.55, 'text': 'so at the top they have a sort of they have a header, yeah, and then every post which has an avatar and then it has the username, right, yep.', 'start': 1301.803, 'duration': 8.747}, {'end': 1312.472, 'text': "so let's go ahead and just sort of add that in.", 'start': 1310.55, 'duration': 1.922}], 'summary': 'Adding instagram-style posts with header, avatar, and username.', 'duration': 24.981, 'max_score': 1287.491, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM1287491.jpg'}, {'end': 1360.949, 'src': 'embed', 'start': 1333.155, 'weight': 3, 'content': [{'end': 1335.817, 'text': "Exactly And we're not going to worry too much about the location for now.", 'start': 1333.155, 'duration': 2.662}, {'end': 1337.317, 'text': "We're just going to have the image.", 'start': 1336.217, 'duration': 1.1}, {'end': 1341.239, 'text': "And then underneath it, we aren't going to write the like functionality.", 'start': 1337.778, 'duration': 3.461}, {'end': 1344.021, 'text': "We're just going to have pretty much the username and then the caption.", 'start': 1341.259, 'duration': 2.762}, {'end': 1347.858, 'text': "So underneath the image, we're going to have username and caption.", 'start': 1344.835, 'duration': 3.023}, {'end': 1352.081, 'text': "So if you scroll down, you'll see, you know, it says coding Rob stay balanced.", 'start': 1348.218, 'duration': 3.863}, {'end': 1354.103, 'text': 'Right there is the username.', 'start': 1352.782, 'duration': 1.321}, {'end': 1357.646, 'text': 'And then right there, whoops, right there is the caption.', 'start': 1354.243, 'duration': 3.403}, {'end': 1360.949, 'text': "Exactly And yeah, of course, it's a big caption.", 'start': 1358.427, 'duration': 2.522}], 'summary': 'Developing an image platform with username and caption display.', 'duration': 27.794, 'max_score': 1333.155, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM1333155.jpg'}, {'end': 1609.976, 'src': 'embed', 'start': 1580.475, 'weight': 4, 'content': [{'end': 1582.216, 'text': 'We just want it to be 100% of the screen.', 'start': 1580.475, 'duration': 1.741}, {'end': 1585.599, 'text': 'So here we say 100% and then we say object fit contain.', 'start': 1582.837, 'duration': 2.762}, {'end': 1587.82, 'text': "And that's the same rule that I used before.", 'start': 1586.179, 'duration': 1.641}, {'end': 1590.242, 'text': "So it's saying just keep the aspect ratio.", 'start': 1587.9, 'duration': 2.342}, {'end': 1592.784, 'text': 'So there you go, right? Nice.', 'start': 1590.462, 'duration': 2.322}, {'end': 1600.109, 'text': "And now if you just resize the screen, you're going to notice that it's going to be responsive always to 100% of what the screen is.", 'start': 1592.824, 'duration': 7.285}, {'end': 1601.95, 'text': 'Oh, I love that.', 'start': 1600.73, 'duration': 1.22}, {'end': 1603.552, 'text': 'Object fit contain.', 'start': 1602.191, 'duration': 1.361}, {'end': 1606.233, 'text': 'Like the image is always going to look super nice.', 'start': 1603.592, 'duration': 2.641}, {'end': 1607.695, 'text': "That's really clean.", 'start': 1607.054, 'duration': 0.641}, {'end': 1608.275, 'text': "Oh, that's clean.", 'start': 1607.735, 'duration': 0.54}, {'end': 1609.976, 'text': "It's a really, really handy trick.", 'start': 1608.355, 'duration': 1.621}], 'summary': 'Using object fit contain to maintain aspect ratio and achieve 100% screen responsiveness. a handy trick.', 'duration': 29.501, 'max_score': 1580.475, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM1580475.jpg'}, {'end': 1871.078, 'src': 'heatmap', 'start': 1734.888, 'weight': 0.705, 'content': [{'end': 1738.829, 'text': 'Nice So then you have this sort of Instagram fill coming through now.', 'start': 1734.888, 'duration': 3.941}, {'end': 1743.571, 'text': "And the next step what we're going to do is let's just go ahead and get rid of this mark, this mark.", 'start': 1739.27, 'duration': 4.301}, {'end': 1747.291, 'text': 'So here we said we wanted an avatar, right? Yeah.', 'start': 1744.391, 'duration': 2.9}, {'end': 1751.933, 'text': "So what we're going to do now is we're actually going to go ahead and look over at Material UI.", 'start': 1747.471, 'duration': 4.462}, {'end': 1753.853, 'text': 'So if you just open up Material UI.', 'start': 1752.013, 'duration': 1.84}, {'end': 1757.84, 'text': "And to install Material UI, it's very simple.", 'start': 1755.715, 'duration': 2.125}, {'end': 1762.911, 'text': 'We just have to, inside the terminal, on the first page of Material UI, they have an npm install.', 'start': 1758, 'duration': 4.911}, {'end': 1765.156, 'text': 'So you just want to copy that and install that.', 'start': 1763.412, 'duration': 1.744}, {'end': 1778.545, 'text': 'yeah, and that will actually pull in the entire material UI design library and then we can just start using it as we wish.', 'start': 1772.58, 'duration': 5.965}, {'end': 1783.829, 'text': "so right now what we're going to do is we are going to go ahead and import something called.", 'start': 1778.545, 'duration': 5.284}, {'end': 1785.971, 'text': 'so this is the import statement for it.', 'start': 1783.829, 'duration': 2.142}, {'end': 1788.113, 'text': "so it's import avatar.", 'start': 1785.971, 'duration': 2.142}, {'end': 1792.456, 'text': "and if you ever need to find this stuff, guys, it's all inside of the material UI doc.", 'start': 1788.113, 'duration': 4.343}, {'end': 1798.381, 'text': "so if you go into the search bar and type in avatar, it's going to come up and it's going to show you how to use an avatar.", 'start': 1792.456, 'duration': 5.925}, {'end': 1802.142, 'text': "So let's go ahead and use it.", 'start': 1800.379, 'duration': 1.763}, {'end': 1806.331, 'text': "So where we're gonna put it is pretty much inside.", 'start': 1802.283, 'duration': 4.048}, {'end': 1812.295, 'text': "So right now we have a H3, right? We're gonna basically have the avatar next to it.", 'start': 1806.411, 'duration': 5.884}, {'end': 1813.616, 'text': "So we're going to have this like this.", 'start': 1812.415, 'duration': 1.201}, {'end': 1817.396, 'text': "So we're going to have the avatar and here the alternative.", 'start': 1813.636, 'duration': 3.76}, {'end': 1818.657, 'text': 'So this is what you can do.', 'start': 1817.536, 'duration': 1.121}, {'end': 1819.877, 'text': 'You can actually give it an image.', 'start': 1818.677, 'duration': 1.2}, {'end': 1822.417, 'text': "So it's going to actually have a little image inside of that.", 'start': 1820.397, 'duration': 2.02}, {'end': 1825.738, 'text': "But for now we don't really want to be bothering with the images too much.", 'start': 1822.457, 'duration': 3.281}, {'end': 1830.099, 'text': "So right now this is actually going to, this isn't going to sort of go equate to anything.", 'start': 1825.778, 'duration': 4.321}, {'end': 1831.659, 'text': "So it's just going to go to the old right?", 'start': 1830.119, 'duration': 1.54}, {'end': 1838.305, 'text': "And the old, what it does is, let's say, if this was Rafa Kazi, yeah, this is a fake Ozzie.", 'start': 1831.679, 'duration': 6.626}, {'end': 1841.306, 'text': "it's just gonna basically put an R to symbolize that it's.", 'start': 1838.305, 'duration': 3.001}, {'end': 1843.127, 'text': 'uh, oops, I think.', 'start': 1841.306, 'duration': 1.821}, {'end': 1845.628, 'text': "oops, yeah, there's no point, are there, right?", 'start': 1843.127, 'duration': 2.501}, {'end': 1851.57, 'text': 'yeah? so now what we can do is, if we save that, we should be able to see did it install?', 'start': 1845.628, 'duration': 5.942}, {'end': 1854.371, 'text': 'oh yeah, we need to the npm start again.', 'start': 1851.57, 'duration': 2.801}, {'end': 1859.633, 'text': 'yeah, to get the app up and running, yeah, and now what we can do is we need to just wrap this.', 'start': 1854.371, 'duration': 5.262}, {'end': 1861.473, 'text': 'so I kind of want these two next to each other.', 'start': 1859.633, 'duration': 1.84}, {'end': 1862.934, 'text': "so I'm going to put them inside a container.", 'start': 1861.473, 'duration': 1.461}, {'end': 1865.734, 'text': "So I'm going to say div and I'm going to say post.", 'start': 1863.513, 'duration': 2.221}, {'end': 1867.456, 'text': 'Hmm Clean.', 'start': 1866.335, 'duration': 1.121}, {'end': 1871.078, 'text': 'Yeah So also it pulls it from the altar.', 'start': 1868.516, 'duration': 2.562}], 'summary': 'Using material ui, the transcript covers the installation and usage of avatars, with a focus on implementing and displaying them alongside text content.', 'duration': 136.19, 'max_score': 1734.888, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM1734888.jpg'}, {'end': 1778.545, 'src': 'embed', 'start': 1744.391, 'weight': 5, 'content': [{'end': 1747.291, 'text': 'So here we said we wanted an avatar, right? Yeah.', 'start': 1744.391, 'duration': 2.9}, {'end': 1751.933, 'text': "So what we're going to do now is we're actually going to go ahead and look over at Material UI.", 'start': 1747.471, 'duration': 4.462}, {'end': 1753.853, 'text': 'So if you just open up Material UI.', 'start': 1752.013, 'duration': 1.84}, {'end': 1757.84, 'text': "And to install Material UI, it's very simple.", 'start': 1755.715, 'duration': 2.125}, {'end': 1762.911, 'text': 'We just have to, inside the terminal, on the first page of Material UI, they have an npm install.', 'start': 1758, 'duration': 4.911}, {'end': 1765.156, 'text': 'So you just want to copy that and install that.', 'start': 1763.412, 'duration': 1.744}, {'end': 1778.545, 'text': 'yeah, and that will actually pull in the entire material UI design library and then we can just start using it as we wish.', 'start': 1772.58, 'duration': 5.965}], 'summary': 'Installing material ui for avatar design using npm install.', 'duration': 34.154, 'max_score': 1744.391, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM1744391.jpg'}, {'end': 1817.396, 'src': 'embed', 'start': 1792.456, 'weight': 6, 'content': [{'end': 1798.381, 'text': "so if you go into the search bar and type in avatar, it's going to come up and it's going to show you how to use an avatar.", 'start': 1792.456, 'duration': 5.925}, {'end': 1802.142, 'text': "So let's go ahead and use it.", 'start': 1800.379, 'duration': 1.763}, {'end': 1806.331, 'text': "So where we're gonna put it is pretty much inside.", 'start': 1802.283, 'duration': 4.048}, {'end': 1812.295, 'text': "So right now we have a H3, right? We're gonna basically have the avatar next to it.", 'start': 1806.411, 'duration': 5.884}, {'end': 1813.616, 'text': "So we're going to have this like this.", 'start': 1812.415, 'duration': 1.201}, {'end': 1817.396, 'text': "So we're going to have the avatar and here the alternative.", 'start': 1813.636, 'duration': 3.76}], 'summary': 'The transcript discusses using an avatar in a specific context.', 'duration': 24.94, 'max_score': 1792.456, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM1792456.jpg'}, {'end': 1944.58, 'src': 'embed', 'start': 1923.321, 'weight': 7, 'content': [{'end': 1933.505, 'text': "so what we're gonna do now is we added this class name to the container which surrounds these two elements and we're gonna go to our CSS and we're just gonna do display flex.", 'start': 1923.321, 'duration': 10.184}, {'end': 1937.767, 'text': 'and what flex is gonna do is, by default, it throws it into a row.', 'start': 1933.505, 'duration': 4.262}, {'end': 1940.468, 'text': "so now you'll see everything's gone into a row.", 'start': 1937.767, 'duration': 2.701}, {'end': 1943.219, 'text': 'right and But the text is out of line.', 'start': 1940.468, 'duration': 2.751}, {'end': 1944.58, 'text': 'So we want everything to be centered.', 'start': 1943.239, 'duration': 1.341}], 'summary': 'Added class to container, used display flex to center elements in a row.', 'duration': 21.259, 'max_score': 1923.321, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM1923321.jpg'}, {'end': 2161.097, 'src': 'embed', 'start': 2132.955, 'weight': 8, 'content': [{'end': 2134.976, 'text': 'We want to kind of say you need a max.', 'start': 2132.955, 'duration': 2.021}, {'end': 2137.118, 'text': 'Because right now it keeps going forever.', 'start': 2134.996, 'duration': 2.122}, {'end': 2141.928, 'text': "Yeah, and that doesn't really look good on screens and it starts to become a bad user experience.", 'start': 2138.087, 'duration': 3.841}, {'end': 2145.529, 'text': 'So here we gave the outside container class name of post.', 'start': 2141.948, 'duration': 3.581}, {'end': 2149.29, 'text': 'So what we do here is we go to line one and we say post.', 'start': 2145.689, 'duration': 3.601}, {'end': 2154.652, 'text': "And what we're going to do is we're just going to say give it a max width of 500.", 'start': 2149.85, 'duration': 4.802}, {'end': 2157.573, 'text': "Let's just give it a little test of 500 pixels and see how that does.", 'start': 2154.652, 'duration': 2.921}, {'end': 2161.097, 'text': 'So now you can see it maxes out.', 'start': 2158.993, 'duration': 2.104}], 'summary': 'Applying a max width of 500 pixels to the post container improved the user experience.', 'duration': 28.142, 'max_score': 2132.955, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM2132955.jpg'}, {'end': 2226.146, 'src': 'embed', 'start': 2198.515, 'weight': 9, 'content': [{'end': 2204.076, 'text': "And the difference really is that it's because you're using Sunny is using we're using JSX.", 'start': 2198.515, 'duration': 5.561}, {'end': 2207.597, 'text': "And so with React, you're going to use class name.", 'start': 2204.816, 'duration': 2.781}, {'end': 2212.178, 'text': 'And if you were just using regular HTML, CSS, JavaScript, then you would use class.', 'start': 2207.797, 'duration': 4.381}, {'end': 2219.18, 'text': 'Yeah Just to add to that as well in React, class is actually reserved for class components.', 'start': 2213.218, 'duration': 5.962}, {'end': 2226.146, 'text': "So that's why it's a way to not get confused between your classes and your actual class components.", 'start': 2219.841, 'duration': 6.305}], 'summary': 'In react, class is reserved for class components, while class name is used with jsx.', 'duration': 27.631, 'max_score': 2198.515, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM2198515.jpg'}, {'end': 2284.531, 'src': 'embed', 'start': 2258.596, 'weight': 10, 'content': [{'end': 2264.098, 'text': 'Okay Okay, so now the next step is we kind of need the borders, right? We need everything to have its correct borders.', 'start': 2258.596, 'duration': 5.502}, {'end': 2269.119, 'text': "So what we're going to do now is, firstly, the entire post should have a border.", 'start': 2264.358, 'duration': 4.761}, {'end': 2272.579, 'text': "So we're going to go here and we're going to say it should have a border.", 'start': 2269.199, 'duration': 3.38}, {'end': 2274.94, 'text': "That's going to be one pixel solid light gray.", 'start': 2272.94, 'duration': 2}, {'end': 2278.366, 'text': 'And it would automatically now get that.', 'start': 2276.204, 'duration': 2.162}, {'end': 2279.687, 'text': 'Ooh, nice.', 'start': 2278.466, 'duration': 1.221}, {'end': 2284.531, 'text': 'So you see it starting to really form quite quickly, right? Yeah, very quickly.', 'start': 2280.688, 'duration': 3.843}], 'summary': 'Adding borders to the entire post, one pixel solid light gray, forming quickly.', 'duration': 25.935, 'max_score': 2258.596, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM2258596.jpg'}, {'end': 2398.098, 'src': 'embed', 'start': 2361.505, 'weight': 11, 'content': [{'end': 2364.927, 'text': 'So now what we want to do is we want to sort out the spacing right?', 'start': 2361.505, 'duration': 3.422}, {'end': 2368.749, 'text': 'So if you notice on Instagram, they have this nice little spacing gaps between each one.', 'start': 2365.027, 'duration': 3.722}, {'end': 2374.973, 'text': "So what we're going to do to sort of do that is we're going to go ahead and add to the post.", 'start': 2369.65, 'duration': 5.323}, {'end': 2381.937, 'text': "So the actual container itself, we're going to add a margin bottom of 45 pixels.", 'start': 2375.353, 'duration': 6.584}, {'end': 2387.801, 'text': 'And what this is going to do, as soon as I click save, notice on the right, it just added that little bit of space underneath it.', 'start': 2382.438, 'duration': 5.363}, {'end': 2398.098, 'text': "So we're saying give that component 45 pixels worth of space underneath it, right? And then you get that nice little gap underneath everything.", 'start': 2388.536, 'duration': 9.562}], 'summary': 'Adding 45 pixels margin bottom creates spacing gaps on instagram-like posts.', 'duration': 36.593, 'max_score': 2361.505, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM2361505.jpg'}, {'end': 2451.813, 'src': 'embed', 'start': 2424.321, 'weight': 12, 'content': [{'end': 2427.244, 'text': "Okay, so what we're doing now is we have the three posts right?", 'start': 2424.321, 'duration': 2.923}, {'end': 2435.731, 'text': "But obviously I mean it looks good, but in actual reality now we don't want these three posts to be the same every time, right?", 'start': 2427.684, 'duration': 8.047}, {'end': 2437.392, 'text': 'We want them to be customizable, right?', 'start': 2435.911, 'duration': 1.481}, {'end': 2442.108, 'text': 'So now what we need to do is we just need to pass through.', 'start': 2438.166, 'duration': 3.942}, {'end': 2448.011, 'text': 'So the way we differentiate one component from another in React is we use something called props.', 'start': 2442.188, 'duration': 5.823}, {'end': 2451.813, 'text': 'So props are basically like imagine just like a normal HTML element.', 'start': 2448.671, 'duration': 3.142}], 'summary': 'Customizable react components using props for differentiation.', 'duration': 27.492, 'max_score': 2424.321, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM2424321.jpg'}], 'start': 1178.893, 'title': 'Instagram post component design', 'summary': 'Covers designing an instagram post component, including layout, avatar, image, username, and caption, with key points on adding header with avatar and username, including image and caption, and styling for responsiveness.', 'chapters': [{'end': 1286.87, 'start': 1178.893, 'title': 'Creating post component with es7 snippets', 'summary': 'Covers adding a border bottom with a light gray color for a finishing touch, designing a post component called post.js for instagram-like posts using es7 snippets.', 'duration': 107.977, 'highlights': ['The chapter covers adding a border bottom with a light gray color for a finishing touch.', 'The next step is designing a post component called post.js for Instagram-like posts.', 'The speaker demonstrates the use of ES7 Snippets to quickly generate code for the post component.']}, {'end': 1743.571, 'start': 1287.491, 'title': 'Instagram post component design', 'summary': 'Discusses the design of an instagram post component, including the layout of the post, the inclusion of avatar, image, username, and caption, and the styling of the component for responsiveness. key points include adding a header with avatar and username, including image and caption, and styling the post for a responsive design.', 'duration': 456.08, 'highlights': ['Adding a header with avatar and username The chapter discusses the layout of an Instagram post, mentioning the inclusion of a header with an avatar and username.', 'Including image and caption The discussion involves including the image and caption in the post component to mimic an Instagram post.', 'Styling the post for responsiveness The chapter covers the process of styling the post for responsiveness, including setting the width to 100% and using object fit contain for maintaining aspect ratio.']}, {'end': 2174.729, 'start': 1744.391, 'title': 'Implementing avatar with material ui', 'summary': 'Covers implementing avatars using material ui, including npm installation, importing avatars, using flexbox for layout, and adding padding for a cleaner look.', 'duration': 430.338, 'highlights': ['Implementing Material UI and npm installation The chapter discusses the process of installing Material UI using npm, which pulls in the entire Material UI design library for use.', 'Importing and using avatars The transcript explains the import statement for avatars and how to use them, including displaying an alternative image and text for the avatar.', 'Using flexbox for layout and alignment The chapter details the use of flexbox to align elements in a row and center text, improving the layout and visual appearance.', 'Adding padding and setting max width for containers It covers adding padding to containers for a cleaner look and setting a max width to prevent excessive resizing, enhancing the user experience.']}, {'end': 2494.012, 'start': 2175.209, 'title': 'Styling react components', 'summary': 'Discusses the difference between class and class name in react, provides guidance on adding borders and spacing to components, and explains the use of props to customize components in react.', 'duration': 318.803, 'highlights': ['The chapter discusses the difference between class and class name in React, providing clarity on the usage of class name in JSX and the reservation of class for class components. The difference between class and class name in React is clarified, emphasizing the usage of class name in JSX and the reservation of class for class components.', "Guidance is provided on adding borders to components, including setting the post's border to one pixel solid light gray and adding top and bottom borders to the image. Detailed guidance is given on adding borders to components, including setting the post's border to one pixel solid light gray and adding top and bottom borders to the image.", 'Instructions for adding spacing to components are explained, demonstrating the addition of a margin bottom of 45 pixels to the post container to create a gap between components. The process of adding spacing to components is explained, demonstrating the addition of a margin bottom of 45 pixels to the post container to create a gap between components.', 'The use of props to customize components in React is discussed, highlighting the example of passing the image URL as a prop to differentiate components. The use of props to customize components in React is discussed, emphasizing the example of passing the image URL as a prop to differentiate components.']}], 'duration': 1315.119, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM1178893.jpg', 'highlights': ['The chapter covers adding a border bottom with a light gray color for a finishing touch.', 'The speaker demonstrates the use of ES7 Snippets to quickly generate code for the post component.', 'The chapter discusses the layout of an Instagram post, mentioning the inclusion of a header with an avatar and username.', 'The discussion involves including the image and caption in the post component to mimic an Instagram post.', 'The chapter covers the process of styling the post for responsiveness, including setting the width to 100% and using object fit contain for maintaining aspect ratio.', 'The chapter discusses the process of installing Material UI using npm, which pulls in the entire Material UI design library for use.', 'The transcript explains the import statement for avatars and how to use them, including displaying an alternative image and text for the avatar.', 'The chapter details the use of flexbox to align elements in a row and center text, improving the layout and visual appearance.', 'It covers adding padding to containers for a cleaner look and setting a max width to prevent excessive resizing, enhancing the user experience.', 'The difference between class and class name in React is clarified, emphasizing the usage of class name in JSX and the reservation of class for class components.', "Detailed guidance is given on adding borders to components, including setting the post's border to one pixel solid light gray and adding top and bottom borders to the image.", 'The process of adding spacing to components is explained, demonstrating the addition of a margin bottom of 45 pixels to the post container to create a gap between components.', 'The use of props to customize components in React is discussed, emphasizing the example of passing the image URL as a prop to differentiate components.']}, {'end': 4088.913, 'segs': [{'end': 2618.755, 'src': 'embed', 'start': 2588.052, 'weight': 2, 'content': [{'end': 2589.754, 'text': 'And this is why Instagram is using React.', 'start': 2588.052, 'duration': 1.702}, {'end': 2597.08, 'text': "So for me, it's really the speed and also how easily and quickly I can put most things together.", 'start': 2589.794, 'duration': 7.286}, {'end': 2599.441, 'text': 'But I mean, yes, Sunny, give us your insight too.', 'start': 2597.14, 'duration': 2.301}, {'end': 2600.843, 'text': "That's literally perfect, honestly.", 'start': 2599.461, 'duration': 1.382}, {'end': 2603.164, 'text': "Because that's honestly the benefits I see.", 'start': 2600.863, 'duration': 2.301}, {'end': 2609.469, 'text': "And the reason why it's called React, guys, is because it's literally only reacting to the changes it needs to react to.", 'start': 2603.184, 'duration': 6.285}, {'end': 2611.231, 'text': 'Oh, damn.', 'start': 2609.85, 'duration': 1.381}, {'end': 2613.533, 'text': 'Yeah I did not know that.', 'start': 2611.311, 'duration': 2.222}, {'end': 2618.755, 'text': "Yeah, because it's only going to react to the bits that it needs to, which is why it's super efficient and really fast.", 'start': 2614.253, 'duration': 4.502}], 'summary': 'Instagram uses react for speed and efficiency in development.', 'duration': 30.703, 'max_score': 2588.052, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM2588052.jpg'}, {'end': 3307.793, 'src': 'embed', 'start': 3277.211, 'weight': 4, 'content': [{'end': 3284.897, 'text': "Osama asks, try not to sound stupid, but is Firebase better than using Node.js backend? Yes, that's a really good question, actually.", 'start': 3277.211, 'duration': 7.686}, {'end': 3287.478, 'text': 'So a lot of people do get confused about this bit.', 'start': 3284.997, 'duration': 2.481}, {'end': 3293.403, 'text': 'So Firebase, what they try to do is they try and actually get rid of all the complexity of a traditional backend.', 'start': 3287.559, 'duration': 5.844}, {'end': 3295.184, 'text': "So you don't have to make the API requests.", 'start': 3293.423, 'duration': 1.761}, {'end': 3298.386, 'text': "And you're going to see when we actually start implementing the database next.", 'start': 3295.504, 'duration': 2.882}, {'end': 3307.793, 'text': "If you do need a backend, so Node.js is basically, for those of you who don't know, it's server-side JavaScript.", 'start': 3300.169, 'duration': 7.624}], 'summary': 'Firebase simplifies backend, no api requests. node.js is server-side javascript.', 'duration': 30.582, 'max_score': 3277.211, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM3277211.jpg'}, {'end': 3378.88, 'src': 'embed', 'start': 3335.802, 'weight': 0, 'content': [{'end': 3338.603, 'text': 'And Cloud Functions can be written in Node.js.', 'start': 3335.802, 'duration': 2.801}, {'end': 3342.305, 'text': "So to answer your question, it's not really a case of which one's better.", 'start': 3339.064, 'duration': 3.241}, {'end': 3352.068, 'text': "It's more of a case of Firebase allows you to have Node.js Cloud Functions which can scale up or down depending on how many people are using them at one time.", 'start': 3342.765, 'duration': 9.303}, {'end': 3353.409, 'text': "So it's really, really powerful.", 'start': 3352.108, 'duration': 1.301}, {'end': 3356.581, 'text': 'Yeah Okay, awesome.', 'start': 3353.929, 'duration': 2.652}, {'end': 3364.068, 'text': "And I think also, did we mention that Firebase gives you a real time database? Yes, that's a really good point.", 'start': 3357.002, 'duration': 7.066}, {'end': 3367.491, 'text': 'So Firebase has something called the Firestore database.', 'start': 3364.268, 'duration': 3.223}, {'end': 3369.552, 'text': 'And that is a real time database, guys.', 'start': 3367.651, 'duration': 1.901}, {'end': 3377.799, 'text': 'So traditionally, if you have a database in any app, you kind of have to constantly sort of fetch every five seconds or 10 seconds.', 'start': 3369.592, 'duration': 8.207}, {'end': 3378.88, 'text': "And that's quite intense.", 'start': 3377.839, 'duration': 1.041}], 'summary': 'Firebase allows node.js cloud functions to scale up or down based on usage. it also provides a real-time firestore database.', 'duration': 43.078, 'max_score': 3335.802, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM3335802.jpg'}, {'end': 3738.254, 'src': 'heatmap', 'start': 3335.802, 'weight': 0.82, 'content': [{'end': 3338.603, 'text': 'And Cloud Functions can be written in Node.js.', 'start': 3335.802, 'duration': 2.801}, {'end': 3342.305, 'text': "So to answer your question, it's not really a case of which one's better.", 'start': 3339.064, 'duration': 3.241}, {'end': 3352.068, 'text': "It's more of a case of Firebase allows you to have Node.js Cloud Functions which can scale up or down depending on how many people are using them at one time.", 'start': 3342.765, 'duration': 9.303}, {'end': 3353.409, 'text': "So it's really, really powerful.", 'start': 3352.108, 'duration': 1.301}, {'end': 3356.581, 'text': 'Yeah Okay, awesome.', 'start': 3353.929, 'duration': 2.652}, {'end': 3364.068, 'text': "And I think also, did we mention that Firebase gives you a real time database? Yes, that's a really good point.", 'start': 3357.002, 'duration': 7.066}, {'end': 3367.491, 'text': 'So Firebase has something called the Firestore database.', 'start': 3364.268, 'duration': 3.223}, {'end': 3369.552, 'text': 'And that is a real time database, guys.', 'start': 3367.651, 'duration': 1.901}, {'end': 3377.799, 'text': 'So traditionally, if you have a database in any app, you kind of have to constantly sort of fetch every five seconds or 10 seconds.', 'start': 3369.592, 'duration': 8.207}, {'end': 3378.88, 'text': "And that's quite intense.", 'start': 3377.839, 'duration': 1.041}, {'end': 3383.264, 'text': "And you don't really get like a real time though, it just feels like this janky experience.", 'start': 3379.601, 'duration': 3.663}, {'end': 3386.065, 'text': 'Whereas in Firebase, they do all of the stuff.', 'start': 3383.663, 'duration': 2.402}, {'end': 3391.571, 'text': 'So some of you may have used something called socket.io, which is basically like sets up like these real-time listeners.', 'start': 3386.105, 'duration': 5.466}, {'end': 3393.673, 'text': "But in Firebase, you don't even have to do that.", 'start': 3392.071, 'duration': 1.602}, {'end': 3396.035, 'text': 'They do everything for you behind the scenes.', 'start': 3393.713, 'duration': 2.322}, {'end': 3398.878, 'text': "All you have to do is like literally, I think it's like three lines of code.", 'start': 3396.435, 'duration': 2.443}, {'end': 3399.999, 'text': "And we're going to show you that soon.", 'start': 3398.898, 'duration': 1.101}, {'end': 3403.102, 'text': 'And it pretty much sets up this real-time sync.', 'start': 3401, 'duration': 2.102}, {'end': 3409.462, 'text': 'So that way, if somebody adds some information into the database, it immediately comes through.', 'start': 3403.9, 'duration': 5.562}, {'end': 3415.424, 'text': 'The way we combine that with React is really, really beautiful, and it gives you a really elegant solution to all of that headache.', 'start': 3409.682, 'duration': 5.742}, {'end': 3417.705, 'text': 'So you never have to worry about that real-time sync anymore.', 'start': 3415.604, 'duration': 2.101}, {'end': 3424.506, 'text': 'okay, awesome, nice.', 'start': 3422.324, 'duration': 2.182}, {'end': 3428.551, 'text': "so now what we're going to do is we're actually going to get rid of those two hard-coded uh.", 'start': 3424.506, 'duration': 4.045}, {'end': 3431.754, 'text': 'posts. and now what this line of code is doing is just mapping through.', 'start': 3428.551, 'duration': 3.203}, {'end': 3436.979, 'text': "so it's going through every single post and it's just outputting a post component every time it sees some information.", 'start': 3431.754, 'duration': 5.225}, {'end': 3441.224, 'text': "so if we save this now, we should see we're going to have two posts which are the same.", 'start': 3436.979, 'duration': 4.245}, {'end': 3444.267, 'text': 'because, remember, i just copied and pasted the information, which is perfect.', 'start': 3441.224, 'duration': 3.043}, {'end': 3446.509, 'text': "yeah, this will work, right, let's get that.", 'start': 3444.267, 'duration': 2.242}, {'end': 3447.53, 'text': 'so go ahead.', 'start': 3446.509, 'duration': 1.021}, {'end': 3449.131, 'text': 'yeah, which is nice.', 'start': 3447.53, 'duration': 1.601}, {'end': 3452.795, 'text': 'so the next step, naturally, i think we should maybe implement.', 'start': 3449.131, 'duration': 3.664}, {'end': 3454.636, 'text': 'um, the firebase database.', 'start': 3452.795, 'duration': 1.841}, {'end': 3455.637, 'text': 'yep at this.', 'start': 3454.636, 'duration': 1.001}, {'end': 3464.465, 'text': "yeah, so let's go ahead and go over to firebase database.", 'start': 3455.637, 'duration': 8.828}, {'end': 3465.946, 'text': 'yep. so database.', 'start': 3464.465, 'duration': 1.481}, {'end': 3469.809, 'text': 'and i want you to click on create database.', 'start': 3465.946, 'duration': 3.863}, {'end': 3471.591, 'text': 'okay, here we go.', 'start': 3469.809, 'duration': 1.782}, {'end': 3472.732, 'text': 'perfect, start in test mode.', 'start': 3471.591, 'duration': 1.141}, {'end': 3476.434, 'text': 'Oh, I keep forgetting to actually take the comment off the screen.', 'start': 3473.132, 'duration': 3.302}, {'end': 3479.015, 'text': 'All right.', 'start': 3478.634, 'duration': 0.381}, {'end': 3480.775, 'text': "So let's click test mode.", 'start': 3479.315, 'duration': 1.46}, {'end': 3482.816, 'text': 'Yep, test mode.', 'start': 3481.936, 'duration': 0.88}, {'end': 3484.497, 'text': 'And then click on next.', 'start': 3482.916, 'duration': 1.581}, {'end': 3489.579, 'text': 'Sam Koresh always has to tell me, remove that comment.', 'start': 3485.958, 'duration': 3.621}, {'end': 3492.961, 'text': 'And then next, nice.', 'start': 3490.6, 'duration': 2.361}, {'end': 3494.061, 'text': 'I mean, this is pretty cool.', 'start': 3493.001, 'duration': 1.06}, {'end': 3500.884, 'text': 'Like we have labs here who says that they are using mostly Apache Cassandra for the databases.', 'start': 3494.101, 'duration': 6.783}, {'end': 3502.085, 'text': 'So like, seems like.', 'start': 3501.104, 'duration': 0.981}, {'end': 3503.945, 'text': 'Then no, a thing or two.', 'start': 3502.885, 'duration': 1.06}, {'end': 3511.868, 'text': 'And then Mario, you asked, is the writing on screen also a function of VS code live? No, I use an app for annotation called Screen Brush.', 'start': 3503.985, 'duration': 7.883}, {'end': 3515.569, 'text': 'It allows you to annotate on your own screen.', 'start': 3512.428, 'duration': 3.141}, {'end': 3522.611, 'text': "Yeah It's actually really handy, even when we're sort of pair programming and I can't see what Ozzy's talking about.", 'start': 3516.829, 'duration': 5.782}, {'end': 3526.191, 'text': "Because I can just, I'm just like, bro, look right over here, man.", 'start': 3522.631, 'duration': 3.56}, {'end': 3527.512, 'text': 'Yeah Yeah.', 'start': 3526.212, 'duration': 1.3}, {'end': 3532.608, 'text': "OK, so now we've got the database set up.", 'start': 3530.006, 'duration': 2.602}, {'end': 3538.894, 'text': 'So now basically all you need to know at this point is many people may have used SQL database.', 'start': 3532.688, 'duration': 6.206}, {'end': 3540.916, 'text': 'Many people may have used no SQL databases.', 'start': 3538.974, 'duration': 1.942}, {'end': 3542.477, 'text': 'This is like a hybrid.', 'start': 3541.216, 'duration': 1.261}, {'end': 3546.701, 'text': 'Right So Firebase, they realized that there was these problems of SQL databases.', 'start': 3542.697, 'duration': 4.004}, {'end': 3548.322, 'text': 'They realized that there was a lack of.', 'start': 3546.721, 'duration': 1.601}, {'end': 3550.555, 'text': 'functionality in NoSQL databases.', 'start': 3548.854, 'duration': 1.701}, {'end': 3555.579, 'text': 'So they basically found a middle ground and they have this collection document collection structure.', 'start': 3550.575, 'duration': 5.004}, {'end': 3561.905, 'text': "And what we're going to do here is you pretty much have a collection of posts.", 'start': 3556.14, 'duration': 5.765}, {'end': 3564.807, 'text': "So right now we have some posts, so we're going to create a collection for that.", 'start': 3562.045, 'duration': 2.762}, {'end': 3569.591, 'text': 'And you have imagine, every single post is something called a document, right?', 'start': 3565.287, 'duration': 4.304}, {'end': 3578.358, 'text': 'So you have one collection called posts and then you have multiple documents inside of it which are each going to resemble a post on our Instagram clone,', 'start': 3569.651, 'duration': 8.707}, {'end': 3584.468, 'text': "right?. So, just as cause he's done here, he's actually created the collection and then you've got the document ID which is automatically generated.", 'start': 3578.358, 'duration': 6.11}, {'end': 3586.049, 'text': "And then you've got the three fields.", 'start': 3584.868, 'duration': 1.181}, {'end': 3588.511, 'text': "So you've got caption, username and image URL.", 'start': 3586.069, 'duration': 2.442}, {'end': 3589.211, 'text': 'So perfect.', 'start': 3588.631, 'duration': 0.58}, {'end': 3593.114, 'text': "So if you want to go ahead and add a caption, so let's go ahead and add a test caption.", 'start': 3589.692, 'duration': 3.422}, {'end': 3605.886, 'text': 'So, and then if you want to go ahead and write a username, There you go.', 'start': 3593.134, 'duration': 12.752}, {'end': 3606.927, 'text': 'And then image URL.', 'start': 3605.946, 'duration': 0.981}, {'end': 3609.049, 'text': "Let's just find an image URL.", 'start': 3607.668, 'duration': 1.381}, {'end': 3610.951, 'text': 'Or you can grab the one from the code maybe.', 'start': 3609.149, 'duration': 1.802}, {'end': 3614.974, 'text': 'Yep, so you can grab that one.', 'start': 3610.971, 'duration': 4.003}, {'end': 3618.757, 'text': 'Nice There we go.', 'start': 3616.515, 'duration': 2.242}, {'end': 3621.8, 'text': 'And as soon as you click save, that should be done.', 'start': 3619.678, 'duration': 2.122}, {'end': 3627.869, 'text': "Awesome. So now you can see we've added one post right?", 'start': 3621.82, 'duration': 6.049}, {'end': 3634.652, 'text': 'So the next, I guess the next step, what we need to do is go ahead and get our config files so that we can tell.', 'start': 3628.489, 'duration': 6.163}, {'end': 3638.233, 'text': 'So now we need to connect our React app to our Firebase database.', 'start': 3635.052, 'duration': 3.181}, {'end': 3641.715, 'text': "So let's go over to that little cog icon on the left.", 'start': 3638.673, 'duration': 3.042}, {'end': 3645.096, 'text': "Yep, so let's go ahead and click that side menu.", 'start': 3642.615, 'duration': 2.481}, {'end': 3648.217, 'text': 'Yep, project settings, scroll the way to the bottom.', 'start': 3645.576, 'duration': 2.641}, {'end': 3654.53, 'text': 'And if you click on config, This is the magic piece that we need.', 'start': 3649.077, 'duration': 5.453}, {'end': 3660.296, 'text': "So what we're going to do in our code is we're going to create a file called firebase.js.", 'start': 3654.57, 'duration': 5.726}, {'end': 3667.611, 'text': "So inside we're gonna create a little bit of a config file.", 'start': 3665.27, 'duration': 2.341}, {'end': 3672.252, 'text': 'And this is basically gonna be responsible now for all of our config settings, right?', 'start': 3667.631, 'duration': 4.621}, {'end': 3678.294, 'text': "So if we go here and I'm just gonna do so, let me open up Firebase.js.", 'start': 3673.093, 'duration': 5.201}, {'end': 3680.135, 'text': 'So Firebase.js, there we go.', 'start': 3679.075, 'duration': 1.06}, {'end': 3683.776, 'text': "And you've copied it in there, right? Oh, you've done it already, nice, okay.", 'start': 3680.775, 'duration': 3.001}, {'end': 3689.738, 'text': 'So this is the API key that you just got before, right? Oh, no, okay.', 'start': 3684.536, 'duration': 5.202}, {'end': 3691.539, 'text': 'Yeah, I just got it right now.', 'start': 3690.078, 'duration': 1.461}, {'end': 3696.103, 'text': "Yeah So now what we're going to do is this is the snippet of code that I always referred to.", 'start': 3692.301, 'duration': 3.802}, {'end': 3697.304, 'text': 'So you guys can just copy this.', 'start': 3696.143, 'duration': 1.161}, {'end': 3703.327, 'text': "And what we're going to do is we're just going to grab the contents of the config, just cut it out.", 'start': 3698.284, 'duration': 5.043}, {'end': 3707.369, 'text': "And all we're going to do, guys, is just pop it inside of here.", 'start': 3704.707, 'duration': 2.662}, {'end': 3712.391, 'text': 'So what this is doing here is basically is initializing the app.', 'start': 3707.409, 'duration': 4.982}, {'end': 3713.872, 'text': "So we've installed Firebase.", 'start': 3712.431, 'duration': 1.441}, {'end': 3715.233, 'text': "I don't know if we've actually done that yet.", 'start': 3713.912, 'duration': 1.321}, {'end': 3717.034, 'text': 'We need to inside the terminal.', 'start': 3715.253, 'duration': 1.781}, {'end': 3719.455, 'text': 'We need to do an MPMI Firebase.', 'start': 3717.154, 'duration': 2.301}, {'end': 3725.651, 'text': "So that's actually going to install Firebase into our, um, into our project because we need to use the modules.", 'start': 3720.97, 'duration': 4.681}, {'end': 3731.433, 'text': "And just a little note, something I learned recently is you don't need to do this dash dash save anymore with NPM.", 'start': 3725.951, 'duration': 5.482}, {'end': 3733.073, 'text': 'So you can actually just do NPM.', 'start': 3731.453, 'duration': 1.62}, {'end': 3734.793, 'text': 'I Firebase just a side note.', 'start': 3733.353, 'duration': 1.44}, {'end': 3736.854, 'text': "That's actually really handy.", 'start': 3735.814, 'duration': 1.04}, {'end': 3738.254, 'text': "I didn't know that until you told me that.", 'start': 3736.894, 'duration': 1.36}], 'summary': 'Firebase allows node.js cloud functions and real-time firestore database, providing a powerful and elegant solution.', 'duration': 402.452, 'max_score': 3335.802, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM3335802.jpg'}, {'end': 3823.557, 'src': 'embed', 'start': 3798.982, 'weight': 1, 'content': [{'end': 3804.447, 'text': "then I'd recommend following a different tutorial and just doing it from scratch and sort of implementing it this way.", 'start': 3798.982, 'duration': 5.465}, {'end': 3809.631, 'text': 'Yeah, because Angular is like a framework and React is just a library.', 'start': 3804.607, 'duration': 5.024}, {'end': 3811.273, 'text': 'So React is much more lightweight.', 'start': 3809.651, 'duration': 1.622}, {'end': 3814.595, 'text': 'So with Angular, Even Sunny and I were talking about this yesterday.', 'start': 3811.293, 'duration': 3.302}, {'end': 3816.495, 'text': "You're gonna have a full like.", 'start': 3814.615, 'duration': 1.88}, {'end': 3823.557, 'text': 'you have to follow their structure for how you store your files and your directories and literally, you have to work within that framework.', 'start': 3816.495, 'duration': 7.062}], 'summary': 'Comparing angular and react, react is lighter and more flexible.', 'duration': 24.575, 'max_score': 3798.982, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM3798982.jpg'}, {'end': 3882.382, 'src': 'embed', 'start': 3854.343, 'weight': 5, 'content': [{'end': 3860.327, 'text': "it's weird to me because anytime you're doing model view controller like, you have to do those things.", 'start': 3854.343, 'duration': 5.984}, {'end': 3867.852, 'text': "yeah, you would have to do everything by the book, whereas with react it's very much a case of like you just write what you need and the rest is done.", 'start': 3860.327, 'duration': 7.525}, {'end': 3870.714, 'text': 'and firebase is such a good complementary feature.', 'start': 3867.852, 'duration': 2.862}, {'end': 3873.456, 'text': "uh, sort of suite of tools to use with it, because they're the same thing.", 'start': 3870.714, 'duration': 2.742}, {'end': 3875.177, 'text': 'they just get rid of all the complexity.', 'start': 3873.456, 'duration': 1.721}, {'end': 3877.499, 'text': 'so combining the two is a no-brainer.', 'start': 3875.177, 'duration': 2.322}, {'end': 3882.382, 'text': "but there's just not that many tutorials on it, which is why this would actually be really useful to a lot of people.", 'start': 3877.499, 'duration': 4.883}], 'summary': 'Using react and firebase simplifies development and reduces complexity, making it a no-brainer, but lack of tutorials hinders adoption.', 'duration': 28.039, 'max_score': 3854.343, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM3854343.jpg'}], 'start': 2498.693, 'title': 'React, firebase, and angular', 'summary': "Covers customizing components in react, the comparison between firebase and node.js, and the differences between react and angular, showcasing faster loading and limited code in instagram's clone, firebase's real-time database and scalability capabilities, and the lighter weight and popularity of react with added security measures.", 'chapters': [{'end': 2724.769, 'start': 2498.693, 'title': 'React benefits and usage', 'summary': "Discusses customizing components in react, highlighting the efficiency and speed benefits of using react in instagram's clone, with examples of faster loading and limited code, and explaining the concept behind the name 'react'.", 'duration': 226.076, 'highlights': ["The efficiency and speed benefits of using React in Instagram's clone, with examples of faster loading and limited code", "Explaining the concept behind the name 'React'", 'Customizing components in React']}, {'end': 3276.171, 'start': 2725.81, 'title': 'React state and component rendering', 'summary': 'Demonstrates the process of rendering react components using state and mapping through an array of posts, showcasing the use of props and state in react, and includes a brief explanation of hooks and the map function.', 'duration': 550.361, 'highlights': ['The process of rendering React components using state and mapping through an array of posts is demonstrated. The demonstration includes the use of props and state in React, showcasing how username, caption, and image URL are utilized within the components.', 'An explanation of hooks and the map function is provided. The chapter briefly explains the concept of hooks in React, highlighting their functionality and usage, and details the utilization of the map function to loop through the array of posts.', 'The importance of avoiding direct manipulation in React and the significance of setting up state with an initial value are emphasized. The significance of adhering to React rules and avoiding direct manipulation in state management is highlighted, along with the necessity of providing an initial value for state when the app loads.']}, {'end': 3755.7, 'start': 3277.211, 'title': 'Firebase vs node.js: a comparison', 'summary': "Discusses the comparison between firebase and node.js backend, highlighting firebase's real-time database, automatic real-time synchronization, and its capability to handle scalability through cloud functions written in node.js.", 'duration': 478.489, 'highlights': ['Firebase offers a real time Firestore database, eliminating the need for constant fetching and providing a seamless real-time synchronization, enhancing user experience.', "Firebase's Cloud Functions, written in Node.js, enable scalability based on user activity, ensuring efficient performance based on demand.", 'Firebase simplifies backend complexity by eliminating the need for API requests, contrasting with Node.js, which operates as server-side JavaScript for traditional backends.']}, {'end': 4088.913, 'start': 3755.86, 'title': 'React vs angular: choosing the right framework', 'summary': 'Discusses the differences between react and angular for web development, with a focus on the lighter weight and popularity of react, firebase as a complementary feature, and the security measures for using db credentials on the front end.', 'duration': 333.053, 'highlights': ['The differences between React and Angular for web development are discussed, emphasizing the lighter weight and popularity of React over Angular. React is highlighted as a lighter weight option compared to Angular, making it more suitable for beginners. Additionally, React is noted to be much more popular at the moment.', 'The benefits of using Firebase as a complementary feature for web development are explained. Firebase is emphasized as a suite of tools that simplifies complexity in combination with React, making it a recommended choice for web development.', 'Security measures for using DB credentials on the front end are discussed, including setting up security rules correctly in Firebase. The importance of setting up security rules correctly in Firebase to protect DB credentials on the front end is emphasized, ensuring that requests outside of the website domain are blocked.']}], 'duration': 1590.22, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM2498693.jpg', 'highlights': ["Firebase's real-time Firestore database eliminates constant fetching, enhancing user experience", 'React is highlighted as a lighter weight option compared to Angular, making it more suitable for beginners', "The efficiency and speed benefits of using React in Instagram's clone, with examples of faster loading and limited code", "Firebase's Cloud Functions, written in Node.js, enable scalability based on user activity", 'Firebase simplifies backend complexity by eliminating the need for API requests, contrasting with Node.js', 'The benefits of using Firebase as a complementary feature for web development are explained']}, {'end': 5922.983, 'segs': [{'end': 4133.337, 'src': 'embed', 'start': 4103.841, 'weight': 1, 'content': [{'end': 4111.267, 'text': "and then all we need to do here is this is some simple setup and this is grabbing three services from firebase and it's storing them into three variables.", 'start': 4103.841, 'duration': 7.426}, {'end': 4113.788, 'text': 'so one is to access the db we do this.', 'start': 4111.267, 'duration': 2.521}, {'end': 4116.59, 'text': 'The other one is to access the authentication.', 'start': 4114.389, 'duration': 2.201}, {'end': 4118.691, 'text': "So we'll explain more about this afterwards.", 'start': 4116.71, 'duration': 1.981}, {'end': 4122.493, 'text': 'But this is so that we can actually log in, log out, create users, et cetera.', 'start': 4118.731, 'duration': 3.762}, {'end': 4124.193, 'text': 'And the final one is storage.', 'start': 4122.853, 'duration': 1.34}, {'end': 4133.337, 'text': "And that's going to be how we can actually upload a bunch of pictures and stuff like that to Firebase and then store in our DB.", 'start': 4124.252, 'duration': 9.085}], 'summary': 'Setting up firebase services to access db, authentication, and storage for login, user creation, and file uploads.', 'duration': 29.496, 'max_score': 4103.841, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM4103841.jpg'}, {'end': 4411.84, 'src': 'embed', 'start': 4384.097, 'weight': 0, 'content': [{'end': 4390.582, 'text': "And then what we're going to do now is we're going to say we basically need to say on snapshot.", 'start': 4384.097, 'duration': 6.485}, {'end': 4395.707, 'text': 'So on snapshot is basically this really, really powerful listener.', 'start': 4390.643, 'duration': 5.064}, {'end': 4397.328, 'text': "That's how we need to think of it.", 'start': 4396.147, 'duration': 1.181}, {'end': 4399.13, 'text': "It's a very, very powerful listener.", 'start': 4397.388, 'duration': 1.742}, {'end': 4405.755, 'text': "And what it's going to do is basically every single time the database changes in that collection.", 'start': 4399.71, 'duration': 6.045}, {'end': 4411.84, 'text': 'So every single time a document gets added, changed, modified inside a post, imagine a camera.', 'start': 4405.775, 'duration': 6.065}], 'summary': "Using 'on snapshot' as a powerful listener for database changes.", 'duration': 27.743, 'max_score': 4384.097, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM4384097.jpg'}, {'end': 4489.521, 'src': 'embed', 'start': 4465.67, 'weight': 3, 'content': [{'end': 4472.073, 'text': "So this is where we'll assign you homeworks, feedback, review, and you can see all the students are extremely active.", 'start': 4465.67, 'duration': 6.403}, {'end': 4475.154, 'text': 'We have over 1, 200 students in here.', 'start': 4472.133, 'duration': 3.021}, {'end': 4477.935, 'text': 'Everybody is super freaking awesome and just cool.', 'start': 4475.454, 'duration': 2.481}, {'end': 4483.578, 'text': 'So if you want to be a part of this, then definitely join Profit with JavaScript.', 'start': 4477.995, 'duration': 5.583}, {'end': 4489.521, 'text': 'And then we have a very curated set of community of just people who are amazing and are willing to learn just like you.', 'start': 4483.598, 'duration': 5.923}], 'summary': 'Over 1,200 active students in profit with javascript community, fostering a curated set of amazing, learning-oriented individuals.', 'duration': 23.851, 'max_score': 4465.67, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM4465670.jpg'}, {'end': 4723.143, 'src': 'embed', 'start': 4693.868, 'weight': 2, 'content': [{'end': 4696.989, 'text': 'So we just set up a real-time listener, guys, right?', 'start': 4693.868, 'duration': 3.121}, {'end': 4700.55, 'text': 'So what that means is that every single time remember,', 'start': 4697.429, 'duration': 3.121}, {'end': 4705.952, 'text': "I said every single time something gets pushed into that collection it's going to refire that piece of code that we wrote,", 'start': 4700.55, 'duration': 5.402}, {'end': 4709.513, 'text': 'which is going to update the posts, and then it re-renders everything on the page.', 'start': 4705.952, 'duration': 3.561}, {'end': 4714.455, 'text': "So that means that once Qazi adds all of this stuff, what's going to happen is actually.", 'start': 4709.933, 'duration': 4.522}, {'end': 4719.759, 'text': "It's going to refire that code and then in real time, re-render it on the screen.", 'start': 4715.555, 'duration': 4.204}, {'end': 4723.143, 'text': "So it's actually going to be a really, really quick implementation.", 'start': 4720.28, 'duration': 2.863}], 'summary': 'Real-time listener updates posts, re-renders page quickly.', 'duration': 29.275, 'max_score': 4693.868, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM4693868.jpg'}, {'end': 5739.533, 'src': 'heatmap', 'start': 5604.648, 'weight': 0.801, 'content': [{'end': 5609.531, 'text': "Get modal style is, where is that one? It's here.", 'start': 5604.648, 'duration': 4.883}, {'end': 5611.493, 'text': "Let's go ahead and add that.", 'start': 5610.272, 'duration': 1.221}, {'end': 5612.914, 'text': "It's const modal style.", 'start': 5611.713, 'duration': 1.201}, {'end': 5619.678, 'text': "Guys, I'm just getting this from the example code that we saw on the website.", 'start': 5612.934, 'duration': 6.744}, {'end': 5620.059, 'text': 'There we go.', 'start': 5619.718, 'duration': 0.341}, {'end': 5624.502, 'text': 'Now, all we need is a button to actually open our modal.', 'start': 5620.599, 'duration': 3.903}, {'end': 5628.265, 'text': 'Naturally, that button is going to be something like login or register.', 'start': 5624.782, 'duration': 3.483}, {'end': 5631.965, 'text': "So let's go ahead and add a button here.", 'start': 5629.483, 'duration': 2.482}, {'end': 5633.386, 'text': "So let's just add it over here for now.", 'start': 5632.025, 'duration': 1.361}, {'end': 5635.188, 'text': "Let's actually use a Material UI button.", 'start': 5633.547, 'duration': 1.641}, {'end': 5639.331, 'text': "So it's just a capital B, and we need to import that.", 'start': 5635.628, 'duration': 3.703}, {'end': 5642.354, 'text': 'So maybe you can show that little trick, Qazi, and just see if that works.', 'start': 5639.392, 'duration': 2.962}, {'end': 5650.221, 'text': 'So you just go to the end edge of that, and then you press on Control Spacebar, and then you go Auto Import.', 'start': 5644.776, 'duration': 5.445}, {'end': 5652.242, 'text': 'There you go.', 'start': 5650.241, 'duration': 2.001}, {'end': 5653.964, 'text': "I think your mic's gone off, Qazi.", 'start': 5652.443, 'duration': 1.521}, {'end': 5661.802, 'text': 'So yeah, all I did is I just went control space at the end of the button and then hit enter and it auto imported at the top.', 'start': 5655.621, 'duration': 6.181}, {'end': 5663.803, 'text': "Yeah, that's it.", 'start': 5662.863, 'duration': 0.94}, {'end': 5667.844, 'text': "Nice And then all we do here is we just say, let's add this one.", 'start': 5664.223, 'duration': 3.621}, {'end': 5669.884, 'text': "So let's just say it's called login or yeah, login.", 'start': 5667.864, 'duration': 2.02}, {'end': 5670.824, 'text': "Let's just call it login.", 'start': 5670.004, 'duration': 0.82}, {'end': 5675.385, 'text': "Well, let's call this one sign up because we want to sign up first before we can actually log in.", 'start': 5671.084, 'duration': 4.301}, {'end': 5681.847, 'text': 'And here we just say on click and this is going to fire off a sign in or sign up function.', 'start': 5675.885, 'duration': 5.962}, {'end': 5684.087, 'text': "So I'm going to write a little function up here, which is constant.", 'start': 5681.867, 'duration': 2.22}, {'end': 5690.806, 'text': 'uh, sign up, and this one is just going to basically be a simple function.', 'start': 5684.981, 'duration': 5.825}, {'end': 5691.867, 'text': 'it has an event.', 'start': 5690.806, 'duration': 1.061}, {'end': 5697.172, 'text': "every time you sort of have these sort of things, you have an event and i'd highly recommend you do event.prevent default,", 'start': 5691.867, 'duration': 5.305}, {'end': 5698.193, 'text': "but it's because it's not a form.", 'start': 5697.172, 'duration': 1.021}, {'end': 5699.454, 'text': "we don't have to do that.", 'start': 5698.193, 'duration': 1.261}, {'end': 5701.615, 'text': 'so now we connect it.', 'start': 5699.454, 'duration': 2.161}, {'end': 5703.917, 'text': 'so we say sign up.', 'start': 5701.615, 'duration': 2.302}, {'end': 5705.699, 'text': "oh no, sorry, here we're not even going to do that.", 'start': 5703.917, 'duration': 1.782}, {'end': 5709.182, 'text': "we're just going to open the model and we're going to have every all of that logic inside the model.", 'start': 5705.699, 'duration': 3.483}, {'end': 5711.063, 'text': 'so here we just say set open to true.', 'start': 5709.182, 'duration': 1.881}, {'end': 5715.406, 'text': 'So now we should have a button on our page.', 'start': 5711.963, 'duration': 3.443}, {'end': 5718.209, 'text': "So if we go ahead and I've got a little error.", 'start': 5715.827, 'duration': 2.382}, {'end': 5718.97, 'text': 'There we go.', 'start': 5718.529, 'duration': 0.441}, {'end': 5719.61, 'text': 'Got rid of it.', 'start': 5719.15, 'duration': 0.46}, {'end': 5725.776, 'text': 'So now we should have a button on the page once it loads.', 'start': 5721.012, 'duration': 4.764}, {'end': 5728.859, 'text': 'Right there.', 'start': 5728.419, 'duration': 0.44}, {'end': 5729.48, 'text': 'So sign up.', 'start': 5728.879, 'duration': 0.601}, {'end': 5731.501, 'text': 'I can hover over it.', 'start': 5730.761, 'duration': 0.74}, {'end': 5733.666, 'text': 'Ooh, nice.', 'start': 5732.885, 'duration': 0.781}, {'end': 5734.768, 'text': 'Look at that.', 'start': 5733.706, 'duration': 1.062}, {'end': 5736.99, 'text': 'So we get a nice little modal there guys.', 'start': 5735.288, 'duration': 1.702}, {'end': 5739.533, 'text': "And that's actually gonna, it's, it's responsive.", 'start': 5737.05, 'duration': 2.483}], 'summary': 'The transcript discusses adding a modal style and a button using material ui, as well as setting up a sign-up function.', 'duration': 134.885, 'max_score': 5604.648, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM5604648.jpg'}], 'start': 4089.873, 'title': 'Exploring firebase, real-time database, and material ui in react', 'summary': 'Covers firebase initialization, real-time database interaction, javascript community involvement, and user authentication, while also delving into material ui styling and its implementation in a react application, providing a comprehensive understanding of these technologies and their practical applications.', 'chapters': [{'end': 4274.004, 'start': 4089.873, 'title': "Firebase initialization and react's useeffect", 'summary': "Explains how to initialize firebase services in a clean and simple way, and introduces the functionality of react's useeffect for running code based on specific conditions, providing flexibility in handling changes in variables.", 'duration': 184.131, 'highlights': ['Initializing Firebase services in a clean and simple way The chapter demonstrates how to call the initialize app function from Firebase, which provides a clean and simple setup for accessing database, authentication, and storage services, eliminating the need to worry about S3 or Amazon Web Services.', "Introduction to React's useEffect functionality The chapter introduces the powerful functionality of React's useEffect, which allows running a piece of code based on specific conditions, providing flexibility to handle changes in variables and run code once when the component loads."]}, {'end': 4444.513, 'start': 4274.044, 'title': 'Real-time database interaction with firebase', 'summary': 'Discusses the real-time database interaction with firebase, highlighting the use of onsnapshot as a powerful listener to capture changes in the database collection, providing automatic updates every time a document is added, modified, or deleted.', 'duration': 170.469, 'highlights': ['The onSnapshot method acts as a powerful listener, providing automatic updates every time a document is added, modified, or deleted, enhancing real-time interaction with the database.', "The need to import the database variable and access the collection 'posts' using db.collection is emphasized for capturing information from the database.", 'The significance of the bracket notation to run the code once when the page refreshes is explained, providing a clear understanding of its purpose and functionality.', "The use of semicolons and the structure of the collection 'posts' in Firebase are discussed, offering insights into the coding process and database organization."]}, {'end': 4952.177, 'start': 4445.242, 'title': 'Profit with javascript community', 'summary': 'Discusses the profit with javascript slack community, with over 1,200 active students, offering weekly homework, coaching calls, and a supportive environment, as well as the real-time listener implementation and efficient post rendering in the web application.', 'duration': 506.935, 'highlights': ['The Profit with JavaScript Slack community has over 1,200 active students, offering weekly homework, coaching calls, and a supportive environment.', 'The implementation of a real-time listener in the web application results in quick and efficient post rendering on the screen, updating in real-time as new content is added.', 'The use of unique IDs and keys ensures efficient rendering of new posts in the web application, preventing unnecessary refresh of existing posts.', 'The community provides a supportive environment, with quick responses to questions within approximately 10 minutes, contrasting with the less responsive nature of platforms like Stack Overflow.']}, {'end': 5525.866, 'start': 4952.957, 'title': 'Building user authentication with firebase', 'summary': 'Covers the power of alfred for code storage, success stories of students landing jobs, and the process of setting up user authentication with firebase, including the ease of use and future video ideas, such as implementing forgotten password features.', 'duration': 572.909, 'highlights': ["Students' success stories of landing jobs after following tutorials Pranbir cracked an interview in a big MNC after following Django tutorials, showcasing the effectiveness of the tutorials in helping students secure jobs.", 'Power of Alfred for code storage Alfred allows users to store copied code snippets for three months, providing a powerful database for code storage and retrieval.', 'Simplified process of setting up user authentication with Firebase The chapter discusses the simplicity and ease of setting up user authentication with Firebase, highlighting its clean and easy-to-use features, with potential for future video ideas, such as implementing forgotten password features.']}, {'end': 5922.983, 'start': 5525.886, 'title': 'Implementing material ui styling', 'summary': 'Discusses implementing material ui styling with examples of using use styles hook and adding a responsive modal, along with setting up input fields and handling jsx syntax.', 'duration': 397.097, 'highlights': ['Implementing Material UI styling using use styles hook and classes.paper for styling rules. Demonstrates the use of use styles hook and classes.paper for styling rules, providing insights into the Material UI styling implementation.', 'Adding a responsive modal with detection of clicks outside the modal. Highlights the implementation of a responsive modal with the functionality to detect clicks outside the modal, enhancing user experience.', 'Setting up input fields for username, email, and password, and handling JSX syntax. Discusses the process of setting up input fields for username, email, and password, along with handling JSX syntax, providing a comprehensive understanding of handling user input.']}], 'duration': 1833.11, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM4089873.jpg', 'highlights': ['The onSnapshot method acts as a powerful listener, providing automatic updates every time a document is added, modified, or deleted, enhancing real-time interaction with the database.', 'Initializing Firebase services in a clean and simple way The chapter demonstrates how to call the initialize app function from Firebase, which provides a clean and simple setup for accessing database, authentication, and storage services, eliminating the need to worry about S3 or Amazon Web Services.', 'The implementation of a real-time listener in the web application results in quick and efficient post rendering on the screen, updating in real-time as new content is added.', 'The Profit with JavaScript Slack community has over 1,200 active students, offering weekly homework, coaching calls, and a supportive environment.', 'Simplified process of setting up user authentication with Firebase The chapter discusses the simplicity and ease of setting up user authentication with Firebase, highlighting its clean and easy-to-use features, with potential for future video ideas, such as implementing forgotten password features.']}, {'end': 7193.341, 'segs': [{'end': 5951.914, 'src': 'embed', 'start': 5923.621, 'weight': 0, 'content': [{'end': 5926.582, 'text': "And that's how you can start to manually then tinker with those things.", 'start': 5923.621, 'duration': 2.961}, {'end': 5928.763, 'text': 'But I would never really start a project.', 'start': 5926.962, 'duration': 1.801}, {'end': 5933.945, 'text': "Honestly, there's been professional jobs that I've done where I've used Create React app.", 'start': 5929.604, 'duration': 4.341}, {'end': 5935.946, 'text': "So it's a very professional thing that you could do.", 'start': 5933.985, 'duration': 1.961}, {'end': 5938.867, 'text': "And there's nothing wrong with setting up an app like that.", 'start': 5936.707, 'duration': 2.16}, {'end': 5939.748, 'text': 'Got it.', 'start': 5939.428, 'duration': 0.32}, {'end': 5942.189, 'text': 'Awesome Nice.', 'start': 5940.108, 'duration': 2.081}, {'end': 5943.789, 'text': "That's a really good question.", 'start': 5942.789, 'duration': 1}, {'end': 5947.971, 'text': 'So next, what we need to do is import the input module.', 'start': 5943.869, 'duration': 4.102}, {'end': 5949.732, 'text': "So I'm going to go up to the top, import that.", 'start': 5947.991, 'duration': 1.741}, {'end': 5951.914, 'text': 'And then handle login.', 'start': 5950.732, 'duration': 1.182}], 'summary': 'Professional use of create react app in projects; import input module and handle login.', 'duration': 28.293, 'max_score': 5923.621, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM5923621.jpg'}, {'end': 6072.41, 'src': 'embed', 'start': 6050.651, 'weight': 1, 'content': [{'end': 6060.799, 'text': "so i'm actually going to collect the username from the input form and then update the user's profile information so that that's their display name which is attached to them.", 'start': 6050.651, 'duration': 10.148}, {'end': 6064.081, 'text': 'now for the phone number, they also have a function that you can use.', 'start': 6060.799, 'duration': 3.282}, {'end': 6069.466, 'text': "i think it's update phone number, but you'll see when we do this we're going to call something called update.", 'start': 6064.081, 'duration': 5.385}, {'end': 6072.41, 'text': "um, I'm just trying to find a code that we're going to use.", 'start': 6069.466, 'duration': 2.944}], 'summary': 'Updating user profile with input form data and phone number function.', 'duration': 21.759, 'max_score': 6050.651, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM6050651.jpg'}, {'end': 6408.277, 'src': 'embed', 'start': 6380.993, 'weight': 2, 'content': [{'end': 6388.974, 'text': "This is the bit which is a little bit of something that we need to get our head around, but once it makes sense, it's actually the powerful part.", 'start': 6380.993, 'duration': 7.981}, {'end': 6394.915, 'text': 'We do useEffect, and then here, so useEffect, this is a syntax for useEffect.', 'start': 6389.174, 'duration': 5.741}, {'end': 6397.796, 'text': 'This is going to run once when we run the app.', 'start': 6394.955, 'duration': 2.841}, {'end': 6408.277, 'text': "Now, what we need to do is, there's a listener in use effect, right? And the way we do it is we say auth.onAuthStateChanged.", 'start': 6399.016, 'duration': 9.261}], 'summary': 'Explaining the syntax and functionality of useeffect for app development.', 'duration': 27.284, 'max_score': 6380.993, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM6380993.jpg'}, {'end': 7077.721, 'src': 'heatmap', 'start': 6941.082, 'weight': 0.723, 'content': [{'end': 6942.023, 'text': 'and uh.', 'start': 6941.082, 'duration': 0.941}, {'end': 6949.649, 'text': "by the way, guys, in order to see what is going on here, i'm just literally doing um commands, uh, control space, so you can try that cause,", 'start': 6942.023, 'duration': 7.626}, {'end': 6956.916, 'text': 'if you go on, if you go press dot, uh-huh, yep dot, and then, if you scroll all the way down, so you press uh.', 'start': 6949.649, 'duration': 7.267}, {'end': 6964.502, 'text': "oh, no, not there, sorry, uh, down here what line i'm on, ata, uh-huh.", 'start': 6956.916, 'duration': 7.586}, {'end': 6969.191, 'text': 'so if you just do dot And then you see, you get a bunch of the auto completes right? Yeah.', 'start': 6964.502, 'duration': 4.689}, {'end': 6973.994, 'text': "So the one we're interested in here is, rather than doing it where we did it before.", 'start': 6969.491, 'duration': 4.503}, {'end': 6975.255, 'text': 'so update profile right?', 'start': 6973.994, 'duration': 1.261}, {'end': 6977.496, 'text': "So we're going to keep it there, but we're also going to do it down here.", 'start': 6975.295, 'duration': 2.201}, {'end': 6986.582, 'text': "So we're going to say update the profile when you create them so that the display name is equal to the username.", 'start': 6977.896, 'duration': 8.686}, {'end': 6989.103, 'text': 'And we are going to get rid of it where we had it previously before.', 'start': 6986.642, 'duration': 2.461}, {'end': 6991.184, 'text': 'So we can actually get rid of that block of code.', 'start': 6989.123, 'duration': 2.061}, {'end': 6993.406, 'text': "So now it's actually simplified our code quite a lot.", 'start': 6991.445, 'duration': 1.961}, {'end': 6995.541, 'text': 'yeah, so yep.', 'start': 6993.92, 'duration': 1.621}, {'end': 6997.882, 'text': 'so now, when we create them, we are going to update the profile.', 'start': 6995.541, 'duration': 2.341}, {'end': 6999.783, 'text': 'what we need to do is we also need to return that.', 'start': 6997.882, 'duration': 1.901}, {'end': 7001.024, 'text': "so, because it's from a promise.", 'start': 6999.783, 'duration': 1.241}, {'end': 7005.026, 'text': 'so if we return it, it ends up and it does it correctly.', 'start': 7001.024, 'duration': 4.002}, {'end': 7010.709, 'text': "so, with that said user name, oops, i'll be careful and we say that.", 'start': 7005.026, 'duration': 5.683}, {'end': 7012.27, 'text': "so now let's run another test.", 'start': 7010.709, 'duration': 1.561}, {'end': 7019.008, 'text': "so we need to actually create a sign out button, because you're currently signed in, uh-huh, Uh, so I don't know if it will sign you in again.", 'start': 7012.27, 'duration': 6.738}, {'end': 7019.568, 'text': 'We can try it.', 'start': 7019.068, 'duration': 0.5}, {'end': 7020.269, 'text': 'We can give it a try.', 'start': 7019.668, 'duration': 0.601}, {'end': 7023.79, 'text': "Yeah So let's do test one, two, three, and then let's do sign up.", 'start': 7020.289, 'duration': 3.501}, {'end': 7031.734, 'text': "So this should have signed you up into a new, uh, I think I'm signed up.", 'start': 7026.031, 'duration': 5.703}, {'end': 7034.475, 'text': "So let me try refreshing and then let's see what it does.", 'start': 7031.754, 'duration': 2.721}, {'end': 7038.769, 'text': "Yeah, now it's I'm two users right now.", 'start': 7036.147, 'duration': 2.622}, {'end': 7045.335, 'text': "So test one, two, three, and then I'm also, so it's correct.", 'start': 7039.69, 'duration': 5.645}, {'end': 7047.417, 'text': "It's just, it logged you out of the other one.", 'start': 7045.496, 'duration': 1.921}, {'end': 7049.139, 'text': 'That was just a reactor rendering.', 'start': 7047.437, 'duration': 1.702}, {'end': 7057.406, 'text': "And I'm curious actually, is it putting me in cookies? So let's take a look at cookies, local host.", 'start': 7049.599, 'duration': 7.807}, {'end': 7060.169, 'text': 'And I have my session ID.', 'start': 7057.707, 'duration': 2.462}, {'end': 7071.477, 'text': "Yeah, so I think it's either the session ID that they use to track you or it's something like, if you go down, a CSRF token could be being used.", 'start': 7061.69, 'duration': 9.787}, {'end': 7073.378, 'text': 'So that one could be being used.', 'start': 7071.497, 'duration': 1.881}, {'end': 7077.721, 'text': "But it's one of the authentication ones that is being used to actually keep track of who you are.", 'start': 7073.418, 'duration': 4.303}], 'summary': 'Simplified code by updating profile to set display name equal to username, and tested sign-up process with successful results.', 'duration': 136.639, 'max_score': 6941.082, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM6941082.jpg'}, {'end': 7202.727, 'src': 'embed', 'start': 7172.625, 'weight': 3, 'content': [{'end': 7177.448, 'text': "So honestly, it becomes a headache, and you just don't have to deal with that when you use functional programming approaches.", 'start': 7172.625, 'duration': 4.823}, {'end': 7180.149, 'text': "So that's the main reason behind why.", 'start': 7177.548, 'duration': 2.601}, {'end': 7187.654, 'text': 'You do need to know both, unfortunately, because a lot of jobs, the code bases would be in class-based components.', 'start': 7182.106, 'duration': 5.548}, {'end': 7191.799, 'text': 'And then a lot of your job would actually be changing it to a functional component.', 'start': 7187.734, 'duration': 4.065}, {'end': 7193.341, 'text': 'So you do need to know both.', 'start': 7191.839, 'duration': 1.502}, {'end': 7194.803, 'text': "And it's very valuable to know both.", 'start': 7193.381, 'duration': 1.422}, {'end': 7196.425, 'text': 'Yeah Okay.', 'start': 7195.424, 'duration': 1.001}, {'end': 7196.786, 'text': 'Got it.', 'start': 7196.505, 'duration': 0.281}, {'end': 7202.727, 'text': 'Nice So now we have a working login system.', 'start': 7197.625, 'duration': 5.102}], 'summary': 'Knowing both class-based and functional components is valuable for job opportunities in coding due to the need to convert code bases, as seen in this transcript.', 'duration': 30.102, 'max_score': 7172.625, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM7172625.jpg'}], 'start': 5923.621, 'title': 'React app development and firebase integration', 'summary': 'Covers the process of manually tinkering with create react app, importing modules, handling login, styling components, and integrating firebase functions, including updating user profile information and preventing form refresh for a seamless development experience.', 'chapters': [{'end': 6246.788, 'start': 5923.621, 'title': 'React app development and firebase integration', 'summary': 'Covers the process of manually tinkering with create react app, importing modules, handling login, styling components, and integrating firebase functions, including updating user profile information and preventing form refresh for a seamless development experience.', 'duration': 323.167, 'highlights': ['The chapter covers the process of manually tinkering with Create React app Discusses the professional use of Create React app and the process of manually tinkering with it.', "Integrating Firebase functions, including updating user profile information Explains the process of collecting username from the input form, updating the user's profile information, and using functions like update profile, update phone number, and update email in Firebase.", 'Preventing form refresh for a seamless development experience Explains the importance of preventing form refresh, the use of event.preventDefault(), and form type submit to achieve a natural behavior when typing and hitting enter on the keyboard.', 'Styling components for a visually appealing interface Covers the process of styling components using CSS, including using classes and flex properties to enhance the visual appearance of the form.', 'Importing modules and handling login Discusses the process of importing modules and handling login functionality, including calling the sign-up function and ensuring it does not cause a form refresh.']}, {'end': 6759.596, 'start': 6246.808, 'title': 'User authentication and state management', 'summary': "Covers the process of creating a user with email and password, setting up user authentication, and managing state using react's useeffect hook and onauthstatechanged listener, demonstrating backend validation and efficient use of useeffect by unsubscribing listeners.", 'duration': 512.788, 'highlights': ['The process of creating a user with email and password and setting up user authentication is discussed, including backend validation and error handling. The speaker explains the process of creating a user with email and password, handling backend validation, and implementing error handling for user authentication.', "Demonstration of setting up user authentication and state management using React's useEffect hook and onAuthStateChanged listener to track authentication changes and update user state. The chapter demonstrates the use of React's useEffect hook and onAuthStateChanged listener to monitor authentication changes and update user state, ensuring efficient state management in the application.", "Efficient use of useEffect by unsubscribing listeners to avoid duplicate listeners and ensure efficient programming. The speaker explains the efficient use of React's useEffect hook by unsubscribing listeners to prevent duplicate listeners from affecting the application's performance, ensuring efficient programming."]}, {'end': 7005.026, 'start': 6759.656, 'title': 'Firebase user creation and profile update', 'summary': 'Covers the process of creating a user in firebase and updating their profile, including the potential to host the code in a public or private github repository for portfolio enhancement, with a recommendation to add the project to the portfolio.', 'duration': 245.37, 'highlights': ['The chapter covers the process of creating a user in Firebase and updating their profile, including the potential to host the code in a public or private GitHub repository for portfolio enhancement, with a recommendation to add the project to the portfolio.', 'The instructor addresses the potential to host the code in a public or private GitHub repository for portfolio enhancement, with a recommendation to add the project to the portfolio.', 'The instructor suggests recreating the project from scratch for learning purposes and adding it to the portfolio, emphasizing the value of portfolio enhancement.', 'The instructor discusses the process of creating a user in Firebase and updating their profile, including the potential to host the code in a public or private GitHub repository for portfolio enhancement.']}, {'end': 7193.341, 'start': 7005.026, 'title': 'React functional components vs class components', 'summary': 'Discusses the differences between functional and class components in react, emphasizing the benefits of functional programming and the need to know both component types for job requirements.', 'duration': 188.315, 'highlights': ['Functional programming approach is becoming popular among programmers, including in React, due to its simplicity and clean code. The chapter emphasizes the rising popularity of functional programming among programmers, including in React, due to its simplicity and clean code.', 'Understanding both functional and class-based components is necessary for job requirements, as many code bases are in class-based components and require conversion to functional components. The chapter stresses the importance of knowing both functional and class-based components for job requirements, as many code bases are in class-based components and require conversion to functional components.', "Functional components in React are essentially functions that take input and return HTML, making it easier to understand the component's behavior. The chapter explains that functional components in React are essentially functions that take input and return HTML, making it easier to understand the component's behavior."]}], 'duration': 1269.72, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM5923621.jpg', 'highlights': ['Covers the process of manually tinkering with Create React app Discusses the professional use of Create React app and the process of manually tinkering with it.', "Integrating Firebase functions, including updating user profile information Explains the process of collecting username from the input form, updating the user's profile information, and using functions like update profile, update phone number, and update email in Firebase.", "Demonstration of setting up user authentication and state management using React's useEffect hook and onAuthStateChanged listener to track authentication changes and update user state. The chapter demonstrates the use of React's useEffect hook and onAuthStateChanged listener to monitor authentication changes and update user state, ensuring efficient state management in the application.", 'Understanding both functional and class-based components is necessary for job requirements, as many code bases are in class-based components and require conversion to functional components. The chapter stresses the importance of knowing both functional and class-based components for job requirements, as many code bases are in class-based components and require conversion to functional components.']}, {'end': 8097.157, 'segs': [{'end': 7345.734, 'src': 'embed', 'start': 7321.08, 'weight': 3, 'content': [{'end': 7326.484, 'text': "Somebody said Filani says node for backend, React for frontend, but honestly you don't even need node.", 'start': 7321.08, 'duration': 5.404}, {'end': 7330.107, 'text': "You can just use Firebase, right? For pretty much all the backend, you're good.", 'start': 7326.644, 'duration': 3.463}, {'end': 7337.766, 'text': "Yeah, this is this is something which is really sort of a mindset shift there is that we don't actually even need a back end here, guys.", 'start': 7331.3, 'duration': 6.466}, {'end': 7338.347, 'text': "Yeah, we don't.", 'start': 7337.786, 'duration': 0.561}, {'end': 7339.948, 'text': 'Firebase is doing everything for us.', 'start': 7338.447, 'duration': 1.501}, {'end': 7341.85, 'text': "It's just a service that we use.", 'start': 7340.129, 'duration': 1.721}, {'end': 7345.734, 'text': "And we're using node modules to bring it in and actually like interact with it.", 'start': 7342.331, 'duration': 3.403}], 'summary': 'Firebase can serve as a backend, eliminating the need for node, and enabling seamless frontend-backend interaction.', 'duration': 24.654, 'max_score': 7321.08, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM7321080.jpg'}, {'end': 7574.442, 'src': 'embed', 'start': 7549.476, 'weight': 4, 'content': [{'end': 7561.291, 'text': 'i need to change the modal open to be determined by open sign in, and I need this so on close to say set open sign in to be false.', 'start': 7549.476, 'duration': 11.815}, {'end': 7562.871, 'text': "so now we've just made a few changes.", 'start': 7561.291, 'duration': 1.58}, {'end': 7570.094, 'text': 'all of the styling is the same guys, and you could actually make this a component as well to prevent it having this big code twice,', 'start': 7562.871, 'duration': 7.223}, {'end': 7571.394, 'text': "but we're not going to do that now.", 'start': 7570.094, 'duration': 1.3}, {'end': 7574.442, 'text': 'um, So I need to create the sign in function.', 'start': 7571.394, 'duration': 3.048}], 'summary': 'Change modal open based on sign in status, make styling a component, and create sign in function.', 'duration': 24.966, 'max_score': 7549.476, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM7549476.jpg'}, {'end': 7624.216, 'src': 'heatmap', 'start': 7470.216, 'weight': 6, 'content': [{'end': 7478.083, 'text': "And where I have that traditional button of sign-in, here we're going to have set open sign-in.", 'start': 7470.216, 'duration': 7.867}, {'end': 7480.246, 'text': 'Oh, it says user name.', 'start': 7478.364, 'duration': 1.882}, {'end': 7481.567, 'text': 'Let me fix that.', 'start': 7480.326, 'duration': 1.241}, {'end': 7484.538, 'text': 'It had two Es.', 'start': 7483.777, 'duration': 0.761}, {'end': 7486.42, 'text': 'Oh, oops.', 'start': 7485.899, 'duration': 0.521}, {'end': 7487.621, 'text': 'There we go.', 'start': 7487.221, 'duration': 0.4}, {'end': 7491.565, 'text': "I think you need to follow now again because I've gone out of sync.", 'start': 7488.142, 'duration': 3.423}, {'end': 7492.386, 'text': "So now we're good.", 'start': 7491.765, 'duration': 0.621}, {'end': 7493.587, 'text': 'There we go.', 'start': 7493.267, 'duration': 0.32}, {'end': 7495.789, 'text': 'Nice So set open sign in.', 'start': 7493.787, 'duration': 2.002}, {'end': 7496.811, 'text': 'I just changed that here.', 'start': 7495.89, 'duration': 0.921}, {'end': 7500.134, 'text': "And this one we basically, I don't want that to open.", 'start': 7497.451, 'duration': 2.683}, {'end': 7501.435, 'text': 'the other modal we had right?', 'start': 7500.134, 'duration': 1.301}, {'end': 7502.917, 'text': 'So you see this entire modal?', 'start': 7501.595, 'duration': 1.322}, {'end': 7508.437, 'text': "So we can refactor this code, but for the benefit of this sort of tutorial, I'm just gonna paste another modal here", 'start': 7503.536, 'duration': 4.901}, {'end': 7513.698, 'text': "Yeah Uh, and I'm just gonna sort of change it up just for, and make it just for the, what we needed here.", 'start': 7508.777, 'duration': 4.921}, {'end': 7518.179, 'text': "So I don't need a username because we only need an email and password when we log in.", 'start': 7513.718, 'duration': 4.461}, {'end': 7520.559, 'text': "Right Uh, I'm gonna create a sign.", 'start': 7518.199, 'duration': 2.36}, {'end': 7525.46, 'text': 'Avi says the way you guys are dealing with the question from the comment section is just insane.', 'start': 7520.579, 'duration': 4.881}, {'end': 7528.641, 'text': "It feels like we're getting a live classroom training session.", 'start': 7525.78, 'duration': 2.861}, {'end': 7531.428, 'text': 'nice, i love that.', 'start': 7529.967, 'duration': 1.461}, {'end': 7532.788, 'text': "honestly, it's like that's what we.", 'start': 7531.428, 'duration': 1.36}, {'end': 7534.029, 'text': 'we encourage questions.', 'start': 7532.788, 'duration': 1.241}, {'end': 7541.672, 'text': 'if anything, it just helps you guys get to know a bit more and it helps us direct the sort of session towards what everyone actually wants to learn,', 'start': 7534.029, 'duration': 7.643}, {'end': 7543.113, 'text': 'as opposed to what we think.', 'start': 7541.672, 'duration': 1.441}, {'end': 7548.015, 'text': 'yeah, nice, so we have that and then we have sign in.', 'start': 7543.113, 'duration': 4.902}, {'end': 7549.476, 'text': 'so i need to do two things now.', 'start': 7548.015, 'duration': 1.461}, {'end': 7561.291, 'text': 'i need to change the modal open to be determined by open sign in, and I need this so on close to say set open sign in to be false.', 'start': 7549.476, 'duration': 11.815}, {'end': 7562.871, 'text': "so now we've just made a few changes.", 'start': 7561.291, 'duration': 1.58}, {'end': 7570.094, 'text': 'all of the styling is the same guys, and you could actually make this a component as well to prevent it having this big code twice,', 'start': 7562.871, 'duration': 7.223}, {'end': 7571.394, 'text': "but we're not going to do that now.", 'start': 7570.094, 'duration': 1.3}, {'end': 7574.442, 'text': 'um, So I need to create the sign in function.', 'start': 7571.394, 'duration': 3.048}, {'end': 7578.504, 'text': "So let's go over here and let's do const sign in.", 'start': 7574.542, 'duration': 3.962}, {'end': 7583.346, 'text': 'So const sign in equals, and it takes an event and it does this.', 'start': 7578.644, 'duration': 4.702}, {'end': 7586.807, 'text': 'And then remember guys, we need to do event dot prevent default.', 'start': 7583.586, 'duration': 3.221}, {'end': 7590.869, 'text': "So it doesn't do weird stuff and refresh, right? Exactly.", 'start': 7587.168, 'duration': 3.701}, {'end': 7593.05, 'text': 'Carlos says something important.', 'start': 7590.969, 'duration': 2.081}, {'end': 7601.203, 'text': 'He says, so in conclusion, HTML, CSS, JavaScript, React, and Firebase is everything we need, right? Exactly that.', 'start': 7593.09, 'duration': 8.113}, {'end': 7603.024, 'text': "Yeah So that's everything you need.", 'start': 7601.423, 'duration': 1.601}, {'end': 7611.751, 'text': 'I would recommend you start with HTML, CSS, and JavaScript, and then you proceed to learning React, which wraps those three fundamentals.', 'start': 7603.104, 'duration': 8.647}, {'end': 7618.112, 'text': "And then Firebase is what's going to power it and give you a sort of a database, allow you to host it online.", 'start': 7613.029, 'duration': 5.083}, {'end': 7619.913, 'text': "But that's a really good question.", 'start': 7618.492, 'duration': 1.421}, {'end': 7622.855, 'text': 'So I think that clears up a lot of sort of doubt for a lot of people.', 'start': 7619.973, 'duration': 2.882}, {'end': 7624.216, 'text': "That's all you need.", 'start': 7622.875, 'duration': 1.341}], 'summary': 'The transcript covers changing modal content, handling questions, and discussing essential technologies like html, css, javascript, react, and firebase.', 'duration': 154, 'max_score': 7470.216, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM7470216.jpg'}, {'end': 7797.932, 'src': 'embed', 'start': 7768.678, 'weight': 0, 'content': [{'end': 7771.479, 'text': 'So now we have user authentication, guys.', 'start': 7768.678, 'duration': 2.801}, {'end': 7773.54, 'text': 'We have full user authentication.', 'start': 7771.519, 'duration': 2.021}, {'end': 7783.602, 'text': "And we also capture the display name, which we're going to use to be, we're going to use that as a username when we post things.", 'start': 7774.08, 'duration': 9.522}, {'end': 7789.75, 'text': "So the next thing we're going to be doing is we're going to be working on Firebase storage.", 'start': 7784.382, 'duration': 5.368}, {'end': 7794.031, 'text': 'So we completed Firebase user authentication.', 'start': 7791.551, 'duration': 2.48}, {'end': 7797.932, 'text': "And the next thing we're going to be doing is working on Firebase storage.", 'start': 7794.691, 'duration': 3.241}], 'summary': 'Achieved full user authentication and capturing display name. next, working on firebase storage.', 'duration': 29.254, 'max_score': 7768.678, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM7768678.jpg'}, {'end': 7883.117, 'src': 'embed', 'start': 7851.655, 'weight': 5, 'content': [{'end': 7857.339, 'text': "we're going to be now working on Firebase, like storing posts in Firebase?", 'start': 7851.655, 'duration': 5.684}, {'end': 7860.741, 'text': 'Yeah, so storing posts in Firebase exactly.', 'start': 7858.539, 'duration': 2.202}, {'end': 7865.045, 'text': 'soaring posts in firebase.', 'start': 7861.903, 'duration': 3.142}, {'end': 7874.031, 'text': "yeah, so this bit is a bit more intricate, um, but it's.", 'start': 7865.045, 'duration': 8.986}, {'end': 7875.232, 'text': "it's a really.", 'start': 7874.031, 'duration': 1.201}, {'end': 7877.413, 'text': 'it really does pay off to know this right now.', 'start': 7875.232, 'duration': 2.181}, {'end': 7883.117, 'text': "so what we're going to do now is we're going to create a sort of it's called.", 'start': 7877.413, 'duration': 5.704}], 'summary': 'Working on storing posts in firebase for intricate bit, pays off to know now.', 'duration': 31.462, 'max_score': 7851.655, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM7851655.jpg'}], 'start': 7193.381, 'title': 'Firebase integration and user authentication', 'summary': 'Discusses implementing firebase for frontend login system, covering user authentication, refactoring modals, and moving to firebase storage for posts. it emphasizes the simplicity of firebase backend operations and the essential technologies for web development, including html, css, javascript, react, and firebase.', 'chapters': [{'end': 7461.567, 'start': 7193.381, 'title': 'Firebase authentication and frontend development', 'summary': 'Discusses implementing a login system using firebase for frontend development, demonstrating how to handle user authentication and switching between sign up and log out buttons, emphasizing the simplicity of firebase for backend operations and the ease of logging out with just one line of code.', 'duration': 268.186, 'highlights': ['The chapter demonstrates how to implement a login system using Firebase for frontend development. Implementation of a login system using Firebase for frontend development.', 'The chapter emphasizes the simplicity of Firebase for backend operations. Emphasis on the simplicity of Firebase for backend operations.', 'Demonstration of handling user authentication and switching between sign up and log out buttons. Demonstration of handling user authentication and button switching.', 'Illustration of the ease of logging out with just one line of code. Illustration of the ease of logging out with one line of code.']}, {'end': 7639.024, 'start': 7461.647, 'title': 'Modal refactoring and sign-in function', 'summary': 'Covers refactoring a modal and implementing a sign-in function, emphasizing the importance of user interaction and the essential technologies for web development, including html, css, javascript, react, and firebase.', 'duration': 177.377, 'highlights': ['The chapter covers refactoring a modal and implementing a sign-in function. The tutorial focuses on making changes to the modal interface to accommodate a sign-in function, demonstrating practical web development techniques.', 'Emphasizing the importance of user interaction and the essential technologies for web development, including HTML, CSS, JavaScript, React, and Firebase. The importance of user interaction is highlighted, and the essential technologies for web development, including HTML, CSS, JavaScript, React, and Firebase, are emphasized as the foundational tools for web development.']}, {'end': 8097.157, 'start': 7639.044, 'title': 'Firebase user authentication & moving to firebase storage', 'summary': "Covers the completion of firebase user authentication, including sign up and sign in functionalities, followed by the plan to work on firebase storage for storing posts, with a focus on creating an 'image upload' component.", 'duration': 458.113, 'highlights': ['The completion of Firebase user authentication, including sign up and sign in functionalities The team has finished working on Firebase user authentication, completing the sign up and finishing up with the sign in functionality, achieving full user authentication.', "Plan to work on Firebase storage for storing posts The next focus is on moving to Firebase storage to enable the storage of posts, aiming to create an 'image upload' component to allow caption input, file picking, and posting functionalities."]}], 'duration': 903.776, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM7193381.jpg', 'highlights': ['Demonstration of handling user authentication and button switching.', 'The chapter demonstrates how to implement a login system using Firebase for frontend development.', 'The completion of Firebase user authentication, including sign up and sign in functionalities.', 'Emphasis on the simplicity of Firebase for backend operations.', 'The chapter covers refactoring a modal and implementing a sign-in function.', 'Plan to work on Firebase storage for storing posts.', 'Emphasizing the importance of user interaction and the essential technologies for web development.']}, {'end': 9201.595, 'segs': [{'end': 8180.898, 'src': 'embed', 'start': 8135.448, 'weight': 3, 'content': [{'end': 8143.13, 'text': 'So we can actually, this thing right here, so we can upload our files and images.', 'start': 8135.448, 'duration': 7.682}, {'end': 8147.816, 'text': 'yeah, exactly, and that little thing at the top, guys, is a progress bar.', 'start': 8144.372, 'duration': 3.444}, {'end': 8151.201, 'text': "so it'll show you the progress right here, this guy over here.", 'start': 8147.816, 'duration': 3.385}, {'end': 8158.65, 'text': "so right now it's empty, but then, as soon as it starts like, your file starts uploading, it'll be like and it finishes.", 'start': 8151.201, 'duration': 7.449}, {'end': 8163.166, 'text': "that's it exactly awesome, Nice, that was a really good explanation actually.", 'start': 8158.65, 'duration': 4.516}, {'end': 8163.987, 'text': 'We should do that more.', 'start': 8163.186, 'duration': 0.801}, {'end': 8167.429, 'text': 'Yeah, because we start.', 'start': 8164.547, 'duration': 2.882}, {'end': 8173.553, 'text': "what happens is like you start like we can visualize it because we've already created it and we start explaining the code.", 'start': 8167.429, 'duration': 6.124}, {'end': 8180.898, 'text': "but I think everybody who's following it's difficult for them because they don't like visual cue, they don't know what we're gonna be building,", 'start': 8173.553, 'duration': 7.345}], 'summary': 'Explanation of file upload feature with progress bar for visualization and improved understanding.', 'duration': 45.45, 'max_score': 8135.448, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM8135448.jpg'}, {'end': 8615.181, 'src': 'embed', 'start': 8587.357, 'weight': 1, 'content': [{'end': 8590.218, 'text': "So handle upload, and it's not going to do anything for now.", 'start': 8587.357, 'duration': 2.861}, {'end': 8598.142, 'text': "But what we can see now is if we go over to our code, we can see we've got enter a caption which works when we type it in right?", 'start': 8590.779, 'duration': 7.363}, {'end': 8600.163, 'text': 'You see, at the top on the right? Yeah.', 'start': 8598.182, 'duration': 1.981}, {'end': 8600.883, 'text': 'Oh, right there.', 'start': 8600.263, 'duration': 0.62}, {'end': 8601.703, 'text': 'Oh, wow.', 'start': 8601.323, 'duration': 0.38}, {'end': 8603.484, 'text': 'Nice Yeah.', 'start': 8601.764, 'duration': 1.72}, {'end': 8605.905, 'text': 'So you enter a caption, you choose file.', 'start': 8603.684, 'duration': 2.221}, {'end': 8606.506, 'text': "That's awesome.", 'start': 8605.945, 'duration': 0.561}, {'end': 8607.226, 'text': 'And upload.', 'start': 8606.746, 'duration': 0.48}, {'end': 8609.817, 'text': "yeah, and we've got upload.", 'start': 8608.416, 'duration': 1.401}, {'end': 8611.839, 'text': "so right now, upload doesn't actually do anything.", 'start': 8609.817, 'duration': 2.022}, {'end': 8615.181, 'text': 'but if you click on, choose file, notice what happens now.', 'start': 8611.839, 'duration': 3.342}], 'summary': 'Testing upload feature with caption input and file selection.', 'duration': 27.824, 'max_score': 8587.357, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM8587357.jpg'}, {'end': 8685.008, 'src': 'embed', 'start': 8653.555, 'weight': 2, 'content': [{'end': 8657.917, 'text': 'chatting while doing something informative and something we can learn from.', 'start': 8653.555, 'duration': 4.362}, {'end': 8659.905, 'text': "that's it.", 'start': 8659.164, 'duration': 0.741}, {'end': 8661.306, 'text': "that's honestly what we aim for.", 'start': 8659.905, 'duration': 1.401}, {'end': 8667.572, 'text': 'we want it to be more of a casual sort of code along as opposed to, like you know, writing notes and stuff like that.', 'start': 8661.306, 'duration': 6.266}, {'end': 8670.815, 'text': 'sunny, and i will spend like yeah, go ahead, go ahead, my bad.', 'start': 8667.572, 'duration': 3.243}, {'end': 8671.315, 'text': "no, no, that's it.", 'start': 8670.815, 'duration': 0.5}, {'end': 8672.456, 'text': "i was just gonna say it's all recorded.", 'start': 8671.315, 'duration': 1.141}, {'end': 8675.479, 'text': 'so, like you could take your time afterwards and go at your own pace.', 'start': 8672.456, 'duration': 3.023}, {'end': 8677.644, 'text': 'yeah, What are you going to say?', 'start': 8675.479, 'duration': 2.165}, {'end': 8685.008, 'text': "I was just going to say like we code for fun and we'll like code for like 12 hours straight and while joking around, having fun,", 'start': 8677.824, 'duration': 7.184}], 'summary': 'Casual code along sessions, coding for fun, recorded for flexible learning', 'duration': 31.453, 'max_score': 8653.555, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM8653555.jpg'}, {'end': 8772.038, 'src': 'embed', 'start': 8738.98, 'weight': 0, 'content': [{'end': 8741.402, 'text': "So what I'm going to do now is actually show you a first piece of code.", 'start': 8738.98, 'duration': 2.422}, {'end': 8751.068, 'text': 'So this line is the first bit, right? So this line is basically saying, get a reference, right? So access to storage in Firebase.', 'start': 8741.442, 'duration': 9.626}, {'end': 8753.131, 'text': 'Get a reference to this photo.', 'start': 8751.71, 'duration': 1.421}, {'end': 8756.612, 'text': "So we're creating a new photo here, so-called images, and we're storing everything inside of it.", 'start': 8753.151, 'duration': 3.461}, {'end': 8760.714, 'text': 'Image name is basically the file name that we selected.', 'start': 8757.152, 'duration': 3.562}, {'end': 8762.534, 'text': 'So whatever that file name is.', 'start': 8761.214, 'duration': 1.32}, {'end': 8764.335, 'text': 'Whoops OK, hold on, hold on.', 'start': 8762.574, 'duration': 1.761}, {'end': 8772.038, 'text': "So just to be very clear what this image name is, it's actually that right there.", 'start': 8764.775, 'duration': 7.263}], 'summary': "Demonstrating code to access and store photos in firebase, using 'images' for storage.", 'duration': 33.058, 'max_score': 8738.98, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM8738980.jpg'}, {'end': 8973.85, 'src': 'embed', 'start': 8944.065, 'weight': 8, 'content': [{'end': 8946.15, 'text': 'So this is going to be known as your error function.', 'start': 8944.065, 'duration': 2.085}, {'end': 8951.237, 'text': 'So this is just how the Firebase SDK, the uploading SDK works.', 'start': 8947.294, 'duration': 3.943}, {'end': 8955.399, 'text': 'So here, all I like to do is I like to do a console log and I error it out.', 'start': 8951.717, 'duration': 3.682}, {'end': 8960.822, 'text': "Because when you do this sort of stuff, it's typically not a user-friendly message that you show.", 'start': 8955.759, 'duration': 5.063}, {'end': 8966.106, 'text': 'So we just want to show it in the console as opposed to saying alert and coming up on the screen.', 'start': 8961.183, 'duration': 4.923}, {'end': 8970.428, 'text': 'But in our case, just for now, what we will do is I guess we could just do error.message.', 'start': 8966.626, 'duration': 3.802}, {'end': 8973.85, 'text': 'Because this is more of a demo, so we can just show.', 'start': 8971.809, 'duration': 2.041}], 'summary': 'The error function in the firebase sdk uses console logs to display error messages instead of user-friendly alerts.', 'duration': 29.785, 'max_score': 8944.065, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM8944065.jpg'}, {'end': 9177.321, 'src': 'embed', 'start': 9149.587, 'weight': 9, 'content': [{'end': 9156.651, 'text': 'so what we want to do now is say firebase, so firebase dot fire store.', 'start': 9149.587, 'duration': 7.064}, {'end': 9164.018, 'text': "so they say basically what I'm writing right now is go and get the exact server timestamp.", 'start': 9156.651, 'duration': 7.367}, {'end': 9166.378, 'text': "So don't get the timestamp, which is on the server.", 'start': 9164.058, 'duration': 2.32}, {'end': 9171.379, 'text': 'So then, any image we upload should basically the newest one should be like at the top right?', 'start': 9166.418, 'duration': 4.961}, {'end': 9177.321, 'text': "And because we're using server time, we're using the Firebase's time.", 'start': 9171.399, 'duration': 5.922}], 'summary': 'Using firebase to fetch server timestamp for organizing images based on newest upload.', 'duration': 27.734, 'max_score': 9149.587, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM9149587.jpg'}], 'start': 8097.157, 'title': 'Implementing file and image upload features', 'summary': 'Covers building a file upload feature with a progress bar, implementing image upload functionality, and uploading images to firebase storage, emphasizing visual cues, audience comprehension, file selection, ui elements, state variables, viewer engagement, firebase storage integration, and server timestamp usage.', 'chapters': [{'end': 8180.898, 'start': 8097.157, 'title': 'Building file upload feature with progress bar', 'summary': 'Discusses building a file upload feature with a progress bar, emphasizing the visual cues for an improved understanding, and the importance of providing explanations for easier comprehension for the audience.', 'duration': 83.741, 'highlights': ['The chapter discusses building a file upload feature with a progress bar.', 'Emphasizes the visual cues for an improved understanding.', 'Importance of providing explanations for easier comprehension for the audience.']}, {'end': 8694.014, 'start': 8180.898, 'title': 'Image upload implementation', 'summary': 'Discusses the implementation of image upload functionality, including handling file selection, rendering ui elements, and setting up state variables, while also highlighting viewer interaction and engagement.', 'duration': 513.116, 'highlights': ['The implementation of image upload functionality, including handling file selection, rendering UI elements, and setting up state variables. The chapter delves into the process of implementing image upload functionality, covering aspects such as handling file selection, rendering UI elements like input and button, and setting up state variables for caption, image, and progress bar.', 'The viewer interaction and engagement, with emphasis on receiving feedback and fostering a casual code-along atmosphere. The chapter highlights the importance of viewer interaction, such as receiving feedback and fostering a casual code-along atmosphere to enhance engagement and learning experience.', 'The relaxed and engaging approach to coding, focusing on a casual discussion and collaborative learning experience. The chapter emphasizes a relaxed and engaging approach to coding, fostering a casual discussion and collaborative learning experience, aiming to make coding more enjoyable and interactive.']}, {'end': 9201.595, 'start': 8694.054, 'title': 'Firebase image upload', 'summary': 'Explains the process of uploading images to firebase storage, including getting a reference to the photo, tracking upload progress, handling errors, and completing the upload, while also integrating the image into the database using server timestamp for ordering.', 'duration': 507.541, 'highlights': ['The process of uploading images to Firebase storage is explained, including getting a reference to the photo and storing it. The speaker explains the code for getting a reference to the photo and storing it in Firebase storage.', 'Tracking upload progress and managing asynchronous processes is detailed, including the logic for monitoring progress and displaying a visual progress indicator. The speaker describes the logic for tracking upload progress, which includes monitoring the progress with a visual indicator and displaying the progress as a number between 0 and 100.', 'The handling of errors during the upload process is discussed, with the approach of logging errors in the console. The speaker explains the method for handling errors during the upload process, suggesting logging errors in the console and discussing the user-friendly approach.', 'Integrating the uploaded image into the database using server timestamp for ordering is outlined. The speaker outlines the process of integrating the uploaded image into the database and explains the use of server timestamp for ordering posts by correct timings.']}], 'duration': 1104.438, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM8097157.jpg', 'highlights': ['The process of uploading images to Firebase storage is explained, including getting a reference to the photo and storing it.', 'The implementation of image upload functionality, including handling file selection, rendering UI elements, and setting up state variables.', 'The relaxed and engaging approach to coding, focusing on a casual discussion and collaborative learning experience.', 'Tracking upload progress and managing asynchronous processes is detailed, including the logic for monitoring progress and displaying a visual progress indicator.', 'The chapter discusses building a file upload feature with a progress bar.', 'The viewer interaction and engagement, with emphasis on receiving feedback and fostering a casual code-along atmosphere.', 'Emphasizes the visual cues for an improved understanding.', 'Importance of providing explanations for easier comprehension for the audience.', 'The handling of errors during the upload process is discussed, with the approach of logging errors in the console.', 'Integrating the uploaded image into the database using server timestamp for ordering is outlined.']}, {'end': 10439.792, 'segs': [{'end': 9252.263, 'src': 'embed', 'start': 9226.177, 'weight': 2, 'content': [{'end': 9230.579, 'text': "So it's uploaded to Firebase Storage, and then we're literally going to put this inside of the database now.", 'start': 9226.177, 'duration': 4.402}, {'end': 9232.119, 'text': 'So think about what just happened.', 'start': 9230.599, 'duration': 1.52}, {'end': 9240.103, 'text': "It uploaded it to Firebase Storage, gave us a download link, and then we're pushing that download link as part of a post.", 'start': 9232.139, 'duration': 7.964}, {'end': 9241.544, 'text': 'Nice Oh, I see.', 'start': 9240.283, 'duration': 1.261}, {'end': 9243.265, 'text': 'Okay Okay, that makes sense.', 'start': 9241.604, 'duration': 1.661}, {'end': 9247.778, 'text': "Yeah Now, there's one more part here, right? We need the username.", 'start': 9243.545, 'duration': 4.233}, {'end': 9251.302, 'text': "The username, however, we don't actually have at the moment.", 'start': 9248.238, 'duration': 3.064}, {'end': 9252.263, 'text': "We don't have it here.", 'start': 9251.362, 'duration': 0.901}], 'summary': 'File uploaded to firebase storage, download link pushed as part of a post, username missing', 'duration': 26.086, 'max_score': 9226.177, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM9226177.jpg'}, {'end': 9443.515, 'src': 'embed', 'start': 9416.914, 'weight': 3, 'content': [{'end': 9421.696, 'text': "so it says if this is not there, don't freak out and break.", 'start': 9416.914, 'duration': 4.782}, {'end': 9424.137, 'text': "it's just saying like only sort of use.", 'start': 9421.696, 'duration': 2.441}, {'end': 9425.517, 'text': 'this only apply this condition.', 'start': 9424.137, 'duration': 1.38}, {'end': 9426.078, 'text': 'what this is?', 'start': 9425.517, 'duration': 0.561}, {'end': 9430.039, 'text': 'that that is so clean like normally you have to write try catch for this stuff.', 'start': 9426.078, 'duration': 3.961}, {'end': 9432.489, 'text': 'Yeah, so normally you need try-catch.', 'start': 9430.868, 'duration': 1.621}, {'end': 9433.71, 'text': "Now you've got optional chaining.", 'start': 9432.529, 'duration': 1.181}, {'end': 9438.873, 'text': 'Nice So now if we click save, we should get, yeah, now you see, sorry, you need to log in.', 'start': 9434.41, 'duration': 4.463}, {'end': 9443.515, 'text': "So now what I want you to do is, firstly, let's finish up the logic.", 'start': 9439.093, 'duration': 4.422}], 'summary': 'Optional chaining simplifies error handling, eliminating need for try-catch.', 'duration': 26.601, 'max_score': 9416.914, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM9416914.jpg'}, {'end': 9588.736, 'src': 'embed', 'start': 9563.055, 'weight': 1, 'content': [{'end': 9568.339, 'text': "Yeah, now notice how it didn't go to the top, even though it had the correct timestamp.", 'start': 9563.055, 'duration': 5.284}, {'end': 9572.783, 'text': "It's because the other ones don't have timestamps, right? Yes, so that's one reason.", 'start': 9568.359, 'duration': 4.424}, {'end': 9577.827, 'text': "Also, we need to consider that we didn't actually initially sort by timestamp.", 'start': 9573.304, 'duration': 4.523}, {'end': 9579.429, 'text': "We didn't order by, yeah, that's true.", 'start': 9577.847, 'duration': 1.582}, {'end': 9583.752, 'text': "Yeah, so what we can do now is what I'm going to do is I'm actually going to clear the database,", 'start': 9579.929, 'duration': 3.823}, {'end': 9587.015, 'text': "because we've got some records in there which don't have timestamps right?", 'start': 9583.752, 'duration': 3.263}, {'end': 9588.736, 'text': "So don't clear maybe all of them.", 'start': 9587.295, 'duration': 1.441}], 'summary': 'Discussion about sorting records by timestamp and clearing database', 'duration': 25.681, 'max_score': 9563.055, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM9563055.jpg'}, {'end': 9688.95, 'src': 'embed', 'start': 9662.79, 'weight': 0, 'content': [{'end': 9668.313, 'text': 'Yeah So you can just paint it here and you can do order by and the field that we want to order it by is called timestamp.', 'start': 9662.79, 'duration': 5.523}, {'end': 9676.478, 'text': 'The answer to that question, by the way, is yes, it can be scaled up on a much larger scale for many users.', 'start': 9669.093, 'duration': 7.385}, {'end': 9683.168, 'text': 'Yeah So right out of the box guys, it can support literally a million users.', 'start': 9677.546, 'duration': 5.622}, {'end': 9688.95, 'text': "So if you, if you, once you deploy this and it's up and running, it doesn't matter if you get 10 billion users, Google you're going to.", 'start': 9683.308, 'duration': 5.642}], 'summary': 'The system can support a million users and can be scaled up for many more.', 'duration': 26.16, 'max_score': 9662.79, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM9662790.jpg'}, {'end': 9922.32, 'src': 'embed', 'start': 9895.595, 'weight': 4, 'content': [{'end': 9899.518, 'text': 'But Prettier is really, really good to sort of get used to having.', 'start': 9895.595, 'duration': 3.923}, {'end': 9904.706, 'text': 'And it just means that when you click save, so you have to update it in preferences.', 'start': 9901.803, 'duration': 2.903}, {'end': 9908.909, 'text': 'but if you click save, it will actually handle all the formatting for you, which is really handy.', 'start': 9904.706, 'duration': 4.203}, {'end': 9910.791, 'text': "So here we're going to say display flex.", 'start': 9908.949, 'duration': 1.842}, {'end': 9914.794, 'text': "And on the right, as soon as I click save, notice how you're going to see it change.", 'start': 9911.171, 'duration': 3.623}, {'end': 9917.196, 'text': 'So you see everything went by default into a row.', 'start': 9914.954, 'duration': 2.242}, {'end': 9922.32, 'text': 'So we want it to be inside in a column.', 'start': 9919.098, 'duration': 3.222}], 'summary': 'Prettier auto-formats code on save, making it convenient and efficient.', 'duration': 26.725, 'max_score': 9895.595, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM9895595.jpg'}, {'end': 10250.458, 'src': 'embed', 'start': 10227.179, 'weight': 5, 'content': [{'end': 10233.922, 'text': "But as you can imagine, this is going to cause some weird behavior because we haven't started, we haven't prepared for that.", 'start': 10227.179, 'duration': 6.743}, {'end': 10236.204, 'text': "Now, let's have a look and you see it just jumped to the bottom.", 'start': 10233.962, 'duration': 2.242}, {'end': 10241.056, 'text': 'But the surrounding container is called app header.', 'start': 10238.175, 'duration': 2.881}, {'end': 10243.376, 'text': 'So the surrounding container is called app header.', 'start': 10241.656, 'duration': 1.72}, {'end': 10249.278, 'text': 'So now with flexbox, what we can do is we can go here and we can say display flex.', 'start': 10243.396, 'duration': 5.882}, {'end': 10250.458, 'text': "That's the first step.", 'start': 10249.678, 'duration': 0.78}], 'summary': 'Demonstrating the use of flexbox for app header, causing unexpected behavior.', 'duration': 23.279, 'max_score': 10227.179, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM10227179.jpg'}], 'start': 9201.835, 'title': 'Firebase and prettier integration', 'summary': 'Covers integrating firebase storage and database, including image upload and user authentication, sorting database records by timestamp, clearing records, and scalability to support a million users, as well as using prettier for automatic code formatting and styling web page elements.', 'chapters': [{'end': 9561.734, 'start': 9201.835, 'title': 'Firebase storage and database integration', 'summary': 'Discusses how to integrate firebase storage and database by uploading an image and storing its download url, retrieving the username from app.js, and implementing checks for user authentication using optional chaining, resulting in a functional image upload feature.', 'duration': 359.899, 'highlights': ['The chapter discusses how to integrate Firebase Storage and Database by uploading an image and storing its download URL The transcript details the process of uploading an image to Firebase Storage and storing its download URL for use in the database.', 'Retrieving the username from app.js The transcript explains the retrieval of the username from app.js to be used in the image upload process.', 'Implementing checks for user authentication using optional chaining The transcript highlights the use of optional chaining in JavaScript to implement checks for user authentication, ensuring that the user is signed in before allowing image uploads.']}, {'end': 9894.154, 'start': 9563.055, 'title': 'Timestamp sorting and database clearing', 'summary': 'Discusses sorting database records by timestamp, clearing records without timestamps, and the scalability of the system, demonstrating the ability to support a million users out of the box.', 'duration': 331.099, 'highlights': ["The system can support a million users out of the box. The system's scalability is highlighted, showing its capability to support a million users without additional configuration.", 'Clearing database records without timestamps. The process of selectively clearing records without timestamps from the database is discussed as part of the data management.', 'Sorting database records by timestamp. The method of sorting database records by timestamp is explained to ensure the topmost recent records are displayed first.']}, {'end': 10185.878, 'start': 9895.595, 'title': 'Using prettier for automatic code formatting', 'summary': 'Discusses using prettier for automatic code formatting, demonstrating how to apply flexbox properties and margins, the impact on the appearance of the web page, and addressing issues with element positioning and styling.', 'duration': 290.283, 'highlights': ["Demonstrating use of Prettier for automatic code formatting The speaker discusses the benefits of using Prettier for automatic code formatting, highlighting how clicking 'save' updates the code preferences and handles all formatting, making it a handy tool for developers.", "Applying Flexbox properties and margins The tutorial showcases the application of Flexbox properties like 'display flex' and 'flex direction', along with setting margins to 10 pixels, and adjusting width to 60%, impacting the appearance of the web page.", "Addressing issues with element positioning and styling The chapter addresses issues with element positioning, including setting 'margin-left' and 'margin-right' as 'auto', and exploring the impact of 'position: fixed' for bottom alignment, ultimately focusing on achieving a cleaner appearance."]}, {'end': 10439.792, 'start': 10186.219, 'title': 'Styling web page and authentication', 'summary': 'Focuses on styling the web page elements such as login buttons and header image using flexbox, and briefly discusses potential implementation of username-based authentication with email in the future.', 'duration': 253.573, 'highlights': ['The chapter discusses styling the web page elements such as login buttons and header image using flexbox, resulting in a cleaner and nicer appearance.', 'It briefly mentions the potential implementation of username-based authentication with email in the future, highlighting the flexibility and multiple ways to achieve this.', 'The conversation also touches upon the default authentication system with email and password, and the possibility of creating a custom authentication method using Firebase.']}], 'duration': 1237.957, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM9201835.jpg', 'highlights': ['The system can support a million users out of the box.', 'Sorting database records by timestamp.', 'The chapter discusses how to integrate Firebase Storage and Database by uploading an image and storing its download URL.', 'Implementing checks for user authentication using optional chaining.', 'Demonstrating use of Prettier for automatic code formatting.', 'Applying Flexbox properties and margins.', 'The chapter discusses styling the web page elements such as login buttons and header image using flexbox.']}, {'end': 11385.094, 'segs': [{'end': 10486.68, 'src': 'embed', 'start': 10460.358, 'weight': 1, 'content': [{'end': 10464.539, 'text': 'And then we could even show how we added that quick Instagram embed and then we can host it.', 'start': 10460.358, 'duration': 4.181}, {'end': 10466.6, 'text': "And I think we, that shouldn't take too long now.", 'start': 10464.559, 'duration': 2.041}, {'end': 10467.32, 'text': 'Yeah Yeah.', 'start': 10466.76, 'duration': 0.56}, {'end': 10470.511, 'text': "Nice So let's go to App Posts.", 'start': 10468.61, 'duration': 1.901}, {'end': 10472.252, 'text': 'So we push this inside of here.', 'start': 10470.611, 'duration': 1.641}, {'end': 10476.454, 'text': "So I've just surrounded these posts that we have right here.", 'start': 10472.292, 'duration': 4.162}, {'end': 10478.615, 'text': "And I'm just going to add a little bit of padding here.", 'start': 10476.895, 'duration': 1.72}, {'end': 10481.957, 'text': "So I'm going to go here, and I'm going to go ahead and do App Posts.", 'start': 10478.656, 'duration': 3.301}, {'end': 10483.558, 'text': "And I'm going to say Padding.", 'start': 10482.418, 'duration': 1.14}, {'end': 10486.68, 'text': "Let's just give it a 20 pixel padding and see how that looks.", 'start': 10484.138, 'duration': 2.542}], 'summary': 'Adding instagram embed and applying 20 pixel padding to app posts.', 'duration': 26.322, 'max_score': 10460.358, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM10460358.jpg'}, {'end': 10611.303, 'src': 'embed', 'start': 10539.133, 'weight': 0, 'content': [{'end': 10550.075, 'text': "yeah, exactly, so it's uh.", 'start': 10539.133, 'duration': 10.942}, {'end': 10562.345, 'text': "yeah, right, this is what we're trying to build right now.", 'start': 10550.075, 'duration': 12.27}, {'end': 10569.691, 'text': 'so what we want to do is type in instagram.', 'start': 10562.345, 'duration': 7.346}, {'end': 10577.095, 'text': "oh man, I'm sorry.", 'start': 10569.691, 'duration': 7.404}, {'end': 10592.6, 'text': 'Okay So what we need to do now is, uh, cause if you, if you head over to, uh, type in react, Instagram, Instagram embed, so react Instagram embed.', 'start': 10577.175, 'duration': 15.425}, {'end': 10594.381, 'text': 'Oh, okay.', 'start': 10593.621, 'duration': 0.76}, {'end': 10599.783, 'text': 'Yeah This one right here.', 'start': 10598.162, 'duration': 1.621}, {'end': 10609.743, 'text': 'We need to install that into the project.', 'start': 10608.042, 'duration': 1.701}, {'end': 10611.303, 'text': 'All right.', 'start': 10610.803, 'duration': 0.5}], 'summary': 'Discussion about installing instagram embed into the project.', 'duration': 72.17, 'max_score': 10539.133, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM10539133.jpg'}, {'end': 10890.776, 'src': 'embed', 'start': 10861.576, 'weight': 2, 'content': [{'end': 10862.636, 'text': 'Exactly Yep.', 'start': 10861.576, 'duration': 1.06}, {'end': 10865.938, 'text': "So we're gonna use some flexbox rules, but you have to put the children.", 'start': 10862.656, 'duration': 3.282}, {'end': 10868.399, 'text': "So now we're wrapping all the posts into one child.", 'start': 10865.938, 'duration': 2.461}, {'end': 10872.98, 'text': "so it's on the left and then all of the in the Instagram embed on the right.", 'start': 10868.399, 'duration': 4.581}, {'end': 10880.283, 'text': 'and the way we do that now is I Basically go ahead and let me just check some rules real quick.', 'start': 10872.98, 'duration': 7.303}, {'end': 10884.124, 'text': 'so now I need to basically go and update some CSS.', 'start': 10880.283, 'duration': 3.841}, {'end': 10888.575, 'text': 'so I go to my app posts and And you see, right now I just have this right?', 'start': 10884.124, 'duration': 4.451}, {'end': 10890.776, 'text': "So right now we haven't got anything working as we want it.", 'start': 10888.615, 'duration': 2.161}], 'summary': 'Using flexbox rules to arrange instagram embeds, updating css for app posts.', 'duration': 29.2, 'max_score': 10861.576, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM10861576.jpg'}, {'end': 11040.277, 'src': 'embed', 'start': 10992.412, 'weight': 3, 'content': [{'end': 11000.918, 'text': "The one thing we did want is that we wanted it to be a case of, we wanted it to be a case of that when you're signed in- Wait, hold on.", 'start': 10992.412, 'duration': 8.506}, {'end': 11002.8, 'text': 'We forgot about putting comments.', 'start': 11001.319, 'duration': 1.481}, {'end': 11005.091, 'text': 'Oh, yeah.', 'start': 11004.531, 'duration': 0.56}, {'end': 11005.792, 'text': 'Oh, yeah.', 'start': 11005.412, 'duration': 0.38}, {'end': 11006.793, 'text': "Let's do that.", 'start': 11005.832, 'duration': 0.961}, {'end': 11007.773, 'text': 'We got to add comments.', 'start': 11006.813, 'duration': 0.96}, {'end': 11011.176, 'text': "Yeah So right now, let's go to our post.", 'start': 11008.954, 'duration': 2.222}, {'end': 11016.879, 'text': 'And yeah, so what we need to do now to get that working is we go over to our post.', 'start': 11012.156, 'duration': 4.723}, {'end': 11018.441, 'text': 'Oh, this is actually really key.', 'start': 11016.94, 'duration': 1.501}, {'end': 11022.984, 'text': 'Yamna says Firebase is a service that allows you to create apps without needing a server.', 'start': 11018.481, 'duration': 4.503}, {'end': 11026.206, 'text': 'Exactly Yeah, exactly that.', 'start': 11024.204, 'duration': 2.002}, {'end': 11030.089, 'text': "That's actually a really good way of putting it.", 'start': 11027.006, 'duration': 3.083}, {'end': 11032.19, 'text': "That's a really concise way of putting it, yeah.", 'start': 11030.109, 'duration': 2.081}, {'end': 11034.032, 'text': "And that's honestly exactly what it is.", 'start': 11032.23, 'duration': 1.802}, {'end': 11038.435, 'text': 'And it also allows you to do, yeah, so you create apps without needing a server.', 'start': 11034.172, 'duration': 4.263}, {'end': 11039.576, 'text': "Yeah, I couldn't have put it better.", 'start': 11038.455, 'duration': 1.121}, {'end': 11040.277, 'text': "That's really nice.", 'start': 11039.656, 'duration': 0.621}], 'summary': 'Discussion about adding comments and firebase allowing app creation without a server.', 'duration': 47.865, 'max_score': 10992.412, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM10992412.jpg'}], 'start': 10440.253, 'title': 'Implementing instagram styling and firebase integration', 'summary': 'Covers implementing styling, adding padding, and embedding instagram to enhance ui, along with updating instagram embed ui using flexbox rules and css. it also introduces firebase basics, showcasing real-time database usage for adding comments to a post.', 'chapters': [{'end': 10725.837, 'start': 10440.253, 'title': 'Implementing styling and embedding instagram', 'summary': 'Discusses implementing styling, adding padding to posts, embedding instagram, and installing react instagram embed, with a focus on enhancing the ui and user experience.', 'duration': 285.584, 'highlights': ['The project involves implementing styling, adding padding to posts, and embedding Instagram to enhance the user interface and experience.', 'The process includes installing React Instagram embed and following simple steps for import and integration into the project.', 'The discussion emphasizes the visual impact of adding padding to posts, resulting in a cleaner and sleeker UI.', 'The chapter also covers the quick addition of the Instagram embed, focusing on achieving a slick and visually appealing look for the project.']}, {'end': 11018.441, 'start': 10727.018, 'title': 'Instagram embed ui update', 'summary': 'Discusses updating the ui for an instagram embed and demonstrates the process of aligning the embed next to the app posts, using flexbox rules and css to create a responsive and aesthetically pleasing layout.', 'duration': 291.423, 'highlights': ['The process of aligning the Instagram embed next to the app posts using flexbox rules and CSS is demonstrated, resulting in a responsive and aesthetically pleasing layout. The chapter details the process of using flexbox rules and CSS to align the Instagram embed next to the app posts, creating a responsive and aesthetically pleasing layout.', 'The demonstration includes using flexbox rules to wrap all the posts into one child on the left and the Instagram embed on the right, resulting in a clean and responsive UI. The demonstration includes using flexbox rules to wrap all the posts into one child on the left and the Instagram embed on the right, resulting in a clean and responsive UI.', 'The chapter also covers the addition of comments to the posts, indicating a comprehensive approach to enhancing the user experience. The chapter also covers the addition of comments to the posts, indicating a comprehensive approach to enhancing the user experience.']}, {'end': 11385.094, 'start': 11018.481, 'title': 'Introduction to firebase and real-time database', 'summary': 'Discusses the basics of firebase, emphasizing its capability to allow app creation without a server, and demonstrates the use of firebase real-time database to add comments to a specific post, including the usage of useeffect and snapshot listener.', 'duration': 366.613, 'highlights': ['Firebase allows app creation without a server and offers additional plugins like machine learning. Firebase enables app development without server dependency, along with the provision of extra features such as machine learning.', 'Demonstrates the process of adding comments to a specific post using useEffect and state management. The tutorial illustrates the implementation of adding comments to a post by utilizing useEffect and state management to keep track of comments.', 'Explanation of the snapshot listener for real-time updates of comments on a specific post. The use of a snapshot listener is explained, enabling real-time updates of comments on a particular post.']}], 'duration': 944.841, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM10440253.jpg', 'highlights': ['The process includes installing React Instagram embed and following simple steps for import and integration into the project.', 'The project involves implementing styling, adding padding to posts, and embedding Instagram to enhance the user interface and experience.', 'The process of aligning the Instagram embed next to the app posts using flexbox rules and CSS is demonstrated, resulting in a responsive and aesthetically pleasing layout.', 'Firebase allows app creation without a server and offers additional plugins like machine learning.', 'Demonstrates the process of adding comments to a specific post using useEffect and state management.']}, {'end': 13342.885, 'segs': [{'end': 11820.594, 'src': 'embed', 'start': 11796.747, 'weight': 2, 'content': [{'end': 11803.109, 'text': "And right now what I'm saying is I'm mapping through each comment and I'm just popping out a P tag, and it's going to have.", 'start': 11796.747, 'duration': 6.362}, {'end': 11805.89, 'text': 'so this should actually be strong, because strong is the better one to use.', 'start': 11803.109, 'duration': 2.781}, {'end': 11806.53, 'text': 'Oops, strong.', 'start': 11805.93, 'duration': 0.6}, {'end': 11812.412, 'text': "And all we're doing here is we're getting the, do you remember the, the, the fields inside the DB was username and text.", 'start': 11807.07, 'duration': 5.342}, {'end': 11817.333, 'text': "Yeah, It should say the username in bold and then it'll have the text next to them.", 'start': 11812.792, 'duration': 4.541}, {'end': 11820.594, 'text': "but we're just mapping through everything and we're getting that comment and doing yeah.", 'start': 11817.333, 'duration': 3.261}], 'summary': 'Mapping through comments, displaying username in bold with text next to it.', 'duration': 23.847, 'max_score': 11796.747, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM11796747.jpg'}, {'end': 12002.823, 'src': 'embed', 'start': 11968.26, 'weight': 3, 'content': [{'end': 11969.641, 'text': 'And I need to pass in the user.', 'start': 11968.26, 'duration': 1.381}, {'end': 11971.102, 'text': 'So I pass the user through here.', 'start': 11969.661, 'duration': 1.441}, {'end': 11973.863, 'text': 'Okay? Yeah.', 'start': 11973.083, 'duration': 0.78}, {'end': 11977.566, 'text': "And now what we're doing is we're passing the signed in user.", 'start': 11974.864, 'duration': 2.702}, {'end': 11979.787, 'text': 'So we pass in the signed in user as well.', 'start': 11977.826, 'duration': 1.961}, {'end': 11986.371, 'text': 'Nice Because this is the username of the person who wrote the post and this is the user who signed in.', 'start': 11980.668, 'duration': 5.703}, {'end': 11988.539, 'text': 'Yeah Right.', 'start': 11987.152, 'duration': 1.387}, {'end': 11993.36, 'text': 'And now here, what I need to do is I say user dot display name to get their display name.', 'start': 11988.579, 'duration': 4.781}, {'end': 11996.441, 'text': 'Yeah Yeah.', 'start': 11995.581, 'duration': 0.86}, {'end': 12002.823, 'text': 'And then after that, what I do is I say set comment and then I just do like squiggly brackets.', 'start': 11997.422, 'duration': 5.401}], 'summary': 'Passing user and signed in user to obtain display name for setting comments.', 'duration': 34.563, 'max_score': 11968.26, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM11968260.jpg'}, {'end': 12649.741, 'src': 'embed', 'start': 12617.523, 'weight': 4, 'content': [{'end': 12618.923, 'text': "It'll redirect and it'll log in.", 'start': 12617.523, 'duration': 1.4}, {'end': 12621.884, 'text': 'So the next step is doing Firebase init.', 'start': 12618.983, 'duration': 2.901}, {'end': 12627.986, 'text': 'Right And here what we do is a nice CLI pops up.', 'start': 12624.545, 'duration': 3.441}, {'end': 12632.148, 'text': 'So we just need to go down with the arrow keys and press space on hosting.', 'start': 12628.006, 'duration': 4.142}, {'end': 12636.189, 'text': 'And this bit, guys, you have to pay really close attention to.', 'start': 12632.928, 'duration': 3.261}, {'end': 12638.37, 'text': 'So click on use an existing project.', 'start': 12636.249, 'duration': 2.121}, {'end': 12642.199, 'text': 'And go to Instagram clone.', 'start': 12640.818, 'duration': 1.381}, {'end': 12645.04, 'text': 'And here is the important part, guys.', 'start': 12643.379, 'duration': 1.661}, {'end': 12649.741, 'text': 'So this part, you have to type in build, right? This is a React step.', 'start': 12645.54, 'duration': 4.201}], 'summary': "Configure firebase for instagram clone project, selecting hosting and typing 'build' for react setup.", 'duration': 32.218, 'max_score': 12617.523, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM12617523.jpg'}, {'end': 13006.977, 'src': 'embed', 'start': 12981.084, 'weight': 0, 'content': [{'end': 12987.045, 'text': 'the one that we just prepared, and you see it says found 18 files and guys, it just deployed like it was that quick.', 'start': 12981.084, 'duration': 5.961}, {'end': 12994.847, 'text': "holy crap, i am, that's it all that hard work, and it's literally just been deployed.", 'start': 12987.045, 'duration': 7.802}, {'end': 12996.147, 'text': "so let's double check.", 'start': 12994.847, 'duration': 1.3}, {'end': 13000.148, 'text': "oh okay, so maybe that's strange.", 'start': 12996.147, 'duration': 4.001}, {'end': 13001.955, 'text': "that's the first time we've seen that, Okay.", 'start': 13000.148, 'duration': 1.807}, {'end': 13004.816, 'text': "So let's do, that means that we didn't do our build properly.", 'start': 13001.975, 'duration': 2.841}, {'end': 13006.977, 'text': "So let's go ahead and do NPM run build.", 'start': 13004.916, 'duration': 2.061}], 'summary': 'Deployed 18 files quickly, but build may not have been done properly.', 'duration': 25.893, 'max_score': 12981.084, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM12981084.jpg'}, {'end': 13124.863, 'src': 'embed', 'start': 13094.488, 'weight': 1, 'content': [{'end': 13096.248, 'text': 'awesome, all right.', 'start': 13094.488, 'duration': 1.76}, {'end': 13103.11, 'text': 'someone coding fountain says fabulous, nice, Right, so we just deployed the app.', 'start': 13096.248, 'duration': 6.862}, {'end': 13104.651, 'text': "Look, everyone's checking out.", 'start': 13103.41, 'duration': 1.241}, {'end': 13106.792, 'text': 'They say, wow, fantastic, nice.', 'start': 13104.671, 'duration': 2.121}, {'end': 13109.914, 'text': "I love seeing everyone's reactions when it comes through to this point.", 'start': 13107.232, 'duration': 2.682}, {'end': 13111.775, 'text': 'Nice, awesome.', 'start': 13110.734, 'duration': 1.041}, {'end': 13115.797, 'text': 'Yeah, you guys can feel free to just go on our website and play around with it.', 'start': 13112.696, 'duration': 3.101}, {'end': 13119.74, 'text': "Oh, yeah, that's cool to see their reactions.", 'start': 13117.498, 'duration': 2.242}, {'end': 13121, 'text': "That's actually awesome.", 'start': 13119.78, 'duration': 1.22}, {'end': 13124.863, 'text': "Yeah, and what's amazing, guys, is that that is literally.", 'start': 13122.021, 'duration': 2.842}], 'summary': 'Successful app deployment with positive user reactions.', 'duration': 30.375, 'max_score': 13094.488, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM13094488.jpg'}], 'start': 11385.674, 'title': 'Instagram app development', 'summary': 'Covers adding comments to instagram posts with usestate, useeffect, and db, implementing real-time comment posting and display with user authentication, and deploying the app to firebase, encountering issues, and receiving positive feedback.', 'chapters': [{'end': 11730.254, 'start': 11385.674, 'title': 'Adding comments to instagram post', 'summary': 'Discusses adding support for entering comments to an instagram post, including importing usestate, useeffect, and db, creating a form with input and button elements, and styling the comment box using flexbox in post.css.', 'duration': 344.58, 'highlights': ['Importing useState, useEffect, and DB The chapter covers importing useState, useEffect, and DB to ensure the code is not broken, with a focus on maintaining the functionality of the program.', 'Creating a form with input and button elements The process of creating a form with input and button elements is explained, including setting up a state to keep track of the individual comment and updating the state as the user types in.', "Styling the comment box using Flexbox in post.css The process of using Flexbox in post.css to style the comment box, including setting the width of the comment box, adjusting the display, and styling the input and button elements to resemble Instagram's layout."]}, {'end': 12204.919, 'start': 11730.274, 'title': 'Real-time comment posting and display', 'summary': 'Details the process of adding and displaying real-time comments on a web application, including mapping through comments, adding event listeners for posting comments, and implementing user authentication for comment posting and display.', 'duration': 474.645, 'highlights': ['The process of mapping through each comment and displaying it in a P tag is described, with a focus on formatting the username and text. The process of mapping through each comment and displaying it in a P tag is described, emphasizing the formatting of the username and text.', 'The addition of event listeners for posting comments and preventing the default action is explained, along with the process of adding comments to the database. The addition of event listeners for posting comments and preventing the default action is explained, along with the process of adding comments to the database.', "The implementation of user authentication for comment posting and display is detailed, including passing the signed-in user's username and display name. The implementation of user authentication for comment posting and display is detailed, including passing the signed-in user's username and display name."]}, {'end': 12839.573, 'start': 12206.82, 'title': 'Deploying instagram app to firebase', 'summary': 'Covers making the app header sticky and fixing overlapping elements, implementing user authentication, and deploying the instagram app to firebase, including the steps for firebase login, initialization, and building the app for production.', 'duration': 632.753, 'highlights': ['Implementing sticky header and fixing overlapping elements The chapter covers making the app header sticky and fixing overlapping elements, ensuring the header sticks to the top and resolving overlapping elements as users scroll.', 'Implementing user authentication The chapter discusses implementing user authentication, including showing comment boxes only when logged in and hiding them when logged out, as well as handling image uploads for logged-in users.', 'Deploying the Instagram app to Firebase The chapter details the process of deploying the Instagram app to Firebase, including steps for Firebase login, initialization, and building the app for production to ensure efficient bundling and lightweight production version.']}, {'end': 13342.885, 'start': 12840.773, 'title': 'Deploying firebase and app building', 'summary': 'Focuses on deploying a firebase app, running a firebase deploy, and encountering issues with the build folder, with the app being successfully deployed at the end, receiving positive feedback and discussing future project ideas.', 'duration': 502.112, 'highlights': ['Successfully deploying the Firebase app after encountering issues with the build folder, with the app being deployed quickly with 18 files found.', "Receiving positive feedback from users after deploying the app, with comments like 'fabulous', 'fantastic', and 'hot'.", 'Discussing the possibility of future project ideas, encouraging viewers to suggest ideas through Instagram videos and promoting a sale for the Profit with JavaScript course.', 'Engaging with the audience by encouraging them to play around with the deployed app and drop comments, emphasizing scalability and real-time functionality of the app.', 'Encountering issues with the build folder and needing to run NPM run build again to deploy the app successfully.']}], 'duration': 1957.211, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/f7T48W0cwXM/pics/f7T48W0cwXM11385674.jpg', 'highlights': ['Successfully deploying the Firebase app after encountering issues with the build folder, with the app being deployed quickly with 18 files found.', "Receiving positive feedback from users after deploying the app, with comments like 'fabulous', 'fantastic', and 'hot'.", 'The process of mapping through each comment and displaying it in a P tag is described, with a focus on formatting the username and text.', "The implementation of user authentication for comment posting and display is detailed, including passing the signed-in user's username and display name.", 'Deploying the Instagram app to Firebase, including steps for Firebase login, initialization, and building the app for production to ensure efficient bundling and lightweight production version.']}], 'highlights': ['The tutorial covers setting up firebase, designing instagram post components, customizing react components, integrating firebase functions, implementing file and image upload features, and deploying the app to firebase with real-time comment posting and display.', 'The live audience engagement is highlighted, with 318 people participating, and an emphasis on promoting audience interaction by encouraging likes, Instagram stories, and tagging the hosts, showcasing a strong community connection and fostering engagement.', 'The onSnapshot method acts as a powerful listener, providing automatic updates every time a document is added, modified, or deleted, enhancing real-time interaction with the database.', 'The implementation of a real-time listener in the web application results in quick and efficient post rendering on the screen, updating in real-time as new content is added.', 'The process of uploading images to Firebase storage is explained, including getting a reference to the photo and storing it.', 'The system can support a million users out of the box.', 'Successfully deploying the Firebase app after encountering issues with the build folder, with the app being deployed quickly with 18 files found.', "Receiving positive feedback from users after deploying the app, with comments like 'fabulous', 'fantastic', and 'hot'.", "Firebase's real-time Firestore database eliminates constant fetching, enhancing user experience", "Firebase's Cloud Functions, written in Node.js, enable scalability based on user activity", 'The process of adding spacing to components is explained, demonstrating the addition of a margin bottom of 45 pixels to the post container to create a gap between components.', 'The process of integrating Firebase functions, including updating user profile information, is explained.', 'The chapter demonstrates how to implement a login system using Firebase for frontend development.', 'The completion of Firebase user authentication, including sign up and sign in functionalities.', 'The chapter covers refactoring a modal and implementing a sign-in function.', 'The process of aligning the Instagram embed next to the app posts using flexbox rules and CSS is demonstrated, resulting in a responsive and aesthetically pleasing layout.', 'Demonstrates the process of adding comments to a specific post using useEffect and state management.']}