Song Sieve

This Song Sieve application allows users to interact with Spotify playlists, fetching track data from the Spotify API, providing filtering options, and allowing users to create new playlists based on their preferences.

Getting Started

1. Clone the repository:

   git clone https://github.com/LorenaCapraru/song-sieve
   

2. Install dependencies

   npm install
   

3. Set up Firebase:

• Create a Firebase project: Firebase Console.
• Obtain your Firebase configuration and update it in src/firebase/firebase.ts.
• Enable Firebase Authentication (e.g., Email/Password) and Firestore Database.

4. Set up Spotify API:

• Create a Spotify Developer account and register your app: Spotify Developer Dashboard.
• Obtain your Spotify client ID and secret ID and update them in src/constants.js.

5. Run the app:

npm run dev

6. Access the application at http://localhost:3000/

Build with

• Next.js as Framework
• Firebase for Authentication and for Database Storage and Management
• Typescript as Language
• Recoil for Efficient State Management Across Components
• Spotify API to retrieve data from Spotify.

Usage

• Sign in with your Github/Google/Email account.
• Copy a Spotify playlist ID into the app.
• Fetch and view the playlist tracks.
• Apply filters based on track length or explicit content.
• Create a new playlist with the filtered tracks.

Features

1. Copy Playlist ID:

   • Users can input a Spotify playlist ID into the app to fetch the playlist data.
   

2. Fetch Playlist Tracks:

   • The app fetches the list of tracks in the specified Spotify playlist using the Spotify API.
   

3. Filter Playlist Tracks:

   • Users can filter the playlist based on various metrics:
     • Track Length
     • Explicit Content
   

4. User Authentication and Database:

   • Firebase authentication is used for user sign-in.
   • User-specific playlist data is stored in a Firebase database.
   

5. Create New Playlist:

   • User can create new playlist based on the filtered tracks
   

6. Add a Song to the Playlist or Create new Playlist:

   • User can add a song to the playlist or create a new one
   

7. Navigate through the pages accessed using Back/Forward buttons:

   • User can navigate through the pages accessed using Back/Forward buttons
   

Contributing

Contributions are welcome! Feel free to open issues or submit pull requests.