Skip to content

Latest commit

 

History

History
84 lines (52 loc) · 2.23 KB

README.md

File metadata and controls

84 lines (52 loc) · 2.23 KB
Raw

WhatSong - A Spotify Search Engine

Live URL

Outline of Usage

A web application that makes use of the search endpoint of the Spotify API and gives the user the ability to search across two categories.

How to use app

Press get started and you will be taken to the main search box. Here you can choose to search for "Artists" or "Songs".

After entering your search term and choosing your category you will be returned a list of artists or tracks. With artists you can click on the spotify icon and be taken to their Spotify page.

There is more functionality with tracks. After your search for tracks you can see more track detail by pressing the "Details" button and the sidebar will expand giving more track details.

Press the red "X" icon in the top right to remove the details from the sidebar. The "Listen" button will take you to the track on Spotify.

Quick Start

  • Open your terminal and git clone the repository: 
    $ git clone https://github.com/jordanss1/spotify-clone
  • Access the folder, "cd" into the directory and install any dependencies: 
    $ npm install
  • Then start the react application 
    $ npm start

You will need to gain a client Id and client secret from the Spotify Developer dashboard.

  • Login to your spotify account and go to developer.spotify.com and go to "Dashboard"
  • In the dashboard you will need to create an app and from there you will be able to access your client Id and secret
  • Once inside your text editor you will need to add a .env file into the root directory and then add: REACT_APP_ID= [client-Id] REACT_APP_SECRET=[client-secret] into the .env file.
  • Then, ctrl + C inside of your terminal to stop running the application and then npm start back into the application

Technologies Used

  • ReactJS
  • JavaScript
  • TypeScript
  • React Testing Library
  • Jest
  • Mock Service Worker
  • HTML
  • CSS
  • React Router
  • BootStrap
  • Semantic UI
  • Axios
  • NPM