Ordify

Ordify is a powerful web application built with Angular that allows you to meticulously organize your Spotify playlists. Connect your Spotify account, select a playlist, and apply multi-level sorting criteria to reorder your tracks exactly the way you want.

Key Features

• Multi-Level Sorting: Organize tracks using a series of nested criteria, such as sorting by Artist, then Album, then Track Name.
• Flexible Criteria: Sort by Artist, Album, Track Name, Release Date, Date Added, Duration, or even Artist Genre.
• Customizable Order: Set ascending or descending direction for each sorting level.
• Live Preview: Instantly see how your playlist will be reordered before applying any permanent changes.
• Safe & Secure: Uses Spotify's official OAuth 2.0 PKCE flow for authentication. Your data is processed in your browser and is not stored on any server.
• Handles Large Playlists: Efficiently fetches and processes all tracks in your playlist, regardless of size, by handling API pagination automatically.
• Modern UI: A clean, responsive, and intuitive interface built with Angular and Angular Material.

Getting Started

Follow these instructions to set up and run the project locally.

Prerequisites

• Node.js (version 18 or higher)
• A Spotify account

Setup

1. Create a Spotify Developer App

   1. Navigate to the Spotify Developer Dashboard and log in.
   2. Click "Create app".
   3. Give your app a name (e.g., "My Playlist Sorter") and a description.
   4. Set the Redirect URI to http://127.0.0.1:4200/callback. This must match exactly.
   5. Enable the Web API checkbox
   6. Agree to the terms and save the app.
   7. Go to your new app's Settings and copy the Client ID.

2. Configure the Application

   1. Clone this repository:

      git clone https://github.com/xgreymx/ordify.git
      cd ordify

   2. Open the file src/environments/environment.ts.
   3. Replace the placeholder YOUR_SPOTIFY_CLIENT_ID with the Client ID you copied from the Spotify Developer Dashboard.

      // src/environments/environment.ts
      export const environment = {
        production: false,
        spotify: {
          clientId: 'your-actual-client-id-here', // <-- PASTE YOUR ID HERE
          redirectUri: 'http://127.0.0.1:4200/callback',
          scopes: [
            'playlist-read-private',
            'playlist-read-collaborative',
            'playlist-modify-public',
            'playlist-modify-private',
            'user-library-read'
          ]
        }
      };

3. Install Dependencies and Run

   1. Install the required npm packages:

      npm install

   2. Start the development server:

      npm start

   3. Open your browser and go to http://127.0.0.1:4200.

Usage

1. Click "Login with Spotify" and authorize the application to access your account.
2. You will be redirected to a list of your playlists. Click on any playlist you own to open the sorter.
3. In the sorter view, configure your sorting criteria. You can add multiple levels for more granular control (e.g., Artist -> Album -> Track).
4. Click "Preview Sort" to see the new order in the track table below.
5. If you're happy with the preview, click "Apply to Spotify". The application will update the track order in your actual Spotify playlist.

How It Works

Ordify interacts directly with the Spotify Web API from your browser.

1. Authentication: It uses the secure OAuth 2.0 Authorization Code Flow with PKCE to obtain an access token from Spotify.
2. Data Fetching: The app calls the Spotify API to fetch your playlists and the full track list for a selected playlist. To enable sorting by genre, it also fetches details for all unique artists in the playlist.
3. Client-Side Sorting: All sorting logic is performed in your browser using the criteria you define. This means your data remains private and is processed quickly.
4. Applying Changes: When you apply a sort, the app sends a request to Spotify's API to replace the tracks in your playlist with a new list of track URIs in the desired order.

Sorting Examples

Example 1: Artist → Album → Track (Alphabetically)

1. First criteria: Artist (Ascending)
2. Second criteria: Album (Ascending)
3. Third criteria: Track Name (Ascending)

This will organize your playlist by artist names alphabetically, then by album names within each artist, then by track names within each album.

Example 2: Release Date (Newest First) → Artist

1. First criteria: Release Date (Descending)
2. Second criteria: Artist (Ascending)

This will show newest releases first, then organize by artist within each time period.

Troubleshooting

"Client ID not found" error

• Make sure you've replaced YOUR_SPOTIFY_CLIENT_ID in src/environments/environment.ts with your actual Client ID

"Redirect URI mismatch" error

• Verify that http://127.0.0.1:4200/callback is added to your Spotify app's Redirect URIs in the Spotify Developer Dashboard

"Authentication failed" error

• Clear your browser's local storage and try logging in again
• Make sure your Spotify app has the correct scopes enabled

Technologies Used

• Framework: Angular
• UI Components: Angular Material
• State Management/Reactivity: RxJS
• API Interaction: Spotify Web API

License

This project is licensed under the Apache 2.0 License. See the LICENSE file for more information.