app/api/route.tsx

@@ -14,24 +14,14 @@ export async function GET(request: NextRequest) {
   console.log(search)
   const cleanedSearch = search.replace(/[^a-zA-Z\s]/g, "").toLowerCase()
   const searchWords = cleanedSearch.split(/\s+/)
-  const filteredData = cardData.filter((card) => {
-    let captionArray = card.caption?.toLowerCase().split(/[^a-z]/)
-    if (!captionArray) {
-      return false
-    }
-    const words = searchWords.filter((word) => captionArray.includes(word))
-    if (words.length) {
-      card.rank = 999999
-      for (const word of words) {
-        const index = captionArray.indexOf(word)
-        if (index && index < card.rank) {
-          card.rank = index
-        }
-      }
-      return true
-    }
-    return false
-  })
-  filteredData.sort((a, b) => a.rank! - b.rank!)
+  const filteredData = cardData.filter((card) =>
+    searchWords.some((word) =>
+      card.caption
+        ?.toLowerCase()
+        .split(/[^a-z]/)
+        .includes(word)
+    )
+  )
+
   return Response.json(filteredData)
 }

app/page.tsx

@@ -60,7 +60,7 @@ export default function Home() {
         )}
         <form
           onSubmit={handleSubmit}
-          style={{ width: "100%", maxWidth: "700px", paddingBottom: "16px" }}
+          style={{ width: "100%", maxWidth: "700px" }}
         >
           <Input
             placeholder="Type something..."
@@ -89,7 +89,6 @@ export default function Home() {
             loadMore={loadMore}
             hasMore={cardsDisplayed.length < cards.length}
             loader={<CircularProgress />}
-            style={{ width: "100%" }}
           >
             <Grid container spacing={2} sx={{ flexGrow: 1 }} key="cardGrid">
               {cardsDisplayed.map((card) => (

types/types.tsx

@@ -5,6 +5,5 @@ export type CardType = {
   oracleId: string
   caption: string
   url?: string
-  rank?: number
   mediumImageUrl: string
 }