From a134fa51c42529ac51d99e4fda019aa3371ab92e Mon Sep 17 00:00:00 2001
From: keanu-a <keanucaloua@gmail.com>
Date: Mon, 22 Jun 2026 12:08:41 -0700
Subject: [PATCH 1/6] feat(frontend): create useVideoUpload hook and api util
 functions

---
 frontend/src/hooks/use-video-upload.ts | 100 +++++++++++++++++++++++++
 frontend/src/lib/api/fetcher.ts        |  35 +++++++++
 frontend/src/lib/api/videos.ts         |  64 ++++++++++++++++
 frontend/src/lib/upload/s3.ts          |  31 ++++++++
 4 files changed, 230 insertions(+)
 create mode 100644 frontend/src/hooks/use-video-upload.ts
 create mode 100644 frontend/src/lib/api/fetcher.ts
 create mode 100644 frontend/src/lib/api/videos.ts
 create mode 100644 frontend/src/lib/upload/s3.ts

diff --git a/frontend/src/hooks/use-video-upload.ts b/frontend/src/hooks/use-video-upload.ts
new file mode 100644
index 0000000..9d489ab
--- /dev/null
+++ b/frontend/src/hooks/use-video-upload.ts
@@ -0,0 +1,100 @@
+import {
+  type ContentType,
+  createVideo,
+  getVideo,
+  updateVideoStatus,
+  VideoStatus,
+} from '@/lib/api/videos';
+import { uploadToS3 } from '@/lib/upload/s3';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+export type UploadStatus =
+  | 'idle'
+  | 'creating'
+  | 'uploading'
+  | 'processing'
+  | 'ready'
+  | 'error';
+
+interface UploadMetadata {
+  title: string;
+  description?: string;
+  contentType: ContentType;
+}
+
+const POLL_INTERVAL_MS = 2000;
+
+export function useVideoUpload() {
+  const [error, setError] = useState<string | null>(null);
+  const [progress, setProgress] = useState<number>(0);
+  const [status, setStatus] = useState<UploadStatus>('idle');
+  const [playbackId, setPlaybackId] = useState<string | null>(null);
+  const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  useEffect(
+    () => () => {
+      if (pollRef.current) {
+        clearInterval(pollRef.current);
+      }
+    },
+    [],
+  );
+
+  const pollUntilReady = useCallback((videoId: string) => {
+    // Poll for video processing status to be `READY` or `FAILED`
+    pollRef.current = setInterval(async () => {
+      try {
+        const video = await getVideo(videoId);
+        if (video.status === VideoStatus.READY) {
+          clearInterval(pollRef.current!);
+          setPlaybackId(video.playbackId);
+          setStatus('ready');
+        } else if (video.status === VideoStatus.FAILED) {
+          clearInterval(pollRef.current!);
+          setError('Error occurred while processing video');
+          setStatus('error');
+        }
+      } catch (e) {
+        clearInterval(pollRef.current!);
+        setError('Error occurred while polling video status');
+        setStatus('error');
+      }
+    }, POLL_INTERVAL_MS);
+  }, []);
+
+  const upload = useCallback(
+    async (file: File, metadata: UploadMetadata) => {
+      setError(null);
+      setProgress(0);
+
+      try {
+        // Initiate upload and get presigned PUT url
+        setStatus('creating');
+        const { videoId, presignedUrl } = await createVideo({
+          title: metadata.title,
+          description: metadata.description,
+          fileName: file.name,
+          contentType: metadata.contentType,
+        });
+
+        // Upload the file to S3
+        setStatus('uploading');
+        await uploadToS3(presignedUrl, file, setProgress);
+
+        // Update video status for Mux
+        await updateVideoStatus(videoId, VideoStatus.UPLOADED);
+        setStatus('processing');
+
+        // Poll for video processing status `READY` set by Mux
+        pollUntilReady(videoId);
+      } catch (e) {
+        console.error(e); // TODO: For dev purposes only
+        setError('Error occurred while uploading video');
+        setStatus('error');
+      }
+    },
+    [pollUntilReady],
+  );
+
+  return { status, progress, error, playbackId, upload };
+}
diff --git a/frontend/src/lib/api/fetcher.ts b/frontend/src/lib/api/fetcher.ts
new file mode 100644
index 0000000..ebc3c4a
--- /dev/null
+++ b/frontend/src/lib/api/fetcher.ts
@@ -0,0 +1,35 @@
+import { createClient } from '../supabase/client';
+
+const BASE_URL = process.env.NEXT_PUBLIC_API_URL;
+
+// Reusable API fetcher function to grab token and attach it to the request
+export async function apiFetch<T>(
+  path: string,
+  options: RequestInit = {},
+): Promise<T> {
+  const supabase = createClient();
+  const {
+    data: { session },
+  } = await supabase.auth.getSession();
+
+  if (!session) throw new Error('Not authenticated');
+
+  const res = await fetch(`${BASE_URL}${path}`, {
+    ...options,
+    headers: {
+      'Content-Type': 'application/json',
+      ...options.headers,
+      Authorization: `Bearer ${session.access_token}`,
+    },
+  });
+
+  if (!res.ok) {
+    throw new Error(`Request failed: ${res.status}`);
+  }
+
+  if (res.status === 204) {
+    return null as unknown as T;
+  }
+
+  return res.json() as T;
+}
diff --git a/frontend/src/lib/api/videos.ts b/frontend/src/lib/api/videos.ts
new file mode 100644
index 0000000..943e104
--- /dev/null
+++ b/frontend/src/lib/api/videos.ts
@@ -0,0 +1,64 @@
+import { apiFetch } from './fetcher';
+
+export const VideoStatus = {
+  PENDING: 'PENDING',
+  UPLOADED: 'UPLOADED',
+  PROCESSING: 'PROCESSING',
+  READY: 'READY',
+  FAILED: 'FAILED',
+} as const;
+
+export type VideoStatus = (typeof VideoStatus)[keyof typeof VideoStatus];
+
+export type ContentType =
+  | 'video/mp4'
+  | 'video/quicktime'
+  | 'video/webm'
+  | 'video/x-matroska'
+  | 'video/x-msvideo';
+
+export interface CreateVideoRequest {
+  title: string;
+  description?: string;
+  fileName: string;
+  contentType: ContentType;
+}
+
+export interface CreateVideoResponse {
+  videoId: string;
+  presignedUrl: string;
+  s3Key: string;
+}
+
+export interface GetVideoResponse {
+  id: string;
+  title: string;
+  status: VideoStatus;
+  playbackId: string;
+  createdAt: string;
+}
+
+export function createVideo(
+  request: CreateVideoRequest,
+): Promise<CreateVideoResponse> {
+  return apiFetch('/api/v1/videos', {
+    method: 'POST',
+    body: JSON.stringify(request),
+  });
+}
+
+export function updateVideoStatus(
+  id: string,
+  status: VideoStatus,
+): Promise<void> {
+  return apiFetch(`/api/v1/videos/${id}`, {
+    method: 'PATCH',
+    body: JSON.stringify({ status }),
+  });
+}
+
+export function getVideo(id: string): Promise<GetVideoResponse> {
+  return apiFetch(`/api/v1/videos/${id}`, {
+    method: 'GET',
+  });
+}
diff --git a/frontend/src/lib/upload/s3.ts b/frontend/src/lib/upload/s3.ts
new file mode 100644
index 0000000..b1cb884
--- /dev/null
+++ b/frontend/src/lib/upload/s3.ts
@@ -0,0 +1,31 @@
+export function uploadToS3(
+  presignedUrl: string,
+  file: File,
+  onProgress?: (percent: number) => void,
+): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.open('PUT', presignedUrl, true);
+    xhr.setRequestHeader('Content-Type', file.type);
+
+    xhr.upload.onprogress = (e) => {
+      if (onProgress && e.lengthComputable) {
+        onProgress(Math.round((e.loaded / e.total) * 100));
+      }
+    };
+
+    xhr.onload = () => {
+      if (xhr.status >= 200 && xhr.status < 300) {
+        resolve();
+      } else {
+        reject(new Error(`S3 upload failed: ${xhr.status}`));
+      }
+    };
+
+    xhr.onerror = () => {
+      reject(new Error('S3 upload failed'));
+    };
+
+    xhr.send(file);
+  });
+}

From 159ea3627a7d6c38d2e53dbe61c3947ea08a4e45 Mon Sep 17 00:00:00 2001
From: keanu-a <keanucaloua@gmail.com>
Date: Mon, 22 Jun 2026 13:48:39 -0700
Subject: [PATCH 2/6] feat(frontend): create upload video form and page

---
 frontend/src/app/upload/layout.tsx            |   9 +
 frontend/src/app/upload/page.tsx              |  19 ++
 frontend/src/components/ui/progress.tsx       |  31 +++
 frontend/src/components/ui/textarea.tsx       |  18 ++
 .../src/components/upload/upload-form.tsx     | 185 ++++++++++++++++++
 frontend/src/hooks/use-video-upload.ts        |  38 ++--
 frontend/src/lib/api/videos.ts                |  26 ++-
 7 files changed, 300 insertions(+), 26 deletions(-)
 create mode 100644 frontend/src/app/upload/layout.tsx
 create mode 100644 frontend/src/app/upload/page.tsx
 create mode 100644 frontend/src/components/ui/progress.tsx
 create mode 100644 frontend/src/components/ui/textarea.tsx
 create mode 100644 frontend/src/components/upload/upload-form.tsx

diff --git a/frontend/src/app/upload/layout.tsx b/frontend/src/app/upload/layout.tsx
new file mode 100644
index 0000000..d7a4b0d
--- /dev/null
+++ b/frontend/src/app/upload/layout.tsx
@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+
+export default function UploadLayout({ children }: { children: ReactNode }) {
+  return (
+    <div className="flex min-h-svh items-center justify-center p-6 md:p-10">
+      <div className="w-full max-w-sm">{children}</div>
+    </div>
+  );
+}
diff --git a/frontend/src/app/upload/page.tsx b/frontend/src/app/upload/page.tsx
new file mode 100644
index 0000000..177cc16
--- /dev/null
+++ b/frontend/src/app/upload/page.tsx
@@ -0,0 +1,19 @@
+import { redirect } from 'next/navigation';
+
+import { createClient } from '@/lib/supabase/server';
+import UploadForm from '@/components/upload/upload-form';
+
+export default async function UploadPage() {
+  const supabase = await createClient();
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  if (!user) redirect('/login');
+
+  return (
+    <main>
+      <UploadForm />
+    </main>
+  );
+}
diff --git a/frontend/src/components/ui/progress.tsx b/frontend/src/components/ui/progress.tsx
new file mode 100644
index 0000000..584011b
--- /dev/null
+++ b/frontend/src/components/ui/progress.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import { Progress as ProgressPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Progress({
+  className,
+  value,
+  ...props
+}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      className={cn(
+        "relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-muted",
+        className
+      )}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        className="size-full flex-1 bg-primary transition-all"
+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  )
+}
+
+export { Progress }
diff --git a/frontend/src/components/ui/textarea.tsx b/frontend/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..04d27f7
--- /dev/null
+++ b/frontend/src/components/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }
diff --git a/frontend/src/components/upload/upload-form.tsx b/frontend/src/components/upload/upload-form.tsx
new file mode 100644
index 0000000..4e4b5d9
--- /dev/null
+++ b/frontend/src/components/upload/upload-form.tsx
@@ -0,0 +1,185 @@
+'use client';
+
+import * as z from 'zod';
+import { Controller, useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+
+import { isContentType } from '@/lib/api/videos';
+import { UploadStatus, useVideoUpload } from '@/hooks/use-video-upload';
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '../ui/card';
+import { Field, FieldError, FieldGroup, FieldLabel } from '../ui/field';
+import { Input } from '../ui/input';
+import { Textarea } from '../ui/textarea';
+import { Progress } from '../ui/progress';
+import { Button } from '../ui/button';
+
+const MAX_FILE_SIZE = 500 * 1024 * 1024; // 500MB
+
+const uploadSchema = z.object({
+  title: z
+    .string()
+    .min(1, 'Title is required')
+    .max(255, 'Title must be less than 255 characters'),
+  description: z
+    .string()
+    .max(5000, 'Description must be less than 5000 characters')
+    .optional(),
+  file: z
+    .instanceof(File, { message: 'File is required' })
+    .refine((file) => file.size > 0, {
+      message: 'File appears to be empty',
+    })
+    .refine((file) => file.size <= MAX_FILE_SIZE, {
+      message: 'File size must be less than 500MB',
+    })
+    .refine((file) => isContentType(file.type), {
+      message: 'File type is not supported',
+    }),
+});
+
+type UploadFormValues = z.infer<typeof uploadSchema>;
+
+export default function UploadForm() {
+  const { uploadStatus, progress, error, upload } = useVideoUpload();
+
+  const form = useForm<UploadFormValues>({
+    resolver: zodResolver(uploadSchema),
+    defaultValues: {
+      title: '',
+      description: '',
+      file: undefined,
+    },
+  });
+
+  const isWorking =
+    uploadStatus === UploadStatus.CREATING ||
+    uploadStatus === UploadStatus.UPLOADING ||
+    uploadStatus === UploadStatus.PROCESSING;
+
+  const onSubmit = (data: UploadFormValues) => {
+    const { file, title, description } = data;
+
+    if (!isContentType(file.type)) return;
+    upload(file, { title, description, contentType: file.type });
+  };
+
+  // TODO: Currently dead end, need to implement a way to navigate to the uploaded video
+  if (uploadStatus === UploadStatus.READY) {
+    return (
+      <Card>
+        <CardContent>
+          <p>Upload complete and processed!</p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Upload Video</CardTitle>
+        <CardDescription>Upload your video file</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <FieldGroup>
+            <Controller
+              name="title"
+              control={form.control}
+              render={({ field, fieldState }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <FieldLabel htmlFor="upload-title">Title</FieldLabel>
+                  <Input
+                    {...field}
+                    id="upload-title"
+                    placeholder="Title"
+                    aria-invalid={fieldState.invalid}
+                    disabled={isWorking}
+                  />
+                  {fieldState.error && (
+                    <FieldError errors={[fieldState.error]} />
+                  )}
+                </Field>
+              )}
+            />
+
+            <Controller
+              name="description"
+              control={form.control}
+              render={({ field, fieldState }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <FieldLabel htmlFor="upload-description">
+                    Description
+                  </FieldLabel>
+                  <Textarea
+                    {...field}
+                    id="upload-description"
+                    placeholder="Description"
+                    aria-invalid={fieldState.invalid}
+                    disabled={isWorking}
+                  />
+                  {fieldState.error && (
+                    <FieldError errors={[fieldState.error]} />
+                  )}
+                </Field>
+              )}
+            />
+
+            <Controller
+              name="file"
+              control={form.control}
+              render={({
+                field: { value, onChange, ...field },
+                fieldState,
+              }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <FieldLabel htmlFor="upload-file">File</FieldLabel>
+                  <Input
+                    {...field}
+                    type="file"
+                    id="upload-file"
+                    accept="video/*"
+                    aria-invalid={fieldState.invalid}
+                    disabled={isWorking}
+                    onChange={(e) => onChange(e.target.files?.item(0))}
+                  />
+                  {fieldState.error && (
+                    <FieldError errors={[fieldState.error]} />
+                  )}
+                </Field>
+              )}
+            />
+          </FieldGroup>
+
+          {uploadStatus === UploadStatus.UPLOADING && (
+            <div>
+              <Progress value={progress} />
+              <p>{progress}% uploaded</p>
+            </div>
+          )}
+
+          {uploadStatus === UploadStatus.PROCESSING && (
+            <p>Processing... this can take a minute</p>
+          )}
+
+          {error && <p className="text-destructive">{error}</p>}
+
+          <Button
+            type="submit"
+            disabled={isWorking}
+            className="w-full mt-4 cursor-pointer"
+          >
+            {isWorking ? 'Uploading...' : 'Upload'}
+          </Button>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/frontend/src/hooks/use-video-upload.ts b/frontend/src/hooks/use-video-upload.ts
index 9d489ab..1a5b8e0 100644
--- a/frontend/src/hooks/use-video-upload.ts
+++ b/frontend/src/hooks/use-video-upload.ts
@@ -8,13 +8,16 @@ import {
 import { uploadToS3 } from '@/lib/upload/s3';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
-export type UploadStatus =
-  | 'idle'
-  | 'creating'
-  | 'uploading'
-  | 'processing'
-  | 'ready'
-  | 'error';
+export const UploadStatus = {
+  IDLE: 'idle',
+  CREATING: 'creating',
+  UPLOADING: 'uploading',
+  PROCESSING: 'processing',
+  READY: 'ready',
+  ERROR: 'error',
+} as const;
+
+export type UploadStatus = (typeof UploadStatus)[keyof typeof UploadStatus];
 
 interface UploadMetadata {
   title: string;
@@ -27,7 +30,9 @@ const POLL_INTERVAL_MS = 2000;
 export function useVideoUpload() {
   const [error, setError] = useState<string | null>(null);
   const [progress, setProgress] = useState<number>(0);
-  const [status, setStatus] = useState<UploadStatus>('idle');
+  const [uploadStatus, setUploadStatus] = useState<UploadStatus>(
+    UploadStatus.IDLE,
+  );
   const [playbackId, setPlaybackId] = useState<string | null>(null);
   const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
 
@@ -48,16 +53,16 @@ export function useVideoUpload() {
         if (video.status === VideoStatus.READY) {
           clearInterval(pollRef.current!);
           setPlaybackId(video.playbackId);
-          setStatus('ready');
+          setUploadStatus(UploadStatus.READY);
         } else if (video.status === VideoStatus.FAILED) {
           clearInterval(pollRef.current!);
           setError('Error occurred while processing video');
-          setStatus('error');
+          setUploadStatus(UploadStatus.ERROR);
         }
       } catch (e) {
         clearInterval(pollRef.current!);
         setError('Error occurred while polling video status');
-        setStatus('error');
+        setUploadStatus(UploadStatus.ERROR);
       }
     }, POLL_INTERVAL_MS);
   }, []);
@@ -69,7 +74,7 @@ export function useVideoUpload() {
 
       try {
         // Initiate upload and get presigned PUT url
-        setStatus('creating');
+        setUploadStatus(UploadStatus.CREATING);
         const { videoId, presignedUrl } = await createVideo({
           title: metadata.title,
           description: metadata.description,
@@ -78,23 +83,22 @@ export function useVideoUpload() {
         });
 
         // Upload the file to S3
-        setStatus('uploading');
+        setUploadStatus(UploadStatus.UPLOADING);
         await uploadToS3(presignedUrl, file, setProgress);
 
         // Update video status for Mux
         await updateVideoStatus(videoId, VideoStatus.UPLOADED);
-        setStatus('processing');
+        setUploadStatus(UploadStatus.PROCESSING);
 
         // Poll for video processing status `READY` set by Mux
         pollUntilReady(videoId);
       } catch (e) {
-        console.error(e); // TODO: For dev purposes only
         setError('Error occurred while uploading video');
-        setStatus('error');
+        setUploadStatus(UploadStatus.ERROR);
       }
     },
     [pollUntilReady],
   );
 
-  return { status, progress, error, playbackId, upload };
+  return { uploadStatus, progress, error, playbackId, upload };
 }
diff --git a/frontend/src/lib/api/videos.ts b/frontend/src/lib/api/videos.ts
index 943e104..be473d3 100644
--- a/frontend/src/lib/api/videos.ts
+++ b/frontend/src/lib/api/videos.ts
@@ -10,12 +10,20 @@ export const VideoStatus = {
 
 export type VideoStatus = (typeof VideoStatus)[keyof typeof VideoStatus];
 
-export type ContentType =
-  | 'video/mp4'
-  | 'video/quicktime'
-  | 'video/webm'
-  | 'video/x-matroska'
-  | 'video/x-msvideo';
+export const CONTENT_TYPES = [
+  'video/mp4',
+  'video/quicktime',
+  'video/webm',
+  'video/x-matroska',
+  'video/x-msvideo',
+] as const;
+
+export type ContentType = (typeof CONTENT_TYPES)[number];
+
+// Checks if provided string is a valid content type
+export function isContentType(value: string): value is ContentType {
+  return (CONTENT_TYPES as readonly string[]).includes(value);
+}
 
 export interface CreateVideoRequest {
   title: string;
@@ -49,11 +57,11 @@ export function createVideo(
 
 export function updateVideoStatus(
   id: string,
-  status: VideoStatus,
+  videoStatus: VideoStatus,
 ): Promise<void> {
-  return apiFetch(`/api/v1/videos/${id}`, {
+  return apiFetch(`/api/v1/videos/${id}/status`, {
     method: 'PATCH',
-    body: JSON.stringify({ status }),
+    body: JSON.stringify({ videoStatus }),
   });
 }
 

From 5df26e8b478d8178ab35e71e264f47dba5eaf92f Mon Sep 17 00:00:00 2001
From: keanu-a <keanucaloua@gmail.com>
Date: Mon, 22 Jun 2026 13:49:10 -0700
Subject: [PATCH 3/6] fix(backend): add PATCH to cors allowed methods

---
 backend/src/main/java/com/kyyros/config/SecurityConfig.java | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/backend/src/main/java/com/kyyros/config/SecurityConfig.java b/backend/src/main/java/com/kyyros/config/SecurityConfig.java
index e757622..62d1858 100644
--- a/backend/src/main/java/com/kyyros/config/SecurityConfig.java
+++ b/backend/src/main/java/com/kyyros/config/SecurityConfig.java
@@ -64,7 +64,7 @@ public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Excepti
     public CorsConfigurationSource corsConfigurationSource() {
         CorsConfiguration config = new CorsConfiguration();
         config.setAllowedOrigins(List.of("http://localhost:3000")); // TODO: Add Vercel URL in production
-        config.setAllowedMethods(List.of("GET", "POST", "PUT", "DELETE", "OPTIONS"));
+        config.setAllowedMethods(List.of("GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS"));
         config.setAllowedHeaders(List.of("*"));
         config.setAllowCredentials(true);
 

From 9803e1c3dbf67f0a337544db6e9c134cd4ed2bad Mon Sep 17 00:00:00 2001
From: keanu-a <keanucaloua@gmail.com>
Date: Mon, 22 Jun 2026 16:04:52 -0700
Subject: [PATCH 4/6] fix(frontend): add polling timeout and overwrite existing
 interval logic

---
 frontend/src/hooks/use-video-upload.ts | 16 +++++++++++++++-
 frontend/src/lib/api/fetcher.ts        |  4 ++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/frontend/src/hooks/use-video-upload.ts b/frontend/src/hooks/use-video-upload.ts
index 1a5b8e0..ab72e8b 100644
--- a/frontend/src/hooks/use-video-upload.ts
+++ b/frontend/src/hooks/use-video-upload.ts
@@ -26,6 +26,7 @@ interface UploadMetadata {
 }
 
 const POLL_INTERVAL_MS = 2000;
+const MAX_POLL_ATTEMPTS = 150; // ~5 min at 2s
 
 export function useVideoUpload() {
   const [error, setError] = useState<string | null>(null);
@@ -45,9 +46,22 @@ export function useVideoUpload() {
     [],
   );
 
+  // Poll for video processing status to be `READY` or `FAILED`
   const pollUntilReady = useCallback((videoId: string) => {
-    // Poll for video processing status to be `READY` or `FAILED`
+    // Clear any existing interval before starting a new one
+    if (pollRef.current) clearInterval(pollRef.current);
+
+    let attempts = 0; // Bound the number of attempts
+
     pollRef.current = setInterval(async () => {
+      // Setting ERROR if Mux outage or webhook failure
+      if (++attempts > MAX_POLL_ATTEMPTS) {
+        clearInterval(pollRef.current!);
+        setError('Processing timed out. Please try again.');
+        setUploadStatus(UploadStatus.ERROR);
+        return;
+      }
+
       try {
         const video = await getVideo(videoId);
         if (video.status === VideoStatus.READY) {
diff --git a/frontend/src/lib/api/fetcher.ts b/frontend/src/lib/api/fetcher.ts
index ebc3c4a..3ecbea8 100644
--- a/frontend/src/lib/api/fetcher.ts
+++ b/frontend/src/lib/api/fetcher.ts
@@ -2,6 +2,10 @@ import { createClient } from '../supabase/client';
 
 const BASE_URL = process.env.NEXT_PUBLIC_API_URL;
 
+if (!BASE_URL) {
+  throw new Error('NEXT_PUBLIC_API_URL is not defined');
+}
+
 // Reusable API fetcher function to grab token and attach it to the request
 export async function apiFetch<T>(
   path: string,

From 071be3539cfb5b7d5e8f6d9f193844411c5011fd Mon Sep 17 00:00:00 2001
From: keanu-a <keanucaloua@gmail.com>
Date: Mon, 22 Jun 2026 16:08:41 -0700
Subject: [PATCH 5/6] fix: add null to playbackId and add role alert to form
 error

---
 frontend/src/components/upload/upload-form.tsx | 6 +++++-
 frontend/src/lib/api/videos.ts                 | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/upload/upload-form.tsx b/frontend/src/components/upload/upload-form.tsx
index 4e4b5d9..8961444 100644
--- a/frontend/src/components/upload/upload-form.tsx
+++ b/frontend/src/components/upload/upload-form.tsx
@@ -169,7 +169,11 @@ export default function UploadForm() {
             <p>Processing... this can take a minute</p>
           )}
 
-          {error && <p className="text-destructive">{error}</p>}
+          {error && (
+            <p role="alert" className="text-destructive">
+              {error}
+            </p>
+          )}
 
           <Button
             type="submit"
diff --git a/frontend/src/lib/api/videos.ts b/frontend/src/lib/api/videos.ts
index be473d3..a77120c 100644
--- a/frontend/src/lib/api/videos.ts
+++ b/frontend/src/lib/api/videos.ts
@@ -42,7 +42,7 @@ export interface GetVideoResponse {
   id: string;
   title: string;
   status: VideoStatus;
-  playbackId: string;
+  playbackId: string | null;
   createdAt: string;
 }
 

From c2b500a7f1eaa743288f5c29f22886d8ca6d78c8 Mon Sep 17 00:00:00 2001
From: keanu-a <keanucaloua@gmail.com>
Date: Mon, 22 Jun 2026 16:11:15 -0700
Subject: [PATCH 6/6] chore(frontend): set TODO for apiFetch error handling

---
 frontend/src/lib/api/fetcher.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/lib/api/fetcher.ts b/frontend/src/lib/api/fetcher.ts
index 3ecbea8..02e7df5 100644
--- a/frontend/src/lib/api/fetcher.ts
+++ b/frontend/src/lib/api/fetcher.ts
@@ -27,6 +27,7 @@ export async function apiFetch<T>(
     },
   });
 
+  // TODO: Send better error messages to the client since body is not used
   if (!res.ok) {
     throw new Error(`Request failed: ${res.status}`);
   }