Initial clean commit

2026-04-27 22:12:43 -05:00
commit 7166e8ed21
13 changed files with 3937 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,50 @@
+# Node modules
+node_modules/
+**/node_modules/
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# dotenv files
+.env
+.env.local
+.env.*.local
+
+# Build output
+dist/
+build/
+**/dist/
+**/build/
+
+# Vite cache
+.vite/
+.vitepress/cache/
+
+# MacOS
+.DS_Store
+
+# VS Code
+.vscode/
+
+/backend/music/
+
+# Temporary files
+*.tmp
+*.swp
+
+# npm package lock (optional, usually you commit this)
+# package-lock.json
+# yarn.lock
+
+# Coverage (if you run tests)
+coverage/
--- a/README.md
+++ b/README.md
@@ -0,0 +1,221 @@
+# 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.
--- a/backend/convert-to-mp3.py
+++ b/backend/convert-to-mp3.py
@@ -0,0 +1,43 @@
+# convert_to_mp3.py
+import os
+
+from pydub import AudioSegment
+
+# Directory relative to this script
+MUSIC_DIR = os.path.join(os.path.dirname(__file__), "music")
+
+# Supported input formats
+INPUT_FORMATS = [".flac", ".wav", ".m4a", ".ogg"]
+
+
+def convert_to_mp3(file_path):
+    file_root, ext = os.path.splitext(file_path)
+    ext = ext.lower()
+
+    if ext not in INPUT_FORMATS:
+        return  # skip unsupported formats
+
+    mp3_path = f"{file_root}.mp3"
+
+    print(f"Converting {file_path} → {mp3_path}")
+
+    # Load audio
+    audio = AudioSegment.from_file(file_path)
+
+    # Export as MP3
+    audio.export(mp3_path, format="mp3", bitrate="320k")
+
+    # Delete original file
+    os.remove(file_path)
+    print(f"Deleted original: {file_path}")
+
+
+def main():
+    for root, _, files in os.walk(MUSIC_DIR):
+        for file in files:
+            full_path = os.path.join(root, file)
+            convert_to_mp3(full_path)
+
+
+if __name__ == "__main__":
+    main()
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
--- a/backend/package.json
+++ b/backend/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "music-backend",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "server.js",
+  "scripts": {
+    "start": "node server.js",
+    "dev": "nodemon server.js"
+  },
+  "dependencies": {
+    "express": "^4.18.2",
+    "music-metadata": "^8.0.0",
+    "cors": "^2.8.5"
+  }
+}
--- a/backend/server.js
+++ b/backend/server.js
@@ -0,0 +1,104 @@
+import express from 'express';
+import path from 'path';
+import fs from 'fs/promises';
+import * as mm from 'music-metadata';
+import cors from 'cors';
+
+const app = express();
+app.use(cors()); // adjust for production if needed
+
+// Base music directory
+const MUSIC_DIR = path.resolve(__dirname, 'music');
+const SUPPORTED = ['.flac', '.mp3', '.wav', '.m4a', '.ogg'];
+
+// Serve static music files
+app.use('/music', express.static(MUSIC_DIR, {
+  setHeaders: (res) => {
+    res.setHeader('Cache-Control', 'public, max-age=86400');
+  }
+}));
+
+// Recursive scan for all music files
+async function scanDir(dir) {
+  let results = [];
+  const files = await fs.readdir(dir, { withFileTypes: true });
+
+  for (const file of files) {
+    const fullPath = path.join(dir, file.name);
+    if (file.isDirectory()) {
+      results = results.concat(await scanDir(fullPath));
+    } else if (SUPPORTED.includes(path.extname(file.name).toLowerCase())) {
+      results.push(fullPath);
+    }
+  }
+  return results;
+}
+
+// Parse filename into metadata
+function parseFilename(filename) {
+  // Expected: Title__Movie__Genre__YYYY-MM-DD.ext
+  const base = path.basename(filename);
+  const noExt = base.replace(/\.[^.]+$/, '');
+  const parts = noExt.split('__');
+
+  return {
+    title: parts[0] || 'Unknown',
+    movie: parts[1] && parts[1] !== 'None' ? parts[1] : null,
+    genre: parts[2] || null,
+    date: parts[3] || null,
+    filename: base,
+  };
+}
+
+// API endpoint: list all tracks
+app.get('/api/tracks', async (req, res) => {
+  try {
+    const files = await scanDir(MUSIC_DIR);
+    const tracks = [];
+
+    for (const f of files) {
+      const stat = await fs.stat(f);
+      const metadata = parseFilename(f);
+
+      metadata.path = `/music/${encodeURIComponent(path.relative(MUSIC_DIR, f))}`;
+      metadata.size = stat.size;
+      metadata.ext = path.extname(f).toLowerCase();
+      metadata.duration = null;
+      metadata.tags = {};
+
+      // Try reading embedded metadata (optional)
+      try {
+        const mmData = await mm.parseFile(f, { duration: true });
+        if (mmData.format.duration) metadata.duration = Math.round(mmData.format.duration);
+        if (mmData.common) {
+          metadata.tags = mmData.common;
+          metadata.title = mmData.common.title || metadata.title;
+          metadata.movie = mmData.common.album || metadata.movie;
+          if (!metadata.genre && mmData.common.genre) {
+            metadata.genre = Array.isArray(mmData.common.genre) ? mmData.common.genre.join(', ') : mmData.common.genre;
+          }
+          if (!metadata.date && mmData.common.date) metadata.date = mmData.common.date;
+        }
+      } catch (err) {
+        // ignore metadata errors
+      }
+
+      tracks.push(metadata);
+    }
+
+    // Sort: first by date (desc), then by filename
+    tracks.sort((a, b) => {
+      if (a.date && b.date) return String(b.date).localeCompare(String(a.date));
+      return a.filename.localeCompare(b.filename);
+    });
+
+    res.json({ tracks });
+  } catch (err) {
+    console.error(err);
+    res.status(500).json({ error: 'Failed to read music folder' });
+  }
+});
+
+// Start server
+const PORT = process.env.PORT || 3001;
+app.listen(PORT, () => console.log(`Music API server running at http://localhost:${PORT}`));
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>Keshav Music</title>
+    <link rel="stylesheet" href="/styles.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+  <script src="https://cdn.jsdelivr.net/npm/flac.js@latest/dist/flac.min.js"></script>
+</html>
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "music-frontend",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview --port 5174"
+  },
+  "dependencies": {
+    "axios": "^1.13.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "vite": "^5.0.0",
+    "@vitejs/plugin-react": "^4.0.0"
+  }
+}
--- a/frontend/src/app.jsx
+++ b/frontend/src/app.jsx
@@ -0,0 +1,119 @@
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+import "../src/styles.css";
+
+export default function App() {
+  const [allTracks, setAllTracks] = useState([]);
+  const [sortOption, setSortOption] = useState("recent"); // default sort
+
+  // Hard-coded featured tracks (filenames only)
+  const FEATURED = [
+    "Kanne Kalimaane__Moondram Pirai__Unplucked Instrumental Studio Music Cover__2025-06-26.mp3",
+    "Pudhu Vellai Mazhai__Roja__Unplucked Instrumental Studio Music Cover__2025-03-15.mp3",
+    "Porkalam and Kannana Kanney Medley__Thenali and Viswasam__Unplucked Instrumental Studio Music Cover__2025-01-01.mp3"
+  ];
+
+  useEffect(() => {
+    axios.get('/api/tracks').then(res => {
+      setAllTracks(res.data.tracks);
+    });
+  }, []);
+
+  // Parse filename into metadata
+  const parseTrack = (track) => {
+    const nameNoExt = track.filename.replace(/\.[^.]+$/, "");
+    const parts = nameNoExt.split("__");
+    return {
+      title: parts[0] || "Unknown Title",
+      movie: parts[1] && parts[1] !== "None" ? parts[1] : null,
+      genre: parts[2] || null,
+      date: parts[3] || null,
+      url: "http://localhost:3001" + track.path,
+      ext: track.ext
+    };
+  };
+
+  // Separate featured and normal tracks
+  const featuredTracks = allTracks
+    .filter(t => FEATURED.includes(t.filename))
+    .map(parseTrack);
+
+  let normalTracks = allTracks
+    .filter(t => !FEATURED.includes(t.filename))
+    .map(parseTrack);
+
+  // Apply sorting
+  normalTracks.sort((a, b) => {
+    if (sortOption === "recent") return (b.date || "").localeCompare(a.date || "");
+    if (sortOption === "oldest") return (a.date || "").localeCompare(b.date || "");
+    if (sortOption === "a-z") return (a.title || "").localeCompare(b.title || "");
+    if (sortOption === "z-a") return (b.title || "").localeCompare(a.title || "");
+    return 0;
+  });
+
+    const TrackCard = ({ t, featured }) => (
+    <div className={featured ? "track featured-track" : "track"}>
+        <h3>{t.movie ? `${t.title} (${t.movie})` : t.title}</h3>
+        <p>{[t.genre, t.desc, t.date].filter(Boolean).join(" | ")}</p>
+        <audio controls>
+        <source src={t.url} type={`audio/${t.ext.replace(".", "")}`} />
+        Your browser does not support this audio format.
+        </audio>
+    </div>
+    );
+
+  return (
+    <div>
+      <header>
+        <h1>Keshav’s Music Portfolio</h1>
+        <p style={{ marginTop: "20px", marginBottom: "20px" }}> </p>
+
+      </header>
+
+      <main>
+        {/* FEATURED TRACKS */}
+        {featuredTracks.length > 0 && (
+        <section>
+            <h2>Featured</h2>
+            <p style={{ marginTop: "20px", marginBottom: "20px" }}> </p>
+            <div className="featured-container">
+            {featuredTracks.map(t => (
+                <TrackCard key={t.url} t={t} featured={true} />
+            ))}
+            </div>
+        </section>
+        )}
+
+        {/* SORT DROPDOWN */}
+        {normalTracks.length > 0 && (
+          <div className="sort-container">
+            <label htmlFor="sort-select">Sort by: </label>
+            <select
+              id="sort-select"
+              value={sortOption}
+              onChange={(e) => setSortOption(e.target.value)}
+            >
+              <option value="recent">Most Recent</option>
+              <option value="oldest">Oldest</option>
+              <option value="a-z">A → Z</option>
+              <option value="z-a">Z → A</option>
+            </select>
+          </div>
+        )}
+
+        <p style={{ marginTop: "20px", marginBottom: "20px" }}></p>
+
+        {/* NORMAL TRACKS */}
+        <section className="all-container">
+          <h2></h2>
+          <p></p>
+          <div className="track-list">
+            {normalTracks.map(t => (
+              <TrackCard key={t.url} t={t} />
+            ))}
+          </div>
+        </section>
+      </main>
+    </div>
+  );
+}
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app';
+import './styles.css';
+
+createRoot(document.getElementById('root')).render(<App />);
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -0,0 +1,219 @@
+:root {
+    --base-bg: #1e1e2e;          /* Dark background */
+    --surface: #313244;          /* Card background */
+    --overlay: #45475a;          /* Hover / dropdown */
+    --text: #cdd6f4;             /* Main text */
+    --subtext: #bac2de;          /* Secondary text */
+    --accent: #a6e3a1;           /* Greenish accent */
+    --accent-dark: #4caf50;      /* Hover accent */
+    --shadow-light: rgba(0,0,0,0.3);
+    --shadow-glow: rgba(166,227,161,0.4);
+}
+
+/* ===== Global ===== */
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: 'JetBrains Mono', monospace;
+    background: var(--base-bg);
+    color: var(--text);
+    padding: 2rem;
+    transition: background 0.3s ease, color 0.3s ease;
+}
+
+/* ===== Header ===== */
+header {
+    text-align: center;
+    margin-bottom: 2rem;
+}
+
+header h1 {
+    font-size: 2rem;
+    color: var(--accent);
+    text-shadow: 0 0 8px var(--shadow-glow), 0 0 16px rgba(166,227,161,0.2);
+    animation: glow-pulse 3s infinite alternate;
+}
+
+/* ===== Links / Buttons ===== */
+.links {
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+    margin-bottom: 2rem;
+    flex-wrap: wrap;
+}
+
+.links .btn {
+    background-color: var(--accent);
+    color: var(--base-bg);
+    padding: 0.5rem 1rem;
+    border-radius: 10px;
+    font-weight: bold;
+    text-decoration: none;
+    transition: all 0.3s ease;
+    box-shadow: 0 2px 6px var(--shadow-light);
+}
+
+.links .btn:hover {
+    background-color: var(--accent-dark);
+    box-shadow: 0 4px 14px var(--shadow-glow), 0 0 8px var(--shadow-glow);
+    transform: translateY(-2px);
+}
+
+/* ===== Featured Tracks ===== */
+.featured-container {
+    display: flex;
+    gap: 1rem;
+    margin-bottom: 2rem;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+
+.featured-track {
+    flex: 1 1 calc(33% - 1rem);
+    background: var(--surface);
+    border-radius: 16px;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+    overflow: hidden;
+    box-shadow: 0 4px 12px var(--shadow-light), 0 0 6px var(--shadow-glow);
+    transition: transform 0.4s ease, box-shadow 0.4s ease;
+}
+
+/* Animated edge glow for featured */
+.featured-track::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: 16px;
+    padding: 2px;
+    background: linear-gradient(120deg, rgba(166,227,161,0.3), rgba(166,227,161,0.1), rgba(166,227,161,0.3));
+    background-size: 400% 400%;
+    filter: blur(6px);
+    opacity: 0.4;
+    z-index: 0;
+    animation: glow-sweep 8s linear infinite;
+}
+
+.featured-track:hover::before {
+    opacity: 1;
+}
+
+/* Keep content above pseudo-element */
+.featured-track > * {
+    position: relative;
+    z-index: 1;
+}
+
+/* Hover effects for featured */
+.featured-track:hover {
+    transform: translateY(-6px);
+    box-shadow: 0 12px 24px var(--shadow-light), 0 0 18px var(--shadow-glow);
+}
+
+.featured-track h3 {
+    font-size: 1.1rem;
+    text-align: center;
+    margin-bottom: 0.5rem;
+    color: var(--accent);
+}
+
+.featured-track p {
+    font-size: 0.9rem;
+    text-align: center;
+    color: var(--subtext);
+    margin-bottom: 0.5rem;
+}
+
+/* ===== Normal Tracks ===== */
+.track {
+    background: var(--surface);
+    border-radius: 12px;
+    padding: 1rem;
+    margin-bottom: 1rem;
+    box-shadow: 0 3px 10px var(--shadow-light);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    position: relative;
+}
+
+.track:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 16px var(--shadow-light), 0 0 8px var(--shadow-glow);
+}
+
+.track h3 {
+    font-size: 1rem;
+    color: var(--accent);
+    margin-bottom: 0.3rem;
+}
+
+.track p {
+    font-size: 0.9rem;
+    color: var(--subtext);
+    margin-bottom: 0.3rem;
+}
+
+/* ===== Audio Player ===== */
+audio {
+    width: 100%;
+    margin-top: 0.5rem;
+    outline: none;
+    border-radius: 6px;
+}
+
+/* ===== Sort Dropdown ===== */
+#sort-select {
+    padding: 0.5rem 0.8rem;
+    border-radius: 6px;
+    border: none;
+    background: var(--overlay);
+    color: var(--text);
+    font-weight: bold;
+    margin-left: 0.5rem;
+    transition: all 0.3s ease;
+}
+
+#sort-select:hover {
+    box-shadow: 0 4px 12px var(--shadow-glow);
+}
+
+/* ===== Animations ===== */
+@keyframes glow-sweep {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
+@keyframes glow-pulse {
+    0% { text-shadow: 0 0 8px var(--shadow-glow); }
+    50% { text-shadow: 0 0 16px var(--shadow-glow); }
+    100% { text-shadow: 0 0 8px var(--shadow-glow); }
+}
+
+/* ===== Responsive ===== */
+@media (max-width: 900px) {
+    .featured-track {
+        flex: 1 1 calc(50% - 1rem);
+    }
+}
+
+@media (max-width: 600px) {
+    .featured-track {
+        flex: 1 1 100%;
+    }
+
+    body {
+        padding: 1rem;
+    }
+
+    header h1 {
+        font-size: 1.5rem;
+    }
+}
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 3002,   // choose your port
+    strictPort: true // fail if port is in use
+  }
+});