DEV Community

Cover image for How to Create a Spotify Music Search App in React

How to Create a Spotify Music Search App in React

Yogesh Chavan on September 14, 2020

Introduction In this article, you will create a Fully Responsive Spotify Music Search App using Spotify Music API. By creating this App...
Collapse
 
victoria_mostova profile image
Victoria Mostova

Hi Yogesh! Great article! I found it extremely helpful in understanding how to make a Spotify app using React. The step-by-step guide and code snippets provided a clear and concise way to create a music search app. I've been searching for a tutorial like this for a while, and your article perfectly addressed my question on how to make a Spotify app. Thank you for sharing this valuable resource!

Collapse
 
myogeshchavan97 profile image
Yogesh Chavan

Glad to hear that. Thank you so much for the kind words 👏

Collapse
 
astaiglesia profile image
Alfred Sta Iglesia • Edited

This is amazing! Thank you so much for this - Exactly what I was looking for to help better my understanding of Redux and state mgmt + get my feet wet with the Spotify API, all in one project =)
Can't wait to start building this!

Collapse
 
myogeshchavan97 profile image
Yogesh Chavan

Glad it was helpful to you. Thank you 🙏

Collapse
 
kasiriveni profile image
Srinivas Kasiriveni

🤩😍😍😲Wow

Collapse
 
myogeshchavan97 profile image
Yogesh Chavan

😀 Thank you so much 😊

Collapse
 
cartman1978 profile image
cartman1978

thanks for this, I actually get error status 400, "Only valid bearer authentication supported" but my Client Id is correct

Collapse
 
myogeshchavan97 profile image
Yogesh Chavan

I just checked with my repository code and it's working fine. You may have missed something in the code. Please clone my repository code and check if it works for you.

Collapse
 
cartman1978 profile image
cartman1978

Indeed is working your cloned one, thanks. How long does it takes to read trough the Spotify documentation? I mean in order to build this wonderful app did you first learn their documentation?
Cheers.

Thread Thread
 
myogeshchavan97 profile image
Yogesh Chavan

Yes, I first went through this documentation to understand the API (5-6 hours in total to try various endpoints to come up with final APIs) and it took me one week to create this application including writing this step by step article

Thread Thread
 
cartman1978 profile image
cartman1978

Thank you very much and again well done great job and tutorial!

Thread Thread
 
myogeshchavan97 profile image
Yogesh Chavan

Thank you 🙂

Collapse
 
da1238 profile image
David Abraham

Thanks SO MUCH for this tutorial !

Collapse
 
myogeshchavan97 profile image
Yogesh Chavan

Glad you found it useful. Thank you 👏

Collapse
 
sarthak4888 profile image
Sarthak4888

Hey Yogesh,
what the prerequisite for this app?

Collapse
 
myogeshchavan97 profile image
Yogesh Chavan • Edited

The pre-requisite are:
Knowing the

  • Basics of React and Redux
  • Basics of React Hooks
  • Basics of react-router-dom for react routing and
  • How to work with React state
Collapse
 
ydna317 profile image
Andy Nguyen

Where is the SearchForm being imported? When running the application, my search form is not there.

Collapse
 
myogeshchavan97 profile image
Yogesh Chavan

@ydna317 SearchForm is imported in Dashboard.js file. You can check out the final GitHub Repository code to compare with your code If you face any issue.

Collapse
 
guru9 profile image
Gururaj Moger

Hi.. is there any wrapper to play songs or preview uri??

Collapse
 
myogeshchavan97 profile image
Yogesh Chavan
Collapse
 
guru9 profile image
Gururaj Moger • Edited

Thanks .. but it's for only video not audio.. also have embedded with video tag..

We can achieve it by audio tag to play preview uri for 30 sec.. and there no way to play Spotify uri until the user account get premium 😎

Collapse
 
gargamelism profile image
Gargamel

Very nice tutorial, though the middle "Dashboard.js" file is missing

Collapse
 
manuonda1 profile image
manuonda

Thank you very much!!

Collapse
 
myogeshchavan97 profile image
Yogesh Chavan

I'm glad you found it helpful. 👍

Collapse
 
aminda profile image
amin-da

very good...

Collapse
 
myogeshchavan97 profile image
Yogesh Chavan

Thank you!