mini-music-player

Full-stack mini music library with playlists: Node/Express + SQLite backend (metadata seeding), React + MUI front-end, React Query, and audio playback.

Stack

• Backend: Node/TypeScript, Express, better-sqlite3
• Frontend: React (Vite), TypeScript, React Router, MUI, React Query
• Audio: react-h5-audio-player
• DB: SQLite with schema + seeding from audio file metadata

Features

• Scan /public/audio and seed a SQLite library (title/artist/duration/path)
• REST endpoints for tracks & playlists
• React UI with track list, playlist list & playlist detail views
• Dark theme with MUI, client routing, and query caching

Project layout

mini-music-player/
  backend/
    db/schema.sql
    db/seed.ts
    index.ts
    tsconfig.json
    package.json
  frontend/
    src/
    vite.config.ts
    package.json

Backend

Install & run

cd backend
npm i
# Seed DB (reads from ./public/audio, parses tags, writes ./db/music_library.db)
npx ts-node db/seed.ts
# Start API
npm run build
npm start     # serves API on PORT=5000 by default

Database

• Tables: tracks, playlists, playlist_tracks.
• Seeding pulls metadata (title/artist/duration) via music-metadata, then inserts rows.

Server

• Serves static audio from public/audio and mounts track/playlist routes.

Frontend

Install & run

cd frontend
npm i
npm run dev           # Vite dev server on 3000

• Proxies /api and /audio to backend (5000) in vite.config.ts.
• Pages: Track list, Playlist list, Playlist detail. Uses React Router + React Query.
• MUI theme applied (dark palette + custom primary).

Development notes

• Strict TS configs for both client/server.
• End-to-end local setup; drop audio files into backend/public/audio and re-seed.

\