Implement db setup and api routes

.cursor/rules/nextjs-react-typescript-cursor-rules.mdc

@@ -0,0 +1,46 @@
+---
+alwaysApply: true
+---
+
+You are an expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Radix UI and Tailwind.
+
+  Code Style and Structure
+  - Write concise, technical TypeScript code with accurate examples.
+  - Use functional and declarative programming patterns; avoid classes.
+  - Prefer iteration and modularization over code duplication.
+  - Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
+  - Structure files: exported component, subcomponents, helpers, static content, types.
+
+  Naming Conventions
+  - Use lowercase with dashes for directories (e.g., components/auth-wizard).
+  - Favor named exports for components.
+
+  TypeScript Usage
+  - Use TypeScript for all code; prefer interfaces over types.
+  - Avoid enums; use maps instead.
+  - Use functional components with TypeScript interfaces.
+
+  Syntax and Formatting
+  - Use the "function" keyword for pure functions.
+  - Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
+  - Use declarative JSX.
+
+  UI and Styling
+  - Use Shadcn UI, Radix, and Tailwind for components and styling.
+  - Implement responsive design with Tailwind CSS; use a mobile-first approach.
+
+  Performance Optimization
+  - Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC).
+  - Wrap client components in Suspense with fallback.
+  - Use dynamic loading for non-critical components.
+  - Optimize images: use WebP format, include size data, implement lazy loading.
+
+  Key Conventions
+  - Use 'nuqs' for URL search parameter state management.
+  - Optimize Web Vitals (LCP, CLS, FID).
+  - Limit 'use client':
+    - Favor server components and Next.js SSR.
+    - Use only for Web API access in small components.
+    - Avoid for data fetching or state management.
+
+  Follow Next.js docs for Data Fetching, Rendering, and Routing.

.gitignore

@@ -23,6 +23,9 @@
 # misc
 .DS_Store
 *.pem
+.cursor/*
+!.cursor/rules/
+!.cursor/rules/**
 
 # debug
 npm-debug.log*

app/(root)/books/[slug]/page.tsx

@@ -0,0 +1,66 @@
+import { auth } from "@clerk/nextjs/server";
+import Image from "next/image";
+import { notFound, redirect } from "next/navigation";
+
+import { getBookBySlug } from "@/lib/actions/book.actions";
+
+type BookPageProps = {
+  params: Promise<{
+    slug: string;
+  }>;
+};
+
+const Page = async ({ params }: BookPageProps) => {
+  const { userId } = await auth();
+  if (!userId) {
+    redirect("/sign-in");
+  }
+
+  const { slug } = await params;
+  const result = await getBookBySlug(slug, userId);
+  if (!result.success || !result.data) {
+    notFound();
+  }
+
+  const book = result.data;
+
+  return (
+    <main className="wrapper container">
+      <div className="mx-auto max-w-180 space-y-8">
+        <section className="flex flex-col gap-4">
+          <h1 className="page-title-xl">{book.title}</h1>
+          <p className="subtitle">By {book.author}</p>
+        </section>
+
+        <section className="grid gap-6 md:grid-cols-[220px,1fr]">
+          <Image
+            src={book.coverURL}
+            alt={`${book.title} cover`}
+            width={220}
+            height={320}
+            className="w-full rounded-xl border border-[var(--border-medium)] object-cover"
+          />
+
+          <div className="space-y-4 rounded-xl border border-[var(--border-medium)] bg-[var(--bg-card)] p-6">
+            <p className="text-sm text-[var(--text-secondary)]">
+              Uploaded PDF URL
+            </p>
+            <a
+              href={book.fileURL}
+              target="_blank"
+              rel="noreferrer"
+              className="text-sm text-[var(--color-brand)] underline underline-offset-2 break-all"
+            >
+              {book.fileURL}
+            </a>
+            <p className="text-sm text-[var(--text-secondary)]">
+              Segments: {book.totalSegments}
+            </p>
+          </div>
+        </section>
+      </div>
+    </main>
+  );
+};
+
+export default Page;

app/(root)/page.tsx

@@ -1,13 +1,22 @@
+import { auth } from "@clerk/nextjs/server";
 import BookCard from "@/components/BookCard";
 import HeroSection from "@/components/HeroSection";
-import { sampleBooks } from "@/lib/constants";
+import { getAllBooks } from "@/lib/actions/book.actions";
+import { IBook } from "@/types";
+// import { sampleBooks } from "@/lib/constants";
+
+const Page = async () => {
+  const { userId } = await auth();
+  const bookResults = userId
+    ? await getAllBooks(userId)
+    : { success: true, data: [] };
+  const books = bookResults.success && bookResults.data ? bookResults.data : [];
 
-const Page = () => {
   return (
     <div className="wrapper container">
       <HeroSection />
       <div className="library-books-grid">
-        {sampleBooks.map((book) => (
+        {books.map((book: IBook) => (
           <BookCard key={book._id} {...book} />
         ))}
       </div>

app/api/upload/route.ts

@@ -0,0 +1,81 @@
+import { auth } from "@clerk/nextjs/server";
+import { del, put } from "@vercel/blob";
+import { NextResponse } from "next/server";
+
+export const runtime = "nodejs";
+const MAX_UPLOAD_SIZE_BYTES = 50 * 1024 * 1024;
+
+export async function POST(request: Request): Promise<NextResponse> {
+  try {
+    const { userId } = await auth();
+    if (!userId) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    const blobToken = process.env.BLOB_READ_WRITE_TOKEN ?? process.env.bookify_READ_WRITE_TOKEN;
+    if (!blobToken) {
+      return NextResponse.json(
+        { error: "Missing Blob token. Set BLOB_READ_WRITE_TOKEN in .env.local" },
+        { status: 500 },
+      );
+    }
+
+    const formData = await request.formData();
+    const pathname = formData.get("pathname");
+    const file = formData.get("file");
+    const contentType = formData.get("contentType");
+
+    if (typeof pathname !== "string" || !pathname.trim()) {
+      return NextResponse.json({ error: "Missing pathname" }, { status: 400 });
+    }
+
+    if (!(file instanceof Blob)) {
+      return NextResponse.json({ error: "Missing file" }, { status: 400 });
+    }
+
+    if (file.size > MAX_UPLOAD_SIZE_BYTES) {
+      return NextResponse.json({ error: "File too large" }, { status: 413 });
+    }
+
+    const blob = await put(pathname, file, {
+      token: blobToken,
+      access: "public",
+      contentType: typeof contentType === "string" ? contentType : undefined,
+    });
+
+    return NextResponse.json({ url: blob.url, pathname: blob.pathname });
+  } catch (error) {
+    const message = error instanceof Error ? error.message : "Failed to upload file";
+    return NextResponse.json({ error: message }, { status: 500 });
+  }
+}
+
+export async function DELETE(request: Request): Promise<NextResponse> {
+  try {
+    const { userId } = await auth();
+    if (!userId) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    const blobToken = process.env.BLOB_READ_WRITE_TOKEN ?? process.env.bookify_READ_WRITE_TOKEN;
+    if (!blobToken) {
+      return NextResponse.json(
+        { error: "Missing Blob token. Set BLOB_READ_WRITE_TOKEN in .env.local" },
+        { status: 500 },
+      );
+    }
+
+    const body = (await request.json()) as { pathname?: string };
+    const pathname = body?.pathname?.trim();
+
+    if (!pathname) {
+      return NextResponse.json({ error: "Missing pathname" }, { status: 400 });
+    }
+
+    await del(pathname, { token: blobToken });
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    const message = error instanceof Error ? error.message : "Failed to delete file";
+    return NextResponse.json({ error: message }, { status: 500 });
+  }
+}

app/layout.tsx

@@ -11,6 +11,8 @@ import { cn } from "@/lib/utils";
 import { ClerkPricingActivePlanHighlight } from "@/components/ClerkPricingActivePlanHighlight";
 import Navbar from "@/components/Navbar";
 import { ClerkProvider } from "@clerk/nextjs";
+import { Toaster } from "@/components/ui/sonner";
+
 
 const inter = Inter({ subsets: ["latin"], variable: "--font-sans" });
 
@@ -67,6 +69,7 @@ export default function RootLayout({
           <Navbar />
           {children}
         </ClerkProvider>
+        <Toaster position="top-center" richColors />
       </body>
     </html>
   );

components/HeroSection.tsx

@@ -3,7 +3,7 @@ import Link from "next/link";
 
 const HeroSection = () => {
   return (
-    <section className="wrapper pt-28 mb-10 md:mb-16">
+    <section className="wrapper mb-10 md:mb-16">
       <div className="library-hero-card">
         <div className="library-hero-content">
           {/* Left Part */}