Summary
Keywords
Full Transcript
Master modern web development by building an improved version of Spotify. With a modern homepage, fully-fledged music player, search, lyrics, song exploration features, search, popular music around you, worldwide top charts, and much more, this is the best music application you can currently find on YouTube. ⭐RapidAPI Extension - https://marketplace.visualstudio.com/items?itemName=RapidAPI.vscode-rapidapi-client&utm_source=youtube.com%2FJavaScriptMastery&utm_medium=referral&utm_campaign=DevRel ⭐RapidAPI - https://rapidapi.com/hub?utm_source=youtube.com/JavaScriptMastery&utm_medium=referral&utm_campaign=DevRel ⭐RapidAPI Shazam Core API- https://rapidapi.com/tipsters/api/shazam-core?utm_source=youtube.com/JavaScriptMastery&utm_medium=referral&utm_campaign=DevRel 💻 Build Apps with Professional Mentors - https://resource.jsmastery.pro/masterclass ✅ JSM Masterclass Experience - https://www.jsmastery.pro/full-stack-web-development-bootcamp Showcase your dev skills with practical experience and land the coding career of your dreams: 💻 JS Mastery Pro - https://jsmastery.pro/youtube ✅ A unique YOUTUBE discount code is automatically applied! 📚 Materials/References: Starter Code: https://drive.google.com/file/d/1iTlXIZ4T3BBKjgLMsDpQn-Eux1B3ZyXO/view?usp=sharing GitHub Code (give it a star ⭐): https://github.com/adrianhajdin/project_music_player In this course, you'll learn: - React functional components and their reusability - React file and folder structure - We'll use Redux Toolkit to manage the state of our application - You'll achieve mastery using Tailwind and make the app responsive on all devices - You'll learn how to fetch data from unlimited sources using RapidAPI. 💻 Join JSM on Discord - https://discord.gg/n6EdbFJ 🐦 Follow JSM on Twitter - https://twitter.com/jsmasterypro 🖼️ Follow JSM Instagram - https://instagram.com/javascriptmastery 💼 Business Inquiries: [email protected] 👇 Time Stamps 00:00:00 - Intro 00:06:31 - Setup 00:12:38 - Discover Section 00:23:50 - Rapid API Music Fetching 00:39:16 - Loader Component 00:40:50 - Error Component 00:41:50 - Song Card Component 00:59:48 - Play/Pause Functionality 01:05:38 - Sidebar 01:19:00 - Top Play Section 01:28:03 - Top Chart Card 01:30:57 - Top Artist - Swiper Component 01:42:50 - Song Details Page 02:12:53 - Artist Details Page 02:20:50 - Around You, Top Charts & Artists 02:36:31 - Search 2:52:48 - Deployment
