Added Clerk Authentication

.github/workflows/ci.yml

@@ -38,3 +38,6 @@ jobs:
 
       - name: Build
         run: pnpm build
+        env:
+          NEXT_PUBLIC_API_URL: ${{ secrets.NEXT_PUBLIC_API_URL }}
+          NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: ${{ secrets.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY }}

apps/client/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "core",
+  "name": "client",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -30,6 +30,7 @@
     "posthog-js": "^1.217.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "sonner": "^1.7.4",
     "tailwind-merge": "^3.0.1",
     "tailwindcss-animate": "^1.0.7"
   },
@@ -43,4 +44,4 @@
     "tailwindcss": "^3.4.17",
     "typescript": "^5"
   }
-}
+}

apps/client/src/app/globals.css

@@ -108,5 +108,8 @@ body {
     --sidebar-accent-foreground: 240 4.8% 95.9%;
     --sidebar-border: 240 3.7% 15.9%;
     --sidebar-ring: 217.2 91.2% 59.8%;
+    .cl-userButtonOuterIdentifier{
+      color: white;
+    }
   }
 }

apps/client/src/app/home/gallery/page.tsx

@@ -0,0 +1,61 @@
+"use client";
+import React from "react";
+import { FileVideo } from "lucide-react";
+import GalleryCard, { Video } from "@/components/home/videoCard";
+import { fetchUserObjects } from "@/utils";
+
+const EmptyState = () => (
+  <div className="w-full min-h-[400px] flex flex-col items-center justify-center bg-gray-50 rounded-lg">
+    <FileVideo className="w-16 h-16 text-gray-400 mb-4" />
+    <h3 className="text-xl font-medium text-gray-700 mb-2">No videos yet</h3>
+    <p className="text-gray-500 text-center max-w-md">
+      Upload your videos to see them displayed here
+    </p>
+  </div>
+);
+
+export default function Page() {
+  const [data, setData] = React.useState<Video[]>([]);
+  const [loading, setLoading] = React.useState(true);
+
+  React.useEffect(() => {
+    const loadData = async () => {
+      try {
+        const result = await fetchUserObjects<Video[]>();
+        setData(result);
+      } catch (error) {
+        console.error("Failed to fetch videos:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadData();
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="container mx-auto p-4">
+        <div>Loading...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <main>
+        <div className="container mx-auto p-4">
+          <div className="grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 auto-rows-fr">
+            {data && data.length > 0 ? (
+              data.map((video, index) => (
+                <GalleryCard key={video.httpEtag || index} video={video} />
+              ))
+            ) : (
+              <EmptyState />
+            )}
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}

apps/client/src/app/home/layout.tsx

@@ -1,5 +1,3 @@
-// TODO: Fix Dark and Light Mode
-
 "use client";
 import { AppSidebar } from "@/components/app-sidebar";
 import { ReactNode, useEffect, useState } from "react";
@@ -9,41 +7,37 @@ import {
   SidebarProvider,
   SidebarTrigger,
 } from "@/components/ui/sidebar";
+import { ClerkProvider, SignedOut, SignIn } from "@clerk/nextjs";
+import { Toaster } from "@/components/ui/sonner";
+import TanstackProvider from "@/components/TanStackQuery/provider";
 
 export default function Layout({ children }: { children: ReactNode }) {
-  // const { theme } = useTheme();
-  const [mounted, setMounted] = useState(false);
-
-  // Prevent hydration mismatch by mounting after first render
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  // Default color while loading
-  const borderColor = ["#A07C", "#FE85", "#FBB"];
-
-  // const borderColor = mounted
-  //   ? theme === "dark"
-  //     ? "white"
-  //     : "black"
-  //   : "white";
-
   return (
-    // <ShineBorder className="h-screen w-screen" color={borderColor}>
-    // <section className="h-full w-full px-5 py-5">{children}</section>
-    <SidebarProvider>
-    <AppSidebar />
-    <SidebarInset>
-      <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
-        <div className="flex items-center gap-2 px-4">
-          <SidebarTrigger className="-ml-1" />
-          <Separator orientation="vertical" className="mr-2 h-4" />
+    <ClerkProvider>
+      {/* // ! Temp Show the page */}
+      <SignedOut>
+        <div className="h-[100vh] flex justify-center items-center">
+          <SignIn routing="hash" />
         </div>
-      </header>
-      <div>{children}</div>
-    </SidebarInset>
-  </SidebarProvider>
-
-    // </ShineBorder>
+      </SignedOut>
+
+      <TanstackProvider>
+        {/* <SignedIn> */}
+        <SidebarProvider>
+          <AppSidebar />
+          <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+              <div className="flex items-center gap-2 px-4">
+                <SidebarTrigger className="-ml-1" />
+                <Separator orientation="vertical" className="mr-2 h-4" />
+              </div>
+            </header>
+            <div>{children}</div>
+            <Toaster />
+          </SidebarInset>
+        </SidebarProvider>
+        {/* </SignedIn> */}
+      </TanstackProvider>
+    </ClerkProvider>
   );
 }

apps/client/src/app/home/upload/page.tsx

@@ -1,88 +1,9 @@
-'use client'
-import { Router } from 'lucide-react'
-import { useRouter } from 'next/navigation'
-import React from 'react'
-
-const Admin = () => {
-	const [file, setFile] = React.useState<File>()
-	const Router = useRouter();
-
-	const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-		if (event.target.files) {
-			const currentFile = event.target.files[0]
-			setFile(currentFile)
-		}
-	}
-
-    const handleUpload = async () => {
-        if (!file) return;
-        const formData = new FormData();
-        formData.append("files", file); 
-        // Request signed URL from the server
-        const response = await fetch(`${process.env.NEXT_PUBLIC_SERVER_LINK}/api/fileupload`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: formData,
-            mode:"no-cors"
-        })
-    }
-
-
-	return (
-		<div className="min-h-screen space-y-12">
-			<div className="max-w-2xl mx-auto py-24 px-4">
-				<h2 className="text-base font-semibold leading-7 ">
-					Admin Panel
-				</h2>
-				<p className="mt-1 text-sm leading-6 text-gray-400">
-					Upload the latest version of the video file.
-				</p>
-
-				<div className="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
-					<div className="col-span-full">
-						<label
-							htmlFor="video-file"
-							className="block text-sm font-medium leading-6 "
-						>
-							Video
-						</label>
-						<div className="mt-2 flex justify-center rounded-lg border border-dashed dark:border-white/20 border-black/25 px-6 py-10">
-							<div className="text-center">
-								<div className="mt-4 text-sm leading-6 text-gray-400">
-									<label
-										htmlFor="file-upload"
-										className="relative cursor-pointer rounded-md  font-semibold  focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-600 focus-within:ring-offset-2 focus-within:ring-offset-gray-900 hover:text-indigo-500"
-									>
-										<span>Upload a file</span>
-										<input
-											type="file"
-											accept=".mp4,.mkv,.avi,.mov,.flv,.wmv,.webm,.mpeg,.3gp,.ogg"
-											id="file-upload"
-											name="file-upload"
-											className="sr-only"
-											onChange={handleFileChange}
-										/>
-									</label>
-								</div>
-								<p className="text-xs leading-5 text-gray-400">
-									{file?.name ? file.name : 'Video files up to 1GB'}
-								</p>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div className="mt-6 flex items-center justify-end gap-x-6">
-					<button
-						type="submit"
-						className="rounded-md bg-indigo-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
-						onClick={handleUpload}
-					>
-						Upload
-					</button>
-				</div>
-			</div>
-		</div>
-	)
+import { UploadForm } from "@/components/upload/upload-form";
+
+export default function UploadPage() {
+  return (
+    <div className="container max-w-2xl mx-auto py-10">
+      <UploadForm />
+    </div>
+  );
 }
-
-export default Admin;

apps/client/src/app/layout.tsx

@@ -6,7 +6,6 @@ import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import { Theme } from "@/components/theme";
 import { PostHogProvider } from "@/components/posthog/providers";
-import TanstackProvider from "@/components/TanStackQuery/provider";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -37,14 +36,12 @@ export default function RootLayout({
       >
         <head />
         <body>
-          <TanstackProvider>
           <PostHogProvider>
             <ThemeProvider attribute="class" defaultTheme="system">
               {children}
               <Theme />
             </ThemeProvider>
           </PostHogProvider>
-          </TanstackProvider>
           <SpeedInsights />
         </body>
       </html>

apps/client/src/app/page.tsx

@@ -1,4 +1,5 @@
 "use client";
+// ! Home Page
 import { Home as Main } from "@/components/home/index";
 export default function Home() {
   return (

apps/client/src/components/TanStackQuery/provider.tsx

@@ -1,14 +1,11 @@
-"use client";
-import React from 'react'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import React from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
-function TanstackProvider({children}:{children: React.ReactNode}) {
-    const queryClient = new QueryClient()
+function TanstackProvider({ children }: { children: React.ReactNode }) {
+  const queryClient = new QueryClient();
   return (
-    <QueryClientProvider client={queryClient}>
-        {children}
-    </QueryClientProvider>
-    )
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
 }
 
-export default TanstackProvider;
+export default TanstackProvider;