How to Create A Search Engine Like Google in ReactJS & Tailwind CSS

Creating a search engine from scratch may seem daunting, but with the help of React and Tailwind CSS, it’s actually quite simple. In this blog post, I’ll show you how to create a search engine that looks and feels just like Google.

So let’s get started!

 

How to Create A Search Engine | Google Clone

I have mentioned my Git Repository for your reference. Happy Coding 🙂

Google Clone Github Link: google-clone-search (github.com)

ReactJS – ReactJS is used for designing and building this application. React is an extremely versatile framework which can allow us to create different components in the application separately and then use them whenever we want. The navbar, footer, search bar, the results page, etc were all designed and created as separate components in React. ‘react–router-dom’, ‘react-loader-spinner’, ‘react-player’, etc are some of the external dependencies used to create this web application. 

Tailwind CSS – Tailwind CSS is a fairly new framework but has already gained a great deal of popularity among the front-end developers. I would personally prefer to use Tailwind instead of Bootstrap. The reason for this is despite Tailwind being more complex and difficult than Bootstrap, Tailwind is very lightweight and does not affect the size and speed of the application compared to Bootstrap which has some heavy requirements. Tailwind was used in this application for 90% of the front-end designing as well as enabling a dark mode option in the application. Tailwind allows you to seamlessly switch between light and dark modes without writing a very complex code.

Rapid API – Rapid API is a huge collection of APIs which can be used for testing and developing different applications. In this project Rapid API is used to provide a single API key to access the features of google search engine like google search, google search images, videos and news. The API returns the data corresponding to the search in the json format and this data is then used and displayed appropriately on the application like a google search page. 

NOTE: In order to  use the API key from RapidAPI, create a file in the root folder of the application called “.env” and inside that file, write “REACT_APP_KAIDEN_API_KEY = YOUR_API_KEY”. The .env file on github is not present due to security reasons. 

 

Development of the Application

The application was built using a new react app. After that, in the index.js file, the <App /> tag is put inside a <BrowserRouter> in order to enable routes and routing in the application. BrowserRouter can be used by installing the “react-router-dom” library in the application. 

Inside App.js, a React state variable is created using useState. This variable is used to manage the state of dark mode in the app. In order to implement dark mode and other css from Tailwind, a file in the root folder by the name of tailwind.config.css is created and the necessary code is written in the file. Tailwind’s installation process can be found inside the official Tailwind documentation. Installation: Tailwind CLI – Tailwind CSS

There is a folder by the name of components. This is the folder that houses all the components of the application. Inside components, Navbar.jsx is used to create the navbar of the application. The navbar is simple and only contains the logo of the app which can be customized in any way you like and the button to toggle the dark mode off and on. By default, the app will run in dark mode which is my personal preference but you can change that to suit your preferences. 

The other important component is the Results.jsx which contains the logic to display the searched results in the app. This file differentiates the type of search made by the user i.e. normal search, images, videos or news and then displays the appropriate results on the page. A different file inside the contexts folder called ResultContextProvider.js  is used to house the logic of searching using the API. This file is used to provide the search term for searching. Then it implements the API and also queries the search as well as the type of search. After doing all of this, it returns the result back to the Results.jsx where the appropriate results are displayed. 

There are other components that are created for reusability like the Links.jsx which deals with how the links will look once they are displayed on the page. There is also a component for footer as well a AllRoutes.jsx file which contains all the routes that will be used in the app. The search bar has its own component called Search.jsx. There is also a Loading.jsx which is used to display a loader spinner when the results are being searched. 

 

Conclusion

The application runs very well and provides appropriate results for the four categories which are implemented in the app. Tailwind CSS was a very excellent choice as it makes designing the application less of a hassle so all that extra attention can be put in the logic of the application which certainly requires a lot of work due to its complexity. In order to view the application code, you can go to the following github repository : google-clone-search (github.com).

This article is contributed by Nilay Saxena | LinkedIn.