Encyclopedia Metallum Public API autocomplete in React, Node js and Mongo DB

Encyclopaedia Metallum site

As I have promised in a previous article(https://teopanta1986.medium.com/encyclopedia-metallum-autocomplete-1727b0d2f3da) today I will give you some insights on how the metallum API was created and how the autocomplete functionality was implemented both in backend and frontend.

At the moment metal searcher’s frontend and backend are deployed in a test environment in heroku, but soon will be deployed to a production environment.

You can check the app here:

https://metal-search.herokuapp.com/

and you can test the public api here:

https://super-archives.herokuapp.com/api/autosearch/dar

How the public api was created

First of all my metal archive collection is in the cloud on a Mongo database.

In that database there are 40000 bands, so It is important to create indexes for optimization purposes.

In any database, indexes support the efficient execution of queries.

Without them, the database must scan every document in a collection or table to select those that match the query statement.

We can see an example of a document here:

Mongo Document example

I ‘ve created an index with the following code:

Create Index

In the backend we only need an aggregation of the following form:

Mongo Aggregation

As you can see I have commented out fuzzy option, because I didn’t need similar results but relevant results. If you don’t care if they are relevant then you can use this option.

So let’s see an example in postman:

Postman results

As you can see I have typed dar and the results are completely relevant.

This wouldn’t happen with the fuzzy option enabled and the results could be something like “Halo Darkness” .

But as I said previously we want complete relevance.

If someone searches for “crypt”, it’s more likely that they’re looking for one of the bands named simply “Crypt” than something like “Encrypted” or “Ritual Crypt”.

Frontend

The frontend is like this:

Metal Searcher

The main component of the app is the search bar that performs real time autocompletion with scrollable results.

Also as you can see in the network tab we perform one request and not three, because sending a request for each character typed can cause performance issues.

For the autocompletion I have made a react component.

You can find It here:

https://github.com/Ierofantis/Metal-Searcher/blob/master/src/SearchInput.js

You really DO NOT need any library to create an autocomplete input search bar, you just need two functions:

Components

The debounce function is responsible for the delay effect and the update function updates state when input changes.

So the only thing we need is to use all this functionality in the html input search component:

Conclusion

Please feel free to give me your thoughts about my app and I would love to hear any comments.

Cheers!