Prisma Postgres example updated

Author: aidankmcalister

examples/prisma-postgres/README.md

@@ -232,7 +232,7 @@ Once the server is running, visit `http://localhost:3000` to start using the app
 
 The app includes the following routes:
 
-- `/`: Display the thee most recent posts
+- `/`: Display the three most recent posts
 - `/posts`: Paginated list view of all posts
 - `/posts/new`: Create a new post
 - `/users/new`: Create a new user
@@ -242,7 +242,7 @@ The app includes the following routes:
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fprisma-orm&env=DATABASE_URL&envDescription=Add%20your%20PRISMA%20POSTGRES%20database%20url&project-name=prisma-orm-app&repository-name=prisma-orm)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fprisma-postgres&env=DATABASE_URL&envDescription=Add%20your%20PRISMA%20POSTGRES%20database%20url&project-name=prisma-postgres-app&repository-name=prisma-postgres)
 
 ## Additional information
 

examples/prisma-postgres/app/posts/page.tsx

@@ -24,20 +24,29 @@ function PostsList() {
   const [posts, setPosts] = useState<Post[]>([]);
   const [totalPages, setTotalPages] = useState(1);
   const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
     async function fetchPosts() {
       setIsLoading(true);
+      setError(null);
       try {
         const res = await fetch(`/api/posts?page=${page}`);
         if (!res.ok) {
-          throw new Error("Failed to fetch posts");
+          throw new Error(
+            `Failed to fetch posts: ${res.status} ${res.statusText}`,
+          );
         }
         const data = await res.json();
         setPosts(data.posts);
         setTotalPages(data.totalPages);
       } catch (error) {
         console.error("Error fetching posts:", error);
+        setError(
+          error instanceof Error
+            ? error.message
+            : "An unexpected error occurred",
+        );
       } finally {
         setIsLoading(false);
       }
@@ -53,6 +62,19 @@ function PostsList() {
           <div className="w-6 h-6 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
           <p className="text-gray-600">Loading...</p>
         </div>
+      ) : error ? (
+        <div className="flex flex-col items-center justify-center min-h-[200px] space-y-4">
+          <div className="text-red-500 text-center">
+            <p className="text-lg font-semibold">Failed to load posts</p>
+            <p className="text-sm text-gray-600 mt-1">{error}</p>
+          </div>
+          <button
+            onClick={() => window.location.reload()}
+            className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
+          >
+            Try Again
+          </button>
+        </div>
       ) : (
         <>
           {posts.length === 0 ? (

examples/prisma-postgres/app/setup/page.tsx

@@ -75,7 +75,7 @@ export default function SetupPage() {
                 Prisma Postgres extension
               </a>{" "}
               in your Netlify account. Next, you need to copy Prisma&apos;s
-              integration token into the extension in your Neltify Dashboard:
+              integration token into the extension in your Netlify Dashboard:
             </p>
             <ol className="list-decimal pl-6 mt-2 space-y-1 text-gray-700">
               <li>