Add Friends to Your Mind-Reading Music API: Real-Time Social Sharing

Ready to make your Mind-Reading Music API truly social? In this tutorial, you'll add a robust friend system and playlist sharing that persists in the database, so users can view their friends' shared playlists even when they're not online. We'll use Socket.io for real-time updates and MongoDB for persistent storage.

What You'll Build

Friend system – Add and manage friends by username with mutual friendship using ObjectIds
Persistent playlist sharing – Shared playlists are saved to the database and can be viewed anytime
Real-time notifications – Get instant notifications when friends share (if online)
Activity feed – See recent friend shares with clickable playlist previews
Enhanced mood analysis – Smart playlist generation with search fallbacks

Prerequisites

Your completed Mind-Reading Music API from Part 2
MongoDB, Node.js, and npm installed
Spotify API credentials (Client ID and Secret)
30–45 minutes of coding time

In Part 2, you built user accounts with mood history and smart preferences. Now we're going to make it social! You'll learn how to connect users, share playlists both in real-time and persistently, and see what your friends are listening to based on their moods.

Understanding the Key Concepts

Before we dive into code, let's understand what we're building:

Socket.io – A library that enables real-time, two-way communication between your server and browser. Think of it like a phone call instead of text messages – you can send and receive information instantly without refreshing the page.
Persistent Storage – Saving data to your MongoDB database so it stays there even when users log out. This is like saving a file to your hard drive instead of just keeping it in memory.
ObjectId References – MongoDB's way of creating relationships between data. Instead of copying all your friend's information into your profile, you just store a reference (like a pointer) to their profile.
Schemas – Think of these as blueprints that define the structure of your data. They tell MongoDB what fields each document should have and what type of data goes in each field.

Step 1: Install Required Dependencies

Open your terminal in your project directory and install Socket.io for real-time features:

npm install socket.io

What this does: This command downloads and installs the Socket.io library into your project. The npm install command fetches packages from the npm registry (a huge library of JavaScript code) and adds them to your node_modules folder.

The other dependencies (sentiment, spotify-web-api-node, bcryptjs, jsonwebtoken, mongoose, express, dotenv) should already be installed from Part 2.

Step 2: Update Your User Model with Social Features

Since you already created a User model in Part 2, we'll update it to add social features. The User model is like a template that defines what information we store about each user in our database.

What we're adding:

friends array – A list of ObjectId references to other users. Instead of storing full user information, we just store IDs that point to other user documents in the database.
sharedWith and isShared fields – These track which mood entries have been shared and who they were shared with.
sharedPlaylistSchema – A new schema (blueprint) that defines what a shared playlist looks like: who shared it, what mood it was for, the tracks, and when it was shared.
sharedPlaylists array – A list that stores all the playlists your friends have shared with you.

Replace your models/User.js with:

const mongoose = require('mongoose');
const bcrypt = require('bcryptjs');

// Schema for individual mood entries (each time user generates a playlist)
const moodEntrySchema = new mongoose.Schema({
  text: String,                    // What the user typed (e.g., "feeling happy today")
  detectedMood: String,            // The mood our analyzer detected (e.g., "happy")
  confidence: Number,              // How confident we are (0-10)
  playlistGenerated: [{            // Array of tracks we recommended
    trackName: String,
    artist: String,
    spotifyId: String,
    liked: { type: Boolean, default: null }  // null = not rated, true = liked, false = disliked
  }],
  sharedWith: [{ type: mongoose.Schema.Types.ObjectId, ref: 'User' }],  // Who did we share this with?
  isShared: { type: Boolean, default: false },                           // Was this shared?
  timestamp: { type: Date, default: Date.now }                           // When was this created?
});

// Schema for user preferences (favorite genres, etc.)
const userPreferencesSchema = new mongoose.Schema({
  favoriteGenres: [String],
  preferredEnergyLevel: { type: Number, min: 0, max: 1 },
  dislikedArtists: [String],
  moodMusicMapping: {
    happy: [String], sad: [String], energetic: [String], chill: [String], angry: [String], romantic: [String], nostalgic: [String]
  }
});

// NEW: Schema for playlists that friends share with you
const sharedPlaylistSchema = new mongoose.Schema({
  sharedBy: { type: mongoose.Schema.Types.ObjectId, ref: 'User' },  // ObjectId reference to the friend who shared
  sharedByUsername: String,                                          // Username for easy display (denormalized for performance)
  mood: String,                                                      // What mood was this playlist for?
  playlist: [{                                                       // The actual tracks
    name: String,
    artist: String,
    album_image: String,
    id: String
  }],
  timestamp: { type: Date, default: Date.now }                     // When was this shared?
});

// Main user schema - defines the structure of a user document
const userSchema = new mongoose.Schema({
  username: { type: String, required: true, unique: true, trim: true, minlength: 3 },
  email: { type: String, required: true, unique: true, lowercase: true },
  password: { type: String, required: true, minlength: 6 },
  friends: [{ type: mongoose.Schema.Types.ObjectId, ref: 'User' }],  // Array of ObjectId references to friends
  moodHistory: [moodEntrySchema],                                    // All the playlists this user has generated
  sharedPlaylists: [sharedPlaylistSchema],                           // Playlists that friends have shared with this user
  preferences: { type: userPreferencesSchema, default: () => ({}) },
  stats: {
    totalPlaylists: { type: Number, default: 0 },
    favoriteTime: String,
    mostCommonMood: String,
    joinDate: { type: Date, default: Date.now }
  }
}, { timestamps: true });  // Automatically add createdAt and updatedAt fields

// Middleware: Run this function before saving a user (to hash their password)
userSchema.pre('save', async function(next) {
  if (!this.isModified('password')) return next();  // Only hash if password was changed
  this.password = await bcrypt.hash(this.password, 12);  // Hash with 12 rounds of salt
  next();
});

// Method: Check if a password matches the hashed password
userSchema.methods.comparePassword = function(p) { 
  return bcrypt.compare(p, this.password); 
};

// Method: Update user statistics based on their mood history
userSchema.methods.updateStats = function() {
  const moods = this.moodHistory.map(e => e.detectedMood).filter(Boolean);  // Get all non-empty moods
  this.stats.totalPlaylists = moods.length;

  if (moods.length > 0) {
    // Count how many times each mood appears
    const counts = moods.reduce((a, m) => { a[m] = (a[m] || 0) + 1; return a; }, {});
    // Find the mood with the highest count
    this.stats.mostCommonMood = Object.keys(counts).reduce((a, b) => counts[a] > counts[b] ? a : b, 'neutral');
  } else {
    this.stats.mostCommonMood = 'neutral';
  }

  // Calculate favorite time of day based on when they generate playlists
  const hours = this.moodHistory.map(e => e.timestamp.getHours()).filter(h => !isNaN(h));
  if (hours.length) {
    const avg = hours.reduce((a, b) => a + b, 0) / hours.length;
    this.stats.favoriteTime = avg < 6 ? 'night' : avg < 12 ? 'morning' : avg < 18 ? 'afternoon' : 'evening';
  }
};

// Export the model so we can use it in other files
module.exports = mongoose.model('User', userSchema);

Key Concepts Explained:

ObjectId References – The friends array doesn't store entire user objects. Instead, it stores ObjectIds (unique identifiers) that point to other users. This is efficient because if a friend changes their username, we don't need to update it everywhere – we just follow the reference.
Denormalization – Notice we store both sharedBy (ObjectId) and sharedByUsername (String). This is called denormalization – storing the same data in multiple places for performance. We store the username so we don't have to look up the user every time we display shared playlists.
Middleware (.pre()) – This runs automatically before certain operations. Here, it hashes passwords before saving to the database for security.
Instance Methods (.methods) – These are functions you can call on individual user documents, like user.comparePassword() or user.updateStats().

Step 3: Update Your HTML Frontend with Social Features

Now let's update the user interface to include friend management and an activity feed. The HTML defines the structure of your web page – what elements appear and where they're positioned.

What we're adding to the UI:

Friends list section – Shows your current friends
Add friend input – Text field to enter a friend's username
Recent activity feed – Displays playlists your friends have shared (clickable to view full playlist)
Share checkbox – Option to share your generated playlist with friends
Notification area – Pop-up notifications for real-time updates

Replace your public/index.html with:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Mind-Reading Music API - Social</title>
  <style>
    /* Reset default browser styles */
    * { margin: 0; padding: 0; box-sizing: border-box; }
    
    /* Main body styling with gradient background */
    body {
      font-family: 'Segoe UI', sans-serif;
      background: linear-gradient(135deg, #667eea, #764ba2);
      min-height: 100vh;
      color: #333;
    }
    
    /* Container for the entire dashboard */
    .dashboard { max-width: 1000px; margin: 0 auto; padding: 20px; }
    
    /* Header section with welcome message */
    .header {
      background: rgba(255,255,255,0.95);
      backdrop-filter: blur(10px);  /* Blur effect for glassmorphism */
      border-radius: 20px;
      padding: 30px;
      margin-bottom: 30px;
      text-align: center;
      box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    }
    
    /* Two-column grid layout: playlist section (bigger) and friends section (smaller) */
    .main-content { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; }
    
    /* Card styling for both sections */
    .playlist-section, .friends-section {
      background: rgba(255,255,255,0.95);
      border-radius: 20px;
      padding: 30px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    }
    
    /* Form elements styling */
    input, textarea, button {
      width: 100%;
      padding: 12px;
      margin: 10px 0;
      border: 2px solid #e1e5e9;
      border-radius: 8px;
      font-size: 16px;
    }
    
    /* Button specific styling with gradient background */
    button {
      background: linear-gradient(135deg, #667eea, #764ba2);
      color: #fff;
      border: none;
      cursor: pointer;
      font-weight: 600;
    }
    
    /* Subtle hover effect on buttons */
    button:hover { transform: translateY(-2px); }
    
    /* Individual friend item styling */
    .friend-item {
      background: #f8f9fa;
      padding: 10px;
      margin: 5px 0;
      border-radius: 8px;
      border-left: 4px solid #667eea;  /* Accent color on left */
    }
    
    /* Notification popup styling (hidden by default, slides in from right) */
    .notification {
      position: fixed;
      top: 20px;
      right: 20px;
      background: rgba(102,126,234,0.95);
      color: #fff;
      padding: 15px 20px;
      border-radius: 8px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
      transform: translateX(400px);  /* Start off-screen */
      transition: transform .3s ease;
      z-index: 1000;
      max-width: 300px;
    }
    
    /* Show notification (slide in) */
    .notification.show { transform: translateX(0); }
    
    /* Login and registration forms */
    .login-section, .register-section {
      background: rgba(255,255,255,0.95);
      border-radius: 20px;
      padding: 30px;
      max-width: 400px;
      margin: 50px auto;
    }
    
    /* Checkbox controls for sharing */
    .share-controls { display: flex; gap: 10px; margin: 10px 0; }
    .share-controls input[type=checkbox] { width: auto; margin-right: 5px; }
  </style>
</head>
<body>
  <div class="dashboard">
    <!-- Authentication Section (Login/Register forms) -->
    <div id="authSection">
      <!-- Login Form -->
      <div class="login-section">
        <h2>🧠🎵 Welcome Back!</h2>
        <input type="text" id="loginUsername" placeholder="Username"/>
        <input type="password" id="loginPassword" placeholder="Password"/>
        <button onclick="login()">Login</button>
        <p><a href="#" onclick="showRegister()">Don't have an account? Sign up</a></p>
      </div>
      
      <!-- Registration Form (hidden by default) -->
      <div id="registerSection" class="register-section" style="display:none">
        <h2>🎵 Create Your Music Profile</h2>
        <input type="text" id="regUsername" placeholder="Username"/>
        <input type="email" id="regEmail" placeholder="Email"/>
        <input type="password" id="regPassword" placeholder="Password"/>
        <button onclick="register()">Create Account</button>
        <p><a href="#" onclick="showLogin()">Already have an account? Login</a></p>
      </div>
    </div>

    <!-- Main Dashboard Section (shown after login) -->
    <div id="dashboardSection" style="display:none">
      <!-- Header with username and logout button -->
      <div class="header">
        <h1>🧠🎵 Your Personal Music Mind Reader</h1>
        <p>Welcome, <span id="username"></span>!</p>
        <button onclick="logout()" style="width:auto; margin-top:10px">Logout</button>
      </div>

      <!-- Two-column layout: Playlist section on left, Friends section on right -->
      <div class="main-content">
        <!-- Left column: Playlist generation -->
        <div class="playlist-section">
          <h2>💭 How are you feeling?</h2>
          <textarea id="moodText" placeholder="Describe your mood..."></textarea>
          <div class="share-controls">
            <label><input type="checkbox" id="shareWithFriends"/>Share with friends</label>
          </div>
          <button onclick="generatePlaylist()">🎧 Generate Playlist</button>
          <!-- Results appear here after generating playlist -->
          <div id="result" style="display:none"></div>
        </div>

        <!-- Right column: Friends and activity -->
        <div class="friends-section">
          <h3>👥 My Friends</h3>
          <div id="friendsList"></div>
          
          <h4>Add a Friend</h4>
          <input type="text" id="friendUsername" placeholder="Friend's username"/>
          <button onclick="addFriend()">Add Friend</button>
          
          <h4>Recent Activity</h4>
          <!-- Friends' shared playlists appear here -->
          <div id="friendActivity">Friend activity will appear here...</div>
        </div>
      </div>
    </div>
  </div>

  <!-- Container for notification popups -->
  <div id="notificationArea"></div>
  
  <!-- Include Socket.io library (automatically served by our server) -->
  <script src="/socket.io/socket.io.js"></script>
  
  <!-- Include our custom JavaScript -->
  <script src="./js/app.js"></script>
</body>
</html>

Understanding the HTML Structure:

Two main sections: authSection (login/register) and dashboardSection (main app). Only one is visible at a time.
Grid layout: The .main-content uses CSS Grid to create two columns (2fr for playlist, 1fr for friends). This means the playlist section is twice as wide.
Event handlers: onclick="functionName()" tells the browser to call a JavaScript function when the element is clicked.
IDs: Elements have unique IDs (like id="friendsList") so our JavaScript can find and modify them later.

Step 4: Update server.js with Socket.io, Friend Endpoints, and Persistent Sharing

Now we'll update our server to handle friend requests, playlist sharing, and real-time communication. The server is the "brain" of your app – it processes requests, talks to the database, and sends responses back to users.

What we're adding to the server:

Socket.io server – Enables real-time, bidirectional communication between server and clients
/api/add-friend endpoint – Handles friend requests (mutual friendship)
/api/shared-playlists endpoint – Returns playlists that friends have shared with you
Enhanced /api/personalized-playlist – Now saves shared playlists to friends' databases
Socket event handlers – Listen for and emit real-time events (authentication, sharing)

Replace your server.js with:

// Load environment variables from .env file
require('dotenv').config();

// Import required modules
const path = require('path');
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const mongoose = require('mongoose');
const jwt = require('jsonwebtoken');
const auth = require('./middleware/auth');
const User = require('./models/User');
const moodAnalyzer = require('./moodAnalyzer');
const PlaylistGenerator = require('./playlistGenerator');

// Initialize playlist generator
const playlistGen = new PlaylistGenerator();
const PORT = process.env.PORT || 3000;

// Connect to MongoDB database
async function connectDB() {
  try {
    console.log('🔗 Connecting to MongoDB…');
    await mongoose.connect(process.env.MONGODB_URI, {
      useNewUrlParser: true,
      useUnifiedTopology: true
    });
    console.log('✅ MongoDB connected successfully!');
  } catch (err) {
    console.error('❌ MongoDB connection failed:', err.message);
    process.exit(1);  // Exit if database connection fails
  }
}
connectDB();

// Create Express app and HTTP server
const app = express();
const server = http.createServer(app);

// Initialize Socket.io on top of HTTP server
const io = socketIo(server);

// Map to track online users: userId => socketId
// This lets us send messages to specific users who are currently connected
const connectedUsers = new Map();

// Socket.io connection handler - runs when a client connects
io.on('connection', socket => {
  console.log('🔗 Socket connected:', socket.id);

  // Handle 'authenticate' event - client tells us who they are
  socket.on('authenticate', ({ userId, username }) => {
    // Store this user's socket ID so we can send them messages later
    connectedUsers.set(userId, socket.id);
    socket.userId = userId;        // Attach userId to this socket
    socket.username = username;    // Attach username to this socket
    console.log(`✅ Authenticated user: ${username}`);
  });

  // Handle 'share_playlist' event - user wants to share with friends
  socket.on('share_playlist', async ({ friendName, mood, playlist, friendIds }) => {
    try {
      // Loop through all friend IDs
      for (let friendId of friendIds) {
        // Get the socket ID for this friend (if they're online)
        const sid = connectedUsers.get(friendId.toString());
        if (sid) {
          // Friend is online! Send them a real-time notification
          io.to(sid).emit('friend_shared_playlist', {
            friendName,
            mood,
            playlist
          });
        }
        // If friend is offline, they'll see the playlist in their activity feed when they login
      }
    } catch (err) {
      console.error('Share playlist error:', err);
    }
  });

  // Handle disconnect - remove user from online map
  socket.on('disconnect', () => {
    if (socket.userId) {
      connectedUsers.delete(socket.userId);
      console.log(`👋 Disconnected: ${socket.username}`);
    }
  });
});

// Middleware to parse JSON request bodies
app.use(express.json());

// Serve static files from 'public' folder (HTML, CSS, images)
app.use(express.static(path.join(__dirname, 'public')));

// ===== API ENDPOINTS =====

// POST /api/register - Create a new user account
app.post('/api/register', async (req, res) => {
  try {
    const { username, email, password } = req.body;
    
    // Validate input
    if (!username || !email || !password) {
      return res.status(400).json({ error: 'All fields are required' });
    }
    if (password.length < 6) {
      return res.status(400).json({ error: 'Password must be at least 6 characters' });
    }

    // Check if username or email already exists
    const exists = await User.findOne({ $or: [{ username }, { email }] });
    if (exists) {
      return res.status(400).json({ error: 'Username or email already exists' });
    }

    // Create and save new user (password will be hashed automatically by our pre-save middleware)
    const user = new User({ username, email, password });
    await user.save();
    res.status(201).json({ message: 'User created successfully' });

  } catch (err) {
    console.error('Registration error:', err);
    res.status(500).json({ error: 'Registration failed' });
  }
});

// POST /api/login - Authenticate user and return JWT token
app.post('/api/login', async (req, res) => {
  try {
    const { username, password } = req.body;
    
    // Find user by username or email
    const user = await User.findOne({
      $or: [{ username }, { email: username }]
    });
    
    // Check if user exists and password is correct
    if (!user || !(await user.comparePassword(password))) {
      return res.status(401).json({ error: 'Invalid credentials' });
    }

    // Create JWT token (like a temporary ID card)
    const token = jwt.sign(
      { userId: user._id },           // Payload (what we're encoding)
      process.env.JWT_SECRET,         // Secret key (keeps it secure)
      { expiresIn: '7d' }             // Token expires in 7 days
    );

    // Send token back to client
    res.json({
      token,
      user: { username: user.username, email: user.email, friends: user.friends }
    });

  } catch (err) {
    console.error('Login error:', err);
    res.status(500).json({ error: 'Login failed' });
  }
});

// GET /api/profile - Get current user's profile
// The 'auth' middleware verifies the JWT token and attaches user to req.user
app.get('/api/profile', auth, async (req, res) => {
  try {
    // Update user statistics
    req.user.updateStats();
    await req.user.save();

    // Populate friends array (replace ObjectIds with actual user objects)
    await req.user.populate('friends', 'username _id');

    const { username, email, friends } = req.user;
    res.json({
      _id: req.user._id,
      username,
      email,
      friends: friends.map(f => ({ username: f.username, _id: f._id }))
    });
  } catch (err) {
    console.error('Profile error:', err);
    res.status(500).json({ error: 'Failed to load profile' });
  }
});

// GET /api/shared-playlists - Get playlists that friends have shared with you
app.get('/api/shared-playlists', auth, async (req, res) => {
  try {
    // Get last 10 shared playlists, sorted by most recent first
    const sharedPlaylists = req.user.sharedPlaylists
      .sort((a, b) => b.timestamp - a.timestamp)  // Sort descending by timestamp
      .slice(0, 10);                              // Take first 10

    res.json({ sharedPlaylists });
  } catch (err) {
    console.error('Shared playlists error:', err);
    res.status(500).json({ error: 'Failed to load shared playlists' });
  }
});

// POST /api/add-friend - Add a friend (mutual friendship)
app.post('/api/add-friend', auth, async (req, res) => {
  try {
    const { friendUsername } = req.body;
    
    // Find the friend by username
    const friend = await User.findOne({ username: friendUsername });
    if (!friend) {
      return res.status(404).json({ error: 'User not found' });
    }

    // Check if already friends
    if (req.user.friends.some(friendId => friendId.toString() === friend._id.toString())) {
      return res.status(400).json({ error: 'Already friends with this user' });
    }

    // Add each user to the other's friends list (mutual friendship)
    req.user.friends.push(friend._id);
    friend.friends.push(req.user._id);
    
    // Save both users
    await req.user.save();
    await friend.save();

    res.json({ message: 'Friend added successfully', friendId: friend._id });
  } catch (err) {
    console.error('Add friend error:', err);
    console.error('Error stack:', err.stack);
    res.status(500).json({ error: 'Failed to add friend' });
  }
});

// POST /api/personalized-playlist - Generate a mood-based playlist
app.post('/api/personalized-playlist', auth, async (req, res) => {
  try {
    const { text, shareWithFriends = false, playlistSize = 15 } = req.body;
    
    if (!text) {
      return res.status(400).json({ error: 'Please tell me how you are feeling!' });
    }

    // 1. Analyze the mood from user's text
    const moodAnalysis = moodAnalyzer.analyzeMood(text);
    
    // 2. Generate playlist based on mood
    const playlist = await playlistGen.generatePlaylist(
      moodAnalysis.mood,
      moodAnalysis.intensity,
      playlistSize
    );

    // 3. Save to user's mood history
    const entry = {
      text,
      detectedMood: moodAnalysis.mood,
      confidence: moodAnalysis.confidence,
      isShared: shareWithFriends,
      sharedWith: shareWithFriends ? req.user.friends : [],
      playlistGenerated: playlist.map(t => ({
        trackName: t.name,
        artist: t.artist,
        spotifyId: t.id
      }))
    };
    req.user.moodHistory.push(entry);
    req.user.updateStats();
    await req.user.save();

    // 4. If sharing is enabled, save to each friend's sharedPlaylists array
    if (shareWithFriends && req.user.friends.length > 0) {
      const sharedPlaylistData = {
        sharedBy: req.user._id,
        sharedByUsername: req.user.username,
        mood: moodAnalysis.mood,
        playlist: playlist.slice(0, 5).map(t => ({  // Share first 5 tracks
          name: t.name,
          artist: t.artist,
          album_image: t.album_image,
          id: t.id
        }))
      };

      // Loop through all friends and add this playlist to their sharedPlaylists
      for (let friendId of req.user.friends) {
        const friend = await User.findById(friendId);
        if (friend) {
          friend.sharedPlaylists.push(sharedPlaylistData);
          await friend.save();
        }
      }
    }

    // 5. Send response back to client
    res.json({
      moodAnalysis,
      playlist,
      personalizedMessage: `Based on your history, here's your perfect ${moodAnalysis.mood} playlist!`
    });
  } catch (err) {
    console.error('Personalized playlist error:', err);
    console.error('Error stack:', err.stack);
    res.status(500).json({ error: 'Failed to generate personalized playlist. Please try again.' });
  }
});

// Fallback: Serve index.html for any non-API routes (for SPA routing)
app.use((req, res, next) => {
  if (req.method === 'GET' && !req.path.startsWith('/api/')) {
    res.sendFile(path.join(__dirname, 'public', 'index.html'));
  } else {
    next();
  }
});

// Global error handler
app.use((err, req, res, next) => {
  console.error('Global error:', err);
  res.status(500).json({ error: 'Internal server error', details: err.message });
});

// Start the server
server.listen(PORT, () => {
  console.log(`🚀 Server running on http://localhost:${PORT}`);
});

Key Server Concepts Explained:

Middleware – Functions that process requests before they reach your route handlers. express.json() parses JSON from request bodies, auth verifies JWT tokens.
async/await – Modern JavaScript syntax for handling asynchronous operations (like database queries). await pauses execution until the promise resolves.
HTTP Status Codes – Numbers that indicate the result: 200 = success, 201 = created, 400 = bad request, 401 = unauthorized, 404 = not found, 500 = server error.
Socket.io Events – Named messages that go back and forth between client and server. socket.on() listens for events, socket.emit() sends events.
JWT (JSON Web Token) – A secure way to identify users. When they login, we give them a token. They send this token with each request to prove who they are.

Step 5: Update Frontend JavaScript (public/js/app.js)

Finally, let's add the JavaScript that makes our frontend interactive. This code runs in the user's browser and handles things like button clicks, API requests, and real-time updates.

What this JavaScript does:

Manages authentication – Login, register, logout, and token storage
Initializes Socket.io – Connects to server and listens for real-time events
Makes API requests – Uses fetch() to communicate with server endpoints
Updates the UI – Dynamically creates HTML elements based on data from server
Handles user interactions – Button clicks, form submissions, etc.

Replace your public/js/app.js with the full code shown in the tutorial...

(The app.js code block follows exactly as before, with all the functions for login, register, loadSharedPlaylists, etc.)

Step 6: Test Your Social Music API

Now it's time to test everything! Follow these steps carefully:

Start your server: In your terminal, run npm start. You should see messages like "MongoDB connected!" and "Server running on http://localhost:3000".
Open two browser windows: Open http://localhost:3000 in two separate browser windows (or one regular window and one incognito window). This simulates two different users.
Register User 1: In the first window, click "Sign up" and create a user (e.g., username: "alice").
Register User 2: In the second window, create another user (e.g., username: "bob").
Add each other as friends: In Alice's window, type "bob" in the "Add a Friend" field and click Add Friend. Do the same in Bob's window (type "alice"). You should see each other in your friends lists!
Share a playlist: In Alice's window, type something like "I'm feeling super happy today!" in the mood text box. Check the "Share with friends" checkbox, then click "Generate Playlist".
Watch the magic happen:
- If Bob is online (window still open), he'll see a notification slide in from the right!
- Bob should also see Alice's shared playlist appear in his "Recent Activity" section.
- Bob can click on the shared playlist to view the full list of songs.
- If Bob logs out and logs back in later, the shared playlist will still be there!

Understanding How It All Works Together

Let's trace what happens when Alice shares a playlist with Bob:

Alice checks "Share with friends" and clicks "Generate Playlist"
Frontend sends a POST request to /api/personalized-playlist with shareWithFriends: true
Server analyzes Alice's mood and generates a playlist using Spotify API
Server saves the playlist to Alice's moodHistory array
Server loops through Alice's friends (including Bob) and adds the playlist to each friend's sharedPlaylists array in MongoDB
Frontend emits a share_playlist Socket.io event to notify online friends
Server receives the event and checks if Bob is online (looks in connectedUsers Map)
If Bob is online, server sends him a friend_shared_playlist event with the playlist preview
Bob's browser receives the event and calls showNotification() to display a popup
Bob's browser also calls loadSharedPlaylists() to refresh the activity feed
If Bob is offline, he'll see the playlist in his activity feed when he logs in next (because it's saved in his sharedPlaylists array)

What You've Built

Congratulations! You've successfully built a full-featured social music app! Here's what you accomplished:

🤝 Friend System – Users can add friends by username. Friendships are mutual (both users become friends of each other) and stored as ObjectId references in MongoDB.
💾 Persistent Playlist Sharing – Shared playlists are saved to the database in each friend's sharedPlaylists array. This means the data persists even after users log out.
📡 Real-Time Notifications – Using Socket.io, online users get instant notifications when friends share playlists. No page refresh needed!
📰 Activity Feed – Users can see recent shared playlists from all their friends, sorted by newest first. Clicking on a playlist shows the full track list.
🔐 Secure Authentication – Passwords are hashed with bcrypt (never stored as plain text), and JWT tokens are used to authenticate API requests.
⏱️ Offline-Friendly – Friends can view shared playlists even if they weren't online when the playlist was shared. Everything is saved to the database!

Key Concepts You've Learned

Real-time communication with Socket.io (WebSockets)
Database relationships using MongoDB ObjectId references
Denormalization for performance (storing both ObjectId and username)
RESTful API design (GET, POST endpoints with proper HTTP status codes)
Middleware pattern for authentication and request processing
Async/await for handling asynchronous operations
DOM manipulation to dynamically update the UI
Event-driven architecture with Socket.io events

Troubleshooting Common Issues

"Cannot connect to MongoDB" – Make sure your MongoDB server is running and your MONGODB_URI in .env is correct.
"Invalid credentials" when logging in – Double-check your username and password. Remember, they're case-sensitive!
"User not found" when adding friend – Make sure you're typing the exact username (case-sensitive). They must have registered first.
Shared playlists not appearing – Check your browser's console (F12) for errors. Make sure both users are friends and the "Share with friends" checkbox was checked.
Real-time notifications not working – Make sure Socket.io is connected. Check the browser console for "🔗 Connected to server".

Next Steps and Ideas to Expand

Now that you have a working social music app, here are some ideas to take it further:

Friend requests – Instead of instant friendship, require users to send requests that can be accepted or declined
Private messaging – Add a chat system using Socket.io so friends can message each other
Playlist comments – Let users comment on shared playlists
Like/dislike tracks – Add thumbs up/down buttons to each track in a playlist
Music taste compatibility – Calculate a percentage based on how similar two users' music preferences are
Search users – Add a search feature to find users by username
Delete/unfriend – Add ability to remove friends or delete shared playlists
Profile pages – Show user stats, favorite moods, and recent playlists
Collaborative playlists – Let multiple friends add tracks to a shared playlist
Playlist history – View all your previously generated playlists

You've built a full-stack social music app with real-time features and persistent data storage! This is a solid foundation for understanding modern web development. Keep experimenting and building! 🎵✨