title
🔴 Build a Spotify Clone with REACT JS for Beginners
description
FREE JavaScript Training 👉 https://event.webinarjam.com/register/1/0z8y0u8?ref=https://www.cleverprogrammer.com/a/30476/isBQm8G8&utm_source=youtube&utm_medium=yt-description&utm_content=3-aug-live-spotify-clone-sonny-qazi&utm_campaign=live-everyday&utm_term=warm&utm_affiliate_link=true
Github REPO + LIVE demo 👉 https://github.com/CleverProgrammers/spotify-clone
Do you want to master React JS & learn how to make an income with your new skills? Click here & enroll NOW: https://www.cleverprogrammer.com/pwj?ref=https://www.cleverprogrammer.com/a/30476/isBQm8G8&utm_source=youtube&utm_medium=yt-description&utm_content=3-aug-live-spotify-clone-sonny-qazi&utm_campaign=live-everyday&utm_term=warm&utm_affiliate_link=true
In this FREE LIVE training, Qazi & Sonny will show you how to build a Spotify Clone with REACT JS 🚀.
#reactjs #spotify #javascript Biz / Sponsorships 👉 https://www.cleverprogrammer.com/partnerships
detail
{'title': '🔴 Build a Spotify Clone with REACT JS for Beginners', 'heatmap': [{'end': 4794.655, 'start': 4637.237, 'weight': 1}], 'summary': 'Tutorial series covers building a spotify clone with user authentication, mobile responsiveness, and dynamic song playback using react context api and spotify api, with over 1000 live viewers and $500 donation. it also includes setting up a data layer, implementing spotify login, building player layout, and improving design, with a focus on job placements through educational content.', 'chapters': [{'end': 1286.743, 'segs': [{'end': 55.506, 'src': 'embed', 'start': 23.955, 'weight': 11, 'content': [{'end': 27.178, 'text': "all right, And we're going to be building the clone of this.", 'start': 23.955, 'duration': 3.223}, {'end': 29.822, 'text': 'And this is the demo of the app that we have.', 'start': 27.378, 'duration': 2.444}, {'end': 32.043, 'text': "So you can see I'm on my local host right now.", 'start': 29.842, 'duration': 2.201}, {'end': 35.329, 'text': "And I'll click login to Spotify.", 'start': 32.986, 'duration': 2.343}, {'end': 37.351, 'text': 'So bring you up to this login.', 'start': 35.749, 'duration': 1.602}, {'end': 40.355, 'text': "So it has full user authentication, I'll hit agree.", 'start': 37.391, 'duration': 2.964}, {'end': 43.961, 'text': "and I'm still on my local host, and take a look at this.", 'start': 41.4, 'duration': 2.561}, {'end': 46.082, 'text': 'Look at how slick that looks.', 'start': 44.361, 'duration': 1.721}, {'end': 49.043, 'text': 'It is completely mobile responsive.', 'start': 46.562, 'duration': 2.481}, {'end': 55.506, 'text': "As I hover over everything on the left-hand side, and even this Sunny, it's actually pulling it dynamically right?", 'start': 49.483, 'duration': 6.023}], 'summary': 'Building a clone app with full user authentication and mobile responsiveness.', 'duration': 31.551, 'max_score': 23.955, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_823955.jpg'}, {'end': 145.167, 'src': 'embed', 'start': 112.152, 'weight': 1, 'content': [{'end': 113.193, 'text': "We've got the controls of it.", 'start': 112.152, 'duration': 1.041}, {'end': 115.274, 'text': 'So imagine we click this shuffle button right now.', 'start': 113.233, 'duration': 2.041}, {'end': 116.875, 'text': 'See, it changes the song.', 'start': 115.694, 'duration': 1.181}, {'end': 122.539, 'text': "And then you can see on the bottom right, it's actually changing what song is playing every time I skip through.", 'start': 117.496, 'duration': 5.043}, {'end': 126.463, 'text': "So it's got dynamic and that's all being done with the React context API.", 'start': 123.119, 'duration': 3.344}, {'end': 130.868, 'text': 'So if you guys are interested in Redux or the React context API, then we are gonna be doing that today.', 'start': 126.883, 'duration': 3.985}, {'end': 132.629, 'text': 'Awesome, sick.', 'start': 131.688, 'duration': 0.941}, {'end': 137.695, 'text': 'And you are able to play the songs as well and everything and change the volume, all of those things.', 'start': 133.09, 'duration': 4.605}, {'end': 141.004, 'text': 'yeah, so the volume right now is more of a ui feature.', 'start': 138.442, 'duration': 2.562}, {'end': 145.167, 'text': 'this, yeah, playing the songs is completely functional, so you can see it actually does.', 'start': 141.004, 'duration': 4.163}], 'summary': 'Demonstration of dynamic song changing using react context api.', 'duration': 33.015, 'max_score': 112.152, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_8112152.jpg'}, {'end': 177.828, 'src': 'embed', 'start': 145.167, 'weight': 2, 'content': [{'end': 150.071, 'text': "and this crazy part here, dude, is that say you're playing spotify on another device.", 'start': 145.167, 'duration': 4.904}, {'end': 155.175, 'text': 'so, like your phone or your laptop, this actually serves as a remote control.', 'start': 150.071, 'duration': 5.104}, {'end': 156.276, 'text': 'oh nice.', 'start': 155.175, 'duration': 1.101}, {'end': 159.999, 'text': "so, even like if your main spotify is open, it'll start like playing that.", 'start': 156.276, 'duration': 3.723}, {'end': 166.902, 'text': "yeah, exactly so actually, because it's using the actual spotify api to make this happen.", 'start': 160.839, 'duration': 6.063}, {'end': 169.604, 'text': 'hey, that is beautiful.', 'start': 166.902, 'duration': 2.702}, {'end': 177.828, 'text': 'guys, if you are pumped about this and you are enjoying this so far, make sure to go ahead and smash that like button, please.', 'start': 169.604, 'duration': 8.224}], 'summary': 'Using the actual spotify api, the device can serve as a remote control for spotify on another device.', 'duration': 32.661, 'max_score': 145.167, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_8145167.jpg'}, {'end': 221.978, 'src': 'embed', 'start': 195.344, 'weight': 8, 'content': [{'end': 200.867, 'text': 'Another thing that we did for you guys is we added the link to the repo in the description.', 'start': 195.344, 'duration': 5.523}, {'end': 204.969, 'text': 'So you guys can actually take a look at the GitHub repo for all of the code.', 'start': 201.227, 'duration': 3.742}, {'end': 210.231, 'text': "And we're also going to put the demo of a live app there as well at some point.", 'start': 205.509, 'duration': 4.722}, {'end': 211.829, 'text': 'Yeah, exactly.', 'start': 210.928, 'duration': 0.901}, {'end': 215.012, 'text': 'Yeah, because we saw you guys actually wanted that.', 'start': 211.849, 'duration': 3.163}, {'end': 215.772, 'text': 'So we listened.', 'start': 215.032, 'duration': 0.74}, {'end': 217.854, 'text': 'We submitted the code straight away.', 'start': 215.832, 'duration': 2.022}, {'end': 221.978, 'text': 'So if you do want to follow along, you guys have access to the code right from the beginning.', 'start': 217.914, 'duration': 4.064}], 'summary': 'Added github repo link to description for access to code and live app demo.', 'duration': 26.634, 'max_score': 195.344, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_8195344.jpg'}, {'end': 360.291, 'src': 'embed', 'start': 332.637, 'weight': 0, 'content': [{'end': 337.239, 'text': 'Yep So we actually have full user authentication with Spotify API.', 'start': 332.637, 'duration': 4.602}, {'end': 343.881, 'text': 'So guys, what you saw when it popped up, when it said login with Spotify, all of that stuff was not handmade.', 'start': 337.339, 'duration': 6.542}, {'end': 345.262, 'text': "And so we didn't code that.", 'start': 343.941, 'duration': 1.321}, {'end': 349.043, 'text': 'We were using the actual Spotify API to make that happen.', 'start': 345.282, 'duration': 3.761}, {'end': 351.044, 'text': "So that's amazing to see that in action.", 'start': 349.063, 'duration': 1.981}, {'end': 354.786, 'text': "That's why we're pulling the same music and everything that was already in our playlist.", 'start': 351.084, 'duration': 3.702}, {'end': 357.328, 'text': 'Exactly Exactly.', 'start': 355.746, 'duration': 1.582}, {'end': 360.291, 'text': "Yeah So that's an amazing part.", 'start': 357.888, 'duration': 2.403}], 'summary': 'Implemented full user authentication with spotify api, enabling seamless login and access to music playlists.', 'duration': 27.654, 'max_score': 332.637, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_8332637.jpg'}, {'end': 449.775, 'src': 'embed', 'start': 377.47, 'weight': 5, 'content': [{'end': 378.35, 'text': "So that's the first thing.", 'start': 377.47, 'duration': 0.88}, {'end': 383.314, 'text': "The second thing is notice how it's really quite a nice responsive website.", 'start': 378.79, 'duration': 4.524}, {'end': 387.837, 'text': 'So like if we go to like maybe half size and then we go full size on the width.', 'start': 383.334, 'duration': 4.503}, {'end': 389.118, 'text': 'Yeah, super responsive.', 'start': 387.877, 'duration': 1.241}, {'end': 395.479, 'text': "yeah, you'll see like everything nicely scales up and down and everything sort of really works in a smooth way.", 'start': 389.958, 'duration': 5.521}, {'end': 396.239, 'text': "so that's the next thing.", 'start': 395.479, 'duration': 0.76}, {'end': 397.459, 'text': "so it's a responsive design.", 'start': 396.239, 'duration': 1.22}, {'end': 400.52, 'text': "um, and we're also using material ui, guys.", 'start': 397.459, 'duration': 3.061}, {'end': 404.261, 'text': "so i'm gonna say design ui?", 'start': 400.52, 'duration': 3.741}, {'end': 407.441, 'text': "okay, cool, let's go right here.", 'start': 404.261, 'duration': 3.18}, {'end': 409.762, 'text': 'material ui is another thing being used.', 'start': 407.441, 'duration': 2.321}, {'end': 411.882, 'text': "so there's bootstrap, there's material ui.", 'start': 409.762, 'duration': 2.12}, {'end': 414.303, 'text': 'we stick to material ui.', 'start': 411.882, 'duration': 2.421}, {'end': 416.003, 'text': 'yeah, beautiful.', 'start': 414.303, 'duration': 1.7}, {'end': 420.409, 'text': 'what else Material UI is for all of those beautiful icons that you guys are seeing?', 'start': 416.003, 'duration': 4.406}, {'end': 422.03, 'text': 'We use Material UI for that.', 'start': 420.769, 'duration': 1.261}, {'end': 424.953, 'text': 'And then, so we heard you guys.', 'start': 422.35, 'duration': 2.603}, {'end': 425.693, 'text': 'We listened.', 'start': 425.033, 'duration': 0.66}, {'end': 431.038, 'text': 'We saw a lot of people wanted more sort of Redux, more functionality behind the builds.', 'start': 425.753, 'duration': 5.285}, {'end': 433.1, 'text': 'So, if you guys wanted it, we listened.', 'start': 431.058, 'duration': 2.042}, {'end': 437.764, 'text': 'This is going to have a massive amount of React context API behind it.', 'start': 433.12, 'duration': 4.644}, {'end': 441.009, 'text': "So We're not using Redux for this one.", 'start': 438.405, 'duration': 2.604}, {'end': 442.45, 'text': "We're using React Context API.", 'start': 441.029, 'duration': 1.421}, {'end': 449.775, 'text': 'But guys, I promise you, if you can use the React Context API, then you can use Redux just as good.', 'start': 442.47, 'duration': 7.305}], 'summary': 'Website: responsive design, material ui for icons, react context api instead of redux', 'duration': 72.305, 'max_score': 377.47, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_8377470.jpg'}, {'end': 523.128, 'src': 'embed', 'start': 493.633, 'weight': 3, 'content': [{'end': 497.725, 'text': "we're going to run through all of those things And we're gonna do a complete crash course.", 'start': 493.633, 'duration': 4.092}, {'end': 503.767, 'text': "guys, today, with react like I'm telling you, we're gonna go through A to Z and pretty much the entire stack.", 'start': 497.725, 'duration': 6.042}, {'end': 504.187, 'text': 'that like.', 'start': 503.767, 'duration': 0.42}, {'end': 511.969, 'text': "I promise you, if you, if there's any value or that you could pull out of these live streams, This one has a huge amount of value inside.", 'start': 504.187, 'duration': 7.782}, {'end': 513.249, 'text': 'So get ready.', 'start': 512.389, 'duration': 0.86}, {'end': 515.309, 'text': "Yeah, make sure you've got your coffee.", 'start': 513.269, 'duration': 2.04}, {'end': 523.128, 'text': "and yeah, I got my coffee right over here, as you guys can see, and i'm ready to go.", 'start': 515.309, 'duration': 7.819}], 'summary': 'Complete crash course on react with huge amount of value.', 'duration': 29.495, 'max_score': 493.633, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_8493633.jpg'}, {'end': 703.82, 'src': 'embed', 'start': 676.501, 'weight': 10, 'content': [{'end': 681.203, 'text': "And then Sunny will have to be going really fast because there's a lot of stuff going on here.", 'start': 676.501, 'duration': 4.702}, {'end': 684.245, 'text': 'Okay, that sound good to you guys? All right, awesome.', 'start': 681.223, 'duration': 3.022}, {'end': 691.576, 'text': "Nice So the first thing we're going to do, guys, is actually go ahead and use the tool that we always use in our builds.", 'start': 685.615, 'duration': 5.961}, {'end': 694.677, 'text': "And it's a lovely tool by Facebook called Create React App.", 'start': 691.837, 'duration': 2.84}, {'end': 698.358, 'text': 'And what we need to do is we actually need to go to the terminal.', 'start': 695.297, 'duration': 3.061}, {'end': 700.999, 'text': "So I'm just going to go and pop into a terminal here.", 'start': 698.818, 'duration': 2.181}, {'end': 703.82, 'text': "And actually, here's what we'll do, Sunny.", 'start': 701.379, 'duration': 2.441}], 'summary': 'Using create react app tool for project setup.', 'duration': 27.319, 'max_score': 676.501, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_8676501.jpg'}, {'end': 771.979, 'src': 'embed', 'start': 748.507, 'weight': 4, 'content': [{'end': 755.211, 'text': 'Exactly So this is going to install all of the modules and everything that you need to get up and running with your first React app.', 'start': 748.507, 'duration': 6.704}, {'end': 763.316, 'text': "So now, while that's actually doing it, we didn't actually mention that we're actually going to be deploying this on Firebase.", 'start': 755.651, 'duration': 7.665}, {'end': 771.979, 'text': "Yeah, Yeah, we'll show you how you can then take this project and then launch it on firebase and go with that.", 'start': 763.656, 'duration': 8.323}], 'summary': 'Installing modules for react app, deploying on firebase later.', 'duration': 23.472, 'max_score': 748.507, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_8748507.jpg'}, {'end': 890.576, 'src': 'embed', 'start': 855.124, 'weight': 9, 'content': [{'end': 857.725, 'text': 'So just in Google, just type in Spotify developer.', 'start': 855.124, 'duration': 2.601}, {'end': 861.306, 'text': 'Cool So let me go ahead and do that.', 'start': 858.965, 'duration': 2.341}, {'end': 866.952, 'text': 'Yeah There we go.', 'start': 865.45, 'duration': 1.502}, {'end': 868.655, 'text': "Okay It's taking a while to change.", 'start': 866.972, 'duration': 1.683}, {'end': 871.98, 'text': "So let's do Spotify developer.", 'start': 868.675, 'duration': 3.305}, {'end': 876.006, 'text': 'Okay And this is what we get on the screen right here.', 'start': 872, 'duration': 4.006}, {'end': 886.874, 'text': "Yup So you want to click on the dashboard? Guys, what's really cool is we're at 675 viewers and it seems like it's only growing.", 'start': 876.026, 'duration': 10.848}, {'end': 890.576, 'text': "So let's try to break the 700.", 'start': 887.054, 'duration': 3.522}], 'summary': 'Using google, they accessed the spotify developer dashboard with 675 viewers aiming to reach 700.', 'duration': 35.452, 'max_score': 855.124, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_8855124.jpg'}], 'start': 0.109, 'title': 'Building spotify clone and responsive website', 'summary': 'Covers building a spotify clone with full user authentication, mobile responsiveness, and dynamic song playback using react context api and spotify api, and also discusses creating a responsive website with material ui and react context api, highlighting benefits of responsive design and modern tech adoption, with engagement metrics of over 1000 live viewers and $500 donation.', 'chapters': [{'end': 169.604, 'start': 0.109, 'title': 'Building spotify clone with full user authentication', 'summary': 'Presents the development of a spotify clone with full user authentication, mobile responsiveness, and dynamic song playback using react context api and the actual spotify api.', 'duration': 169.495, 'highlights': ['The app has all the functionality of the actual Spotify app, including full user authentication and mobile responsiveness.', 'The clone dynamically generates playlists and provides the capability to play songs and control volume, all utilizing the React context API.', 'The app also serves as a remote control for playing Spotify on other devices, leveraging the actual Spotify API.']}, {'end': 377.109, 'start': 169.604, 'title': 'Spotify clone build highlights', 'summary': 'Discusses the live coding session for a spotify clone, including engagement metrics and the tech being taught, such as user authentication with the spotify api and the availability of the code and demo in the github repo.', 'duration': 207.505, 'highlights': ['The chapter discusses the live coding session for a Spotify clone, including engagement metrics and the tech being taught, such as user authentication with the Spotify API. The live coding session for a Spotify clone is being discussed, along with the engagement metrics, such as the number of viewers and Super Chat donations. Additionally, the tech being taught, like user authentication with the Spotify API, is highlighted.', "The availability of the code and demo in the GitHub repo is emphasized, catering to the viewers' requirements and enhancing accessibility for the audience. The availability of the code and demo in the GitHub repo is highlighted, demonstrating responsiveness to viewer requests and ensuring accessibility for the audience."]}, {'end': 676.14, 'start': 377.47, 'title': 'Building a responsive website with material ui and react context api', 'summary': 'Discusses building a responsive website with material ui and react context api, focusing on the benefits of a responsive design, the use of material ui for icons, the implementation of react context api instead of redux, and the inclusion of modern tech such as hooks and a crash course on react.', 'duration': 298.67, 'highlights': ['The chapter emphasizes the benefits of a responsive design, showcasing how the website scales smoothly up and down, providing a nice user experience.', 'The usage of Material UI for icons and design is highlighted, offering a visually appealing interface and responsive elements.', 'The implementation of React Context API instead of Redux is discussed, emphasizing its in-depth usage and the promise that the knowledge of React Context API can translate to proficiency in using Redux.', 'The upcoming content promises a complete crash course on React, including a comprehensive coverage of modern tech such as hooks and the entire stack, providing a significant value to the audience.']}, {'end': 1286.743, 'start': 676.501, 'title': 'Setting up react app and firebase for spotify clone', 'summary': 'Covers setting up a react app using create react app tool by facebook, deploying the app on firebase, and obtaining client id from spotify developer dashboard, while achieving over 1000 live viewers and $500 donation.', 'duration': 610.242, 'highlights': ['The Create React App tool by Facebook is used to set up the React app, providing a quick start with a local host setup and necessary modules, enabling seamless app development. The Create React App tool provides a quick start with the local host setup and necessary modules, allowing for seamless app development.', 'The process of deploying the app on Firebase is detailed, including creating a new Firebase app, enabling analytics, and preparing the back end for hosting the app. The detailed process of deploying the app on Firebase includes creating a new Firebase app, enabling analytics, and preparing the back end for hosting the app.', 'Steps for obtaining the client ID from the Spotify developer dashboard are explained, including creating a Spotify app and setting up redirect URIs, while observing a significant increase in live viewers and receiving a $500 donation. The steps for obtaining the client ID from the Spotify developer dashboard are explained, including creating a Spotify app and setting up redirect URIs. This was observed during a significant increase in live viewers and receiving a $500 donation.']}], 'duration': 1286.634, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_8109.jpg', 'highlights': ['The app has all the functionality of the actual Spotify app, including full user authentication and mobile responsiveness.', 'The clone dynamically generates playlists and provides the capability to play songs and control volume, all utilizing the React context API.', 'The app also serves as a remote control for playing Spotify on other devices, leveraging the actual Spotify API.', 'The upcoming content promises a complete crash course on React, including a comprehensive coverage of modern tech such as hooks and the entire stack, providing a significant value to the audience.', 'The process of deploying the app on Firebase is detailed, including creating a new Firebase app, enabling analytics, and preparing the back end for hosting the app.', 'The implementation of React Context API instead of Redux is discussed, emphasizing its in-depth usage and the promise that the knowledge of React Context API can translate to proficiency in using Redux.', 'The usage of Material UI for icons and design is highlighted, offering a visually appealing interface and responsive elements.', 'The chapter emphasizes the benefits of a responsive design, showcasing how the website scales smoothly up and down, providing a nice user experience.', "The availability of the code and demo in the GitHub repo is emphasized, catering to the viewers' requirements and enhancing accessibility for the audience.", 'Steps for obtaining the client ID from the Spotify developer dashboard are explained, including creating a Spotify app and setting up redirect URIs, while observing a significant increase in live viewers and receiving a $500 donation.', 'The Create React App tool by Facebook is used to set up the React app, providing a quick start with a local host setup and necessary modules, enabling seamless app development.', 'The chapter discusses the live coding session for a Spotify clone, including engagement metrics and the tech being taught, such as user authentication with the Spotify API.']}, {'end': 1974.855, 'segs': [{'end': 1320.192, 'src': 'embed', 'start': 1287.003, 'weight': 0, 'content': [{'end': 1290.224, 'text': "We have the same number of people watching as we're smashing the thumbs up button.", 'start': 1287.003, 'duration': 3.221}, {'end': 1290.945, 'text': "That's insane.", 'start': 1290.264, 'duration': 0.681}, {'end': 1291.805, 'text': 'That is crazy.', 'start': 1291.005, 'duration': 0.8}, {'end': 1294.405, 'text': "Oh, I can't.", 'start': 1293.545, 'duration': 0.86}, {'end': 1295.526, 'text': "I'm going crazy.", 'start': 1294.526, 'duration': 1}, {'end': 1296.546, 'text': "I'm sorry, guys.", 'start': 1295.866, 'duration': 0.68}, {'end': 1298.887, 'text': "I'm like almost starting to shake out of excitement.", 'start': 1296.646, 'duration': 2.241}, {'end': 1299.627, 'text': 'This is insane.', 'start': 1298.907, 'duration': 0.72}, {'end': 1305.789, 'text': "I'm just sending Sonny a link so he can then jump one on this.", 'start': 1301.187, 'duration': 4.602}, {'end': 1309.57, 'text': 'Steve Goodwin just donated five euro.', 'start': 1306.349, 'duration': 3.221}, {'end': 1313.291, 'text': 'What is happening? Jesus.', 'start': 1309.79, 'duration': 3.501}, {'end': 1320.192, 'text': 'Oh, we just broke a thousand.', 'start': 1315.468, 'duration': 4.724}], 'summary': 'Excited reactions to reaching over 1000 viewers, receiving a 5 euro donation, and sending a link to sonny.', 'duration': 33.189, 'max_score': 1287.003, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_81287003.jpg'}, {'end': 1488.362, 'src': 'embed', 'start': 1447.12, 'weight': 2, 'content': [{'end': 1451.883, 'text': "So once the app sort of gets up and running, the next step is to delete the files that we don't need.", 'start': 1447.12, 'duration': 4.763}, {'end': 1459.348, 'text': 'So the first thing that React does when you use Create React app is it makes this sort of cool looking, sort of React spinning logo right?', 'start': 1451.983, 'duration': 7.365}, {'end': 1465.332, 'text': "So now what we're going to go ahead and see is let me open it up on my machine as well.", 'start': 1459.868, 'duration': 5.464}, {'end': 1468.479, 'text': 'So we can now see that the little spinning icon.', 'start': 1466.255, 'duration': 2.224}, {'end': 1471.063, 'text': "So if you made it to this point, well done, because that's nice.", 'start': 1468.499, 'duration': 2.564}, {'end': 1471.764, 'text': 'React up.', 'start': 1471.303, 'duration': 0.461}, {'end': 1477.012, 'text': 'Yep You just want to go ahead and delete everything inside of app.js.', 'start': 1472.305, 'duration': 4.707}, {'end': 1480.778, 'text': 'Yeah So all of this stuff here, go ahead and delete that.', 'start': 1477.573, 'duration': 3.205}, {'end': 1482.319, 'text': 'Okay, cool.', 'start': 1481.699, 'duration': 0.62}, {'end': 1483.16, 'text': "So we're going to go ahead.", 'start': 1482.359, 'duration': 0.801}, {'end': 1485.141, 'text': "Yeah, so that's all cleared up in the middle.", 'start': 1483.28, 'duration': 1.861}, {'end': 1488.362, 'text': "We're going to also delete these three files over here, you guys.", 'start': 1485.541, 'duration': 2.821}], 'summary': 'After setting up the app, delete unnecessary files, including app.js and three other files.', 'duration': 41.242, 'max_score': 1447.12, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_81447120.jpg'}, {'end': 1848.703, 'src': 'embed', 'start': 1820.866, 'weight': 3, 'content': [{'end': 1824.747, 'text': "Awesome But these are the things that we're working on, we're gonna be working on right now.", 'start': 1820.866, 'duration': 3.881}, {'end': 1827.348, 'text': "And I'm gonna try to visually draw out what we're doing.", 'start': 1824.847, 'duration': 2.501}, {'end': 1829.376, 'text': 'Awesome Nice.', 'start': 1828.456, 'duration': 0.92}, {'end': 1834.478, 'text': 'So with that said, guys, we have the Spotify logo and the login with Spotify button.', 'start': 1830.137, 'duration': 4.341}, {'end': 1837.459, 'text': "So we're going to push that inside of a login component.", 'start': 1834.538, 'duration': 2.921}, {'end': 1838.92, 'text': "So that way it's isolated.", 'start': 1837.779, 'duration': 1.141}, {'end': 1841.58, 'text': "And the next step now is we're going to create a file.", 'start': 1838.94, 'duration': 2.64}, {'end': 1845.342, 'text': "So Kazi, if you create the first file, and then we'll show how we do it.", 'start': 1841.62, 'duration': 3.722}, {'end': 1848.703, 'text': 'And then afterwards, we can make it quicker as we sort of add the new files in.', 'start': 1845.362, 'duration': 3.341}], 'summary': 'Working on integrating spotify logo and login button into a login component, creating new files for efficiency.', 'duration': 27.837, 'max_score': 1820.866, 'thumbnail': ''}, {'end': 1968.832, 'src': 'embed', 'start': 1933.987, 'weight': 1, 'content': [{'end': 1935.188, 'text': 'It keeps everything very clean.', 'start': 1933.987, 'duration': 1.201}, {'end': 1938.632, 'text': "And inside this div, we're going to go with BEM.", 'start': 1936.43, 'duration': 2.202}, {'end': 1943.718, 'text': 'So as Kazi mentioned earlier, BEM is like a way of naming your classes in React.', 'start': 1938.753, 'duration': 4.965}, {'end': 1945.22, 'text': "So here we're going to say login.", 'start': 1943.959, 'duration': 1.261}, {'end': 1951.524, 'text': 'guys, one thing i want to say is we are at 1150 viewers.', 'start': 1946.301, 'duration': 5.223}, {'end': 1953.405, 'text': "we're currently at 1150 viewers.", 'start': 1951.524, 'duration': 1.881}, {'end': 1956.766, 'text': "that's not something we've ever seen before on these streams.", 'start': 1953.405, 'duration': 3.361}, {'end': 1958.347, 'text': 'that is wild.', 'start': 1956.766, 'duration': 1.581}, {'end': 1962.149, 'text': "thank you guys, so much for all that love, and let's just keep the momentum going.", 'start': 1958.347, 'duration': 3.802}, {'end': 1968.832, 'text': "you guys, again, i'm reading all your chat and everything, but just smash that like button and let's keep this going out to more and more people.", 'start': 1962.149, 'duration': 6.683}], 'summary': 'Bem used for naming classes in react; 1150 viewers; unprecedented stream viewership.', 'duration': 34.845, 'max_score': 1933.987, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_81933987.jpg'}], 'start': 1287.003, 'title': 'Live streaming, react app building, and spotify login', 'summary': 'Documents an exhilarating live stream event with a surge in viewers and donations, followed by a detailed guide on setting up a react app with live coding. it also covers the process of setting up a spotify login page component, including creating the login component, handling the login functionality, and implementing the login css file, with a focus on react components and bem naming conventions.', 'chapters': [{'end': 1627.692, 'start': 1287.003, 'title': 'Exciting live stream and react app building', 'summary': 'Documents an exhilarating live stream where the viewers and donations surged, and then provides a detailed guide on setting up a react app with live coding, deleting unnecessary files, and adjusting styling.', 'duration': 340.689, 'highlights': ['The live stream experienced a surge in viewers and donations, breaking a thousand viewers and receiving various donations including 11 euros, creating an electrifying and unprecedented atmosphere. The chapter details the excitement of the live stream, highlighting the surge in viewers and donations, breaking a thousand viewers, and receiving various donations, creating an electrifying and unprecedented atmosphere.', "The detailed guide on setting up a React app involves using 'npm start' to spin up the app and includes a cleanup process to delete unnecessary files, providing a comprehensive approach to setting up the app. The chapter provides a detailed guide on setting up a React app, including using 'npm start' to spin up the app and a cleanup process to delete unnecessary files, offering a comprehensive approach to the app setup.", 'The discussion delves into adjusting the styling of the React app, emphasizing the process of deleting files, selecting elements for deletion, and modifying CSS to achieve the desired styling, enhancing the understanding of styling adjustments in the app. The chapter discusses adjusting the styling of the React app, emphasizing the process of deleting files, selecting elements for deletion, and modifying CSS to achieve the desired styling, enhancing the understanding of styling adjustments in the app.']}, {'end': 1974.855, 'start': 1627.712, 'title': 'Setting up spotify login', 'summary': 'Covers the process of setting up a spotify login page component, including creating the login component, handling the login functionality, and implementing the login css file, with a focus on react components and bem naming conventions.', 'duration': 347.143, 'highlights': ['The process of setting up a Spotify login page component The chapter covers the process of setting up a Spotify login page component, including creating the login component, handling the login functionality, and implementing the login CSS file.', 'Focus on React components and BEM naming conventions The discussion emphasizes the use of React components and BEM naming conventions for organizing the login functionality and CSS styles.', '1150 viewers on the stream The session had 1150 viewers, indicating a high level of audience engagement and interest in the topic.']}], 'duration': 687.852, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_81287003.jpg', 'highlights': ['The live stream experienced a surge in viewers and donations, breaking a thousand viewers and receiving various donations including 11 euros, creating an electrifying and unprecedented atmosphere.', 'The session had 1150 viewers, indicating a high level of audience engagement and interest in the topic.', "The chapter provides a detailed guide on setting up a React app, including using 'npm start' to spin up the app and a cleanup process to delete unnecessary files, offering a comprehensive approach to the app setup.", 'The chapter covers the process of setting up a Spotify login page component, including creating the login component, handling the login functionality, and implementing the login CSS file.', 'The discussion emphasizes the use of React components and BEM naming conventions for organizing the login functionality and CSS styles.', 'The chapter discusses adjusting the styling of the React app, emphasizing the process of deleting files, selecting elements for deletion, and modifying CSS to achieve the desired styling, enhancing the understanding of styling adjustments in the app.']}, {'end': 2671.668, 'segs': [{'end': 2024.264, 'src': 'embed', 'start': 1998.45, 'weight': 3, 'content': [{'end': 2003.393, 'text': "so that means that inside the current directory, login is the component that we're importing.", 'start': 1998.45, 'duration': 4.943}, {'end': 2007.495, 'text': 'so with that said, we go ahead and save the file and we go to our login.', 'start': 2003.393, 'duration': 4.102}, {'end': 2013.879, 'text': "we save that file and just to test that it works, guys, i would just write a h1 and say i'm the login page, i'm the login page.", 'start': 2007.495, 'duration': 6.384}, {'end': 2017.141, 'text': "oops, nice, i'm the login page.", 'start': 2013.879, 'duration': 3.262}, {'end': 2021.722, 'text': 'nice, And what we could see now is it should pop in.', 'start': 2017.141, 'duration': 4.581}, {'end': 2022.963, 'text': 'So you see, it says it there.', 'start': 2021.743, 'duration': 1.22}, {'end': 2024.264, 'text': 'I am the login page at the bottom.', 'start': 2023.063, 'duration': 1.201}], 'summary': "Demonstrating import and display of a login component in a file, with 'i'm the login page' displayed as an h1.", 'duration': 25.814, 'max_score': 1998.45, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_81998450.jpg'}, {'end': 2089.357, 'src': 'embed', 'start': 2063.531, 'weight': 4, 'content': [{'end': 2067.895, 'text': "so what we're going to do now is we're going to have the um, the buttons that we spoke about.", 'start': 2063.531, 'duration': 4.364}, {'end': 2069.717, 'text': 'so firstly, the logo right.', 'start': 2067.895, 'duration': 1.822}, {'end': 2072.391, 'text': "so let's go ahead and do image And the source.", 'start': 2069.717, 'duration': 2.674}, {'end': 2074.851, 'text': 'I actually have the Spotify logo right here with me.', 'start': 2072.391, 'duration': 2.46}, {'end': 2077.793, 'text': "So I'm going to go ahead and pop it in here.", 'start': 2074.931, 'duration': 2.862}, {'end': 2082.915, 'text': "And what I'll do, guys, for you is I'll double line it so you guys can use this image as well if you'd like.", 'start': 2077.873, 'duration': 5.042}, {'end': 2085.034, 'text': 'So there you go.', 'start': 2084.094, 'duration': 0.94}, {'end': 2089.357, 'text': 'So if you guys want that, just pause the video and you can pretty much use that link as well.', 'start': 2085.094, 'duration': 4.263}], 'summary': 'Adding spotify logo as an image, available for use.', 'duration': 25.826, 'max_score': 2063.531, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_82063531.jpg'}, {'end': 2171.73, 'src': 'embed', 'start': 2144.076, 'weight': 0, 'content': [{'end': 2152.06, 'text': "Awesome The next step, guys, is to go into login.js and we're going to basically style it a bit so it looks a lot more as to what we saw before.", 'start': 2144.076, 'duration': 7.984}, {'end': 2155.842, 'text': 'First step is inside of login.css.', 'start': 2152.5, 'duration': 3.342}, {'end': 2163.408, 'text': "A very neat trick that I found is, whenever you've got a container like this, like a surrounding div, If you go into your CSS and you do login,", 'start': 2155.862, 'duration': 7.546}, {'end': 2171.73, 'text': "so we're targeting that container and you do display grid And then you do place items.", 'start': 2163.408, 'duration': 8.322}], 'summary': 'Styling login.js to display grid and place items for the container.', 'duration': 27.654, 'max_score': 2144.076, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_82144076.jpg'}, {'end': 2502.285, 'src': 'embed', 'start': 2478.664, 'weight': 1, 'content': [{'end': 2485.167, 'text': 'Basically, this is the link that you will check out for the Spotify documentation to get everything up and running.', 'start': 2478.664, 'duration': 6.503}, {'end': 2487.227, 'text': 'Now, a few things we need to do.', 'start': 2485.767, 'duration': 1.46}, {'end': 2489.788, 'text': 'The first thing is we need an endpoint.', 'start': 2488.168, 'duration': 1.62}, {'end': 2490.829, 'text': 'Now, what is an endpoint?', 'start': 2489.868, 'duration': 0.961}, {'end': 2502.285, 'text': "It's basically where we're going to send the user to In order to actually get them to log in and then do all of that crazy sort of clever authentication logic.", 'start': 2491.289, 'duration': 10.996}], 'summary': 'Access spotify documentation for setting up endpoint for user authentication.', 'duration': 23.621, 'max_score': 2478.664, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_82478664.jpg'}, {'end': 2554.239, 'src': 'embed', 'start': 2525.517, 'weight': 2, 'content': [{'end': 2528.419, 'text': 'We are not even really tackling the authorization.', 'start': 2525.517, 'duration': 2.902}, {'end': 2530.18, 'text': "We're using Spotify's API.", 'start': 2528.759, 'duration': 1.421}, {'end': 2532.803, 'text': 'So for all authentication, we just go like this.', 'start': 2530.22, 'duration': 2.583}, {'end': 2534.704, 'text': "We're like, hey, Spotify, you take care of this.", 'start': 2532.823, 'duration': 1.881}, {'end': 2537.306, 'text': 'And then we wait and we wait and we wait.', 'start': 2535.265, 'duration': 2.041}, {'end': 2540.689, 'text': "And as soon as Spotify takes care of it, we're like, hey, bro, you're back in our app.", 'start': 2537.386, 'duration': 3.303}, {'end': 2541.129, 'text': "Let's go.", 'start': 2540.729, 'duration': 0.4}, {'end': 2543.131, 'text': 'And then everything is ready to go.', 'start': 2541.529, 'duration': 1.602}, {'end': 2545.012, 'text': 'Your Discover Weekly playlist is there.', 'start': 2543.151, 'duration': 1.861}, {'end': 2554.239, 'text': "So the key things like authentication, you can use other people's APIs and just hand over all of that and then bring the users back.", 'start': 2545.432, 'duration': 8.807}], 'summary': "Using spotify's api for authentication, handing over the process, and seamlessly bringing users back to the app, including their discover weekly playlist.", 'duration': 28.722, 'max_score': 2525.517, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_82525517.jpg'}], 'start': 1974.855, 'title': 'Spotify login component and integration', 'summary': "Covers rendering and styling the login component with css, adding spotify logo and login button. it also includes integrating spotify's api, defining endpoint and redirect uri, and explaining authentication flow and client id usage.", 'chapters': [{'end': 2184.913, 'start': 1974.855, 'title': 'Rendering login component and styling', 'summary': 'Discusses rendering the login component using app.js and styling it using css to achieve a centralized layout and adding a spotify logo and login button.', 'duration': 210.058, 'highlights': ['The chapter discusses rendering the login component using app.js and importing the login component from the current directory, with the demonstration of adding an h1 element to test its functionality.', "It demonstrates the addition of the Spotify logo using the 'image' tag and provides the option for the viewers to use the same image link, showcasing the visual impact of the logo on the screen.", "The chapter focuses on styling the login component by utilizing CSS to centrally align the elements within the container using 'display: grid' and 'place-items: center', demonstrating the immediate visual impact of the centralized layout."]}, {'end': 2671.668, 'start': 2184.933, 'title': 'Login page styling and spotify integration', 'summary': "Covers the process of styling a login page with css to resemble spotify's design and integrating spotify's api by defining the endpoint and redirect uri, while also explaining the authentication flow and client id usage.", 'duration': 486.735, 'highlights': ["The chapter covers the process of styling a login page with CSS to resemble Spotify's design. Demonstrates how to use CSS to style a login page, including setting image dimensions, button styling, and background color.", "Explains the integration of Spotify's API by defining the endpoint and redirect URI. Describes the process of defining the endpoint and redirect URI for Spotify's API integration, enabling users to log in and return to the app's homepage.", 'Provides insights into the authentication flow and client ID usage for Spotify integration. Discusses the authentication flow, demonstrating how to hand over authentication to Spotify and retrieve users back to the app, along with the usage of the client ID.']}], 'duration': 696.813, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_81974855.jpg', 'highlights': ["The chapter covers the process of styling a login page with CSS to resemble Spotify's design. Demonstrates how to use CSS to style a login page, including setting image dimensions, button styling, and background color.", "Explains the integration of Spotify's API by defining the endpoint and redirect URI. Describes the process of defining the endpoint and redirect URI for Spotify's API integration, enabling users to log in and return to the app's homepage.", 'Provides insights into the authentication flow and client ID usage for Spotify integration. Discusses the authentication flow, demonstrating how to hand over authentication to Spotify and retrieve users back to the app, along with the usage of the client ID.', 'The chapter discusses rendering the login component using app.js and importing the login component from the current directory, with the demonstration of adding an h1 element to test its functionality.', "It demonstrates the addition of the Spotify logo using the 'image' tag and provides the option for the viewers to use the same image link, showcasing the visual impact of the logo on the screen.", "The chapter focuses on styling the login component by utilizing CSS to centrally align the elements within the container using 'display: grid' and 'place-items: center', demonstrating the immediate visual impact of the centralized layout."]}, {'end': 3593.423, 'segs': [{'end': 2732.654, 'src': 'embed', 'start': 2691.313, 'weight': 1, 'content': [{'end': 2701.26, 'text': 'Nice So we had the, uh, so remember the client ID that we sort of, uh, got when we set up the Spotify app on their site, they gave us an ID.', 'start': 2691.313, 'duration': 9.947}, {'end': 2702.481, 'text': 'So you just want to pop that in here.', 'start': 2701.36, 'duration': 1.121}, {'end': 2706.964, 'text': "So what we're doing right now, guys, is we're just setting up some variables that we're going to use in a second.", 'start': 2702.501, 'duration': 4.463}, {'end': 2709.366, 'text': "So we've got the client ID here.", 'start': 2707.464, 'duration': 1.902}, {'end': 2712.368, 'text': 'The next step is basically something called scopes.', 'start': 2709.726, 'duration': 2.642}, {'end': 2719.757, 'text': 'Now, scopes are very important, because the way it works with Spotify is you throw the user over to Spotify,', 'start': 2712.928, 'duration': 6.829}, {'end': 2723.061, 'text': 'but then you throw them over and you basically include a bunch of scopes.', 'start': 2719.757, 'duration': 3.304}, {'end': 2724.442, 'text': 'And this is what I mean by scopes.', 'start': 2723.101, 'duration': 1.341}, {'end': 2732.654, 'text': 'So imagine we have user read currently playing, user read recently played, user read playback.', 'start': 2726.065, 'duration': 6.589}], 'summary': 'Setting up spotify app with client id and scopes for user data access.', 'duration': 41.341, 'max_score': 2691.313, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_82691313.jpg'}, {'end': 2886.232, 'src': 'embed', 'start': 2862.351, 'weight': 3, 'content': [{'end': 2868.484, 'text': "What I'm doing now is I'm going to start this URL off with the endpoint, so this one right here, so this endpoint.", 'start': 2862.351, 'duration': 6.133}, {'end': 2871.21, 'text': "What I'm going to do is I'm going to say auth endpoint.", 'start': 2868.504, 'duration': 2.706}, {'end': 2878.849, 'text': "And then what we're going to do is this is basically just going to generate one long web address.", 'start': 2874.128, 'duration': 4.721}, {'end': 2881.29, 'text': "basically that we're going to use to send the user off somewhere right?", 'start': 2878.849, 'duration': 2.441}, {'end': 2886.232, 'text': "Then we're going to say question mark because we're adding a parameter to that web address.", 'start': 2881.79, 'duration': 4.442}], 'summary': 'Generating url with auth endpoint to send user with a parameter.', 'duration': 23.881, 'max_score': 2862.351, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_82862351.jpg'}, {'end': 3004.35, 'src': 'embed', 'start': 2973.886, 'weight': 0, 'content': [{'end': 2974.967, 'text': 'right, yeah.', 'start': 2973.886, 'duration': 1.081}, {'end': 2978.628, 'text': "and then what we're gonna do is we are gonna, oh, thank you so much, guys.", 'start': 2974.967, 'duration': 3.661}, {'end': 2984.75, 'text': 'two more donations, rajashi, and wow, that is awesome.', 'start': 2978.628, 'duration': 6.122}, {'end': 2985.631, 'text': 'thank you for that.', 'start': 2984.75, 'duration': 0.881}, {'end': 2988.892, 'text': 'yeah, one for 140, that, thank you, appreciate it.', 'start': 2985.631, 'duration': 3.261}, {'end': 2990.652, 'text': "we're almost at 50.", 'start': 2988.892, 'duration': 1.76}, {'end': 2993.253, 'text': 'um, uh, in donations today, guys.', 'start': 2990.652, 'duration': 2.601}, {'end': 2996.734, 'text': 'thank you, guys, so much, amazing.', 'start': 2993.253, 'duration': 3.481}, {'end': 3001.336, 'text': "then what we're gonna do, guys, is, do you, and holy crap, this url is longer than my freaking future.", 'start': 2996.734, 'duration': 4.602}, {'end': 3004.35, 'text': "yeah, it's crazy.", 'start': 3002.569, 'duration': 1.781}], 'summary': 'Raising donations, currently at 50, expressing gratitude to donors.', 'duration': 30.464, 'max_score': 2973.886, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_82973886.jpg'}, {'end': 3267.305, 'src': 'embed', 'start': 3233.079, 'weight': 2, 'content': [{'end': 3233.96, 'text': "Everybody's got a price.", 'start': 3233.079, 'duration': 0.881}, {'end': 3239.321, 'text': 'So go ahead and click the Login with Spotify button.', 'start': 3236.539, 'duration': 2.782}, {'end': 3239.841, 'text': 'Oh, nice.', 'start': 3239.441, 'duration': 0.4}, {'end': 3245.605, 'text': 'Right when I click that, you guys see that? Look at how clean this looks.', 'start': 3239.921, 'duration': 5.684}, {'end': 3252.009, 'text': 'And take a look at the client, right? So this is the client ID that we initially got when I made the app from here.', 'start': 3245.625, 'duration': 6.384}, {'end': 3253.17, 'text': 'So this is my client ID.', 'start': 3252.089, 'duration': 1.081}, {'end': 3255.953, 'text': "let's go back here.", 'start': 3254.992, 'duration': 0.961}, {'end': 3258.796, 'text': 'Then I got my URI.', 'start': 3256.653, 'duration': 2.143}, {'end': 3267.305, 'text': 'So localhost 3000, which is what we gave it when we were making this app in edit settings, I can see my redirect URI localhost 3000.', 'start': 3258.856, 'duration': 8.449}], 'summary': 'Demonstrating the process of obtaining client id and uri for spotify app.', 'duration': 34.226, 'max_score': 3233.079, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_83233079.jpg'}, {'end': 3419.838, 'src': 'embed', 'start': 3390.042, 'weight': 6, 'content': [{'end': 3391.383, 'text': 'Thank you, Vivek.', 'start': 3390.042, 'duration': 1.341}, {'end': 3393.686, 'text': 'And welcome to profit with JavaScript.', 'start': 3391.584, 'duration': 2.102}, {'end': 3394.347, 'text': 'Glad to have you.', 'start': 3393.706, 'duration': 0.641}, {'end': 3400.273, 'text': 'And I think we actually just had one more student, Diego joined profit with JavaScript as well just a little bit ago.', 'start': 3394.367, 'duration': 5.906}, {'end': 3401.414, 'text': 'So welcome, guys.', 'start': 3400.333, 'duration': 1.081}, {'end': 3402.975, 'text': 'Yeah Awesome.', 'start': 3401.434, 'duration': 1.541}, {'end': 3405.116, 'text': 'Nice to see you guys in the course.', 'start': 3403.195, 'duration': 1.921}, {'end': 3412.577, 'text': 'Siddharth just dropped a 200 donation and Siddharth says he goes.', 'start': 3405.556, 'duration': 7.021}, {'end': 3416.878, 'text': "hey guys, I'm a full stack developer, Django React, and I love your React live streams.", 'start': 3412.577, 'duration': 4.301}, {'end': 3419.838, 'text': "I've built a YouTube clone for practice and I'm on the way to do the rest.", 'start': 3416.898, 'duration': 2.94}], 'summary': 'Welcome new students! siddharth donated $200 and is a full stack developer with experience in django and react.', 'duration': 29.796, 'max_score': 3390.042, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_83390042.jpg'}], 'start': 2671.688, 'title': 'Spotify app setup and authentication process', 'summary': 'Covers setting up a spotify app, creating authentication urls, generating tokens, logging in with spotify, and emphasizes the importance of scopes. additionally, it highlights receiving over $50 in donations and gaining 9 new students during the session.', 'chapters': [{'end': 2973.886, 'start': 2671.688, 'title': 'Setting up spotify app', 'summary': 'Covers setting up a spotify app, including obtaining the client id, defining scopes, and creating a login url, emphasizing the importance of scopes for user permissions.', 'duration': 302.198, 'highlights': ['The importance of defining scopes for user permissions on the Spotify app is emphasized, including examples such as user read currently playing and user read recently played. The chapter emphasizes the importance of scopes for user permissions on the Spotify app, including examples such as user read currently playing and user read recently played.', 'The process of creating a login URL is demonstrated, incorporating the client ID and redirect URI, with an explanation of string interpolation for building the URL. The process of creating a login URL is demonstrated, incorporating the client ID and redirect URI, with an explanation of string interpolation for building the URL.', 'The significance of accurately defining scopes for accessing user accounts and functionalities on the Spotify app is highlighted to avoid encountering blockages in the process. The significance of accurately defining scopes for accessing user accounts and functionalities on the Spotify app is highlighted to avoid encountering blockages in the process.']}, {'end': 3233.079, 'start': 2973.886, 'title': 'Authentication url and token generation', 'summary': 'Discusses the process of creating an authentication url, generating a token for authentication, and the significance of a token, with a total of over $50 in donations received during the session.', 'duration': 259.193, 'highlights': ['The chapter highlights the process of creating an authentication URL and generating a token for authentication, with a total of over $50 in donations received during the session.', "The significance of the token is explained as a string that represents authentication and serves as a pass to prove the user's identity.", 'The transcript also mentions the prompt that pops up, providing the user with a specific experience after successful authentication.', 'The session received over $50 in donations, with specific mentions of donations of $140 and $30, showing strong support from the audience.']}, {'end': 3593.423, 'start': 3233.079, 'title': 'Logging in with spotify and access token retrieval', 'summary': 'Demonstrates the process of logging in with spotify, obtaining client id and uri, setting scope permissions, retrieving access token, and highlighting the importance of scopes, access token, and redirect uri with live examples from the audience, with a total of 9 new students joining profit with javascript and a 200 donation.', 'duration': 360.344, 'highlights': ['Live examples of the importance of scopes, access token, and redirect URI, demonstrated through obtaining client ID and URI, setting scope permissions, and retrieving access token with real-time audience interaction. The chapter provides live examples of obtaining client ID and URI, setting scope permissions, and retrieving access token with real-time audience interaction, emphasizing the importance of scopes, access token, and redirect URI.', '9 new students joining Profit with JavaScript and a 200 donation, showcasing real-time audience engagement and the impact of the content. The chapter showcases 9 new students joining Profit with JavaScript and a 200 donation, highlighting real-time audience engagement and the positive impact of the content.', 'Demonstration of obtaining client ID and URI, setting scope permissions, and retrieving access token with live examples. The chapter demonstrates the process of obtaining client ID and URI, setting scope permissions, and retrieving access token with live examples.']}], 'duration': 921.735, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_82671688.jpg', 'highlights': ['Received over $50 in donations during the session', 'Emphasizes the importance of defining scopes for user permissions on the Spotify app', 'Demonstrates the process of creating a login URL with client ID and redirect URI', 'Highlights the process of creating an authentication URL and generating a token for authentication', 'Received a $140 and $30 donation, showing strong audience support', 'Live examples of obtaining client ID, setting scope permissions, and retrieving access token', '9 new students joined Profit with JavaScript, showcasing real-time audience engagement']}, {'end': 5224.937, 'segs': [{'end': 3652.147, 'src': 'embed', 'start': 3614.311, 'weight': 8, 'content': [{'end': 3617.393, 'text': 'And I see a few people are actually shooting Instagram stories and tagging us.', 'start': 3614.311, 'duration': 3.082}, {'end': 3619.935, 'text': 'We love that, guys, because it starts a conversation.', 'start': 3617.713, 'duration': 2.222}, {'end': 3620.976, 'text': 'We can chat to you guys.', 'start': 3619.995, 'duration': 0.981}, {'end': 3624.378, 'text': "And I've actually helped a lot of students out when they get stuck on problems.", 'start': 3621.356, 'duration': 3.022}, {'end': 3625.438, 'text': 'So make sure you do that.', 'start': 3624.458, 'duration': 0.98}, {'end': 3626.999, 'text': 'And it allows us to chat with you guys.', 'start': 3625.739, 'duration': 1.26}, {'end': 3633.403, 'text': 'Nice So the next step is window.location.hash goes to that hashtag.', 'start': 3628.921, 'duration': 4.482}, {'end': 3635.505, 'text': 'And then what we want to do is do the following.', 'start': 3633.864, 'duration': 1.641}, {'end': 3636.605, 'text': "We're going to say .", 'start': 3635.525, 'duration': 1.08}, {'end': 3638.184, 'text': 'substring Right.', 'start': 3636.605, 'duration': 1.579}, {'end': 3640.865, 'text': 'And substring is basically we do substring one.', 'start': 3638.664, 'duration': 2.201}, {'end': 3646.006, 'text': "What this does is it essentially says we're going to basically like imagine we're just chopping the string up.", 'start': 3641.125, 'duration': 4.881}, {'end': 3650.367, 'text': "Right So we're just saying get the first substring and then we're going to say split.", 'start': 3646.126, 'duration': 4.241}, {'end': 3652.147, 'text': 'Right So this is very important.', 'start': 3650.927, 'duration': 1.22}], 'summary': 'Engage with audience on instagram; help students with problems; discuss substring and split.', 'duration': 37.836, 'max_score': 3614.311, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_83614311.jpg'}, {'end': 3828.057, 'src': 'embed', 'start': 3799.543, 'weight': 10, 'content': [{'end': 3805.626, 'text': 'if you guys want to open up another browser or computer and help us out and grow our twitch, Because we never on Twitch,', 'start': 3799.543, 'duration': 6.083}, {'end': 3808.228, 'text': 'we never get more than one viewer max.', 'start': 3805.626, 'duration': 2.602}, {'end': 3811.669, 'text': "We've been streaming for three weeks, we never get.", 'start': 3808.268, 'duration': 3.401}, {'end': 3816.332, 'text': 'so if you guys want to help us out by just having maybe another browser or something like that open, that would really help,', 'start': 3811.669, 'duration': 4.663}, {'end': 3822.175, 'text': "because I think you'll just like, puts it in front of everybody, exactly.", 'start': 3816.332, 'duration': 5.843}, {'end': 3828.057, 'text': "yeah, that really will help us out, guys, because I'm not sure why we're not getting pushed on Twitch, but I think loads of people will benefit.", 'start': 3822.175, 'duration': 5.882}], 'summary': 'Streamers seeking help to increase twitch viewership after 3 weeks of streaming with max 1 viewer.', 'duration': 28.514, 'max_score': 3799.543, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_83799543.jpg'}, {'end': 4053.331, 'src': 'embed', 'start': 4024.855, 'weight': 4, 'content': [{'end': 4027.197, 'text': "So what I'm going to do here is I'm just going to separate the codes.", 'start': 4024.855, 'duration': 2.342}, {'end': 4027.958, 'text': "It's easier to see.", 'start': 4027.277, 'duration': 0.681}, {'end': 4029.96, 'text': "What I'm going to say is const.", 'start': 4027.978, 'duration': 1.982}, {'end': 4031.922, 'text': "So we're going to use the use effect hook.", 'start': 4029.98, 'duration': 1.942}, {'end': 4034.705, 'text': "And I'll explain what a use effect hook is now.", 'start': 4032.543, 'duration': 2.162}, {'end': 4038.89, 'text': 'So use effect, we use it in a lot of areas throughout the app.', 'start': 4034.806, 'duration': 4.084}, {'end': 4041.053, 'text': "So I'm going to explain it here now.", 'start': 4038.91, 'duration': 2.143}, {'end': 4044.937, 'text': "So we've got the it's basically going to run code.", 'start': 4041.113, 'duration': 3.824}, {'end': 4049.527, 'text': 'based on a given condition.', 'start': 4046.724, 'duration': 2.803}, {'end': 4053.331, 'text': 'so, based on a condition, it will run the piece of code that is inside of here.', 'start': 4049.527, 'duration': 3.804}], 'summary': 'Using the useeffect hook to run code based on a given condition.', 'duration': 28.476, 'max_score': 4024.855, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_84024855.jpg'}, {'end': 4221.31, 'src': 'embed', 'start': 4189.149, 'weight': 0, 'content': [{'end': 4191.689, 'text': "I mean, we're going to be doing this every.", 'start': 4189.149, 'duration': 2.54}, {'end': 4193.331, 'text': 'You guys are getting us so hyped up.', 'start': 4191.689, 'duration': 1.642}, {'end': 4194.951, 'text': "We're going to be doing this every day.", 'start': 4193.35, 'duration': 1.601}, {'end': 4196.972, 'text': 'We just got our new.', 'start': 4194.991, 'duration': 1.981}, {'end': 4201.034, 'text': "It's a really sick place we got in Beverly Hills where we're going to have.", 'start': 4196.972, 'duration': 4.062}, {'end': 4204.859, 'text': "our new setup, and it's gonna be just an epic live streaming setup.", 'start': 4201.514, 'duration': 3.345}, {'end': 4213.309, 'text': "We're gonna build a whole studio for you guys, and Nas is gonna be flying in and we're gonna be pretty much doing live streams every single day,", 'start': 4204.879, 'duration': 8.43}, {'end': 4214.891, 'text': 'if not multiple times a day.', 'start': 4213.309, 'duration': 1.582}, {'end': 4221.31, 'text': 'And honestly, a lot of this is just because of the encouragement that you guys are giving us and the push that you guys are giving us.', 'start': 4215.908, 'duration': 5.402}], 'summary': "Setting up a new studio in beverly hills for daily live streaming, with nas joining and the audience's encouragement as a driving force.", 'duration': 32.161, 'max_score': 4189.149, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_84189149.jpg'}, {'end': 4251.232, 'src': 'embed', 'start': 4223.851, 'weight': 1, 'content': [{'end': 4227.972, 'text': 'Abdullah, Logan, Steve, you know, a bunch of other people who we see here.', 'start': 4223.851, 'duration': 4.121}, {'end': 4229.313, 'text': 'Yamna many times.', 'start': 4228.053, 'duration': 1.26}, {'end': 4231.554, 'text': 'And we start to get to know all of you guys.', 'start': 4229.693, 'duration': 1.861}, {'end': 4234.995, 'text': 'So thank you guys so much for helping us do what we love.', 'start': 4231.594, 'duration': 3.401}, {'end': 4238.796, 'text': 'And we are just going to keep on going above and beyond for all of you guys.', 'start': 4235.455, 'duration': 3.341}, {'end': 4241.918, 'text': 'And we are at 95, about to break 100 on Twitch.', 'start': 4238.857, 'duration': 3.061}, {'end': 4246.168, 'text': "Let's go! Hey, I love that.", 'start': 4241.998, 'duration': 4.17}, {'end': 4251.232, 'text': "God, I'm curious to see how Twitch goes because I've heard good things about live streaming on Twitch.", 'start': 4246.748, 'duration': 4.484}], 'summary': 'Expressing gratitude for support and aiming to surpass 100 viewers on twitch for live streaming.', 'duration': 27.381, 'max_score': 4223.851, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_84223851.jpg'}, {'end': 4381.379, 'src': 'embed', 'start': 4353.606, 'weight': 5, 'content': [{'end': 4357.708, 'text': "which means it's going to fire off the use effect, which means that it should say I have a token.", 'start': 4353.606, 'duration': 4.102}, {'end': 4358.208, 'text': 'It says I have a token.', 'start': 4357.728, 'duration': 0.48}, {'end': 4361.489, 'text': 'Oh, and you pulled it out from the URL? Yeah.', 'start': 4358.568, 'duration': 2.921}, {'end': 4363.249, 'text': 'Bro, that is so gangster.', 'start': 4362.028, 'duration': 1.221}, {'end': 4365.89, 'text': "It's nice, right? Super clean.", 'start': 4364.449, 'duration': 1.441}, {'end': 4371.794, 'text': 'So we just sent them off to Spotify, said you handle the authentication and then they do all the messy work.', 'start': 4365.91, 'duration': 5.884}, {'end': 4373.374, 'text': 'They fire it back.', 'start': 4371.974, 'duration': 1.4}, {'end': 4377.897, 'text': 'And then basically all we do is we go inside the URL and say, hey, I want I want the access token.', 'start': 4373.795, 'duration': 4.102}, {'end': 4378.657, 'text': 'I mean, grab it.', 'start': 4378.117, 'duration': 0.54}, {'end': 4381.379, 'text': 'Which is pretty clean, right?', 'start': 4380.058, 'duration': 1.321}], 'summary': 'Using use effect to obtain token from url for spotify authentication.', 'duration': 27.773, 'max_score': 4353.606, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_84353606.jpg'}, {'end': 4686.07, 'src': 'embed', 'start': 4656.773, 'weight': 14, 'content': [{'end': 4658.054, 'text': 'So we can fix it later.', 'start': 4656.773, 'duration': 1.281}, {'end': 4661.497, 'text': 'All right, nice.', 'start': 4658.494, 'duration': 3.003}, {'end': 4664.508, 'text': 'What do you want me to do, click Agree? Yeah, click agree.', 'start': 4661.517, 'duration': 2.991}, {'end': 4668.95, 'text': "And now when we get that token, what it's going to do is it's going to strip it from the URL.", 'start': 4664.968, 'duration': 3.982}, {'end': 4671.551, 'text': 'And then you see even got rid of the token.', 'start': 4669.59, 'duration': 1.961}, {'end': 4675.153, 'text': 'So the access token from the URL, but we stored that in the state.', 'start': 4671.571, 'duration': 3.582}, {'end': 4679.375, 'text': "And then it basically use that to render the next page, which is I'm logged in.", 'start': 4675.913, 'duration': 3.462}, {'end': 4681.256, 'text': 'Okay, dang.', 'start': 4680.415, 'duration': 0.841}, {'end': 4686.07, 'text': 'So super clean how that all just worked in one go, right? Yeah.', 'start': 4682.349, 'duration': 3.721}], 'summary': 'Token stripped from url, stored in state, used to render next page. super clean process.', 'duration': 29.297, 'max_score': 4656.773, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_84656773.jpg'}, {'end': 4801.599, 'src': 'heatmap', 'start': 4637.237, 'weight': 11, 'content': [{'end': 4644.282, 'text': "Man, it's heartbreaking because everybody on Twitch is leaving because the whole stream is completely messed up on Twitch.", 'start': 4637.237, 'duration': 7.045}, {'end': 4647.845, 'text': "Oh, really? Yeah, it's heartbreaking, but it's okay.", 'start': 4644.803, 'duration': 3.042}, {'end': 4649.727, 'text': "I think we're going to fix it in the future.", 'start': 4647.885, 'duration': 1.842}, {'end': 4656.693, 'text': "We'll figure out how to make Twitch work, but there's crazy issues going on where it's like dropping frame rates and all kinds of crazy stuff.", 'start': 4649.807, 'duration': 6.886}, {'end': 4658.054, 'text': 'So we can fix it later.', 'start': 4656.773, 'duration': 1.281}, {'end': 4661.497, 'text': 'All right, nice.', 'start': 4658.494, 'duration': 3.003}, {'end': 4664.508, 'text': 'What do you want me to do, click Agree? Yeah, click agree.', 'start': 4661.517, 'duration': 2.991}, {'end': 4668.95, 'text': "And now when we get that token, what it's going to do is it's going to strip it from the URL.", 'start': 4664.968, 'duration': 3.982}, {'end': 4671.551, 'text': 'And then you see even got rid of the token.', 'start': 4669.59, 'duration': 1.961}, {'end': 4675.153, 'text': 'So the access token from the URL, but we stored that in the state.', 'start': 4671.571, 'duration': 3.582}, {'end': 4679.375, 'text': "And then it basically use that to render the next page, which is I'm logged in.", 'start': 4675.913, 'duration': 3.462}, {'end': 4681.256, 'text': 'Okay, dang.', 'start': 4680.415, 'duration': 0.841}, {'end': 4686.07, 'text': 'So super clean how that all just worked in one go, right? Yeah.', 'start': 4682.349, 'duration': 3.721}, {'end': 4689.911, 'text': 'So just to run through, we got the token from the URL when it came back.', 'start': 4686.55, 'duration': 3.361}, {'end': 4694.613, 'text': "We stripped it so it no longer sat inside the URL, which is why it's a clean URL at the moment.", 'start': 4690.252, 'duration': 4.361}, {'end': 4698.554, 'text': 'Yeah Then we basically stored that inside of the state.', 'start': 4695.113, 'duration': 3.441}, {'end': 4701.135, 'text': 'So we have now have the token inside of memory.', 'start': 4698.734, 'duration': 2.401}, {'end': 4705.836, 'text': "Then here, we pretty much just say, if there's a token render, I am logged in.", 'start': 4701.855, 'duration': 3.981}, {'end': 4709.418, 'text': 'Otherwise, render the login component, which is awesome.', 'start': 4705.936, 'duration': 3.482}, {'end': 4714.366, 'text': 'yeah, nice.', 'start': 4711.744, 'duration': 2.622}, {'end': 4720.049, 'text': "so now what we're gonna do is we are actually gonna go ahead and develop the next part.", 'start': 4714.366, 'duration': 5.683}, {'end': 4722.53, 'text': 'so obviously this is cool.', 'start': 4720.049, 'duration': 2.481}, {'end': 4723.491, 'text': 'right, this is nice.', 'start': 4722.53, 'duration': 0.961}, {'end': 4727.133, 'text': 'but what happens is is that we actually need to.', 'start': 4723.491, 'duration': 3.642}, {'end': 4732.476, 'text': "with that token, let's go ahead and try, and we actually need to use that token to sort of connect, to spotify.", 'start': 4727.133, 'duration': 5.343}, {'end': 4735.938, 'text': 'right, we want to connect to spotify, so we can start doing some cool stuff with it.', 'start': 4732.476, 'duration': 3.462}, {'end': 4740.774, 'text': "So I'm going to install the following into the project", 'start': 4736.67, 'duration': 4.104}, {'end': 4744.016, 'text': 'So inside of this, go ahead and open up a new terminal.', 'start': 4740.834, 'duration': 3.182}, {'end': 4748.36, 'text': "Yep So let's have a second terminal open.", 'start': 4744.517, 'duration': 3.843}, {'end': 4755.707, 'text': "Cool So here, and then, um, just make sure that I'm going to make sure that you also have access to this.", 'start': 4748.801, 'duration': 6.906}, {'end': 4757.068, 'text': 'So read and write access.', 'start': 4755.767, 'duration': 1.301}, {'end': 4758.089, 'text': 'Then I should be good to go.', 'start': 4757.128, 'duration': 0.961}, {'end': 4763.06, 'text': "Nice And what I'm going to do here, guys, I'm going to do npm install.", 'start': 4759.21, 'duration': 3.85}, {'end': 4768.043, 'text': 'So npm install or npm i as a shorthand.', 'start': 4763.161, 'duration': 4.882}, {'end': 4774.666, 'text': "And then I'm going to say Spotify-web-api-js.", 'start': 4768.423, 'duration': 6.243}, {'end': 4776.787, 'text': 'So Spotify web API JavaScript.', 'start': 4774.866, 'duration': 1.921}, {'end': 4778.108, 'text': "I'm going to install that.", 'start': 4777.328, 'duration': 0.78}, {'end': 4781.13, 'text': 'What this is, is basically is built inside the community.', 'start': 4778.568, 'duration': 2.562}, {'end': 4785.732, 'text': "And it's essentially a wrapper around the Spotify web API.", 'start': 4781.83, 'duration': 3.902}, {'end': 4787.553, 'text': 'So Spotify built a service.', 'start': 4786.052, 'duration': 1.501}, {'end': 4794.655, 'text': 'They built an API that allows us to connect with their services and grab music and do all of that stuff.', 'start': 4787.633, 'duration': 7.022}, {'end': 4801.599, 'text': 'But somebody went ahead and created a wrapper, which is like an easy way of sort of interacting with that, with that, um, API.', 'start': 4795.236, 'duration': 6.363}], 'summary': 'Twitch stream issues, fixing token usage and spotify api integration discussed.', 'duration': 23.031, 'max_score': 4637.237, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_84637237.jpg'}, {'end': 4862.502, 'src': 'embed', 'start': 4837.625, 'weight': 6, 'content': [{'end': 4843.387, 'text': 'which is basically going to be responsible for any sort of interaction between our react app and spotify.', 'start': 4837.625, 'duration': 5.762}, {'end': 4849.056, 'text': "right?. So con Spotify equals and I'm going to say new Spotify.", 'start': 4844.073, 'duration': 4.983}, {'end': 4854.578, 'text': "So this basically a new Spotify web API, and it's basically, it's a constructor.", 'start': 4849.336, 'duration': 5.242}, {'end': 4858.961, 'text': 'So I need to say, sorry, con Spotify equals new Spotify web API.', 'start': 4854.598, 'duration': 4.363}, {'end': 4862.502, 'text': 'So this is basically creating a instance of Spotify inside of our app,', 'start': 4859.001, 'duration': 3.501}], 'summary': 'Creating a new instance of spotify web api for interaction with react app.', 'duration': 24.877, 'max_score': 4837.625, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_84837625.jpg'}, {'end': 4925.404, 'src': 'embed', 'start': 4901.083, 'weight': 16, 'content': [{'end': 4912.054, 'text': "So it's now saying that, like, OK, here is your magic key that will allow you to safely talk back and forth between React and the Spotify API.", 'start': 4901.083, 'duration': 10.971}, {'end': 4914.616, 'text': 'So Spotify services and the React app that we just built.', 'start': 4912.074, 'duration': 2.542}, {'end': 4917.599, 'text': 'Right So we have that.', 'start': 4914.636, 'duration': 2.963}, {'end': 4925.404, 'text': "And then what we're going to do to test it, guys, to test this out, what I'm going to go ahead and do is actually go ahead and try something.", 'start': 4918.559, 'duration': 6.845}], 'summary': 'A magic key enables safe communication between react and spotify api for testing.', 'duration': 24.321, 'max_score': 4901.083, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_84901083.jpg'}, {'end': 4976.265, 'src': 'embed', 'start': 4949.216, 'weight': 2, 'content': [{'end': 4953.002, 'text': 'We then rendered functionality which pushed us to a logged in state.', 'start': 4949.216, 'duration': 3.786}, {'end': 4956.166, 'text': 'So we now have a logged in page as opposed to the login page.', 'start': 4953.362, 'duration': 2.804}, {'end': 4961.513, 'text': "Now what we're doing is we are using the Spotify Web API.", 'start': 4956.967, 'duration': 4.546}, {'end': 4963.176, 'text': 'So this right here.', 'start': 4962.294, 'duration': 0.882}, {'end': 4968.079, 'text': 'to connect our access token so that so, overall the overall functionality.', 'start': 4963.696, 'duration': 4.383}, {'end': 4972.062, 'text': "i'm just asking, from an end user experience so like what are what's the like?", 'start': 4968.079, 'duration': 3.983}, {'end': 4976.265, 'text': 'are we now building the thing that allows us to see the logged in page?', 'start': 4972.062, 'duration': 4.203}], 'summary': 'Developed functionality for logged in page using spotify web api.', 'duration': 27.049, 'max_score': 4949.216, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_84949216.jpg'}], 'start': 3593.443, 'title': 'Using instagram, hooks, studio setup, and api in react', 'summary': 'Covers topics such as using instagram for audience engagement, retrieving access tokens with use effect hook, setting up a live streaming studio, and connecting spotify api to react. it also includes examples of javascript functions for url manipulation and emphasizes practicing with reduced functions and conditional rendering. additionally, it highlights the gratitude for 95 twitch followers and enthusiasm for using twitch as a live streaming platform.', 'chapters': [{'end': 3838.424, 'start': 3593.443, 'title': 'Using instagram for engagement', 'summary': 'Discusses using instagram for engagement, encouraging audience interaction, offering feedback, and demonstrating the use of javascript functions like substring and split for url manipulation, while also seeking support to grow their twitch channel.', 'duration': 244.981, 'highlights': ['Encouraging audience interaction and feedback on Instagram by sharing content and responding to messages, aiming to start conversations and help students with problems.', 'Demonstrating the use of JavaScript functions like substring and split for URL manipulation, emphasizing the power of reduce function and encouraging investment in learning it.', 'Seeking support to grow their Twitch channel by asking viewers to open additional browsers to increase their visibility and viewership.']}, {'end': 4188.828, 'start': 3838.424, 'title': 'Using use effect hook for token retrieval', 'summary': 'Explains how to use the use effect hook to retrieve an access token from a url, and how it runs code based on a given condition, with examples of running code when the component loads and when certain variables change. additionally, it highlights the importance of practicing with reduced functions and the use of multiple use effects.', 'duration': 350.404, 'highlights': ['The chapter explains how to use the use effect hook to retrieve an access token from a URL The code demonstrates the process of using the use effect hook to retrieve an access token from a URL by running a function based on a given condition.', 'The use effect hook runs code based on a given condition, with examples of running code when the component loads and when certain variables change It provides examples of using the use effect hook to run code when the component loads and when certain variables change, and explains how to specify these conditions within the hook.', 'It highlights the importance of practicing with reduced functions and the use of multiple use effects The chapter emphasizes the importance of practicing with reduced functions and highlights the capability of using multiple use effects to monitor different variables and trigger code based on their changes.']}, {'end': 4656.693, 'start': 4189.149, 'title': 'Live streaming studio setup and authentication process', 'summary': "Discusses setting up a live streaming studio in beverly hills for daily live streams, with a plan to stream multiple times a day, as well as implementing the authentication process for spotify's access token and creating a conditional rendering logic based on the token's presence. they express gratitude for reaching 95 followers on twitch and express enthusiasm for using twitch as a live streaming platform.", 'duration': 467.544, 'highlights': ['Setting up a live streaming studio in Beverly Hills for daily live streams and planning to stream multiple times a day The team is excited about setting up a new studio in Beverly Hills for daily live streaming. They plan to stream multiple times a day, expressing enthusiasm for this new setup.', 'Expressing gratitude for reaching 95 followers on Twitch and enthusiasm for using Twitch as a live streaming platform The team expresses gratitude for reaching 95 followers on Twitch and their excitement for utilizing Twitch as a live streaming platform, showing their enthusiasm for this achievement.', "Implementing the authentication process for Spotify's access token The chapter discusses the process of implementing the authentication process for Spotify's access token, including using console logs and conditional rendering based on the token's presence."]}, {'end': 5224.937, 'start': 4656.773, 'title': 'Connecting spotify api to react', 'summary': 'Details the process of connecting the access token from the url to spotify web api, installing the spotify web api javascript wrapper, creating a spotify instance in the react app, setting the access token, and testing the api functionality by retrieving user account information.', 'duration': 568.164, 'highlights': ['The chapter details the process of connecting the access token from the URL to Spotify Web API. The process involves stripping the access token from the URL, storing it in the state, and using it to render the logged in page.', 'Installing the Spotify Web API JavaScript wrapper is explained, which provides an easy way to interact with the Spotify Web API. The wrapper allows for interaction with Spotify services and the retrieval of music through an API.', 'The creation of a Spotify instance in the React app is described, which is responsible for interaction between the app and Spotify. The Spotify instance acts as a super object for communication with the Spotify Web API.', 'The process of setting the access token and testing the API functionality by retrieving user account information is outlined. The access token is set in the Spotify API to enable secure communication between the React app and Spotify, and the API functionality is tested by retrieving user account details.']}], 'duration': 1631.494, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_83593443.jpg', 'highlights': ['Setting up a live streaming studio in Beverly Hills for daily live streams and planning to stream multiple times a day', 'Expressing gratitude for reaching 95 followers on Twitch and enthusiasm for using Twitch as a live streaming platform', 'The process of setting the access token and testing the API functionality by retrieving user account information is outlined', 'The chapter details the process of connecting the access token from the URL to Spotify Web API', 'The use effect hook runs code based on a given condition, with examples of running code when the component loads and when certain variables change', 'The chapter explains how to use the use effect hook to retrieve an access token from a URL', 'The creation of a Spotify instance in the React app is described, which is responsible for interaction between the app and Spotify', "The chapter discusses the process of implementing the authentication process for Spotify's access token, including using console logs and conditional rendering based on the token's presence", 'Encouraging audience interaction and feedback on Instagram by sharing content and responding to messages, aiming to start conversations and help students with problems', 'Demonstrating the use of JavaScript functions like substring and split for URL manipulation, emphasizing the power of reduce function and encouraging investment in learning it', 'Seeking support to grow their Twitch channel by asking viewers to open additional browsers to increase their visibility and viewership', 'Installing the Spotify Web API JavaScript wrapper is explained, which provides an easy way to interact with the Spotify Web API', 'The team is excited about setting up a new studio in Beverly Hills for daily live streaming. They plan to stream multiple times a day, expressing enthusiasm for this new setup', 'The wrapper allows for interaction with Spotify services and the retrieval of music through an API', 'The process involves stripping the access token from the URL, storing it in the state, and using it to render the logged in page', 'The team expresses gratitude for reaching 95 followers on Twitch and their excitement for utilizing Twitch as a live streaming platform, showing their enthusiasm for this achievement', 'The access token is set in the Spotify API to enable secure communication between the React app and Spotify, and the API functionality is tested by retrieving user account details', 'The chapter emphasizes the importance of practicing with reduced functions and highlights the capability of using multiple use effects to monitor different variables and trigger code based on their changes']}, {'end': 6519.947, 'segs': [{'end': 5770.421, 'src': 'embed', 'start': 5743.472, 'weight': 3, 'content': [{'end': 5754.561, 'text': 'So like imagine, this is like the data layer and this this layer can basically at any time push information into it and pull information from it.', 'start': 5743.472, 'duration': 11.089}, {'end': 5762.359, 'text': 'So we can basically like at any time, like in the app, we push the user, we can push like songs, playlists,', 'start': 5755.818, 'duration': 6.541}, {'end': 5765.4, 'text': 'all of these different things into that data layer.', 'start': 5762.359, 'duration': 3.041}, {'end': 5770.421, 'text': 'And then we can go ahead and we can pull it from the data layer at any point in the tree.', 'start': 5765.82, 'duration': 4.601}], 'summary': 'Data layer allows pushing and pulling information at any time in the app.', 'duration': 26.949, 'max_score': 5743.472, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_85743472.jpg'}, {'end': 5888.747, 'src': 'embed', 'start': 5849.714, 'weight': 0, 'content': [{'end': 5853.078, 'text': 'All of that stuff is stored in a data layer.', 'start': 5849.714, 'duration': 3.364}, {'end': 5856.402, 'text': 'And we use context APIs to be able to do that.', 'start': 5853.579, 'duration': 2.823}, {'end': 5858.985, 'text': 'And again, this is a similar concept to Redux.', 'start': 5856.542, 'duration': 2.443}, {'end': 5864.211, 'text': 'So once you guys can understand how context API works with the data layer, you can then do the same thing with Redux.', 'start': 5859.045, 'duration': 5.166}, {'end': 5871.321, 'text': 'Exactly. I just saw a good question by Nishad Patil, which says can Flux be better to use?', 'start': 5865.299, 'duration': 6.022}, {'end': 5875.362, 'text': 'Now, very good question, because I actually learned the first time with Flux.', 'start': 5871.761, 'duration': 3.601}, {'end': 5878.263, 'text': 'Flux is something similar to React Context API and Redux.', 'start': 5875.502, 'duration': 2.761}, {'end': 5887.406, 'text': "My advice here, guys, is honestly start with the React Context API, because it's the most friendly way and it's very lightweight,", 'start': 5878.623, 'duration': 8.783}, {'end': 5888.747, 'text': 'to get started and up and running with it.', 'start': 5887.406, 'duration': 1.341}], 'summary': 'Using context apis for data layer, start with react context api for a lightweight approach.', 'duration': 39.033, 'max_score': 5849.714, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_85849714.jpg'}, {'end': 5940.581, 'src': 'embed', 'start': 5911.311, 'weight': 4, 'content': [{'end': 5918.539, 'text': 'And this is really important you guys, because Sonny, after years of his experience, figured out that going that order, go first Context API,', 'start': 5911.311, 'duration': 7.228}, {'end': 5921.222, 'text': 'like level one, and then go Redux right after.', 'start': 5918.539, 'duration': 2.683}, {'end': 5925.426, 'text': 'And Context API is just much lighter, much easier to start using.', 'start': 5921.242, 'duration': 4.184}, {'end': 5927.148, 'text': 'The concepts are pretty much similar.', 'start': 5925.566, 'duration': 1.582}, {'end': 5931.572, 'text': 'Then you can go to you know, the second layer, which is Redux.', 'start': 5927.548, 'duration': 4.024}, {'end': 5933.654, 'text': 'And I say similar things when it comes to programming,', 'start': 5931.612, 'duration': 2.042}, {'end': 5940.581, 'text': 'like the reason why I say learn Python or JavaScript first before you learn maybe C++ or assembly,', 'start': 5933.654, 'duration': 6.927}], 'summary': "Start with context api before transitioning to redux for a lighter, easier start, based on sonny's experience.", 'duration': 29.27, 'max_score': 5911.311, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_85911311.jpg'}, {'end': 5981.4, 'src': 'embed', 'start': 5953.585, 'weight': 2, 'content': [{'end': 5955.986, 'text': "it's really really important, guys, and like like, as you said,", 'start': 5953.585, 'duration': 2.401}, {'end': 5960.989, 'text': "like it's just gonna save you a bunch of time and take it from like the years that we've had.", 'start': 5955.986, 'duration': 5.003}, {'end': 5964.07, 'text': 'like, in terms of like going through that pain and trying to figure it out.', 'start': 5960.989, 'duration': 3.081}, {'end': 5967.412, 'text': 'like just just take the shortcut and listen to our advice and learn it.', 'start': 5964.07, 'duration': 3.342}, {'end': 5970.453, 'text': 'like react context api first and then move to redux,', 'start': 5967.412, 'duration': 3.041}, {'end': 5975.616, 'text': "and that's the quickest way that you can go from a to a to z in terms of becoming a professional web developer.", 'start': 5970.453, 'duration': 5.163}, {'end': 5981.4, 'text': "So yeah, with that said, what we're going to do is we're actually going to go ahead and implement it.", 'start': 5976.637, 'duration': 4.763}], 'summary': 'Use react context api first, then move to redux for quicker professional web development.', 'duration': 27.815, 'max_score': 5953.585, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_85953585.jpg'}, {'end': 6177.947, 'src': 'embed', 'start': 6149.818, 'weight': 5, 'content': [{'end': 6153.622, 'text': "But obviously it's going to freak out because there's no data layer that exists.", 'start': 6149.818, 'duration': 3.804}, {'end': 6155.944, 'text': 'And a data layer has to have two things.', 'start': 6154.123, 'duration': 1.821}, {'end': 6161.25, 'text': 'It has to have an initial state and it has to have something special called a reducer.', 'start': 6156.285, 'duration': 4.965}, {'end': 6167.877, 'text': "I'm going to tell you what these things are in a second, but basically it has an initial state and a reducer.", 'start': 6162.151, 'duration': 5.726}, {'end': 6169.938, 'text': 'And we pass that as props.', 'start': 6168.797, 'duration': 1.141}, {'end': 6172.942, 'text': "And basically what we're going to do is we're going to go ahead and build that file now.", 'start': 6170.019, 'duration': 2.923}, {'end': 6175.284, 'text': 'So the first part is the state provider.', 'start': 6173.502, 'duration': 1.782}, {'end': 6177.947, 'text': "So I'm going to go ahead and create state provider.js.", 'start': 6175.344, 'duration': 2.603}], 'summary': 'Building a data layer with initial state and reducer in state provider.js.', 'duration': 28.129, 'max_score': 6149.818, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_86149818.jpg'}], 'start': 5227.379, 'title': 'Data layer in web development', 'summary': 'Discusses implementing a data layer in web development, emphasizing the use of react context api and transitioning to redux, with relevance in building e-commerce stores like amazon clone, and addressing challenges for a cleaner and scalable codebase.', 'chapters': [{'end': 5286.945, 'start': 5227.379, 'title': 'Enrollment confirmation and course feedback', 'summary': 'Discusses confirming enrollment in a course, acknowledging a new student, and encouraging engagement through likes and positive feedback.', 'duration': 59.566, 'highlights': ['Acknowledging new student enrollment in the course and expressing gratitude for the enrollment confirmation.', 'Encouraging engagement and positive feedback from the audience to sustain the current pace of content creation.', "Requesting viewers to 'smash the thumbs up button' to show support and help in spreading the message to everyone."]}, {'end': 5727.261, 'start': 5287.728, 'title': 'Setting up data layer in react', 'summary': 'Explains the process of setting up the data layer in react, addressing the challenges of prop drilling and the introduction of redux or react context api for a cleaner and more scalable codebase.', 'duration': 439.533, 'highlights': ["The chapter explains the process of setting up the data layer in React The chapter discusses the importance of setting up the data layer in React to address the challenges of prop drilling and improve the codebase's organization and scalability.", 'Introduction of Redux or React Context API for a cleaner and more scalable codebase The transcript introduces the use of Redux or React Context API as a solution to the prop drilling problem, providing a cleaner and more scalable codebase for React applications.', 'Challenges of prop drilling and its impact on code organization The chapter highlights the challenges of prop drilling, emphasizing its negative impact on code organization and scalability, and the need for a more efficient solution such as Redux or React Context API.']}, {'end': 6020.119, 'start': 5728.041, 'title': 'Implementing a data layer in web development', 'summary': 'Discusses the importance of a data layer in web development, emphasizing the use of react context api as a lightweight and friendly way to start, before transitioning to redux, and highlights its relevance in building e-commerce stores like amazon clone.', 'duration': 292.078, 'highlights': ['The data layer, implemented using React Context API, is crucial in web development and can be a determining factor in landing a job as a professional web developer, as well as in building e-commerce stores. It allows for efficient storage and access of items, such as songs and playlists, without the need for prop drilling, providing a powerful and recommended pattern to learn. It is also emphasized that understanding the React Context API before transitioning to Redux is a time-saving approach. (Relevance: 5)', 'The recommendation to start with React Context API due to its user-friendly and lightweight nature, which provides a foundation for understanding more complex tools like Redux and Flux. This approach is compared to learning Python or JavaScript before delving into more complex programming languages, emphasizing the importance of grasping fundamental concepts first. (Relevance: 4)', "The speaker's personal experience and advice, backed by years of experience, stress the significance of learning the React Context API first before moving to Redux, as it aligns with the quickest path to becoming a professional web developer. The idea is likened to taking a shortcut to avoid unnecessary pain and effort when learning web development. (Relevance: 3)", 'The importance of the data layer is highlighted in the context of building e-commerce stores, specifically referencing the Amazon clone as an example of implementing the data layer to efficiently store and access items added to the cart in a fast and accessible manner. This emphasizes the practical application and relevance of the discussed concepts. (Relevance: 2)', 'The comparison between learning the React Context API and transitioning to Redux is likened to progressing from understanding programming concepts in Python or JavaScript before advancing to more complex languages like C++ or assembly, emphasizing the gradual learning process and the significance of starting with a lighter, foundational tool. (Relevance: 1)']}, {'end': 6519.947, 'start': 6020.831, 'title': 'Building a data layer for state management', 'summary': 'Covers the process of building a data layer for state management in react, including creating a state provider, explaining the context api, and emphasizing the importance of pattern recognition in understanding the code.', 'duration': 499.116, 'highlights': ['The chapter covers the process of building a data layer for state management in React It includes creating a state provider, explaining the context API, and emphasizing the importance of pattern recognition in understanding the code.', "Emphasizing the importance of pattern recognition in understanding the code The speaker encourages viewers to focus on pattern recognition, even if they don't understand every line of code, and assures that it will become second nature with practice.", 'Creating a state provider and explaining the context API The process involves creating a state provider and explaining the context API, including the preparation of the data layer and the use of a provider to wrap the app.']}], 'duration': 1292.568, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_85227379.jpg', 'highlights': ['The data layer, implemented using React Context API, is crucial in web development and can be a determining factor in landing a job as a professional web developer, as well as in building e-commerce stores. It allows for efficient storage and access of items, such as songs and playlists, without the need for prop drilling, providing a powerful and recommended pattern to learn. It is also emphasized that understanding the React Context API before transitioning to Redux is a time-saving approach. (Relevance: 5)', 'The recommendation to start with React Context API due to its user-friendly and lightweight nature, which provides a foundation for understanding more complex tools like Redux and Flux. This approach is compared to learning Python or JavaScript before delving into more complex programming languages, emphasizing the importance of grasping fundamental concepts first. (Relevance: 4)', "The speaker's personal experience and advice, backed by years of experience, stress the significance of learning the React Context API first before moving to Redux, as it aligns with the quickest path to becoming a professional web developer. The idea is likened to taking a shortcut to avoid unnecessary pain and effort when learning web development. (Relevance: 3)", 'The importance of the data layer is highlighted in the context of building e-commerce stores, specifically referencing the Amazon clone as an example of implementing the data layer to efficiently store and access items added to the cart in a fast and accessible manner. This emphasizes the practical application and relevance of the discussed concepts. (Relevance: 2)', 'The comparison between learning the React Context API and transitioning to Redux is likened to progressing from understanding programming concepts in Python or JavaScript before advancing to more complex languages like C++ or assembly, emphasizing the gradual learning process and the significance of starting with a lighter, foundational tool. (Relevance: 1)', "The chapter explains the process of setting up the data layer in React The chapter discusses the importance of setting up the data layer in React to address the challenges of prop drilling and improve the codebase's organization and scalability."]}, {'end': 7734.361, 'segs': [{'end': 6545.701, 'src': 'embed', 'start': 6520.368, 'weight': 3, 'content': [{'end': 6525.652, 'text': "With that said, you guys, let's see if we can break 30, 000, views on this live stream.", 'start': 6520.368, 'duration': 5.284}, {'end': 6527.593, 'text': 'Super excited and thank you for your support.', 'start': 6525.832, 'duration': 1.761}, {'end': 6530.174, 'text': "Nice Let's do it.", 'start': 6529.093, 'duration': 1.081}, {'end': 6531.975, 'text': "We're almost at 2K likes as well.", 'start': 6530.214, 'duration': 1.761}, {'end': 6534.076, 'text': 'Insane Insane stuff.', 'start': 6532.135, 'duration': 1.941}, {'end': 6537.277, 'text': 'So we were setting up the data layer.', 'start': 6535.356, 'duration': 1.921}, {'end': 6541.739, 'text': "We had the provider and we passed in a value, right? Now here we're going to use something.", 'start': 6537.337, 'duration': 4.402}, {'end': 6544.801, 'text': "Whenever you see useReducer, useContext, they're all hooks.", 'start': 6541.759, 'duration': 3.042}, {'end': 6545.701, 'text': "They're all React hooks.", 'start': 6544.881, 'duration': 0.82}], 'summary': 'Seeking 30,000 views, almost at 2k likes, discussing react hooks', 'duration': 25.333, 'max_score': 6520.368, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_86520368.jpg'}, {'end': 6891.42, 'src': 'embed', 'start': 6860.652, 'weight': 1, 'content': [{'end': 6861.413, 'text': 'It has a type.', 'start': 6860.652, 'duration': 0.761}, {'end': 6864.315, 'text': 'So for example, one type could be something like this.', 'start': 6861.893, 'duration': 2.422}, {'end': 6865.656, 'text': 'It could be something like set.', 'start': 6864.395, 'duration': 1.261}, {'end': 6874.128, 'text': "user. When we logged in, what we could say is we could dispatch an action at that point called set user and say here's the user,", 'start': 6866.423, 'duration': 7.705}, {'end': 6875.769, 'text': 'throw them into the data layer.', 'start': 6874.128, 'duration': 1.641}, {'end': 6878.371, 'text': 'The way we do that is we say set user here.', 'start': 6875.849, 'duration': 2.522}, {'end': 6885.416, 'text': 'Then what we do is whenever the reducer, its primary job is just to listen to actions.', 'start': 6879.252, 'duration': 6.164}, {'end': 6891.42, 'text': 'All it does is it sits there idle and it just listens to actions.', 'start': 6885.656, 'duration': 5.764}], 'summary': "The system allows for dispatching an action called 'set user' to throw user data into the data layer.", 'duration': 30.768, 'max_score': 6860.652, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_86860652.jpg'}, {'end': 7255.721, 'src': 'embed', 'start': 7229.479, 'weight': 0, 'content': [{'end': 7235.142, 'text': "Trust me, guys, if you're considering using Redux, Redux is a huge setup compared to this.", 'start': 7229.479, 'duration': 5.663}, {'end': 7237.684, 'text': 'This is just 11 lines of code to get everything up and running.', 'start': 7235.503, 'duration': 2.181}, {'end': 7239.946, 'text': 'And then the reducer is very short.', 'start': 7238.565, 'duration': 1.381}, {'end': 7242.088, 'text': "It's very small, like 24 lines of code.", 'start': 7240.006, 'duration': 2.082}, {'end': 7247.033, 'text': 'Redux is like files and files and files and configuration and all sorts of other stuff.', 'start': 7242.508, 'duration': 4.525}, {'end': 7255.721, 'text': 'So start with this and you guys will slowly- Guys, we really appreciate you being here because we just hit two hours of the live stream.', 'start': 7247.533, 'duration': 8.188}], 'summary': 'Using the 11-line setup is quicker than redux, with a compact 24-line reducer.', 'duration': 26.242, 'max_score': 7229.479, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_87229479.jpg'}, {'end': 7310.938, 'src': 'embed', 'start': 7283.59, 'weight': 2, 'content': [{'end': 7289.976, 'text': "And so it's going to take some time, but just please make sure you're at your most attentive, because once you learn these lessons,", 'start': 7283.59, 'duration': 6.386}, {'end': 7297.061, 'text': "these lessons will be worth a lot to you in your career, whether it's $10, 000, 20, 000, 50, 000 or 100, 000..", 'start': 7289.976, 'duration': 7.085}, {'end': 7299.845, 'text': 'But a lot of it is going to come from this that you learn.', 'start': 7297.062, 'duration': 2.783}, {'end': 7301.466, 'text': 'So just be at your peak mental state.', 'start': 7299.905, 'duration': 1.561}, {'end': 7306.09, 'text': 'If you need to drink water, whatever you got to do, just be at that peak state so you can actually pick this up.', 'start': 7301.486, 'duration': 4.604}, {'end': 7310.938, 'text': 'Exactly Like, guys, we still like a fair amount to go.', 'start': 7307.331, 'duration': 3.607}], 'summary': 'Be attentive to learn valuable lessons for your career, worth $10,000 to $100,000; stay at peak mental state.', 'duration': 27.348, 'max_score': 7283.59, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_87283590.jpg'}], 'start': 6520.368, 'title': 'Setting up data layer and reducer', 'summary': 'Discusses setting up a data layer with a reducer in react, including the use of hooks like usereducer and usecontext, creating an initial state, setting up initial state, creating a reducer, using context api, and data layer dispatch and retrieval, lasting for over two hours, potentially worth $10,000 to $100,000.', 'chapters': [{'end': 6709.411, 'start': 6520.368, 'title': 'Setting up data layer with reducer', 'summary': 'Discusses setting up a data layer with a reducer in react, including the use of hooks like usereducer and usecontext, and the creation of an initial state in the reducer. the goal is to prepare the data layer for integration and ensure the functionality of the app.', 'duration': 189.043, 'highlights': ['The chapter discusses setting up a data layer with a reducer in React, including the use of hooks like useReducer and useContext, and the creation of an initial state in the reducer.', 'The speaker mentions the goal of breaking 30,000 views on the live stream and expresses excitement for the support received.', 'They also note the approach of 2K likes on the live stream.', "The initial state in the reducer is defined as an object with attributes such as 'user' as null, 'playlists' as empty, 'isSongPlaying' as false, and 'song' as null."]}, {'end': 7007.966, 'start': 6709.771, 'title': 'Setting up initial state and reducer', 'summary': 'Discusses setting up the initial state for the data layer and creating a reducer to listen to actions and update the state based on the dispatched actions, with emphasis on the importance of keeping the current state and using action types and payloads. the chapter also highlights the need for a default case in the reducer.', 'duration': 298.195, 'highlights': ['Creating a Reducer to Listen to Actions The reducer is created to listen to actions and update the state based on the dispatched actions, emphasizing the importance of keeping the current state and using action types and payloads.', 'Importing the Initial State from the Reducer The initial state is imported from the reducer and passed through, setting up the initial state for the data layer.', 'Using a Switch in the Reducer for Action Types A switch is used in the reducer to handle different action types, with an emphasis on the need for a default case to ensure the app does not break if an unhandled action is dispatched.', 'Debugging Tool in the Reducer A debugging tool is recommended for the reducer, using console.log to print the action, which can save time and prevent errors during development.']}, {'end': 7282.85, 'start': 7009.527, 'title': 'Context api and data layer setup', 'summary': 'Discusses the setup and usage of context api and data layer in app development, emphasizing the simplicity and efficiency of the process, with a focus on the data layer setup and dispatch functionality, as well as comparisons with redux, lasting for over two hours.', 'duration': 273.323, 'highlights': ['The setup of the data layer is highlighted as simple and efficient, with only 11 lines of code required, in contrast to the more complex setup of Redux.', "The importance of the dispatch functionality is emphasized, likening it to a 'special gun' used to update the data layer with values, providing a clear analogy for its purpose.", "The chapter stresses the value of sticking with the lengthy and complex process, acknowledging the viewers' dedication over the two-hour duration of the live stream.", 'The upcoming demonstrations on how Context API works and the hosting of the app using Firebase are mentioned, providing insight into the future content of the discussion and the practical applications of the setup being presented.', "The special function 'state provider' in the data layer setup is explained, serving as a crucial element for accessing and interacting with the data layer, with a specific mention of the 'use context' hook for this purpose."]}, {'end': 7734.361, 'start': 7283.59, 'title': 'Data layer dispatch and retrieval', 'summary': 'Covers the process of dispatching and retrieving data from the data layer, emphasizing the importance of being mentally prepared to grasp the valuable career lessons, potentially worth $10,000 to $100,000, and introducing a simplified state management api called recoil.', 'duration': 450.771, 'highlights': ['The importance of being mentally prepared to grasp valuable career lessons The chapter emphasizes the significance of being mentally prepared to learn valuable career lessons, potentially worth $10,000 to $100,000, indicating the substantial impact of the knowledge gained.', 'Introduction of Recoil as a simplified state management API Recoil is introduced as a simplified state management API, potentially indicating a shift in popularity and offering a valuable alternative for the audience to explore.', 'Process of dispatching and retrieving data from the data layer The chapter delves into the process of dispatching and retrieving data from the data layer, highlighting the practical application and functionality of this concept in the development process.']}], 'duration': 1213.993, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_86520368.jpg', 'highlights': ['The setup of the data layer is highlighted as simple and efficient, with only 11 lines of code required, in contrast to the more complex setup of Redux.', 'Creating a Reducer to Listen to Actions The reducer is created to listen to actions and update the state based on the dispatched actions, emphasizing the importance of keeping the current state and using action types and payloads.', 'The importance of being mentally prepared to grasp valuable career lessons The chapter emphasizes the significance of being mentally prepared to learn valuable career lessons, potentially worth $10,000 to $100,000, indicating the substantial impact of the knowledge gained.', 'The speaker mentions the goal of breaking 30,000 views on the live stream and expresses excitement for the support received.']}, {'end': 10595.446, 'segs': [{'end': 7991.419, 'src': 'embed', 'start': 7965.713, 'weight': 2, 'content': [{'end': 7970.496, 'text': 'so in this case token is null by default in the beginning, So awesome.', 'start': 7965.713, 'duration': 4.783}, {'end': 7973.017, 'text': 'So we actually have that set up and everything working.', 'start': 7970.976, 'duration': 2.041}, {'end': 7976.799, 'text': 'What we can do here, guys, is this is what I mentioned before.', 'start': 7973.937, 'duration': 2.862}, {'end': 7979.44, 'text': "So firstly, what we're going to do is we're going to just test that this works.", 'start': 7976.859, 'duration': 2.581}, {'end': 7981.741, 'text': "So I'm going to go ahead and do this.", 'start': 7980.08, 'duration': 1.661}, {'end': 7990.319, 'text': "I'm going to say console.log And I'm going to say like this, just say like, let's just say alien is our token token.", 'start': 7981.801, 'duration': 8.518}, {'end': 7991.419, 'text': 'There we go.', 'start': 7990.439, 'duration': 0.98}], 'summary': "Setting up and testing token functionality, 'alien' is used as a sample token.", 'duration': 25.706, 'max_score': 7965.713, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_87965713.jpg'}, {'end': 8156.333, 'src': 'embed', 'start': 8126.456, 'weight': 1, 'content': [{'end': 8130.22, 'text': "I'm saying set that exact same one and pass it as prop.", 'start': 8126.456, 'duration': 3.764}, {'end': 8134.606, 'text': "This is an example of a way where you could do it in a data layer, but I'm going to do it here just to show you both ways.", 'start': 8130.24, 'duration': 4.366}, {'end': 8138.19, 'text': "So that way it's very clear as to what you can do inside of React, okay?", 'start': 8135.106, 'duration': 3.084}, {'end': 8146.79, 'text': "so now, inside a player, whenever you have code, whenever you have code, that's pretty much going like more than 70 characters or whatever.", 'start': 8138.968, 'duration': 7.822}, {'end': 8151.372, 'text': 'like when it gets to a long line, just give me a little shout out.', 'start': 8146.79, 'duration': 4.582}, {'end': 8156.333, 'text': "um, so i can expand and show, just so the viewers don't actually miss it.", 'start': 8151.372, 'duration': 4.961}], 'summary': 'Demonstrating two ways to handle data in react, emphasizing clarity and code length.', 'duration': 29.877, 'max_score': 8126.456, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_88126456.jpg'}, {'end': 8693.993, 'src': 'embed', 'start': 8671.152, 'weight': 3, 'content': [{'end': 8679.178, 'text': "now we have this perfect responsive design where it's going to constantly sort of adjust and change size based on, um, what the values are.", 'start': 8671.152, 'duration': 8.026}, {'end': 8682.446, 'text': 'so we have the sidebar and we have the body Awesome.', 'start': 8679.178, 'duration': 3.268}, {'end': 8685.828, 'text': 'So we have those two things in place.', 'start': 8682.486, 'duration': 3.342}, {'end': 8688.39, 'text': "Now what we're going to do is we're going to have the footer.", 'start': 8685.868, 'duration': 2.522}, {'end': 8693.993, 'text': "So I'm going to go inside the player, and at the bottom, I'm going to say footer, and I'm going to do this.", 'start': 8688.41, 'duration': 5.583}], 'summary': 'Responsive design adjusts based on values. sidebar, body, footer in place.', 'duration': 22.841, 'max_score': 8671.152, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_88671152.jpg'}, {'end': 8773.646, 'src': 'embed', 'start': 8740.782, 'weight': 8, 'content': [{'end': 8743.724, 'text': "Now we'll create that photo CSS.", 'start': 8740.782, 'duration': 2.942}, {'end': 8745.466, 'text': 'So footer dot CSS.', 'start': 8743.765, 'duration': 1.701}, {'end': 8747.568, 'text': 'Boom Awesome.', 'start': 8745.546, 'duration': 2.022}, {'end': 8751.251, 'text': "So you can see we had a lot of prep work to get up and running guys, but it's worth it.", 'start': 8747.868, 'duration': 3.383}, {'end': 8756.075, 'text': 'And the reason why BEM is going to make our life easy now is because styling things is super simple.', 'start': 8751.511, 'duration': 4.564}, {'end': 8758.537, 'text': 'We just pretty much go here and we say footer.', 'start': 8756.595, 'duration': 1.942}, {'end': 8762.02, 'text': "In this case, I'm going to just say the footer should be fixed.", 'start': 8759.237, 'duration': 2.783}, {'end': 8766.043, 'text': 'It should say position should be fixed to the bottom of the screen.', 'start': 8762.28, 'duration': 3.763}, {'end': 8767.124, 'text': 'So position fixed.', 'start': 8766.063, 'duration': 1.061}, {'end': 8773.646, 'text': "And then I'm going to say, let's go ahead and give the bottom zero.", 'start': 8767.819, 'duration': 5.827}], 'summary': 'Using bem css, created a fixed footer with position: fixed and bottom: 0.', 'duration': 32.864, 'max_score': 8740.782, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_88740782.jpg'}, {'end': 9360.804, 'src': 'embed', 'start': 9329.738, 'weight': 0, 'content': [{'end': 9332.099, 'text': 'So I stripped that out for simplicity for the build.', 'start': 9329.738, 'duration': 2.361}, {'end': 9334.981, 'text': 'But for the rest of it, we have everything.', 'start': 9333.06, 'duration': 1.921}, {'end': 9341.386, 'text': "So what I'm going to go ahead and do is create a component called sidebar option.js.", 'start': 9335.061, 'duration': 6.325}, {'end': 9342.746, 'text': 'Oops, I done .', 'start': 9341.546, 'duration': 1.2}, {'end': 9345.829, 'text': 'js So that one should be .', 'start': 9342.746, 'duration': 3.083}, {'end': 9349.651, 'text': 'js There we go.', 'start': 9345.829, 'duration': 3.822}, {'end': 9353.314, 'text': "And then what we'll do is rfce.", 'start': 9351.653, 'duration': 1.661}, {'end': 9355.858, 'text': 'There we go.', 'start': 9355.538, 'duration': 0.32}, {'end': 9360.804, 'text': "And then inside of sidebar option now, what I'm going to do is I'm going to basically have the following.", 'start': 9356.419, 'duration': 4.385}], 'summary': 'Stripped out unnecessary components, created sidebar option.js, and added rfce.', 'duration': 31.066, 'max_score': 9329.738, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_89329738.jpg'}, {'end': 9601.358, 'src': 'embed', 'start': 9573.582, 'weight': 4, 'content': [{'end': 9578.786, 'text': "So every time we sort of have, I'm going to do a 200 millisecond delay on the color animation.", 'start': 9573.582, 'duration': 5.204}, {'end': 9586.005, 'text': 'So now, if I save it, Kazi, do you just want to highlight over home search and your library with the mouse?', 'start': 9578.826, 'duration': 7.179}, {'end': 9591.429, 'text': "Notice how it's going to be a finger and it's also going to have like a slight animation with the color.", 'start': 9586.145, 'duration': 5.284}, {'end': 9594.292, 'text': 'That finger is happening because of this cursor pointer.', 'start': 9591.489, 'duration': 2.803}, {'end': 9601.358, 'text': 'Yeah And then the color is going to white because of the side option hover.', 'start': 9595.413, 'duration': 5.945}], 'summary': '200 millisecond delay adds color animation with finger cursor and slight color change.', 'duration': 27.776, 'max_score': 9573.582, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_89573582.jpg'}, {'end': 10260.723, 'src': 'embed', 'start': 10217.907, 'weight': 6, 'content': [{'end': 10219.868, 'text': 'Sunny and I are going to be actually talking about that.', 'start': 10217.907, 'duration': 1.961}, {'end': 10228.255, 'text': "So if you're interested, even mildly curious, then definitely make sure that for tomorrow, August 4th, schedule that in to your calendar.", 'start': 10219.908, 'duration': 8.347}, {'end': 10236.721, 'text': 'So set an alarm on your phone or just pop it into your calendar and show up at 10.15 a.m. Los Angeles time.', 'start': 10228.295, 'duration': 8.426}, {'end': 10239.944, 'text': 'Tomorrow, August 4th, Tuesday.', 'start': 10237.802, 'duration': 2.142}, {'end': 10242.355, 'text': 'Yeah, exactly.', 'start': 10241.215, 'duration': 1.14}, {'end': 10243.976, 'text': 'Be there, guys.', 'start': 10243.416, 'duration': 0.56}, {'end': 10248.918, 'text': "If you're interested in Bootstrap and design and how things are laid out, very good for beginners,", 'start': 10244.076, 'duration': 4.842}, {'end': 10253.74, 'text': "especially if you're using Bootstrap and getting projects off the ground, especially if you're doing freelance work.", 'start': 10248.918, 'duration': 4.822}, {'end': 10255.761, 'text': "It's actually quite handy sometimes in Bootstrap.", 'start': 10253.78, 'duration': 1.981}, {'end': 10260.723, 'text': 'Because sometimes you might get a job and they might be using Bootstrap and React or whatever, right?', 'start': 10256.321, 'duration': 4.402}], 'summary': 'Join the bootstrap and design discussion on august 4th at 10.15 a.m. los angeles time for beginners and freelancers.', 'duration': 42.816, 'max_score': 10217.907, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_810217907.jpg'}, {'end': 10480.943, 'src': 'embed', 'start': 10452.873, 'weight': 5, 'content': [{'end': 10456.136, 'text': "So now before we do that, I'm going to say target the P tags.", 'start': 10452.873, 'duration': 3.263}, {'end': 10460.82, 'text': "I'm going to say give it a margin top, margin left, and a font size of slightly less.", 'start': 10456.156, 'duration': 4.664}, {'end': 10462.462, 'text': 'So if I save that.', 'start': 10461.461, 'duration': 1.001}, {'end': 10464.679, 'text': 'There you go.', 'start': 10464.179, 'duration': 0.5}, {'end': 10472.081, 'text': 'It comes in a lot more like a actual playlist that we would see on Spotify.', 'start': 10464.719, 'duration': 7.362}, {'end': 10472.481, 'text': "That's nice.", 'start': 10472.101, 'duration': 0.38}, {'end': 10473.501, 'text': 'The styling is all done.', 'start': 10472.521, 'duration': 0.98}, {'end': 10476.122, 'text': 'Styling for the sidebar is done, which is awesome.', 'start': 10474.121, 'duration': 2.001}, {'end': 10480.943, 'text': "What we're going to do now is rather than have it hard-coded here, I want to pull these values.", 'start': 10476.622, 'duration': 4.321}], 'summary': 'Styling the p tags with margin and font size for a spotify-like playlist.', 'duration': 28.07, 'max_score': 10452.873, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_810452873.jpg'}], 'start': 7734.441, 'title': 'Implementing spotify login, building player, and improving design', 'summary': 'Covers implementing spotify login and token storage, building the spotify player layout, and enhancing sidebar design with reusable components. it also details installing material ui icons and discusses bootstrap 5 benefits, limitations, and sidebar styling with positive feedback.', 'chapters': [{'end': 8170.631, 'start': 7734.441, 'title': 'Implementing spotify login and token storage', 'summary': 'Discusses implementing spotify login and token storage, including dispatching actions, setting up listeners and reducers, and testing the functionality, concluding with a demonstration of passing data through props in react.', 'duration': 436.19, 'highlights': ['Implementing Spotify login and token storage The chapter discusses the implementation of Spotify login and token storage, including dispatching actions, setting up listeners and reducers, and testing the functionality.', 'Demonstration of passing data through props in React A clear demonstration of passing data through props in React was provided to show both ways of utilizing the data layer, providing a comprehensive understanding of implementation inside of React.', 'Testing the functionality of login and token storage The functionality of login and token storage was thoroughly tested, including the process of dispatching actions, setting listeners, and reducers to ensure effective implementation.']}, {'end': 9220.901, 'start': 8170.631, 'title': 'Building spotify player', 'summary': 'Focuses on building the spotify player layout by creating components for the sidebar, body, and footer, applying bem naming convention, implementing css styling, and optimizing the layout for responsive design.', 'duration': 1050.27, 'highlights': ['Creating components for sidebar, body, and footer The speaker outlines the process of creating the sidebar, body, and footer components for the Spotify player layout.', 'Applying BEM naming convention and CSS styling The speaker emphasizes the use of BEM naming convention and demonstrates the application of CSS styling for the components to achieve the desired layout.', 'Optimizing layout for responsive design The speaker explains the process of optimizing the layout for responsive design by using flexbox and setting specific dimensions for the components.']}, {'end': 9632.895, 'start': 9222.802, 'title': 'Improving sidebar design with reusable components', 'summary': "Discusses enhancing the sidebar design by creating a reusable component called 'sidebar option.js', allowing for dynamic rendering of options and applying styling for improved user experience and aesthetics, leading to a cleaner and more uniform appearance resembling the actual spotify interface.", 'duration': 410.093, 'highlights': ["Creating a reusable 'sidebar option.js' component to dynamically render options The chapter outlines the creation of a reusable component called 'sidebar option.js' to dynamically render options such as home, search, and your library, allowing for flexibility and scalability in adding new options.", "Applying styling to improve user experience and aesthetics The discussion includes applying styling to the 'sidebar option' component, such as setting a height of 40 pixels and changing the cursor type to a pointer for improved user experience and aesthetics.", 'Implementing color animation on hover for user interaction The chapter details the implementation of a 200 millisecond delay color animation on hover, enhancing user interaction and providing a subtle and clean visual effect for improved user experience.']}, {'end': 10243.976, 'start': 9633.356, 'title': 'Installing material ui icons for web development', 'summary': 'Details the process of installing material ui icons using npm, obtaining and implementing specific icons, and styling them using flexbox and css. it also mentions an upcoming training session on bootstrap 5 scheduled for august 4th at 10:15 a.m. los angeles time.', 'duration': 610.62, 'highlights': ['The chapter details the process of installing Material UI icons using NPM, obtaining and implementing specific icons, and styling them using flexbox and CSS. The transcript provides a step-by-step guide on installing Material UI icons using NPM, obtaining specific icons like home, search, and library music, and implementing them in the web development project. It also includes instructions for styling the icons using flexbox and CSS.', 'Mentions an upcoming training session on Bootstrap 5 scheduled for August 4th at 10:15 a.m. Los Angeles time. The chapter mentions an upcoming training session on Bootstrap 5, inviting the audience to join the session scheduled for August 4th at 10:15 a.m. Los Angeles time to learn about CSS, design, and the newest release of Bootstrap.']}, {'end': 10595.446, 'start': 10244.076, 'title': 'Bootstrap 5 and sidebar styling', 'summary': 'Discusses the benefits of bootstrap for beginners, its limitations with flexbox and grid, and the implementation of a clean sidebar design with playlists using css and spotify api, attracting over a thousand views and positive feedback.', 'duration': 351.37, 'highlights': ['Bootstrap benefits for beginners and project turnaround time Bootstrap is handy for beginners to quickly start projects and is good for quick turnaround time.', 'Bootstrap limitations with Flexbox and Grid Bootstrap restricts the use of Flexbox and Grid, causing conflicts and limitations in design implementation.', 'Implementation of clean sidebar design with playlists using CSS and Spotify API The transcript details the step-by-step implementation of a clean sidebar design with playlists using CSS and Spotify API, demonstrating the dynamic rendering of user playlists.', 'Attracting over a thousand views and positive feedback The sidebar styling implementation attracted over a thousand views and positive feedback, indicating its popularity and effectiveness.']}], 'duration': 2861.005, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_87734441.jpg', 'highlights': ["Creating a reusable 'sidebar option.js' component to dynamically render options", 'Demonstration of passing data through props in React', 'Testing the functionality of login and token storage', 'Optimizing layout for responsive design', 'Implementing color animation on hover for user interaction', 'Implementation of clean sidebar design with playlists using CSS and Spotify API', 'Mentions an upcoming training session on Bootstrap 5 scheduled for August 4th at 10:15 a.m. Los Angeles time', 'Bootstrap benefits for beginners and project turnaround time', 'Applying BEM naming convention and CSS styling', 'Applying styling to improve user experience and aesthetics']}, {'end': 12617.811, 'segs': [{'end': 10672.257, 'src': 'embed', 'start': 10643.594, 'weight': 0, 'content': [{'end': 10647.683, 'text': "so i'm going to go here and i'm going to say const playlists.", 'start': 10643.594, 'duration': 4.089}, {'end': 10652.586, 'text': "And when this is where we pull from the data layer, and then remember, I've changed it slightly.", 'start': 10648.143, 'duration': 4.443}, {'end': 10655.348, 'text': "So it's no longer use state value is use data layer value.", 'start': 10652.626, 'duration': 2.722}, {'end': 10657.47, 'text': 'So use a data layer value.', 'start': 10655.368, 'duration': 2.102}, {'end': 10664.696, 'text': 'And to import the that correctly, we need to go up and we need to go ahead and pull the following in.', 'start': 10657.87, 'duration': 6.826}, {'end': 10669.074, 'text': 'So Use data layer value from data layer.', 'start': 10664.736, 'duration': 4.338}, {'end': 10672.257, 'text': "So we're pulling out the playlists at this point.", 'start': 10669.675, 'duration': 2.582}], 'summary': 'Code modification to use data layer value instead of state value for importing playlists.', 'duration': 28.663, 'max_score': 10643.594, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_810643594.jpg'}, {'end': 10760.287, 'src': 'embed', 'start': 10714.163, 'weight': 3, 'content': [{'end': 10716.444, 'text': "we're using optional chaining to protect it against,", 'start': 10714.163, 'duration': 2.281}, {'end': 10726.829, 'text': 'in case the playlist was empty for whatever reason go inside and basically they the object that was returned has something called items inside of it.', 'start': 10716.444, 'duration': 10.385}, {'end': 10730.551, 'text': 'because I console logged and I checked it has items inside of it.', 'start': 10726.829, 'duration': 3.722}, {'end': 10739.337, 'text': "what I'm doing is I'm mapping through it and I'm saying for every single playlist, because each item in that array is a playlist,", 'start': 10730.551, 'duration': 8.786}, {'end': 10743.519, 'text': 'go ahead and return sidebar option.', 'start': 10739.337, 'duration': 4.182}, {'end': 10744.6, 'text': 'so sidebar option.', 'start': 10743.519, 'duration': 1.081}, {'end': 10758.646, 'text': 'but instead of hard coding the value, the title now is going to be playlist dot name right, which is inside of inside of each of these uh, items.', 'start': 10744.6, 'duration': 14.046}, {'end': 10760.287, 'text': 'it actually has an attribute called name.', 'start': 10758.646, 'duration': 1.641}], 'summary': 'Using optional chaining to map through each playlist and display its name.', 'duration': 46.124, 'max_score': 10714.163, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_810714163.jpg'}, {'end': 11013.085, 'src': 'embed', 'start': 10983.341, 'weight': 5, 'content': [{'end': 10984.401, 'text': 'Oh, what is this happening? Okay.', 'start': 10983.341, 'duration': 1.06}, {'end': 10986.223, 'text': 'Footer center.', 'start': 10984.682, 'duration': 1.541}, {'end': 10991.506, 'text': 'And then the final one is div footer right.', 'start': 10986.743, 'duration': 4.763}, {'end': 10993.207, 'text': 'There we go.', 'start': 10992.987, 'duration': 0.22}, {'end': 10998.871, 'text': "Yeah So these are going to be three containers, and then we're going to use Flexbox to equally space them out.", 'start': 10993.227, 'duration': 5.644}, {'end': 10999.531, 'text': 'All right.', 'start': 10998.891, 'duration': 0.64}, {'end': 11004.161, 'text': 'So the first one is going to be for the album.', 'start': 11000.72, 'duration': 3.441}, {'end': 11010.144, 'text': "So it's going to on the left side we're going to have the album and song details right?", 'start': 11004.201, 'duration': 5.943}, {'end': 11013.085, 'text': "In the middle we're going to have the player.", 'start': 11010.604, 'duration': 2.481}], 'summary': 'Using flexbox to equally space three containers: album, song details, and player.', 'duration': 29.744, 'max_score': 10983.341, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_810983341.jpg'}, {'end': 11061.693, 'src': 'embed', 'start': 11034.34, 'weight': 6, 'content': [{'end': 11038.727, 'text': "And now what I'm going to do is I'm going to go to the footer and I'm going to do the following.", 'start': 11034.34, 'duration': 4.387}, {'end': 11043.614, 'text': "I'm going to say footer.css and I'm going to say display flex.", 'start': 11038.747, 'duration': 4.867}, {'end': 11045.878, 'text': 'Display flex.', 'start': 11045.056, 'duration': 0.822}, {'end': 11047.986, 'text': 'and justify the content.', 'start': 11046.485, 'duration': 1.501}, {'end': 11050.287, 'text': 'So space the content around itself.', 'start': 11048.026, 'duration': 2.261}, {'end': 11055.289, 'text': 'So space it between, so have each of these things spaced evenly between themselves.', 'start': 11050.727, 'duration': 4.562}, {'end': 11061.693, 'text': "So as soon as I do that now you can see that it's a properly sort of set itself up in that manner, right?", 'start': 11055.85, 'duration': 5.843}], 'summary': 'Setting footer display to flex, justifying content for even spacing.', 'duration': 27.353, 'max_score': 11034.34, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_811034340.jpg'}, {'end': 11929.185, 'src': 'embed', 'start': 11905.932, 'weight': 9, 'content': [{'end': 11914.34, 'text': "our number one thing is if you guys can get a job from this material that we're putting out for free on youtube, our goal is accomplished.", 'start': 11905.932, 'duration': 8.408}, {'end': 11915.721, 'text': 'yeah, exactly like.', 'start': 11914.34, 'duration': 1.381}, {'end': 11917.642, 'text': 'that is a huge thing, guys.', 'start': 11915.721, 'duration': 1.921}, {'end': 11923.728, 'text': 'when we hear people get jobs from, it really does take us away when that happens, nice.', 'start': 11917.642, 'duration': 6.086}, {'end': 11929.185, 'text': "So what I'm going to do now is I want to target all of the icons with a hover effect right?", 'start': 11924.403, 'duration': 4.782}], 'summary': 'The goal is to help viewers secure jobs through free youtube material.', 'duration': 23.253, 'max_score': 11905.932, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_811905932.jpg'}, {'end': 12078.193, 'src': 'embed', 'start': 12052.042, 'weight': 4, 'content': [{'end': 12057.565, 'text': 'So the body is, so we just finished the footer functionally getting things to play and things like that.', 'start': 12052.042, 'duration': 5.523}, {'end': 12063.669, 'text': "We're going to focus on once we get the body done, but let's keep the pace up and keep smashing out the components.", 'start': 12057.585, 'duration': 6.084}, {'end': 12069.952, 'text': "So the body is the last bit that we're going to do to get it looking crisp and looking a lot more like Spotify, Spotify.", 'start': 12063.729, 'duration': 6.223}, {'end': 12071.313, 'text': 'Hey, damn.', 'start': 12070.473, 'duration': 0.84}, {'end': 12074.675, 'text': "So we're now done with the footer, right? Yup.", 'start': 12071.853, 'duration': 2.822}, {'end': 12078.193, 'text': 'Hey, let me play my DJ air horns.', 'start': 12076.272, 'duration': 1.921}], 'summary': 'Finished footer, now focusing on body to achieve spotify look.', 'duration': 26.151, 'max_score': 12052.042, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_812052042.jpg'}, {'end': 12435.021, 'src': 'embed', 'start': 12406.519, 'weight': 1, 'content': [{'end': 12410.301, 'text': "We're working on the Spotify header, and then we're going to move on to the body.", 'start': 12406.519, 'duration': 3.782}, {'end': 12414.163, 'text': "And then at the end, you're going to just have this beautiful app.", 'start': 12410.801, 'duration': 3.362}, {'end': 12416.384, 'text': "Yeah, that's it.", 'start': 12415.384, 'duration': 1}, {'end': 12421.467, 'text': "Nice So guys, the header right is what we're on next.", 'start': 12417.104, 'duration': 4.363}, {'end': 12425.929, 'text': "So here, what we're going to have is literally, it's just going to be a H4 with the name.", 'start': 12421.527, 'duration': 4.402}, {'end': 12427.911, 'text': "So in this case, it's going to be the user's name.", 'start': 12426.05, 'duration': 1.861}, {'end': 12430.232, 'text': "So let's just put Rafi Qazi for now.", 'start': 12428.011, 'duration': 2.221}, {'end': 12432.68, 'text': "Then we're going to have an avatar.", 'start': 12431.099, 'duration': 1.581}, {'end': 12435.021, 'text': 'So in Material UI, they allow you to have an avatar.', 'start': 12432.7, 'duration': 2.321}], 'summary': "Developing spotify app with header and user's name, using material ui for avatar.", 'duration': 28.502, 'max_score': 12406.519, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_812406519.jpg'}], 'start': 10596.647, 'title': 'Spotify app development', 'summary': 'Involves populating the data layer with playlists, debugging and improving the spotify app, styling the footer and icons, customizing the music player ui, and building spotify clone components to achieve a visually appealing user interface for the application, with a focus on job placements through free educational content.', 'chapters': [{'end': 10760.287, 'start': 10596.647, 'title': 'Populating data layer with playlists', 'summary': 'Explains how to populate the data layer with playlists, utilizing the use of data layer values and optional chaining to handle empty playlists, resulting in the generation of sidebar options with playlist names.', 'duration': 163.64, 'highlights': ['Utilizing use data layer value to pull playlists from the data layer, allowing for dynamic population of the sidebar with relevant playlists.', 'Implementing optional chaining to protect against empty playlists, ensuring the proper rendering of playlist names within the sidebar options.', 'Mapping through the playlists and returning sidebar options for each playlist, thereby dynamically generating the sidebar content based on the populated playlists.']}, {'end': 11033.859, 'start': 10760.287, 'title': 'Spotify app development', 'summary': 'Involves debugging and improving the spotify app, including fixing bugs, implementing features, and styling the footer section.', 'duration': 273.572, 'highlights': ['The chapter involves debugging and improving the Spotify app The speaker discusses the process of debugging and improving the Spotify app throughout the chapter.', "Fixing bugs and testing the app functionality The speaker highlights the process of identifying and fixing bugs, testing the app's functionality, and ensuring a seamless user experience.", 'Styling the footer section using Flexbox for three containers The speaker explains the process of styling the footer section by using Flexbox to create three containers for album and song details, player controls, and volume controls.', 'Implementing features like player controls and volume controls The speaker mentions implementing features such as player controls and volume controls to enhance the functionality and user experience of the Spotify app.']}, {'end': 11380.641, 'start': 11034.34, 'title': 'Styling footer and icons', 'summary': 'Discusses styling the footer, including setting the display flex, justifying content, and adjusting widths, as well as importing and arranging icons with specific class names and styles.', 'duration': 346.301, 'highlights': ['Setting display flex for footer and justifying content to space evenly The speaker sets the footer to display flex and justifies the content to space evenly, ensuring proper alignment and layout.', 'Adjusting widths to ensure proper layout The speaker adjusts the width of the footer to 97% to fit all contents inside properly, avoiding a cut-off display.', 'Importing and arranging icons with specific class names and styles The speaker imports and arranges icons with specific class names and styles, such as footer green and font size large, to achieve the desired layout and appearance.']}, {'end': 11859.729, 'start': 11381.121, 'title': 'Customizing music player ui', 'summary': 'Details the process of customizing the music player ui, including justifying play button spaces, setting a max width of 300 pixels, aligning playlist icons and sliders, styling album and song details, and adding custom colors to elements.', 'duration': 478.608, 'highlights': ['Setting a max width of 300 pixels for play buttons The speaker sets a max width of 300 pixels for play buttons to prevent them from spreading out excessively, ensuring a clean and controlled layout.', 'Aligning playlist icons and sliders using Material UI grid The speaker explains the use of Material UI grid for aligning playlist icons and sliders, resolving sizing issues and ensuring correct alignment within the layout.', 'Styling album and song details with flex display and custom dimensions The process involves styling album and song details by using flex display, setting a max width of 300 pixels to prevent overflow, and applying custom dimensions to maintain layout consistency.', 'Customizing colors to match the Spotify app on Mac The speaker adds custom colors to elements, such as the shuffle icon, to match the Spotify app on Mac, ensuring design consistency and user familiarity.']}, {'end': 12617.811, 'start': 11859.769, 'title': 'Building spotify clone components', 'summary': 'Demonstrates building various components for a spotify clone, including applying styles, handling hover effects, and structuring the header component, with a goal of achieving a practical and visually appealing user interface for the application, with a focus on achieving job placements through the free educational content.', 'duration': 758.042, 'highlights': ['The chapter demonstrates building various components for a Spotify clone, including applying styles, handling hover effects, and structuring the header component. The transcript includes discussions on applying styles to components, implementing hover effects, and structuring the header component for a Spotify clone.', 'The goal is to achieve a practical and visually appealing user interface for the application. The speakers aim to create a visually appealing and functional user interface for the Spotify clone, emphasizing the significance of achieving an attractive design.', 'The focus is on achieving job placements through the free educational content. The speakers express their goal of helping individuals secure jobs by providing free educational content on platforms like YouTube, highlighting the impact of their efforts on career development.']}], 'duration': 2021.164, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_810596647.jpg', 'highlights': ['Utilizing use data layer value to pull playlists from the data layer, allowing for dynamic population of the sidebar with relevant playlists.', 'The chapter involves debugging and improving the Spotify app The speaker discusses the process of debugging and improving the Spotify app throughout the chapter.', 'The chapter demonstrates building various components for a Spotify clone, including applying styles, handling hover effects, and structuring the header component. The transcript includes discussions on applying styles to components, implementing hover effects, and structuring the header component for a Spotify clone.', 'Implementing optional chaining to protect against empty playlists, ensuring the proper rendering of playlist names within the sidebar options.', "Fixing bugs and testing the app functionality The speaker highlights the process of identifying and fixing bugs, testing the app's functionality, and ensuring a seamless user experience.", 'Styling the footer section using Flexbox for three containers The speaker explains the process of styling the footer section by using Flexbox to create three containers for album and song details, player controls, and volume controls.', 'Setting display flex for footer and justifying content to space evenly The speaker sets the footer to display flex and justifies the content to space evenly, ensuring proper alignment and layout.', 'The goal is to achieve a practical and visually appealing user interface for the application. The speakers aim to create a visually appealing and functional user interface for the Spotify clone, emphasizing the significance of achieving an attractive design.', 'Mapping through the playlists and returning sidebar options for each playlist, thereby dynamically generating the sidebar content based on the populated playlists.', 'The focus is on achieving job placements through the free educational content. The speakers express their goal of helping individuals secure jobs by providing free educational content on platforms like YouTube, highlighting the impact of their efforts on career development.']}, {'end': 13556.108, 'segs': [{'end': 12645.525, 'src': 'embed', 'start': 12618.672, 'weight': 1, 'content': [{'end': 12621.995, 'text': "We are going to add a 10-pixel padding because right now it's too bunched up.", 'start': 12618.672, 'duration': 3.323}, {'end': 12625.519, 'text': 'Everything is kind of dialed in next to each other, so it looks a bit horrible.', 'start': 12622.175, 'duration': 3.344}, {'end': 12628.242, 'text': 'And then that.', 'start': 12627.381, 'duration': 0.861}, {'end': 12631.169, 'text': 'ugly sort of border around the input.', 'start': 12628.906, 'duration': 2.263}, {'end': 12637.715, 'text': 'for to get rid of that, what you do is you say target the header left, the direct child, which is an input, give it a border of none,', 'start': 12631.169, 'duration': 6.546}, {'end': 12640.141, 'text': 'but keep the width of 100 All right.', 'start': 12637.715, 'duration': 2.426}, {'end': 12643.463, 'text': "so if I do that now, what you'll see is it gets rid of that right?", 'start': 12640.141, 'duration': 3.322}, {'end': 12645.525, 'text': 'So it looks kind of a lot cleaner at that point.', 'start': 12643.483, 'duration': 2.042}], 'summary': 'Adding 10-pixel padding to declutter and remove ugly input border, resulting in a cleaner look.', 'duration': 26.853, 'max_score': 12618.672, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_812618672.jpg'}, {'end': 12833.526, 'src': 'embed', 'start': 12803.318, 'weight': 2, 'content': [{'end': 12805.48, 'text': "Exactly So here we're going to say use data layer.", 'start': 12803.318, 'duration': 2.162}, {'end': 12809.436, 'text': "value, and then here I'm going to basically go ahead and pull that in.", 'start': 12806.175, 'duration': 3.261}, {'end': 12818.02, 'text': "so I'm going to go ahead and say import, and then this was data layer value, so data layer value like that.", 'start': 12809.436, 'duration': 8.584}, {'end': 12825.243, 'text': "and now what I'm going to go ahead and do is say, instead of saying rafikazi, here I'm going to say go ahead and get the user's display name,", 'start': 12818.02, 'duration': 7.223}, {'end': 12829.284, 'text': "because that's the property that comes back with the user and we're using optional chaining,", 'start': 12825.243, 'duration': 4.041}, {'end': 12833.526, 'text': "so it doesn't break if it's ever loading or if there isn't a display name for whatever reason.", 'start': 12829.284, 'duration': 4.242}], 'summary': "Using data layer value to import and display user's name.", 'duration': 30.208, 'max_score': 12803.318, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_812803318.jpg'}, {'end': 13496.692, 'src': 'embed', 'start': 13469.716, 'weight': 0, 'content': [{'end': 13476.14, 'text': "And basically, what's going to happen here, guys, is to get your Discover Weekly feed.", 'start': 13469.716, 'duration': 6.424}, {'end': 13477.981, 'text': 'all you need to do is go to your Spotify.', 'start': 13476.14, 'duration': 1.841}, {'end': 13480.883, 'text': "So, Kazi, let's use your one as an example.", 'start': 13478.201, 'duration': 2.682}, {'end': 13489.448, 'text': "So, log into your Spotify on the web browser, and you'll see in your Discover Weekly, so you'll search for Discover Weekly.", 'start': 13481.363, 'duration': 8.085}, {'end': 13490.949, 'text': 'Wait, hold on.', 'start': 13490.048, 'duration': 0.901}, {'end': 13496.692, 'text': 'What do you want me to do? Which Spotify? The real Spotify or our app? Yeah, the real one.', 'start': 13490.969, 'duration': 5.723}], 'summary': 'To access discover weekly on spotify, log in via web browser and search for discover weekly.', 'duration': 26.976, 'max_score': 13469.716, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_813469716.jpg'}], 'start': 12618.672, 'title': 'Design and implementation of desktop app features', 'summary': 'Covers styling the header with 10-pixel padding, removing borders, and setting widths for a desktop app, using the data layer to fetch and display user information with optional chaining, and building the weekly discovery feed on spotify including banner, playlist description, and responsive design.', 'chapters': [{'end': 12783.523, 'start': 12618.672, 'title': 'Styling header for desktop app', 'summary': 'Focuses on styling the header for a desktop app, adding 10-pixel padding, removing borders, setting widths, and optimizing responsiveness.', 'duration': 164.851, 'highlights': ['The chapter focuses on styling the header for a desktop app, adding 10-pixel padding, removing borders, setting widths, and optimizing responsiveness.', 'Setting the input field border to none and 100% width results in a cleaner look and improved user experience.', 'Adjusting the size and responsiveness of header elements ensures a more visually appealing and user-friendly layout.', 'Implementing a minimum width of 70 pixels for the header prevents it from becoming too small and ensures a better user experience.']}, {'end': 12935.825, 'start': 12783.543, 'title': 'Using data layer to display user information', 'summary': "Discusses the use of data layer to fetch and display a user's actual name and image, including utilizing optional chaining to handle loading states and presenting alternate tags when necessary. it also outlines the efficient coding approach and successful implementation of fetching and displaying the user's information.", 'duration': 152.282, 'highlights': ["The chapter highlights the use of data layer to fetch a user's display name and image URL, ensuring efficient coding and handling of loading states.", "It emphasizes the successful implementation of fetching and displaying the user's information, showcasing the user's actual name and image from Spotify.", 'The discussion includes the utilization of optional chaining to handle loading states and present alternate tags when necessary.']}, {'end': 13556.108, 'start': 12935.865, 'title': 'Building weekly discovery feed', 'summary': 'Involves building the weekly discovery feed on spotify, including the banner, playlist description, and styling using styled components, with a focus on responsive design and dynamic content fetching from the real spotify. the chapter also discusses the subscription milestones and future content plans for the channel.', 'duration': 620.243, 'highlights': ['The chapter involves building the weekly discovery feed on Spotify, including the banner, playlist description, and styling using styled components. The discussion focuses on creating the banner, playlist description, and styling using styled components to build the weekly discovery feed on Spotify.', 'The chapter also discusses the subscription milestones and future content plans for the channel. The chapter addresses the subscription milestone of 30,000 views, encourages viewer engagement, and outlines future content plans for the channel, including Twitter, Uber, Twitch, LinkedIn, and Facebook clone builds.', "The chapter includes a detailed explanation of fetching dynamic content from the real Spotify and implementing responsive design. The chapter provides a detailed explanation of fetching dynamic content from the real Spotify, including the process of accessing Discover Weekly feed, and emphasizes responsive design for the app's components."]}], 'duration': 937.436, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_812618672.jpg', 'highlights': ['The chapter involves building the weekly discovery feed on Spotify, including the banner, playlist description, and styling using styled components.', 'The chapter focuses on styling the header for a desktop app, adding 10-pixel padding, removing borders, setting widths, and optimizing responsiveness.', "The chapter highlights the use of data layer to fetch a user's display name and image URL, ensuring efficient coding and handling of loading states."]}, {'end': 14271.28, 'segs': [{'end': 13635.596, 'src': 'embed', 'start': 13607.055, 'weight': 0, 'content': [{'end': 13613.118, 'text': "What I'm going to do here is I'm going to dispatch an action to say set discover weekly.", 'start': 13607.055, 'duration': 6.063}, {'end': 13616.6, 'text': "This is what it's going to do, set discover weekly.", 'start': 13613.138, 'duration': 3.462}, {'end': 13625.047, 'text': "Now what I'm going to do is basically getting the response and putting it inside of a size of the the state in the data layer called discover weekly.", 'start': 13616.66, 'duration': 8.387}, {'end': 13635.596, 'text': 'so we need to go into our reducer and we need to basically go case set, discover weekly return,', 'start': 13625.047, 'duration': 10.549}], 'summary': 'Dispatch action to set discover weekly and update state in reducer.', 'duration': 28.541, 'max_score': 13607.055, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_813607055.jpg'}, {'end': 13804.328, 'src': 'embed', 'start': 13778.302, 'weight': 1, 'content': [{'end': 13787.84, 'text': "so here i'm going to say discover weekly images, zero url, And that will go ahead and it will pull the one that we get for whoever is logged in.", 'start': 13778.302, 'duration': 9.538}, {'end': 13792.302, 'text': 'So if it was Qazi, it would be a picture of Qazi with the Discover Weekly image behind him.', 'start': 13787.9, 'duration': 4.402}, {'end': 13795.784, 'text': "Awesome So that's clean.", 'start': 13793.463, 'duration': 2.321}, {'end': 13797.805, 'text': "And that's why at the moment it's empty.", 'start': 13795.864, 'duration': 1.941}, {'end': 13804.328, 'text': "Because remember, like, it's not going to show at this point until we do the correct logging in.", 'start': 13798.245, 'duration': 6.083}], 'summary': 'The discover weekly images are not displayed until the correct logging in is done.', 'duration': 26.026, 'max_score': 13778.302, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_813778302.jpg'}, {'end': 13879.459, 'src': 'embed', 'start': 13852.481, 'weight': 2, 'content': [{'end': 13858.485, 'text': 'guys, you can go a step further and you can use like either view width to sort of determine sizing on that,', 'start': 13852.481, 'duration': 6.004}, {'end': 13863.829, 'text': 'or you could use breakpoints to determine fixed uh font sizes for specific mobile devices.', 'start': 13858.485, 'duration': 5.344}, {'end': 13871.014, 'text': "so you can't even tackle that and get really nitty-gritty when it comes to the uh mobile responsiveness.", 'start': 13863.829, 'duration': 7.185}, {'end': 13873.255, 'text': "but now what i'm going to do is for development purposes.", 'start': 13871.014, 'duration': 2.241}, {'end': 13879.459, 'text': "i'm going to undo the token, so we actually can go ahead and develop, so it will show that it's not working there.", 'start': 13873.255, 'duration': 6.204}], 'summary': 'Using view width and breakpoints for mobile responsiveness in development.', 'duration': 26.978, 'max_score': 13852.481, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_813852481.jpg'}, {'end': 14009.202, 'src': 'embed', 'start': 13978.149, 'weight': 3, 'content': [{'end': 13979.33, 'text': "So that's another thing.", 'start': 13978.149, 'duration': 1.181}, {'end': 13984.454, 'text': 'A lot of people and even me, when Sunny and I were working, we were trying to hide our public keys.', 'start': 13979.59, 'duration': 4.864}, {'end': 13991.438, 'text': "And then we're like, wait, why are we hiding public keys? We can just leave the public keys available for everybody because it's public.", 'start': 13984.494, 'duration': 6.944}, {'end': 13992.099, 'text': "It doesn't matter.", 'start': 13991.458, 'duration': 0.641}, {'end': 13995.36, 'text': 'The only keys that matter are the secret keys.', 'start': 13993.139, 'duration': 2.221}, {'end': 13998.7, 'text': 'So notice how I never showed you guys my secret key.', 'start': 13995.48, 'duration': 3.22}, {'end': 14006.702, 'text': "When we were about to do that, I hid my screen, but also we're not using the secret key anywhere at all in this entire project.", 'start': 13998.74, 'duration': 7.962}, {'end': 14009.202, 'text': 'Yeah, exactly.', 'start': 14007.862, 'duration': 1.34}], 'summary': 'Public keys are meant to be public, while secret keys are confidential. no use of secret key in the project.', 'duration': 31.053, 'max_score': 13978.149, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_813978149.jpg'}, {'end': 14069.815, 'src': 'embed', 'start': 14042.282, 'weight': 4, 'content': [{'end': 14045.884, 'text': 'which basically is material ui prop and it just increases the size of it.', 'start': 14042.282, 'duration': 3.602}, {'end': 14052.805, 'text': "So if I save that now, what we'll see is we see those three icons have popped in right?", 'start': 14047.642, 'duration': 5.163}, {'end': 14055.527, 'text': "Now I'm going to go ahead and style those.", 'start': 14053.926, 'duration': 1.601}, {'end': 14057.628, 'text': 'So body.css.', 'start': 14055.767, 'duration': 1.861}, {'end': 14069.815, 'text': "So let's go to body.css and let's go ahead and check out, where was I doing? So we're going to do body.songs, which is essentially that section.", 'start': 14058.108, 'duration': 11.707}], 'summary': 'Using material ui prop to increase size of icons, then styling in body.css.', 'duration': 27.533, 'max_score': 14042.282, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_814042282.jpg'}, {'end': 14233.87, 'src': 'embed', 'start': 14202.149, 'weight': 5, 'content': [{'end': 14205.671, 'text': 'ali says sunny is a soldier in these lives and coding comes to him naturally.', 'start': 14202.149, 'duration': 3.522}, {'end': 14207.932, 'text': "honestly, it doesn't it, it doesn't.", 'start': 14205.671, 'duration': 2.261}, {'end': 14210.76, 'text': "it's. just like you, just kind of you.", 'start': 14207.932, 'duration': 2.828}, {'end': 14214.023, 'text': 'you find a way to slowly build up that stamina.', 'start': 14210.76, 'duration': 3.263}, {'end': 14216.866, 'text': 'And that is like like you.', 'start': 14214.524, 'duration': 2.342}, {'end': 14219.448, 'text': "agree, like it's not a case of when you first started coding.", 'start': 14216.866, 'duration': 2.582}, {'end': 14221.95, 'text': 'you could definitely not be pulling these kind of coding sessions.', 'start': 14219.448, 'duration': 2.502}, {'end': 14225.265, 'text': 'No, no, this is a lot of practice.', 'start': 14222.483, 'duration': 2.782}, {'end': 14233.87, 'text': 'And then just keep in mind that we like we have developed a lot of skill over time through lots and lots of failing lots of years.', 'start': 14225.345, 'duration': 8.525}], 'summary': "Coding requires practice and stamina, not innate ability. it's a skill developed over time through practice and perseverance.", 'duration': 31.721, 'max_score': 14202.149, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_814202149.jpg'}], 'start': 13556.428, 'title': 'Spotify playlist management and importance of public keys', 'summary': 'Explains the process of setting up and populating the discover weekly playlist, implementing dynamic image and text content, and planning for mobile responsiveness, with a focus on development purposes. additionally, it discusses the importance of public keys in authentication, emphasizing that public keys do not need to be hidden, unlike secret keys, and highlights the process of styling elements in a coding project.', 'chapters': [{'end': 13956.579, 'start': 13556.428, 'title': 'Spotify playlist management', 'summary': 'Explains the process of setting up and populating the discover weekly playlist, implementing dynamic image and text content, and planning for mobile responsiveness, with a focus on development purposes.', 'duration': 400.151, 'highlights': ['The process of setting up and populating the discover weekly playlist The speaker explains the steps to set up and populate the discover weekly playlist, emphasizing the dispatch of actions and updating the data layer.', 'Implementing dynamic image and text content for discover weekly playlist The speaker discusses the dynamic population of the discover weekly description and image from the data layer, providing a personalized experience for logged-in users.', "Planning for mobile responsiveness and development purposes The speaker mentions the consideration of using 'view width' and breakpoints for determining font sizes and mobile responsiveness, emphasizing the need to undo the token for development purposes."]}, {'end': 14271.28, 'start': 13956.719, 'title': 'Importance of public keys', 'summary': 'Discusses the importance of public keys in authentication, emphasizing that public keys do not need to be hidden, unlike secret keys, and highlights the process of styling elements in a coding project.', 'duration': 314.561, 'highlights': ['The importance of public keys in authentication is discussed, emphasizing that there is no need to hide public keys, unlike secret keys. The transcript emphasizes the significance of public keys in authentication, highlighting that there is no need to hide public keys, as opposed to secret keys. This provides clarity on the distinction between public and secret keys in the authentication process.', 'The process of styling elements in a coding project is explained, detailing the specific CSS properties and values used to style different components. The transcript provides a detailed explanation of the process of styling elements in a coding project, outlining the specific CSS properties and values utilized to style various components. This demonstrates a practical application of coding and design principles.', 'The discussion on the development of coding skills and the importance of practice and perseverance in becoming proficient in coding is highlighted. The transcript highlights the discussion on the development of coding skills, underscoring the importance of practice and perseverance in becoming proficient in coding. This insight emphasizes the dedication and effort required to excel in coding, providing valuable advice for aspiring developers.']}], 'duration': 714.852, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_813556428.jpg', 'highlights': ['The process of setting up and populating the discover weekly playlist, emphasizing dispatch of actions and updating the data layer', 'Implementing dynamic image and text content for discover weekly playlist, providing personalized experience for logged-in users', "Planning for mobile responsiveness and development purposes, considering 'view width' and breakpoints for font sizes", 'The importance of public keys in authentication, emphasizing no need to hide public keys, unlike secret keys', 'The process of styling elements in a coding project, detailing specific CSS properties and values used', 'Discussion on the development of coding skills and the importance of practice and perseverance']}, {'end': 15457.125, 'segs': [{'end': 14338.065, 'src': 'embed', 'start': 14312.567, 'weight': 1, 'content': [{'end': 14319.541, 'text': "And basically, each item, we're going to loop through it, And I'm going to say, I'm going to render out the following.", 'start': 14312.567, 'duration': 6.974}, {'end': 14323.062, 'text': "So something like this, right? I'm going to render out a song row.", 'start': 14319.561, 'duration': 3.501}, {'end': 14328.483, 'text': "I'm going to render out a song row where the track is the item.track.", 'start': 14323.082, 'duration': 5.401}, {'end': 14333.344, 'text': 'So this is, again, all of these things are from the shape that come back from this response.', 'start': 14328.603, 'duration': 4.741}, {'end': 14338.065, 'text': 'So, like, you can console log in and just visually see what the response is and then go ahead and do it.', 'start': 14333.364, 'duration': 4.701}], 'summary': 'Loop through items to render song rows based on track data from the response.', 'duration': 25.498, 'max_score': 14312.567, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_814312567.jpg'}, {'end': 14511.659, 'src': 'embed', 'start': 14485.874, 'weight': 2, 'content': [{'end': 14493.538, 'text': 'He says, I found your channel one month ago, and honestly, it taught me the most advanced and neat methods to write React code.', 'start': 14485.874, 'duration': 7.664}, {'end': 14495.479, 'text': 'I already feel like a pro.', 'start': 14493.938, 'duration': 1.541}, {'end': 14499.221, 'text': 'Your context API explanation helped a lot.', 'start': 14495.979, 'duration': 3.242}, {'end': 14501.862, 'text': 'Thanks Hey, amazing.', 'start': 14499.521, 'duration': 2.341}, {'end': 14503.023, 'text': 'Love that, brother.', 'start': 14502.203, 'duration': 0.82}, {'end': 14504.664, 'text': 'Thank you, dude.', 'start': 14504.104, 'duration': 0.56}, {'end': 14511.659, 'text': "So here we have the track artist is going to go through each one and it's basically just going to join them.", 'start': 14506.334, 'duration': 5.325}], 'summary': 'Learner improved react skills in a month, feels like a pro, thanks for context api explanation.', 'duration': 25.785, 'max_score': 14485.874, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_814485874.jpg'}, {'end': 14634.091, 'src': 'embed', 'start': 14601.936, 'weight': 4, 'content': [{'end': 14604.998, 'text': "my boyfriend, who, who's also a developer,", 'start': 14601.936, 'duration': 3.062}, {'end': 14612.882, 'text': "is already jealous of how sick my portfolio is and how much I built in the last two weeks from following your guys' content.", 'start': 14604.998, 'duration': 7.884}, {'end': 14613.642, 'text': 'Thanks guys.', 'start': 14613.082, 'duration': 0.56}, {'end': 14617.484, 'text': 'Hey, I love that.', 'start': 14615.263, 'duration': 2.221}, {'end': 14619.205, 'text': 'That is epic.', 'start': 14618.125, 'duration': 1.08}, {'end': 14623.127, 'text': "That's wicked.", 'start': 14620.246, 'duration': 2.881}, {'end': 14624.448, 'text': "Now we're making boyfriends.", 'start': 14623.268, 'duration': 1.18}, {'end': 14628.39, 'text': "We've always wanted to make boyfriends jealous, but now we're doing it with React, bro.", 'start': 14624.508, 'duration': 3.882}, {'end': 14628.95, 'text': "Let's go.", 'start': 14628.43, 'duration': 0.52}, {'end': 14634.091, 'text': "Oh man, that's so funny.", 'start': 14632.709, 'duration': 1.382}], 'summary': "Following the content, the speaker's boyfriend is jealous of her impressive portfolio and progress in the last two weeks, thanks to react development.", 'duration': 32.155, 'max_score': 14601.936, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_814601936.jpg'}, {'end': 14822.527, 'src': 'embed', 'start': 14779.764, 'weight': 6, 'content': [{'end': 14783.207, 'text': "So I'm going to do this, which actually keeps the functionality, but gets rid of the scrollbar.", 'start': 14779.764, 'duration': 3.443}, {'end': 14788.236, 'text': "So if we do that now, if you scroll, you'll see that you don't have that issue.", 'start': 14783.826, 'duration': 4.41}, {'end': 14791.143, 'text': 'Nice That is clean.', 'start': 14788.938, 'duration': 2.205}, {'end': 14793.088, 'text': 'I have no issues, bro, with this app.', 'start': 14791.183, 'duration': 1.905}, {'end': 14793.89, 'text': 'I love this app.', 'start': 14793.148, 'duration': 0.742}, {'end': 14798.326, 'text': 'Nice, right? The playlist is most likely just there.', 'start': 14795.023, 'duration': 3.303}, {'end': 14802.389, 'text': "It was a case of it didn't fetch it correctly, but once we refresh, it should work.", 'start': 14798.346, 'duration': 4.043}, {'end': 14804.932, 'text': 'But you see everything pulls in as it should.', 'start': 14802.449, 'duration': 2.483}, {'end': 14806.553, 'text': 'Yeah As it should.', 'start': 14805.552, 'duration': 1.001}, {'end': 14811.617, 'text': 'In terms of play functionality, guys, we have all of the code hosted on a GitHub repo.', 'start': 14807.073, 'duration': 4.544}, {'end': 14817.542, 'text': 'So all of that stuff is completely visible and open on the GitHub repo, and you can pretty much see that.', 'start': 14811.978, 'duration': 5.564}, {'end': 14822.527, 'text': "It's a very simple case of literally using use effects and certain calls.", 'start': 14817.863, 'duration': 4.664}], 'summary': 'App functionality improved, playlist issue resolved, code hosted on github.', 'duration': 42.763, 'max_score': 14779.764, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_814779764.jpg'}, {'end': 15073.86, 'src': 'embed', 'start': 15045.143, 'weight': 8, 'content': [{'end': 15047.325, 'text': '1, 100 live viewers at one point.', 'start': 15045.143, 'duration': 2.182}, {'end': 15049.987, 'text': 'Oh yeah, that was insane.', 'start': 15047.665, 'duration': 2.322}, {'end': 15053.95, 'text': '2, 100 likes, over 1, 100 live viewers at one point, 32, 000 views right now.', 'start': 15050.007, 'duration': 3.943}, {'end': 15055.491, 'text': 'This is crazy.', 'start': 15054.11, 'duration': 1.381}, {'end': 15058.594, 'text': 'ByteX says this is like a million dollar startup.', 'start': 15056.272, 'duration': 2.322}, {'end': 15061.796, 'text': 'Awesome, thank you guys.', 'start': 15060.895, 'duration': 0.901}, {'end': 15062.917, 'text': 'You guys are so awesome.', 'start': 15061.856, 'duration': 1.061}, {'end': 15071.598, 'text': "So right now, Sunny, are we gonna deploy this or are we skipping that part? So we're not going to deploy it.", 'start': 15063.397, 'duration': 8.201}, {'end': 15073.86, 'text': "Reason being is because it's linked to your account.", 'start': 15071.678, 'duration': 2.182}], 'summary': 'Reached 100 live viewers, 100 likes, and 32,000 views. bytex sees potential as a million-dollar startup.', 'duration': 28.717, 'max_score': 15045.143, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_815045143.jpg'}, {'end': 15263.305, 'src': 'embed', 'start': 15233.096, 'weight': 0, 'content': [{'end': 15234.177, 'text': 'We put the GitHub repo.', 'start': 15233.096, 'duration': 1.081}, {'end': 15239.039, 'text': 'All of the playlists are being pulled dynamically from the Spotify API.', 'start': 15234.917, 'duration': 4.122}, {'end': 15246.518, 'text': 'You guys also learn, just to recap, You guys also used Context API for this.', 'start': 15239.46, 'duration': 7.058}, {'end': 15251.68, 'text': 'Yeah And to dynamically change states and all of those things.', 'start': 15248.119, 'duration': 3.561}, {'end': 15257.803, 'text': 'You guys used Material UI for icons and front end and all of those things.', 'start': 15251.7, 'duration': 6.103}, {'end': 15259.623, 'text': 'You guys used Flexbox here.', 'start': 15257.823, 'duration': 1.8}, {'end': 15263.305, 'text': 'So some CSS tricks for you guys.', 'start': 15259.703, 'duration': 3.602}], 'summary': 'Github repo set up, playlists pulled from spotify api dynamically, used context api, material ui, flexbox, and css tricks.', 'duration': 30.209, 'max_score': 15233.096, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_815233096.jpg'}, {'end': 15350.658, 'src': 'embed', 'start': 15326.948, 'weight': 7, 'content': [{'end': 15336.951, 'text': 'i did corona and the tick tock projects that we showed on this um on our channel a few days ago and he says i did corona and tick tock clone and people are interested in it.', 'start': 15326.948, 'duration': 10.003}, {'end': 15339.552, 'text': 'if i continue with this channel, i see a bright future.', 'start': 15336.951, 'duration': 2.601}, {'end': 15342.193, 'text': "hey, that's what we want to hear.", 'start': 15339.552, 'duration': 2.641}, {'end': 15343.734, 'text': 'i love stuff like that.', 'start': 15342.193, 'duration': 1.541}, {'end': 15348.837, 'text': 'love hearing that, Yep.', 'start': 15343.734, 'duration': 5.103}, {'end': 15350.658, 'text': "Here's a nice comment by Hedayat.", 'start': 15349.057, 'duration': 1.601}], 'summary': 'Successful completion of corona and tick tock projects on channel sparks optimism for a bright future.', 'duration': 23.71, 'max_score': 15326.948, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_815326948.jpg'}, {'end': 15403.33, 'src': 'embed', 'start': 15374.033, 'weight': 9, 'content': [{'end': 15377.935, 'text': "We're gonna be talking about Bootstrap 5 and what is new in it.", 'start': 15374.033, 'duration': 3.902}, {'end': 15380.557, 'text': "It's the hottest thing that has dropped this year.", 'start': 15377.995, 'duration': 2.562}, {'end': 15382.278, 'text': 'It is brand new.', 'start': 15381.197, 'duration': 1.081}, {'end': 15385.199, 'text': "Everybody's trying to learn about what's going on with Bootstrap 5.", 'start': 15382.418, 'duration': 2.781}, {'end': 15388.341, 'text': "So we're like, hey, let's cover it live on this channel tomorrow.", 'start': 15385.199, 'duration': 3.142}, {'end': 15391.423, 'text': "So it's not gonna be a deep dive into code.", 'start': 15388.921, 'duration': 2.502}, {'end': 15394.785, 'text': 'You can actually just sit back and kind of watch it and learn.', 'start': 15391.883, 'duration': 2.902}, {'end': 15396.145, 'text': 'You can even watch it from your phone.', 'start': 15394.805, 'duration': 1.34}, {'end': 15397.246, 'text': 'Just bring a cup of coffee.', 'start': 15396.166, 'duration': 1.08}, {'end': 15398.087, 'text': "That's very important.", 'start': 15397.326, 'duration': 0.761}, {'end': 15399.888, 'text': 'Non-negotiable Sit back.', 'start': 15398.147, 'duration': 1.741}, {'end': 15403.33, 'text': 'Chillax Watch the live stream on Bootstrap.', 'start': 15400.368, 'duration': 2.962}], 'summary': 'Bootstrap 5 is the hottest trend this year; learn about it live on this channel.', 'duration': 29.297, 'max_score': 15374.033, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_815374033.jpg'}], 'start': 14272.04, 'title': 'Building spotify clone', 'summary': 'Covers building a spotify clone using react, detailing styling and functionality, showcasing positive feedback, donations, and engagement metrics from the live stream, while also announcing an upcoming live stream on bootstrap 5.', 'chapters': [{'end': 14601.936, 'start': 14272.04, 'title': 'Building song list component', 'summary': 'Covers building a song list component by looping through the response data and rendering song details, including track name, artist, and album, with an image, and implementing css styling, while also showcasing positive feedback from viewers.', 'duration': 329.896, 'highlights': ['Looping through response data to render song details The chapter explains looping through the response data to render song details, including track name, artist, and album.', 'Implementing CSS styling for the song list component The chapter covers implementing CSS styling for the song list component, including margin, padding, display flex, and aligning items to keep everything central.', 'Showcasing positive feedback from viewers The chapter showcases positive feedback from viewers, including a comment expressing gratitude for the React code tutorials and context API explanation.']}, {'end': 15178.235, 'start': 14601.936, 'title': 'Building spotify clone with react', 'summary': "Covers building a spotify clone using react, where the speaker and his boyfriend, both developers, express excitement about the progress made in the last two weeks, detailing the styling and functionality of the app, and celebrating a viewer's success story, while also acknowledging donations and engagement metrics from the live stream.", 'duration': 576.299, 'highlights': ["The speaker and his developer boyfriend express excitement about the progress made in the last two weeks, with the boyfriend expressing jealousy over the speaker's sick portfolio. (Relevance: 5)", 'Detailed discussion on the styling of the Spotify clone, including the cursor effect, background color, font sizes, and other styling properties for various elements. (Relevance: 4)', 'The speaker shares details about the functionality of the app, including the addition of a track, the login process, and resolving issues related to playlist fetching and scrolling. (Relevance: 3)', "Acknowledgment of a viewer's success story about getting a job after following the content, and encouraging viewers to share their experiences and engage with the speaker and his team. (Relevance: 2)", 'Recognition of donations and engagement metrics from the live stream, including the number of live viewers, likes, views, and donations, with interactions and appreciation from the viewers. (Relevance: 1)']}, {'end': 15457.125, 'start': 15178.715, 'title': 'Building a spotify clone with react', 'summary': 'Highlights the development of a spotify clone using react, showcasing the use of flexbox, material ui icons, context api, spotify api, user authentication, and react js for a single page application, with a link to the github repo for access to the code. the developers also receive positive feedback on their work, engage with their audience, and announce an upcoming live stream on bootstrap 5.', 'duration': 278.41, 'highlights': ['The chapter showcases the use of Flexbox, Material UI icons, Context API, Spotify API, user authentication, and React JS for a single page application. The developers utilized various technologies such as Flexbox, Material UI icons, Context API, Spotify API, user authentication, and React JS to build a single page application for the Spotify clone.', 'The developers engage with their audience, receive positive feedback, and announce an upcoming live stream on Bootstrap 5. The developers interact with their audience, receive positive feedback, and announce an upcoming live stream on Bootstrap 5, engaging with their community and sharing their future plans.', 'The developers provide a link to the GitHub repo for access to the code. The developers offer a link to the GitHub repository for access to the code, allowing viewers to explore and utilize the code for the Spotify clone project.']}], 'duration': 1185.085, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pnkuI8KXW_8/pics/pnkuI8KXW_814272040.jpg', 'highlights': ['The chapter covers implementing CSS styling for the song list component, including margin, padding, display flex, and aligning items to keep everything central.', 'Looping through the response data to render song details, including track name, artist, and album.', 'The chapter showcases positive feedback from viewers, including a comment expressing gratitude for the React code tutorials and context API explanation.', 'The chapter showcases the use of Flexbox, Material UI icons, Context API, Spotify API, user authentication, and React JS for a single page application.', "The speaker and his developer boyfriend express excitement about the progress made in the last two weeks, with the boyfriend expressing jealousy over the speaker's sick portfolio.", 'Detailed discussion on the styling of the Spotify clone, including the cursor effect, background color, font sizes, and other styling properties for various elements.', 'The speaker shares details about the functionality of the app, including the addition of a track, the login process, and resolving issues related to playlist fetching and scrolling.', "Acknowledgment of a viewer's success story about getting a job after following the content, and encouraging viewers to share their experiences and engage with the speaker and his team.", 'Recognition of donations and engagement metrics from the live stream, including the number of live viewers, likes, views, and donations, with interactions and appreciation from the viewers.', 'The developers engage with their audience, receive positive feedback, and announce an upcoming live stream on Bootstrap 5, engaging with their community and sharing their future plans.', 'The developers provide a link to the GitHub repo for access to the code.']}], 'highlights': ['The app has all the functionality of the actual Spotify app, including full user authentication and mobile responsiveness. (Chapter 1)', 'The clone dynamically generates playlists and provides the capability to play songs and control volume, all utilizing the React context API. (Chapter 1)', 'The process of deploying the app on Firebase is detailed, including creating a new Firebase app, enabling analytics, and preparing the back end for hosting the app. (Chapter 1)', 'The live stream experienced a surge in viewers and donations, breaking a thousand viewers and receiving various donations including 11 euros, creating an electrifying and unprecedented atmosphere. (Chapter 2)', 'The session had 1150 viewers, indicating a high level of audience engagement and interest in the topic. (Chapter 2)', "The chapter covers the process of setting up a React app, including using 'npm start' to spin up the app and a cleanup process to delete unnecessary files, offering a comprehensive approach to the app setup. (Chapter 2)", "The chapter covers the process of styling a login page with CSS to resemble Spotify's design. Demonstrates how to use CSS to style a login page, including setting image dimensions, button styling, and background color. (Chapter 3)", "The chapter covers the process of styling a login page with CSS to resemble Spotify's design. Demonstrates how to use CSS to style a login page, including setting image dimensions, button styling, and background color. (Chapter 3)", 'Received over $50 in donations during the session (Chapter 4)', 'The data layer, implemented using React Context API, is crucial in web development and can be a determining factor in landing a job as a professional web developer, as well as in building e-commerce stores. It allows for efficient storage and access of items, such as songs and playlists, without the need for prop drilling, providing a powerful and recommended pattern to learn. It is also emphasized that understanding the React Context API before transitioning to Redux is a time-saving approach. (Chapter 6)', 'The setup of the data layer is highlighted as simple and efficient, with only 11 lines of code required, in contrast to the more complex setup of Redux. (Chapter 7)', 'Creating a Reducer to Listen to Actions The reducer is created to listen to actions and update the state based on the dispatched actions, emphasizing the importance of keeping the current state and using action types and payloads. (Chapter 7)', 'The chapter involves building the weekly discovery feed on Spotify, including the banner, playlist description, and styling using styled components. (Chapter 10)', 'The process of setting up and populating the discover weekly playlist, emphasizing dispatch of actions and updating the data layer (Chapter 11)', 'The chapter covers implementing CSS styling for the song list component, including margin, padding, display flex, and aligning items to keep everything central. (Chapter 12)']}