Mastering Full-Stack app | Spotify Clone Project with NodeJS, ExpressJS, EJS, CSS, Authentication
HTML-код
- Опубликовано: 15 дек 2023
- Embark on an immersive journey into the world of full-stack development by building a fully functional Spotify clone from scratch. This comprehensive tutorial will equip you with the essential skills and knowledge to master both front-end and back-end technologies, empowering you to create sophisticated web applications.
Throughout this project, you'll gain hands-on experience with NodeJS, ExpressJS, EJS, CSS, and authentication mechanisms, enabling you to confidently tackle complex full-stack development challenges. We'll cover everything from setting up the development environment to implementing user authentication, and creating a dynamic and responsive user interface.
By the end of this tutorial, you'll have not only built a stunning Spotify clone but also mastered the art of full-stack development. You'll be equipped with the ability to design and develop web applications with confidence, opening doors to exciting career opportunities.
This tutorial is designed for both beginners and intermediate developers who are eager to enhance their full-stack development skills. Whether you're a novice programmer or a seasoned developer looking to expand your expertise, this comprehensive guide will provide you with the knowledge and tools you need to excel in the world of full-stack web development.
Join me on this exciting journey and master the art of full-stack development by building a remarkable Spotify clone project.
🔗 Download Starter File: drive.google.com/file/d/1nxTf...
🔗 Source Code + Figma UI (Patreon): www.patreon.com/codewithsadee...
🔗 Source Code + Figma UI (Buymeacoffee): www.buymeacoffee.com/codewith...
🔗 Join our discord community to get help: / discord
⏱️ Timestamps
0:00 - Demo
13:17 - Project initial
18:39 - Login
1:01:46 - User authentication
1:53:05 - Home
5:46:02 - Working with player
6:52:40 - Home media queries
8:04:47 - Explore
8:26:30 - Explore media queries
8:28:58 - Pagination
8:41:14 - Explore detail
8:58:02 - Album
9:08:52 - Album detail
10:04:20 - Album detail media queries
10:10:34 - Playlist
10:18:28 - Playlist detail
10:32:02 - Playlist detail media queries
10:34:26 - Profile
11:23:19 - Search
12:33:00 - Artist
13:06:09 - Track
13:52:57 - Track media queries
13:55:14 - Logout
13:58:57 - 404
14:04:55 - 404 media queries
👍 Like - Follow & Support
Twitter: / codewithsadee_
Github: github.com/codewithsadee
Facebook: / codewithsadeefan
Instagram: / codewithsadee
⚠️ Disclaimer
Disclaimer video is for educational purposes only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favour of fair use
#codewithsadee
#fullstackapplication
#spotifyclone
#applicationclone
14 Hours of dedication, planning and coding. Hats off to you Sadee, putting out great work recently
I appreciate your words 😊
@@codewithsadee bhai humein bhi sikhaooo
I've been waiting for this, I'm definitely not disappointed beautiful project❤
Thanks 😊
Thanks so much man I've been waiting for this one ❤
Glad to hear that ♥️
Happy to see you will be using ejs here.
You are such a wonderful person indeed
Thank you!
HUGE PROJECT!! 🔥💥
Thank you Sadee sir ❤🔥
♥️♥️
Wow wow wow! Amazing brother! Masha'Allah your knowledge in coding is something I aspire to have ❤ thank you for this.
Thank you brother 😊
What a beautiful work, my sincere thanks!
Thank you so much for your kind words! I'm glad you enjoyed my work and I really appreciate your support.
I took 1 month in this project but finally made it:
THANKS FOR AMAZING CONTENT ❤
Keep it up
@Abdul_rafey Please tell me is it really working? Are songs playing?
@@Kavitaehyung_ yes of course, you just do a focus and write a code step by step without any mistake definitely everything works, because i made it.
@@Abdul_rafey thank you for reply
😮Noooooooo esto está a otro nivel broooooooo cuando sepa usar esas tecnologías eso ira para mí portafolio ❤❤❤❤
i'm not a fullstack but i hope that in some day, i liked video before i watching it because i know it is a masterpiece , KEEP GOINGG SADEE you are the best !
Thanks a lot man 🙏
Appreciate that ♥️
Awesome video man, keep it up ❤
Appreciate it!
@@codewithsadeekeep it up man ❤
wow!! man!! congrats!!
Thanks ♥️😊
Damn
I love this
Thanks man
❤
You're most welcome ♥️
I am very grateful to you, frankly, because of the projects that went from a single stage in frontend to a high stage. Thank you, my friend, for these tremendous efforts. I only have one note: if you talked about these projects, it would be much better for beginners, but thank you.🎉❤
Thank you for your appreciation
Mashallah I am not there yet to make this project. But I'll definitely make this one after few months!
Love you content
Thank you Sadee Sir
Thanks, Hope you'll enjoy it
I am not there yet to make this project. But I'll definitely make this one after few months!
Love you content ❤
Thanks a lot brother 😊
Hope you'll enjoy this 😊
Love from India🇮🇳 Bro you are my inspiration the way of your coding is next level I also want to become coder like you all though I am a good developer but my concepts not clear so much but yaa one day I became so now I am to make this clone with u so
Thank you ❤
Glad to hear that ☺️
Good luck for your journey
Wow bro it help me alot keep up from africa
Wow wow wow! Amazing brother! Masha'Allah keep it up ♥ this is very hard work.
Thanks.
We will. keep us in your prayers ❤
Love your tutorial but please upload fast we can't wait for great video thanks sir❤
I will try my best ♥️
And thank you
This is massive i will start learning asap
Thanks. hope you'll enjoy It
Thankyou brother!
My pleasure
i loved that video, i think it is a fantastic idea to code with relaxing music background, brillian idea
Thanks ♥️
@@codewithsadee allah 🐖🐽🐷
Goodd work man🎉
Thanks ♥️
I congratulate you brother for such an incredible project, I hope you continue uploading these types of very educational videos. For junior developers this is pure gold in learning new technologies. greetings!🤯🥳
Thank you very much!
@@codewithsadee It would be great if you could show us how to deploy this project to the internet. we would appreciate it very much 🙏
nice thank you so much for sharing such an awesome content, liked 👍 and subscribed, great content liked your channel
Thanks man 😊
great work Sadee bro mashallah
Thank you brother
OMG amazing.
Thanks
superr borther
I knew you will bring full stack website soon I have learned every advance concept of html and css from you but I am happy that you didn't added react in it. And I noticed one thing once you start making project you cover most of the unknown concept in the video from basic structure to advance without even speaking single words
Thank you so much for your support and kind words! I'm glad you found the video helpful in learning advanced HTML and CSS concepts. I always strive to cover all the necessary information in my projects, and I'm glad you noticed that. Keep up the great work in your learning journey!
Hi,
Thank you for your informative videos. They have been very helpful. However, I've been encountering some issues. I'm having trouble searching for solutions to errors in my code, and sometimes I miss certain elements in the code.
Could you please guide me on how to effectively search for solutions to these errors, and provide some tips on how to ensure that I don't miss anything important in the code?
Thank you for your time and assistance.
Thank you bro, Alhamdulilahi May Allah protect us and your family
Thank you brother 😊
@@codewithsadee allahuma barik brother
Hi can you make a video where you explain how to code a website+a dashboard soon
what app you use to test responsive in the video?
Bro which vs code theme you are using
"You are doing exactly the work that is my dream, and I will achieve it."
Thanks. 😊
Why are you not using any css framework like tailwind or bootstrap??
woow mi hermano tiene mis respetos de toda la vida para usted, mis paginas son buenas, pero a este nivel es demasiado.
Thank u!!
I know this was a headache to make. Giving me motivation 👍🏾
They say the best things in life come with a little headache, right? 😉
It's all about pushing through the challenges and reaching for those goals!
which database did you use?
Miss you bro love from Bangladesh ❤️❤️
Thank you for remembering us ❤
i love man
Thank you 😇
Please why images do not appear in css after completing url()? I tried a lot and it doesn't appear
thnks for tutorial but one suggestion,,please add your voice over for explaining code,you can add audio track.please add in future...amazing content
I will. Thanks
Thanks
🙏
Great
Thanks
KING HAS RETURNED
😊😊
can someone help me pls. i have embeded the script tag for web playback sdk into the head tag already but when running it says the window.onSpotifyWebPlaybackSDKReady is not defined. what does that mean and how to fix please (from the beginning of the working with player part until about 6:30:--)
Join our discord server to discuss about this issues
Why the image don’t show at 30:40 I put the link and the path I correct why don’t show
Can we create playlists in this
This is insane sadee 🎉 Can i know which vscode theme ur using 😅
Thanks man 😊
Of course the theme is, Noctis
@@codewithsadee Thanks 🙏
You can listen to music? When you finished this project? And you are amazing man keeep pushing
Yeah you can listen music. any music.
Thanks man ❤
wow, i like you
this video is awesome, just a quick question how were you able to upload a video past 12 hours long ?
You can upload video up to 12 hours long or 256GB size in RUclips.
when i tried uploading a new video of mine that was 13 hours it just crashed. Your video is 14 did you have to do anything special for it to work ?@@codewithsadee
Please keep going:(. Don't give up
Thank you for your encouragement! I appreciate your support and I'm motivated to keep going.
How to deploy this project on live server online ???
please bring some more projects without react This is enough to learn backend I know but still please help us in perfection
❤❤❤❤❤❤
please answer how can connetct mongodb
which theme are you using on vs code
Theme- noctis
❤❤❤❤❤❤❤❤
❤❤❤❤❤❤❤
This is one of the coolest Spotify Clone project! I'm gonna start this project in my leisure time asap...But can you tell me the Spotify API which you used, is it for paid/free!!
Thank You!❤💯
Thanks man.♥️
I used the original Spotify API that they provided. And It's free.
@@codewithsadee Cool! I'm gonna start soon...❤🫡
Amazing project man keep going but one question does the song play ?
Yes it does. I didn't play because of copyright issues.
@@codewithsadee waw amazing job man question all you need in this is visual studio as a software
@@codewithsadee and the last question if you can make a smooth website about selling used car 😮💨
@@codewithsadeequestion what software I need for this project
It would be great if you explain the code!
But hats off.
Thank you for your valuable time ;)
Love from Peshawar, Pakistan :)
Thanks man.
I like the taps of your keyboard tho xD, anyways do voice, I think it will much better informative. no ones gonna judge on that i guess. thanks :D
What happens if Nodemon is added to Webpack, won't the components be damaged?
#lovefromPAKISTAN❤
Page carpenter pls :)
i have deployed this on render site but there only login page is opening why this is happening
Join our discord server to fix about this issues
Hi professor, could you make an airbnb clone fullstack, it would be wonderful.
Yeah Airbnb is in my list. Don't worry 😉
@@codewithsadee Many thanks for the reply. I have another question, this video project made in Node.Js, would you recommend a platform to host this project?
Thia is a really awesome project. 🔥 But it is a bit difficult for me to understand your code.😅
Thanks a lot. ♥️
beautifull may allah protect you
Thanks man ♥️
And another question can you make a webstie about selling used car and with a payment method
Email me
@@codewithsadeeI will send you a message on instagram
I have some Q . 1) api request is limited or unlimited ? 2) when upload this project in server still this api work ? plz reply
1) No, API is unlimited;
2) Yes, API should be work
What do you mean by upload in server?
why your % and< sign are in pink color in home.ejs
U need to use extention to highlight EJS code
5:00:17 apc
Is this include spotify api or not
Yes
happy to raw ejs here without the react crap
Glad to hear that 😊
❤❤
😊
What are the prerequisites for this?
JavaScript, NodeJS and API
Pls sir i would like to full project of Reactjs like e-commerce or portfolio agency website
Ok, note that 😊
Hi man. Can you make website for Nail designer?
Yes I can
@@codewithsadee wow I'm glad! I can't wait for this. Thanks 🙏🏼
can i use mongodb in this
Yes u can
Sir choose licence not showing.
same here not showing license
you have find any way?
Anybody has this code source code of this project kindly share it
This type of project can easily be created by react/next. Why use raw javaScript always. Neither use typescript. As well as don't even talk
It will nicer if u we’re explaining with your voice
Have you build this Spotify Clone in Next.js , React & Typescript. More project to come Sadee bro. Thank you😘😘😃😃🤩🤩🥰🥰😇😇🤔🤔❤❤💌💌❤🔥❤🔥💕💕🙏🙏✌✌🤘🤘
Not yet. But definitely in the future.
By the way thanks 😊
plz make reactjs tutorial please
Ok
is this api free to use?
Yes, it is fully FREE.
But there are some limitation in Spotify Player SDK.
You have to buy Premium subscription to use the player API.
@@codewithsadee Alright! Thanks
Awesome work! Free Palestine!!
Thanks! 🇵🇸
Has Anyone completed this project?
Is it working??!!
bro how can i get it for 10 dollas
All the source code are available on my patreon and buymeacoffee page
Can anyone send me the source code for free please urgent
Check my patreon and buymeacoffee page, all source code are available there
Bro dont use music
Friend, if next time you are going to write what you are going to speak, better use a voice AI and let it speak for you. It's annoying to see what you write
Programming to create game characters (video)
Free Palestine.
Thanks for the share your interest. ❤
Free Palestine ❤❤
free palestine 😍
Free palestine ✌️✌️
Free Palestine
Jihad and Terrorism Free World 🕋👎
😅😅 free ticket to gaza to free them
Free Palestine from earth 😂😂
Recently played item array not found?
Feel free to join our Discord server and discuss any issues you may have.