Project Overview

A react-based Google Search engine clone application to search through the web using google’s Custom Search JSON API and Programmable Search Engine by Google

Note: Search results are pre-loaded in src > utils > response.json for development purpose. For real-time results follow the below steps

Demo

Project Setup

### Clone the project


---


git clone https://github.com/dineshnadimpalli/React-Google-Search-Clone.git




### Install Dependencies


---


Enter the project directory and do

npm install (or) npm i




### Run the application


---


npm start

This will run the project in http://localhost:3000




### Create a Firebase project


---


To use the custom search API you need to create a firebase project using firebase console https://console.firebase.google.com and copy the Web API key from your Project settings and paste it in the keys.js file




### Create a custom Search Engine


---



- Use the following link https://developers.google.com/custom-search/docs/tutorial/creatingcse to create a search engine according to your requirements.




- For this project, I have set the Sites to search field as www.google.com and after the project is setup, go to Setup > Search the entire web and set it to ON




- Don’t forget to copy the Search engine ID and paste it in keys.js file




### One Last Step


---


Modify the index.js file in src > Pages > SearchPage according to the comments mentioned to fetch the actual search results instead of pre-loaded data

Boom! 🚀 you should be good to go now

Happy Coding… 👨🏻‍💻✌️

Resource Links

• https://developers.google.com/custom-search/v1/using_rest
• https://developers.google.com/custom-search/docs/tutorial/creatingcse