Creating a Spotify Song Downloader: Dancing with `spotdl`, React, and Express 🎵💃🚀

// ----- Imports -----
import React, { useState } from 'react';
import styled from 'styled-components';
import Swal from 'sweetalert2';
import 'bootstrap/dist/css/bootstrap.min.css';

// ----- Styled Components -----

// Container components
const ScrollContainer = styled.div`
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100vh;
`;
const SectionsContainer = styled.div`
  max-height: 40vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
`;

// Layout and positioning components
const Section = styled.div`
  min-height: 100vh;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  // align-items: center;
`;
const TableContainer = styled.div`
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  margin: 20px;
`;
const InputGroupContainer = styled.div`
  display: flex;
  justify-content: center;
`;

// List and item components
const ListContainer = styled.div`
  height: 20vh; 
  overflow-y: scroll;
`;

// ----- App Component -----
export default function App() {
  // State hooks
  const [sections, setSections] = useState([{ songUrl: '', audioFormat: 'mp3', urlList: [] }]);

  // Handle adding song URL and downloading
  const handleAddUrl = async (index) => {
    const newSections = [...sections];
    const section = newSections[index];

    try {
      const response = await fetch('http://localhost:3001/api/download', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ url: section.songUrl, format: section.audioFormat }),
      });

      if (response.ok) {
        const data = await response.json();
        section.urlList = [section.songUrl, ...section.urlList];
        newSections[index] = section;
        setSections(newSections);
        Swal.fire({ icon: 'success', title: 'OK', showConfirmButton: false, timer: 1000 });
      } else {
        Swal.fire({ icon: 'error', title: 'Song not found', showConfirmButton: false, timer: 1000 });
      }
    } catch (error) {
      Swal.fire({ icon: 'error', title: 'Song not found', showConfirmButton: false, timer: 1000 });
    }

    // Clear the input
    section.songUrl = '';
    newSections[index] = section;
    setSections(newSections);
  };

  const addSection = () => {
    setSections([...sections, { songUrl: '', audioFormat: 'mp3', urlList: [] }]);
  };

  // Main render
  return (
    <ScrollContainer>
      {/* Intro Section */}
      <Section className="container-fluid text-center">
        <h1 className="display-3">Download Spotify Songs with <code>spotdl</code></h1>
        <h1 className="display-5 text-center my-4">How to Download Music with SpotDL</h1>
        <p className="text-center mb-4">
          SpotDL is a utility that allows you to download music from Spotify directly to your computer. Here's a simple guide on how to use it with terminal commands.
        </p>
      </Section>

      {/* Command Table Section */}
      <Section className="container-fluid text-center">
        <TableContainer>
          <table className="table table-bordered">
            <thead>
              <tr>
                <th className="text-center">Command</th>
                <th className="text-center">Description</th>
              </tr>
            </thead>
            <tbody>
              {/* Commands */}
              <tr>
                <td className="text-center"><code>spotdl [trackUrl]</code></td>
                <td className="text-center">Download a track by its Spotify URL</td>
              </tr>
              {/* ... other commands ... */}
            </tbody>
          </table>
        </TableContainer>
        {/* Command Examples */}
        {/* ... */}
      </Section>

      {/* Download Section */}
      <Section className="container-fluid text-center">
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: '1rem' }}>
          <button className="btn btn-success w-25" style={{ width: 'auto' }} onClick={addSection}>New Section</button>
        </div>
        <SectionsContainer>
          {/* Iterating through sections for download */}
          {/* ... */}
        </SectionsContainer>
      </Section>
    </ScrollContainer>
  );
}

// ----- Imports -----
const express = require('express');
const cors = require('cors');
const { exec } = require('child_process');

// ----- Express App Configuration -----
const app = express();

// Middleware setup
app.use(cors());           // Enable CORS for all routes
app.use(express.json());   // For parsing application/json

// ----- Routes -----

// POST endpoint for song download
app.post('/api/download', (req, res) => {
    // Destructuring to get URL and format from the request body
    const { url, format } = req.body;

    // IMPORTANT: Always be cautious when running shell commands from user input.
    // Sanitize and validate the input to prevent malicious code execution.
    exec(`spotdl ${url}`, (error, stdout, stderr) => {
        if (error) {
            // Handle command execution errors
            return res.status(500).json({ error: 'Download failed' });
        }

        // Ideally, you'd return something more substantial here.
        // For example, you might return a download link or save the song info.
        res.status(200).json({ success: true, message: 'Downloaded successfully!' });
    });
});

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

http POST http://localhost:3001/api/download url=<Spotify_URL> format=mp3