React Full Text Search using Algolia and Firestore

hey everyone I'm niage and welcome to another exciting tutorial where we are diving into the world of advanced search functionalities using algolia and react supported with a Firebase backend so in this video we will learn how to integrate elia's powerful full text search capabilities into a react application supported by a Firebase backend database we will build a responsive search interface and ing user experience with real-time search results so first let's discuss in short the basics of algolia and then we will start with setting up our account if you don't already have one so algolia is a powerful flexible search and Discovery platform known for its speed and relevance some of its key features are full text search typo tolerance custom ranking Geo search instant search f assed search API first approach scalability analytics custom UI components and so on and so forth so algolia provides you a whole range of products to support you in your full text search capabilities now let's see how you can set up your first algolia account if you don't already have one so to set up your algolia account just click on login on top from over here now you can either use your Google account to log in or you can create a new one by entering your email and password I will just log in using my Google account so at a minimum what you need to do is first you need to set the application name then you need to set the search index name then you will need to create an API key for your instant search when you will create an account for the first time then it will automatically prompt you to enter your application name and when you you will do that then you will be provided with an algolia app ID which is this one pkk 7x for this application when you will click on this application then it will open up to either add a new index or to see the existing ones you will have to click on the search from the left side let me just zoom in when you will do that then under index you will see your current indexes and the records which have been indexed so now to create a new index just click on new and then click on index enter the index name and you are set I already have an index with the name search articles which I will be using for this tutorial next is the API keys to view or generate new API Keys first go to the home and then click on API Keys over here for this tutorial we are going to need the search only API key and also the admin API key the admin API key will be used by our Firebase backend functions to either index new content or to delete the already indexed content the search only API key will be used by our react front end now never expose your admin API key because it can be used to access all of the functionalities search only API key can be exposed and you will have to use it in your front end and that is pretty much everything you need to do to set up your lolia account there are some other features as well which you can explore but as far as the scope of this video is concerned these are the only things or items that you will need to create a working project now let's also talk about what you need to do on the Firebase site to get things rolling the first thing you need to do to your Firebase project is to create a new firestore database for this project I will be using the collection articles now I'm not doing all the Firebase and react Integrations from scratch I will be taking the base project from another tutorial video whose link I will share in the description of this video now let's get started with our code walk through so this is Visual Studio code and this is the base project that we will be using to integrate elia's instant search with our react front end the first thing that I will do is to install the algolia package because we will be using the algolia react components so npm and then install and then elula search press enter so you must be thinking how can we use the firebases fire store database with algolia full text search so here is what we will be doing whenever a new document will be added to our fir store then we will immediately index that documents properties with lulia similarly when the document is updated then we will index the document again if the document is removed then we will remove the indexing from lolia and that is pretty much what we will be doing from the Firebase function backend now I will be emulating the Firebase functions locally and to be able to use the fire store trigger events with Firebase functions I will have to emulate the fire store as well now to do that the first thing I will do is to Simply run fire base in it if you want to learn more about how to work with a Firebase project in react frontend you can see my previous videos on how to set up the FAS authentication and FAS functions with a react front end now it says are you ready to proceed press Y and then we need to set up fir store so I will select it and press enter now I am going to select all the default values after Firebase is initialized let's go to the SRC folder and then Firebase folder open up FB base.js and from over here we need to connect the Firebase emulator as well like we are doing for Firebase functions to do that first we have to import its dependencies which are get fir store and connect fir store emulator let's fetch a reference to the fir store database now we simply need to call connect fir store emulator by providing the database the host name and the port number as the argument now we can test if with our emulator the fire store emulator is also running or not so npm Run f base emulate this is going to emulate both functions and F store so now we can see that both the Firebase functions and Fir store are currently emulating and I am just going to open up this URL for fir store because we will be adding records locally to be able to test the Firebase functions after this step it is time to create Firebase functions to be able to listen to the changes in the F store database and then index the new documents with algolia now to do that I will go to the functions folder and then the callable functions folder let's create a new folder and I'm going to call it as article indexing in this folder I will create three files create delete and update so new file create JS and then now the createjs is to listen to the document create event in the article collection of our fir store database whenever a new article ID will be added then our function code should kick in so let's do that the first thing that we will do for this function is to import all the dependencies so functions admin and algolia search we are going to use the admin package to initialize a new application if there is none next we will need three values the first one is the algolia app ID second one is the admin key and third one is the index name so app ID and index name are there to identify in which application and index we need to make the updates an admin key is to allow us to be able to make those changes so this is the app ID this is the admin key and this is the index name you can fetch all three of these values from your algolia dashboard so this is your app ID this is your index name and to see the keys you can simply go to home then API keys and here is your admin API key you can simply copy it from over here there's also search only API key which we will use in our react front end all right now we need to create the lolia search client and for that we simply need to call algolia search by providing the app ID and admin key as the arguments and we also need to initialize the lulia index by simply calling in the alula client. init index and providing the index name as an argument so I'm just going to add the function which will get automatically invoked whenever a new article is added so this is the name of the function index article and what will happen is whenever a new document is created under this collection with a new ID then because we are listening to the on create event we will get the snapshot and the context from snapshot we can extract the newly created articles properties so we will only be using the title and the body now we need to create a new object that we need to provide to the index's save object function so this object needs to have an object ID and the properties that we need to index so for object ID we can use the article ID which we can later use to identify our article when we need to remove from indexing and then we simply need to call index. saave object if there is any error then we can throw the error otherwise we can choose to do nothing because when it will be successful then the article is going to be indexed now the logic with update is similar we just need to change the event name to which we need to subscribe the logic with delete is somewhat different so let me first show you what the update article index 5as function looks like so let's open update. JS everything is similar apart from the fact that we are simply using on update event rest of the content is similar so in a real world application you can use environment variables to save these values or to store these values and you can you know refactor all the common stuff in some kind of services third one is the delete function to listen to the um on delete event and for that we just need to to call the algolia indexes delete object function by providing simply our article ID or the object ID which we previously passed when creating the index now when we have created these three functions then we need to expose them from our FAS functions index.js file as well so let's do that so first we are importing the functions and then we are exporting them by attaching them to the exports object now when we were making these Chang changes then the Firebase emulation code should update itself now it says that these three functions have been initialized index article um remove article from index and update article index now let's try to add some articles to our locally emulated fir store database and see if our function code is kicking in to index the newly added articles so these are the three articles that that I will be adding one by one so when I have added the article then the function should kick in so it says beginning execution of index article and it has finished so our article should be indexed correctly now you can also check out your indexed information or indexed data in the algolia dashboard as well so you just need to open up the search and then go to index select the index which you want to check out now here is the article which has been indexed let me add a couple of more articles to test our code I have added two more articles which have now been indexed over here now when our indexing code is working fine we can now move on to our react front end to display a search interface where user will be able to search these articles based on the full text search capabilities of algolia to do that I will simply open up the um our react SRC folder now go to components and then go to the home folder and I will be making changes to this um home component so first let's start this application as well so I'm just going to write npm and then start to start our react frontend application locally now algolia provides us a bunch of react components which we can directly add and configure to use on our react front end the ones that I will be using are going to be instant search and search box and hits and highlight so first let's import their dependencies now there is one more package that we need to import to be able to use the algolia react component and that is npm and then install and then react instant search press enter now to use these packages first we have to import them so I'm just going to import the algolia search and the instant search search box hits and highlight and I will show you one by one what they are for first let's just add the state variable for our search CL client so we will be initializing our search client in a use effect Hook when the component loads for the first time we simply need to call elula search by providing the app name and the um Elia search key as arguments the next thing that I will do is to First style this parent div and then if the search client is available then we will start to render the elola components so if search client is available then only we can render the search interface under a div with these classes which are going to make this div centralized now first I will need to add the instant search and under instant search I will add the search box I'm also going to add the hits so with instant search we need to provide the values for the search client and the index name so search client is the one which we initialized and the index name is the search articles for our search box I'm going to provide the props for placeholder value and search as you type and for the hit component we need to create a um hit call back so hits are going to be individual records which the algolia search interface is going to display so first I'm going to create a hit call back so to do that we can simply create a function which is going to accept the hit value so now each hit is going to represent our article so we need to return the HTML that is going to represent the article so for that I'm simply going to return a div with an H2 which is going to contain the title and then with a p or the paragraph element which is going to contain the body now to render the body we just need to access or reference hit do body so body is the property of of article and we can also you know reference hit. title over here but instead of directly referencing hit. title I am going to use the Highlight element so highlight is simply used to highlight the text that we are searching I'm only using it for the title but you can extend it to use for the body as well so we need to provide the attribute prop and the hit prop so the value of attribute is going to be the um the the object property name and the hit is the hit which is incoming as an argument now let's also add some styling information for these HTML so this one is for the div and for paragraph also we can add some stuff now to add the class name for the Highlight we need to create a custom class so I'm just going to create one with the name highlighted classes and we need to provide the class values for the root property now similarly add classes for the search box and for the hits component as well so what I'm going to do is I'm going to create two more search classes for the search and for the hits now to add the classes we just need to set the value for the class names attribute so this is for the search box for the hits let's first add the prop value for our hit call back which should be this one hit component equals to hit let us also add the class name for the hits and this is all that we need to do to create our very basic search interface for the articles that we have indexed let's add the highlighted class names as well for which we have created this object so I'm going to add it over here so when we are running the react application then we are not seeing any results so let's check out what's wrong I think the problem should be with the hits because we are seeing the search input so with hits okay I think we need to return this TP from over here so return and let's also en close this in cly brackets let's save it so now we can see the results for the Articles which we have indexed now let's try to search for anything for example energy now the relevant article is now searched and I think the energy word is only in this article and you can also see the Highlight component working its magic by highlighting the text which was searched now let's search something else something which should be common with every article like the word with so word where is common with every article but because it is not part of any title so that is why it is not getting highlighted so let's try to search something else which should be common I don't think there is anything else common in the titles but still you get the idea right this search is really really fast and to leverage the full text search capabilities we can either use algolia provided components or we can use the hooks as well so let me just give you a brief overview on all the different components that I have used in the react front end so this is the instant search which should be the wrapper around all the widgets that we are going to use for our search interface and this is the search box so search box is a you know uh is an input where user can enter text for their query and for search we just have to U provide the different prop values to configure the search box and for the hits um the hits component is used to display the individual search item and each hit is going to represent an individual item which I just showed you in the react code and this is the Highlight component this is not very complicated it's just used to highlight the um the text which has been searched if it has been found and there you have it that's everything about integrating algolia F text search in a react application by also using F Bas backend we have built a functional search interface capable of handling realtime search queries providing a smooth and efficient user experience if you found this tutorial helpful then please consider subscribing to the channel your support encourages me to create more content like this I am n and I will see you in the next one till then Happy coding

Channel: Code Radiance

Views: 1,722

Keywords: Algolia, React, Search Integration, InstantSearch, JavaScript, Web Development, React Components, Full-Text Search, Algolia API, Frontend Development

Id: tYqoPwv7QGc

Length: 20min 19sec (1219 seconds)

Published: Fri Jan 12 2024