# Music Portfolio

This project hosts a music portfolio with a **Node.js backend** serving music files and a **React frontend** displaying tracks. This guide explains how to run everything locally, convert music files to MP3, transfer files to your server, and set up the server with Nginx and SSL.

---

## Table of Contents

1. [Prerequisites](#prerequisites)
2. [Local Setup](#local-setup)
3. [Convert Music to MP3](#convert-music-to-mp3)
4. [Deploy to Server](#deploy-to-server)
5. [Server Setup](#server-setup)
6. [Nginx Configuration](#nginx-configuration)

---

## Prerequisites

* Node.js (v18+ recommended)
* npm / yarn
* Python3 + pip
* `pydub` Python library (for conversion)
* `ffmpeg` installed on both local and server machines

Install Python dependencies:

```bash
pip install pydub
```

Install Node dependencies in backend and frontend:

```bash
cd backend
npm install

cd ../frontend
npm install
npm run build
```

---

## Local Setup

### Backend

```bash
cd backend
node server.js
```

By default, the backend runs at:

```
http://localhost:3001
```

### Frontend

```bash
cd frontend
npm start
```

By default, the frontend runs at:

```
http://localhost:3000
```

---

## Convert Music to MP3

All music files must be in the `backend/music` folder. The project includes a Python script:

```bash
cd backend
python3 convert-to-mp3.py
```

This will:

* Convert `.flac`, `.wav`, `.m4a`, `.ogg` files to `.mp3`
* Delete the original files
* Keep the same filename but with `.mp3` extension

---

## Deploy to Server

### Copy Backend & Music Files

```bash
# Replace <user> and <server-ip> with your server details
scp -r backend/* <user>@<server-ip>:/var/www/musicportfolio.keshavanand.net/backend/
```

### Copy Frontend Build

```bash
scp -r frontend/* <user>@<server-ip>:/var/www/musicportfolio.keshavanand.net/frontend/
```

---

## Server Setup

### 1. Backend as a systemd service

Create `/etc/systemd/system/music-portfolio-backend.service`:

```ini
[Unit]
Description=Music Portfolio Backend
After=network.target

[Service]
User=www-data
WorkingDirectory=/var/www/musicportfolio.keshavanand.net/backend
ExecStart=/usr/bin/node server.js
Restart=always
Environment=PORT=3001

[Install]
WantedBy=multi-user.target
```

Enable and start:

```bash
sudo systemctl daemon-reload
sudo systemctl enable music-portfolio-backend
sudo systemctl start music-portfolio-backend
sudo systemctl status music-portfolio-backend
```

---

### 2. Nginx Configuration

Create `/etc/nginx/sites-available/musicportfolio.keshavanand.net`:

```nginx
server {
    server_name musicportfolio.keshavanand.net www.musicportfolio.keshavanand.net;

    root /var/www/musicportfolio.keshavanand.net/frontend/dist;
    index index.html;

    location / {
        try_files $uri /index.html;
    }

    location /api/ {
        proxy_pass http://localhost:3001;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    location /music/ {
        alias /var/www/musicportfolio.keshavanand.net/backend/music/;
        autoindex off;
        types {
            audio/mpeg mp3;
            audio/wav wav;
        }
    }

    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/musicportfolio.keshavanand.net/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/musicportfolio.keshavanand.net/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;
}

server {
    listen 80;
    server_name musicportfolio.keshavanand.net www.musicportfolio.keshavanand.net;
    return 301 https://$host$request_uri;
}
```

Enable site and reload:

```bash
sudo ln -s /etc/nginx/sites-available/musicportfolio.keshavanand.net /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx
```

---

### 3. SSL with Certbot

```bash
sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d musicportfolio.keshavanand.net -d www.musicportfolio.keshavanand.net
```

---

### 4. Permissions

Ensure the backend can read/write files:

```bash
sudo chown -R www-data:www-data /var/www/musicportfolio.keshavanand.net
```

---

## Notes

* Make sure the backend is running before loading the frontend.
* Frontend calls `/api/tracks` to fetch metadata.
* All music files must be in `.mp3` format for consistent browser support.
* Clear browser cache if changes aren’t reflected immediately.