Skip to content

README.md

Latest commit

 

History

History
115 lines (79 loc) · 2.54 KB

README.md

File metadata and controls

115 lines (79 loc) · 2.54 KB

Picks

Picks is a web application that displays all your Spotify playlists. For the app to work effectively, the user should already have a Spotify account set up with desired playlists.

Features

  • Sign in to Spotify API: Securely authenticate with your Spotify account.
  • View your Spotify playlists: See all your playlists, including playlist details and a preview of tracks.
  • Search for playlists: Instantly filter your playlists by name.

Technologies Used

  • React JS
  • Spotify API

Installation Requirements

  • Node.js

Installation

  1. Clone the repository: 
    git clone https://github.com/yourusername/picks.git
cd picks
  2. Install dependencies: 
    npm install
  3. Start the development server: 
    npm start
  4. Open http://localhost:3000 in your browser.

Usage

  1. Click Sign in with Spotify and authorize the app.
  2. Browse your playlists and see a summary of your music.
  3. Use the search box to filter playlists by name.

Configuration Options

  • The backend authentication URL is set in the code. If you deploy your own backend, update this URL in App.js.
  • You may need to register your app with Spotify and set the correct redirect URI in your Spotify Developer Dashboard.

Code Structure Overview

src/
  App.css
  App.js
  App.test.js
  index.css
  index.js
  logo192.png
  reportWebVitals.js
  setupTests.js
  components/
    PlaylistCounter.js
    HoursCounter.jsx
    Filter.jsx

Troubleshooting

  • Spotify login not working:
    • Ensure your Spotify app credentials and redirect URI are set up correctly in the Spotify Developer Dashboard.
    • Check that your backend authentication server is running and accessible.
  • API errors or blank playlists:
    • Make sure your access token is valid and has the required scopes.
    • Check the browser console for error messages.
  • App not starting:
    • Ensure Node.js is installed and up to date.
    • Run npm install to ensure all dependencies are installed.

Contributing

Contributions are welcome! To contribute:

  1. Fork the repository
  2. Create a new branch (git checkout -b feature/your-feature)
  3. Commit your changes (git commit -am 'Add new feature')
  4. Push to the branch (git push origin feature/your-feature)
  5. Open a pull request

Please follow the existing code style and include tests where appropriate.

License

This project is licensed under the MIT License. See the LICENSE file for details.