improved search by ranking results based on how early search terms appear in captions

app/api/route.tsx

@@ -14,14 +14,24 @@ 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) =>
-    searchWords.some((word) =>
-      card.caption
-        ?.toLowerCase()
-        .split(/[^a-z]/)
-        .includes(word)
-    )
-  )
-
+  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!)
   return Response.json(filteredData)
 }

app/page.tsx

@@ -60,7 +60,7 @@ export default function Home() {
         )}
         <form
           onSubmit={handleSubmit}
-          style={{ width: "100%", maxWidth: "700px" }}
+          style={{ width: "100%", maxWidth: "700px", paddingBottom: "16px" }}
         >
           <Input
             placeholder="Type something..."
@@ -89,6 +89,7 @@ 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,5 +5,6 @@ export type CardType = {
   oracleId: string
   caption: string
   url?: string
+  rank?: number
   mediumImageUrl: string
 }