k0src · joshngu · Sep 16, 2025 · Sep 23, 2025 · Sep 23, 2025 · Oct 14, 2025
diff --git a/client/index.html b/client/index.html
@@ -4,6 +4,9 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/icon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@600&display=swap" rel="stylesheet">
     <title>COSC 3380</title>
   </head>
   <body>

diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -11,6 +11,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/material": "^7.3.4",
+    "@mui/x-charts": "^8.14.0",
+    "@wavesurfer/react": "^1.0.11",
     "axios": "^1.11.0",
     "classnames": "^2.5.1",
     "dotenv": "^17.2.2",
@@ -19,7 +24,10 @@
     "react-helmet": "^6.1.0",
     "react-helmet-async": "^2.0.5",
     "react-icons": "^5.5.0",
-    "react-router-dom": "^7.8.2"
+    "react-router-dom": "^7.8.2",
+    "react-spinners": "^0.17.0",
+    "uuid": "^13.0.0",
+    "wavesurfer.js": "^7.11.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.33.0",
@@ -36,4 +44,4 @@
     "typescript-eslint": "^8.39.1",
     "vite": "^7.1.4"
   }
-}
+}
diff --git a/client/public/PlayerBar/BackSong.svg b/client/public/PlayerBar/BackSong.svg
diff --git a/client/public/PlayerBar/Like.svg b/client/public/PlayerBar/Like.svg
diff --git a/client/public/PlayerBar/Mask group.png b/client/public/PlayerBar/Mask group.png
diff --git a/client/public/PlayerBar/MixSong.svg b/client/public/PlayerBar/MixSong.svg
diff --git a/client/public/PlayerBar/NextSong.svg b/client/public/PlayerBar/NextSong.svg
diff --git a/client/public/PlayerBar/Pause.svg b/client/public/PlayerBar/Pause.svg
diff --git a/client/public/PlayerBar/Play.svg b/client/public/PlayerBar/Play.svg
diff --git a/client/public/PlayerBar/Playlist.svg b/client/public/PlayerBar/Playlist.svg
diff --git a/client/public/PlayerBar/Replay.svg b/client/public/PlayerBar/Replay.svg
diff --git a/client/public/PlayerBar/Volume.svg b/client/public/PlayerBar/Volume.svg
diff --git a/client/public/SideBar/Expand.svg b/client/public/SideBar/Expand.svg
diff --git a/client/public/SideBar/Logo.svg b/client/public/SideBar/Logo.svg
diff --git a/client/public/SideBar/LogoutButton.svg b/client/public/SideBar/LogoutButton.svg
diff --git a/client/public/SideBar/SongOrder.svg b/client/public/SideBar/SongOrder.svg
diff --git a/client/public/SideBar/Vector-2.svg b/client/public/SideBar/Vector-2.svg
diff --git a/client/public/SideBar/Vector-3.svg b/client/public/SideBar/Vector-3.svg
diff --git a/client/public/SideBar/Vector-4.svg b/client/public/SideBar/Vector-4.svg
diff --git a/client/public/TopBar/FeedButton.svg b/client/public/TopBar/FeedButton.svg
diff --git a/client/public/TopBar/HomeButton.svg b/client/public/TopBar/HomeButton.svg
diff --git a/client/public/TopBar/NotificationButton.svg b/client/public/TopBar/NotificationButton.svg
diff --git a/client/public/TopBar/ProfileButton.svg b/client/public/TopBar/ProfileButton.svg
diff --git a/client/public/TopBar/SettingButton.svg b/client/public/TopBar/SettingButton.svg
diff --git a/client/src/Routes.tsx b/client/src/Routes.tsx
@@ -1,10 +1,14 @@
 import { Routes, Route } from "react-router-dom";
 import * as Pages from "./pages";
+import HomePage from "./pages/HomePage/HomePage";
 
 export default function AppRoutes() {
   return (
     <Routes>
-      <Route path="/" element={<Pages.TestPage />} />
+      <Route path="/" element={<HomePage />} />
+      <Route path="/search" element={<Pages.SearchResultsPage />} />
+      <Route path="/artists/:id" element={<Pages.ArtistPage />} />
+      <Route path="/test" element={<Pages.TestPage />} />
     </Routes>
   );
 }
diff --git a/client/src/api/api.ts b/client/src/api/api.ts
@@ -2,8 +2,15 @@ import axios from "axios";
 
 const API_BASE_URL = import.meta.env.VITE_API_URL;
 
+// Ensure the baseURL always points to the API root. If a full server URL is
+// provided (e.g., http://localhost:8080), append "/api". Otherwise, default
+// to the Vite dev proxy on "/api" so requests are proxied during development.
+const resolvedBaseUrl = API_BASE_URL
+  ? `${API_BASE_URL.replace(/\/$/, "")}/api`
-  ? `${API_BASE_URL.replace(/\/$/, "")}/api`
+  ? (() => {
+      const base = API_BASE_URL.replace(/\/$/, "");
+      return base.endsWith("/api") ? base : `${base}/api`;
+    })()
-  ? `${API_BASE_URL.replace(/\/$/, "")}/api`
+  ? (() => {
+      const base = API_BASE_URL.replace(/\/$/, "");
+      return base.endsWith("/api") ? base : `${base}/api`;
+    })()
+  : "/api";
+
 const api = axios.create({
-  baseURL: API_BASE_URL || "/api",
+  baseURL: resolvedBaseUrl,
   timeout: 30000,
   headers: {
     "Content-Type": "application/json",

diff --git a/client/src/api/artist.api.ts b/client/src/api/artist.api.ts