Google Clone using ReactJS with Styled Components

8 min readSep 19, 2022

In this project we are going to create a google clone using ReactJS. Here, we will be using Styled components to style the project. We will also be using Context API, to transfer data between two pages.

Google provides us awesome APIs to do the search and we will be using the same. This blog have been inspired by this awesome YouTube playlist by Camel Coder.

First we will create a new project for the google clone from the terminal, using create-react-app.

As with any other React project, we will remove some of the boiler-plate code files.

After that we will make our index.js much more cleaner as below.

We will remove everything from App.css file and make all margin to 0.

Now, remove the boiler plate code from App.js file and add a test file. Also, starting the react app with npm start will show, it on localhost:3000.

We are going to use Material UI version 4 in our project. So, we need to install the mentioned package in our project.

We also need to install material ui icons in our project. We are installing both through the integrated terminal.

Also, we have created a structure in our project. Here, inside a components folder, we have created a Home.js file.

In the Home.js file, we have put the below code.

Now, we will show the Home component from App.js file.

Back to Home.js file, we will show two icons from material ui and also an image.

Now, in localhost we will see everything without styles.

We are going to use Styled components in our project. So, we need to first install it using below command.

npm i styled-components

Next, in the Home.js file, we will put the styles with the styled component.

Now, we have replaced all of the divs with respective styled components in Home.js file. Notice that we have also added a Search component in our file.

Now, our localhost will be more styled.

Now, in the Search.js file we have done the initial imports. After that we have added styles for SearchInput.

We will also add styles for SearchButton in our Search.js file.

Finally inside the Search component in our Search.js file, we will use the styled components, along with material ui icons.

Now, our localhost is looking perfect and as Google home page.

Next, we will install React Router version 5 in our project. We have also created two routes in App.js file. One for Home and other for Search results.

Now, we will create a new SearchPage.js file and add the below code in it. Here, we are also calling the Search component with a hide prop.

Back in the Search.js file, we are getting the new props and also updated the code to show the button, only if the props are not passed.

Now, if we go to http://localhost:3000/search we will see the new page. Notice, here in the search bar we don’t have any buttons.

Back in SearchPage.js file we will add material ui icons imports.

After calling the Search component in SearchPage.js file, we have added code to show different options.

We need to remove margin-top styles in Search.js file, to fix issues.

Now, in the Home.js file we will add a margin-bottom for images.

Now, in SearchPage.js file we will start adding styled components. Here, added styles for SearchPageHeader and SearchPageOptions.

Next, we will add some more styles for Options and SearchPageOption in SearchPage.js file.

Now, we will change all the divs to Styled components in SearchPage.js file.

Now, our search component is showing perfectly in localhost.

We will create new styled components in SearchPage.js file. These are to show the results.

Now, we will add the styles for the same in SearchPage.js file.

Now, our static content will be shown perfectly in localhost.

In the Search.js file we will use useHistory() from react router dom. Here, we have also added an onSumit handler calling the function search.

Inside the function search(), we are console logging the input. After that we are going to the SearchPage component.

Now, we will search anything in the home page and click on the Google Search button.

After that we will go to the /search route and also the console log will be shown.

We are going to use Context API in our project to easily move data from one component to another.

So, create a types.js file in the src folder and add the below content in it.

Next, we will create a reducer.js in the src folder and add the below content in it. Here, we are importing the tpes and after that we have a initialState and inside the reducer we are updaing the term.

Now, we need to create a SearchProvider.js file inside the src folder. Here, we have to use the createContext and use the Provider.

Here, we are using the useReducer hook and also exporting the useStateValue containing the context.

Now, in the index.js file we will wrap the App componen with SearchProvider and will pass the initialState and reducer.

Now, we will dispatch the tpe and input from Search.js file from the search function.

Now, in SearchPage.js file we wil be able to get the term using useStateValue().

Now, again when we search something, we will get it from SearchPage.js file.

Now, we will get the API Keys from google to get result from it. So, first go to https://developers.google.com/custom-search/v1/overview and click on Get a Key button.

It will open a pop-up like below.

Select any project and then click on NEXT button.

It will reveal the API Keys, which we need to note down.

We also need to get the Search Engine id. So, go to https://programmablesearchengine.google.com/controlpanel/create

Now, we need to give the search engine, the website. After that verify the credentials and click on Create button.

Now, we will get the Search engine ID. We also need to check the Search the entire web selected.

Now, create an .env file in the root directory and put the API Key and Search engine id in it.

The constants should have REACT_APP in it.

Now, we will create a custom hook called useGoogle.js inside the src folder. Here, we are calling the custom endpoint of https://www.googleapis.com/customsearch/v1?key from google. In it we are passing the keys along with the search term.