title
ASMR | Build Disney+ with React JS (Firebase + Styled Components + Redux)

description
🚀 Learn React JS for FREE: https://www.cleverprogrammer.com/free?utm_source=youtube&utm_medium=yt-description&utm_campaign=fem-all-day&utm_content=asmr-disney-clone 🚀 Get the BEST React JS Course: https://cleverprogrammer.com/pwj?utm_source=youtube&utm_medium=yt-description&utm_content=21-april-disney-plus-clone-asmr&utm_youtuber=qazi&utm_editor=kyle-david ⭐ Join the BEST Discord Community for Developers on the planet 👉 https://www.cleverprogrammer.com/discord HERE'S THE CODE 👨💻: https://github.com/CleverProgrammers/cp-disney-plus-clone HERE are the IMAGES & VIDEOS: https://drive.google.com/drive/folders/13SvUkXPh7ZC1FRtp62VKFi572elZyxi8?usp=sharing In this FREE LIVE training, Qazi will show you how to create a full stack, Disney+ CLONE using React, Firebase, Redux, and Styled Components... 👇 This training covers the following: 👉 Building a Disney+ Clone App 💻 👉 How to handle authentication with Firebase 🔑 👉 How to upload images to Firebase Storage and use them on your site! 🖥️ 👉 Real-time database with Firebase’s Firestore 🔥 🌟 Course Contents 🌟 ⌨️: 00:00 - Disney+ Clone Build Showcase ⌨️: 04:17 - Initialize Project (Create React App) ⌨️: 06:50 - Clean Up Project ⌨️: 08:11 - Global Styling ⌨️: 10:20 - Add Mobile Responsiveness ⌨️: 12:14 - Create Login Component ⌨️: 16:30 - Center Text ⌨️: 23:04 - Add Background Image ⌨️: 27:21 - Add Logos Image ⌨️: 36:10 - Add Signup Button ⌨️: 39:50 - Add Description ⌨️: 43:29 - Add Logos Image ⌨️: 46:16 - Add navBar with Disney Logo ⌨️: 56:27 - Add navMenu Setup ⌨️: 01:00:37 - Add Home navMenu Icon ⌨️: 01:14:51 - Add Remaining navMenus in Header ⌨️: 01:16:37 - Add Login Button ⌨️: 01:21:05 - Setup Firebase ⌨️: 01:25:50 - Add Sign In with Google Popup ⌨️: 01:30:29 - Add Complete Sign In Functionality with Redux ⌨️: 01:58:28 - Finish Login Functionality & Redirect User ⌨️: 02:04:29 - Add Sign Out Functionality ⌨️: 02:16:02 - Add Background on Home Page ⌨️: 02:22:32 - Add React Slick Carousel ⌨️: 02:27:59 - Add Image Slider ⌨️: 02:42:13 - Add Viewers & Images ⌨️: 02:53:44 - Add Video to Viewers ⌨️: 03:01:11 - Add Recommends Component ⌨️: 03:12:46 - Setup Originals, New Disney and Recommends Components ⌨️: 03:15:49 - Create Redux State Slice for Getting Movies ⌨️: 03:19:18 - Add to Firebase & Display Movies ⌨️: 03:34:39 - Stuff ’n’ Things ⌨️: 03:42:11 - Add all Movie Categories ⌨️: 03:47:54 - Add Detail Background Image ⌨️: 03:56:12 - Add Image Title ⌨️: 04:00:14 - Add Play Button ⌨️: 04:08:45 - Add Trailer ⌨️: 04:11:03 - Add the addList Icon Next to Trailer ⌨️: 04:16:19 - Add Subtitle and Description ⌨️: 04:23:24 - Get Detail of Movie from Firebase ⌨️: 04:34:18 - Deploy Disney+ to Firebase #reactjs #asmr #build #javascript #developer #webdeveloper Biz / Sponsorships 👉 https://www.cleverprogrammer.com/partnerships

detail
{'title': 'ASMR | Build Disney+ with React JS (Firebase + Styled Components + Redux)', 'heatmap': [{'end': 885.992, 'start': 672.21, 'weight': 0.712}, {'end': 5400.384, 'start': 4890.981, 'weight': 1}, {'end': 12153.216, 'start': 11970.566, 'weight': 0.745}], 'summary': 'Demonstrates building an asmr disney plus clone with google authentication and video auto-play, launching a coding bootcamp, implementing react components, firebase integration, redux usage, conditional rendering, image slider, grid layout, movie data management, bug fixing, and detailed styling of ui components, resulting in an engaging and visually appealing web platform.', 'chapters': [{'end': 719.44, 'segs': [{'end': 158.575, 'src': 'embed', 'start': 44.128, 'weight': 0, 'content': [{'end': 52.292, 'text': 'it transforms, it expands and it auto plays the video in the background which is so slick, Right? Boom.', 'start': 44.128, 'duration': 8.164}, {'end': 55.955, 'text': 'If I click into one of these, look at how good this looks.', 'start': 52.732, 'duration': 3.223}, {'end': 61.158, 'text': 'This is the Disney Plus clone.', 'start': 58.797, 'duration': 2.361}, {'end': 64.26, 'text': "This is what you're gonna be building today.", 'start': 61.699, 'duration': 2.561}, {'end': 65.842, 'text': 'So guys, one last thing.', 'start': 64.281, 'duration': 1.561}, {'end': 73.768, 'text': "Let's also check out on our phone how this feels, okay? So let's go and now use it with our phone.", 'start': 66.803, 'duration': 6.965}, {'end': 74.928, 'text': 'Click login.', 'start': 74.168, 'duration': 0.76}, {'end': 76.369, 'text': 'Look at that.', 'start': 75.769, 'duration': 0.6}, {'end': 100.202, 'text': "Guys, this is the product you're gonna be building today.", 'start': 95.52, 'duration': 4.682}, {'end': 103.923, 'text': 'This is an ASMR Disney Plus clone.', 'start': 100.982, 'duration': 2.941}, {'end': 105.564, 'text': 'Never been done before.', 'start': 104.263, 'duration': 1.301}, {'end': 109.505, 'text': "If you're excited, smash that like button.", 'start': 106.304, 'duration': 3.201}, {'end': 111.946, 'text': 'Break that like button.', 'start': 110.586, 'duration': 1.36}, {'end': 118.349, 'text': 'Hit subscribe to this channel so you can see a lot of goodness just like this and have your mind blown.', 'start': 112.186, 'duration': 6.163}, {'end': 120.67, 'text': 'You bad boy, you bad girl.', 'start': 118.829, 'duration': 1.841}, {'end': 122.43, 'text': "All right, whoever's watching this.", 'start': 121.11, 'duration': 1.32}, {'end': 127.147, 'text': 'And with that said, this up.', 'start': 122.91, 'duration': 4.237}, {'end': 129.907, 'text': "Let's go.", 'start': 129.467, 'duration': 0.44}, {'end': 142.971, 'text': 'Now one thing before we get started if you want to turn coding from your passion into your career and in the next six months you want to completely change your life,', 'start': 131.128, 'duration': 11.843}, {'end': 147.632, 'text': 'we just launched our coding bootcamp called Full Stack Mastery.', 'start': 142.971, 'duration': 4.661}, {'end': 151.093, 'text': 'It is the best coding bootcamp in the world.', 'start': 148.072, 'duration': 3.021}, {'end': 157.674, 'text': 'And we these skills and get a job in six months.', 'start': 151.733, 'duration': 5.941}, {'end': 158.575, 'text': 'All right.', 'start': 158.255, 'duration': 0.32}], 'summary': 'Building an asmr disney plus clone, promoting a coding bootcamp for career change.', 'duration': 114.447, 'max_score': 44.128, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw44128.jpg'}, {'end': 232.212, 'src': 'embed', 'start': 198.098, 'weight': 6, 'content': [{'end': 202.6, 'text': "We'll break down the big databases like MySQL, Mongo, and Firebase.", 'start': 198.098, 'duration': 4.502}, {'end': 211.264, 'text': "And in this video, I'll also show you how you can actually apply to our exclusive full stack mastery coding bootcamp.", 'start': 203.26, 'duration': 8.004}, {'end': 212.785, 'text': "That's a freaking mouthful.", 'start': 211.464, 'duration': 1.321}, {'end': 218.568, 'text': "And we'll show you what it takes to get job offers from big tech companies like Facebook.", 'start': 213.225, 'duration': 5.343}, {'end': 227.469, 'text': 'And and email address.', 'start': 218.728, 'duration': 8.741}, {'end': 228.09, 'text': 'All right.', 'start': 227.489, 'duration': 0.601}, {'end': 232.212, 'text': "Once you do that, you'll get access to this training.", 'start': 228.79, 'duration': 3.422}], 'summary': 'Break down big databases, apply to coding bootcamp, get job offers from big tech companies.', 'duration': 34.114, 'max_score': 198.098, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw198098.jpg'}, {'end': 317.698, 'src': 'embed', 'start': 285.947, 'weight': 7, 'content': [{'end': 290.256, 'text': 'Other than that, NPX Create React app, YouTube Disney clone.', 'start': 285.947, 'duration': 4.309}, {'end': 291.598, 'text': 'Hit enter.', 'start': 291.057, 'duration': 0.541}, {'end': 302.769, 'text': 'ready to go ahead and get started.', 'start': 300.828, 'duration': 1.941}, {'end': 305.991, 'text': "So we're just waiting for all of this to finish up.", 'start': 303.389, 'duration': 2.602}, {'end': 313.395, 'text': 'This is just installing all the dependencies and everything that we are going to need for this project later on.', 'start': 306.011, 'duration': 7.384}, {'end': 315.236, 'text': "That's what's happening right now.", 'start': 313.835, 'duration': 1.401}, {'end': 317.137, 'text': 'Okay So, boom, there you go.', 'start': 315.296, 'duration': 1.841}, {'end': 317.698, 'text': "It's done.", 'start': 317.177, 'duration': 0.521}], 'summary': 'Finished setting up npx create react app and youtube disney clone.', 'duration': 31.751, 'max_score': 285.947, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw285947.jpg'}, {'end': 681.312, 'src': 'embed', 'start': 632.28, 'weight': 8, 'content': [{'end': 641.864, 'text': "for the color, we can actually just have it be the white color that we're using for text decoration.", 'start': 632.28, 'duration': 9.584}, {'end': 648.427, 'text': 'we want none, and what that basically does is it removes that little underline.', 'start': 641.864, 'duration': 6.563}, {'end': 662.147, 'text': "We'll do min with 768 pixels.", 'start': 658.066, 'duration': 4.081}, {'end': 671.309, 'text': 'Now media queries are for mobile, okay? So let me go ahead and show you this.', 'start': 664.128, 'duration': 7.181}, {'end': 675.17, 'text': "So I'm gonna paste it over here, boom, okay.", 'start': 672.21, 'duration': 2.96}, {'end': 681.312, 'text': 'Media queries are for mobile devices and large devices.', 'start': 676.631, 'duration': 4.681}], 'summary': 'Using white color for text decoration, removing underline, and setting media queries for mobile and large devices.', 'duration': 49.032, 'max_score': 632.28, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw632280.jpg'}], 'start': 8.795, 'title': 'Asmr disney plus clone and coding bootcamp launch', 'summary': 'Covers building an asmr disney plus clone with google authentication and video auto-play, emphasizing uniqueness. it also highlights the launch of a coding bootcamp promising to change lives in six months, offering training on technologies like react, redux, and firebase, and guidance on web development projects, with a focus on styling and media queries.', 'chapters': [{'end': 129.907, 'start': 8.795, 'title': 'Build asmr disney plus clone', 'summary': 'Covers building an asmr disney plus clone with features like google authentication powered by firebase and video auto-play, and emphasizes the uniqueness of the product, encouraging viewers to like and subscribe.', 'duration': 121.112, 'highlights': ['The ASMR Disney Plus clone features Google authentication powered by Firebase and video auto-play, creating a unique product.', 'The presenter encourages viewers to like and subscribe to the channel to witness similar content, emphasizing engagement.', 'The demonstration showcases the slick design and functionality of the ASMR Disney Plus clone, creating an engaging user experience.', 'The presenter emphasizes the novelty of the ASMR Disney Plus clone, stating that it has never been done before.']}, {'end': 719.44, 'start': 131.128, 'title': 'Coding bootcamp launch and web development training', 'summary': 'Highlights the launch of a coding bootcamp promising to help individuals change their lives in six months, offers valuable training on technologies like react, redux, and firebase, and provides guidance on starting a web development project, with a focus on styling and media queries.', 'duration': 588.312, 'highlights': ['The chapter highlights the launch of a coding bootcamp promising to help individuals change their lives in six months, offers valuable training on technologies like React, Redux, and Firebase, and provides guidance on starting a web development project, with a focus on styling and media queries. Launch of coding bootcamp, promise of life change in six months, valuable training on React, Redux, Firebase, guidance on starting web development project, focus on styling and media queries', 'The bootcamp promises to help individuals change their lives in six months and guarantees job placement after acquiring the skills. Promise of life change in six months, job placement guarantee', 'The training provides instruction on important technologies like React, Redux, and Firebase, and covers big databases like MySQL, Mongo, and Firebase. Instruction on React, Redux, Firebase, coverage of MySQL, Mongo, Firebase', 'Guidance is given on starting a web development project, including installing Node.js, creating a React app, and managing project dependencies. Guidance on starting web development project, installing Node.js, creating React app, managing project dependencies', 'Styling and media queries are demonstrated, including setting background colors, font families, and handling media queries for mobile devices. Demonstration of styling, media queries, setting background colors, font families, media queries for mobile devices']}], 'duration': 710.645, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw8795.jpg', 'highlights': ['The ASMR Disney Plus clone features Google authentication powered by Firebase and video auto-play, creating a unique product.', 'The presenter emphasizes the novelty of the ASMR Disney Plus clone, stating that it has never been done before.', 'The demonstration showcases the slick design and functionality of the ASMR Disney Plus clone, creating an engaging user experience.', 'The presenter encourages viewers to like and subscribe to the channel to witness similar content, emphasizing engagement.', 'The chapter highlights the launch of a coding bootcamp promising to help individuals change their lives in six months, offers valuable training on technologies like React, Redux, and Firebase, and provides guidance on starting a web development project, with a focus on styling and media queries.', 'The bootcamp promises to help individuals change their lives in six months and guarantees job placement after acquiring the skills.', 'The training provides instruction on important technologies like React, Redux, and Firebase, and covers big databases like MySQL, Mongo, and Firebase.', 'Guidance is given on starting a web development project, including installing Node.js, creating a React app, and managing project dependencies.', 'Styling and media queries are demonstrated, including setting background colors, font families, and handling media queries for mobile devices.']}, {'end': 1631.221, 'segs': [{'end': 831.007, 'src': 'embed', 'start': 720.602, 'weight': 0, 'content': [{'end': 729.995, 'text': "Next up, we're gonna be covering and adding styled components, okay? And we're gonna start working on the login component.", 'start': 720.602, 'duration': 9.393}, {'end': 731.897, 'text': 'Great job, buddy.', 'start': 731.036, 'duration': 0.861}, {'end': 752.248, 'text': 'style components.', 'start': 751.027, 'duration': 1.221}, {'end': 753.608, 'text': "So let's go ahead and do that.", 'start': 752.268, 'duration': 1.34}, {'end': 757.069, 'text': 'So I just did yarn add style components.', 'start': 754.749, 'duration': 2.32}, {'end': 760.11, 'text': 'You could do npm install style components as well.', 'start': 757.089, 'duration': 3.021}, {'end': 766.413, 'text': "I'm going to do yarn add react router DOM.", 'start': 761.311, 'duration': 5.102}, {'end': 768.433, 'text': 'Okay, great.', 'start': 767.513, 'duration': 0.92}, {'end': 770.654, 'text': 'Both of those are installed.', 'start': 768.893, 'duration': 1.761}, {'end': 786.738, 'text': 'Router allows us to do is go back between pages without having to refresh.', 'start': 780.896, 'duration': 5.842}, {'end': 788.738, 'text': "So let's go ahead and do that.", 'start': 787.498, 'duration': 1.24}, {'end': 790.879, 'text': "I'm gonna delete this for now.", 'start': 789.498, 'duration': 1.381}, {'end': 800.862, 'text': 'Okay, I imported Router from React Router.', 'start': 796.9, 'duration': 3.962}, {'end': 803.942, 'text': 'All right, make sure you do that.', 'start': 801.762, 'duration': 2.18}, {'end': 806.383, 'text': "And actually what we're gonna do is this.", 'start': 804.363, 'duration': 2.02}, {'end': 813.824, 'text': "We're gonna import Router as router.", 'start': 808.404, 'duration': 5.42}, {'end': 817.584, 'text': "We'll import all of these.", 'start': 816.304, 'duration': 1.28}, {'end': 826.406, 'text': "Okay And we'll do that.", 'start': 817.604, 'duration': 8.802}, {'end': 831.007, 'text': "We'll need all of these soon enough.", 'start': 829.246, 'duration': 1.761}], 'summary': 'Covering styled components and adding react router for page navigation', 'duration': 110.405, 'max_score': 720.602, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw720602.jpg'}, {'end': 1017.611, 'src': 'embed', 'start': 981.158, 'weight': 5, 'content': [{'end': 983.122, 'text': "We're making brilliant progress so far.", 'start': 981.158, 'duration': 1.964}, {'end': 985.407, 'text': 'We got one component in.', 'start': 983.724, 'duration': 1.683}, {'end': 990.979, 'text': "Now we're gonna start adding more and more onto this, okay? So let's keep on going.", 'start': 986.029, 'duration': 4.95}, {'end': 991.956, 'text': 'All right.', 'start': 991.636, 'duration': 0.32}, {'end': 997.9, 'text': 'Now what we got to do is we got to make sure that this login is centered.', 'start': 992.016, 'duration': 5.884}, {'end': 1000.041, 'text': "Okay That's what we got to do.", 'start': 998.32, 'duration': 1.721}, {'end': 1004.163, 'text': "Kind of like everything that's centered here, all this content.", 'start': 1000.141, 'duration': 4.022}, {'end': 1008.386, 'text': "Okay So I'm going to do a couple of things here.", 'start': 1005.064, 'duration': 3.322}, {'end': 1017.611, 'text': "I want to make sure that we add, remove this and let's add a container.", 'start': 1009.166, 'duration': 8.445}], 'summary': 'Making progress with one component in, focusing on centering login and adding a container.', 'duration': 36.453, 'max_score': 981.158, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw981158.jpg'}, {'end': 1180.569, 'src': 'embed', 'start': 1138.459, 'weight': 2, 'content': [{'end': 1150.483, 'text': 'this thing right here is going to be our content, okay, so the outside is going to be our section and this is going to be our div.', 'start': 1138.459, 'duration': 12.024}, {'end': 1160.227, 'text': 'okay, and how we have it going up and down is by doing making it flex and giving it a flex direction of columns.', 'start': 1150.483, 'duration': 9.744}, {'end': 1169.005, 'text': "So now let's get to work, baby girl.", 'start': 1166.604, 'duration': 2.401}, {'end': 1173.427, 'text': 'Cause react daddies here have no fear.', 'start': 1171.206, 'duration': 2.221}, {'end': 1178.288, 'text': "And now we're going to do flex direction.", 'start': 1176.328, 'duration': 1.96}, {'end': 1180.569, 'text': 'Give it a column like this.', 'start': 1178.408, 'duration': 2.161}], 'summary': 'Using flexbox to style content with column flex direction.', 'duration': 42.11, 'max_score': 1138.459, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw1138459.jpg'}, {'end': 1345.001, 'src': 'embed', 'start': 1309.746, 'weight': 4, 'content': [{'end': 1317.571, 'text': "okay, if you hit inspect remember, you can always hit inspect and see what's going on here, right?", 'start': 1309.746, 'duration': 7.825}, {'end': 1324.076, 'text': 'so we got that big big container outside and then we got content inside.', 'start': 1317.571, 'duration': 6.505}, {'end': 1326.518, 'text': 'okay, so this is the section.', 'start': 1324.076, 'duration': 2.442}, {'end': 1328.519, 'text': 'this is the big one.', 'start': 1326.518, 'duration': 2.001}, {'end': 1339.818, 'text': "it creates a randomly generated hash name class name, but I'll show it to you like this This glass here.", 'start': 1328.519, 'duration': 11.299}, {'end': 1343.02, 'text': 'Let me see if I can make it bigger.', 'start': 1341.499, 'duration': 1.521}, {'end': 1345.001, 'text': 'Okay, great.', 'start': 1344.301, 'duration': 0.7}], 'summary': 'Demonstrating how to inspect elements and identify content in a container.', 'duration': 35.255, 'max_score': 1309.746, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw1309746.jpg'}, {'end': 1506.616, 'src': 'embed', 'start': 1468.39, 'weight': 7, 'content': [{'end': 1473.031, 'text': "and I'll show you what this does, okay? Let's actually start it off with just adding the image.", 'start': 1468.39, 'duration': 4.641}, {'end': 1483.975, 'text': "So that should add the image, but look, it's doing something weird with the image where we cannot even see it.", 'start': 1478.573, 'duration': 5.402}, {'end': 1486.555, 'text': "So let's do a couple of things.", 'start': 1484.655, 'duration': 1.9}, {'end': 1491.837, 'text': "Let's try making the height 100%.", 'start': 1487.236, 'duration': 4.601}, {'end': 1496.098, 'text': "Why does it do that weird autocomplete? Okay, that still didn't bring it.", 'start': 1491.837, 'duration': 4.261}, {'end': 1498.059, 'text': "Let's try background position.", 'start': 1496.358, 'duration': 1.701}, {'end': 1506.616, 'text': "So that's good.", 'start': 1506.036, 'duration': 0.58}], 'summary': 'Troubleshooting image display issue and adjusting css properties to fix it.', 'duration': 38.226, 'max_score': 1468.39, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw1468390.jpg'}, {'end': 1631.221, 'src': 'embed', 'start': 1546.756, 'weight': 6, 'content': [{'end': 1551.42, 'text': 'I said, hey, go to images and then get me this thing.', 'start': 1546.756, 'duration': 4.664}, {'end': 1556.924, 'text': 'Login background.jpg.', 'start': 1554.042, 'duration': 2.882}, {'end': 1560.006, 'text': 'Oh, oh, oh, oh, oh, oh, oh, oh, oh.', 'start': 1556.944, 'duration': 3.062}, {'end': 1560.487, 'text': 'How silly.', 'start': 1560.066, 'duration': 0.421}, {'end': 1561.908, 'text': 'How silly.', 'start': 1561.307, 'duration': 0.601}, {'end': 1573.317, 'text': "So now let's see what happens, right? Save, refresh.", 'start': 1568.413, 'duration': 4.904}, {'end': 1574.678, 'text': "So I can't see it.", 'start': 1573.797, 'duration': 0.881}, {'end': 1578.021, 'text': "Now, first thing is I'm going to give it a height.", 'start': 1575.759, 'duration': 2.262}, {'end': 1583.065, 'text': 'Okay Still nothing.', 'start': 1580.583, 'duration': 2.482}, {'end': 1584.906, 'text': "Let's give it a position of top.", 'start': 1583.425, 'duration': 1.481}, {'end': 1586.588, 'text': 'Still nothing.', 'start': 1585.847, 'duration': 0.741}, {'end': 1587.708, 'text': 'Give it a cover.', 'start': 1586.968, 'duration': 0.74}, {'end': 1589.67, 'text': 'Still nothing.', 'start': 1588.909, 'duration': 0.761}, {'end': 1593.073, 'text': "That's interesting, right? Position absolute.", 'start': 1590.591, 'duration': 2.482}, {'end': 1595.935, 'text': 'So when did it decide to show up??', 'start': 1594.414, 'duration': 1.521}, {'end': 1604.042, 'text': 'is so what that allows it to do?', 'start': 1600.72, 'duration': 3.322}, {'end': 1613.046, 'text': 'is it goes make sure that this actually has a very low priority at all times, okay, so that means when i add more stuff,', 'start': 1604.042, 'duration': 9.004}, {'end': 1624.778, 'text': 'You could give it a negative 9, 000, 9 million.', 'start': 1621.957, 'duration': 2.821}, {'end': 1625.679, 'text': "It doesn't matter.", 'start': 1625.018, 'duration': 0.661}, {'end': 1631.221, 'text': 'But just by default, everything is going to have a z-index of higher than this.', 'start': 1626.519, 'duration': 4.702}], 'summary': 'Struggling with css positioning and z-index, experimenting with different properties and values.', 'duration': 84.465, 'max_score': 1546.756, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw1546756.jpg'}], 'start': 720.602, 'title': 'Implementing react components and navigation', 'summary': 'Covers adding styled components and implementing react router dom for page navigation without refreshing, while also discussing creating react components, styling them using styled components, and adding a login background image with a focus on addressing display challenges and utilizing css properties.', 'chapters': [{'end': 831.007, 'start': 720.602, 'title': 'Adding styled components and react router dom', 'summary': 'Covers adding styled components and implementing react router dom to enable page navigation without refreshing, while also installing the necessary packages.', 'duration': 110.405, 'highlights': ['Installing style components and react router DOM using yarn and npm, respectively, for package setup.', 'Importing Router from React Router and configuring it to enable page navigation without refreshing, emphasizing the importance of these actions for the upcoming tasks.']}, {'end': 1393.323, 'start': 837.748, 'title': 'React components and styling', 'summary': 'Discusses the process of creating react components, styling them using styled components, and ensuring their proper alignment and display, with a focus on centering content and using flexbox for layout.', 'duration': 555.575, 'highlights': ['The process of creating React components and ensuring their proper alignment and display is detailed, with a focus on centering content and using flexbox for layout.', 'The use of styled components for styling React components is highlighted as a clean and convenient approach.', 'The troubleshooting process for errors and the steps taken to resolve them are outlined, emphasizing the importance of inspecting elements for debugging.', 'The chapter also emphasizes the importance of making brilliant progress in adding more components and continuously improving the application.']}, {'end': 1631.221, 'start': 1393.323, 'title': 'Adding login background image', 'summary': 'Describes the process of adding a login background image, encountering challenges with the image display, and utilizing css properties to adjust its appearance, ultimately demonstrating the use of z-index in solving display issues.', 'duration': 237.898, 'highlights': ['The chapter explains the process of adding a login background image and encountering difficulties in its display, highlighting the need for adjustments in CSS properties for proper presentation.', 'The speaker demonstrates the use of CSS properties such as height, background position, background size, and position absolute in attempting to resolve the issues with the displayed image.', 'The chapter concludes with a demonstration of utilizing z-index to ensure the proper display of the background image, exemplifying its functionality in managing the priority of elements in the layout.']}], 'duration': 910.619, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw720602.jpg', 'highlights': ['Installing style components and react router DOM using yarn and npm for package setup.', 'Importing Router from React Router and configuring it to enable page navigation without refreshing.', 'The process of creating React components and ensuring their proper alignment and display is detailed, with a focus on centering content and using flexbox for layout.', 'The use of styled components for styling React components is highlighted as a clean and convenient approach.', 'The troubleshooting process for errors and the steps taken to resolve them are outlined, emphasizing the importance of inspecting elements for debugging.', 'The chapter also emphasizes the importance of making brilliant progress in adding more components and continuously improving the application.', 'The chapter explains the process of adding a login background image and encountering difficulties in its display, highlighting the need for adjustments in CSS properties for proper presentation.', 'The speaker demonstrates the use of CSS properties such as height, background position, background size, and position absolute in attempting to resolve the issues with the displayed image.', 'The chapter concludes with a demonstration of utilizing z-index to ensure the proper display of the background image, exemplifying its functionality in managing the priority of elements in the layout.']}, {'end': 2227.538, 'segs': [{'end': 1703.715, 'src': 'embed', 'start': 1672.853, 'weight': 2, 'content': [{'end': 1676.075, 'text': "What I'm going to do is I'm just going to throw it in this images folder.", 'start': 1672.853, 'duration': 3.222}, {'end': 1681.639, 'text': 'Okay So now we have this inside of our images folder in our public images.', 'start': 1676.556, 'duration': 5.083}, {'end': 1684.921, 'text': "Let's go to our login.", 'start': 1683.62, 'duration': 1.301}, {'end': 1688.644, 'text': "Okay And now we're going to do something very similar.", 'start': 1685.542, 'duration': 3.102}, {'end': 1694.547, 'text': "Okay So inside of our content, I'm going to do a couple of things.", 'start': 1689.604, 'duration': 4.943}, {'end': 1697.149, 'text': "I'm going to add my call to action.", 'start': 1694.567, 'duration': 2.582}, {'end': 1698.43, 'text': "I'm going to call it CTA.", 'start': 1697.169, 'duration': 1.261}, {'end': 1703.715, 'text': 'CTA logo 1.', 'start': 1701.974, 'duration': 1.741}], 'summary': 'Adding images to the images folder and implementing a call to action (cta) in the content.', 'duration': 30.862, 'max_score': 1672.853, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw1672853.jpg'}, {'end': 1891.265, 'src': 'embed', 'start': 1844.665, 'weight': 0, 'content': [{'end': 1847.127, 'text': 'like description text and then the CTA logo too.', 'start': 1844.665, 'duration': 2.462}, {'end': 1850.33, 'text': "Let's go back.", 'start': 1849.63, 'duration': 0.7}, {'end': 1855.715, 'text': "So now let's give it a max width of 650 pixels.", 'start': 1851.411, 'duration': 4.304}, {'end': 1860.78, 'text': "Oops Let's go in here so we can keep on seeing this.", 'start': 1857.016, 'duration': 3.764}, {'end': 1866.245, 'text': "Okay, let's undo this and see if it makes a difference.", 'start': 1860.8, 'duration': 5.445}, {'end': 1878.299, 'text': "Let's do flex wrap.", 'start': 1876.758, 'duration': 1.541}, {'end': 1883.341, 'text': "Display Let's make it flex.", 'start': 1881.44, 'duration': 1.901}, {'end': 1891.265, 'text': 'And then I want to do flex direction for this as column because I want all of these going up and down.', 'start': 1884.342, 'duration': 6.923}], 'summary': 'Adjusting the max width to 650 pixels and applying flexbox properties for a column layout.', 'duration': 46.6, 'max_score': 1844.665, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw1844665.jpg'}, {'end': 2198.103, 'src': 'embed', 'start': 2104.761, 'weight': 1, 'content': [{'end': 2105.582, 'text': "Let's keep on going.", 'start': 2104.761, 'duration': 0.821}, {'end': 2106.562, 'text': 'All right.', 'start': 2106.282, 'duration': 0.28}, {'end': 2113.187, 'text': "I'm just going to be honest, okay? That PNG file looks like trash.", 'start': 2106.943, 'duration': 6.244}, {'end': 2124.123, 'text': "It's going to be this SVG file.", 'start': 2122.321, 'duration': 1.802}, {'end': 2129.37, 'text': "I'm going to copy it and let's paste it into here, which is never going to do it.", 'start': 2124.304, 'duration': 5.066}, {'end': 2130.291, 'text': 'Super annoying.', 'start': 2129.71, 'duration': 0.581}, {'end': 2131.773, 'text': "Let's drop it in like that.", 'start': 2130.632, 'duration': 1.141}, {'end': 2141.125, 'text': "Now I'm going to, all right, let's get the name of this file and copy this.", 'start': 2133.135, 'duration': 7.99}, {'end': 2162.863, 'text': 'so much better.', 'start': 2161.222, 'duration': 1.641}, {'end': 2165.245, 'text': 'Jesus freaking Christ.', 'start': 2163.004, 'duration': 2.241}, {'end': 2167.687, 'text': 'Okay Thank God.', 'start': 2166.206, 'duration': 1.481}, {'end': 2170.449, 'text': 'That other PNG was making me puke in my mouth.', 'start': 2167.907, 'duration': 2.542}, {'end': 2171.43, 'text': "I'm so sorry about that.", 'start': 2170.509, 'duration': 0.921}, {'end': 2172.711, 'text': "Let's keep going.", 'start': 2171.97, 'duration': 0.741}, {'end': 2179.936, 'text': "Alright, now let's add the get all there button, okay? You sexy bastard.", 'start': 2173.911, 'duration': 6.025}, {'end': 2182.017, 'text': 'Alright, here we go.', 'start': 2181.277, 'duration': 0.74}, {'end': 2184.499, 'text': 'Get ready.', 'start': 2184.019, 'duration': 0.48}, {'end': 2185.62, 'text': 'React that easier.', 'start': 2184.559, 'duration': 1.061}, {'end': 2186.701, 'text': "Let's go.", 'start': 2186.2, 'duration': 0.501}, {'end': 2189.763, 'text': "Alright So, let's do that.", 'start': 2186.721, 'duration': 3.042}, {'end': 2192.3, 'text': 'very, very simple.', 'start': 2191.36, 'duration': 0.94}, {'end': 2198.103, 'text': "okay, we're gonna create that sign up component and we're gonna call it sign up.", 'start': 2192.3, 'duration': 5.803}], 'summary': 'Conversion from png to svg improved file quality, enhancing the user experience.', 'duration': 93.342, 'max_score': 2104.761, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw2104761.jpg'}], 'start': 1632.181, 'title': 'Frontend development progress', 'summary': 'Details the frontend development progress, including setting max width of 650 pixels, using flex direction column, and replacing a png file with an svg file, resulting in improved visual quality and user experience.', 'chapters': [{'end': 2027.227, 'start': 1632.181, 'title': 'Adding image and styling components', 'summary': 'Discusses adding images to a website, organizing them in folders, and styling components using css, with details on file formats, folder organization, and css properties.', 'duration': 395.046, 'highlights': ['The chapter covers adding images to a website, organizing them in folders, and styling components using CSS, providing insights into file formats, folder organization, and CSS properties.', "The process involves adding PNG images to a folder named 'images' within the public directory, demonstrating effective organization and file management.", 'Styling components involves using CSS properties like max-width, margin, and flexbox, with specific pixel values and alignment details for the design layout.']}, {'end': 2227.538, 'start': 2035.325, 'title': 'Frontend development progress', 'summary': 'Details the frontend development progress, including setting max width of 650 pixels, using flex direction column, and replacing a png file with an svg file, resulting in improved visual quality and user experience.', 'duration': 192.213, 'highlights': ['Setting max width of 650 pixels and using flex direction column to enhance layout and user experience.', 'Replacing a PNG file with an SVG file to improve visual quality and user experience.', 'Creating a sign-up component and addressing coding errors for improved functionality.']}], 'duration': 595.357, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw1632181.jpg', 'highlights': ['Setting max width of 650 pixels and using flex direction column to enhance layout and user experience.', 'Replacing a PNG file with an SVG file to improve visual quality and user experience.', "The process involves adding PNG images to a folder named 'images' within the public directory, demonstrating effective organization and file management.", 'Styling components involves using CSS properties like max-width, margin, and flexbox, with specific pixel values and alignment details for the design layout.', 'Creating a sign-up component and addressing coding errors for improved functionality.', 'The chapter covers adding images to a website, organizing them in folders, and styling components using CSS, providing insights into file formats, folder organization, and CSS properties.']}, {'end': 2818.429, 'segs': [{'end': 2378.993, 'src': 'embed', 'start': 2278.592, 'weight': 0, 'content': [{'end': 2279.473, 'text': "I'm sorry, I don't know.", 'start': 2278.592, 'duration': 0.881}, {'end': 2285.62, 'text': "What's going on here? Let's give it a margin bottom of 12 pixels.", 'start': 2280.234, 'duration': 5.386}, {'end': 2287.442, 'text': 'Width of 100%.', 'start': 2286.761, 'duration': 0.681}, {'end': 2293.749, 'text': 'Alright, now the button is looking nice.', 'start': 2287.442, 'duration': 6.307}, {'end': 2301.588, 'text': "You see it's giving it some 2.5 pixels.", 'start': 2294.369, 'duration': 7.219}, {'end': 2307.256, 'text': "Nice Because they're too close together, right? But if you look here, they're a little separate.", 'start': 2302.489, 'duration': 4.767}, {'end': 2310.522, 'text': 'So it gives it a nice little space.', 'start': 2307.938, 'duration': 2.584}, {'end': 2334.549, 'text': 'Okay, solid, transparent.', 'start': 2332.748, 'duration': 1.801}, {'end': 2338.511, 'text': "Okay, hard to see but it's there.", 'start': 2336.35, 'duration': 2.161}, {'end': 2344.474, 'text': "And let's give it a border radius of four pixels.", 'start': 2338.531, 'duration': 5.943}, {'end': 2349.417, 'text': 'Nice Now you saw it just curved a little bit.', 'start': 2345.775, 'duration': 3.642}, {'end': 2351.338, 'text': 'Got that nice little curve.', 'start': 2350.037, 'duration': 1.301}, {'end': 2353.619, 'text': 'Thicker than a sneaker plus some curves.', 'start': 2351.738, 'duration': 1.881}, {'end': 2365.729, 'text': 'how it changes its color when i hover over it.', 'start': 2363.168, 'duration': 2.561}, {'end': 2368.89, 'text': "well, what's actually happening is on hover.", 'start': 2365.729, 'duration': 3.161}, {'end': 2372.631, 'text': "i'm changing it to a lighter shade of blue.", 'start': 2368.89, 'duration': 3.741}, {'end': 2375.392, 'text': "that's what we're gonna do here.", 'start': 2372.631, 'duration': 2.761}, {'end': 2377.512, 'text': "let's go all right.", 'start': 2375.392, 'duration': 2.12}, {'end': 2378.993, 'text': 'so lighter shade of blue.', 'start': 2377.512, 'duration': 1.481}], 'summary': 'Styling adjustments made, including 100% width and 12-pixel margin, giving button a 2.5-pixel space and border radius of 4 pixels. hover changes color to lighter shade of blue.', 'duration': 100.401, 'max_score': 2278.592, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw2278592.jpg'}, {'end': 2526.212, 'src': 'embed', 'start': 2495.05, 'weight': 4, 'content': [{'end': 2497.612, 'text': "This is just for the text color, okay? That's all.", 'start': 2495.05, 'duration': 2.562}, {'end': 2499.594, 'text': 'Nothing other than that.', 'start': 2498.453, 'duration': 1.141}, {'end': 2501.535, 'text': 'So very light touches.', 'start': 2500.094, 'duration': 1.441}, {'end': 2503.837, 'text': "It's almost hard to see what it's even doing.", 'start': 2501.575, 'duration': 2.262}, {'end': 2506.259, 'text': 'But nothing to worry about here.', 'start': 2504.678, 'duration': 1.581}, {'end': 2513.684, 'text': "Now let's give it a font size of Made it a little bit smaller.", 'start': 2507.019, 'duration': 6.665}, {'end': 2514.905, 'text': "So that's great.", 'start': 2514.204, 'duration': 0.701}, {'end': 2519.808, 'text': "My god, that looks delicious, doesn't it? Yeah, it does.", 'start': 2515.625, 'duration': 4.183}, {'end': 2520.288, 'text': "That's right.", 'start': 2519.848, 'duration': 0.44}, {'end': 2525.171, 'text': 'Alright, and give it some margining.', 'start': 2522.129, 'duration': 3.042}, {'end': 2526.212, 'text': 'Margin action.', 'start': 2525.332, 'duration': 0.88}], 'summary': 'Adjust text color and font size, add margin.', 'duration': 31.162, 'max_score': 2495.05, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw2495050.jpg'}, {'end': 2709.642, 'src': 'embed', 'start': 2666.053, 'weight': 5, 'content': [{'end': 2678.83, 'text': 'This flow This one is going to be an image, okay? Boom, there we go.', 'start': 2666.053, 'duration': 12.777}, {'end': 2683.752, 'text': 'And now that image is already there.', 'start': 2680.471, 'duration': 3.281}, {'end': 2686.592, 'text': "And look, it looks frickin' juicy and delicious.", 'start': 2684.252, 'duration': 2.34}, {'end': 2689.913, 'text': "But let's add a couple of things and make it better.", 'start': 2687.453, 'duration': 2.46}, {'end': 2691.554, 'text': "So let's give it a max width.", 'start': 2690.013, 'duration': 1.541}, {'end': 2694.575, 'text': 'Oops 600 pixels.', 'start': 2692.214, 'duration': 2.361}, {'end': 2709.642, 'text': "All right, so now it's just to make sure that it keeps it tight, okay? Even on a different size screen.", 'start': 2702.734, 'duration': 6.908}], 'summary': 'A 600-pixel max width is set to an image to maintain consistency across different screen sizes.', 'duration': 43.589, 'max_score': 2666.053, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw2666053.jpg'}, {'end': 2781.522, 'src': 'embed', 'start': 2747.114, 'weight': 3, 'content': [{'end': 2752.759, 'text': 'These ones are not so necessary, right? Because if I even delete this, it looks pretty much the same.', 'start': 2747.114, 'duration': 5.645}, {'end': 2760.075, 'text': "But they just add a little And then let's give it a width of 100%.", 'start': 2753.299, 'duration': 6.776}, {'end': 2763.776, 'text': 'Okay Boom.', 'start': 2760.075, 'duration': 3.701}, {'end': 2770.978, 'text': 'Awesome So that is it, homies, for the front page.', 'start': 2765.136, 'duration': 5.842}, {'end': 2772.379, 'text': 'This is looking fantastic.', 'start': 2771.058, 'duration': 1.321}, {'end': 2779.761, 'text': "We're gonna add more to it and we're gonna keep making it better, okay? So let's keep on rocking and rocking.", 'start': 2773.819, 'duration': 5.942}, {'end': 2781.522, 'text': 'All right, boys and girls.', 'start': 2779.781, 'duration': 1.741}], 'summary': 'Adjusting design elements and planning for further improvements on front page.', 'duration': 34.408, 'max_score': 2747.114, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw2747114.jpg'}], 'start': 2227.538, 'title': 'Button and front page design', 'summary': 'Details the process of styling a button for a website, including setting the color, background, margin, width, border radius, and hover effect. it also covers the creation of a front page design, including the addition of a description and an image, with detailed styling elements such as color, font size, margin, and width adjustments.', 'chapters': [{'end': 2378.993, 'start': 2227.538, 'title': 'Styling a button for a website', 'summary': 'Details the process of styling a button for a website, including setting the color, background, margin, width, border radius, and hover effect.', 'duration': 151.455, 'highlights': ['The button is given a color of white and a background color of blue, with a margin bottom of 12 pixels and a width of 100%.', 'A border radius of four pixels is applied to the button, giving it a curved appearance.', 'On hover, the button changes to a lighter shade of blue, enhancing its interactivity.']}, {'end': 2818.429, 'start': 2378.993, 'title': 'Front page design description', 'summary': 'Covers the creation of a front page design, including the addition of a description and an image, with detailed styling elements such as color, font size, margin, and width adjustments.', 'duration': 439.436, 'highlights': ['The chapter covers the creation of a front page design, including the addition of a description and an image, with detailed styling elements such as color, font size, margin, and width adjustments.', 'Styling details such as text color adjustment using hue saturation lightness alpha model, font size adjustments, margining, line height, and letter spacing are explained to enhance the design.', 'Instructions for adding an image, including adjustments like max width, margin, and width percentage, are provided to ensure consistent display across different screen sizes.']}], 'duration': 590.891, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw2227538.jpg', 'highlights': ['The button is given a color of white and a background color of blue, with a margin bottom of 12 pixels and a width of 100%.', 'A border radius of four pixels is applied to the button, giving it a curved appearance.', 'On hover, the button changes to a lighter shade of blue, enhancing its interactivity.', 'The chapter covers the creation of a front page design, including the addition of a description and an image, with detailed styling elements such as color, font size, margin, and width adjustments.', 'Styling details such as text color adjustment using hue saturation lightness alpha model, font size adjustments, margining, line height, and letter spacing are explained to enhance the design.', 'Instructions for adding an image, including adjustments like max width, margin, and width percentage, are provided to ensure consistent display across different screen sizes.']}, {'end': 5299.25, 'segs': [{'end': 2938.61, 'src': 'embed', 'start': 2909.009, 'weight': 4, 'content': [{'end': 2912.891, 'text': "I'm going to get out of this components and we're going to make a new file.", 'start': 2909.009, 'duration': 3.882}, {'end': 2915.013, 'text': "It's going to be called header.js.", 'start': 2913.532, 'duration': 1.481}, {'end': 2924.96, 'text': "And again, it's so freaking nice that all the styling for this component also goes inside of the component.", 'start': 2915.553, 'duration': 9.407}, {'end': 2927.345, 'text': 'instead of any CSS files.', 'start': 2925.964, 'duration': 1.381}, {'end': 2934.028, 'text': "That's why it's called styled components, okay? So let's create this.", 'start': 2928.065, 'duration': 5.963}, {'end': 2937.849, 'text': "We're gonna do import styled from styled components.", 'start': 2934.088, 'duration': 3.761}, {'end': 2938.61, 'text': 'Boom, done.', 'start': 2938.089, 'duration': 0.521}], 'summary': 'Creating a new file called header.js for styled components without css files.', 'duration': 29.601, 'max_score': 2909.009, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw2909009.jpg'}, {'end': 3272.125, 'src': 'embed', 'start': 3239.403, 'weight': 1, 'content': [{'end': 3242.664, 'text': "And the image we're actually going to need is just a Disney logo.", 'start': 3239.403, 'duration': 3.261}, {'end': 3244.005, 'text': 'So this one right here.', 'start': 3242.905, 'duration': 1.1}, {'end': 3245.005, 'text': 'All right.', 'start': 3244.745, 'duration': 0.26}, {'end': 3251.387, 'text': "So I'm going to copy this, not copy this, but I'm going to open up my public folder and I'm going to drop it in there.", 'start': 3245.065, 'duration': 6.322}, {'end': 3254.488, 'text': 'Again, you have access to all these files in the description.', 'start': 3251.687, 'duration': 2.801}, {'end': 3257.189, 'text': 'All right.', 'start': 3256.849, 'duration': 0.34}, {'end': 3259.69, 'text': "Now let's go inside of our header.", 'start': 3257.689, 'duration': 2.001}, {'end': 3267.964, 'text': "Okay Let's go under the nav.", 'start': 3264.002, 'duration': 3.962}, {'end': 3272.125, 'text': "We're going to add logo like this.", 'start': 3268.584, 'duration': 3.541}], 'summary': 'Adding disney logo to public folder for website header.', 'duration': 32.722, 'max_score': 3239.403, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw3239403.jpg'}, {'end': 3626.111, 'src': 'embed', 'start': 3595.092, 'weight': 0, 'content': [{'end': 3604.143, 'text': "but then keep looking up at the top as soon as I make the screen small, boom, it's invisible, right, gone.", 'start': 3595.092, 'duration': 9.051}, {'end': 3608.668, 'text': 'so keep that in mind as you do this you can.', 'start': 3604.143, 'duration': 4.525}, {'end': 3610.51, 'text': 'this is the media query, right.', 'start': 3608.668, 'duration': 1.842}, {'end': 3612.252, 'text': 'this is to make it mobile responsive.', 'start': 3610.51, 'duration': 1.742}, {'end': 3620.404, 'text': 'Okay, max with 768 pixels that.', 'start': 3617.681, 'duration': 2.723}, {'end': 3626.111, 'text': "just make sure that if it's on a mobile device and not on a desktop, just to display none.", 'start': 3620.404, 'duration': 5.707}], 'summary': 'Use media query to make the screen mobile responsive, with max width of 768 pixels.', 'duration': 31.019, 'max_score': 3595.092, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw3595092.jpg'}, {'end': 4864.652, 'src': 'embed', 'start': 4824.662, 'weight': 2, 'content': [{'end': 4825.443, 'text': 'we hover.', 'start': 4824.662, 'duration': 0.781}, {'end': 4828.425, 'text': 'it actually makes the text black.', 'start': 4825.443, 'duration': 2.982}, {'end': 4833.529, 'text': "that's freaking cool, and it makes the background white.", 'start': 4828.425, 'duration': 5.104}, {'end': 4837.813, 'text': 'we inverse colors like that all right.', 'start': 4833.529, 'duration': 4.284}, {'end': 4842.537, 'text': "and then let's do border color and let's give it a little transparent.", 'start': 4837.813, 'duration': 4.724}, {'end': 4848.601, 'text': 'okay, boom, look at that beautiful.', 'start': 4842.537, 'duration': 6.064}, {'end': 4858.189, 'text': 'so we crushed it with the log on and add real functionality to login.', 'start': 4848.601, 'duration': 9.588}, {'end': 4864.652, 'text': "so we're now going to start adding firebase in this beautiful project.", 'start': 4858.189, 'duration': 6.463}], 'summary': 'Developed login functionality with color and transparency adjustments, now moving on to integrate firebase.', 'duration': 39.99, 'max_score': 4824.662, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw4824662.jpg'}, {'end': 5048.595, 'src': 'embed', 'start': 5014.253, 'weight': 3, 'content': [{'end': 5021.176, 'text': 'firebase.initialize This basically lets you just initialize a Firebase app.', 'start': 5014.253, 'duration': 6.923}, {'end': 5024.317, 'text': "Now we're going to connect our database.", 'start': 5022.357, 'duration': 1.96}, {'end': 5028.999, 'text': "We're also going to need to do authentication.", 'start': 5026.578, 'duration': 2.421}, {'end': 5034.362, 'text': "Let's add in provider.", 'start': 5033.021, 'duration': 1.341}, {'end': 5041.905, 'text': 'Like that.', 'start': 5041.605, 'duration': 0.3}, {'end': 5048.595, 'text': "and provider is going to be useful for when we're adding in the Google social login.", 'start': 5043.832, 'duration': 4.763}], 'summary': 'Initializing firebase app, connecting database, and adding google social login for authentication.', 'duration': 34.342, 'max_score': 5014.253, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw5014253.jpg'}], 'start': 2819.109, 'title': "React daddy's header component & firebase integration", 'summary': 'Covers implementing a header component in react using styled components, creating a disney logo, building a mobile responsive navigation menu, and adding firebase to the disney plus clone. it includes using css flex properties, media queries, firebase initialization, and google social authentication.', 'chapters': [{'end': 3100.147, 'start': 2819.109, 'title': "React daddy's explanation & implementation of header component", 'summary': 'Covers the implementation of a header component using styled components in react, including the use of display flex, justify content, align items, and position fixed for creating a navigation bar and achieving vertical centering of elements.', 'duration': 281.038, 'highlights': ['Implementation of header component using styled components in React The chapter covers the implementation of a header component using styled components in React, emphasizing the organization of styling within the component and its integration into the app.js file.', 'Use of display flex, justify content, and align items for layout design The use of display flex, justify content space between, and align items center was highlighted as the method for creating space and achieving vertical centering within the layout.', 'Application of position fixed for creating a navigation bar The application of position fixed was explained as a technique for ensuring the navigation bar remains fixed when scrolling, thereby enhancing the user experience.']}, {'end': 3568, 'start': 3103.126, 'title': 'Building a disney logo in a header', 'summary': 'Demonstrates the process of adding a disney logo to a header, adjusting its styling properties, and working on the navigation menu using css flex properties and alignments.', 'duration': 464.874, 'highlights': ['Adding the Disney logo to the header and adjusting its styling properties The speaker demonstrates the process of adding the Disney logo to the header, adjusting its width, max height, and positioning properties to achieve a visually appealing result.', 'Working on the navigation menu using CSS flex properties and alignments The chapter covers the process of working on the navigation menu, applying flex properties like align items, flex flow, and position to achieve the desired layout and spacing.']}, {'end': 4494.941, 'start': 3568, 'title': 'Building mobile responsive navigation menu', 'summary': 'Demonstrates creating a mobile responsive navigation menu using media queries and css styling, with detailed instructions on adding home icon and text, applying hover effects, and explaining the css magic for creating a slick underline effect, aiming for a seamless user experience.', 'duration': 926.941, 'highlights': ['Creating a mobile responsive navigation menu with media queries and CSS styling Demonstrates using media queries and CSS styling to ensure the navigation menu is responsive, adapting to different screen sizes. This is essential for providing a seamless user experience on various devices.', 'Adding home icon and text to the navigation menu Provides detailed instructions on adding the home icon and text to the navigation menu, emphasizing the step-by-step process for creating and placing the icon within the menu.', 'Applying hover effects and CSS magic for creating a slick underline effect Explains the process of applying hover effects and CSS magic to create a slick underline effect when hovering over menu items, enhancing the visual appeal and user interaction of the navigation menu.']}, {'end': 4935.594, 'start': 4494.941, 'title': 'Adding firebase to disney plus clone', 'summary': 'Focuses on adding various icons to the navbar, styling the login button with animations and functionality, and initiating the process of adding firebase to the project, emphasizing the importance of the database for storing movie data.', 'duration': 440.653, 'highlights': ['Explaining the process of adding icons to the navbar and ensuring connectivity to the path, resulting in a fantastic navbar appearance. The speaker demonstrates adding watch list, search, originals, and movie icons to the navbar, emphasizing the simplicity of the process and the interconnectedness to the path, resulting in a visually appealing navbar.', 'Styling the login button with specific design elements including a dark background color, border, animation effect, text transformation, and hover functionality. The process involves adding a styled component for the login button, incorporating design elements such as a dark background color, border, animation effect, uppercase text transformation, and hover functionality with specific color changes, resulting in a visually appealing and functional login button.', "Initiating the process of adding Firebase to the project and highlighting the significance of the database for storing movie data. The speaker begins the process of adding Firebase to the project, emphasizing the importance of the database for storing movie data and highlighting the significance of pulling data from the database for the project's functionality."]}, {'end': 5299.25, 'start': 4937.355, 'title': 'Setting up firebase for app', 'summary': 'Covers setting up firebase for the app, including initializing the firebase app, connecting the database, adding google social authentication, and enabling google authentication in the firebase console. it also includes installing firebase and firebase tools using yarn. the chapter also highlights creating the handle auth function and using it to sign in with a pop-up.', 'duration': 361.895, 'highlights': ['The chapter includes setting up Firebase for the app, initializing the Firebase app, connecting the database, adding Google social authentication, enabling Google authentication in the Firebase console, and installing Firebase and Firebase tools using yarn.', 'The chapter also covers creating the handle auth function and using it to sign in with a pop-up, which is a promise and returns a result, with an error handling mechanism in place.']}], 'duration': 2480.141, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw2819109.jpg', 'highlights': ['Creating a mobile responsive navigation menu with media queries and CSS styling', 'Adding the Disney logo to the header and adjusting its styling properties', 'Styling the login button with specific design elements including a dark background color, border, animation effect, text transformation, and hover functionality', 'The chapter includes setting up Firebase for the app, initializing the Firebase app, connecting the database, adding Google social authentication, enabling Google authentication in the Firebase console, and installing Firebase and Firebase tools using yarn', 'Implementation of header component using styled components in React']}, {'end': 7012.658, 'segs': [{'end': 5532.757, 'src': 'embed', 'start': 5469.269, 'weight': 0, 'content': [{'end': 5473.231, 'text': 'Okay And this is coming from Firebase and this has all my information.', 'start': 5469.269, 'duration': 3.962}, {'end': 5479.493, 'text': 'So if I go to user and I go all the way down, you can see my display name and you can see the email.', 'start': 5473.891, 'duration': 5.602}, {'end': 5489.057, 'text': "Now what we're gonna do is we're gonna use Redux.", 'start': 5486.735, 'duration': 2.322}, {'end': 5498.366, 'text': "I'm gonna use Redux to actually store all this information somewhere, where then I can access it later.", 'start': 5490.318, 'duration': 8.048}, {'end': 5505.792, 'text': 'okay?. But what Redux allows me to do is it allows me to save it without necessarily using a database to save it.', 'start': 5498.366, 'duration': 7.426}, {'end': 5510.436, 'text': 'okay?. That way I can store the information on the front end and retrieve it from the front end.', 'start': 5505.792, 'duration': 4.644}, {'end': 5513.319, 'text': "All right, cool, let's do it.", 'start': 5510.456, 'duration': 2.863}, {'end': 5521.044, 'text': 'Redux store.', 'start': 5520.083, 'duration': 0.961}, {'end': 5525.729, 'text': 'So I need to do a couple of things here.', 'start': 5522.085, 'duration': 3.644}, {'end': 5528.052, 'text': "So number one, let's install it.", 'start': 5525.889, 'duration': 2.163}, {'end': 5532.757, 'text': "So I'm going to do yarn add and let's do a react Redux.", 'start': 5528.072, 'duration': 4.685}], 'summary': 'Using redux to store and retrieve user information from firebase without a database.', 'duration': 63.488, 'max_score': 5469.269, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw5469269.jpg'}, {'end': 6108.811, 'src': 'embed', 'start': 6052.091, 'weight': 2, 'content': [{'end': 6055.413, 'text': 'is again part of Redux.', 'start': 6052.091, 'duration': 3.322}, {'end': 6065.318, 'text': "so with the setup, we're almost done and now we're ready to actually get this functionality live in just a second.", 'start': 6055.413, 'duration': 9.905}, {'end': 6086.342, 'text': "so let's go back to our store, and in our store we're gonna add in this reducer that we just created and And we need to import this.", 'start': 6065.318, 'duration': 21.024}, {'end': 6108.811, 'text': 'Okay So now we got our user reducer that we created.', 'start': 6102.949, 'duration': 5.862}], 'summary': 'Implementing redux functionality for user reducer.', 'duration': 56.72, 'max_score': 6052.091, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw6052091.jpg'}, {'end': 6519.798, 'src': 'embed', 'start': 6488.663, 'weight': 3, 'content': [{'end': 6495.388, 'text': "so basically what we're just so you understand at eye level, what we're about to do is this if the username does not exist,", 'start': 6488.663, 'duration': 6.725}, {'end': 6502.029, 'text': 'meaning if the user has not signed in yet, then just show the button with it saying login.', 'start': 6497.066, 'duration': 4.963}, {'end': 6509.012, 'text': 'So just like that, the login.', 'start': 6507.652, 'duration': 1.36}, {'end': 6519.798, 'text': 'But if the username exists and the user has already logged in, then replace that button with a photo, with that photo right there.', 'start': 6509.693, 'duration': 10.105}], 'summary': 'Replace login button with photo if user exists and logged in.', 'duration': 31.135, 'max_score': 6488.663, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw6488663.jpg'}], 'start': 5302.052, 'title': 'Implementing firebase authentication, using redux, and conditional rendering', 'summary': 'Covers troubleshooting and adding firebase dependencies, successfully displaying user data, using redux to store user information, setting up a redux store to manage user login details, and implementing conditional rendering based on username existence.', 'chapters': [{'end': 5467.928, 'start': 5302.052, 'title': 'Implementing firebase authentication', 'summary': 'Involves troubleshooting and adding firebase dependencies to the project, including installing npm packages and testing user authentication, which resulted in successfully displaying the user data.', 'duration': 165.876, 'highlights': ['Troubleshooting and adding Firebase dependencies, including npm install firebase and firebase tools, to the project, resulting in successful integration and display of user data.', 'Testing user authentication by logging in and observing the user data being displayed in the inspect tools.', 'Identifying and resolving errors related to Firebase integration, emphasizing the importance of reading and understanding error messages for effective troubleshooting.']}, {'end': 5759.697, 'start': 5469.269, 'title': 'Using redux to store and retrieve information', 'summary': 'Demonstrates using redux to store user information on the front end without using a database, with the process including installing redux, configuring the store, and creating a slice for initial state.', 'duration': 290.428, 'highlights': ['The chapter demonstrates using Redux to store user information on the front end without using a database. This is exemplified by the use of Redux to save and retrieve user information without relying on a database, providing a front-end solution for data storage and retrieval.', "The process includes installing Redux, configuring the store, and creating a slice for initial state. The process involves steps such as installing Redux using 'yarn add @reduxjs/toolkit', configuring the store in the 'src' directory, and creating a slice for initial state, demonstrating the practical implementation of using Redux for data management.", 'The chapter emphasizes the use of Redux to make it easier to store and retrieve information. Redux is recommended as it is designed to simplify the process of managing and accessing data, making it easier to handle user information without relying on a traditional database solution.']}, {'end': 6417.732, 'start': 5761.144, 'title': 'Redux store setup', 'summary': 'Explains the process of setting up a redux store to manage user login details, including initializing the state, setting user login and sign out states, and integrating the functionality into the app, with a focus on utilizing dispatch and selector for accessing and updating the store.', 'duration': 656.588, 'highlights': ['The chapter explains the process of setting up a Redux store to manage user login details, including initializing the state, setting user login and sign out states, and integrating the functionality into the app. Setting up Redux store, managing user login details, initializing state, setting user login and sign out states, integrating functionality into the app', 'The code snippet demonstrates the use of dispatch and selector from React Redux to access and update the store, with dispatch allowing the dispatch of actions to the store and selector enabling the retrieval of information from the store. Demonstration of dispatch and selector usage, enabling dispatch of actions, retrieval of information from the store', 'The process involves importing necessary functionalities such as dispatch, selector, and history to access and utilize the user information stored in the Redux store, with a focus on retrieving and updating user details. Importing necessary functionalities, accessing and utilizing user information in the store, retrieving and updating user details']}, {'end': 7012.658, 'start': 6418.673, 'title': 'Redux store implementation', 'summary': 'Entails the implementation of conditional rendering based on the existence of a username, aiming to display a login button if the username does not exist and a user image if the username exists, detailing the debugging process and the resolution of errors encountered during the implementation.', 'duration': 593.985, 'highlights': ['The implementation involves conditional rendering based on the existence of a username, displaying a login button if the username does not exist and a user image if the username exists. ', "The debugging process involves resolving errors such as 'Username is not defined', 'does not contain a default export', and 'handleAuth is not defined'. ", 'Errors encountered during the implementation are resolved by correcting misspelled variables and refreshing the code editor. ']}], 'duration': 1710.606, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw5302052.jpg', 'highlights': ['Successfully integrating Firebase dependencies and displaying user data', 'Using Redux for front-end data storage and retrieval without a database', 'Setting up a Redux store to manage user login details and integrating functionality', 'Implementing conditional rendering based on username existence and resolving related errors']}, {'end': 8076.965, 'segs': [{'end': 7041.69, 'src': 'embed', 'start': 7013.339, 'weight': 0, 'content': [{'end': 7018.282, 'text': 'Boom Okay, now we have pretty much all of this stuff working.', 'start': 7013.339, 'duration': 4.943}, {'end': 7020.443, 'text': "So let's just test out.", 'start': 7019.042, 'duration': 1.401}, {'end': 7028.122, 'text': "what it's currently doing, okay? All right, so let's see.", 'start': 7022.179, 'duration': 5.943}, {'end': 7034.666, 'text': "Let's go back to our header.js and I just wanna make sure that, yeah, okay.", 'start': 7028.182, 'duration': 6.484}, {'end': 7041.69, 'text': 'So for example, if I am not logged in, then just put the login button there.', 'start': 7035.446, 'duration': 6.244}], 'summary': 'Testing and debugging completed for header.js, ensuring display of login button when not logged in.', 'duration': 28.351, 'max_score': 7013.339, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw7013339.jpg'}, {'end': 7213.902, 'src': 'embed', 'start': 7134.921, 'weight': 1, 'content': [{'end': 7140.523, 'text': "okay, so let's go to components, new file, and we'll do.", 'start': 7134.921, 'duration': 5.602}, {'end': 7143.144, 'text': "we'll do that.", 'start': 7140.523, 'duration': 2.621}, {'end': 7169.14, 'text': "okay, like That's it.", 'start': 7143.144, 'duration': 25.996}, {'end': 7171.501, 'text': "And then let's export default home.", 'start': 7169.38, 'duration': 2.121}, {'end': 7172.002, 'text': "That's it.", 'start': 7171.662, 'duration': 0.34}, {'end': 7178.105, 'text': "Now let's go inside of our app, JS.", 'start': 7175.283, 'duration': 2.822}, {'end': 7188.07, 'text': 'And inside of here, we are going to add the routing to get to the home.', 'start': 7181.106, 'duration': 6.964}, {'end': 7196.874, 'text': "So let's add it.", 'start': 7196.014, 'duration': 0.86}, {'end': 7213.902, 'text': "Where should I? Let's add it right below this route, okay? So right below this login component and this route component.", 'start': 7196.894, 'duration': 17.008}], 'summary': 'Creating a new file and adding routing to the home component in app.js.', 'duration': 78.981, 'max_score': 7134.921, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw7134921.jpg'}, {'end': 7468.179, 'src': 'embed', 'start': 7430.61, 'weight': 2, 'content': [{'end': 7437.695, 'text': "what it actually does is it brings me back to the home page because it detects that I'm logged in.", 'start': 7430.61, 'duration': 7.085}, {'end': 7439.657, 'text': 'So this is exactly what we want.', 'start': 7438.136, 'duration': 1.521}, {'end': 7446.282, 'text': 'If the user exists, aka if the user is logged in, then bring him to the home page.', 'start': 7440.337, 'duration': 5.945}, {'end': 7461.598, 'text': "It's like, hey, fine.", 'start': 7459.837, 'duration': 1.761}, {'end': 7465.718, 'text': 'So, but if I do this, boom, redirects me to the home page.', 'start': 7462.698, 'duration': 3.02}, {'end': 7468.179, 'text': "Okay That's the point that's doing that.", 'start': 7465.798, 'duration': 2.381}], 'summary': 'Automatically redirects logged-in users to the home page.', 'duration': 37.569, 'max_score': 7430.61, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw7430610.jpg'}], 'start': 7013.339, 'title': 'Testing header and building react app', 'summary': 'Explores testing the functionality of the header.js file and building a home component in app.js, implementing user authentication and sign-in/sign-out functionality.', 'chapters': [{'end': 7089.947, 'start': 7013.339, 'title': 'Testing header functionality', 'summary': "Explores testing the functionality of the header.js file, ensuring that the login button appears when not logged in and the user's google avatar is displayed along with additional content upon logging in.", 'duration': 76.608, 'highlights': ["The chapter explores testing the functionality of the header.js file, ensuring that the login button appears when not logged in and the user's Google avatar is displayed along with additional content upon logging in.", "The code is designed to display the login button when the user is not logged in and then replace it with the user's Google avatar and additional content upon logging in."]}, {'end': 7352.846, 'start': 7090.588, 'title': 'Building react app: home component', 'summary': 'Discusses the process of creating a home component in app.js, setting up routing for the home component, and implementing user authentication using react hooks.', 'duration': 262.258, 'highlights': ['The chapter covers the process of creating a home component in app.js, setting up routing for the home component, and implementing user authentication using React hooks.', "The speaker emphasizes the progress made, stating 'great job so far' and 'making really good progress.'", "The speaker demonstrates the process of setting up routing to access the home component with 'route path' and 'home component.'", 'The chapter also discusses implementing user authentication and logging in users to the home page.']}, {'end': 8076.965, 'start': 7357.868, 'title': 'Implementing sign-in and sign-out functionality', 'summary': 'Covers implementing sign-in and sign-out functionality, including redirecting the user to the home page upon login, adding a sign-out option to the user interface, and handling sign-out functionality within the application.', 'duration': 719.097, 'highlights': ['The function ensures that if the user is logged in, they are redirected to the home page, contributing to a seamless user experience. The function redirects the user to the home page upon login, enhancing user experience and engagement.', 'The process of adding sign-out functionality to the user interface is outlined, including the creation of a dropdown component for the sign-out option. The process of adding a sign-out option to the user interface involves creating a dropdown component for user interaction, improving user accessibility.', 'The steps for handling sign-out functionality within the application, including utilizing the built-in sign-out method and dispatching the sign-out state to the store, are explained. The process of handling sign-out functionality involves utilizing the built-in sign-out method and dispatching the sign-out state to the store, ensuring effective management of user sessions.']}], 'duration': 1063.626, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw7013339.jpg', 'highlights': ["The chapter explores testing the functionality of the header.js file, ensuring that the login button appears when not logged in and the user's Google avatar is displayed along with additional content upon logging in.", 'The chapter covers the process of creating a home component in app.js, setting up routing for the home component, and implementing user authentication using React hooks.', 'The function ensures that if the user is logged in, they are redirected to the home page, contributing to a seamless user experience.']}, {'end': 9738.495, 'segs': [{'end': 8650.648, 'src': 'embed', 'start': 8539.602, 'weight': 0, 'content': [{'end': 8540.383, 'text': 'So there you go.', 'start': 8539.602, 'duration': 0.781}, {'end': 8544.866, 'text': "That's how we're doing it, okay? It's a pretty cool gradient.", 'start': 8540.903, 'duration': 3.963}, {'end': 8551.65, 'text': 'So this part, now we added the background.', 'start': 8548.968, 'duration': 2.682}, {'end': 8558.975, 'text': "Now we're gonna start doing it, adding in our image slider, okay? So this part at the top, boom.", 'start': 8552.21, 'duration': 6.765}, {'end': 8560.956, 'text': "So let's start working on this now.", 'start': 8559.475, 'duration': 1.481}, {'end': 8564.679, 'text': "All right, so for image slider, it's gonna be the following.", 'start': 8561.857, 'duration': 2.822}, {'end': 8566.3, 'text': "So let's remove all of this.", 'start': 8564.739, 'duration': 1.561}, {'end': 8567.841, 'text': "Actually, let's just leave this for now.", 'start': 8566.54, 'duration': 1.301}, {'end': 8577.86, 'text': "I'm gonna call this image slider.", 'start': 8574.758, 'duration': 3.102}, {'end': 8585.003, 'text': 'Rename this .', 'start': 8582.282, 'duration': 2.721}, {'end': 8623.037, 'text': 'js just like this, okay? And now what we gotta do is make sure we export the default slider like this.', 'start': 8585.003, 'duration': 38.034}, {'end': 8628.3, 'text': "And let's go in our home component.", 'start': 8625.039, 'duration': 3.261}, {'end': 8636.285, 'text': "And in our home, what we're gonna do is instead of this hello, we're actually going to add an image slider.", 'start': 8629.881, 'duration': 6.404}, {'end': 8647.567, 'text': 'Getting us set up.', 'start': 8646.766, 'duration': 0.801}, {'end': 8650.648, 'text': "Now we're going to start adding more functionality to it.", 'start': 8648.087, 'duration': 2.561}], 'summary': 'Creating an image slider for the home component with added functionality.', 'duration': 111.046, 'max_score': 8539.602, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw8539602.jpg'}, {'end': 8740.196, 'src': 'embed', 'start': 8702.795, 'weight': 2, 'content': [{'end': 8706.577, 'text': "And now we're gonna add in the carousel functionality and it's gonna be really nice.", 'start': 8702.795, 'duration': 3.782}, {'end': 8709.939, 'text': "So inside of image slider, let's import it.", 'start': 8706.597, 'duration': 3.342}, {'end': 8716.424, 'text': 'slick-carousel slash slick slash slick.css.', 'start': 8711.542, 'duration': 4.882}, {'end': 8720.747, 'text': "That's gonna get a CSS import.", 'start': 8717.865, 'duration': 2.882}, {'end': 8729.371, 'text': 'Carousel slash slick slash slick theme.css.', 'start': 8722.928, 'duration': 6.443}, {'end': 8735.794, 'text': 'And then what we need is import slider from React slick, just like that.', 'start': 8730.331, 'duration': 5.463}, {'end': 8740.196, 'text': "All right, let's keep rocking and rolling, baby girl.", 'start': 8735.814, 'duration': 4.382}], 'summary': 'Adding carousel functionality with react slick for image slider.', 'duration': 37.401, 'max_score': 8702.795, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw8702795.jpg'}, {'end': 8940.823, 'src': 'embed', 'start': 8897.371, 'weight': 3, 'content': [{'end': 8904.378, 'text': "we're gonna basically add some styles to it using styled components, so i gotta roll up my sleeve for this one.", 'start': 8897.371, 'duration': 7.007}, {'end': 8910.434, 'text': "so We're going to just change one thing.", 'start': 8904.378, 'duration': 6.056}, {'end': 8912.876, 'text': "We're going to call this carousel instead of slider.", 'start': 8910.454, 'duration': 2.422}, {'end': 8916.059, 'text': 'I think that makes much better sense.', 'start': 8912.896, 'duration': 3.163}, {'end': 8919.362, 'text': 'All right.', 'start': 8918.922, 'duration': 0.44}, {'end': 8921.424, 'text': "And then let's give it a name.", 'start': 8920.023, 'duration': 1.401}, {'end': 8925.648, 'text': 'Should now be defined.', 'start': 8924.547, 'duration': 1.101}, {'end': 8927.71, 'text': 'Wait Not defined.', 'start': 8925.708, 'duration': 2.002}, {'end': 8928.831, 'text': 'Carousel, carousel.', 'start': 8927.85, 'duration': 0.981}, {'end': 8940.823, 'text': 'Because slider is coming from here.', 'start': 8938.882, 'duration': 1.941}], 'summary': "Using styled components to change 'slider' to 'carousel'.", 'duration': 43.452, 'max_score': 8897.371, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw8897371.jpg'}], 'start': 8083.108, 'title': 'Building and styling homepage with image slider', 'summary': 'Focuses on building the homepage, fixing errors, implementing background images, adjusting container styling, styling web page elements, and adding image sliders using react slick and carousel. it also involves customizing slider components visually and adding functionality for a visually appealing and mobile-responsive slider.', 'chapters': [{'end': 8352.808, 'start': 8083.108, 'title': 'Building homepage and container styling', 'summary': 'Focuses on building the homepage and container styling, including fixing errors, implementing background images, and adjusting container styling in the main javascript file, with a demonstration of the dark gradient background and its extension.', 'duration': 269.7, 'highlights': ['The chapter focuses on building the homepage and container styling, including fixing errors, implementing background images, and adjusting container styling in the main JavaScript file, with a demonstration of the dark gradient background and its extension.', 'Demonstrating the process of grabbing and setting the home background image in the images folder, and adjusting the main JavaScript file for container styling.', "Fixing errors such as 'state is not defined' and ensuring the functionality of the sign-out feature, resulting in a successful implementation of the desired functionalities.", 'Emphasizing the importance of addressing any errors encountered during the development process to ensure smooth functionality and user experience.']}, {'end': 8740.196, 'start': 8352.808, 'title': 'Styling and adding image slider', 'summary': 'Demonstrates the process of styling a web page element and adding an image slider using react slick and carousel, with a focus on adjusting padding, creating a background, and importing necessary components.', 'duration': 387.388, 'highlights': ['Demonstrating the process of styling a web page element The speaker explains the process of adjusting padding and creating a background for a web page element to enhance its visual appearance.', 'Adding an image slider using React Slick and Carousel The speaker outlines the steps to install and import React Slick and Carousel to add image slider functionality to the web page, emphasizing the importance of installing necessary components.', 'Uncommenting code to reveal changes in the web page element The speaker demonstrates uncommenting code to reveal changes in the web page element, highlighting the impact of these changes on the visual layout.']}, {'end': 9120.17, 'start': 8742.577, 'title': 'Custom slider styling', 'summary': 'Involves customizing a slider component by adding styles and changing its name to carousel using styled components. the slider is made visually appealing by making buttons invisible initially and visible on hover with a transition effect.', 'duration': 377.593, 'highlights': ['The slider component is customized by adding styles and changing its name to carousel using styled components.', 'The buttons of the carousel are made invisible initially and visible on hover with a transition effect.', 'The dots in the carousel are made visually appealing by increasing their size using CSS.']}, {'end': 9738.495, 'start': 9120.17, 'title': 'Image slider styling and functionality', 'summary': 'Details the process of styling and adding functionality to an image slider, including the addition of images, hover effects, and responsiveness, resulting in a visually appealing and mobile-responsive slider.', 'duration': 618.325, 'highlights': ['The chapter details the process of styling and adding functionality to an image slider The chapter covers the process of adding styling and functionality to an image slider, including hover effects and responsiveness.', 'The addition of images and hover effects The process involves adding four images to the slider and implementing hover effects with a white border on hover.', 'Achieving mobile responsiveness The changes made to the image slider result in a visually appealing and mobile-responsive design, ensuring the slider looks good even on small devices.']}], 'duration': 1655.387, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw8083108.jpg', 'highlights': ['The chapter focuses on building the homepage and container styling, including fixing errors, implementing background images, and adjusting container styling in the main JavaScript file, with a demonstration of the dark gradient background and its extension.', 'The chapter details the process of styling and adding functionality to an image slider, including hover effects and responsiveness.', 'Adding an image slider using React Slick and Carousel The speaker outlines the steps to install and import React Slick and Carousel to add image slider functionality to the web page, emphasizing the importance of installing necessary components.', 'The slider component is customized by adding styles and changing its name to carousel using styled components.']}, {'end': 10669.976, 'segs': [{'end': 9829.426, 'src': 'embed', 'start': 9786.92, 'weight': 3, 'content': [{'end': 9791.561, 'text': "And I'm gonna just return div that says viewers.", 'start': 9786.92, 'duration': 4.641}, {'end': 9793.101, 'text': "That's about it for now.", 'start': 9791.761, 'duration': 1.34}, {'end': 9798.463, 'text': 'And now we just need to make sure that we add it to our home component.', 'start': 9795.002, 'duration': 3.461}, {'end': 9813.198, 'text': "So let's go right underneath where we have image Okay, and we're going to do import viewers from viewers.", 'start': 9799.243, 'duration': 13.955}, {'end': 9818.861, 'text': 'Okay, and now we just got to make sure that we actually export this.', 'start': 9814.059, 'duration': 4.802}, {'end': 9821.002, 'text': 'Export default.', 'start': 9819.861, 'duration': 1.141}, {'end': 9826.524, 'text': 'All right, so there we go.', 'start': 9825.404, 'duration': 1.12}, {'end': 9829.426, 'text': 'Oops, viewers is not defined.', 'start': 9826.544, 'duration': 2.882}], 'summary': "Adding 'viewers' component to 'home' component for display.", 'duration': 42.506, 'max_score': 9786.92, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw9786920.jpg'}, {'end': 9980.17, 'src': 'embed', 'start': 9938.24, 'weight': 2, 'content': [{'end': 9949.663, 'text': "columns and we're gonna have it be repeating and min max it at zero comma one at four like this.", 'start': 9938.24, 'duration': 11.423}, {'end': 9953.123, 'text': "so now, boom, that's what we have.", 'start': 9949.663, 'duration': 3.46}, {'end': 9962.025, 'text': "okay, so these nice little touches make all the difference and it's mobile responsive.", 'start': 9953.123, 'duration': 8.902}, {'end': 9980.17, 'text': "so even if i go full screen, it's perfect query that basically says hey, if we're on a desktop or something or not on a desktop on a phone,", 'start': 9962.025, 'duration': 18.145}], 'summary': 'Mobile responsive design with min-max of 0,1 at 4 columns.', 'duration': 41.93, 'max_score': 9938.24, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw9938240.jpg'}, {'end': 10258.487, 'src': 'embed', 'start': 10113.019, 'weight': 1, 'content': [{'end': 10115.599, 'text': 'How many images do we have? Five.', 'start': 10113.019, 'duration': 2.58}, {'end': 10128.967, 'text': "So you should see one, two, three, that it's not defined.", 'start': 10116.539, 'duration': 12.428}, {'end': 10134.049, 'text': "So let's create a styled component, styling for this component.", 'start': 10130.708, 'duration': 3.341}, {'end': 10151.333, 'text': 'Okay, so now look.', 'start': 10150.453, 'duration': 0.88}, {'end': 10160.153, 'text': 'to change these images.', 'start': 10158.092, 'duration': 2.061}, {'end': 10164.294, 'text': 'so this one is going to be pixar.bng.', 'start': 10160.153, 'duration': 4.141}, {'end': 10174.878, 'text': "this one's going to be marvel, this one's going to be star wars and this one's going to be national.", 'start': 10164.294, 'duration': 10.584}, {'end': 10179.58, 'text': "okay, so we got all the images, but they're all jumbled up kind of crazy.", 'start': 10174.878, 'duration': 4.702}, {'end': 10180.38, 'text': "so we're gonna fix that.", 'start': 10179.58, 'duration': 0.8}, {'end': 10202.614, 'text': "Okay, this is gonna be again another crazy box shadow that I'm about to add here.", 'start': 10197.773, 'duration': 4.841}, {'end': 10204.255, 'text': "Okay, it's gonna be that.", 'start': 10202.634, 'duration': 1.621}, {'end': 10211.257, 'text': 'Cursor, uh-huh.', 'start': 10208.336, 'duration': 2.921}, {'end': 10215.097, 'text': "Overflow, let's do hidden so it doesn't overflow, okay.", 'start': 10211.337, 'duration': 3.76}, {'end': 10220.719, 'text': "Still looking a little funny, but it's coming together.", 'start': 10218.278, 'duration': 2.441}, {'end': 10228.48, 'text': "Let's give it a transition.", 'start': 10227.159, 'duration': 1.321}, {'end': 10231.001, 'text': 'And why are we giving it a transition? You might ask.', 'start': 10228.64, 'duration': 2.361}, {'end': 10233.282, 'text': "Well, guess what? Here's a transition.", 'start': 10231.061, 'duration': 2.221}, {'end': 10236.883, 'text': 'Okay It scales.', 'start': 10233.302, 'duration': 3.581}, {'end': 10239.265, 'text': 'It scales when I hover over it.', 'start': 10237.624, 'duration': 1.641}, {'end': 10243.487, 'text': 'It also gets, the opacity goes from zero to one.', 'start': 10240.385, 'duration': 3.102}, {'end': 10244.807, 'text': 'It becomes white.', 'start': 10243.887, 'duration': 0.92}, {'end': 10249.189, 'text': "And it, right? So there's a bunch of stuff that happens.", 'start': 10245.688, 'duration': 3.501}, {'end': 10253.131, 'text': 'So we need, we need a transition.', 'start': 10250.13, 'duration': 3.001}, {'end': 10258.487, 'text': "our favorite transition, we're gonna throw in a cubic.", 'start': 10255.925, 'duration': 2.562}], 'summary': 'Styling and transitioning images, with five in total, for a component to fix jumbled layout and add effects.', 'duration': 145.468, 'max_score': 10113.019, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw10113019.jpg'}, {'end': 10417.052, 'src': 'embed', 'start': 10361.2, 'weight': 9, 'content': [{'end': 10364.781, 'text': "It's looking frickin' amazing.", 'start': 10361.2, 'duration': 3.581}, {'end': 10372.246, 'text': "And again, play around because look, if I remove the inset, it's gone.", 'start': 10368.524, 'duration': 3.722}, {'end': 10377.329, 'text': "It's invisible, right? If I remove the height, it doesn't look right.", 'start': 10372.647, 'duration': 4.682}, {'end': 10384.334, 'text': 'So make sure you play around with it and see what happens.', 'start': 10380.531, 'duration': 3.803}, {'end': 10389.557, 'text': "And then we're going to add a transition to it.", 'start': 10387.475, 'duration': 2.082}, {'end': 10403.48, 'text': 'All right, width is going to be 100%.', 'start': 10401.718, 'duration': 1.762}, {'end': 10409.705, 'text': "Now it's looking clear, crispy.", 'start': 10403.48, 'duration': 6.225}, {'end': 10417.052, 'text': 'Okay, beautiful.', 'start': 10416.011, 'duration': 1.041}], 'summary': 'Adjusting parameters to optimize appearance, adding transition, achieving clear, crispy look.', 'duration': 55.852, 'max_score': 10361.2, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw10361200.jpg'}, {'end': 10602.597, 'src': 'embed', 'start': 10450.385, 'weight': 0, 'content': [{'end': 10452.865, 'text': "So I'm going to grab all of these.", 'start': 10450.385, 'duration': 2.48}, {'end': 10457.627, 'text': "Okay And they're going to need to be in a folder.", 'start': 10453.566, 'duration': 4.061}, {'end': 10460.372, 'text': "Let's see.", 'start': 10459.932, 'duration': 0.44}, {'end': 10469.116, 'text': "So in public, we're going to have another folder and it's going to be called videos.", 'start': 10461.593, 'duration': 7.523}, {'end': 10474.318, 'text': "Okay And so we're going to throw all of these videos in that folder.", 'start': 10469.816, 'duration': 4.502}, {'end': 10482.182, 'text': "Great So now we got it in here, these videos, and we're going to do a few things.", 'start': 10475.159, 'duration': 7.023}, {'end': 10484.663, 'text': 'And again, these are these videos.', 'start': 10483.222, 'duration': 1.441}, {'end': 10494.601, 'text': "So let's go and do that, okay?", 'start': 10492.259, 'duration': 2.342}, {'end': 10507.871, 'text': "Now, in order to do this, I'm in viewers and remember where we had the wrap underneath the images, as we're gonna start adding all our videos.", 'start': 10496.703, 'duration': 11.168}, {'end': 10518.62, 'text': "So let's go and do that, okay? Do video, autoplay, and we're gonna set this to true.", 'start': 10511.154, 'duration': 7.466}, {'end': 10523.483, 'text': "We're also gonna set this to true.", 'start': 10521.561, 'duration': 1.922}, {'end': 10528.368, 'text': 'Place in line, set that to true.', 'start': 10524.644, 'duration': 3.724}, {'end': 10534.635, 'text': 'All right, and now what we actually need is the source.', 'start': 10530.611, 'duration': 4.024}, {'end': 10559.081, 'text': 'Slash mp4 like this.', 'start': 10555.999, 'duration': 3.082}, {'end': 10564.903, 'text': 'Okey dokey, Mr. Pokey.', 'start': 10562.222, 'duration': 2.681}, {'end': 10567.985, 'text': 'We need to make sure that we end source.', 'start': 10565.624, 'duration': 2.361}, {'end': 10570.686, 'text': 'All right.', 'start': 10570.466, 'duration': 0.22}, {'end': 10577.47, 'text': 'So look, the first video is already auto playing, which is freaking cool.', 'start': 10572.607, 'duration': 4.863}, {'end': 10584.393, 'text': 'Now we just need to add this multiple more times underneath every single one of these.', 'start': 10579.751, 'duration': 4.642}, {'end': 10597.672, 'text': "So that's the second video, third video, fourth video and fifth video.", 'start': 10588.083, 'duration': 9.589}, {'end': 10602.597, 'text': 'Okay And now I need to update the URLs for each of them.', 'start': 10598.253, 'duration': 4.344}], 'summary': "Organizing and adding autoplay feature to multiple videos in a 'videos' folder.", 'duration': 152.212, 'max_score': 10450.385, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw10450385.jpg'}], 'start': 9738.495, 'title': 'Enhancing visual components', 'summary': 'Covers adding a viewers component with images, utilizing grid for layout, making it mobile responsive and customizable, styling images with box shadow and transition effects, and adding multiple videos to a folder, resulting in successful playback of all five videos.', 'chapters': [{'end': 10174.878, 'start': 9738.495, 'title': 'Adding viewers component', 'summary': 'Discusses adding a viewers component with images and utilizing grid for layout, making it mobile responsive and customizable for different devices, while adding specific images for the viewers component.', 'duration': 436.383, 'highlights': ["Utilizing Grid for layout to make it mobile responsive and customizable for different devices. The chapter demonstrates the use of Grid to create a mobile-responsive layout, ensuring the component's adaptability for various devices.", 'Adding specific images for the viewers component. The chapter outlines the process of adding specific images for the viewers component, including disney, pixar, marvel, star wars, and national.', 'Creating a viewers component and adding it to the home component. The chapter details the creation of a viewers component named viewers.js and its integration into the home component, enhancing the overall functionality of the application.']}, {'end': 10417.052, 'start': 10174.878, 'title': 'Styling and transition effects for images', 'summary': 'Explains the process of fixing jumbled up images by adding box shadow, transition effects for scaling and opacity, and adjusting image properties like height, object fit, opacity, and position to create a clear and crispy visual effect.', 'duration': 242.174, 'highlights': ['The chapter explains the process of fixing jumbled up images by adding box shadow, transition effects for scaling and opacity, and adjusting image properties like height, object fit, opacity, and position to create a clear and crispy visual effect.', 'Adjusting the image properties such as height, object fit, opacity, and position, resulting in a clear and crispy visual effect.', 'Adding transition effects for scaling and opacity to the images, contributing to the visual appeal and user interaction.', 'Adding box shadow to the images to improve their visual presentation and create a more polished appearance.']}, {'end': 10669.976, 'start': 10417.893, 'title': 'Adding videos to viewer', 'summary': 'Covers the process of adding multiple videos to a folder for the viewers, setting them to autoplay and inline, and updating their urls, resulting in all five videos playing successfully.', 'duration': 252.083, 'highlights': ['The process of adding multiple videos to a folder for the viewers.', 'Setting the videos to autoplay and inline.', 'Updating the URLs for each video, resulting in all five videos playing successfully.']}], 'duration': 931.481, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw9738495.jpg', 'highlights': ['Updating the URLs for each video, resulting in all five videos playing successfully.', 'Adding specific images for the viewers component, including disney, pixar, marvel, star wars, and national.', 'Utilizing Grid for layout to make it mobile responsive and customizable for different devices.', 'Creating a viewers component and adding it to the home component.', 'Adding transition effects for scaling and opacity to the images, contributing to the visual appeal and user interaction.', 'The chapter explains the process of fixing jumbled up images by adding box shadow, transition effects for scaling and opacity, and adjusting image properties like height, object fit, opacity, and position to create a clear and crispy visual effect.', 'Adding box shadow to the images to improve their visual presentation and create a more polished appearance.', 'The process of adding multiple videos to a folder for the viewers.', 'Setting the videos to autoplay and inline.', 'Adjusting the image properties such as height, object fit, opacity, and position, resulting in a clear and crispy visual effect.']}, {'end': 11536.829, 'segs': [{'end': 10720.453, 'src': 'embed', 'start': 10672.418, 'weight': 0, 'content': [{'end': 10677.781, 'text': "Now what we gotta do is we're gonna go ahead and style this thing, okay?", 'start': 10672.418, 'duration': 5.363}, {'end': 10687.546, 'text': "So we're gonna go inside of our wrap component and inside of here we're gonna style the video.", 'start': 10680.382, 'duration': 7.164}, {'end': 10701.473, 'text': "Let's make their width 100% and let's also make their height.", 'start': 10697.331, 'duration': 4.142}, {'end': 10710.123, 'text': "percent. let's see how they're looking all right, looking decent, now, looking better.", 'start': 10703.496, 'duration': 6.627}, {'end': 10718.451, 'text': 'okay, position is absolute invisible.', 'start': 10710.123, 'duration': 8.328}, {'end': 10720.453, 'text': 'cannot see them.', 'start': 10718.451, 'duration': 2.002}], 'summary': 'Styling the video with 100% width and height, improving visibility.', 'duration': 48.035, 'max_score': 10672.418, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw10672418.jpg'}, {'end': 10932.902, 'src': 'embed', 'start': 10785.426, 'weight': 1, 'content': [{'end': 10794.752, 'text': "okay, let's add our transform.", 'start': 10785.426, 'duration': 9.326}, {'end': 10796.673, 'text': 'so when I hover, boom, look at that.', 'start': 10794.752, 'duration': 1.921}, {'end': 10797.634, 'text': 'so nice all.', 'start': 10796.673, 'duration': 0.961}, {'end': 10802.931, 'text': 'Oh, my goodness.', 'start': 10801.508, 'duration': 1.423}, {'end': 10804.995, 'text': 'It looks so freaking juicy.', 'start': 10802.951, 'duration': 2.044}, {'end': 10807.239, 'text': "Okay I'm sorry.", 'start': 10805.997, 'duration': 1.242}, {'end': 10811.166, 'text': 'Alright I should behave myself better.', 'start': 10808.501, 'duration': 2.665}, {'end': 10827.078, 'text': 'Oh, look at that.', 'start': 10826.577, 'duration': 0.501}, {'end': 10827.919, 'text': 'Look at that.', 'start': 10827.558, 'duration': 0.361}, {'end': 10833.284, 'text': "So the video's playing the entire time, but when I hover over it, it just makes itself seen.", 'start': 10828.639, 'duration': 4.645}, {'end': 10837.088, 'text': 'Okay? Make yourself seen, baby.', 'start': 10833.304, 'duration': 3.784}, {'end': 10842.013, 'text': 'And look how good it looks in responsive.', 'start': 10839.831, 'duration': 2.182}, {'end': 10863.717, 'text': "So that's it.", 'start': 10863.217, 'duration': 0.5}, {'end': 10870.003, 'text': 'All right, that finishes up our viewers and video component.', 'start': 10864.578, 'duration': 5.425}, {'end': 10874.467, 'text': "Now the next part we're gonna start working on is this recommended for you part.", 'start': 10870.584, 'duration': 3.883}, {'end': 10877.69, 'text': "So we're gonna be working on all of this right here.", 'start': 10875.288, 'duration': 2.402}, {'end': 10880.153, 'text': 'Okay, the recommended for you.', 'start': 10877.71, 'duration': 2.443}, {'end': 10881.794, 'text': 'Get excited.', 'start': 10880.173, 'duration': 1.621}, {'end': 10884.717, 'text': "All right, let's work on the recommended section now.", 'start': 10881.814, 'duration': 2.903}, {'end': 10886.118, 'text': 'So a couple of things.', 'start': 10885.037, 'duration': 1.081}, {'end': 10913.53, 'text': "this point right, gonna be called recommend style components and we're gonna get h4 and we're just gonna have it say recommended for you.", 'start': 10891.564, 'duration': 21.966}, {'end': 10915.13, 'text': 'like this.', 'start': 10913.53, 'duration': 1.6}, {'end': 10926.877, 'text': 'now we just got to make sure that we actually add it to our home viewers and add in recommends.', 'start': 10915.13, 'duration': 11.747}, {'end': 10932.902, 'text': "let's make sure we export export default recommends.", 'start': 10926.877, 'duration': 6.025}], 'summary': "Adding transform effect to video on hover, finishing video component, and starting work on 'recommended for you' section.", 'duration': 147.476, 'max_score': 10785.426, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw10785426.jpg'}, {'end': 11121.063, 'src': 'embed', 'start': 11072.451, 'weight': 4, 'content': [{'end': 11073.832, 'text': 'All right, great.', 'start': 11072.451, 'duration': 1.381}, {'end': 11088.013, 'text': "And also we're gonna make it so it goes from left to right four columns, okay? So in the recommended, we have four.", 'start': 11075.253, 'duration': 12.76}, {'end': 11094.302, 'text': 'Here, yeah, right? In the recommended, we always have four.', 'start': 11089.976, 'duration': 4.326}, {'end': 11096.004, 'text': "So that's what we want.", 'start': 11095.063, 'duration': 0.941}, {'end': 11101.712, 'text': 'But on a mobile device, what we need to do is the following.', 'start': 11097.907, 'duration': 3.805}, {'end': 11117.281, 'text': "So on mobile, make it so it's only two columns max.", 'start': 11113.419, 'duration': 3.862}, {'end': 11121.063, 'text': 'Like this.', 'start': 11120.623, 'duration': 0.44}], 'summary': 'Layout will have 4 columns on desktop and 2 columns on mobile.', 'duration': 48.612, 'max_score': 11072.451, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw11072451.jpg'}, {'end': 11536.829, 'src': 'embed', 'start': 11458.765, 'weight': 6, 'content': [{'end': 11467.952, 'text': "Okay, we'll have it ease in and out.", 'start': 11458.765, 'duration': 9.187}, {'end': 11484.445, 'text': "Given it's the index of one, so we make sure it always shows up.", 'start': 11479.081, 'duration': 5.364}, {'end': 11500.521, 'text': "what happens when we hover on it, okay? So again, we're going to add the box shadow.", 'start': 11495.018, 'duration': 5.503}, {'end': 11508.266, 'text': "So when I hover, there's going to be a box shadow, but that's going to show up when I scale it.", 'start': 11501.562, 'duration': 6.704}, {'end': 11518.793, 'text': "Okay So when I hover over, boom, that's beautiful.", 'start': 11515.571, 'duration': 3.222}, {'end': 11522.155, 'text': "Perfect That's looking juicy now.", 'start': 11519.413, 'duration': 2.742}, {'end': 11534.008, 'text': 'There we go.', 'start': 11525.004, 'duration': 9.004}, {'end': 11536.829, 'text': 'Hey, nice.', 'start': 11535.288, 'duration': 1.541}], 'summary': 'Adding box shadow and scaling on hover effect.', 'duration': 78.064, 'max_score': 11458.765, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw11458765.jpg'}], 'start': 10672.418, 'title': 'Styling video, grid layout, and image display', 'summary': "Covers styling the video component with 100% width and height, implementing hover effects, box shadow, and transform. it also includes introducing the 'recommended for you' section, creating a grid layout with four columns, adjusting it to two columns for mobile devices, and adding images with styling and transitions.", 'chapters': [{'end': 10964.267, 'start': 10672.418, 'title': 'Styling video and adding recommended section', 'summary': "Covers styling the video component with 100% width and height, implementing hover effects, box shadow, and transform to enhance visual appearance, and introducing the 'recommended for you' section.", 'duration': 291.849, 'highlights': ['The video component is styled with 100% width and height, along with hover effects, box shadow, and transform to enhance its visual appearance.', "Introduction of the 'recommended for you' section by creating the recommend style components and adding the 'recommended for you' text to the home viewers.", 'The process of adding styles and effects to the video component is described in detail, emphasizing the use of hover effects and visual enhancement techniques.', "The recommended section is created by adding the 'recommended for you' text and ensuring its visibility within the home viewers.", "The chapter concludes with the completion of the viewers and video component and the plan to commence work on the 'recommended for you' section."]}, {'end': 11536.829, 'start': 10965.887, 'title': 'Creating grid layout and image display', 'summary': 'Details the process of creating a grid layout with four columns, adjusting it to two columns for mobile devices, and adding images with styling and transitions.', 'duration': 570.942, 'highlights': ['The chapter details the process of creating a grid layout with four columns, adjusting it to two columns for mobile devices, and adding images with styling and transitions.', 'The grid layout is set with a gap of 25 pixels and spans from left to right with four columns, adapting to two columns for mobile devices.', 'Images are added with padding, box shadow, cursor pointer, overflow hidden, and transition effects for an enhanced display and user interaction.']}], 'duration': 864.411, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw10672418.jpg', 'highlights': ['The video component is styled with 100% width and height, along with hover effects, box shadow, and transform to enhance its visual appearance.', "Introduction of the 'recommended for you' section by creating the recommend style components and adding the 'recommended for you' text to the home viewers.", 'The process of adding styles and effects to the video component is described in detail, emphasizing the use of hover effects and visual enhancement techniques.', "The recommended section is created by adding the 'recommended for you' text and ensuring its visibility within the home viewers.", 'The chapter details the process of creating a grid layout with four columns, adjusting it to two columns for mobile devices, and adding images with styling and transitions.', 'The grid layout is set with a gap of 25 pixels and spans from left to right with four columns, adapting to two columns for mobile devices.', 'Images are added with padding, box shadow, cursor pointer, overflow hidden, and transition effects for an enhanced display and user interaction.', "The chapter concludes with the completion of the viewers and video component and the plan to commence work on the 'recommended for you' section."]}, {'end': 12867.677, 'segs': [{'end': 11759.939, 'src': 'embed', 'start': 11728.348, 'weight': 0, 'content': [{'end': 11731.131, 'text': "Let's go to home and let's do trending.", 'start': 11728.348, 'duration': 2.783}, {'end': 11739.533, 'text': 'so great job.', 'start': 11738.553, 'duration': 0.98}, {'end': 11741.334, 'text': 'we got all of these components.', 'start': 11739.533, 'duration': 1.801}, {'end': 11744.655, 'text': "now let's start adding more things to it all right now.", 'start': 11741.334, 'duration': 3.321}, {'end': 11753.317, 'text': "next up, what we're gonna start doing is we're gonna start adding functionality to these movies, meaning that we're gonna use redux,", 'start': 11744.655, 'duration': 8.662}, {'end': 11758.519, 'text': "and also what we're gonna actually do is we're gonna add firebase to all of this.", 'start': 11753.317, 'duration': 5.202}, {'end': 11759.939, 'text': "i hope you're excited.", 'start': 11758.519, 'duration': 1.42}], 'summary': 'Developing project with redux and firebase, adding functionality to movies.', 'duration': 31.591, 'max_score': 11728.348, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw11728348.jpg'}, {'end': 11991.588, 'src': 'embed', 'start': 11970.566, 'weight': 1, 'content': [{'end': 11979.909, 'text': "All right, so now we're gonna pretty much hard code and put all this data inside of Firebase, okay? So these are all the movies.", 'start': 11970.566, 'duration': 9.343}, {'end': 11984.637, 'text': "Okay, it's gonna be hard for you to see, so let me add that to my source file.", 'start': 11980.589, 'duration': 4.048}, {'end': 11986.661, 'text': 'And this is what this is gonna look like.', 'start': 11984.657, 'duration': 2.004}, {'end': 11991.588, 'text': 'movie in here all right.', 'start': 11988.846, 'duration': 2.742}], 'summary': 'Data for movies will be hard coded and stored in firebase.', 'duration': 21.022, 'max_score': 11970.566, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw11970566.jpg'}, {'end': 12224.401, 'src': 'heatmap', 'start': 11970.566, 'weight': 2, 'content': [{'end': 11979.909, 'text': "All right, so now we're gonna pretty much hard code and put all this data inside of Firebase, okay? So these are all the movies.", 'start': 11970.566, 'duration': 9.343}, {'end': 11984.637, 'text': "Okay, it's gonna be hard for you to see, so let me add that to my source file.", 'start': 11980.589, 'duration': 4.048}, {'end': 11986.661, 'text': 'And this is what this is gonna look like.', 'start': 11984.657, 'duration': 2.004}, {'end': 11991.588, 'text': 'movie in here all right.', 'start': 11988.846, 'duration': 2.742}, {'end': 12003.318, 'text': "so, like inside out, this is a tale of two kitties a chinese mom who's sad when her grandson leaves home or, aka pow, the title.", 'start': 11991.588, 'duration': 11.73}, {'end': 12011.505, 'text': "and so this is going to be all of the data and we're going to go ahead and put that manually in firebase, so you can see how to do that.", 'start': 12003.318, 'duration': 8.187}, {'end': 12014.808, 'text': "okay, so we're going to go do that now.", 'start': 12011.505, 'duration': 3.303}, {'end': 12024.308, 'text': "So let's open up our Firebase and let's go to our Firebase Firestore database.", 'start': 12015.583, 'duration': 8.725}, {'end': 12028.631, 'text': 'Okay Now in my real time database.', 'start': 12024.328, 'duration': 4.303}, {'end': 12035.864, 'text': "done this yet, but we're going to do this together.", 'start': 12033.322, 'duration': 2.542}, {'end': 12039.268, 'text': "okay, we're going to have a collection called movies.", 'start': 12035.864, 'duration': 3.404}, {'end': 12049.778, 'text': "inside of there, each record is going to be one movie, and when i click inside of that record, it's going to have these things so a background image,", 'start': 12039.268, 'duration': 10.51}, {'end': 12050.578, 'text': 'a card image.', 'start': 12049.778, 'duration': 0.8}, {'end': 12058.595, 'text': 'okay, so, for example, i should be able to copy this and look at it All right.', 'start': 12050.578, 'duration': 8.017}, {'end': 12059.915, 'text': "so that's the background image.", 'start': 12058.595, 'duration': 1.32}, {'end': 12063.017, 'text': "Let's click and do it.", 'start': 12062.056, 'duration': 0.961}, {'end': 12070.32, 'text': 'This is gonna be the cover image, right? And then description, subtitle, title, title image, type recommend.', 'start': 12063.177, 'duration': 7.143}, {'end': 12082.562, 'text': "So we're just gonna kind of So let's go ahead and create a database and we'll just put it in some mode.", 'start': 12070.761, 'duration': 11.801}, {'end': 12083.222, 'text': 'All right.', 'start': 12083.002, 'duration': 0.22}, {'end': 12086.744, 'text': "For now, let's just start in test mode.", 'start': 12083.242, 'duration': 3.502}, {'end': 12089.065, 'text': "Okay I'll hit next.", 'start': 12087.385, 'duration': 1.68}, {'end': 12090.986, 'text': 'Yes Choose whichever one.', 'start': 12089.506, 'duration': 1.48}, {'end': 12091.667, 'text': "It doesn't matter.", 'start': 12091.026, 'duration': 0.641}, {'end': 12098.61, 'text': "So now it's provisioning the cloud store and it's going to be ready to go in just a second.", 'start': 12092.207, 'duration': 6.403}, {'end': 12105.614, 'text': "And then once it is ready to go, we're just going to pull the data from here.", 'start': 12099.211, 'duration': 6.403}, {'end': 12118.248, 'text': "So we're going to start a collection and this collection is going to be called movies.", 'start': 12113.045, 'duration': 5.203}, {'end': 12125.673, 'text': "Okay And now let's take a look at how movies is stored.", 'start': 12119.349, 'duration': 6.324}, {'end': 12130.737, 'text': "Okay So let's click into it.", 'start': 12126.454, 'duration': 4.283}, {'end': 12136.381, 'text': 'Okay So it has all of these, right? We need all of them.', 'start': 12132.318, 'duration': 4.063}, {'end': 12142.414, 'text': "So let's go ahead and start adding in all those fields.", 'start': 12139.033, 'duration': 3.381}, {'end': 12143.754, 'text': 'We need background image.', 'start': 12142.494, 'duration': 1.26}, {'end': 12153.216, 'text': 'Yeah We need card image.', 'start': 12145.374, 'duration': 7.842}, {'end': 12156.416, 'text': 'We need description.', 'start': 12155.056, 'duration': 1.36}, {'end': 12161.217, 'text': 'OK We need subtitle.', 'start': 12158.937, 'duration': 2.28}, {'end': 12164.258, 'text': 'We need title.', 'start': 12163.298, 'duration': 0.96}, {'end': 12193.42, 'text': "So background image, let's add that in here.", 'start': 12185.493, 'duration': 7.927}, {'end': 12201.127, 'text': "Let's add the card image in here.", 'start': 12199.245, 'duration': 1.882}, {'end': 12205.791, 'text': "Let's add description.", 'start': 12204.249, 'duration': 1.542}, {'end': 12224.401, 'text': 'Subtitle, our recommend.', 'start': 12209.754, 'duration': 14.647}], 'summary': "Hard coding movie data into firebase firestore and realtime database, creating a collection called 'movies' with specific fields for each movie.", 'duration': 92.083, 'max_score': 11970.566, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw11970566.jpg'}, {'end': 12564.002, 'src': 'embed', 'start': 12504.09, 'weight': 3, 'content': [{'end': 12507.772, 'text': 'Okay, so dispatch is going to be useDispatch.', 'start': 12504.09, 'duration': 3.682}, {'end': 12529.243, 'text': "username is going to be let's grab it from the selector, all right, and we're gonna make recommends, aka recommended videos,", 'start': 12513.317, 'duration': 15.926}, {'end': 12538.606, 'text': 'be empty and this will be new disney and this will be originals and this will be trending.', 'start': 12529.243, 'duration': 9.363}, {'end': 12547.634, 'text': "Let's write our React hook or use effect.", 'start': 12543.732, 'duration': 3.902}, {'end': 12551.896, 'text': 'All right.', 'start': 12551.596, 'duration': 0.3}, {'end': 12555.198, 'text': "And let's pull from our collection.", 'start': 12553.097, 'duration': 2.101}, {'end': 12564.002, 'text': "Okay And we're going to do on snapshot.", 'start': 12560.2, 'duration': 3.802}], 'summary': 'Dispatching usedispatch for username and recommending videos, while implementing react hooks and using collection snapshot.', 'duration': 59.912, 'max_score': 12504.09, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw12504090.jpg'}], 'start': 11536.849, 'title': 'Managing movie data and implementing redux', 'summary': 'Covers adding new disney, originals, and trending components, implementing redux with firebase, setting up a firebase database for movie data, adding movie attributes, creating 16 records, and implementing the movie reducer in react with useeffect and selectors for fetching and dispatching movie data.', 'chapters': [{'end': 11881.667, 'start': 11536.849, 'title': 'Adding new components and implementing redux', 'summary': 'Covers the process of adding new disney, originals, and trending components to the project and implementing redux with firebase for managing movie data.', 'duration': 344.818, 'highlights': ['The process of adding new Disney, originals, and trending components to the project.', 'Implementing Redux with Firebase for managing movie data.', 'Creating a movie slice in Redux with initial states for recommended, originals, and trending.']}, {'end': 12130.737, 'start': 11881.687, 'title': 'Setting up firebase database for movie data', 'summary': 'Outlines the process of setting up a firebase database for storing movie data, including adding collections and records, with a focus on storing movie attributes such as background image, cover image, description, subtitle, title, title image, and type recommend.', 'duration': 249.05, 'highlights': ['The process of setting up a Firebase database for storing movie data is explained, including adding collections and records, with a focus on storing movie attributes such as background image, cover image, description, subtitle, title, title image, and type recommend.', 'Explanation of the process of provisioning the cloud store for the Firebase database is provided, emphasizing the creation of a collection called movies and the storage of movie attributes within records.', 'Details on manually inputting movie data into the Firebase database are given, highlighting the attributes to be included such as background image, cover image, description, subtitle, title, title image, and type recommend.']}, {'end': 12381.191, 'start': 12132.318, 'title': 'Adding fields to create 16 records', 'summary': 'Involves adding various fields such as background image, card image, description, subtitle, and title to create 16 records, a painstaking yet worthwhile process.', 'duration': 248.873, 'highlights': ['Adding fields such as background image, card image, description, subtitle, and title to create a total of 16 records.', 'Emphasizing the manual process of adding all 16 records, despite it being a super annoying and painstaking task.', 'Highlighting the importance and value of the copy-pasting skill in the development process.', 'Encouraging the idea of doing the process together to simplify and speed up the task.']}, {'end': 12867.677, 'start': 12391.647, 'title': 'Implementing movie reducer in react', 'summary': 'Covers implementing the movie reducer in react, using useeffect and selectors to fetch data from firebase, and dispatching the fetched movies to the redux store when the username is updated.', 'duration': 476.03, 'highlights': ['Implementing movie reducer using useEffect and selectors to fetch data from Firebase and dispatching movies to Redux store when the username is updated', 'Using snapshot.docs.map to loop through records and push data to different categories based on type, such as recommended, new Disney, or originals', "Ensuring lowercase 'l' in viewers.js file to resolve errors related to properties"]}], 'duration': 1330.828, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw11536849.jpg', 'highlights': ['Implementing Redux with Firebase for managing movie data.', 'The process of setting up a Firebase database for storing movie data is explained, including adding collections and records, with a focus on storing movie attributes.', 'Adding fields such as background image, card image, description, subtitle, and title to create a total of 16 records.', 'Implementing movie reducer using useEffect and selectors to fetch data from Firebase and dispatching movies to Redux store when the username is updated']}, {'end': 13705.328, 'segs': [{'end': 12932.996, 'src': 'embed', 'start': 12905.144, 'weight': 3, 'content': [{'end': 12913.848, 'text': "So in order to extend this, it was giving me problems when I was doing push because I think it just didn't like the mutations.", 'start': 12905.144, 'duration': 8.704}, {'end': 12918.33, 'text': "So what you're going to do is you're going to define a new recommends every time in.", 'start': 12914.628, 'duration': 3.702}, {'end': 12928.554, 'text': "you're gonna basically do is expand whatever it was existing and then add the new record to it, like that.", 'start': 12920.31, 'duration': 8.244}, {'end': 12932.996, 'text': "okay, and that's basically what I'm doing for all the other ones.", 'start': 12928.554, 'duration': 4.442}], 'summary': 'Troubleshooting push issues by defining and expanding new records for mutations.', 'duration': 27.852, 'max_score': 12905.144, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw12905144.jpg'}, {'end': 13131.699, 'src': 'embed', 'start': 13068.919, 'weight': 2, 'content': [{'end': 13079.265, 'text': "And we're going to now import also our selector for recommended movies.", 'start': 13068.919, 'duration': 10.346}, {'end': 13096.223, 'text': "Yep, it's defined, so that's good.", 'start': 13093.882, 'duration': 2.341}, {'end': 13105.826, 'text': "All right, now inside of our recommends, what we're gonna do is grab all the movies.", 'start': 13098.163, 'duration': 7.663}, {'end': 13120.691, 'text': 'Okay, we get them from Firebase, send them to our store, and use selector, allows us to put our hand inside of the store and pull things out.', 'start': 13105.846, 'duration': 14.845}, {'end': 13122.532, 'text': "Okay, it's like a big candy bag.", 'start': 13120.711, 'duration': 1.821}, {'end': 13131.699, 'text': "Let's go within content.", 'start': 13130.319, 'duration': 1.38}], 'summary': 'Imported selector for recommended movies, fetched from firebase, and used selector to access store data.', 'duration': 62.78, 'max_score': 13068.919, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw13068919.jpg'}, {'end': 13285.414, 'src': 'embed', 'start': 13259.335, 'weight': 5, 'content': [{'end': 13266.08, 'text': 'Right? We got the movie ID, and then we actually put the image of the movie.', 'start': 13259.335, 'duration': 6.745}, {'end': 13270.784, 'text': "Now, just so you know what detail is gonna be, let's make it go like this.", 'start': 13266.901, 'duration': 3.883}, {'end': 13274.226, 'text': 'What detail is going to be is going to be this.', 'start': 13271.864, 'duration': 2.362}, {'end': 13283.773, 'text': "When I click on a movie, this page that I go to, this is the detailed page, okay? That's what we're gonna be building soon as well.", 'start': 13274.246, 'duration': 9.527}, {'end': 13285.414, 'text': "So I hope you're excited.", 'start': 13284.033, 'duration': 1.381}], 'summary': 'Developing a detailed page for movie selection and image display.', 'duration': 26.079, 'max_score': 13259.335, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw13259335.jpg'}, {'end': 13428.086, 'src': 'embed', 'start': 13393.218, 'weight': 1, 'content': [{'end': 13400.804, 'text': 'Okay Now it is pulling from Firebase and now we are in business, baby.', 'start': 13393.218, 'duration': 7.586}, {'end': 13403.426, 'text': "Let's fucking go.", 'start': 13401.264, 'duration': 2.162}, {'end': 13409.35, 'text': "Great Now we're actually pulling the data right from Firebase.", 'start': 13403.926, 'duration': 5.424}, {'end': 13412.039, 'text': 'All right.', 'start': 13410.778, 'duration': 1.261}, {'end': 13413.099, 'text': 'That was insane.', 'start': 13412.299, 'duration': 0.8}, {'end': 13424.844, 'text': 'Now all we got to do is do the same thing for the new Disney Plus channel, the originals channel or not channel.', 'start': 13413.679, 'duration': 11.165}, {'end': 13425.805, 'text': 'but you know what I mean?', 'start': 13424.844, 'duration': 0.961}, {'end': 13428.086, 'text': 'The category, trending category.', 'start': 13426.465, 'duration': 1.621}], 'summary': 'Successfully pulling data from firebase for disney plus and planning to do the same for the trending category.', 'duration': 34.868, 'max_score': 13393.218, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw13393218.jpg'}, {'end': 13552.82, 'src': 'embed', 'start': 13518.75, 'weight': 0, 'content': [{'end': 13525.452, 'text': 'And then other than that, instead of recommended for you, it should say New to Disney.', 'start': 13518.75, 'duration': 6.702}, {'end': 13530.114, 'text': "Okay, let's say New to Disney Plus like that.", 'start': 13527.833, 'duration': 2.281}, {'end': 13532.495, 'text': 'There we go.', 'start': 13531.955, 'duration': 0.54}, {'end': 13535.216, 'text': 'Okay, we got that right here.', 'start': 13532.515, 'duration': 2.701}, {'end': 13538.097, 'text': 'And the movies are coming straight from Firebase.', 'start': 13535.456, 'duration': 2.641}, {'end': 13540.898, 'text': "That's fire.", 'start': 13540.158, 'duration': 0.74}, {'end': 13548.618, 'text': "All right, now what I'm gonna do is I'm pretty much gonna copy this entire code right there.", 'start': 13542.534, 'duration': 6.084}, {'end': 13552.82, 'text': "And now we're gonna do it to originals.", 'start': 13550.539, 'duration': 2.281}], 'summary': "Modifying interface to display 'new to disney' instead of 'recommended for you', retrieving movies from firebase, and duplicating code for 'originals'.", 'duration': 34.07, 'max_score': 13518.75, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw13518750.jpg'}], 'start': 12868.077, 'title': 'Firebase integration and bug fixing', 'summary': 'Covers bug fixing related to push operation, implementing movie retrieval from firebase, and successful integration for disney plus platform with celebratory remarks and call-to-action for engagement.', 'chapters': [{'end': 13285.414, 'start': 12868.077, 'title': 'Fixing bug and implementing movie retrieval', 'summary': 'Explains the process of fixing a bug related to push operation in the code, and implementing the retrieval of movie data from firebase to the app, using selectors and mapping through the movies.', 'duration': 417.337, 'highlights': ['Explaining the process of fixing a bug related to push operation and mutations in the code.', 'Implementing the retrieval of movie data from Firebase to the app using selectors and mapping through the movies.', 'Detailing the structure of the detailed page that would be built for the movies, including the usage of movie IDs and images.']}, {'end': 13705.328, 'start': 13286.531, 'title': 'Firebase data integration for disney plus', 'summary': 'Involves debugging and integrating firebase data for different categories on a web page, ultimately achieving successful integration for the disney plus platform, with celebratory remarks and call-to-action for engagement.', 'duration': 418.797, 'highlights': ['Successfully integrated Firebase data for Disney Plus platform, with celebratory remarks and call-to-action for engagement.', "Debugged code for various categories, including 'New Disney', 'Originals', and 'Trending', achieving successful integration.", 'Identified and rectified specific code errors such as incorrect parentheses and semicolons, ensuring functionality and seamless data retrieval from Firebase.', "Provided guidance and instructions for future actions, including copying and modifying code for different categories, with reference to 'recommended for you', 'New to Disney Plus', and 'Trending'."]}], 'duration': 837.251, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw12868077.jpg', 'highlights': ['Successfully integrated Firebase data for Disney Plus platform, with celebratory remarks and call-to-action for engagement.', "Debugged code for various categories, including 'New Disney', 'Originals', and 'Trending', achieving successful integration.", 'Identified and rectified specific code errors such as incorrect parentheses and semicolons, ensuring functionality and seamless data retrieval from Firebase.', 'Explaining the process of fixing a bug related to push operation and mutations in the code.', 'Implementing the retrieval of movie data from Firebase to the app using selectors and mapping through the movies.', 'Detailing the structure of the detailed page that would be built for the movies, including the usage of movie IDs and images.', "Provided guidance and instructions for future actions, including copying and modifying code for different categories, with reference to 'recommended for you', 'New to Disney Plus', and 'Trending'."]}, {'end': 16866.524, 'segs': [{'end': 14241.66, 'src': 'embed', 'start': 14210.312, 'weight': 2, 'content': [{'end': 14222.816, 'text': "So let's go take a look at the finished version and see, right? So here I have the title of the movie, right? So we're gonna do the same thing here.", 'start': 14210.312, 'duration': 12.504}, {'end': 14226.076, 'text': 'And this is, I think, I believe Inside Out.', 'start': 14223.556, 'duration': 2.52}, {'end': 14234.898, 'text': "So we're gonna add the video title all right, so let's work on that together.", 'start': 14226.516, 'duration': 8.382}, {'end': 14241.66, 'text': "so inside of the container, but outside of background, I'm gonna do this okay.", 'start': 14234.898, 'duration': 6.762}], 'summary': "Reviewing the finished movie with the title 'inside out' and working on adding the video title.", 'duration': 31.348, 'max_score': 14210.312, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw14210312.jpg'}, {'end': 14576.316, 'src': 'embed', 'start': 14462.645, 'weight': 3, 'content': [{'end': 14467.006, 'text': "All right, so I'm just gonna go ahead and start making the styling for them right away.", 'start': 14462.645, 'duration': 4.361}, {'end': 14469.327, 'text': "Let's do content meta.", 'start': 14467.866, 'duration': 1.461}, {'end': 14482.33, 'text': "And we're gonna give it a max width of 874 pixels.", 'start': 14474.808, 'duration': 7.522}, {'end': 14487.451, 'text': "And let's now do controls.", 'start': 14485.07, 'duration': 2.381}, {'end': 14503.727, 'text': "So let's vertically align this, center align this, like this.", 'start': 14500.325, 'duration': 3.402}, {'end': 14508.491, 'text': "Let's make sure it's display flex.", 'start': 14506.87, 'duration': 1.621}, {'end': 14531.285, 'text': 'right. so now we got some text right over here.', 'start': 14527.421, 'duration': 3.864}, {'end': 14535.87, 'text': "okay, right there, and it's looking good.", 'start': 14531.285, 'duration': 4.585}, {'end': 14541.315, 'text': "okay, now, pretty soon we're gonna add much more text to this.", 'start': 14535.87, 'duration': 5.445}, {'end': 14547.081, 'text': "okay, um, next up, let's add in, i think, the player component.", 'start': 14541.315, 'duration': 5.766}, {'end': 14550.484, 'text': 'so, for example, this play right here.', 'start': 14547.081, 'duration': 3.403}, {'end': 14551.405, 'text': "let's, let's start out.", 'start': 14550.484, 'duration': 0.921}, {'end': 14558.647, 'text': 'Get the images first.', 'start': 14557.166, 'duration': 1.481}, {'end': 14562.729, 'text': "So I'll need my icon white and my icon black.", 'start': 14559.187, 'duration': 3.542}, {'end': 14567.952, 'text': "So let's grab these and put it in my images.", 'start': 14565.431, 'duration': 2.521}, {'end': 14570.073, 'text': "Boom, that's done.", 'start': 14569.272, 'duration': 0.801}, {'end': 14572.434, 'text': 'Okay, so I got both of them.', 'start': 14570.793, 'duration': 1.641}, {'end': 14576.316, 'text': "Now in my detail, let's go to controls.", 'start': 14573.234, 'duration': 3.082}], 'summary': 'Styling content meta with max width of 874 pixels, adding player component, and obtaining icon images.', 'duration': 113.671, 'max_score': 14462.645, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw14462645.jpg'}, {'end': 15861.402, 'src': 'embed', 'start': 15828.489, 'weight': 0, 'content': [{'end': 15834.834, 'text': "So for every movie then, when I click on, what'll happen is it'll pull their descriptions dynamically like this", 'start': 15828.489, 'duration': 6.345}, {'end': 15838.947, 'text': "So let's go to detail.", 'start': 15836.846, 'duration': 2.101}, {'end': 15845.011, 'text': "And in here, what we're going to do is write all this code up here.", 'start': 15840.368, 'duration': 4.643}, {'end': 15847.453, 'text': "So I'm going to do a couple of things.", 'start': 15845.071, 'duration': 2.382}, {'end': 15849.674, 'text': "First, I'm going to import a few things.", 'start': 15848.233, 'duration': 1.441}, {'end': 15852.997, 'text': "So let's import useEffect.", 'start': 15849.694, 'duration': 3.303}, {'end': 15856.179, 'text': "And I'm going to need access to state as well.", 'start': 15853.497, 'duration': 2.682}, {'end': 15859.661, 'text': 'From React.', 'start': 15858.64, 'duration': 1.021}, {'end': 15861.402, 'text': 'Okay, great.', 'start': 15860.942, 'duration': 0.46}], 'summary': 'Code will dynamically pull movie descriptions, importing react components.', 'duration': 32.913, 'max_score': 15828.489, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw15828489.jpg'}, {'end': 16620.607, 'src': 'embed', 'start': 16583.377, 'weight': 1, 'content': [{'end': 16585.397, 'text': 'Make sure you also do Firebase login.', 'start': 16583.377, 'duration': 2.02}, {'end': 16589.044, 'text': "Okay, so I'm already logged in.", 'start': 16587.585, 'duration': 1.459}, {'end': 16592.466, 'text': 'And then you want to do npm run build.', 'start': 16589.885, 'duration': 2.581}, {'end': 16593.467, 'text': 'This is important.', 'start': 16592.686, 'duration': 0.781}, {'end': 16599.628, 'text': "And it's going to create this new folder right here that you probably saw build.", 'start': 16595.827, 'duration': 3.801}, {'end': 16602.549, 'text': "And it's going to put all the optimized files in there.", 'start': 16600.089, 'duration': 2.46}, {'end': 16606.61, 'text': "Your entire build that's going to be deployed online.", 'start': 16603.59, 'duration': 3.02}, {'end': 16608.471, 'text': "It's going to be inside of that folder.", 'start': 16606.99, 'duration': 1.481}, {'end': 16620.607, 'text': 'done all right.', 'start': 16618.225, 'duration': 2.382}], 'summary': 'Firebase login, npm run build generates optimized files for online deployment.', 'duration': 37.23, 'max_score': 16583.377, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw16583377.jpg'}], 'start': 13705.328, 'title': 'Building movie details ui', 'summary': 'Covers the process of adding background image, movie title, meta content, player component, and trailer button while providing detailed styling instructions for each component of the movie details ui.', 'chapters': [{'end': 14180.368, 'start': 13705.328, 'title': 'Setting up and styling detail page', 'summary': 'Outlines the steps to set up and style a detail page, including creating a new component, adding styling, and addressing routing issues, ensuring a smooth transition to the detail page with dynamic content and improved aesthetics.', 'duration': 475.04, 'highlights': ['Creating a new component for the detail page and integrating it into the app. The speaker discusses the process of creating a new component for the detail page and seamlessly integrating it into the app.', 'Addressing routing issues and ensuring smooth transition to the detail page with dynamic content. The speaker troubleshoots routing issues and ensures a seamless transition to the detail page with dynamic content.', 'Adding styling to the detail page, including a fancy calculation for a visually appealing layout. The chapter emphasizes adding styling to the detail page, including implementing a fancy calculation for a visually appealing layout.']}, {'end': 15115.501, 'start': 14181.368, 'title': 'Building movie details ui', 'summary': 'Covers the process of adding background image, movie title, meta content, player component, and trailer button while providing detailed styling instructions for each component of the movie details ui.', 'duration': 934.133, 'highlights': ['Adding background image and movie title The speaker explains the process of adding the background image and movie title to the container, providing insights into the component creation and styling.', 'Styling meta content and controls The speaker discusses the addition of meta content and controls, detailing the creation and styling of new components with specific width and alignment instructions.', 'Creating and styling player component The speaker provides detailed instructions on creating and styling the player component, including the addition of play icons and extensive styling for improved appearance.', 'Incorporating trailer button and add list component The speaker explains the process of adding a trailer button with detailed styling instructions, and introduces the creation of an add list component for further content addition.']}, {'end': 15799.77, 'start': 15116.782, 'title': 'Creating plus sign and icons with code', 'summary': 'Demonstrates the process of creating a plus sign and icons using code, involving adjustments in dimensions, transformations, and styling, with a focus on accessibility and responsiveness.', 'duration': 682.988, 'highlights': ['The process of creating a plus sign and icons using code The chapter focuses on developing a plus sign and icons through code, highlighting the ability to customize designs without relying on fonts or icons.', 'Adjustments in dimensions and transformations The transcript details the adjustments in dimensions and transformations, showcasing the manipulation of properties such as margin, height, rotation, and translation to refine the visual elements.', 'Styling and responsiveness considerations The chapter emphasizes the styling of components, including font size, color, and responsiveness through media queries, demonstrating the focus on achieving an aesthetically pleasing and accessible design across various devices.']}, {'end': 16452.151, 'start': 15799.77, 'title': 'Dynamic firebase integration for movie details', 'summary': 'Covers dynamically pulling movie details from firebase, using react hooks and state to fetch and display movie information, and making real-time changes to the ui.', 'duration': 652.381, 'highlights': ['The chapter covers dynamically pulling movie details from Firebase, using React hooks and state to fetch and display movie information, and making real-time changes to the UI.', 'The code demonstrates the use of useEffect and state in React to manage the dynamic retrieval and display of movie details from Firebase.', 'Real-time changes to the UI are showcased by dynamically updating the background, title, subtitle, and description of the selected movie based on the data fetched from Firebase.']}, {'end': 16866.524, 'start': 16452.651, 'title': 'Deploying disney plus clone with firebase', 'summary': 'Details the process of deploying a disney plus clone using firebase, including the installation of firebase tools, building and deploying the app, with the successful deployment and testing of the live app.', 'duration': 413.873, 'highlights': ['The chapter details the process of deploying a Disney Plus clone using Firebase, including the installation of Firebase tools, building and deploying the app, with the successful deployment and testing of the live app.', 'The deployment process involves installing Firebase tools, logging in to Firebase, running npm run build to create the optimized files, and deploying the app using firebase deploy command.', 'The successful deployment of the app is showcased, with the demonstration of accessing the live app, testing the functionality, and confirming its mobile responsiveness, Redux integration, and pixel perfection.']}], 'duration': 3161.196, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R_OERlafbmw/pics/R_OERlafbmw13705328.jpg', 'highlights': ['The chapter covers dynamically pulling movie details from Firebase, using React hooks and state to fetch and display movie information, and making real-time changes to the UI.', 'The deployment process involves installing Firebase tools, logging in to Firebase, running npm run build to create the optimized files, and deploying the app using firebase deploy command.', 'Adding background image and movie title The speaker explains the process of adding the background image and movie title to the container, providing insights into the component creation and styling.', 'Styling meta content and controls The speaker discusses the addition of meta content and controls, detailing the creation and styling of new components with specific width and alignment instructions.', 'Creating and styling player component The speaker provides detailed instructions on creating and styling the player component, including the addition of play icons and extensive styling for improved appearance.']}], 'highlights': ['Successfully integrating Firebase dependencies and displaying user data', 'Implementing Redux with Firebase for managing movie data', 'The process of setting up a Firebase database for storing movie data is explained, including adding collections and records, with a focus on storing movie attributes.', 'The deployment process involves installing Firebase tools, logging in to Firebase, running npm run build to create the optimized files, and deploying the app using firebase deploy command.', 'The ASMR Disney Plus clone features Google authentication powered by Firebase and video auto-play, creating a unique product.', 'The presenter emphasizes the novelty of the ASMR Disney Plus clone, stating that it has never been done before.', 'The demonstration showcases the slick design and functionality of the ASMR Disney Plus clone, creating an engaging user experience.', 'The presenter encourages viewers to like and subscribe to the channel to witness similar content, emphasizing engagement.', 'The chapter covers dynamically pulling movie details from Firebase, using React hooks and state to fetch and display movie information, and making real-time changes to the UI.', 'The process of creating a grid layout with four columns, adjusting it to two columns for mobile devices, and adding images with styling and transitions.']}