Skip to content

Live 0 - #31

Closed
hey-Zayn wants to merge 2 commits into
mainfrom
Live-0
Closed

Live 0#31
hey-Zayn wants to merge 2 commits into
mainfrom
Live-0

Conversation

@hey-Zayn

@hey-Zayn hey-Zayn commented Mar 26, 2026

Copy link
Copy Markdown
Owner

Summary by CodeRabbit

Release Notes

  • New Features

    • Create and manage playlists with drag-and-drop reordering
    • Add songs to playlists directly from music views
    • Personalized dashboard with user-specific statistics
    • Edit and delete albums and songs
  • Enhancements

    • Increased file upload limit to 50MB
    • Theme-based styling for album pages
    • Improved empty states and loading states across dashboard

@vercel

vercel Bot commented Mar 26, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
music-app Ready Ready Preview, Comment Mar 26, 2026 2:44am
music-app-9r1o Error Error Mar 26, 2026 2:44am

@coderabbitai

coderabbitai Bot commented Mar 26, 2026

Copy link
Copy Markdown

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 749df878-3450-47ba-9b79-667978f8ef8b

📥 Commits

Reviewing files that changed from the base of the PR and between c3688e5 and 0180a24.

⛔ Files ignored due to path filters (1)
  • frontend/package-lock.json is excluded by !**/package-lock.json
📒 Files selected for processing (41)
  • backend/src/controllers/album.controller.js
  • backend/src/controllers/playlist.controller.js
  • backend/src/controllers/song.controller.js
  • backend/src/controllers/stats.controller.js
  • backend/src/index.js
  • backend/src/models/album.model.js
  • backend/src/models/playlist.model.js
  • backend/src/models/song.model.js
  • backend/src/routes/admin.route.js
  • backend/src/routes/album.route.js
  • backend/src/routes/playlist.route.js
  • backend/src/routes/songs.route.js
  • backend/src/routes/stats.route.js
  • frontend/package.json
  • frontend/src/App.tsx
  • frontend/src/Providers/AuthProvider.tsx
  • frontend/src/components/layout/components/CreatePlaylistDialog.tsx
  • frontend/src/components/layout/components/LeftSidebar.jsx
  • frontend/src/components/layout/components/TopHeader.jsx
  • frontend/src/components/playlist/AddToPlaylistDialog.tsx
  • frontend/src/components/playlist/SortableSongItem.tsx
  • frontend/src/components/ui/Topbar.jsx
  • frontend/src/lib/utils.ts
  • frontend/src/pages/admin/AdminPage.tsx
  • frontend/src/pages/admin/components/AddAlbumDialog.tsx
  • frontend/src/pages/admin/components/AddSongDialog.tsx
  • frontend/src/pages/admin/components/AlbumsTabContent.tsx
  • frontend/src/pages/admin/components/AlbumsTable.tsx
  • frontend/src/pages/admin/components/DashboardStats.tsx
  • frontend/src/pages/admin/components/EditAlbumDialog.tsx
  • frontend/src/pages/admin/components/EditSongDialog.tsx
  • frontend/src/pages/admin/components/NoContent.tsx
  • frontend/src/pages/admin/components/SongsTabContent.tsx
  • frontend/src/pages/admin/components/SongsTable.tsx
  • frontend/src/pages/album/AlbumPage.tsx
  • frontend/src/pages/home/components/FeaturedSection.jsx
  • frontend/src/pages/home/components/SectionGrid.tsx
  • frontend/src/pages/playlists/PlaylistPage.tsx
  • frontend/src/store/useMusicStore.tsx
  • frontend/src/store/usePlaylistStore.tsx
  • plan/development-plan.md

📝 Walkthrough

Walkthrough

This PR introduces complete playlist CRUD functionality with drag-and-drop song reordering, adds Cloudinary-based media management for albums and songs with creator-based authorization, establishes creator tracking across models, restructures API authorization by removing admin-only constraints from read endpoints, and adds complementary frontend UI components for playlist and media management.

Changes

Cohort / File(s) Summary
Backend Playlist Module
backend/src/controllers/playlist.controller.js, backend/src/routes/playlist.route.js, backend/src/models/playlist.model.js
New playlist management system: controller exports seven handler functions (create, read, update, delete, add/remove songs); routes apply protectRoute middleware globally; model defines schema with name, optional description/imageUrl, creator, and songs array with timestamps.
Backend Album CRUD & Media Handling
backend/src/controllers/album.controller.js, backend/src/models/album.model.js
Album controller now includes Cloudinary helpers and three public endpoints (createAlbum, updateAlbum, deleteAlbum) with ownership checks, optional image uploads/replacements, and Cloudinary resource cleanup; model adds optional creator field.
Backend Song CRUD & Media Handling
backend/src/controllers/song.controller.js, backend/src/models/song.model.js
Song controller adds three public endpoints (createSong, updateSong, deleteSong) with Cloudinary media uploads, album ownership verification, and authorization logic; getAllSongs extended with optional creator filtering; model adds optional creator field.
Backend Authorization & Routes
backend/src/routes/album.route.js, backend/src/routes/songs.route.js, backend/src/routes/admin.route.js, backend/src/routes/stats.route.js
Restructures endpoint authorization: album listing requires protectRoute, song GET removes requireAdmin, stats GET removes requireAdmin; admin routes remove CRUD handlers for songs/albums; song/album routes add new authenticated write operations.
Backend Stats & Config
backend/src/controllers/stats.controller.js, backend/src/index.js
Stats controller now builds optional creator-scoped filters when req.query.user === "true"; index increases file upload limit to 50MB and registers playlist routes.
Frontend Playlist Components
frontend/src/components/layout/components/CreatePlaylistDialog.tsx, frontend/src/components/playlist/AddToPlaylistDialog.tsx, frontend/src/components/playlist/SortableSongItem.tsx
New dialog components for playlist creation and song selection; draggable sortable row component integrating @dnd-kit/sortable for playlist reordering; both dialogs hook into usePlaylistStore.
Frontend Playlist Store & Page
frontend/src/store/usePlaylistStore.tsx, frontend/src/pages/playlists/PlaylistPage.tsx
New Zustand store managing playlist state and lifecycle (fetch, create, update, delete, reorder); playlist page renders metadata, supports drag-drop reordering via DndContext, enables per-song removal, and handles playback integration.
Frontend Admin Components
frontend/src/pages/admin/components/EditAlbumDialog.tsx, frontend/src/pages/admin/components/EditSongDialog.tsx, frontend/src/pages/admin/components/NoContent.tsx, frontend/src/pages/admin/components/AddSongDialog.tsx
New edit dialogs for albums and songs with image preview/replacement; NoContent empty-state component; AddSongDialog extended with audio metadata auto-extraction, image extraction from tags, and upload progress UI.
Frontend Admin Tabs & Table Updates
frontend/src/pages/admin/components/AlbumsTabContent.tsx, frontend/src/pages/admin/components/AlbumsTable.tsx, frontend/src/pages/admin/components/SongsTabContent.tsx, frontend/src/pages/admin/components/SongsTable.tsx, frontend/src/pages/admin/AdminPage.tsx, frontend/src/pages/admin/components/DashboardStats.tsx
Tab components refactored to use useMusicStore for loading/data; tables add new action controls (EditAlbumDialog, EditSongDialog, AddToPlaylistDialog); stats card grid updated to show user-scoped totals; removed admin authorization checks from page.
Frontend Album & Home Pages
frontend/src/pages/album/AlbumPage.tsx, frontend/src/pages/home/components/FeaturedSection.jsx, frontend/src/pages/home/components/SectionGrid.tsx
Album page adds deterministic theming per album and AddToPlaylistDialog per track; featured/grid sections include AddToPlaylistDialog with hover/propagation handling; track grid layout expanded.
Frontend Auth & Store Updates
frontend/src/Providers/AuthProvider.tsx, frontend/src/store/useMusicStore.tsx
AuthProvider replaces token mutation with per-request Axios interceptor and removes admin status checking; useMusicStore extends fetch methods with optional userOnly parameter and adds updateSong/updateAlbum methods with multipart/form-data support.
Frontend Navigation & UI
frontend/src/components/ui/Topbar.jsx, frontend/src/components/layout/components/TopHeader.jsx, frontend/src/App.tsx, frontend/src/lib/utils.ts, frontend/package.json
Routes /admin/dashboard, adds /playlists/:id route; navigation removes isAdmin check, shows Dashboard link for all signed-in users, adds Chat link; utility adds formatDuration helper; dependencies add @dnd-kit packages.
Documentation
plan/development-plan.md
New roadmap document detailing completed features, known limitations, high/medium-priority upcoming work (playlists, recommendations, music rooms, visualization), chat system improvements, scaling plans for 1000+ users, and interview talking points.

Sequence Diagram

sequenceDiagram
    participant User
    participant Frontend
    participant Backend
    participant Cloudinary
    participant Database

    Note over User,Database: Media Upload & Create Flow
    User->>Frontend: Select audio/image files
    Frontend->>Backend: POST /songs with FormData
    Backend->>Cloudinary: Upload audio (resource_type: video)
    Cloudinary-->>Backend: Return secure_url
    Backend->>Cloudinary: Upload image
    Cloudinary-->>Backend: Return secure_url
    Backend->>Database: Create Song doc with URLs
    Database-->>Backend: Return saved song
    Backend-->>Frontend: HTTP 201 + song data
    Frontend-->>User: Show success toast

    Note over User,Database: Playlist Drag-Drop Reorder Flow
    User->>Frontend: Drag songs in playlist UI
    Frontend->>Frontend: Update local song order (optimistic)
    User->>Frontend: Drop/confirm reorder
    Frontend->>Backend: PUT /playlists/:id with ordered song IDs
    Backend->>Database: Update playlist.songs array
    Database-->>Backend: Return updated playlist
    Backend-->>Frontend: HTTP 200 + playlist data
    Frontend->>Frontend: Commit reordered state
    Frontend-->>User: Show success, sync complete
    
    Note over User,Database: Delete Album with Media Cleanup
    User->>Frontend: Click delete album
    Frontend->>Backend: DELETE /albums/:id
    Backend->>Database: Fetch album by ID
    Database-->>Backend: Return album doc
    Backend->>Backend: Check ownership vs req.auth.userId
    Backend->>Cloudinary: Delete album image (public_id extracted)
    Backend->>Cloudinary: Delete all song images & audio
    Backend->>Database: Delete songs by albumId
    Backend->>Database: Delete album doc
    Database-->>Backend: Deletion complete
    Backend-->>Frontend: HTTP 200 + success message
    Frontend-->>User: Show success toast
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

  • Live 0 #24: Introduces similar Cloudinary media handling helpers, derives public IDs from URLs, performs media deletions, and implements Clerk-based admin authorization checks across controllers.

Poem

🐰 With playlists dragging, songs take flight,
Cloudinary clouds hold media tight,
Creator-owned, reordered with care,
Auth flows simplified, permission-aware,
One app hops forward, features everywhere! 🎵

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch Live-0

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant