Midas Spotify React App

An app to make playlists and save them to your Spotify account!
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Roadmap
5. Contributing
6. License
7. Contact
8. Acknowledgments

About The Project

![Product Name Screen Shot][product-screenshot]

As of now, this application is a project I used to play around with the Spotify API and React.js. The features to be added (see Roadmap section) will allow users to interact with features they do not have access to on their Spotify app.

Features include:

• Spotify Login: the user is prompted to log into their Spotify account (or to create one) when they search their first song, album or artist
• Search: the user can search for tracks by track name, artist name or album name
• Display Results: after a search, the results from the user's query will be displayed in the leftmost container in the same order Spotify would
• Make Playlist: the user can add any of the searched for tracks to their playlist by clicking on the "+" sign next to each track
• Edit Playlist: the user can rename their New Playlist as they see fit and remove songs from the playlist using the "-" next to each track
• Save Playlist: the user can save their playlist by clicking the "SAVE TO SPOTIFY" button and will soon see it appear on their spotify application

(back to top)

Built With and Deployed With

• React.js
• Surge.sh

(back to top)

Getting Started

Prerequisites

You will need to have Node.js and npm package manager installed. If you do not, visit Node.js and download the version labeled LTS. To install the latest version of npm run npm install npm@latest -g. Ensure that both are correctly installed using node -v and npm -v.

Installation

1. Get a free Client ID from Spotify

• Sign in with your Spotify account or create a free account at Spotify for Developers: https://developer.spotify.com/dashboard/login
• Click on "create an app" in the upper right hand corner and enter your app name and brief description
• Under your app name you will find your Client ID

2. Clone the repo

   git clone https://github.com/JuliaGrandury/midas-spotify-react.git

3. Enter your Client ID in Spotify.js

   const API_KEY = 'ENTER YOUR API';

(back to top)

Roadmap

• Call search on "SEARCH" click or ENTER keypress
• Clear the search input area when user clicks on it again
• Keep user informed while the playlist is saving
  • Add a confirmation message once the playlist has saved
  • Add a loading screen while playlist is saving
• Verify with user when they try to add a track that is already in Playlist
• Add tab to see your own Spotify Account Data
• Add another tab to see your playlist library
  • Allow users to add tabs to them
  • Allow users to edit them

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

Julia Grandury - booleanjules@gmail.com

Project Link: https://github.com/JuliaGrandury/web-scraperandbot

(back to top)