PlaceDJ Admin

A powerful internal admin dashboard for managing music tracks, playlists, categories, and users for the PlaceDJ platform. Built with Next.js, Supabase, and Tailwind CSS.

Features

• Dashboard: comprehensive overview of tracks, playlists, and user management.
• Audio Upload:
  • Single and Multi-track upload capabilities.
  • Automatic metadata extraction (Title, Artist, Duration, BPM, Key, Energy, Loudness, Genre, Mood).
  • Waveform data generation for UI visualization.
• Smart Playlists:
  • Auto-suggest playlists based on track mood, genre, and BPM.
  • Create playlists from filtered track selections.
• Role-Based Access Control:
  • Secure admin-only access for sensitive operations.
  • Row Level Security (RLS) policies enforced via Supabase.

Tech Stack

• Framework: Next.js (App Router)
• Language: TypeScript
• Styling: Tailwind CSS, shadcn/ui
• Backend/Database: Supabase (Auth, PostgreSQL, Storage)
• Audio Analysis:
  • Basic: music-metadata, music-tempo, fft.js (Pure JS fallback)
  • Advanced (Optional): Python (librosa), aubio, ffmpeg

---

Installation & Setup

Follow these steps to get the project running locally.

1. Prerequisites

• Node.js (v18 or later recommended)
• npm or yarn
• Supabase Account: You need a Supabase project for the database and authentication.
• Python 3 (Optional, for advanced audio analysis)

2. Clone the Repository

git clone <repository-url>
cd placedj-admin

3. Install Dependencies

npm install

4. Configure Environment Variables

Create a .env.local file in the root directory by copying the example:

cp .env.example .env.local

Update .env.local with your Supabase credentials:

NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key

5. Supabase Setup

1. Create a new Supabase project.
2. Run SQL Migrations:
   • Go to the SQL Editor in your Supabase dashboard.
   • Copy the contents of supabase/migrations/001_init.sql.
   • Run the query to set up tables, storage buckets, and RLS policies.
3. Create an Admin User:
   • Go to the Authentication tab and create a new user (email/password).
   • Go to the Table Editor -> public.users table.
   • Insert a row for the user you just created, ensuring you set the role to 'admin'.
   • Note: The id must match the User UID from the Authentication tab.

6. (Optional) Advanced Audio Analysis Setup

For more accurate BPM, Key, and Energy detection, you can enable the Python/Native analyzer.

1. Create a Python virtual environment:

   python3 -m venv venv
   source venv/bin/activate  # On Windows: venv\Scripts\activate

2. Install Python dependencies:

   pip install -r requirements.txt

3. Enable Native Analyzer:
   • Open .env.local.
   • Set USE_NATIVE_ANALYZER=1.

7. Run the Development Server

npm run dev

Open http://localhost:3000/admin/login in your browser.

---

Project Structure

• app/admin: Main dashboard pages and layouts.
• components: Reusable UI components (Tracks, Playlists, etc.).
• lib: Utility functions, Supabase clients, and audio analysis logic.
• supabase: Database migrations and configuration.
• public: Static assets.

Key Commands

Command	Description
npm run dev	Start the development server
npm run build	Build the application for production
npm run start	Start the production server
npm run lint	Run ESLint to check for code issues

Notes

• Upload Limits: Server actions are configured for up to 150MB. The multi-track uploader limits batches to 50 files client-side.
• Security: RLS policies ensure that only users with the admin role can write data (upload tracks, create playlists, etc.).
• UUID Support: Upload flows generate UUIDs in the browser; older browsers without crypto.randomUUID() use a crypto.getRandomValues() fallback.