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)
 }

types/types.tsx

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