feat: secure and document book reviews system

Added rate limiting to APIs, cleaned up docs, implemented fallback logic for reviews without text, and added comprehensive n8n guide.

app/__tests__/components/CurrentlyReading.test.tsx

@@ -0,0 +1,102 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import CurrentlyReading from "@/app/components/CurrentlyReading";
+
+// Mock next-intl
+jest.mock("next-intl", () => ({
+  useTranslations: () => (key: string) => {
+    const translations: Record<string, string> = {
+      title: "Reading",
+      progress: "Progress",
+    };
+    return translations[key] || key;
+  },
+}));
+
+// Mock next/image
+jest.mock("next/image", () => ({
+  __esModule: true,
+  default: (props: any) => <img {...props} />,
+}));
+
+// Mock fetch
+global.fetch = jest.fn();
+
+describe("CurrentlyReading Component", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("renders nothing when loading", () => {
+    // Return a never-resolving promise to simulate loading state
+    (global.fetch as jest.Mock).mockReturnValue(new Promise(() => {}));
+    const { container } = render(<CurrentlyReading />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("renders nothing when no books are returned", async () => {
+    (global.fetch as jest.Mock).mockResolvedValue({
+      ok: true,
+      json: async () => ({ currentlyReading: null }),
+    });
+
+    const { container } = render(<CurrentlyReading />);
+    await waitFor(() => expect(global.fetch).toHaveBeenCalled());
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("renders a book when data is fetched", async () => {
+    const mockBook = {
+      title: "Test Book",
+      authors: ["Test Author"],
+      image: "/test-image.jpg",
+      progress: 50,
+      startedAt: "2023-01-01",
+    };
+
+    (global.fetch as jest.Mock).mockResolvedValue({
+      ok: true,
+      json: async () => ({ currentlyReading: mockBook }),
+    });
+
+    render(<CurrentlyReading />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Reading (1)")).toBeInTheDocument();
+      expect(screen.getByText("Test Book")).toBeInTheDocument();
+      expect(screen.getByText("Test Author")).toBeInTheDocument();
+      expect(screen.getByText("50%")).toBeInTheDocument();
+    });
+  });
+
+  it("renders multiple books correctly", async () => {
+    const mockBooks = [
+      {
+        title: "Book 1",
+        authors: ["Author 1"],
+        image: "/img1.jpg",
+        progress: 10,
+        startedAt: "2023-01-01",
+      },
+      {
+        title: "Book 2",
+        authors: ["Author 2"],
+        image: "/img2.jpg",
+        progress: 90,
+        startedAt: "2023-02-01",
+      },
+    ];
+
+    (global.fetch as jest.Mock).mockResolvedValue({
+      ok: true,
+      json: async () => ({ currentlyReading: mockBooks }),
+    });
+
+    render(<CurrentlyReading />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Reading (2)")).toBeInTheDocument();
+      expect(screen.getByText("Book 1")).toBeInTheDocument();
+      expect(screen.getByText("Book 2")).toBeInTheDocument();
+    });
+  });
+});

app/__tests__/components/ThemeToggle.test.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { ThemeToggle } from "@/app/components/ThemeToggle";
+import { useTheme } from "next-themes";
+
+// Mock next-themes
+jest.mock("next-themes", () => ({
+  useTheme: jest.fn(),
+}));
+
+describe("ThemeToggle Component", () => {
+  const setThemeMock = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (useTheme as jest.Mock).mockReturnValue({
+      theme: "light",
+      setTheme: setThemeMock,
+    });
+  });
+
+  it("renders a placeholder initially (to avoid hydration mismatch)", () => {
+    const { container } = render(<ThemeToggle />);
+    // Initial render should be the loading div
+    expect(container.firstChild).toHaveClass("w-9 h-9");
+  });
+
+  it("toggles to dark mode when clicked", async () => {
+    render(<ThemeToggle />);
+    
+    // Wait for effect to set mounted=true
+    const button = await screen.findByRole("button", { name: /toggle theme/i });
+    
+    fireEvent.click(button);
+    
+    expect(setThemeMock).toHaveBeenCalledWith("dark");
+  });
+
+  it("toggles to light mode when clicked if currently dark", async () => {
+    (useTheme as jest.Mock).mockReturnValue({
+      theme: "dark",
+      setTheme: setThemeMock,
+    });
+
+    render(<ThemeToggle />);
+    
+    const button = await screen.findByRole("button", { name: /toggle theme/i });
+    
+    fireEvent.click(button);
+    
+    expect(setThemeMock).toHaveBeenCalledWith("light");
+  });
+});

app/api/book-reviews/route.ts

@@ -1,5 +1,6 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { getBookReviews } from '@/lib/directus';
+import { checkRateLimit, getClientIp } from '@/lib/auth';
 
 export const runtime = 'nodejs';
 export const dynamic = 'force-dynamic';
@@ -13,6 +14,12 @@ export const dynamic = 'force-dynamic';
  *   - locale: en or de (default: en)
  */
 export async function GET(request: NextRequest) {
+  // Rate Limit: 60 requests per minute
+  const ip = getClientIp(request);
+  if (!checkRateLimit(ip, 60, 60000)) {
+    return NextResponse.json({ error: 'Rate limit exceeded' }, { status: 429 });
+  }
+
   try {
     const { searchParams } = new URL(request.url);
     const locale = searchParams.get('locale') || 'en';

app/api/hobbies/route.ts

@@ -1,5 +1,6 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { getHobbies } from '@/lib/directus';
+import { checkRateLimit, getClientIp } from '@/lib/auth';
 
 export const runtime = 'nodejs';
 export const dynamic = 'force-dynamic';
@@ -13,6 +14,12 @@ export const dynamic = 'force-dynamic';
  *   - locale: en or de (default: en)
  */
 export async function GET(request: NextRequest) {
+  // Rate Limit: 60 requests per minute
+  const ip = getClientIp(request);
+  if (!checkRateLimit(ip, 60, 60000)) {
+    return NextResponse.json({ error: 'Rate limit exceeded' }, { status: 429 });
+  }
+
   try {
     const { searchParams } = new URL(request.url);
     const locale = searchParams.get('locale') || 'en';

app/api/tech-stack/route.ts

@@ -1,5 +1,6 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { getTechStack } from '@/lib/directus';
+import { checkRateLimit, getClientIp } from '@/lib/auth';
 
 export const runtime = 'nodejs';
 export const dynamic = 'force-dynamic';
@@ -13,6 +14,12 @@ export const dynamic = 'force-dynamic';
  *   - locale: en or de (default: en)
  */
 export async function GET(request: NextRequest) {
+  // Rate Limit: 60 requests per minute
+  const ip = getClientIp(request);
+  if (!checkRateLimit(ip, 60, 60000)) {
+    return NextResponse.json({ error: 'Rate limit exceeded' }, { status: 429 });
+  }
+
   try {
     const { searchParams } = new URL(request.url);
     const locale = searchParams.get('locale') || 'en';

app/components/CurrentlyReading.tsx

@@ -63,8 +63,8 @@ const CurrentlyReading = () => {
     <div className="space-y-4">
       {/* Header */}
       <div className="flex items-center gap-2 mb-4">
-        <BookOpen size={18} className="text-stone-600 flex-shrink-0" />
-        <h3 className="text-lg font-bold text-stone-900">
+        <BookOpen size={18} className="text-stone-600 dark:text-stone-300 flex-shrink-0" />
+        <h3 className="text-lg font-bold text-stone-900 dark:text-stone-100">
           {t("title")} {books.length > 1 && `(${books.length})`}
         </h3>
       </div>
@@ -81,11 +81,11 @@ const CurrentlyReading = () => {
             scale: 1.02,
             transition: { duration: 0.4, ease: "easeOut" },
           }}
-          className="relative overflow-hidden bg-gradient-to-br from-liquid-lavender/15 via-liquid-pink/10 to-liquid-rose/15 border-2 border-liquid-lavender/30 rounded-xl p-6 backdrop-blur-sm hover:border-liquid-lavender/50 hover:from-liquid-lavender/20 hover:via-liquid-pink/15 hover:to-liquid-rose/20 transition-all duration-500 ease-out"
+          className="relative overflow-hidden bg-gradient-to-br from-liquid-lavender/15 via-liquid-pink/10 to-liquid-rose/15 dark:from-stone-800 dark:via-stone-800 dark:to-stone-700 border-2 border-liquid-lavender/30 dark:border-stone-700 rounded-xl p-6 backdrop-blur-sm hover:border-liquid-lavender/50 dark:hover:border-stone-600 hover:from-liquid-lavender/20 hover:via-liquid-pink/15 hover:to-liquid-rose/20 transition-all duration-500 ease-out"
         >
           {/* Background Blob Animation */}
           <motion.div
-            className="absolute -top-10 -right-10 w-32 h-32 bg-gradient-to-br from-liquid-lavender/20 to-liquid-pink/20 rounded-full blur-2xl"
+            className="absolute -top-10 -right-10 w-32 h-32 bg-gradient-to-br from-liquid-lavender/20 to-liquid-pink/20 dark:from-stone-700 dark:to-stone-600 rounded-full blur-2xl"
             animate={{
               scale: [1, 1.2, 1],
               opacity: [0.3, 0.5, 0.3],
@@ -107,7 +107,7 @@ const CurrentlyReading = () => {
                 transition={{ duration: 0.5, delay: 0.2 + index * 0.1 }}
                 className="flex-shrink-0"
               >
-                <div className="relative w-24 h-36 sm:w-28 sm:h-40 rounded-lg overflow-hidden shadow-lg border-2 border-white/50">
+                <div className="relative w-24 h-36 sm:w-28 sm:h-40 rounded-lg overflow-hidden shadow-lg border-2 border-white/50 dark:border-stone-600">
                   <Image
                     src={book.image}
                     alt={book.title}
@@ -124,22 +124,22 @@ const CurrentlyReading = () => {
             {/* Book Info */}
             <div className="flex-1 min-w-0">
               {/* Title */}
-              <h4 className="text-lg font-bold text-stone-900 mb-1 line-clamp-2">
+              <h4 className="text-lg font-bold text-stone-900 dark:text-stone-100 mb-1 line-clamp-2">
                 {book.title}
               </h4>
 
               {/* Authors */}
-              <p className="text-sm text-stone-600 mb-4 line-clamp-1">
+              <p className="text-sm text-stone-600 dark:text-stone-400 mb-4 line-clamp-1">
                 {book.authors.join(", ")}
               </p>
 
               {/* Progress Bar */}
               <div className="space-y-2">
-                <div className="flex items-center justify-between text-xs text-stone-600">
+                <div className="flex items-center justify-between text-xs text-stone-600 dark:text-stone-400">
                   <span>{t("progress")}</span>
                   <span className="font-semibold">{book.progress}%</span>
                 </div>
-                <div className="relative h-2 bg-white/50 rounded-full overflow-hidden border border-white/70">
+                <div className="relative h-2 bg-white/50 dark:bg-stone-700 rounded-full overflow-hidden border border-white/70 dark:border-stone-600">
                   <motion.div
                     initial={{ width: 0 }}
                     animate={{ width: `${book.progress}%` }}

app/components/ReadBooks.tsx

@@ -12,8 +12,8 @@ interface BookReview {
   book_title: string;
   book_author: string;
   book_image?: string;
-  rating: number;
-  review?: string;
+  rating?: number | null;
+  review?: string | null;
   finished_at?: string;
 }
 
@@ -27,7 +27,7 @@ const StarRating = ({ rating }: { rating: number }) => {
           className={
             star <= rating
               ? "text-amber-500 fill-amber-500"
-              : "text-stone-300"
+              : "text-stone-300 dark:text-stone-600"
           }
         />
       ))}
@@ -86,8 +86,8 @@ const ReadBooks = () => {
     <div className="space-y-4">
       {/* Header */}
       <div className="flex items-center gap-2 mb-4">
-        <BookCheck size={18} className="text-stone-600 flex-shrink-0" />
-        <h3 className="text-lg font-bold text-stone-900">
+        <BookCheck size={18} className="text-stone-600 dark:text-stone-300 flex-shrink-0" />
+        <h3 className="text-lg font-bold text-stone-900 dark:text-stone-100">
           {t("title")} ({reviews.length})
         </h3>
       </div>
@@ -108,11 +108,11 @@ const ReadBooks = () => {
             scale: 1.02,
             transition: { duration: 0.4, ease: "easeOut" },
           }}
-          className="relative overflow-hidden bg-gradient-to-br from-liquid-mint/15 via-liquid-sky/10 to-liquid-teal/15 border-2 border-liquid-mint/30 rounded-xl p-5 backdrop-blur-sm hover:border-liquid-mint/50 hover:from-liquid-mint/20 hover:via-liquid-sky/15 hover:to-liquid-teal/20 transition-all duration-500 ease-out"
+          className="relative overflow-hidden bg-gradient-to-br from-liquid-mint/15 via-liquid-sky/10 to-liquid-teal/15 dark:from-stone-800 dark:via-stone-800 dark:to-stone-700 border-2 border-liquid-mint/30 dark:border-stone-700 rounded-xl p-5 backdrop-blur-sm hover:border-liquid-mint/50 dark:hover:border-stone-600 hover:from-liquid-mint/20 hover:via-liquid-sky/15 hover:to-liquid-teal/20 transition-all duration-500 ease-out"
         >
           {/* Background Blob */}
           <motion.div
-            className="absolute -bottom-8 -left-8 w-28 h-28 bg-gradient-to-br from-liquid-mint/20 to-liquid-sky/20 rounded-full blur-2xl"
+            className="absolute -bottom-8 -left-8 w-28 h-28 bg-gradient-to-br from-liquid-mint/20 to-liquid-sky/20 dark:from-stone-700 dark:to-stone-600 rounded-full blur-2xl"
             animate={{
               scale: [1, 1.15, 1],
               opacity: [0.3, 0.45, 0.3],
@@ -134,7 +134,7 @@ const ReadBooks = () => {
                 transition={{ duration: 0.5, delay: 0.2 + index * 0.1 }}
                 className="flex-shrink-0"
               >
-                <div className="relative w-20 h-[7.5rem] sm:w-24 sm:h-32 rounded-lg overflow-hidden shadow-lg border-2 border-white/50">
+                <div className="relative w-20 h-[7.5rem] sm:w-24 sm:h-32 rounded-lg overflow-hidden shadow-lg border-2 border-white/50 dark:border-stone-600">
                   <Image
                     src={review.book_image}
                     alt={review.book_title}
@@ -149,31 +149,33 @@ const ReadBooks = () => {
 
             {/* Book Info */}
             <div className="flex-1 min-w-0">
-              <h4 className="text-base font-bold text-stone-900 mb-0.5 line-clamp-2">
+              <h4 className="text-base font-bold text-stone-900 dark:text-stone-100 mb-0.5 line-clamp-2">
                 {review.book_title}
               </h4>
-              <p className="text-sm text-stone-600 mb-2 line-clamp-1">
+              <p className="text-sm text-stone-600 dark:text-stone-400 mb-2 line-clamp-1">
                 {review.book_author}
               </p>
 
-              {/* Rating */}
-              <div className="flex items-center gap-2 mb-2">
-                <StarRating rating={review.rating} />
-                <span className="text-xs text-stone-500 font-medium">
-                  {review.rating}/5
-                </span>
-              </div>
+              {/* Rating (Optional) */}
+              {review.rating && review.rating > 0 && (
+                <div className="flex items-center gap-2 mb-2">
+                  <StarRating rating={review.rating} />
+                  <span className="text-xs text-stone-500 dark:text-stone-400 font-medium">
+                    {review.rating}/5
+                  </span>
+                </div>
+              )}
 
-              {/* Review Text */}
+              {/* Review Text (Optional) */}
               {review.review && (
-                <p className="text-sm text-stone-700 leading-relaxed line-clamp-3 italic">
+                <p className="text-sm text-stone-700 dark:text-stone-300 leading-relaxed line-clamp-3 italic">
                   &ldquo;{review.review}&rdquo;
                 </p>
               )}
 
               {/* Finished Date */}
               {review.finished_at && (
-                <p className="text-xs text-stone-400 mt-2">
+                <p className="text-xs text-stone-400 dark:text-stone-500 mt-2">
                   {t("finishedAt")}{" "}
                   {new Date(review.finished_at).toLocaleDateString(
                     locale === "de" ? "de-DE" : "en-US",
@@ -193,7 +195,7 @@ const ReadBooks = () => {
           animate={{ opacity: 1 }}
           transition={{ delay: 0.3 }}
           onClick={() => setExpanded(!expanded)}
-          className="w-full flex items-center justify-center gap-1.5 py-2.5 text-sm font-medium text-stone-600 hover:text-stone-800 rounded-lg border-2 border-dashed border-stone-200 hover:border-stone-300 transition-colors duration-300"
+          className="w-full flex items-center justify-center gap-1.5 py-2.5 text-sm font-medium text-stone-600 dark:text-stone-400 hover:text-stone-800 dark:hover:text-stone-200 rounded-lg border-2 border-dashed border-stone-200 dark:border-stone-700 hover:border-stone-300 dark:hover:border-stone-600 transition-colors duration-300"
         >
           {expanded ? (
             <>