Create Spotify Clone Using React JS & Tailwind CSS | Build Complete Music Website In React 2024

Подписаться 1 млн

Просмотров 28 тыс.

50% 1

Learn How To Create Spotify Clone Using React JS & Tailwind CSS | Build Complete Music Website In React 2024
👉 Source Code: greatstack.dev/go/spotify
SUBSCRIBE: ‪@GreatStackDev‬
❤️ Complete JavaScript Course with Certification:
👉 greatstack.dev/go/javascript-...
✔️ Beginner + Advance + ES6 + Notes
✔️ 30 Project With Source Code
✔️ React Beginner course with project
✔️ Course Completion certificate
✔️ Chat Support
In this tutorial we are going to create a music player website like Spotify. Where we can play audio songs online. On this music website we will add some music albums and multiple songs. We can play song online, and we will also create the song controller button. To build this website UI we will use Tailwind CSS.
Download Assets: drive.google.com/file/d/1Bjov...
Get web hosting and domain:
👉greatstack.dev/go/hostinger
Watch Full Stack E-commerce Website tutorial:
👉 • How To Create Full Sta...
Watch Full Stack Food Order Website tutorial:
👉 • How To Create Full Sta...
-------------------------
Timestamp:
00:00 Project Overview
04:49 Setup basic React JS project
10:07 Add Tailwind CSS in React Project
15:47 Create Sidebar
27:34 Create Music player
39:40 Create Album List and Song List
01:06:14 Create Music Album Page
01:26:09 Create Navigation Buttons
01:36:04 Select and play song in player
01:54:43 Display current time and song duration
02:00:07 Create Seekbar functionality
-----------------------------------------
Suggested Course:
Complete JavaScript course with 30 projects:
👉 greatstack.dev/go/javascript-...
Complete HTML and CSS with 8 projects:
👉 easytutorialspro.com/go/course/
-------------------------------------
Recommended Videos:
Beginner's HTML and CSS tutorial:
► • HTML And CSS Tutorial ...
Beginner's JavaScript tutorial:
► • JavaScript Full Course...
Make A Complete Website for college using HTML & CSS:
► • How To Make A College ...
How to make a Business website step by step:
► • How To Make Website Us...
How to make personal resume website step by step:
► • How To Make A Website ...
How to make fitness website design using HTML CSS:
► • How To Make A Website ...
How to make an Ecommerce Website Design:
► • How To Make eCommerce ...
How to make a Job Portal website design with HTML & CSS:
► • How To Make Website Us...
How to make travel website design with HTML CSS Bootstrap:
► • How To Make A Website ...
-------------------------------------
◼️ Source code link is shared in community post for all my coding videos exclusively for channel members (only channel members can see)
Join Channel Membership:
► / @greatstackdev
-------------------
Image and icon credit:
open.spotify.com/
-------------------------------------
Connect with me:
👉 linktr.ee/iamavinashkr
Connect with GreatStack:
Instagram: / greatstackdev
Twitter: / greatstackdev
Facebook: / greatstack

Опубликовано:

14 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 261

@GreatStackDev Месяц назад

👉 Source Code: greatstack.dev/go/spotify

@IbrahimAbdi_ Месяц назад

Lets go Full Stack 🎉

@user-gy6pm2zb3y Месяц назад

You make the best tutorials that are clear and straight to the point. Thanks

@Tamanna4140 Месяц назад

Thank you for your step-by-step guidance on this project. It's been a great experience. I'm now looking forward to diving into the full-stack aspect of things!

@trexixx 26 дней назад

Great Job My Friend!!

@drone_code Месяц назад

1 Million subscribers approaching 😁. Great content sir. I love ur tutorials

@prateekshrivastava2802 Месяц назад

It's gold for learning ReactJs ❤️❤️

@Saibentos Месяц назад

Keep it up bro ! As this video has helped me in some of my projects

@jazzy_rey Месяц назад

this is aawesomeeee keep it up, looking forward to the FULL STACK, i integrated the player to my website with this method, btw would be nice to make a music ecommerce with this same audio player!!!!.

@Theooijoma Месяц назад

This is a great content sir thank you.. we definitely want fullstack

@ssikarim Месяц назад

full stack full stack . thanks for the amazing video.

@Mattaken4 Месяц назад

You are doing a great work sir

@hyberzone8224 Месяц назад

definitly a full stack sounds amazing :)

@ramprasadchauhan7 Месяц назад

Thank you for using tailwind CSS

@suresh3847 Месяц назад

We Want Full Stack Spotify clone🎉

@flutter-fm1kl Месяц назад

Yes

@KandidoOCariocaMineiro Месяц назад

let´s go bro. Hi from Brazil

@MarkMedrano-mq6fp 29 дней назад

Hi @GreatStack, this is amazing. Just one question, how do you go about adding your own playlist?

@Fnydo Месяц назад

It's really great 👍

@kauseransari623 Месяц назад

thanx bro 🎉 ,😍

@Superior-jt3wq 14 дней назад

Nice video 🎉 More react + tailwind projects 🤌🏻

@dennisdegraphicsdynamo_999 Месяц назад

Waiting for full stack we will love it

@samarthbondhare2636 Месяц назад

In these week I complete gemini clone and Netflix and now these wow ❤

@amanjha8129 Месяц назад

Bro will you send me source code link I am facing error with tmdb

@ugurarslan5673 2 дня назад

Thank you

@sirajyounis6145 Месяц назад

Congratulations on achieving 1 Million Subscribers sirr. I am watching you since you had 650k subscribers.

@digitsclickempire8711 Месяц назад

Full stack, here we go ❤

@SK_Covers Месяц назад

Full stack 💯🎉

@kingstabon2900 Месяц назад

Full stack!!!!🎉🎉🎉

@mengyan3214 День назад

Looking forward to the Full-stack tutorials. Thank you.

@GreatStackDev Час назад

Sure. Coming soon! Thank you.

@brianbariyo2509 Месяц назад

Lets go Full stack👍

@rajatpandey6790 Месяц назад

Full stack 🎉❤

@powerofthoughts_pot Месяц назад

Great sir. We want FULL STACK 🎉❤

@tarun4093 Месяц назад

Full stack 🔥🔥🔥

@pollikondavenkataayyappaay4365 Месяц назад

Good Sir go ahead

@nathanieldesantis1989 28 дней назад

Full stack would be awesome!!

@kishansomaiya7326 Месяц назад

great work, would love to see full stack spotify clone

@CreativeMinds100 Месяц назад

Completed ..😊😊

@rockbelleh6237 Месяц назад

Can't wait for the full stack version

@rohitsone 16 дней назад

Awesome bro , need a Full stack 🫡

@emememdavid9653 Месяц назад

Let's go🔥🔥

@iCeTainment Месяц назад

Just what I’ve been waiting for 🚀🚀

@nikhilchaurasia4150 6 дней назад

Let's go full stack🎉

@GreatStackDev 3 дня назад

Sure. Will do it soon. Thanks for your comment. 😊

@jokerjoker7698 Месяц назад

Lets go fullstack

@sohaill3677 Месяц назад

Hey , GreatStack you are doing literally great. Please also make some full stack next.js projects , todo project is not sufficient. Please make a complex and unique project.

@user-hu2yj3fe6l Месяц назад

Congratulations for 1M subscribers

@eliasstorebhm2519 29 дней назад

Nice project

@haidarjar778 Месяц назад

great tutoriall

@SabonaMarara Месяц назад

wow ! let go full stack

@hwapyongedouard Месяц назад

Full stack 🔥🔥🔥🔥🔥🔥🔥🔥

@user-gi2tj9vi2v 11 дней назад

Informative..need full stack in Spotify

@GreatStackDev 11 дней назад

Glad you liked it. Will do it soon. 😊

@Rahulkingyt-di1ut Месяц назад

Let's go with full stack😊

@user-ey2rk5dz6j Месяц назад

Fullstack 🎉❤

@Lyricfact0ry2.0 11 дней назад

Amazing video

@GreatStackDev 11 дней назад

Glad you liked it. Thanks for your comment. 😊

@selmonboi1384 Месяц назад

Amazing

@hollamhide Месяц назад

Let's go full stack

@rajatpandey6790 Месяц назад

Full stack 🎉🎉

@AdityaSingh-km8tz Месяц назад

Great project

@AmitRajput-vi3md Месяц назад

Let's go for full stack spotify project ❤

@dheerajsahni8073 Месяц назад

Yes. We want full stack❤

@sannapukarthik9067 Месяц назад

We want full stack Spotify clone website ✨.Keep rocking 😁❣️

@mavicmontez5902 23 дня назад

We want Fullstack. Your an awesome teacher

@GreatStackDev 22 дня назад

Will do it. Thank you so much. 😊

@iftyrahman2239 Месяц назад

Go ahead Mr. Avinash .... Make the full stack clone of it.

@rajeshalluru6702 18 дней назад

Full stack 🔥

@GreatStackDev 18 дней назад

Sure.. Will do it soon. Thank you! 😊

@CosMIcAkaSh1111 Месяц назад

make the full stack part please. love your videos.

@SunnyKumar-yz5zc Месяц назад

Your video is very awesome and I want full stack video

@katsrk3039 Месяц назад

sir, we need full stack version. please continue sir 😊😊😊😊😊😊

@user-uu1rw2oe8q Месяц назад

Yes make part 2 with auth + upload and something more

@jeganperiasamy4781 Месяц назад

lets go full stack

@user-it6tx1cq9v Месяц назад

Brother, I am speaking from Bangladesh. Hope you are well. To be honest I have watched many channels but none of them are as good as yours. You show every single thing perfectly but other youtubers skip it. I am a member of your channel. So brother I want to make a request as your younger brother🥹🥹. Hope you keep this request of your younger brother. Actually I just learned HTML CSS. I can do light JS. So bro, I want to make an educational website now but I don't understand how to make it, how to design it, I don't understand anything 🥹. So bro I want a video from your channel. You will create a very nice educational website and upload it. Please upload this video. I have watched many youtube channels but to no avail. No one can explain it so beautifully. Brother, you will design the cards of the course section very nicely. Please keep this request of the younger brother. Brother, when will you upload?🥹🥹🥹🥹

@s..3189 10 дней назад

lets go full stack!!!!!

@GreatStackDev 9 дней назад

Will do it soon. Thanks for your comment. 😊

@gurusacademy2021 5 дней назад

Yes, we want full stack. Thank you.

@GreatStackDev 3 дня назад

Sure. Will do it soon.

@mrandroidcoder4756 Месяц назад

Bhaiya Congrats for approaching 1M subscribers, apne food wala full stack mern project bnaya tha usko vercel pe upload kese Karin ek video bnao, please 🙏

@shaikshahed413 23 дня назад

@mrandroudcoder4756 yes iam aslo looking for how to deploy that food project on vercel or netlify

@sanjaysanju1342 Месяц назад

Let’s go for full stack

@sravansai8990 Месяц назад

let's go for full stack sir

@rajatpandey6790 Месяц назад

Yes we want full stack 🎉🎉🎉🎉🎉❤

@eugeenhunter7384 Месяц назад

thank you for reaching 1M subs, but ill recommend we go for more projects which are open minded like the food delivery one which has not been implemented into a platform

@A__MDMirajHowlader Месяц назад

i want more project like this

@narotamkumarmishra6139 Месяц назад

great work, please add backend also

@abhishekjaiswar5182 Месяц назад

Fullstack 🎉

@nazishdanish827 26 дней назад

create a full stack spotify please, thank you!

@shaikshahed413 23 дня назад

Full stack part would be great if you show how to deploy project on netlify or vercel or render

@360__Sports Месяц назад

full stack❤

@mharam1963 Месяц назад

Full stack 🎉

@Being_Mohit Месяц назад

Let's go for Full stack

@w3bpiyush_ Месяц назад

Go ahead

@denukadissanayaka5514 Месяц назад

Lets go Full Stack

@dineshdb6554 Месяц назад

Fullstack🎉

@shawanbasu878 Месяц назад

can you please check why the totalTime of any particular song showing an error as NaN:NaN when click previous and next button instantly? can we do the setTime(time) there to prevent the issue?