tr]:last:border-b-0",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+ return (
+ |
+ )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+ return (
+ [role=checkbox]]:translate-y-[2px]",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+ return (
+ | [role=checkbox]]:translate-y-[2px]",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+function TableCaption({
+ className,
+ ...props
+}: React.ComponentProps<"caption">) {
+ return (
+
+ )
+}
+
+export {
+ Table,
+ TableHeader,
+ TableBody,
+ TableFooter,
+ TableHead,
+ TableRow,
+ TableCell,
+ TableCaption,
+}
diff --git a/Music-App/frontend/src/components/ui/tabs.tsx b/Music-App/frontend/src/components/ui/tabs.tsx
new file mode 100644
index 0000000..3d6f3ac
--- /dev/null
+++ b/Music-App/frontend/src/components/ui/tabs.tsx
@@ -0,0 +1,64 @@
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function TabsList({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function TabsTrigger({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function TabsContent({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }
diff --git a/Music-App/frontend/src/components/ui/tooltip.tsx b/Music-App/frontend/src/components/ui/tooltip.tsx
new file mode 100644
index 0000000..715bf76
--- /dev/null
+++ b/Music-App/frontend/src/components/ui/tooltip.tsx
@@ -0,0 +1,59 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+ delayDuration = 0,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function Tooltip({
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+ )
+}
+
+function TooltipTrigger({
+ ...props
+}: React.ComponentProps) {
+ return
+}
+
+function TooltipContent({
+ className,
+ sideOffset = 0,
+ children,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+ {children}
+
+
+
+ )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/Music-App/frontend/src/index.css b/Music-App/frontend/src/index.css
new file mode 100644
index 0000000..101cdb5
--- /dev/null
+++ b/Music-App/frontend/src/index.css
@@ -0,0 +1,124 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+ --radius-sm: calc(var(--radius) - 4px);
+ --radius-md: calc(var(--radius) - 2px);
+ --radius-lg: var(--radius);
+ --radius-xl: calc(var(--radius) + 4px);
+ --color-background: var(--background);
+ --color-foreground: var(--foreground);
+ --color-card: var(--card);
+ --color-card-foreground: var(--card-foreground);
+ --color-popover: var(--popover);
+ --color-popover-foreground: var(--popover-foreground);
+ --color-primary: var(--primary);
+ --color-primary-foreground: var(--primary-foreground);
+ --color-secondary: var(--secondary);
+ --color-secondary-foreground: var(--secondary-foreground);
+ --color-muted: var(--muted);
+ --color-muted-foreground: var(--muted-foreground);
+ --color-accent: var(--accent);
+ --color-accent-foreground: var(--accent-foreground);
+ --color-destructive: var(--destructive);
+ --color-border: var(--border);
+ --color-input: var(--input);
+ --color-ring: var(--ring);
+ --color-chart-1: var(--chart-1);
+ --color-chart-2: var(--chart-2);
+ --color-chart-3: var(--chart-3);
+ --color-chart-4: var(--chart-4);
+ --color-chart-5: var(--chart-5);
+ --color-sidebar: var(--sidebar);
+ --color-sidebar-foreground: var(--sidebar-foreground);
+ --color-sidebar-primary: var(--sidebar-primary);
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+ --color-sidebar-accent: var(--sidebar-accent);
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+ --color-sidebar-border: var(--sidebar-border);
+ --color-sidebar-ring: var(--sidebar-ring);
+}
+
+
+
+:root {
+ --radius: 0.65rem;
+ --background: oklch(1 0 0);
+ --foreground: oklch(0.141 0.005 285.823);
+ --card: oklch(1 0 0);
+ --card-foreground: oklch(0.141 0.005 285.823);
+ --popover: oklch(1 0 0);
+ --popover-foreground: oklch(0.141 0.005 285.823);
+ --primary: oklch(0.648 0.2 131.684);
+ --primary-foreground: oklch(0.986 0.031 120.757);
+ --secondary: oklch(0.967 0.001 286.375);
+ --secondary-foreground: oklch(0.21 0.006 285.885);
+ --muted: oklch(0.967 0.001 286.375);
+ --muted-foreground: oklch(0.552 0.016 285.938);
+ --accent: oklch(0.967 0.001 286.375);
+ --accent-foreground: oklch(0.21 0.006 285.885);
+ --destructive: oklch(0.577 0.245 27.325);
+ --border: oklch(0.92 0.004 286.32);
+ --input: oklch(0.92 0.004 286.32);
+ --ring: oklch(0.841 0.238 128.85);
+ --chart-1: oklch(0.871 0.15 154.449);
+ --chart-2: oklch(0.723 0.219 149.579);
+ --chart-3: oklch(0.627 0.194 149.214);
+ --chart-4: oklch(0.527 0.154 150.069);
+ --chart-5: oklch(0.448 0.119 151.328);
+ --sidebar: oklch(0.985 0 0);
+ --sidebar-foreground: oklch(0.141 0.005 285.823);
+ --sidebar-primary: oklch(0.648 0.2 131.684);
+ --sidebar-primary-foreground: oklch(0.986 0.031 120.757);
+ --sidebar-accent: oklch(0.967 0.001 286.375);
+ --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+ --sidebar-border: oklch(0.92 0.004 286.32);
+ --sidebar-ring: oklch(0.841 0.238 128.85);
+}
+
+.dark {
+ --background: oklch(0.141 0.005 285.823);
+ --foreground: oklch(0.985 0 0);
+ --card: oklch(0.21 0.006 285.885);
+ --card-foreground: oklch(0.985 0 0);
+ --popover: oklch(0.21 0.006 285.885);
+ --popover-foreground: oklch(0.985 0 0);
+ /* --primary: oklch(0.648 0.2 131.684); */
+ --primary: oklch(0.53 0.14 150);
+ --primary-foreground: oklch(0.986 0.031 120.757);
+ --secondary: oklch(0.274 0.006 286.033);
+ --secondary-foreground: oklch(0.985 0 0);
+ --muted: oklch(0.274 0.006 286.033);
+ --muted-foreground: oklch(0.705 0.015 286.067);
+ --accent: oklch(0.274 0.006 286.033);
+ --accent-foreground: oklch(0.985 0 0);
+ --destructive: oklch(0.704 0.191 22.216);
+ --border: oklch(1 0 0 / 10%);
+ --input: oklch(1 0 0 / 15%);
+ --ring: oklch(0.405 0.101 131.063);
+ --chart-1: oklch(0.871 0.15 154.449);
+ --chart-2: oklch(0.723 0.219 149.579);
+ --chart-3: oklch(0.627 0.194 149.214);
+ --chart-4: oklch(0.527 0.154 150.069);
+ --chart-5: oklch(0.448 0.119 151.328);
+ --sidebar: oklch(0.21 0.006 285.885);
+ --sidebar-foreground: oklch(0.985 0 0);
+ --sidebar-primary: oklch(0.768 0.233 130.85);
+ --sidebar-primary-foreground: oklch(0.986 0.031 120.757);
+ --sidebar-accent: oklch(0.274 0.006 286.033);
+ --sidebar-accent-foreground: oklch(0.985 0 0);
+ --sidebar-border: oklch(1 0 0 / 10%);
+ --sidebar-ring: oklch(0.405 0.101 131.063);
+}
+
+@layer base {
+ * {
+ @apply border-border outline-ring/50;
+ }
+
+ body {
+ @apply bg-background text-foreground;
+ }
+}
\ No newline at end of file
diff --git a/Music-App/frontend/src/lib/axios.ts b/Music-App/frontend/src/lib/axios.ts
new file mode 100644
index 0000000..d13fcb6
--- /dev/null
+++ b/Music-App/frontend/src/lib/axios.ts
@@ -0,0 +1,6 @@
+import axios from "axios"
+
+export const axiosInstance = axios.create({
+ baseURL: import.meta.env.MODE === "development" ? "http://localhost:5000/api" : "/api",
+ // baseURL:'https://music-bd.vercel.app/api' ,
+})
\ No newline at end of file
diff --git a/Music-App/frontend/src/lib/sentry.ts b/Music-App/frontend/src/lib/sentry.ts
new file mode 100644
index 0000000..3e48d3f
--- /dev/null
+++ b/Music-App/frontend/src/lib/sentry.ts
@@ -0,0 +1,29 @@
+import * as Sentry from "@sentry/react";
+import { browserTracingIntegration, replayIntegration } from "@sentry/react";
+
+export const initSentry = () => {
+ Sentry.init({
+ dsn: import.meta.env.VITE_SENTRY_DSN || "https://b06510cb56f815f630bbc9eb653540fc@o4510471896039424.ingest.us.sentry.io/4510471948468224",
+ environment: import.meta.env.MODE,
+ integrations: [
+ browserTracingIntegration(),
+ replayIntegration({
+ maskAllText: true,
+ blockAllMedia: true,
+ }),
+ ],
+ tracesSampleRate: import.meta.env.MODE === 'production' ? 0.1 : 1.0,
+ replaysSessionSampleRate: 0.1,
+ replaysOnErrorSampleRate: 1.0,
+ beforeSend(event, hint) {
+ if (event.exception) {
+ const error = hint.originalException;
+ // Don't send network errors or aborts
+ if (error instanceof Error && (error.message.includes('Network') || error.message.includes('abort'))) {
+ return null;
+ }
+ }
+ return event;
+ },
+ });
+};
diff --git a/Music-App/frontend/src/lib/utils.ts b/Music-App/frontend/src/lib/utils.ts
new file mode 100644
index 0000000..bd0c391
--- /dev/null
+++ b/Music-App/frontend/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs))
+}
diff --git a/Music-App/frontend/src/main.tsx b/Music-App/frontend/src/main.tsx
new file mode 100644
index 0000000..a3b5666
--- /dev/null
+++ b/Music-App/frontend/src/main.tsx
@@ -0,0 +1,39 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+import { ClerkProvider } from '@clerk/clerk-react'
+import { BrowserRouter } from 'react-router-dom'
+import AuthProvider from './Providers/AuthProvider.tsx'
+import { Toaster } from 'react-hot-toast'
+import * as Sentry from "@sentry/react";
+import { initSentry } from './lib/sentry'
+
+// Import your Publishable Key
+const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
+
+if (!PUBLISHABLE_KEY) {
+ throw new Error('Add your Clerk Publishable Key to the .env file')
+}
+
+// Initialize Sentry
+initSentry();
+
+const SentryRoutes = Sentry.withSentryRouting(BrowserRouter);
+
+createRoot(document.getElementById('root')!).render(
+
+
+
+
+ An error has occurred} showDialog>
+
+
+
+
+
+
+ ,
+)
\ No newline at end of file
diff --git a/Music-App/frontend/src/pages/404/NotFoundPage.tsx b/Music-App/frontend/src/pages/404/NotFoundPage.tsx
new file mode 100644
index 0000000..d5ac3da
--- /dev/null
+++ b/Music-App/frontend/src/pages/404/NotFoundPage.tsx
@@ -0,0 +1,45 @@
+import { Home, Music2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useNavigate } from "react-router-dom";
+
+export default function NotFoundPage() {
+ const navigate = useNavigate();
+
+ return (
+
+
+ {/* Large animated musical note */}
+
+
+
+
+ {/* Error message */}
+
+ 404
+ Page not found
+
+ Looks like this track got lost in the shuffle. Let's get you back to the music.
+
+
+
+ {/* Action buttons */}
+
+
+
+
+
+ Loading...
+ if (!isAdmin) return Unauthorized
+ return (
+
+
+
+
+
+
+
+
+ Songs
+
+
+
+ Albums
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Albums Library
+
+ Manage your album collection
+
+
+
+
+
+
+ Title
+ Artist
+ Release Year
+ Songs
+ Actions
+
+
+
+ {albums.map((album) => (
+
+
+ 
+
+ {album.title}
+ {album.artist}
+
+
+
+ {album.releaseYear}
+
+
+
+
+
+ {album.songs.length} songs
+
+
+
+
+
+
+
+
+ ))}
+
+
+ );
+};
+export default AlbumsTable;
\ No newline at end of file
diff --git a/Music-App/frontend/src/pages/admin/components/DashboardStats.tsx b/Music-App/frontend/src/pages/admin/components/DashboardStats.tsx
new file mode 100644
index 0000000..769471b
--- /dev/null
+++ b/Music-App/frontend/src/pages/admin/components/DashboardStats.tsx
@@ -0,0 +1,59 @@
+import { useMusicStore } from '@/store/useMusicStore';
+import StatsCard from './StatsCard';
+import { Library, ListMusic, PlayCircle, Users2 } from "lucide-react";
+
+
+const DashboardStats = () => {
+ const { stats } = useMusicStore();
+
+ if (!stats) return null;
+
+ const statsData = [
+ {
+ icon: ListMusic,
+ label: "Total Songs",
+ value: stats.totalSongs.toString(),
+ bgColor: "bg-emerald-500/10",
+ iconColor: "text-emerald-500",
+ },
+ {
+ icon: Library,
+ label: "Total Albums",
+ value: stats.totalAlbums.toString(),
+ bgColor: "bg-violet-500/10",
+ iconColor: "text-violet-500",
+ },
+ {
+ icon: Users2,
+ label: "Total Artists",
+ value: stats.totalArtists.toString(),
+ bgColor: "bg-orange-500/10",
+ iconColor: "text-orange-500",
+ },
+ {
+ icon: PlayCircle,
+ label: "Total Users",
+ value: stats.totalUsers.toLocaleString(),
+ bgColor: "bg-sky-500/10",
+ iconColor: "text-sky-500",
+ },
+ ];
+ return (
+
+
+ {statsData.map((stat) => (
+
+ ))}
+
+
+
+
+ 
+
+
+ Music Manager
+ Manage your music catalog
+
+
+
+
+
+
+
+ Songs Library
+
+ Manage your music tracks
+
+
+
+
+
+
+ Title
+ Artist
+ Release Date
+ Actions
+
+
+
+
+ {songs.map((song) => (
+
+
+ 
+
+ {song.title}
+ {song.artist}
+
+
+
+ {song.createdAt.split("T")[0]}
+
+
+
+
+
+
+
+
+
+ ))}
+
+
+ );
+};
+export default SongsTable;
\ No newline at end of file
diff --git a/Music-App/frontend/src/pages/admin/components/StatsCard.tsx b/Music-App/frontend/src/pages/admin/components/StatsCard.tsx
new file mode 100644
index 0000000..607463b
--- /dev/null
+++ b/Music-App/frontend/src/pages/admin/components/StatsCard.tsx
@@ -0,0 +1,28 @@
+import { Card, CardContent } from "@/components/ui/card";
+
+type StatsCardProps = {
+ icon: React.ElementType;
+ label: string;
+ value: string;
+ bgColor: string;
+ iconColor: string;
+};
+
+const StatsCard = ({ bgColor, icon: Icon, iconColor, label, value }: StatsCardProps) => {
+ return (
+
+
+
+
+
+ );
+};
+export default StatsCard;
\ No newline at end of file
diff --git a/Music-App/frontend/src/pages/album/AlbumPage.tsx b/Music-App/frontend/src/pages/album/AlbumPage.tsx
new file mode 100644
index 0000000..368ca62
--- /dev/null
+++ b/Music-App/frontend/src/pages/album/AlbumPage.tsx
@@ -0,0 +1,158 @@
+import { useMusicStore } from '@/store/useMusicStore';
+import { useEffect } from 'react'
+import { useParams } from 'react-router-dom'
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { Button } from '@/components/ui/button';
+import { Clock, Pause, Play } from 'lucide-react';
+import { usePlayerStore } from '@/store/usePlayerStore';
+
+
+const AlbumPage = () => {
+
+
+ // const isPlaying = false;
+
+ const { albumId } = useParams();
+ const { isLoading, fetchAlbumById, currentAlbum } = useMusicStore();
+ const { currentSong, isPlaying, playAlbum, togglePlay } = usePlayerStore()
+ useEffect(() => {
+ if (albumId) fetchAlbumById(albumId)
+ }, [fetchAlbumById, albumId]);
+
+ const formatDuration = (seconds: number) => {
+ const minutes = Math.floor(seconds / 60);
+ const remainingSeconds = seconds % 60;
+
+ return `${minutes} : ${remainingSeconds.toString().padStart(2, "0")} `;
+ }
+
+
+
+ if (isLoading) return null
+
+ const handlePlayAlbum = () => {
+ if (!currentAlbum) return;
+
+ const isCurrentAlbumPlaying = currentAlbum?.songs.some((song) => song._id === currentSong?._id);
+ if (isCurrentAlbumPlaying) togglePlay();
+ else {
+ // start playing the album from the beginning
+ playAlbum(currentAlbum?.songs, 0);
+ }
+ };
+
+ const handlePlaySong = (index: number) => {
+ if (!currentAlbum) return
+ playAlbum(currentAlbum?.songs, index)
+ }
+ return (
+
+
+
+
+
+
+ 
+
+
+ Album
+
+ {currentAlbum?.title}
+
+ {currentAlbum?.artist}
+ • {currentAlbum?.songs.length} songs
+ • {currentAlbum?.releaseYear}
+
+
+
+
+ {/* Controls - Section */}
+
+
+
+
+
+
+ {/* table header */}
+
+ #
+ Title
+ Released Date
+
+
+
+
+
+
+
+ {currentAlbum?.songs.map((song, index) => {
+ const isCurrentSong = currentSong?._id === song._id;
+ return (
+ handlePlaySong(index)}
+ className={`grid grid-cols-[16px_4fr_2fr_1fr] gap-4 px-4 py-2 text-sm
+ text-zinc-400 hover:bg-white/5 rounded-md group cursor-pointer
+ `}
+ >
+
+ {
+ isCurrentSong && isPlaying ? (
+ ♫
+ ) : (
+ {index + 1}
+ )
+ }
+ {
+ !isCurrentSong && (
+
+ )
+ }
+
+
+
+
+
+
+
+ {song.title}
+ {song.artist}
+
+
+ {song.createdAt.split("T")[0]}
+ {formatDuration(song.duration)}
+
+ );
+ }
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Logging you in
+ Redirecting...
+
+
+
+
+
+
+ {selectedUser.fullName[0]}
+
+
+ {selectedUser.fullName}
+
+ {onlineUsers.has(selectedUser.clerkId) ? "Online" : "Offline"}
+
+
+
+
+
+ setNewMessage(e.target.value)}
+ className='bg-zinc-800 border-none'
+ onKeyDown={(e) => e.key === "Enter" && handleSend()}
+ />
+
+
+
+
+
+
+
+ {isLoading ? (
+
+ ) : (
+ users.map((user) => (
+ setSelectedUser(user)}
+ className={`flex items-center justify-center lg:justify-start gap-3 p-3
+ rounded-lg cursor-pointer transition-colors
+ ${selectedUser?.clerkId === user.clerkId ? "bg-zinc-800" : "hover:bg-zinc-800/50"}`}
+ >
+
+
+
+ {user.fullName[0]}
+
+ {/* online indicator */}
+
+
+
+
+ {user.fullName}
+
+
+ ))
+ )}
+
+
+
+
+
+ {/* chat message */}
+
+ {selectedUser ? (
+ <>
+
+
+ {/* Messages */}
+
+
+ {messages?.map((message) => (
+
+
+
+
+
+
+ {message.content}
+
+ {formatTime(message.createdAt)}
+
+
+
+ ))}
+
+
+
+
+ ) : (
+
+ )}
+
+
+
+
+ No conversation selected
+ Choose a friend to start chatting
+
+ {error}
+ return (
+
+ {featuredSongs.map((song) => (
+
+
+
+ {song.title}
+ {/* {song.artist} */}
+
+
+
+ ))}
+
+
+ {title}
+
+
+
+
+ {songs.map((song) => (
+
+
+
+
+
+ {/* */}
+
+ {song.title}
+ {song.artist}
+
+ ))}
+
+
+
+
+ {Array.from({ length: 4 }).map((_, i) => (
+
+ ))}
+
+
+ {/* Good After noon */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ |