update

.env

@@ -4,3 +4,4 @@ CLERK_SECRET_KEY=sk_test_1cmLGX7ElOAjcVMK1YpsgmmnoYNsgrBInOnfG3oEFm
 DATABASE_URL=postgresql://neondb_owner:[email protected]/neondb?
 sslmode=require
 
+UPLOADTHING_TOKEN='eyJhcGlLZXkiOiJza19saXZlXzQ5OGNkOWQ4YjlkNTgyZWFjMzc2MjE0Y2E5OGJjMjNmZWI3Y2MzZDk1ODYxNTNmYTRhMzk4ZDFhZWVlMDkyOTQiLCJhcHBJZCI6Im05bGM5MTFiZG4iLCJyZWdpb25zIjpbInNlYTEiXX0='

next.config.js

@@ -0,0 +1,14 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "**",
+      },
+    ],
+  },
+  serverExternalPackages: ["@clerk/nextjs"],
+};
+
+module.exports = nextConfig;

package.json

@@ -9,7 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@clerk/nextjs": "^6.9.6",
+    "@clerk/nextjs": "^5.0.0-beta.46",
     "@prisma/client": "^6.1.0",
     "@radix-ui/react-alert-dialog": "^1.1.4",
     "@radix-ui/react-avatar": "^1.1.2",

src/app/layout.tsx

@@ -5,6 +5,7 @@ import { ClerkProvider } from "@clerk/nextjs";
 import { ThemeProvider } from "@/components/ThemeProvider";
 import Navbar from "@/components/Navbar";
 import Sidebar from "@/components/Sidebar";
+import { Toaster } from "react-hot-toast";
 
 const geistSans = localFont({
   src: "./fonts/GeistVF.woff",
@@ -54,6 +55,7 @@ export default function RootLayout({
                 </div>
               </main>
             </div>
+            <Toaster />
           </ThemeProvider>
         </body>
       </html>

src/app/profile/[username]/not-found.tsx

@@ -18,7 +18,7 @@ export default function NotFound() {
                 User not found
               </h1>
               <p className="text-muted-foreground">
-                The user you're looking for doesn't exist.
+                The user you are looking for does not exist
               </p>
             </div>
 

src/app/profile/[username]/page.tsx

@@ -15,8 +15,8 @@ export async function generateMetadata({
   const user = await getProfileByUsername(params.username);
   if (!user)
     return {
-      title: "User Not Found",
-      description: "This user profile could not be found.",
+      title: "User not found",
+      description: "This user does not exist",
     };
 
   return {

src/components/PostCard.tsx

@@ -8,7 +8,7 @@ import {
   toggleLike,
 } from "@/actions/post.action";
 import { SignInButton, useUser } from "@clerk/nextjs";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import toast from "react-hot-toast";
 import { Card, CardContent } from "./ui/card";
 import Link from "next/link";
@@ -75,7 +75,7 @@ function PostCard({ post, dbUserId }: { post: Post; dbUserId: string | null }) {
     }
   };
 
-  const handleDeletePost = async () => {
+  const handleDeletePost = useCallback(async () => {
     if (isDeleting) return;
     try {
       setIsDeleting(true);
@@ -89,13 +89,13 @@ function PostCard({ post, dbUserId }: { post: Post; dbUserId: string | null }) {
     } finally {
       setIsDeleting(false);
     }
-  };
+  }, [isDeleting, post.id]);
 
   useEffect(() => {
     const handler = () => handleDeletePost();
     window.addEventListener("deletePost", handler);
     return () => window.removeEventListener("deletePost", handler);
-  }, []);
+  }, [handleDeletePost]);
 
   return (
     <Card className="overflow-hidden">

tailwind.config.ts

@@ -1,63 +1,65 @@
 import type { Config } from "tailwindcss";
+import { withUt } from "uploadthing/tw";
+import animate from "tailwindcss-animate";
 
-const config: Config = {
-    darkMode: ["class"],
-    content: [
+const config: Config = withUt({
+  darkMode: ["class"],
+  content: [
     "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
-  	extend: {
-  		colors: {
-  			background: 'hsl(var(--background))',
-  			foreground: 'hsl(var(--foreground))',
-  			card: {
-  				DEFAULT: 'hsl(var(--card))',
-  				foreground: 'hsl(var(--card-foreground))'
-  			},
-  			popover: {
-  				DEFAULT: 'hsl(var(--popover))',
-  				foreground: 'hsl(var(--popover-foreground))'
-  			},
-  			primary: {
-  				DEFAULT: 'hsl(var(--primary))',
-  				foreground: 'hsl(var(--primary-foreground))'
-  			},
-  			secondary: {
-  				DEFAULT: 'hsl(var(--secondary))',
-  				foreground: 'hsl(var(--secondary-foreground))'
-  			},
-  			muted: {
-  				DEFAULT: 'hsl(var(--muted))',
-  				foreground: 'hsl(var(--muted-foreground))'
-  			},
-  			accent: {
-  				DEFAULT: 'hsl(var(--accent))',
-  				foreground: 'hsl(var(--accent-foreground))'
-  			},
-  			destructive: {
-  				DEFAULT: 'hsl(var(--destructive))',
-  				foreground: 'hsl(var(--destructive-foreground))'
-  			},
-  			border: 'hsl(var(--border))',
-  			input: 'hsl(var(--input))',
-  			ring: 'hsl(var(--ring))',
-  			chart: {
-  				'1': 'hsl(var(--chart-1))',
-  				'2': 'hsl(var(--chart-2))',
-  				'3': 'hsl(var(--chart-3))',
-  				'4': 'hsl(var(--chart-4))',
-  				'5': 'hsl(var(--chart-5))'
-  			}
-  		},
-  		borderRadius: {
-  			lg: 'var(--radius)',
-  			md: 'calc(var(--radius) - 2px)',
-  			sm: 'calc(var(--radius) - 4px)'
-  		}
-  	}
+    extend: {
+      colors: {
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        chart: {
+          "1": "hsl(var(--chart-1))",
+          "2": "hsl(var(--chart-2))",
+          "3": "hsl(var(--chart-3))",
+          "4": "hsl(var(--chart-4))",
+          "5": "hsl(var(--chart-5))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+    },
   },
-  plugins: [require("tailwindcss-animate")],
-};
+  plugins: [animate],
+});
 export default config;