For this to work, I assume you have already set up your MERN or whichever full-stack app is set up already with MongoDB.

The starting point of this tutorial is when you can naturally perform CRUD functions on your full-stack app with MongoDB, more so specifically with nodeJS and expressJS.

If you don’t have that setup, I suggest to view Brad Traversy MERN stack course on Udemy.

This is going to be the search screen.

Let’s start by installing Algolia with:

npm install algoliasearch
npm install react-instantsearch-dom

Then importing everything we will need to use Algolia:

import algoliasearch from “algoliasearch”;
import { InstantSearch, SearchBox, Hits, Index } from “react-instantsearch-dom”;
import axios from “axios”;

Next, we will fetch the data from MongoDB endpoints right? The objects fetched will have multiple arrays. We will fetch data with useEffect

After the data is fetched through useEffect we do a forEach to loop through the data. Then, we delete the item id because Algolia will create a new id for us in the Agolia server.

useEffect(() => {
  const config = {
    headers: {
      Authorization: `Bearer ${userInfo.token}`,
    },
  }
  const fetchPasswords = async () => {
    const { data } = await axios.get('/api/blahblah', config)
    data.forEach((arrayItemInObject) => {
      arrayItemInObject.objectID = arrayItemInObject._id
      delete passworarrayItemInObject._id
    })
    setArrayItemInObject(data)
  }
  fetchPasswords()
}, [userInfo])

userInfo is for authorization. We define userInfo with a useSelector.

const userLogin = useSelector((state) => state.userLogin)
const { userInfo } = userLogin

Now let’s set up Algolia further and define some things.

const client = algoliasearch('YourApplicationID', 'YourSearchOnlyAPIKey')
const index = client.initIndex('indexName')

The “indexName” is created on the Algolia dashboard. I hope you made an account. You can name the index whatever you want.

Once we receive the data, meaning all of the arrays inside the objects through MongoDB API. We must save it on Aloglia’s server.

index.saveObjects(arrayItem(s))

Notice how arrayItems is plural.

Now, the link between Algolia and MongoDB is complete. Whenever you create, delete, or update an item in MongoDB, Algolia will update in real-time. But give it a second or two.

---

Now comes the fun part.

To render and harness Algolia’s might, we need some boilerplate.

<InstantSearch indexName="indexName" searchClient={client}>
  <div className="app">
    <div className="flex">
      <SearchBox
        autoFocus
        translations={{
          placeholder: 'Search Everything',
        }}
      />
    </div>

    <div>
      <Index indexName="indexName">
        <Hits hitComponent={allItems} />
      </Index>
    </div>
  </div>
</InstantSearch>

In the Hits tag, we have to create a function to render all of the items from Algolia.

Now, this is just a rough example of what could be. But, basically at this point you're just reading data of Algolia.

function allItems({ hit }) {
  return (
    <div>
      <div>
        {hit.title}
        <p>{hit.caption}</p>
      </div>
      <div>
        <Link to={`/item/${hit.itemID}/edit`} type="button">
          <PencilIcon />
        </Link>
        <Link to={`/item/${hit.itemID}/delete`} type="button">
          <TrashIcon />
        </Link>
      </div>
    </div>
  )
}

That should do it!!