How to Perform Full-Text Search in Firebase

1// What Firestore CAN do: prefix/starts-with search
2import { collection, query, where, orderBy, getDocs } from 'firebase/firestore'
3
4async function prefixSearch(field: string, prefix: string) {
5  // Matches documents where field starts with prefix
6  const q = query(
7    collection(db, 'products'),
8    where(field, '>=', prefix),
9    where(field, '<=', prefix + '\uf8ff'),
10    orderBy(field),
11  )
12  const snapshot = await getDocs(q)
13  return snapshot.docs.map((d) => ({ id: d.id, ...d.data() }))
14}
15
16// prefixSearch('name', 'Mac') → 'MacBook Pro', 'Mac Mini'
17// But searching for 'Pro' will NOT find 'MacBook Pro'

1// Install: npm install algoliasearch
2import algoliasearch from 'algoliasearch'
3
4// Initialize Algolia client (client-side uses Search-Only API Key)
5const algoliaClient = algoliasearch(
6  process.env.NEXT_PUBLIC_ALGOLIA_APP_ID!,
7  process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_KEY!  // Search-only key, safe for client
8)
9
10const index = algoliaClient.initIndex('products')
11
12// Search products
13async function searchProducts(queryText: string) {
14  const { hits } = await index.search(queryText, {
15    hitsPerPage: 20,
16    attributesToRetrieve: ['name', 'description', 'price', 'objectID'],
17  })
18  return hits
19}
20
21// searchProducts('wireless headphones') → finds 'Sony Wireless Headphones',
22// 'Bose QuietComfort Headphones', etc.

1// functions/src/index.ts
2import { onDocumentCreated, onDocumentUpdated, onDocumentDeleted } from 'firebase-functions/v2/firestore'
3import { defineSecret } from 'firebase-functions/params'
4import algoliasearch from 'algoliasearch'
5
6const algoliaAppId = defineSecret('ALGOLIA_APP_ID')
7const algoliaAdminKey = defineSecret('ALGOLIA_ADMIN_KEY')
8
9function getIndex() {
10  const client = algoliasearch(algoliaAppId.value(), algoliaAdminKey.value())
11  return client.initIndex('products')
12}
13
14export const onProductCreated = onDocumentCreated(
15  { document: 'products/{productId}', secrets: [algoliaAppId, algoliaAdminKey] },
16  async (event) => {
17    const data = event.data?.data()
18    if (!data) return
19    const index = getIndex()
20    await index.saveObject({ objectID: event.params.productId, ...data })
21  }
22)
23
24export const onProductUpdated = onDocumentUpdated(
25  { document: 'products/{productId}', secrets: [algoliaAppId, algoliaAdminKey] },
26  async (event) => {
27    const data = event.data?.after.data()
28    if (!data) return
29    const index = getIndex()
30    await index.saveObject({ objectID: event.params.productId, ...data })
31  }
32)
33
34export const onProductDeleted = onDocumentDeleted(
35  { document: 'products/{productId}', secrets: [algoliaAppId, algoliaAdminKey] },
36  async (event) => {
37    const index = getIndex()
38    await index.deleteObject(event.params.productId)
39  }
40)

1// Install: npm install typesense
2import Typesense from 'typesense'
3
4const typesenseClient = new Typesense.Client({
5  nodes: [{
6    host: 'your-typesense-host.a1.typesense.net',
7    port: 443,
8    protocol: 'https',
9  }],
10  apiKey: process.env.NEXT_PUBLIC_TYPESENSE_SEARCH_KEY!,
11})
12
13async function searchProducts(queryText: string) {
14  const results = await typesenseClient
15    .collections('products')
16    .documents()
17    .search({
18      q: queryText,
19      query_by: 'name,description',
20      per_page: 20,
21    })
22  return results.hits?.map((hit: any) => hit.document) ?? []
23}
24
25// Firebase Extensions: install 'Search with Typesense'
26// from the Firebase Console to auto-sync Firestore → Typesense

1import { useState, useEffect } from 'react'
2
3function SearchBar() {
4  const [query, setQuery] = useState('')
5  const [results, setResults] = useState<any[]>([])
6  const [loading, setLoading] = useState(false)
7
8  useEffect(() => {
9    if (!query.trim()) { setResults([]); return }
10
11    const timer = setTimeout(async () => {
12      setLoading(true)
13      const hits = await searchProducts(query)
14      setResults(hits)
15      setLoading(false)
16    }, 300) // 300ms debounce
17
18    return () => clearTimeout(timer)
19  }, [query])
20
21  return (
22    <div>
23      <input
24        type="text"
25        value={query}
26        onChange={(e) => setQuery(e.target.value)}
27        placeholder="Search products..."
28      />
29      {loading && <p>Searching...</p>}
30      {results.map((hit) => (
31        <div key={hit.objectID}>
32          <h3>{hit.name}</h3>
33          <p>{hit.description}</p>
34        </div>
35      ))}
36    </div>
37  )
38}