Implementing Search with Meilisearch and Typesense

Modern search engines provide instant, relevant results with typo tolerance, faceted filtering, and real-time indexing.

Meilisearch Setup

import { MeiliSearch } from 'meilisearch'

const client = new MeiliSearch({
  host: process.env.MEILISEARCH_URL!,
  apiKey: process.env.MEILISEARCH_MASTER_KEY!,
})

await client.index('products').updateSettings({
  searchableAttributes: ['name', 'description', 'category'],
  filterableAttributes: ['category', 'price', 'rating'],
  sortableAttributes: ['price', 'rating', 'created_at'],
})

Typesense Alternative

import Typesense from 'typesense'

const typesense = new Typesense.Client({
  nodes: [{ host: 'localhost', port: 8108, protocol: 'http' }],
  apiKey: process.env.TYPESENSE_API_KEY!,
})

Search UI Component

export function SearchBar() {
  const [query, setQuery] = useState('')
  const [results, setResults] = useState([])

  useEffect(() => {
    if (query.length > 1) {
      const timer = setTimeout(() => search(query).then(setResults), 300)
      return () => clearTimeout(timer)
    }
  }, [query])

  return (
    <div>
      <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Search..." />
      {results.map(r => <SearchResult key={r.id} result={r} />)}
    </div>
  )
}

The Bottom Line

The Developer Tools Portal from BreafIO includes search integration. The SaaS Starter Kit uses search for content discovery. The Admin Dashboard Pro adds search to data tables. The Analytics Dashboard provides searchable metrics, and the API Boilerplate includes search API endpoints.