title
🔴Full Stack React and Firebase Tutorial - Build a Facebook Messenger Clone

description
In this FREE LIVE training, Qazi and Sonny will show you how simple it is to create a full stack, fully-featured messenger application using React, Firebase & Material-UI... 👇 This training covers the following: 👉 Building a React Messenger App 💻 👉 Deploying a React app with Firebase Hosting 🌐 👉 Server-less cloud functions to process each of the messages sent 🚀 👉 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 Enjoyed the video?! 😜 👇 Then why not join a course where you will learn MORE of this EPIC STUFF including React + Firebase AND 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-7-live-facebook-messenger-tutorial-sonny-qazi&utm_campaign=live-everyday&utm_term=warm #reactjs #facebook #tutorial #messenger Biz / Sponsorships 👉 https://www.cleverprogrammer.com/partnerships

detail
{'title': '🔴Full Stack React and Firebase Tutorial - Build a Facebook Messenger Clone', 'heatmap': [{'end': 4529.952, 'start': 4317.374, 'weight': 0.882}, {'end': 4735.42, 'start': 4629.681, 'weight': 0.937}, {'end': 5147.584, 'start': 4835.832, 'weight': 0.792}, {'end': 6699.69, 'start': 6587.263, 'weight': 0.775}, {'end': 7105.102, 'start': 6793.209, 'weight': 0.744}, {'end': 9162.334, 'start': 9055.068, 'weight': 0.846}], 'summary': 'A live session with 259 people demonstrates building a facebook messenger clone using react and firebase, covering state management, dynamic content rendering, real-time data sync, and user engagement to deploy the app.', 'chapters': [{'end': 1346.402, 'segs': [{'end': 34.922, 'src': 'embed', 'start': 0.089, 'weight': 1, 'content': [{'end': 3.552, 'text': 'video. we are going to be building this facebook messenger clone.', 'start': 0.089, 'duration': 3.463}, {'end': 5.894, 'text': "let's just jump straight into the demo of it.", 'start': 3.552, 'duration': 2.342}, {'end': 7.075, 'text': "so let's just go.", 'start': 5.894, 'duration': 1.181}, {'end': 9.978, 'text': 'yo sunny, what is going on?', 'start': 7.075, 'duration': 2.903}, {'end': 14.402, 'text': "my man i'll say that what's up, kazi?", 'start': 9.978, 'duration': 4.424}, {'end': 17.305, 'text': "what's up there?", 'start': 14.402, 'duration': 2.903}, {'end': 25.484, 'text': 'we go real time, nice Video.', 'start': 17.305, 'duration': 8.179}, {'end': 28.555, 'text': 'we are going to be building this Facebook Messenger clone.', 'start': 25.484, 'duration': 3.071}, {'end': 29.879, 'text': "Let's just jump straight in.", 'start': 28.575, 'duration': 1.304}, {'end': 32.941, 'text': 'Nice Okay, beautiful.', 'start': 30.859, 'duration': 2.082}, {'end': 34.922, 'text': 'So this is the demo of the app.', 'start': 33.041, 'duration': 1.881}], 'summary': 'Building a facebook messenger clone with real-time functionality demonstrated.', 'duration': 34.833, 'max_score': 0.089, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc89.jpg'}, {'end': 157.79, 'src': 'embed', 'start': 131.336, 'weight': 0, 'content': [{'end': 139.155, 'text': 'open the terminal first, nice, read and write and let me actually open the zsh one so you can get access.', 'start': 131.336, 'duration': 7.819}, {'end': 142.037, 'text': 'so try getting access of this one.', 'start': 139.155, 'duration': 2.882}, {'end': 146.16, 'text': 'okay, nice guys, we have 259 people live.', 'start': 142.037, 'duration': 4.123}, {'end': 147.001, 'text': 'that is amazing.', 'start': 146.16, 'duration': 0.841}, {'end': 148.042, 'text': 'thank you guys for being here.', 'start': 147.001, 'duration': 1.041}, {'end': 148.602, 'text': 'stick around.', 'start': 148.042, 'duration': 0.56}, {'end': 152.385, 'text': "we're going to be building this app facebook messenger, clone together,", 'start': 148.602, 'duration': 3.783}, {'end': 157.79, 'text': 'and we will be taking any questions you have along the way and answering them for you.', 'start': 152.385, 'duration': 5.405}], 'summary': '259 people live, building facebook messenger clone, taking questions.', 'duration': 26.454, 'max_score': 131.336, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc131336.jpg'}, {'end': 325.194, 'src': 'embed', 'start': 300.328, 'weight': 2, 'content': [{'end': 306.253, 'text': "That's so much more complicated than the way we're going to show you guys because Firebase is fire for a reason.", 'start': 300.328, 'duration': 5.925}, {'end': 312.458, 'text': "I mean, this thing is, it makes it easier and you don't have to deal with a socket IO and all that other complexity.", 'start': 306.353, 'duration': 6.105}, {'end': 317.382, 'text': 'Exactly And you guys will see just how simple is when we, when we get building.', 'start': 313.739, 'duration': 3.643}, {'end': 318.287, 'text': 'All right.', 'start': 318.047, 'duration': 0.24}, {'end': 321.951, 'text': "So let's go Facebook messenger clone.", 'start': 318.307, 'duration': 3.644}, {'end': 325.194, 'text': 'Nice Okay.', 'start': 323.973, 'duration': 1.221}], 'summary': 'Firebase simplifies development and eliminates complexity, making it easier to build a facebook messenger clone.', 'duration': 24.866, 'max_score': 300.328, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc300328.jpg'}, {'end': 602.763, 'src': 'embed', 'start': 578.15, 'weight': 3, 'content': [{'end': 584.575, 'text': 'so here we have send message and then we can save the file and we can go and check out the app and see how that looks.', 'start': 578.15, 'duration': 6.425}, {'end': 588.906, 'text': 'And you just want to carry on doing these baby steps guys.', 'start': 586.542, 'duration': 2.364}, {'end': 593.973, 'text': 'Like you never want to overcomplicate it or sort of just take small little chunks every time you do this.', 'start': 588.946, 'duration': 5.027}, {'end': 596.296, 'text': "So let's open up the app.", 'start': 594.594, 'duration': 1.702}, {'end': 600.621, 'text': 'our app here.', 'start': 600.04, 'duration': 0.581}, {'end': 602.763, 'text': 'Yup Nice.', 'start': 600.641, 'duration': 2.122}], 'summary': 'The speaker discusses sending a message, saving a file, and opening an app to take small steps in app development.', 'duration': 24.613, 'max_score': 578.15, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc578150.jpg'}, {'end': 780.874, 'src': 'embed', 'start': 753.599, 'weight': 4, 'content': [{'end': 762.126, 'text': 'So, and what this is going to allow us to do is going to allow us to remember everything you type inside of that input field and then use it when we actually sort of trigger the send message function.', 'start': 753.599, 'duration': 8.527}, {'end': 766.29, 'text': 'So the first thing we need to do is click on that we need to type in the value.', 'start': 762.186, 'duration': 4.104}, {'end': 771.342, 'text': 'And we need to map our state to the input field itself.', 'start': 767.117, 'duration': 4.225}, {'end': 772.884, 'text': "So we've got value equals input.", 'start': 771.402, 'duration': 1.482}, {'end': 774.947, 'text': 'And you can see here now.', 'start': 773.465, 'duration': 1.482}, {'end': 780.874, 'text': "if we were to save this and we run this, you're going to pretty much notice that you can type in, but there's nothing.", 'start': 774.947, 'duration': 5.927}], 'summary': 'Enabling input field to store and use typed data for send message function.', 'duration': 27.275, 'max_score': 753.599, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc753599.jpg'}], 'start': 0.089, 'title': 'Building facebook messenger clone', 'summary': 'Covers building a facebook messenger clone in a live session with a community of 259 people, setting up with firebase, setting up a react project, and connecting input field to state, emphasizing the use of technologies such as react, firebase, and live share, with a focus on small chunks of development and user feedback.', 'chapters': [{'end': 184.344, 'start': 0.089, 'title': 'Building facebook messenger clone', 'summary': 'Demonstrates building a facebook messenger clone in a live session with a community of 259 people, emphasizing the importance of maintaining a positive and clean environment, and the use of technologies such as react and live share.', 'duration': 184.255, 'highlights': ['Emphasizing the importance of maintaining a positive and clean environment The speaker stresses the need for a positive and clean community environment to maintain a positive experience for the 259 live viewers.', 'Community of 259 people The live session involves a community of 259 people, showcasing the engagement and interest in the topic.', 'Demonstrating building a Facebook Messenger clone in a live session The chapter features a live demonstration of building a Facebook Messenger clone, providing a hands-on learning experience.', 'Use of technologies such as React and live share The speaker plans to utilize technologies like React and live share for building the Facebook Messenger clone, demonstrating modern development practices.']}, {'end': 425.554, 'start': 184.524, 'title': 'Setting up facebook messenger clone with firebase', 'summary': 'Covers the process of setting up a facebook messenger clone using firebase, including creating a react project, setting up firebase services, and highlighting the simplicity and power of firebase for real-time database management.', 'duration': 241.03, 'highlights': ['The chapter covers the process of setting up a Facebook Messenger clone using Firebase, including creating a React project, setting up Firebase services, and highlighting the simplicity and power of Firebase for real-time database management.', "The command 'mpx create react app' is used to start the React project, simplifying the setup process.", 'Firebase, a service provided by Google, is highlighted for its capabilities in hosting websites, providing a database, and enabling machine learning, simplifying the back-end setup for the app.', 'The chapter emphasizes the beginner-friendly nature of the app and the simplicity of using Firebase for real-time database management.', 'The simplicity and power of Firebase are underscored, particularly in comparison to more complex alternatives like node and socket for real-time database management.']}, {'end': 740.227, 'start': 425.654, 'title': 'Setting up react project and basic cleanup', 'summary': "Discusses setting up a react project, cleaning up unnecessary files, and introducing state using usestate in react, with a focus on baby steps and small chunks of development, along with user feedback on the app's progress.", 'duration': 314.573, 'highlights': ["The chapter discusses setting up a React project, cleaning up unnecessary files, and introducing state using useState in React. The chapter includes the process of setting up a React project by running 'npm start' in the terminal, cleaning up unnecessary files in VS Code, and introducing state using useState in React.", 'The emphasis is on baby steps and small chunks of development. The approach recommended in the chapter is to take small, manageable steps in development without overcomplicating the process.', "User feedback on the app's progress is also mentioned. The users' positive feedback on the app's progress is highlighted, indicating high user engagement and satisfaction with the app's development."]}, {'end': 1346.402, 'start': 740.427, 'title': 'Connecting input field to state', 'summary': 'Covers the process of connecting the input state to the input field, updating the state as typing occurs, and displaying the messages, emphasizing the use of onchange and onclick events, as well as the spread operator, with a focus on teaching firebase and react.', 'duration': 605.975, 'highlights': ['The process of connecting the input state to the input field is crucial for capturing and using the typed input, allowing for the remembering of input values for future use. This step involves mapping the state to the input field, using onChange event to update the state as typing occurs, and setting the input value to the event.target.value for capturing the exact input.', 'Emphasizing the use of onChange and onClick events and the spread operator is essential for managing state updates and appending input values to the array of messages. The usage of onChange event to update the input state as typing occurs, onClick event to trigger the send message function, and the spread operator to append the input to the end of the array of messages.', 'The focus on teaching Firebase and React is evident in the decision to go fast through the CSS portion of the app and utilize copy-pasting to maintain the pace of the tutorial. The emphasis on teaching Firebase and React is reflected in the decision to expedite the CSS portion and resort to copy-pasting, ensuring a focus on explaining the React and Firebase parts.']}], 'duration': 1346.313, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc89.jpg', 'highlights': ['Community of 259 people The live session involves a community of 259 people, showcasing the engagement and interest in the topic.', 'Demonstrating building a Facebook Messenger clone in a live session The chapter features a live demonstration of building a Facebook Messenger clone, providing a hands-on learning experience.', 'The chapter covers the process of setting up a Facebook Messenger clone using Firebase, including creating a React project, setting up Firebase services, and highlighting the simplicity and power of Firebase for real-time database management.', 'The emphasis is on baby steps and small chunks of development. The approach recommended in the chapter is to take small, manageable steps in development without overcomplicating the process.', 'The process of connecting the input state to the input field is crucial for capturing and using the typed input, allowing for the remembering of input values for future use.']}, {'end': 2658.224, 'segs': [{'end': 1400.316, 'src': 'embed', 'start': 1369.011, 'weight': 0, 'content': [{'end': 1372.234, 'text': 'It was so confusing to me to understand how states worked.', 'start': 1369.011, 'duration': 3.223}, {'end': 1375.258, 'text': 'I was like, what is going on? This thing is mad confusing.', 'start': 1372.254, 'duration': 3.004}, {'end': 1384.355, 'text': 'Yeah And a lot of people get caught up on sort of they tend to want to use do something like this, right, where they say input equals like ABC.', 'start': 1376.03, 'duration': 8.325}, {'end': 1387.937, 'text': "You can't actually change the value like this.", 'start': 1384.835, 'duration': 3.102}, {'end': 1390.979, 'text': 'You have to use the set input or set messages.', 'start': 1387.957, 'duration': 3.022}, {'end': 1392.36, 'text': "So that's just something to remember.", 'start': 1391.159, 'duration': 1.201}, {'end': 1394.801, 'text': 'Otherwise, you will run into issues if you do things like that.', 'start': 1392.42, 'duration': 2.381}, {'end': 1400.316, 'text': 'Yeah, okay, so the next part is obviously we have all the messages inside of the state.', 'start': 1395.121, 'duration': 5.195}], 'summary': 'Explanation of state usage and its impact on value changes.', 'duration': 31.305, 'max_score': 1369.011, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc1369011.jpg'}, {'end': 1513.042, 'src': 'embed', 'start': 1487.313, 'weight': 1, 'content': [{'end': 1493.316, 'text': "it's going to loop through that array that we saw earlier, that the one that was causing was populating as he hits this array right here,", 'start': 1487.313, 'duration': 6.003}, {'end': 1496.377, 'text': "and it's going to loop through and it's just going to display each of those messages.", 'start': 1493.316, 'duration': 3.061}, {'end': 1499.752, 'text': 'Exactly So map is like a fancy way to loop through.', 'start': 1497.19, 'duration': 2.562}, {'end': 1503.395, 'text': 'Instead of writing like a for loop and all that, guys, you guys should start using map.', 'start': 1499.792, 'duration': 3.603}, {'end': 1504.336, 'text': "It's super clean.", 'start': 1503.455, 'duration': 0.881}, {'end': 1510.34, 'text': 'Yeah And the difference between a map and a for each is that a map returns something, which is what we want to do here.', 'start': 1505.196, 'duration': 5.144}, {'end': 1513.042, 'text': "We're trying to return some HTML elements.", 'start': 1510.36, 'duration': 2.682}], 'summary': 'Using map is a clean and efficient way to loop through arrays and return html elements.', 'duration': 25.729, 'max_score': 1487.313, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc1487313.jpg'}, {'end': 1983.974, 'src': 'embed', 'start': 1956.045, 'weight': 2, 'content': [{'end': 1958.327, 'text': "you can see it's already changed the look and feel of the button.", 'start': 1956.045, 'duration': 2.282}, {'end': 1962.83, 'text': "you have to send message right when i go over it, it's like looks juicy.", 'start': 1958.327, 'duration': 4.503}, {'end': 1964.732, 'text': 'Look at that.', 'start': 1963.55, 'duration': 1.182}, {'end': 1968.336, 'text': "There's a really nice variant of this and it's called Outlined.", 'start': 1964.772, 'duration': 3.564}, {'end': 1972.201, 'text': "If you're wondering how I knew that it was variant and how I knew it was outlined,", 'start': 1968.396, 'duration': 3.805}, {'end': 1978.448, 'text': "it's because in the Material UI docs you have a bunch of documentation that can tell you.", 'start': 1972.201, 'duration': 6.247}, {'end': 1983.974, 'text': 'In here, if you go to Components, And then button, so inputs button.', 'start': 1978.568, 'duration': 5.406}], 'summary': 'Material ui docs offer documentation on button variants and styles.', 'duration': 27.929, 'max_score': 1956.045, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc1956045.jpg'}, {'end': 2337.04, 'src': 'embed', 'start': 2310.544, 'weight': 3, 'content': [{'end': 2315.307, 'text': 'And components are basically these reusable things, which we can pretty much rewrite at once.', 'start': 2310.544, 'duration': 4.763}, {'end': 2321.391, 'text': "So we're gonna write a message component here, and then you can basically parse something called props.", 'start': 2315.708, 'duration': 5.683}, {'end': 2328.356, 'text': 'So it stands for properties and basically you can have a bunch of messages, which is one component reused several times,', 'start': 2321.431, 'duration': 6.925}, {'end': 2330.738, 'text': 'and we can change the message contents through something called props.', 'start': 2328.356, 'duration': 2.382}, {'end': 2335.059, 'text': "So what we're going to do here is, Kazi, I just want to create a new file.", 'start': 2331.258, 'duration': 3.801}, {'end': 2337.04, 'text': "That's it.", 'start': 2335.079, 'duration': 1.961}], 'summary': 'Components allow for reuse of message content via props.', 'duration': 26.496, 'max_score': 2310.544, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc2310544.jpg'}], 'start': 1346.402, 'title': 'React application development', 'summary': 'Delves into using state hook, jsx, es6 functions, material ui, react components, and props to enhance a react application, addressing common confusion and emphasizing dynamic content rendering, user interaction, styling, and improved user experience.', 'chapters': [{'end': 1409.902, 'start': 1346.402, 'title': 'Using state hook in react', 'summary': "Discusses the usage of the state hook in react, emphasizing the importance of using 'set' methods to modify state values and highlighting the common confusion surrounding state management.", 'duration': 63.5, 'highlights': ["The importance of using 'set' methods to modify state values is emphasized, as attempting to directly change the state value can lead to issues.", 'The confusion surrounding state management in React is highlighted, with the speaker acknowledging that it was initially difficult for them to understand how states worked.', 'The chapter discusses the presence of a list of messages in the state, indicating a practical example of state usage in React.']}, {'end': 1831.381, 'start': 1409.902, 'title': 'Introduction to jsx and es6 functions', 'summary': 'Introduces jsx, demonstrates the use of es6 functions such as map and explains the prevent default method to disable form refresh, with the focus on enabling dynamic content rendering and user interaction in a react application.', 'duration': 421.479, 'highlights': ['The chapter introduces JSX, a syntax extension for JavaScript, enabling the embedding of HTML and JavaScript for dynamic content rendering in React applications. JSX allows embedding HTML and JavaScript, facilitating dynamic content rendering.', 'Demonstration of the use of the ES6 map function to iterate through an array and render dynamic content, providing a cleaner alternative to traditional for loops. The ES6 map function is presented as a cleaner alternative to traditional for loops for iterating through an array and rendering dynamic content.', 'Explanation of the prevent default method to disable form refresh upon submission, enhancing user interaction and dynamic rendering in React applications. The prevent default method is explained as a means to disable form refresh upon submission, enhancing user interaction and dynamic rendering in React applications.']}, {'end': 2287.131, 'start': 1831.661, 'title': 'Adding material ui front end', 'summary': 'Discusses adding material ui to the project, utilizing its features like styling buttons and form control, and improving user experience by integrating disabled input functionality and creating a sleek form.', 'duration': 455.47, 'highlights': ["Styling Buttons with Material UI The process of styling buttons with Material UI is detailed, including changing the button's look and feel, utilizing variants and colors, and achieving a clean and appealing design.", 'Improving User Experience with Disabled Input Functionality The implementation of disabled input functionality to enhance user experience is explained, preventing the addition of empty strings to the array and ensuring a smoother interaction with the form.', 'Integrating Form Control with Material UI The integration of Form Control with Material UI is illustrated, involving the replacement of existing input elements, simplifying attributes, and achieving a visually appealing and functional form.']}, {'end': 2658.224, 'start': 2287.851, 'title': 'React components and props', 'summary': 'Discusses creating a message component using react components and props, demonstrating the use of es7 snippets for component creation, and importing and rendering the message component in app.js to display the message content, improving the overall appearance and functionality of the application.', 'duration': 370.373, 'highlights': ['Creating a message component using React components and props The chapter focuses on creating a message component in React, allowing for reusable components and the ability to change message contents through props.', 'Demonstrating the use of ES7 snippets for component creation ES7 snippets are showcased as a powerful tool for easily creating React components, enhancing development efficiency and reducing the need to manually write component syntax.', 'Importing and rendering the message component in app.js to display the message content The process of importing and rendering the message component in app.js is explained, showcasing the integration of the message component to enhance the appearance and functionality of the application.']}], 'duration': 1311.822, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc1346402.jpg', 'highlights': ["The importance of using 'set' methods to modify state values is emphasized, as attempting to directly change the state value can lead to issues.", 'Demonstration of the use of the ES6 map function to iterate through an array and render dynamic content, providing a cleaner alternative to traditional for loops.', "Styling Buttons with Material UI The process of styling buttons with Material UI is detailed, including changing the button's look and feel, utilizing variants and colors, and achieving a clean and appealing design.", 'Creating a message component using React components and props The chapter focuses on creating a message component in React, allowing for reusable components and the ability to change message contents through props.']}, {'end': 4167.067, 'segs': [{'end': 2750.046, 'src': 'embed', 'start': 2720.681, 'weight': 7, 'content': [{'end': 2724.784, 'text': "We're using a hook to set up a piece of state, so useState.", 'start': 2720.681, 'duration': 4.103}, {'end': 2731.047, 'text': "Initially, it's going to be a blank string because we're not going to have any user that starts off when the app's loaded.", 'start': 2726.204, 'duration': 4.843}, {'end': 2736.29, 'text': "Then what we're going to do is we can actually get rid of our console logs here to make life a little easier.", 'start': 2732.448, 'duration': 3.842}, {'end': 2743.361, 'text': "I do recommend that if you do do console logs, clean up afterwards so that way it doesn't crowd the console.", 'start': 2737.595, 'duration': 5.766}, {'end': 2745.723, 'text': "So that way when you do need to use them, it doesn't get too crazy.", 'start': 2743.381, 'duration': 2.342}, {'end': 2750.046, 'text': "The next thing we're going to do is we're going to use another hook.", 'start': 2747.444, 'duration': 2.602}], 'summary': 'Using usestate hook to set up initial state as a blank string and managing console logs for cleaner code.', 'duration': 29.365, 'max_score': 2720.681, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc2720681.jpg'}, {'end': 2781.98, 'src': 'embed', 'start': 2756.15, 'weight': 4, 'content': [{'end': 2760.953, 'text': 'And useEffect allows us to run a piece of code once when the component loads.', 'start': 2756.15, 'duration': 4.803}, {'end': 2763.054, 'text': "So in our case, it's the app component.", 'start': 2760.973, 'duration': 2.081}, {'end': 2764.515, 'text': "So what we're going to do is we're going to say useEffect.", 'start': 2763.134, 'duration': 1.381}, {'end': 2765.136, 'text': 'One quick question.', 'start': 2764.535, 'duration': 0.601}, {'end': 2775.592, 'text': "Ali asks, why didn't you use AJAX? Okay, so Ajax is pretty much, so JavaScript's a very fast evolving language.", 'start': 2765.976, 'duration': 9.616}, {'end': 2781.98, 'text': 'So Ajax was first brought into play when they needed to do something called asynchronous JavaScript.', 'start': 2775.992, 'duration': 5.988}], 'summary': 'Useeffect runs code once on component load.', 'duration': 25.83, 'max_score': 2756.15, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc2756150.jpg'}, {'end': 2849.65, 'src': 'embed', 'start': 2819.086, 'weight': 5, 'content': [{'end': 2825.191, 'text': "that's why we have all these sort of things that we're using right now, because this allows you to build scalable apps, yeah,", 'start': 2819.086, 'duration': 6.105}, {'end': 2827.132, 'text': 'without dealing with the limitations.', 'start': 2825.191, 'duration': 1.941}, {'end': 2829.173, 'text': "so overall, it's just simple.", 'start': 2827.132, 'duration': 2.041}, {'end': 2833.737, 'text': "it's much simpler to do it with react than to do it with ajax.", 'start': 2829.173, 'duration': 4.564}, {'end': 2836.238, 'text': 'so if you have to choose between the two uh, two, just choose react.', 'start': 2833.737, 'duration': 2.501}, {'end': 2840.845, 'text': 'A second important question I think we have by Alexandros.', 'start': 2837.44, 'duration': 3.405}, {'end': 2842.046, 'text': 'Thanks for this question.', 'start': 2841.205, 'duration': 0.841}, {'end': 2849.65, 'text': "And he says, what is the difference between use effect and use state? So that's a really good question, Alexandros.", 'start': 2842.107, 'duration': 7.543}], 'summary': "Using react allows for building scalable apps without limitations, and it's simpler than using ajax.", 'duration': 30.564, 'max_score': 2819.086, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc2819086.jpg'}, {'end': 2885.174, 'src': 'embed', 'start': 2859.66, 'weight': 3, 'content': [{'end': 2868.129, 'text': "So every time you refresh the page, the state disappears, right? So it's essentially the way you set up a variable inside of React.", 'start': 2859.66, 'duration': 8.469}, {'end': 2871.05, 'text': 'Okay, so this is a simplest way to put it.', 'start': 2868.889, 'duration': 2.161}, {'end': 2873.01, 'text': 'as you state is just setting a variable.', 'start': 2871.05, 'duration': 1.96}, {'end': 2875.451, 'text': 'so like this is actually key for me to like.', 'start': 2873.01, 'duration': 2.441}, {'end': 2876.772, 'text': 'this is awesome to know.', 'start': 2875.451, 'duration': 1.321}, {'end': 2880.593, 'text': 'so you state is basically a Variable in react.', 'start': 2876.772, 'duration': 3.821}, {'end': 2885.174, 'text': "That's how you set up variable like that makes it so stupid, simple.", 'start': 2880.853, 'duration': 4.321}], 'summary': "In react, 'state' is equivalent to setting up a variable, making it simple.", 'duration': 25.514, 'max_score': 2859.66, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc2859660.jpg'}, {'end': 3389.578, 'src': 'embed', 'start': 3363.465, 'weight': 0, 'content': [{'end': 3367.686, 'text': 'So what we can do now is messages, we actually need to change the structure a little bit now.', 'start': 3363.465, 'duration': 4.221}, {'end': 3371.088, 'text': 'So each of the messages typically just is a piece of text.', 'start': 3367.787, 'duration': 3.301}, {'end': 3375.87, 'text': 'but we actually want these to be objects instead now, so that way they can be.', 'start': 3371.627, 'duration': 4.243}, {'end': 3380.453, 'text': 'they can have a user and they can also have a um and a piece of text.', 'start': 3375.87, 'duration': 4.583}, {'end': 3386.516, 'text': "so if let's just change this structure a little bit, so, rather than having flat um, a flat structure,", 'start': 3380.453, 'duration': 6.063}, {'end': 3389.578, 'text': "we're going to have objects or several objects inside of here.", 'start': 3386.516, 'duration': 3.062}], 'summary': 'Restructuring messages to objects for user and text association.', 'duration': 26.113, 'max_score': 3363.465, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc3363465.jpg'}, {'end': 3680.182, 'src': 'embed', 'start': 3652.236, 'weight': 1, 'content': [{'end': 3655.198, 'text': 'So now our messages, guys, are not just like a flat text.', 'start': 3652.236, 'duration': 2.962}, {'end': 3660.221, 'text': "they are objects, and so we're pushing an object now every single time instead of just a string.", 'start': 3655.198, 'duration': 5.023}, {'end': 3662.592, 'text': 'Exactly that, yeah.', 'start': 3661.408, 'duration': 1.184}, {'end': 3663.715, 'text': 'So we have.', 'start': 3663.134, 'duration': 0.581}, {'end': 3668.309, 'text': "we keep all the current messages and then we're saying also append this object right?", 'start': 3663.715, 'duration': 4.594}, {'end': 3675.419, 'text': 'And now what should happen is it should say when we save this and we run it now, it should be working as it was before.', 'start': 3669.134, 'duration': 6.285}, {'end': 3677.24, 'text': "Okay, so let's try Kazi.", 'start': 3675.479, 'duration': 1.761}, {'end': 3680.182, 'text': 'Yo, and oh, nice.', 'start': 3678.401, 'duration': 1.781}], 'summary': 'Messages are now objects, not just flat text. objects are being pushed every single time instead of a string.', 'duration': 27.946, 'max_score': 3652.236, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc3652236.jpg'}, {'end': 3746.444, 'src': 'embed', 'start': 3717.629, 'weight': 2, 'content': [{'end': 3720.451, 'text': "Okay, let's style the messages first, I think.", 'start': 3717.629, 'duration': 2.822}, {'end': 3727.081, 'text': 'Okay, so what I like to use is, in this case, we can do it two ways.', 'start': 3721.533, 'duration': 5.548}, {'end': 3734.011, 'text': 'We can either use Material UI to just give it a card design, or we can actually go ahead and make it look like a bit of a message.', 'start': 3727.121, 'duration': 6.89}, {'end': 3737.136, 'text': "So let's have a look at how we do that.", 'start': 3734.312, 'duration': 2.824}, {'end': 3742.54, 'text': "Let's use a bunch of things that we have in Material UI.", 'start': 3738.897, 'duration': 3.643}, {'end': 3746.444, 'text': "So here I'm just going to copy a little snippet that we had.", 'start': 3743.141, 'duration': 3.303}], 'summary': 'Styling messages using material ui, exploring two design options.', 'duration': 28.815, 'max_score': 3717.629, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc3717629.jpg'}, {'end': 4004.504, 'src': 'embed', 'start': 3977.154, 'weight': 6, 'content': [{'end': 3983.078, 'text': 'And if you look over here, you can see that react jobs are just demolishing angular jobs.', 'start': 3977.154, 'duration': 5.924}, {'end': 3988.022, 'text': 'And angular jobs are actually steeply going down on a downward trend.', 'start': 3983.258, 'duration': 4.764}, {'end': 3992.305, 'text': "So if you're learning right now, and you want to decide react is the way to go.", 'start': 3988.382, 'duration': 3.923}, {'end': 3996.176, 'text': "Exactly That's actually a really good demonstration of that.", 'start': 3993.573, 'duration': 2.603}, {'end': 4004.504, 'text': "So you can see, especially this year, guys, there's been a huge separation in terms of React popularity versus Angular popularity.", 'start': 3996.456, 'duration': 8.048}], 'summary': 'React jobs surpass angular jobs, showing a steep downward trend for angular.', 'duration': 27.35, 'max_score': 3977.154, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc3977154.jpg'}], 'start': 2658.924, 'title': 'Implementing user input prompt', 'summary': "Covers implementing a user input prompt, setting up state using usestate, executing code with useeffect, and highlights react's benefits over ajax. it also explains dynamic updating of variables, usage of useeffect, state and set state functions, restructuring message data, and updating message structure with material ui in react.", 'chapters': [{'end': 2926.799, 'start': 2658.924, 'title': 'Implementing user input prompt', 'summary': 'Discusses implementing a user input prompt, setting up state using usestate and executing code based on a condition using useeffect, while emphasizing the benefits of using react over ajax.', 'duration': 267.875, 'highlights': ['The chapter discusses implementing a user input prompt, setting up state using useState, and executing code based on a condition using useEffect.', 'Emphasizes the benefits of using React over AJAX for building scalable apps in a maintainable, scalable way.', 'Explains the fundamental concepts of useState and useEffect hooks and their significance in React development.']}, {'end': 3289.137, 'start': 2927.359, 'title': 'React state and useeffect', 'summary': 'Explains the dynamic updating of variables in react, demonstrates the use of useeffect to run code based on conditions and dependencies, and showcases the use of state and set state functions to handle user input and update the ui.', 'duration': 361.778, 'highlights': ["The set input variable dynamically updates without page refresh as the user types, demonstrating the dynamic nature of React variables. The variable 'input' in React dynamically updates without page refresh, showcasing the dynamic nature of React variables.", 'The use effect function is used to run code based on conditions and dependencies, with the option to run the code once or on specific conditions. The use effect function in React is utilized to run code based on conditions and dependencies, with the option to specify running the code once or on specific conditions.', 'The use of state and set state functions in React allows for handling user input and updating the UI without directly manipulating variables. State and set state functions in React enable handling user input and updating the UI without directly manipulating variables.']}, {'end': 3496.334, 'start': 3289.137, 'title': 'Restructuring message data', 'summary': 'Discusses restructuring message data from a flat structure to objects with user and text properties, and the importance of using usestate and useeffect in react. material ui is preferred over bootstrap for its modern and cutting-edge design.', 'duration': 207.197, 'highlights': ['The importance of useState and useEffect in React is emphasized, with the statement that understanding these two concepts covers 95-100% of React functionality.', 'The restructuring of message data from flat strings to objects with user and text properties is explained, with the example of creating objects for Sonny and Kazi with respective messages.', 'The rationale for using Material UI over Bootstrap is explained, highlighting its modern and cutting-edge design, and its alignment with current design trends.']}, {'end': 4167.067, 'start': 3496.815, 'title': 'Updating message structure and styling', 'summary': "Discusses updating the message structure to an object, modifying the app to accommodate the new structure, and styling the messages using material ui. it also includes a comparison between react and angular, emphasizing react's popularity and lightweight nature.", 'duration': 670.252, 'highlights': ['The messages are now objects instead of strings, and the app needs to be updated to handle this new structure. The chapter discusses the transition of messages from strings to objects, requiring modifications in the app to properly handle the new structure.', "React's popularity and lightweight nature are emphasized, with a comparison to Angular's complexity and declining job market demand. The conversation compares React's popularity and demand in the job market to Angular, highlighting React's lightweight nature and increasing demand.", 'The decision to style the messages using Material UI and the process of implementing the styling through card elements and CSS are discussed. The chapter explores the decision to style messages using Material UI, detailing the implementation of card elements and CSS for styling the messages.']}], 'duration': 1508.143, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc2658924.jpg', 'highlights': ['The restructuring of message data from flat strings to objects with user and text properties is explained, with the example of creating objects for Sonny and Kazi with respective messages.', 'The chapter discusses the transition of messages from strings to objects, requiring modifications in the app to properly handle the new structure.', 'The decision to style the messages using Material UI and the process of implementing the styling through card elements and CSS are discussed.', 'The use of state and set state functions in React allows for handling user input and updating the UI without directly manipulating variables.', 'The use effect function in React is utilized to run code based on conditions and dependencies, with the option to specify running the code once or on specific conditions.', 'Emphasizes the benefits of using React over AJAX for building scalable apps in a maintainable, scalable way.', "React's popularity and lightweight nature are emphasized, with a comparison to Angular's complexity and declining job market demand.", 'The chapter discusses implementing a user input prompt, setting up state using useState, and executing code based on a condition using useEffect.']}, {'end': 4846.474, 'segs': [{'end': 4194.127, 'src': 'embed', 'start': 4168.988, 'weight': 0, 'content': [{'end': 4176.294, 'text': "Perfect So if we just save message right now, I've added a little bit of styling to it.", 'start': 4168.988, 'duration': 7.306}, {'end': 4180.777, 'text': 'And the bits of styling that I added was pretty much a little padding around it.', 'start': 4177.073, 'duration': 3.704}, {'end': 4188.803, 'text': 'So in message.css, I added some tiny padding, and I added a width, which basically just fits as much as we need to.', 'start': 4181.277, 'duration': 7.526}, {'end': 4194.127, 'text': "So you can see now, it's only going to use as much width as it needs to, right? Yeah, I see it right there.", 'start': 4188.823, 'duration': 5.304}], 'summary': 'Added padding and width to message.css for a better fit.', 'duration': 25.139, 'max_score': 4168.988, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc4168988.jpg'}, {'end': 4529.952, 'src': 'heatmap', 'start': 4317.374, 'weight': 0.882, 'content': [{'end': 4326.782, 'text': 'What we can do now is instead of passing in a separate things, what I like to do at this point is actually pass the message as an overall object.', 'start': 4317.374, 'duration': 9.408}, {'end': 4329.204, 'text': 'We pass the entire message as an object.', 'start': 4327.102, 'duration': 2.102}, {'end': 4334.288, 'text': "We simply pass the username, not as the message username, but the person who's logged in.", 'start': 4330.164, 'duration': 4.124}, {'end': 4338.151, 'text': "right?. So the person who's logged in and then we have the message.", 'start': 4335.767, 'duration': 2.384}, {'end': 4344.081, 'text': "because, remember, a message can be have a user which isn't the user who's logged in.", 'start': 4338.151, 'duration': 5.93}, {'end': 4347.246, 'text': "So it's kind of, you should separate these two things, right? Yeah.", 'start': 4344.121, 'duration': 3.125}, {'end': 4352.429, 'text': "So now if we go inside of our message component, the structure's slightly changed.", 'start': 4348.246, 'duration': 4.183}, {'end': 4360.734, 'text': "So if we can actually do something called ES6 destructuring here and you can see it's actually broken the app because we've changed the structure of our props.", 'start': 4352.989, 'duration': 7.745}, {'end': 4363.095, 'text': 'So inside on line five.', 'start': 4361.514, 'duration': 1.581}, {'end': 4370.24, 'text': 'now what we can do is we can destructure our props and we can say we just now pass in a message and we pass in a username, right?', 'start': 4363.095, 'duration': 7.145}, {'end': 4374.142, 'text': 'And at the top we have the message.', 'start': 4371.22, 'duration': 2.922}, {'end': 4376.764, 'text': 'So previously, it was props.username.', 'start': 4374.202, 'duration': 2.562}, {'end': 4380.746, 'text': 'So now it would be message.username, message.text.', 'start': 4376.784, 'duration': 3.962}, {'end': 4384.589, 'text': "But the actual username would be the person who's logged in.", 'start': 4381.547, 'duration': 3.042}, {'end': 4391.333, 'text': "So in this case we can run a small little check which says is this the user who's logged in right?", 'start': 4384.769, 'duration': 6.564}, {'end': 4403.336, 'text': 'And the way we do that is, we say if the username is equivalent, so if it equals the message.username, then this would be true.', 'start': 4392.654, 'duration': 10.682}, {'end': 4407.197, 'text': 'Okay Does that make sense? Yeah.', 'start': 4404.617, 'duration': 2.58}, {'end': 4412.598, 'text': 'Yeah And the reason why we do this now is because we can do a really cool little trick here.', 'start': 4408.257, 'duration': 4.341}, {'end': 4419.879, 'text': 'And what we can say is we can say all of the styling that we currently see is here inside of this class name message, right? Yeah.', 'start': 4412.898, 'duration': 6.981}, {'end': 4422.12, 'text': 'But what we can do now is we can actually..', 'start': 4419.899, 'duration': 2.221}, {'end': 4429.101, 'text': "So for isUser, we could actually use a different type of styling, right? That's what we're trying to get at.", 'start': 4422.12, 'duration': 6.981}, {'end': 4431.282, 'text': 'exactly got it.', 'start': 4429.861, 'duration': 1.421}, {'end': 4436.226, 'text': 'so guys like you know how, on your phone, when you send somebody a message, it might be like green or blue,', 'start': 4431.282, 'duration': 4.944}, {'end': 4439.789, 'text': "but then when they send you a message back, it's like gray.", 'start': 4436.226, 'duration': 3.563}, {'end': 4442.551, 'text': 'yeah, exactly that.', 'start': 4439.789, 'duration': 2.762}, {'end': 4448.375, 'text': 'so in this case what we can do is we can have class name and then we basically we wrap it in jsx.', 'start': 4442.551, 'duration': 5.824}, {'end': 4453.419, 'text': 'yeah, we give it these curly brackets, these back ticks, which are these special brackets and back ticks.', 'start': 4448.375, 'duration': 5.044}, {'end': 4458.423, 'text': 'we currently we want every card to have the original styling that we gave it.', 'start': 4453.419, 'duration': 5.004}, {'end': 4467.672, 'text': "but if it's a user, then what we do is we put this special syntax here which allows us to have javascript inside of our little back ticks.", 'start': 4458.423, 'duration': 9.249}, {'end': 4474.634, 'text': "yeah, we say if it's a user, so if it's a user, um, then what we want to do is basically add this class in.", 'start': 4467.672, 'duration': 6.962}, {'end': 4478.375, 'text': "so, and what we're going to do is we're going to say message underscore, underscore user.", 'start': 4474.634, 'duration': 3.741}, {'end': 4485.416, 'text': 'so only the person who is logged in is going to get this class message.', 'start': 4478.375, 'duration': 7.041}, {'end': 4487.857, 'text': 'only then do they get this class of styling.', 'start': 4485.416, 'duration': 2.441}, {'end': 4495.045, 'text': 'So now, if we go to message.css and hopefully we get this right in the first try,', 'start': 4489.68, 'duration': 5.365}, {'end': 4503.474, 'text': "what we can do is we can add a bit of styling here which says message user and we've got margin left, which is basically going to push.", 'start': 4495.045, 'duration': 8.429}, {'end': 4511.208, 'text': "So margin left is going to basically notice how in the React app that we built, All of the user's information is always on the right side.", 'start': 4503.514, 'duration': 7.694}, {'end': 4516.929, 'text': "So if you're logged in and you send a message, it's on the right side and it's going to be blue, right?", 'start': 4511.228, 'duration': 5.701}, {'end': 4519.65, 'text': 'So what we can do now is text.', 'start': 4517.509, 'duration': 2.141}, {'end': 4520.73, 'text': 'the line should be left.', 'start': 4519.65, 'duration': 1.08}, {'end': 4521.65, 'text': "Oops, that's silly.", 'start': 4520.87, 'duration': 0.78}, {'end': 4523.111, 'text': 'So if we save that.', 'start': 4522.311, 'duration': 0.8}, {'end': 4529.952, 'text': 'So now, Qazi, if you want to just refresh the app and type in Qazi.', 'start': 4523.471, 'duration': 6.481}], 'summary': 'Restructuring props and adding conditional styling based on user status for message component in react app.', 'duration': 212.578, 'max_score': 4317.374, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc4317374.jpg'}, {'end': 4363.095, 'src': 'embed', 'start': 4338.151, 'weight': 2, 'content': [{'end': 4344.081, 'text': "because, remember, a message can be have a user which isn't the user who's logged in.", 'start': 4338.151, 'duration': 5.93}, {'end': 4347.246, 'text': "So it's kind of, you should separate these two things, right? Yeah.", 'start': 4344.121, 'duration': 3.125}, {'end': 4352.429, 'text': "So now if we go inside of our message component, the structure's slightly changed.", 'start': 4348.246, 'duration': 4.183}, {'end': 4360.734, 'text': "So if we can actually do something called ES6 destructuring here and you can see it's actually broken the app because we've changed the structure of our props.", 'start': 4352.989, 'duration': 7.745}, {'end': 4363.095, 'text': 'So inside on line five.', 'start': 4361.514, 'duration': 1.581}], 'summary': 'Separate users in messages to avoid app breaking.', 'duration': 24.944, 'max_score': 4338.151, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc4338151.jpg'}, {'end': 4735.42, 'src': 'heatmap', 'start': 4629.681, 'weight': 0.937, 'content': [{'end': 4632.343, 'text': "So we're going to have those same rules that we spoke about to the container.", 'start': 4629.681, 'duration': 2.662}, {'end': 4638.208, 'text': "And then what we're going to do is we're going to say we're going to do a similar thing.", 'start': 4633.084, 'duration': 5.124}, {'end': 4641.031, 'text': "We're going to add some classes here.", 'start': 4639.089, 'duration': 1.942}, {'end': 4646.086, 'text': "So we're going to say, if it's a user, right? Then we're going to give it this.", 'start': 4641.584, 'duration': 4.502}, {'end': 4647.927, 'text': 'Nice Okay.', 'start': 4646.606, 'duration': 1.321}, {'end': 4648.367, 'text': 'I see.', 'start': 4648.027, 'duration': 0.34}, {'end': 4653.63, 'text': "Yeah What we're going to do now is we're going to say, if it's a user, they get the user card styling.", 'start': 4648.667, 'duration': 4.963}, {'end': 4655.511, 'text': 'Otherwise they get the guest card styling.', 'start': 4653.83, 'duration': 1.681}, {'end': 4657.972, 'text': 'Okay Right.', 'start': 4656.051, 'duration': 1.921}, {'end': 4660.773, 'text': "And what we have here is let's have a look.", 'start': 4657.992, 'duration': 2.781}, {'end': 4665.035, 'text': 'If I go to message.css and we do this and I add it.', 'start': 4661.594, 'duration': 3.441}, {'end': 4667.396, 'text': 'So I added in some styling now user card.', 'start': 4665.275, 'duration': 2.121}, {'end': 4670.798, 'text': 'Okay So now user card is blue and guest card is gray.', 'start': 4667.476, 'duration': 3.322}, {'end': 4673.57, 'text': 'Yeah So that should be working now.', 'start': 4671.63, 'duration': 1.94}, {'end': 4678.712, 'text': 'So if we refresh that and say, Oh, nice.', 'start': 4673.59, 'duration': 5.122}, {'end': 4680.372, 'text': 'That is clean.', 'start': 4678.992, 'duration': 1.38}, {'end': 4684.693, 'text': 'Hey, what is going on? Okay.', 'start': 4680.892, 'duration': 3.801}, {'end': 4686.694, 'text': 'Nice So now all my messages are blue.', 'start': 4684.733, 'duration': 1.961}, {'end': 4690.855, 'text': "Okay And if I have your message, that's not mine, then it's going to be that.", 'start': 4686.834, 'duration': 4.021}, {'end': 4691.835, 'text': 'Okay Nice.', 'start': 4690.995, 'duration': 0.84}, {'end': 4693.015, 'text': 'Yeah Awesome.', 'start': 4691.855, 'duration': 1.16}, {'end': 4698.098, 'text': "So we've actually set up the fundamentals here for the beginning of the app, right? Yeah.", 'start': 4693.455, 'duration': 4.643}, {'end': 4705.161, 'text': 'And what we, I guess what we could then do is we could, I think this says hook up Firebase at this point, right? Yeah.', 'start': 4698.758, 'duration': 6.403}, {'end': 4706.001, 'text': 'So hold on.', 'start': 4705.221, 'duration': 0.78}, {'end': 4707.842, 'text': 'Let me just visually show.', 'start': 4706.021, 'duration': 1.821}, {'end': 4711.424, 'text': "So here's the, so user card is the blue one, right? That's right there.", 'start': 4707.862, 'duration': 3.562}, {'end': 4714.885, 'text': "Yeah And then this is the guest card and that's right here.", 'start': 4711.604, 'duration': 3.281}, {'end': 4718.787, 'text': 'Okay And this styling is happening on that if then statement.', 'start': 4714.905, 'duration': 3.882}, {'end': 4720.608, 'text': 'So go, just go back to your if then statement.', 'start': 4718.807, 'duration': 1.801}, {'end': 4724.871, 'text': 'yep, so actually i would have to do it on this computer.', 'start': 4721.589, 'duration': 3.282}, {'end': 4727.713, 'text': 'so message.js.', 'start': 4724.871, 'duration': 2.842}, {'end': 4730.776, 'text': "so this is where we're deciding if the user is logged in.", 'start': 4727.713, 'duration': 3.063}, {'end': 4735.42, 'text': 'if their user then show the user card, otherwise show this.', 'start': 4730.776, 'duration': 4.644}], 'summary': "Implemented user and guest card styling in message.css, signaling successful setup for the app's fundamentals.", 'duration': 105.739, 'max_score': 4629.681, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc4629681.jpg'}, {'end': 4813.161, 'src': 'embed', 'start': 4790.446, 'weight': 4, 'content': [{'end': 4801.393, 'text': "we say So, for example, here the first part of the class name is the component and the second part is the element that we're talking about.", 'start': 4790.446, 'duration': 10.947}, {'end': 4805.075, 'text': 'The reason why this is really good is because, when your app grows and it gets bigger,', 'start': 4801.413, 'duration': 3.662}, {'end': 4813.161, 'text': "it's a really standardized approach to always knowing where everything is and always knowing that everything is consistent within your app.", 'start': 4805.075, 'duration': 8.086}], 'summary': 'Standardized naming convention organizes app for consistency and scalability.', 'duration': 22.715, 'max_score': 4790.446, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc4790446.jpg'}], 'start': 4168.988, 'title': 'Styling messages in messenger app', 'summary': 'Discusses adding styling to messages with padding and width adjustments, adding margin to separate messages, and differentiating the current message. it also covers styling messages based on user information using es6 destructuring, implementing conditional styling, and utilizing bem convention for consistency.', 'chapters': [{'end': 4264.684, 'start': 4168.988, 'title': 'Styling and margin adjustment', 'summary': 'Discusses adding styling to a message with padding and width adjustments, followed by adding margin to separate messages, and finally, differentiating the current message in a messenger app.', 'duration': 95.696, 'highlights': ['Adding margin to separate messages The speaker suggests adding a 10 pixel margin to separate messages for improved look and feel.', 'Styling message with padding and width adjustments The speaker mentions adding padding and adjusting the width to make the message fit as needed.', 'Differentiating the current message in a Messenger app The speaker discusses the need to differentiate the current message in a Messenger app, similar to other Messenger apps.']}, {'end': 4846.474, 'start': 4265.365, 'title': 'Styling messages with user information', 'summary': "Discusses styling messages based on user information by using es6 destructuring to pass the entire message as an object, implementing conditional styling for the user's messages, and utilizing bem convention for consistent styling and organization.", 'duration': 581.109, 'highlights': ["Implementing conditional styling for user's messages by using ES6 destructuring to pass the entire message as an object. The chapter discusses using ES6 destructuring to pass the entire message as an object, enabling the implementation of conditional styling for the user's messages.", 'Utilizing BEM convention for consistent styling and organization, recommended for maintaining app consistency and ease of navigation as it grows. The discussion emphasizes the use of BEM convention for consistent styling and organization, recommended for maintaining app consistency and ease of navigation as it grows.', 'Explanation of BEM convention and its benefits, such as standardized approach and consistency within the app, saving time and reducing complexity as the app grows. The chapter explains the BEM convention, highlighting its benefits such as a standardized approach, consistency within the app, and saving time and reducing complexity as the app grows.']}], 'duration': 677.486, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc4168988.jpg', 'highlights': ['Adding margin to separate messages for improved look and feel.', 'Styling message with padding and width adjustments for better fit.', 'Differentiating the current message in a Messenger app for clarity.', "Implementing conditional styling for user's messages using ES6 destructuring.", 'Utilizing BEM convention for consistent styling and organization.', 'Explanation of BEM convention and its benefits for app consistency.']}, {'end': 5827.402, 'segs': [{'end': 4950.151, 'src': 'embed', 'start': 4909.497, 'weight': 0, 'content': [{'end': 4915.519, 'text': "The second important thing that we're trying to do here is now we want to give it a database, because up until now, when I hit refresh,", 'start': 4909.497, 'duration': 6.022}, {'end': 4919.04, 'text': "if I type in something and I hit refresh, it's gone right?", 'start': 4915.519, 'duration': 3.521}, {'end': 4920.8, 'text': 'And then it has to start all over again.', 'start': 4919.06, 'duration': 1.74}, {'end': 4928.623, 'text': "I mean this is that's that's fun for now, but like it's not going to be a fun app for anybody to use, because all the memory is going to be deleted.", 'start': 4920.82, 'duration': 7.803}, {'end': 4933.085, 'text': "so those are the two things we're about to do hosting online and getting a database.", 'start': 4928.623, 'duration': 4.462}, {'end': 4935.086, 'text': 'yeah, exactly yeah.', 'start': 4933.085, 'duration': 2.001}, {'end': 4939.167, 'text': 'so now what we want to do is we just created a firestore database.', 'start': 4935.086, 'duration': 4.081}, {'end': 4945.43, 'text': 'so this is a real-time database and it has this sort of collection document collection, document structure.', 'start': 4939.167, 'duration': 6.263}, {'end': 4946.81, 'text': "we won't go into that too much.", 'start': 4945.43, 'duration': 1.38}, {'end': 4950.151, 'text': 'but the point is the collection in our case is going to be messages.', 'start': 4946.81, 'duration': 3.341}], 'summary': 'The goal is to host online and get a database, creating a real-time firestore database for messages.', 'duration': 40.654, 'max_score': 4909.497, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc4909497.jpg'}, {'end': 5175.564, 'src': 'embed', 'start': 5144.662, 'weight': 2, 'content': [{'end': 5146.904, 'text': 'So this is our magic little variable right now.', 'start': 5144.662, 'duration': 2.242}, {'end': 5147.584, 'text': "That's awesome.", 'start': 5146.924, 'duration': 0.66}, {'end': 5156.11, 'text': 'Then what we do is we initialize it by saying Firestore, which is the database that we just created, and we assign it to this little DB variable,', 'start': 5147.604, 'duration': 8.506}, {'end': 5157.371, 'text': 'and then we just simply export it.', 'start': 5156.11, 'duration': 1.261}, {'end': 5161.674, 'text': "So instead of doing this actually, I'm going to say export default DB, which is a bit easier.", 'start': 5157.411, 'duration': 4.263}, {'end': 5171.901, 'text': 'uh-huh. and then now we can use this database uh variable in any of our files, in our app.js or in our message.js anywhere else.', 'start': 5162.274, 'duration': 9.627}, {'end': 5175.564, 'text': "right, yeah, exactly, and that's like super, super simple.", 'start': 5171.901, 'duration': 3.663}], 'summary': 'Initializing and exporting firestore database for easy use in app files.', 'duration': 30.902, 'max_score': 5144.662, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc5144662.jpg'}, {'end': 5341.44, 'src': 'embed', 'start': 5314.694, 'weight': 4, 'content': [{'end': 5325.246, 'text': "So for example, like if I go to the Firebase, right, and I'm over here, so every single time I add in any new record, this will detect it and run.", 'start': 5314.694, 'duration': 10.552}, {'end': 5330.571, 'text': "So on snapshot just says, hey, any changes I see here, I'm running this piece of code.", 'start': 5325.406, 'duration': 5.165}, {'end': 5333.434, 'text': 'Exactly Yeah, exactly that.', 'start': 5331.312, 'duration': 2.122}, {'end': 5337.777, 'text': 'And all the information from that snapshot gets put into that one variable snapshot.', 'start': 5333.454, 'duration': 4.323}, {'end': 5341.44, 'text': 'So from that now, oh, wait, hold on, hold on.', 'start': 5338.417, 'duration': 3.023}], 'summary': 'Firebase detects and runs code on every new record added, storing information in a variable.', 'duration': 26.746, 'max_score': 5314.694, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc5314694.jpg'}, {'end': 5575.698, 'src': 'embed', 'start': 5550.08, 'weight': 3, 'content': [{'end': 5561.129, 'text': "now what we can do is this is honestly one of the most powerful lines of code I've ever come across in my life when it comes to coding and anything like that.", 'start': 5550.08, 'duration': 11.049}, {'end': 5564.451, 'text': 'Guys, we call it a listener.', 'start': 5561.529, 'duration': 2.922}, {'end': 5570.016, 'text': "The reason why it's a listener is because all it's doing is listening for any changes,", 'start': 5564.992, 'duration': 5.024}, {'end': 5575.698, 'text': 'at which point it shoots off a snapshot which is like a real-time capture of the database.', 'start': 5570.576, 'duration': 5.122}], 'summary': 'Code for listener captures real-time database changes.', 'duration': 25.618, 'max_score': 5550.08, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc5550080.jpg'}], 'start': 4846.474, 'title': 'Setting up firebase and real-time data sync', 'summary': 'Covers setting up a firestore database and hosting, setting up firebase with npm and firestore, and real-time data sync with firebase. it includes creating a collection of messages, accessing firestore database, and demonstrating real-time data syncing, with a focus on real-time changes and the significance of the profit with javascript course.', 'chapters': [{'end': 4997.459, 'start': 4846.474, 'title': 'Setting up firestore database and hosting', 'summary': 'Covers setting up a firestore database for real-time data storage and hosting the website to make it accessible online, with a focus on creating a collection of messages and documents.', 'duration': 150.985, 'highlights': ['The chapter covers setting up a Firestore database for real-time data storage and hosting the website to make it accessible online, with a focus on creating a collection of messages and documents.', 'Setting up Firestore database involves creating a collection with a document structure, allowing real-time storage of messages and user data.', 'The tutorial emphasizes the importance of hosting the website to make it accessible online, ensuring that the data is not lost upon page refresh, ultimately enhancing user experience.', 'The process involves setting up a Firestore database and hosting the website to enable real-time data storage and accessibility online, addressing the issue of data loss upon page refresh.']}, {'end': 5523.246, 'start': 4997.459, 'title': 'Setting up firebase with npm and firestore', 'summary': 'Explains how to set up firebase with npm and firestore, including importing firebase modules, initializing the app with configuration, accessing the firestore database, and retrieving data using onsnapshot function.', 'duration': 525.787, 'highlights': ['Importing Firebase modules and initializing the app with configuration The chapter explains how to import Firebase modules using NPM and initialize the app with the configuration using the initialize app function.', 'Accessing the Firestore database and exporting the database variable It details the process of accessing the Firestore database and assigning it to a variable, which is then exported for use in other files.', 'Retrieving data using the onSnapshot function The chapter demonstrates how to retrieve data from the Firestore database using the onSnapshot function, which detects changes in the database and updates the app accordingly.']}, {'end': 5827.402, 'start': 5523.467, 'title': 'Real-time data sync with firebase', 'summary': 'Demonstrates the process of real-time data syncing with firebase, utilizing a powerful line of code that acts as a listener, enabling the app to capture and display changes in the database instantly, exemplified by adding and viewing real-time data, while also emphasizing the significance of the profit with javascript course.', 'duration': 303.935, 'highlights': ['The code acts as a listener, capturing and displaying real-time changes in the database, exemplified by adding and viewing data without the need for manual refresh, showcasing the power of the real-time sync.', 'The chapter emphasizes the Profit with JavaScript course, highlighting its value as the best web development course for both learning and income generation, making a compelling case for joining the program.', "The process involves changing key identifiers from 'text' to 'message' in the database and code, ensuring seamless data retrieval and display, showcasing the practical application of code modification for effective functionality.", "The use of 'useEffect' is explained as a code that runs on a specific condition, in this case, triggering when the page loads, providing clarity on its role in executing code under specific circumstances, contributing to a better understanding of its functionality.", "The chapter illustrates the real-time synchronization and capture of data from the Firebase database, eliminating the need for hardcoded content and demonstrating the app's direct interaction with the database for data retrieval and display."]}], 'duration': 980.928, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc4846474.jpg', 'highlights': ['The chapter emphasizes the importance of hosting the website to make it accessible online, ensuring that the data is not lost upon page refresh, ultimately enhancing user experience.', 'The process involves setting up a Firestore database and hosting the website to enable real-time data storage and accessibility online, addressing the issue of data loss upon page refresh.', 'Accessing the Firestore database and exporting the database variable It details the process of accessing the Firestore database and assigning it to a variable, which is then exported for use in other files.', 'The code acts as a listener, capturing and displaying real-time changes in the database, exemplified by adding and viewing data without the need for manual refresh, showcasing the power of the real-time sync.', "The chapter illustrates the real-time synchronization and capture of data from the Firebase database, eliminating the need for hardcoded content and demonstrating the app's direct interaction with the database for data retrieval and display."]}, {'end': 6439.004, 'segs': [{'end': 5931.448, 'src': 'embed', 'start': 5903.245, 'weight': 3, 'content': [{'end': 5908.308, 'text': "So we're gonna actually make it so all the most recent messages show up all the way to the top.", 'start': 5903.245, 'duration': 5.063}, {'end': 5911.47, 'text': 'Exactly Exactly.', 'start': 5909.309, 'duration': 2.161}, {'end': 5919.718, 'text': "So yeah, so the way we do that would be it's actually simpler when we push the message in because we can actually make it use The correct timestamp.", 'start': 5911.531, 'duration': 8.187}, {'end': 5922.12, 'text': "So what we're gonna do now is we're gonna do something here.", 'start': 5919.738, 'duration': 2.382}, {'end': 5925.002, 'text': "We're gonna say DB Dot collection.", 'start': 5922.54, 'duration': 2.462}, {'end': 5931.448, 'text': "Yeah, so he's talking about is when I hit send message up until now wasn't sending it to the database.", 'start': 5925.323, 'duration': 6.125}], 'summary': 'Adjusting message display to show most recent messages at the top, with plans to correct timestamp and database integration.', 'duration': 28.203, 'max_score': 5903.245, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc5903245.jpg'}, {'end': 6081.367, 'src': 'embed', 'start': 6052.463, 'weight': 2, 'content': [{'end': 6058.866, 'text': "We both have different time zones, right? So if this is his time zone, it's gonna be different to my time zone.", 'start': 6052.463, 'duration': 6.403}, {'end': 6062.627, 'text': "So the one that we wanna use is the one that's sitting on the server.", 'start': 6059.046, 'duration': 3.581}, {'end': 6065.168, 'text': 'Like literally where this database is.', 'start': 6062.687, 'duration': 2.481}, {'end': 6071.011, 'text': 'So like wherever Firebase is hosting your database, you wanna use their local time zone.', 'start': 6065.288, 'duration': 5.723}, {'end': 6074.263, 'text': 'Exactly that, yeah, exactly that.', 'start': 6071.801, 'duration': 2.462}, {'end': 6081.367, 'text': 'And now what this would mean is it should at this point be so when we start pushing messages and we can actually get rid of this code here,', 'start': 6074.343, 'duration': 7.024}], 'summary': 'Use the time zone of the server where the database is hosted for accurate timing.', 'duration': 28.904, 'max_score': 6052.463, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc6052463.jpg'}, {'end': 6332.497, 'src': 'embed', 'start': 6301.631, 'weight': 4, 'content': [{'end': 6308.816, 'text': "Nice Okay, so what we're gonna do now, so I think maybe we can demonstrate it, these, this side by side.", 'start': 6301.631, 'duration': 7.185}, {'end': 6313.72, 'text': "So like, when I type it in, guys, notice how in real time, it's going to add it to this database.", 'start': 6309.176, 'duration': 4.544}, {'end': 6318.283, 'text': "That's why this Firebase is called a, you know, what we're doing here is a real time database.", 'start': 6313.76, 'duration': 4.523}, {'end': 6323.568, 'text': 'So exactly test, Right there, right? You guys saw that? It popped in.', 'start': 6318.764, 'duration': 4.804}, {'end': 6332.497, 'text': 'Hey, what is happening? Hello, why coffee database real time? Holy crap.', 'start': 6324.889, 'duration': 7.608}], 'summary': 'Demonstrating real-time addition to firebase database during coding session.', 'duration': 30.866, 'max_score': 6301.631, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc6301631.jpg'}, {'end': 6411.161, 'src': 'embed', 'start': 6379.974, 'weight': 0, 'content': [{'end': 6386.18, 'text': 'And he says that there are many similar services on Amazon, like Amazon AWS or Microsoft Azure or whatnot.', 'start': 6379.974, 'duration': 6.206}, {'end': 6389.563, 'text': 'But Firebase has a lot of powerful feature features all in one place.', 'start': 6386.22, 'duration': 3.343}, {'end': 6395.849, 'text': "And the simplicity, the simplicity and all of the things in one place, that's what makes it take the cake.", 'start': 6389.983, 'duration': 5.866}, {'end': 6401.71, 'text': "Exactly, and you know what? That's a good point, Qazi, because you've actually had first experience at using AWS.", 'start': 6396.664, 'duration': 5.046}, {'end': 6403.212, 'text': "Yeah, it's a nightmare.", 'start': 6401.77, 'duration': 1.442}, {'end': 6411.161, 'text': "I'm using AWS for a bunch of things, like the Lambda functions, the AWS database, and it's so complicated.", 'start': 6403.272, 'duration': 7.889}], 'summary': 'Firebase has powerful features and simplicity, unlike aws which is complicated.', 'duration': 31.187, 'max_score': 6379.974, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc6379974.jpg'}, {'end': 6449.869, 'src': 'embed', 'start': 6420.931, 'weight': 1, 'content': [{'end': 6423.132, 'text': 'like, how do I actually manage my cluster?', 'start': 6420.931, 'duration': 2.201}, {'end': 6428.396, 'text': "It's so much garbage that and even right now I can't do a two-way database sync.", 'start': 6423.152, 'duration': 5.244}, {'end': 6430.337, 'text': "Like I'm having, it's a nightmare.", 'start': 6428.836, 'duration': 1.501}, {'end': 6434.881, 'text': "And here you have like the simplest two-way database sync that I've ever seen.", 'start': 6430.698, 'duration': 4.183}, {'end': 6437.643, 'text': "Like, and it's working and it's real time and it's fast, so.", 'start': 6434.921, 'duration': 2.722}, {'end': 6439.004, 'text': 'Exactly Yeah.', 'start': 6437.663, 'duration': 1.341}, {'end': 6449.869, 'text': "Awesome. So now I guess what we're going to do is a really cool thing that we can actually mess around with now is, if we so,", 'start': 6440.482, 'duration': 9.387}], 'summary': 'Struggling with cluster management and two-way database sync, but found effective solution for real-time sync', 'duration': 28.938, 'max_score': 6420.931, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc6420931.jpg'}], 'start': 5827.442, 'title': 'Implementing real-time data updates and firebase real-time database implementation', 'summary': "Covers implementing real-time data updates using firebase in javascript with a focus on adding timestamps to messages and ensuring consistency across time zones. it also discusses the implementation of firebase's real-time database, highlighting its ease of use, powerful features, and the importance of two-way database sync for real-time and fast performance.", 'chapters': [{'end': 6074.263, 'start': 5827.442, 'title': 'Implementing real-time data updates', 'summary': 'Discusses implementing real-time data updates using firebase in javascript, including adding timestamps to messages for sorting and using server timestamp to ensure consistency across time zones.', 'duration': 246.821, 'highlights': ['Implementing real-time data updates using Firebase in JavaScript The discussion focuses on using Firebase to ensure real-time data updates, enhancing user experience and application functionality.', 'Adding timestamps to messages for sorting The importance of adding timestamps to messages is emphasized to ensure that the most recent messages appear at the top, improving user experience and message organization.', 'Using server timestamp to ensure consistency across time zones The use of server timestamp is highlighted to maintain consistency across various time zones, ensuring accurate and synchronized data recording and display.']}, {'end': 6439.004, 'start': 6074.343, 'title': 'Firebase real-time database implementation', 'summary': 'Discusses the implementation of a real-time database in firebase, emphasizing the ease of use and powerful features of firebase, compared to other services like amazon aws, and the importance of two-way database sync for real-time and fast performance.', 'duration': 364.661, 'highlights': ['The chapter discusses the implementation of a real-time database in Firebase. The chapter focuses on the implementation of a real-time database in Firebase, showcasing the process of pushing and sorting messages in the database.', 'Firebase is emphasized for its ease of use and powerful features compared to other services like Amazon AWS. Firebase is highlighted for its simplicity and powerful features, contrasting it with the complexity of services like Amazon AWS, making it stand out as an easy-to-use and feature-rich platform.', 'The importance of two-way database sync for real-time and fast performance is underscored. The significance of two-way database sync is emphasized for achieving real-time and fast performance, especially when compared to the challenges and complexities faced with services like Amazon AWS.']}], 'duration': 611.562, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc5827442.jpg', 'highlights': ["Firebase's real-time database implementation and its ease of use and powerful features are emphasized, contrasting it with other services like Amazon AWS.", 'The significance of two-way database sync is underscored for achieving real-time and fast performance, especially when compared to the challenges and complexities faced with services like Amazon AWS.', 'Using server timestamp is highlighted to maintain consistency across various time zones, ensuring accurate and synchronized data recording and display.', 'The importance of adding timestamps to messages is emphasized to ensure that the most recent messages appear at the top, improving user experience and message organization.', 'The discussion focuses on using Firebase to ensure real-time data updates, enhancing user experience and application functionality.', 'The chapter focuses on the implementation of a real-time database in Firebase, showcasing the process of pushing and sorting messages in the database.']}, {'end': 7535.013, 'segs': [{'end': 6491.524, 'src': 'embed', 'start': 6465.258, 'weight': 0, 'content': [{'end': 6473.125, 'text': "Yeah, so I think what we can do now is we can actually mess around with something called, let me find out what it's called.", 'start': 6465.258, 'duration': 7.867}, {'end': 6477.809, 'text': "It is, so it's called, there's a library called React Flipmove.", 'start': 6473.225, 'duration': 4.584}, {'end': 6479.591, 'text': "And what we're going to do is we're going to implement that together.", 'start': 6477.849, 'duration': 1.742}, {'end': 6482.894, 'text': 'So if you just go over to Google and type in React Flipmove.', 'start': 6479.971, 'duration': 2.923}, {'end': 6484.015, 'text': 'Yep, will do.', 'start': 6483.434, 'duration': 0.581}, {'end': 6488.923, 'text': 'React what? Flip move.', 'start': 6486.503, 'duration': 2.42}, {'end': 6490.584, 'text': 'Flip move.', 'start': 6489.464, 'duration': 1.12}, {'end': 6491.524, 'text': 'Okay, got it.', 'start': 6490.884, 'duration': 0.64}], 'summary': 'Implementing react flipmove library for animation.', 'duration': 26.266, 'max_score': 6465.258, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc6465258.jpg'}, {'end': 6699.69, 'src': 'heatmap', 'start': 6587.263, 'weight': 0.775, 'content': [{'end': 6589.887, 'text': 'So, whenever you come into these sort of documents,', 'start': 6587.263, 'duration': 2.624}, {'end': 6597.807, 'text': "I would recommend you'd actually always double check to see how you use their stuff inside of a functional component.", 'start': 6591.684, 'duration': 6.123}, {'end': 6599.968, 'text': "So in this case, they've got a really nice section for this.", 'start': 6597.827, 'duration': 2.141}, {'end': 6604.57, 'text': 'And what we need to do here is we first need to see.', 'start': 6600.949, 'duration': 3.621}, {'end': 6606.371, 'text': 'so you know what you see at the bottom.', 'start': 6604.57, 'duration': 1.801}, {'end': 6610.553, 'text': 'the bottom half of the demo is actually what we want to pay attention to first.', 'start': 6606.371, 'duration': 4.182}, {'end': 6613.635, 'text': "Actually, no, it's the top part, sorry, the const functional article.", 'start': 6610.974, 'duration': 2.661}, {'end': 6623.918, 'text': 'So all we need to do now is go over to our message.js, Here, what we need to do is we need to use something called a forward ref in React.', 'start': 6614.115, 'duration': 9.803}, {'end': 6629.043, 'text': "Now, I don't think you've used this either because this might be Yeah, I'm pumped.", 'start': 6624.479, 'duration': 4.564}, {'end': 6637.67, 'text': "Yeah. So what we need to do here is the way it's going to track what's going on and what's changing and what's moving.", 'start': 6629.963, 'duration': 7.707}, {'end': 6642.834, 'text': "it needs to have some reference to the object that's flipping around and spinning around right?", 'start': 6637.67, 'duration': 5.164}, {'end': 6643.355, 'text': 'Yeah.', 'start': 6643.135, 'duration': 0.22}, {'end': 6647.058, 'text': 'Now, we use something called a forward ref to keep track of that.', 'start': 6643.515, 'duration': 3.543}, {'end': 6650.5, 'text': "Yeah So the way we do that is it's very simple.", 'start': 6647.518, 'duration': 2.982}, {'end': 6653.402, 'text': "We don't actually even need to know too much about what's happening.", 'start': 6650.54, 'duration': 2.862}, {'end': 6655.964, 'text': "So let's just change this to an ES6 function.", 'start': 6653.883, 'duration': 2.081}, {'end': 6657.185, 'text': "So let's do const map.", 'start': 6656.004, 'duration': 1.181}, {'end': 6659.406, 'text': "So it looks very similar to what they've done.", 'start': 6657.465, 'duration': 1.941}, {'end': 6666.527, 'text': "And now all you need to do in order to get this working is have a, that's strange, one second.", 'start': 6661.044, 'duration': 5.483}, {'end': 6667.187, 'text': 'Yeah, there we go.', 'start': 6666.707, 'duration': 0.48}, {'end': 6669.389, 'text': 'All we need to do now is actually do this.', 'start': 6667.768, 'duration': 1.621}, {'end': 6672.51, 'text': 'We say forward ref, so forward ref.', 'start': 6669.409, 'duration': 3.101}, {'end': 6680.235, 'text': 'And you basically put a bracket around this and then we go to the bottom of the file on 924 and put a closing bracket,', 'start': 6673.391, 'duration': 6.844}, {'end': 6682.096, 'text': 'because the entire thing is wrapped in a bracket.', 'start': 6680.235, 'duration': 1.861}, {'end': 6687.72, 'text': 'Yep And then what we do is we go back up to the top.', 'start': 6682.396, 'duration': 5.324}, {'end': 6690.342, 'text': 'Oh, you put the whole, oh, okay.', 'start': 6687.74, 'duration': 2.602}, {'end': 6693.565, 'text': "So whenever literally message is changing, we're tracking it.", 'start': 6690.362, 'duration': 3.203}, {'end': 6699.69, 'text': 'Yeah, So now what we do is we, and then we basically get access to this ref right?', 'start': 6694.746, 'duration': 4.944}], 'summary': 'Recommend double checking usage of forward ref in functional component, using const map and forward ref for tracking in react.', 'duration': 112.427, 'max_score': 6587.263, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc6587263.jpg'}, {'end': 7105.102, 'src': 'heatmap', 'start': 6793.209, 'weight': 0.744, 'content': [{'end': 6798.052, 'text': 'Uh-huh And we just need to import the thing that we actually installed.', 'start': 6793.209, 'duration': 4.843}, {'end': 6801.935, 'text': "So at the top, I'm just going to do import Flipmove from React Flipmove.", 'start': 6798.112, 'duration': 3.823}, {'end': 6806.338, 'text': "And then I'm going to go back down to where we map out the messages.", 'start': 6802.655, 'duration': 3.683}, {'end': 6807.919, 'text': "So let's go to line 55.", 'start': 6806.438, 'duration': 1.481}, {'end': 6808.079, 'text': 'Got it.', 'start': 6807.919, 'duration': 0.16}, {'end': 6817.214, 'text': 'And all I need to do is basically wrap all of the messages that are being mapped out inside of React Flipmove.', 'start': 6810.368, 'duration': 6.846}, {'end': 6820.377, 'text': "Now, we're almost done.", 'start': 6819.256, 'duration': 1.121}, {'end': 6821.477, 'text': "We're almost done.", 'start': 6820.637, 'duration': 0.84}, {'end': 6823.779, 'text': "But there's one key component.", 'start': 6822.018, 'duration': 1.761}, {'end': 6828.964, 'text': 'So React is very clever in how it re-renders a list.', 'start': 6823.98, 'duration': 4.984}, {'end': 6829.684, 'text': 'And right now..', 'start': 6828.984, 'duration': 0.7}, {'end': 6837.979, 'text': "It doesn't actually know what one element is to another one unless we give it something called a key.", 'start': 6832.438, 'duration': 5.541}, {'end': 6840.98, 'text': 'And that key is going to be crucial.', 'start': 6838.54, 'duration': 2.44}, {'end': 6842.521, 'text': "Oh, so I see what you're saying.", 'start': 6841.28, 'duration': 1.241}, {'end': 6847.542, 'text': 'So basically this element and this element right here have no relationship right now.', 'start': 6842.561, 'duration': 4.981}, {'end': 6850.403, 'text': 'Yeah, so right now React has no idea.', 'start': 6848.522, 'duration': 1.881}, {'end': 6855.164, 'text': "When you actually submit a message, it's going to re-render the entire list.", 'start': 6850.863, 'duration': 4.301}, {'end': 6858.554, 'text': "Right, so I see what you're saying.", 'start': 6856.853, 'duration': 1.701}, {'end': 6862.235, 'text': "So if I refresh this or something, it's gonna refresh the entire list.", 'start': 6858.574, 'duration': 3.661}, {'end': 6867.676, 'text': "Yeah, it's gonna refresh the entire list, and that's not efficient when the list gets really big.", 'start': 6862.935, 'duration': 4.741}, {'end': 6869.917, 'text': 'because, imagine, you have a thousand messages.', 'start': 6867.676, 'duration': 2.241}, {'end': 6872.798, 'text': 'you only wanna really re-render the last one that was added.', 'start': 6869.917, 'duration': 2.881}, {'end': 6873.758, 'text': 'Oh, I see.', 'start': 6873.198, 'duration': 0.56}, {'end': 6880.4, 'text': "So only refresh the new message basically that I'm adding, but keep everything the same, don't refresh it.", 'start': 6873.798, 'duration': 6.602}, {'end': 6882.318, 'text': 'Yeah Keep everything the same.', 'start': 6881.095, 'duration': 1.223}, {'end': 6884.122, 'text': 'It would literally just cleverly push it down.', 'start': 6882.338, 'duration': 1.784}, {'end': 6885.585, 'text': 'Ah, okay.', 'start': 6885.104, 'duration': 0.481}, {'end': 6886.347, 'text': "That's awesome.", 'start': 6885.726, 'duration': 0.621}, {'end': 6889.374, 'text': "This is how Instagram works, right? When you comment on somebody's post.", 'start': 6886.367, 'duration': 3.007}, {'end': 6898.566, 'text': 'Exactly Yes, so they use this and everyone that uses React should always use keys, right? Now, a key needs to be a unique identifier.', 'start': 6890.077, 'duration': 8.489}, {'end': 6904.292, 'text': 'So in our case, in the database we actually have a unique identifier being pulled,', 'start': 6898.766, 'duration': 5.526}, {'end': 6908.035, 'text': 'but we actually need to do something here which makes this a bit more accessible.', 'start': 6904.292, 'duration': 3.743}, {'end': 6914.902, 'text': "So what we need to do now is, if we go to line 23, right now we just we're mapping.", 'start': 6908.916, 'duration': 5.986}, {'end': 6920.207, 'text': 'remember, here we basically just map all of the the data in that flat structure.', 'start': 6914.902, 'duration': 5.305}, {'end': 6926.491, 'text': "right, yeah, so what i'm going to do here is, instead of mapping it to the flat structure, i'm just going to enhance it a little bit.", 'start': 6920.207, 'duration': 6.284}, {'end': 6929.193, 'text': "so i'm going to say return an object.", 'start': 6926.491, 'duration': 2.702}, {'end': 6936.779, 'text': "right, so return an object and basically whatever we were previously doing, that's just going to go inside of something called data.", 'start': 6929.193, 'duration': 7.586}, {'end': 6940.182, 'text': 'i see, right, but also going to get the id.', 'start': 6936.779, 'duration': 3.403}, {'end': 6943.364, 'text': 'so remember that squiggly id that you saw earlier in the database, Yep.', 'start': 6940.182, 'duration': 3.182}, {'end': 6947.467, 'text': "I'm going to store that ID inside of a key.", 'start': 6944.505, 'duration': 2.962}, {'end': 6958.315, 'text': "So just one second, just to be clear, you're saying that this ID right over here that I have is actually being stored right there, right? Doc.", 'start': 6947.487, 'duration': 10.828}, {'end': 6960.457, 'text': 'Okay Exactly.', 'start': 6958.395, 'duration': 2.062}, {'end': 6962.378, 'text': "Yeah So that's exactly what it says.", 'start': 6960.737, 'duration': 1.641}, {'end': 6965.84, 'text': "So that is, so that way we've got like a unique identifier.", 'start': 6962.438, 'duration': 3.402}, {'end': 6968.542, 'text': 'So now what we need to do is we need to remember.', 'start': 6965.88, 'duration': 2.662}, {'end': 6973.645, 'text': "so let's go down to line 58, and we need to remember that over here now.", 'start': 6968.542, 'duration': 5.103}, {'end': 6975.726, 'text': "it's not the same structure that we had before.", 'start': 6973.645, 'duration': 2.081}, {'end': 6978.988, 'text': 'So what I can do here is I can destructure to make things a bit easier.', 'start': 6975.806, 'duration': 3.182}, {'end': 6984.832, 'text': 'I can destructure and I can say message is no longer just this message that we saw of earlier.', 'start': 6979.369, 'duration': 5.463}, {'end': 6990.375, 'text': "It's actually not our data, right? And this would be data.message, I guess.", 'start': 6985.152, 'duration': 5.223}, {'end': 6992.415, 'text': 'Data.message, right.', 'start': 6991.455, 'duration': 0.96}, {'end': 6994.716, 'text': "Actually, no, no, it wouldn't be.", 'start': 6993.316, 'duration': 1.4}, {'end': 6998.477, 'text': 'It would just be, yeah, it would be data, right? Yeah, data.message, I think.', 'start': 6994.736, 'duration': 3.741}, {'end': 7001.578, 'text': 'In this case, it would just be data, sorry.', 'start': 6999.877, 'duration': 1.701}, {'end': 7003.618, 'text': 'Yeah, it would just be data.', 'start': 7001.978, 'duration': 1.64}, {'end': 7005.519, 'text': 'And we could have called it at the top message.', 'start': 7003.638, 'duration': 1.881}, {'end': 7008.748, 'text': "So let's go back up to the top.", 'start': 7006.425, 'duration': 2.323}, {'end': 7010.209, 'text': 'So 23, we can rename that to be message.', 'start': 7008.768, 'duration': 1.441}, {'end': 7014.153, 'text': "Yes, let's rename that to be message.", 'start': 7011.991, 'duration': 2.162}, {'end': 7015.354, 'text': 'Oh yeah, just calling it.', 'start': 7014.393, 'duration': 0.961}, {'end': 7017.256, 'text': 'Okay But hold on one second.', 'start': 7015.514, 'duration': 1.742}, {'end': 7020.9, 'text': "When you pull, I mean isn't that doc.data?", 'start': 7017.356, 'duration': 3.544}, {'end': 7023.363, 'text': "So isn't that like all three of these things??", 'start': 7021.02, 'duration': 2.343}, {'end': 7030.786, 'text': 'Yeah, but remember, we actually implemented and in message.js we had message.message.', 'start': 7024.184, 'duration': 6.602}, {'end': 7032.027, 'text': 'message.username.', 'start': 7030.786, 'duration': 1.241}, {'end': 7034.527, 'text': 'So what we want to do is we kind of want to keep that.', 'start': 7032.747, 'duration': 1.78}, {'end': 7035.408, 'text': 'Oh, I see, I see.', 'start': 7034.547, 'duration': 0.861}, {'end': 7035.728, 'text': 'Got it.', 'start': 7035.448, 'duration': 0.28}, {'end': 7036.388, 'text': 'I understand.', 'start': 7035.928, 'duration': 0.46}, {'end': 7036.908, 'text': 'Yeah? Yeah.', 'start': 7036.408, 'duration': 0.5}, {'end': 7040.109, 'text': "So now if we go back to line 58, we're going to destructure this.", 'start': 7037.188, 'duration': 2.921}, {'end': 7043.35, 'text': "We just pass in message, so it's still the same as we've done.", 'start': 7040.369, 'duration': 2.981}, {'end': 7045.251, 'text': 'Yeah But we also now get the ID.', 'start': 7043.61, 'duration': 1.641}, {'end': 7047.357, 'text': 'Nice Okay.', 'start': 7046.556, 'duration': 0.801}, {'end': 7054.748, 'text': 'Yep So we get the ID and what we need to do here is we basically just say the key is going to be the ID now.', 'start': 7047.417, 'duration': 7.331}, {'end': 7058.213, 'text': 'So this ID exactly right here is going to be the key of that.', 'start': 7055.068, 'duration': 3.145}, {'end': 7069.32, 'text': 'Yeah So now it knows that that React element, which is rendered on the screen, has the unique key of what it is in the database.', 'start': 7059.93, 'duration': 9.39}, {'end': 7076.067, 'text': "So if somebody ever pushes a new message in now, it knows that, hang on, that one didn't change.", 'start': 7069.34, 'duration': 6.727}, {'end': 7077.048, 'text': 'Nothing changed with that.', 'start': 7076.167, 'duration': 0.881}, {'end': 7078.229, 'text': "So I don't need to re-render that.", 'start': 7077.068, 'duration': 1.161}, {'end': 7082.414, 'text': 'I just need to worry about the ones that were added, the unique keys that were added in.', 'start': 7078.29, 'duration': 4.124}, {'end': 7085.379, 'text': 'Yeah Right.', 'start': 7084.198, 'duration': 1.181}, {'end': 7090.866, 'text': "So if we save this now, everything, if it's all gone well, this would actually work really well.", 'start': 7085.54, 'duration': 5.326}, {'end': 7094.91, 'text': 'And I can actually show you a demo of how it would work without the keys as well.', 'start': 7090.886, 'duration': 4.024}, {'end': 7095.531, 'text': "You'll see.", 'start': 7095.151, 'duration': 0.38}, {'end': 7097.133, 'text': 'So say Kazi.', 'start': 7095.591, 'duration': 1.542}, {'end': 7099.395, 'text': 'And now.', 'start': 7097.153, 'duration': 2.242}, {'end': 7101.217, 'text': 'Oh, it looked clean how it came up.', 'start': 7099.616, 'duration': 1.601}, {'end': 7105.102, 'text': 'Yeah So now if we do that, right.', 'start': 7102.038, 'duration': 3.064}], 'summary': 'Enhancing react component with unique keys for efficient re-rendering.', 'duration': 311.893, 'max_score': 6793.209, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc6793209.jpg'}, {'end': 6840.98, 'src': 'embed', 'start': 6810.368, 'weight': 1, 'content': [{'end': 6817.214, 'text': 'And all I need to do is basically wrap all of the messages that are being mapped out inside of React Flipmove.', 'start': 6810.368, 'duration': 6.846}, {'end': 6820.377, 'text': "Now, we're almost done.", 'start': 6819.256, 'duration': 1.121}, {'end': 6821.477, 'text': "We're almost done.", 'start': 6820.637, 'duration': 0.84}, {'end': 6823.779, 'text': "But there's one key component.", 'start': 6822.018, 'duration': 1.761}, {'end': 6828.964, 'text': 'So React is very clever in how it re-renders a list.', 'start': 6823.98, 'duration': 4.984}, {'end': 6829.684, 'text': 'And right now..', 'start': 6828.984, 'duration': 0.7}, {'end': 6837.979, 'text': "It doesn't actually know what one element is to another one unless we give it something called a key.", 'start': 6832.438, 'duration': 5.541}, {'end': 6840.98, 'text': 'And that key is going to be crucial.', 'start': 6838.54, 'duration': 2.44}], 'summary': 'React flipmove is being used to wrap mapped messages, and a key component is crucial for re-rendering a list.', 'duration': 30.612, 'max_score': 6810.368, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc6810368.jpg'}, {'end': 6914.902, 'src': 'embed', 'start': 6882.338, 'weight': 2, 'content': [{'end': 6884.122, 'text': 'It would literally just cleverly push it down.', 'start': 6882.338, 'duration': 1.784}, {'end': 6885.585, 'text': 'Ah, okay.', 'start': 6885.104, 'duration': 0.481}, {'end': 6886.347, 'text': "That's awesome.", 'start': 6885.726, 'duration': 0.621}, {'end': 6889.374, 'text': "This is how Instagram works, right? When you comment on somebody's post.", 'start': 6886.367, 'duration': 3.007}, {'end': 6898.566, 'text': 'Exactly Yes, so they use this and everyone that uses React should always use keys, right? Now, a key needs to be a unique identifier.', 'start': 6890.077, 'duration': 8.489}, {'end': 6904.292, 'text': 'So in our case, in the database we actually have a unique identifier being pulled,', 'start': 6898.766, 'duration': 5.526}, {'end': 6908.035, 'text': 'but we actually need to do something here which makes this a bit more accessible.', 'start': 6904.292, 'duration': 3.743}, {'end': 6914.902, 'text': "So what we need to do now is, if we go to line 23, right now we just we're mapping.", 'start': 6908.916, 'duration': 5.986}], 'summary': 'Discussion on using unique identifiers and making data more accessible in react code.', 'duration': 32.564, 'max_score': 6882.338, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc6882338.jpg'}, {'end': 7282.346, 'src': 'embed', 'start': 7253.055, 'weight': 3, 'content': [{'end': 7254.576, 'text': "there's a question of how to deploy.", 'start': 7253.055, 'duration': 1.521}, {'end': 7256.277, 'text': "there's a question of more styling.", 'start': 7254.576, 'duration': 1.701}, {'end': 7257.798, 'text': "so it's your call where we go.", 'start': 7256.277, 'duration': 1.521}, {'end': 7260.614, 'text': "Um, I think let's.", 'start': 7258.633, 'duration': 1.981}, {'end': 7268.939, 'text': "um, let's show them how we got the app that we had in the start, which has the, you know this message thing at the bottom.", 'start': 7260.614, 'duration': 8.325}, {'end': 7273.821, 'text': 'So I think at this point, if we can just probably just move the message thing at the bottom and add like a little arrow,', 'start': 7269.159, 'duration': 4.662}, {'end': 7275.542, 'text': 'kind of like how Facebook messenger has it.', 'start': 7273.821, 'duration': 1.721}, {'end': 7277.803, 'text': 'Um, I think then that should be it.', 'start': 7276.443, 'duration': 1.36}, {'end': 7282.346, 'text': 'And we can just call it, be done with it, you know, and add like a messenger logo at the top.', 'start': 7277.864, 'duration': 4.482}], 'summary': 'Adding a message feature at the bottom with a facebook messenger-style arrow and logo.', 'duration': 29.291, 'max_score': 7253.055, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc7253055.jpg'}], 'start': 6440.482, 'title': 'React app implementation and styling', 'summary': 'Covers implementing react flipmove for smooth behavior, the importance of unique keys in react rendering, and app styling with a fixed message feature at the bottom of the screen.', 'chapters': [{'end': 6882.318, 'start': 6440.482, 'title': 'Implementing react flipmove', 'summary': "Discusses implementing the react flipmove library for smooth, slick behavior in a react app using functional components, forward ref, and a key component, enhancing the component's functionality and efficiency.", 'duration': 441.836, 'highlights': ["The chapter discusses implementing the React Flipmove library for smooth, slick behavior in a React app using functional components, forward ref, and a key component, enhancing the component's functionality and efficiency.", 'The React Flipmove library is demonstrated to provide smooth, slick behavior in a React app, enhancing the user experience.', 'Functional components and a forward ref are used to track and manage the animation and movement of elements in the React app, showcasing the use of higher-order functions and their benefits in React development.', 'The importance of providing a key component in React to efficiently re-render lists is highlighted, improving the performance of the app when dealing with a large number of messages.']}, {'end': 7229.526, 'start': 6882.338, 'title': 'Importance of unique keys in react', 'summary': 'Discusses the significance of using unique keys in react, highlighting how it impacts rendering efficiency and prevents glitches, with a demonstration of re-rendering behavior and visual effects.', 'duration': 347.188, 'highlights': ['The significance of using unique keys in React is emphasized, demonstrating how it affects rendering efficiency and prevents glitches in the app.', "A demonstration illustrates the re-rendering behavior and visual effects of not using unique keys in React, showcasing how it can lead to glitches and disrupt the app's functionality.", 'The importance of unique identifiers as keys in React is highlighted, with a clear explanation of how they impact the rendering process and prevent re-rendering of unchanged elements.']}, {'end': 7535.013, 'start': 7229.526, 'title': 'App styling and deployment discussion', 'summary': 'Discusses styling and deploying an app, including adding a message feature at the bottom with a messenger logo, and positioning it fixed at the bottom of the screen for a cleaner look, with specific code details and examples.', 'duration': 305.487, 'highlights': ['The app discussion involves styling and deploying, including adding a message feature with a Messenger logo and positioning it fixed at the bottom of the screen for a cleaner look, with specific code details and examples.', 'The speaker explains the process of styling the message feature at the bottom of the app, including adding padding, using display flex, and setting the position to fixed at the bottom of the screen for a cleaner and anchored look.', "The app's image rendering from Facebook with dynamic parameters like width and height is mentioned, indicating a cool feature and a potential point of interest for others."]}], 'duration': 1094.531, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc6440482.jpg', 'highlights': ["The chapter discusses implementing the React Flipmove library for smooth, slick behavior in a React app using functional components, forward ref, and a key component, enhancing the component's functionality and efficiency.", 'The importance of providing a key component in React to efficiently re-render lists is highlighted, improving the performance of the app when dealing with a large number of messages.', 'The significance of using unique keys in React is emphasized, demonstrating how it affects rendering efficiency and prevents glitches in the app.', 'The app discussion involves styling and deploying, including adding a message feature with a Messenger logo and positioning it fixed at the bottom of the screen for a cleaner look, with specific code details and examples.']}, {'end': 8932.652, 'segs': [{'end': 7685.354, 'src': 'embed', 'start': 7658.254, 'weight': 1, 'content': [{'end': 7661.875, 'text': 'And what we can do here is we can even say, I think we can do it two ways.', 'start': 7658.254, 'duration': 3.621}, {'end': 7663.135, 'text': 'We can say display flex.', 'start': 7661.895, 'duration': 1.24}, {'end': 7664.776, 'text': "So I'll show you something now.", 'start': 7663.256, 'duration': 1.52}, {'end': 7667.837, 'text': 'So if we say display flex, it should.', 'start': 7664.836, 'duration': 3.001}, {'end': 7669.777, 'text': "So no, we won't do that.", 'start': 7668.417, 'duration': 1.36}, {'end': 7671.738, 'text': "We'll say width 100%.", 'start': 7669.817, 'duration': 1.921}, {'end': 7672.418, 'text': 'So say width 100%.', 'start': 7671.738, 'duration': 0.68}, {'end': 7678.12, 'text': 'And what this will do is it should use up the full width of the page.', 'start': 7672.418, 'duration': 5.702}, {'end': 7680.012, 'text': 'You see that? Let me see that.', 'start': 7678.16, 'duration': 1.852}, {'end': 7680.832, 'text': 'Yep I see it.', 'start': 7680.152, 'duration': 0.68}, {'end': 7681.773, 'text': 'Okay So beautiful.', 'start': 7680.912, 'duration': 0.861}, {'end': 7685.354, 'text': 'So I see this with being a hundred percent and it moved it.', 'start': 7681.833, 'duration': 3.521}], 'summary': "Using 'display flex' and 'width 100%' will fill the page's full width.", 'duration': 27.1, 'max_score': 7658.254, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc7658254.jpg'}, {'end': 7935.01, 'src': 'embed', 'start': 7910.417, 'weight': 2, 'content': [{'end': 7916.221, 'text': "So now you don't only just have a design library, you have every single icon that you could possibly want.", 'start': 7910.417, 'duration': 5.804}, {'end': 7922.404, 'text': "And before you think, oh, hang on, isn't that going to be heavy? It cleverly strips out the ones that you don't use.", 'start': 7916.601, 'duration': 5.803}, {'end': 7924.786, 'text': "So it's actually really efficient in how it does that.", 'start': 7922.865, 'duration': 1.921}, {'end': 7928.787, 'text': 'um, but it gives you access to this entire library of icons,', 'start': 7925.685, 'duration': 3.102}, {'end': 7932.288, 'text': "which is going to save you a bunch of headache when you're looking for things exactly like this.", 'start': 7928.787, 'duration': 3.501}, {'end': 7935.01, 'text': 'yep, and where should we drop that?', 'start': 7932.288, 'duration': 2.722}], 'summary': 'New design library includes every icon, efficiently saves time and reduces headache.', 'duration': 24.593, 'max_score': 7910.417, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc7910417.jpg'}, {'end': 8123.868, 'src': 'embed', 'start': 8096.516, 'weight': 0, 'content': [{'end': 8099.177, 'text': "we thought, let's try live training, and then we enjoyed it so much.", 'start': 8096.516, 'duration': 2.661}, {'end': 8101.158, 'text': "we were like, you know, screw it, let's do it every single day.", 'start': 8099.177, 'duration': 1.981}, {'end': 8105.16, 'text': 'yeah, yeah, because i, yeah, we were actually supposed to.', 'start': 8101.158, 'duration': 4.002}, {'end': 8106.8, 'text': 'we were going to do it once a month.', 'start': 8105.16, 'duration': 1.64}, {'end': 8107.761, 'text': 'you remember that, like?', 'start': 8106.8, 'duration': 0.961}, {'end': 8112.623, 'text': "i was like oh, mine's gonna be once a month, sunny's gonna do once a month and we're all gonna do once a month.", 'start': 8107.761, 'duration': 4.862}, {'end': 8114.884, 'text': "and then we're like what about once a week?", 'start': 8112.623, 'duration': 2.261}, {'end': 8117.245, 'text': 'and then sunny and i are like how about once a day?', 'start': 8114.884, 'duration': 2.361}, {'end': 8120.126, 'text': "let's test it, let's see what happens.", 'start': 8117.245, 'duration': 2.881}, {'end': 8123.868, 'text': "nice, and we're actually learning a bunch like we're actually building some pretty cool stuff.", 'start': 8120.126, 'duration': 3.742}], 'summary': 'Decided to do live training daily instead of monthly, leading to learning and building cool stuff.', 'duration': 27.352, 'max_score': 8096.516, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc8096516.jpg'}, {'end': 8158.813, 'src': 'embed', 'start': 8133.763, 'weight': 3, 'content': [{'end': 8138.984, 'text': "yeah, and look at what's awesome is we actually have the disabled functionality.", 'start': 8133.763, 'duration': 5.221}, {'end': 8147.066, 'text': 'so as soon as you start typing, notice how the button populates, so the color comes in right yeah, which is so nice.', 'start': 8138.984, 'duration': 8.082}, {'end': 8155.228, 'text': "that is nice, yeah, because if i'm not typing, then it's disabled and then, as soon as i start typing, hey, it becomes enabled again.", 'start': 8147.066, 'duration': 8.162}, {'end': 8158.813, 'text': "love that exactly, So that's really nice.", 'start': 8155.228, 'duration': 3.585}], 'summary': 'The button becomes enabled when typing, disabled when not; a useful feature.', 'duration': 25.05, 'max_score': 8133.763, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc8133763.jpg'}, {'end': 8921.686, 'src': 'embed', 'start': 8897.252, 'weight': 4, 'content': [{'end': 8904.872, 'text': "And now what this is doing is it's saying, Whenever you have a Flex container, so FormControl is a wrapping container, right? Yeah.", 'start': 8897.252, 'duration': 7.62}, {'end': 8908.195, 'text': "So this is a really good lesson for everyone who's new to Flexbox.", 'start': 8905.132, 'duration': 3.063}, {'end': 8914.54, 'text': 'So FormControl is essentially what is wrapping the enter a message and that little icon that we had.', 'start': 8908.315, 'duration': 6.225}, {'end': 8921.686, 'text': "Flex by default is only going to use up as much space as we want as it needs to, and then it doesn't use up the rest of the space.", 'start': 8915.301, 'duration': 6.385}], 'summary': 'Flexbox lesson for newbies: formcontrol wraps content, uses space efficiently.', 'duration': 24.434, 'max_score': 8897.252, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc8897252.jpg'}], 'start': 7535.053, 'title': 'Ui and app development', 'summary': 'Covers zed index for priority setting, ui coding in javascript for responsive design, daily live training for increased engagement, and flexbox styling in app components.', 'chapters': [{'end': 7596.523, 'start': 7535.053, 'title': 'Zed index and priority setting', 'summary': 'Discusses the use of zed index to set priority in elements, where a zed index greater than zero takes precedence over elements with a zed index of zero, allowing elements with higher zed index to come to the front.', 'duration': 61.47, 'highlights': ['The use of Zed index to set priority in elements, with a Zed index greater than zero taking precedence over elements with a Zed index of zero, allowing elements with higher Zed index to come to the front.', "Explaining that setting a Zed index of one or a hundred would have the same visual impact, as long as it's greater than zero, because it gives the element a higher priority.", 'A discussion about the default Zed index of elements being zero and the concept of giving elements a higher Zed index to prioritize them visually.']}, {'end': 8076.069, 'start': 7596.543, 'title': 'Ui coding in javascript', 'summary': 'Discusses coding a responsive and stylish user interface in javascript, including using flex display, width adjustment, and integrating material ui icons for a sleek design.', 'duration': 479.526, 'highlights': ['The chapter discusses coding a responsive and stylish user interface in JavaScript, including using flex display, width adjustment, and integrating Material UI icons for a sleek design.', "Using 'display flex' for a responsive design and setting the width to 100% allows the UI to utilize the full width of the page, ensuring a responsive and adaptable layout.", 'The use of Material UI icons library for adding icons to the UI, providing a wide range of icons for efficient and appealing design implementation.', 'Applying a 20-pixel margin to create a floating effect for the UI, enhancing the visual appeal and adding a stylish touch to the interface.', 'Replacing the standard button with an icon button to achieve a sleek and modern design, enhancing the user experience and visual appeal of the interface.']}, {'end': 8480.823, 'start': 8078.648, 'title': 'Daily live training and app development', 'summary': 'Discusses the transition from monthly to daily live training sessions, the implementation of real-time app features, and the decision to simplify message display in the app, resulting in increased learning and engagement.', 'duration': 402.175, 'highlights': ['The transition from monthly to daily live training sessions They initially planned for monthly live training sessions but transitioned to daily sessions, resulting in increased engagement and learning opportunities.', 'Implementation of real-time app features The process of implementing real-time app features, such as enabling and disabling buttons based on user actions, is discussed, leading to a more interactive and functional application.', "Simplifying message display in the app The decision to simplify the display of messages in the app by removing the username from the user's own messages is explained, aiming for a cleaner and more user-friendly interface."]}, {'end': 8932.652, 'start': 8481.204, 'title': 'Styling flexbox in app components', 'summary': 'Discusses styling the form control using flexbox in the app component, demonstrating how to override material ui rules and implement flex properties to align the input field and icon button.', 'duration': 451.448, 'highlights': ["Demonstrating how to override Material UI rules to apply custom styling The speaker showcases how Material UI rules are overridden by adding 'important' to the CSS class, effectively demonstrating the process of customizing the styling to align with the desired layout.", 'Implementing flex properties to align the input field and icon button The process of using flex properties to allocate space for the input field and icon button is explained, with the speaker emphasizing the flexibility and responsiveness of this approach across different screen sizes.', 'Explaining the concept of Flexbox and its usage in wrapping containers The concept of Flexbox is introduced, with a focus on its application in wrapping containers such as FormControl, elucidating how it enables the allocation of space for the input field and icon button based on their respective requirements.']}], 'duration': 1397.599, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc7535053.jpg', 'highlights': ['Daily live training sessions resulted in increased engagement and learning opportunities.', "Using 'display flex' for a responsive design and setting the width to 100% allows the UI to utilize the full width of the page.", 'The use of Material UI icons library for adding icons to the UI provides a wide range of icons for efficient and appealing design implementation.', 'The process of implementing real-time app features, such as enabling and disabling buttons based on user actions, leads to a more interactive and functional application.', 'The concept of Flexbox is introduced, with a focus on its application in wrapping containers such as FormControl, elucidating how it enables the allocation of space for the input field and icon button based on their respective requirements.']}, {'end': 10292.201, 'segs': [{'end': 9162.334, 'src': 'heatmap', 'start': 9055.068, 'weight': 0.846, 'content': [{'end': 9064.903, 'text': "Nice There's a few subtle differences like the typography at the top where we have hello clever programmer.", 'start': 9055.068, 'duration': 9.835}, {'end': 9069.947, 'text': "That's something small that we could implement if you want or it's up to you now what we can do.", 'start': 9065.944, 'duration': 4.003}, {'end': 9076.893, 'text': "I think let's deploy this because this is actually a great experience and I think everybody in here would agree that this is awesome.", 'start': 9070.228, 'duration': 6.665}, {'end': 9082.477, 'text': "And I think at this point let's just figure out how to deploy it online so now we can actually use it online.", 'start': 9077.493, 'duration': 4.984}, {'end': 9089.407, 'text': 'Awesome So this is the really cool part, right? So what we need to do now is head over to your terminal.', 'start': 9083.524, 'duration': 5.883}, {'end': 9098.052, 'text': "So we need to head up to your terminal and we just need to do so, for many people that wouldn't have actually set this up before,", 'start': 9091.188, 'duration': 6.864}, {'end': 9100.053, 'text': "they wouldn't have Firebase installed.", 'start': 9098.052, 'duration': 2.001}, {'end': 9103.255, 'text': "So you'd have to do a global install on Firebase tools.", 'start': 9100.073, 'duration': 3.182}, {'end': 9108.298, 'text': "Um, so I think it's MPM install Firebase and then I think it's dash tools.", 'start': 9104.096, 'duration': 4.202}, {'end': 9110.829, 'text': "right?. it's like firebase dash tools.", 'start': 9108.298, 'duration': 2.531}, {'end': 9112.39, 'text': "so i think it's it's all one word.", 'start': 9110.829, 'duration': 1.561}, {'end': 9114.332, 'text': "so firebase dash tools, it's that right there.", 'start': 9112.39, 'duration': 1.942}, {'end': 9117.194, 'text': 'so you would have to do that line right there that we just showed you.', 'start': 9114.332, 'duration': 2.862}, {'end': 9123.759, 'text': "if you don't have firebase installed already, yeah, so this is going to install it across every single project on your computer.", 'start': 9117.194, 'duration': 6.565}, {'end': 9127.402, 'text': 'so it means that whenever you use firebase cli, you have access to it.', 'start': 9123.759, 'duration': 3.643}, {'end': 9130.385, 'text': "so you need to do that before we we run what we're going to do now.", 'start': 9127.402, 'duration': 2.983}, {'end': 9137.274, 'text': 'so the next step is you need to do firebase init right, and this will bring up a really beautiful ui,', 'start': 9130.385, 'duration': 6.889}, {'end': 9145.955, 'text': 'and all you need to do here is use the arrow keys to go down to hosting, enter and use an existing project,', 'start': 9137.274, 'duration': 8.681}, {'end': 9148.076, 'text': 'and here we just need to find the project that we created.', 'start': 9145.955, 'duration': 2.121}, {'end': 9153.337, 'text': 'so facebook messenger, clone, and here is where you need to be careful, guys.', 'start': 9148.076, 'duration': 5.261}, {'end': 9157.418, 'text': 'so the first one you need to write build, build.', 'start': 9153.337, 'duration': 4.081}, {'end': 9159.552, 'text': 'yeah, this is important, guys, Yeah.', 'start': 9157.418, 'duration': 2.134}, {'end': 9160.793, 'text': 'You need to type build here.', 'start': 9159.712, 'duration': 1.081}, {'end': 9162.334, 'text': "So now let's actually show them.", 'start': 9160.813, 'duration': 1.521}], 'summary': 'Deployed facebook messenger clone using firebase tools and initialized hosting with build configuration.', 'duration': 107.266, 'max_score': 9055.068, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc9055068.jpg'}, {'end': 9157.418, 'src': 'embed', 'start': 9130.385, 'weight': 0, 'content': [{'end': 9137.274, 'text': 'so the next step is you need to do firebase init right, and this will bring up a really beautiful ui,', 'start': 9130.385, 'duration': 6.889}, {'end': 9145.955, 'text': 'and all you need to do here is use the arrow keys to go down to hosting, enter and use an existing project,', 'start': 9137.274, 'duration': 8.681}, {'end': 9148.076, 'text': 'and here we just need to find the project that we created.', 'start': 9145.955, 'duration': 2.121}, {'end': 9153.337, 'text': 'so facebook messenger, clone, and here is where you need to be careful, guys.', 'start': 9148.076, 'duration': 5.261}, {'end': 9157.418, 'text': 'so the first one you need to write build, build.', 'start': 9153.337, 'duration': 4.081}], 'summary': 'Use firebase init for hosting, select existing project, and run build command.', 'duration': 27.033, 'max_score': 9130.385, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc9130385.jpg'}, {'end': 9415.456, 'src': 'embed', 'start': 9390.879, 'weight': 1, 'content': [{'end': 9398.084, 'text': "now let's deploy the app and then we'll share the link and then everyone can jump on and see all of this real time stuff happening.", 'start': 9390.879, 'duration': 7.205}, {'end': 9400.246, 'text': 'Nice Serena just said, great work.', 'start': 9398.424, 'duration': 1.822}, {'end': 9402.167, 'text': 'Just signed up for your JS course.', 'start': 9400.326, 'duration': 1.841}, {'end': 9403.888, 'text': 'Awesome So glad to have you.', 'start': 9402.407, 'duration': 1.481}, {'end': 9406.61, 'text': "Nice That's amazing.", 'start': 9404.909, 'duration': 1.701}, {'end': 9408.331, 'text': 'Yeah Okay.', 'start': 9407.13, 'duration': 1.201}, {'end': 9411.834, 'text': 'So what are we doing now, Sonny? So we are going to deploy.', 'start': 9408.471, 'duration': 3.363}, {'end': 9414.655, 'text': 'So in the terminal, we just need to write Firebase deploy.', 'start': 9411.934, 'duration': 2.721}, {'end': 9415.456, 'text': 'Boom Done.', 'start': 9414.976, 'duration': 0.48}], 'summary': 'Deployed app using firebase, received positive feedback, and shared link for real-time interaction.', 'duration': 24.577, 'max_score': 9390.879, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc9390879.jpg'}, {'end': 9634.859, 'src': 'embed', 'start': 9611.113, 'weight': 3, 'content': [{'end': 9618.777, 'text': 'Literally all these people who are in profit with JavaScript community, just helping her and this YouTube, like that is a solid community.', 'start': 9611.113, 'duration': 7.664}, {'end': 9620.358, 'text': 'So positive, so healthy.', 'start': 9618.957, 'duration': 1.401}, {'end': 9621.639, 'text': 'That is amazing.', 'start': 9620.879, 'duration': 0.76}, {'end': 9626.822, 'text': "And so when we see that, that's what makes us come alive and then actually show up all the time for you guys.", 'start': 9621.679, 'duration': 5.143}, {'end': 9634.859, 'text': "yeah, and i think, if it's one thing like, the course is amazing in itself, guys, but the community, the community is like.", 'start': 9628.092, 'duration': 6.767}], 'summary': 'Javascript community is thriving, with strong support and positivity, making everyone feel alive and engaged.', 'duration': 23.746, 'max_score': 9611.113, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc9611113.jpg'}, {'end': 10038.273, 'src': 'embed', 'start': 10012.068, 'weight': 2, 'content': [{'end': 10018.069, 'text': 'just tag us, share your story and then maybe even tell us like what challenge you want to see next.', 'start': 10012.068, 'duration': 6.001}, {'end': 10025.19, 'text': 'Because if we start hearing it from your voice and in person, that is a lot more impactful than like just getting one text message.', 'start': 10018.469, 'duration': 6.721}, {'end': 10025.971, 'text': 'you know out of the many.', 'start': 10025.19, 'duration': 0.781}, {'end': 10031.932, 'text': "So if we can see why you want some kind of, so I'll just give you some ideas, right? The e-commerce project.", 'start': 10026.411, 'duration': 5.521}, {'end': 10038.273, 'text': 'Somebody dropped in a message earlier with a good project idea and I forgot what it was.', 'start': 10033.372, 'duration': 4.901}], 'summary': 'Encourage audience to share stories and challenges for impactful engagement.', 'duration': 26.205, 'max_score': 10012.068, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc10012068.jpg'}], 'start': 8932.652, 'title': 'App clones and user engagement', 'summary': 'Covers topics such as deploying a facebook messenger clone, timestamped tutorials for app deployment, a tiktok lookalike discussion, and engaging the audience for app ideas, emphasizing community interaction and live sessions.', 'chapters': [{'end': 9260.217, 'start': 8932.652, 'title': 'Facebook messenger clone deployment', 'summary': 'Discusses the deployment of a facebook messenger clone, covering topics such as optimizing ui, handling user input, and deploying the app using firebase, emphasizing the importance of configuring the build and running npm run build for production optimization.', 'duration': 327.565, 'highlights': ['The chapter discusses the deployment of a Facebook Messenger clone, covering topics such as optimizing UI, handling user input, and deploying the app using Firebase, emphasizing the importance of configuring the build and running npm run build for production optimization.', 'The tutorial emphasizes the significance of configuring the build correctly and running npm run build to strip out unnecessary developer tools and optimize the production environment, ensuring that the app is ready for deployment.', 'The transcript details the process of deploying a Facebook Messenger clone, including optimizing UI elements, handling user input scenarios, and using Firebase for deployment, with an emphasis on configuring the build and running npm run build for production optimization.', 'The tutorial provides step-by-step guidance on deploying a Facebook Messenger clone, covering topics such as optimizing UI, handling user input, and using Firebase for deployment, highlighting the importance of configuring the build and running npm run build for production optimization.']}, {'end': 9739.832, 'start': 9260.757, 'title': 'Timestamped tutorials and app deployment', 'summary': 'Discusses the importance of timestamped tutorials with clickable timestamps, the process of deploying an app, and the positive community interaction during the live session, with a focus on engagement and community support.', 'duration': 479.075, 'highlights': ['The community interaction and engagement during the live session was positive and supportive, with community members helping each other and creating a welcoming environment. Community members actively engaged in helping each other during the live session, creating a positive and supportive environment.', 'The importance of timestamped tutorials with clickable timestamps for easy navigation and user convenience was emphasized. The speaker highlighted the significance of timestamped tutorials with clickable timestamps for user convenience and easy navigation through the content.', 'The process of deploying the app was successfully completed with the link being shared and positive feedback received from the audience. The app deployment process was successfully completed, and positive feedback was received from the audience upon sharing the deployed link.']}, {'end': 9988.756, 'start': 9740.792, 'title': 'Tiktok lookalike', 'summary': 'Discusses a tiktok video of a girl resembling maribond, leading to a discussion among friends, with comments on resemblance and talents, along with technical difficulties during the livestream.', 'duration': 247.964, 'highlights': ['The friends discuss a TikTok video of a girl resembling Maribond, with multiple people independently noting the resemblance.', "They comment on the girl's talents, including her ability to make good TikTok content and sing, with a specific mention of Maribond's dancing skills.", 'The chapter also includes technical difficulties during the livestream, as the speaker attempts to enable system sounds for the audience.']}, {'end': 10292.201, 'start': 9989.795, 'title': 'Engaging audience for app ideas', 'summary': 'Highlights the creators seeking app ideas from the audience, emphasizing the importance of audience engagement and expressing interest in building various app clones, with plans to go live the next day between 8 a.m. to 10 a.m.', 'duration': 302.406, 'highlights': ['Creators seek app ideas from the audience and emphasize the importance of audience engagement. The creators encourage the audience to share their app ideas and challenges, highlighting the impact of receiving inputs from the audience for app development.', 'Creators express interest in building various app clones, including Instagram, TikTok, YouTube, and a music app. The creators express enthusiasm for building various app clones such as Instagram, TikTok, YouTube, and a music app, showing a willingness to consider and develop diverse ideas provided by the audience.', 'Plans to go live the next day between 8 a.m. to 10 a.m. for audience engagement. The creators outline their plans to go live the next day between 8 a.m. to 10 a.m., demonstrating a commitment to engage with the audience and involve them in the app development process.']}], 'duration': 1359.549, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KB7JEnfc7Dc/pics/KB7JEnfc7Dc8932652.jpg', 'highlights': ['The tutorial provides step-by-step guidance on deploying a Facebook Messenger clone, covering topics such as optimizing UI, handling user input, and using Firebase for deployment, highlighting the importance of configuring the build and running npm run build for production optimization.', 'The process of deploying the app was successfully completed with the link being shared and positive feedback received from the audience.', 'The creators encourage the audience to share their app ideas and challenges, highlighting the impact of receiving inputs from the audience for app development.', 'The community interaction and engagement during the live session was positive and supportive, with community members helping each other and creating a welcoming environment.']}], 'highlights': ['The process of deploying the app was successfully completed with the link being shared and positive feedback received from the audience.', 'The creators encourage the audience to share their app ideas and challenges, highlighting the impact of receiving inputs from the audience for app development.', 'The community interaction and engagement during the live session was positive and supportive, with community members helping each other and creating a welcoming environment.', 'Daily live training sessions resulted in increased engagement and learning opportunities.', "Using 'display flex' for a responsive design and setting the width to 100% allows the UI to utilize the full width of the page.", 'The use of Material UI icons library for adding icons to the UI provides a wide range of icons for efficient and appealing design implementation.', 'The process of implementing real-time app features, such as enabling and disabling buttons based on user actions, leads to a more interactive and functional application.', 'The concept of Flexbox is introduced, with a focus on its application in wrapping containers such as FormControl, elucidating how it enables the allocation of space for the input field and icon button based on their respective requirements.', 'The tutorial provides step-by-step guidance on deploying a Facebook Messenger clone, covering topics such as optimizing UI, handling user input, and using Firebase for deployment, highlighting the importance of configuring the build and running npm run build for production optimization.', "The chapter discusses implementing the React Flipmove library for smooth, slick behavior in a React app using functional components, forward ref, and a key component, enhancing the component's functionality and efficiency.", 'The importance of providing a key component in React to efficiently re-render lists is highlighted, improving the performance of the app when dealing with a large number of messages.', 'The significance of using unique keys in React is emphasized, demonstrating how it affects rendering efficiency and prevents glitches in the app.', 'The app discussion involves styling and deploying, including adding a message feature with a Messenger logo and positioning it fixed at the bottom of the screen for a cleaner look, with specific code details and examples.', "Firebase's real-time database implementation and its ease of use and powerful features are emphasized, contrasting it with other services like Amazon AWS.", 'The significance of two-way database sync is underscored for achieving real-time and fast performance, especially when compared to the challenges and complexities faced with services like Amazon AWS.', 'Using server timestamp is highlighted to maintain consistency across various time zones, ensuring accurate and synchronized data recording and display.', 'The importance of adding timestamps to messages is emphasized to ensure that the most recent messages appear at the top, improving user experience and message organization.', 'The discussion focuses on using Firebase to ensure real-time data updates, enhancing user experience and application functionality.', 'The chapter focuses on the implementation of a real-time database in Firebase, showcasing the process of pushing and sorting messages in the database.', 'The chapter emphasizes the importance of hosting the website to make it accessible online, ensuring that the data is not lost upon page refresh, ultimately enhancing user experience.', 'The process involves setting up a Firestore database and hosting the website to enable real-time data storage and accessibility online, addressing the issue of data loss upon page refresh.', 'Accessing the Firestore database and exporting the database variable It details the process of accessing the Firestore database and assigning it to a variable, which is then exported for use in other files.', 'The code acts as a listener, capturing and displaying real-time changes in the database, exemplified by adding and viewing data without the need for manual refresh, showcasing the power of the real-time sync.', "The chapter illustrates the real-time synchronization and capture of data from the Firebase database, eliminating the need for hardcoded content and demonstrating the app's direct interaction with the database for data retrieval and display.", 'The restructuring of message data from flat strings to objects with user and text properties is explained, with the example of creating objects for Sonny and Kazi with respective messages.', 'The chapter discusses the transition of messages from strings to objects, requiring modifications in the app to properly handle the new structure.', 'The decision to style the messages using Material UI and the process of implementing the styling through card elements and CSS are discussed.', 'The use of state and set state functions in React allows for handling user input and updating the UI without directly manipulating variables.', 'The use effect function in React is utilized to run code based on conditions and dependencies, with the option to specify running the code once or on specific conditions.', 'Emphasizes the benefits of using React over AJAX for building scalable apps in a maintainable, scalable way.', "React's popularity and lightweight nature are emphasized, with a comparison to Angular's complexity and declining job market demand.", 'The chapter discusses implementing a user input prompt, setting up state using useState, and executing code based on a condition using useEffect.', 'Adding margin to separate messages for improved look and feel.', 'Styling message with padding and width adjustments for better fit.', 'Differentiating the current message in a Messenger app for clarity.', "Implementing conditional styling for user's messages using ES6 destructuring.", 'Utilizing BEM convention for consistent styling and organization.', 'Explanation of BEM convention and its benefits for app consistency.', 'The emphasis is on baby steps and small chunks of development. The approach recommended in the chapter is to take small, manageable steps in development without overcomplicating the process.', 'The process of connecting the input state to the input field is crucial for capturing and using the typed input, allowing for the remembering of input values for future use.', "The importance of using 'set' methods to modify state values is emphasized, as attempting to directly change the state value can lead to issues.", 'Demonstration of the use of the ES6 map function to iterate through an array and render dynamic content, providing a cleaner alternative to traditional for loops.', "Styling Buttons with Material UI The process of styling buttons with Material UI is detailed, including changing the button's look and feel, utilizing variants and colors, and achieving a clean and appealing design.", 'Creating a message component using React components and props The chapter focuses on creating a message component in React, allowing for reusable components and the ability to change message contents through props.', 'The chapter covers the process of setting up a Facebook Messenger clone using Firebase, including creating a React project, setting up Firebase services, and highlighting the simplicity and power of Firebase for real-time database management.', 'Community of 259 people The live session involves a community of 259 people, showcasing the engagement and interest in the topic.', 'Demonstrating building a Facebook Messenger clone in a live session The chapter features a live demonstration of building a Facebook Messenger clone, providing a hands-on learning experience.']}