Skip to content

Spotify Social Hub 🎵

A social platform that transforms how music lovers connect, share, and discover music together through Spotify.

🚀 Project Overview

Spotify Social Hub is a dynamic web application that enhances the social aspect of music listening. It allows users to connect their Spotify accounts, discover friends' musical tastes, and collaborate on playlists in real-time.

✨ Key Features

Social Discovery

  • Browse and explore friends' music libraries and playlists
  • Discover new music through community recommendations
  • View real-time listening activity of connected friends

Collaborative Playlists

  • Create collaborative playlists with friends
  • Real-time playlist editing and song suggestions
  • Vote on song additions and playlist changes
  • Track contribution history and member activity

Community Integration

  • Connect with users who share similar music tastes
  • Share playlists with the broader community
  • Follow other users and their musical journey
  • Create music-focused discussion groups

🛠️ Tech Stack

Frontend

  • React.js: Core frontend framework
  • Tailwind CSS: Utility-first CSS framework for styling
  • Spotify Web Playback SDK: For music playback integration

Backend

  • Node.js: Runtime environment
  • Express: Web application framework
  • MongoDB: Database for user data and playlist information

Authentication & API

  • OAuth 2.0: Secure Spotify authentication
  • Spotify Web API: Music data and playback control
  • JWT: User session management

💡 Implementation Highlights

js
// Example of Spotify OAuth Implementation
const   = async (req, res) => {
  const scopes = [
    'user-read-private',
    'user-read-email',
    'playlist-modify-public',
    'playlist-modify-private',
    'user-library-read'
  ];

  res.redirect(`https://accounts.spotify.com/authorize?${
    querystring.stringify({
      response_type: 'code',
      client_id: process.env.SPOTIFY_CLIENT_ID,
      scope: scopes.join(' '),
      redirect_uri: process.env.REDIRECT_URI
    })
  }`);
};

🔑 Core Functionalities

  1. Secure Authentication

    • Spotify OAuth 2.0 integration
    • Secure user sessions with JWT
    • Profile management and settings
  2. Social Features

    • Friend connections and following system
    • Activity feed showing friends' music activities
    • Playlist sharing and recommendations
  3. Playlist Management

    • Create and edit collaborative playlists
    • Real-time updates using WebSocket
    • Voting system for song additions
    • Playlist version history
  4. Music Discovery

    • Personalized music recommendations
    • Genre-based exploration
    • Friend activity-based suggestions

📱 User Interface

The application features a clean, intuitive interface that emphasizes social interaction and music discovery:

  • Modern, responsive design
  • Seamless playlist management
  • Real-time activity feeds
  • Interactive music player
  • User-friendly navigation

🌟 Future Enhancements

  • Advanced Music Analysis: Implement music taste compatibility scoring
  • Group Sessions: Live listening sessions with friends
  • Custom Radio: AI-powered radio stations based on group preferences
  • Event Integration: Concert recommendations based on music taste

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

bash
# Clone the repository
git clone https://github.com/gauravghodinde/playlist-spotify.git

# Install dependencies
npm install

# Start development server
npm run dev

📄 License

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

Note

This project is continually evolving. Check the GitHub repository for the latest updates and features!