Tune Shift Flow

(Check it out: https://tune-shift-flow-9hexdzijt-rugvedshelke17-gmailcoms-projects.vercel.app/)

Tune Shift Flow is a web application that allows users to convert playlists between Spotify and YouTube Music. It provides a simple, step-by-step interface for importing a playlist link, selecting a target platform, and transferring tracks.

Features

• Convert playlists between Spotify and YouTube Music
• OAuth authentication for both platforms
• Progress tracking and conversion feedback
• Responsive, modern UI

Tech Stack

• Frontend: React (with TypeScript)
• Styling: Tailwind CSS
• Icons: Lucide React
• Backend/Auth: Supabase
• APIs: Spotify Web API, YouTube Data API
• Build Tool: Vite

Getting Started

Prerequisites

• Node.js (v18 or higher recommended)
• npm or yarn
• Supabase project for authentication and backend

Installation

1. Clone the repository:

   git clone https://github.com/your-username/tune-shift-flow.git
   cd tune-shift-flow

2. Install dependencies:

   npm install
   # or
   yarn install

3. Set up environment variables:

   Create a .env file in the root directory and add your configuration:

   VITE_SUPABASE_URL=your_supabase_url
   VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
   VITE_SPOTIFY_CLIENT_ID=your_spotify_client_id
   VITE_SPOTIFY_CLIENT_SECRET=your_spotify_client_secret
   VITE_GOOGLE_CLIENT_ID=your_google_client_id
   VITE_GOOGLE_CLIENT_SECRET=your_google_client_secret
   

4. Configure OAuth Redirect URIs:

   • In your Google Cloud Console and Spotify Developer Dashboard, add the following redirect URIs:
     • For local development: http://localhost:3000/auth/youtube/callback
     • For Supabase: https://<your-supabase-project>.supabase.co/auth/v1/callback
     • For production: your deployed app URL

5. Start the development server:

   npm run dev
   # or
   yarn dev

   The app will be available at http://localhost:3000.

Usage

1. Paste your Spotify or YouTube Music playlist link.
2. Select the target platform.
3. Authenticate with the target platform.
4. Start the conversion and wait for completion.
5. Create the playlist on the target platform.

Troubleshooting

• OAuth redirect errors:
  Ensure all redirect URIs used by your app are registered in your Google and Spotify developer dashboards.
• Supabase provider errors:
  Make sure the OAuth providers are enabled and configured in your Supabase project.

License

MIT

Credits

• Built with React, Supabase, Spotify Web API, and YouTube Data API.