crespofer · crespofer · May 9, 2025 · May 8, 2025 · May 8, 2025 · May 8, 2025
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,11 +23,13 @@
   },
   "dependencies": {
     "@auth/prisma-adapter": "^2.7.2",
+    "@hookform/resolvers": "^5.0.1",
     "@prisma/client": "^6.5.0",
     "@radix-ui/react-avatar": "^1.1.9",
     "@radix-ui/react-dropdown-menu": "^2.1.14",
+    "@radix-ui/react-label": "^2.1.6",
     "@radix-ui/react-navigation-menu": "^1.2.11",
-    "@radix-ui/react-slot": "^1.2.1",
+    "@radix-ui/react-slot": "^1.2.2",
     "@t3-oss/env-nextjs": "^0.12.0",
     "@tanstack/react-query": "^5.69.0",
     "@trpc/client": "^11.0.0",
@@ -39,12 +41,15 @@
     "lucide-react": "^0.507.0",
     "next": "^15.2.3",
     "next-auth": "5.0.0-beta.25",
+    "next-themes": "^0.4.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-hook-form": "^7.56.3",
     "server-only": "^0.0.1",
+    "sonner": "^2.0.3",
     "superjson": "^2.2.1",
     "tailwind-merge": "^3.2.0",
-    "zod": "^3.24.2"
+    "zod": "^3.24.4"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.1",

diff --git a/prisma/schema.prisma b/prisma/schema.prisma
@@ -92,7 +92,7 @@ model Course {
   id       String  @id @default(cuid())
   name     String  @unique // Calculus 2
   code     String  @unique // MAC2312
-  url      String
+  url      String?
   count    Int     @default(0)
   pending  Boolean @default(true)
   notes    Note[]

diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
@@ -0,0 +1,10 @@
+
+export default function Admin() {
+
+    return (
+        <div className="pt-14">
+            Admin Page
+        </div>
+    )
+
+}
diff --git a/src/app/courses/page.tsx b/src/app/courses/page.tsx
@@ -1,10 +1,58 @@
-export default function Courses() {
-  // Will show all courses avaible as cards
-  // You can click on each course to navigate to courses/:id (need authentiction)
+import Link from "next/link";
+import CourseCard from "~/components/ui/CourseCard";
 
+const courses = [
+  {
+    name: "Calculus I",
+    code: "MATH101",
+    imageUrl: "/images/calculus.jpg",
+  },
+  {
+    name: "Introduction to Programming",
+    code: "CS100",
+    imageUrl: "/images/programming.jpg",
+  },
+  {
+    name: "Physics I",
+    code: "PHYS101",
+    imageUrl: "/images/physics.jpg",
+  },{
+    name: "Physics I",
+    code: "PHYS101",
+    imageUrl: "/images/physics.jpg",
+  },{
+    name: "Physics I",
+    code: "PHYS101",
+    imageUrl: "/images/physics.jpg",
+  },{
+    name: "Physics I",
+    code: "PHYS101",
+    imageUrl: "/images/physics.jpg",
+  },
+];
+
+export default function CoursesPage() {
   return (
-    <div>
-      <h1 className="text-red-700 pt-14">Courses</h1>
-    </div>
+    <main className="max-w-7xl mx-auto px-4 py-8 pt-15">
+      <h1 className="text-3xl font-bold mb-6">Courses</h1>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 mb-12">
+        {courses.map((course) => (
+          <CourseCard
+            key={course.code}
+            name={course.name}
+            code={course.code}
+            imageUrl={course.imageUrl}
+          />
+        ))}
+      </div>
+
+      <div className="text-center mt-16">
+        <p className="text-lg font-medium mb-4">{"Don't see your course?"}</p>
+        <Link href="/request-course" className="inline-block bg-black text-white px-6 py-2 rounded-full hover:bg-primary/90 transition">
+            Request a Course
+        </Link>
+      </div>
+    </main>
   );
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -5,6 +5,7 @@ import { Geist } from "next/font/google";
 
 import { TRPCReactProvider } from "~/trpc/react";
 import { Header } from "~/components/ui/header";
+import { Toaster } from "~/components/ui/sonner";
 
 export const metadata: Metadata = {
   title: "Public Notes",
@@ -24,6 +25,7 @@ export default function RootLayout({
     <html lang="en" className={`${geist.variable}`}>
       <body>
         <Header />
+        <Toaster position="bottom-right" richColors/>
         <TRPCReactProvider>{children}</TRPCReactProvider>
       </body>
     </html>

diff --git a/src/app/request-course/page.tsx b/src/app/request-course/page.tsx
@@ -0,0 +1,144 @@
+"use client";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import { Button } from "~/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "~/components/ui/form";
+import { Input } from "~/components/ui/input";
+import { Loader2 } from "lucide-react";
+import { toast } from "sonner"
+
+import { api } from "~/trpc/react";
+import { useState } from "react";
+
+const formSchema = z.object({
+  courseName: z.string().min(1).min(10).max(60),
+  coursePrefix: z.string().min(1).min(3).max(3),
+  courseCode: z.string().min(1).min(4).max(4),
+});
+
+export default function RequestCourses() {
+  const [message, setMessage] = useState<null | string>(null);
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+  });
+  const createCourse = api.course.requestCourse.useMutation({
+    onSuccess: (result) => {
+      if (result.message) {
+        setMessage(result.message);
+      } else if (result.newCourse) {
+        toast.success(`${result.newCourse.code} successfully requested`)
+      }
+    },
+    onError: (error) => {
+      toast.error("Something went wrong");
+      console.error(error.message, error.data);
+    },
+    onSettled: () => {
+      form.reset({
+      courseName: "",
+      courseCode: "",
+      coursePrefix: "",
+    })}
+  });
+
+  function onSubmit(values: z.infer<typeof formSchema>) {
+    const capitalPrefix = values.coursePrefix.toUpperCase();
+    createCourse.mutate({
+      name: values.courseName,
+      prefix: capitalPrefix,
+      code: values.courseCode,
+    });
+  }
+
+  return (
+    <main className="mx-auto max-w-7xl px-4 py-8 pt-15">
+      <h1 className="mb-6 text-3xl font-bold">Request to add a Course</h1>
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="mx-auto max-w-3xl space-y-8 py-10"
+        >
+          <FormField
+            control={form.control}
+            name="courseName"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Course Name</FormLabel>
+                <FormControl>
+                  <Input
+                    placeholder="Computer Science 1"
+                    type="text"
+                    {...field}
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <div className="grid grid-cols-12 gap-4">
+            <div className="col-span-6">
+              <FormField
+                control={form.control}
+                name="coursePrefix"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Course Prefix</FormLabel>
+                    <FormControl>
+                      <Input placeholder="COP" type="text" {...field} />
+                    </FormControl>
+                    <FormDescription>
+                      This should be the three letters
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <div className="col-span-6">
+              <FormField
+                control={form.control}
+                name="courseCode"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Course Code</FormLabel>
+                    <FormControl>
+                      <Input placeholder="3502" type="text" {...field} />
+                    </FormControl>
+                    <FormDescription>
+                      This should be the numbers following the course prefix
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+          </div>
+          {createCourse.isPending ? (
+            <Button disabled>
+              <Loader2 className="animate-spin" />
+              Loading
+            </Button>
+          ) : (
+            <Button className="cursor-pointer" type="submit">
+              Submit
+            </Button>
+          )}
+          {message && <p className="text-red-600">{message}</p>}
+        </form>
+      </Form>
+    </main>
+  );
+}
diff --git a/src/components/ui/CourseCard.tsx b/src/components/ui/CourseCard.tsx
@@ -0,0 +1,20 @@
+import Image from "next/image";
+
+type CourseCardProps = {
+    name: string;
+    code: string;
+    imageUrl: string;
+  };
+
+  export default function CourseCard({ name, code, imageUrl }: CourseCardProps) {
+    return (
+      <div className="bg-white rounded-2xl shadow-md overflow-hidden cursor-pointer">
+        <Image src={imageUrl} alt={name} className="w-full h-40 object-cover" />
+        <div className="p-4">
+          <h3 className="text-lg font-semibold">{name}</h3>
+          <p className="text-gray-500">{code}</p>
+        </div>
+      </div>
+    );
+  }
+