Google clone

Google clone using React Firebase and google search Api

In this article, we will make the Google Clone using React. We will also be using Firebase for Hosting. Firebase is a great tool to get started with projects quickly. We will also be using HTML, CSS,Material ui and React Context API. Please keep in mind, you need to have Visual Studio Code and NodeJS installed.

I will show you how to build a completely functional Google Search clone from scratch.

Are you pumped? LET’S GOOOOO 🔥 🚀

PART ONE

in first part i will show you setup

1. Time to Set Up Your awesome React App

To get started let’s make a new folder named google-clone (or whatever you want keep your folder name)and open it. As soon as you are in the folder, right click and select Open With Code

After you click Open with Code you’ll see a huge weird window. Don’t worry we got you covered. This is what you might be seeing:

So Visual Studio Code is the Code Editor we are going to use, this is what professionals mostly use, but this is more of a personal preference. You can use Atom or any other editor too, but Visual Studio Code makes your life easier.

Now that in you are in Visual Studio Code, Press Ctrl + J (on Windows) and Command + J (on Mac) and you should see a terminal window at the bottom just like shown below.

Don’t freak out, this is just a regular terminal, we are not hacking anything 😆

Now that you’re in the terminal, we can now install and setup React app and this is usually a headache when doing manually. So Facebook, the creator of React made a script which installs and sets up React for you without any type of headache.

To use this script, just type the following in the terminal and press Enter. This will take time so till then you can read what the script actually does below.

npx create-react-app .

Here’s how this works. npx is a part of npm (Node Package Manager) except npx runs a remote script instead of installing it locally. This is done so that you always have the latest version of React installed in your project. create-react-app is the name of the remote script and “.” specifies that we want the script to make a React project in the SAME FOLDER and not make a new folder for it, if you had to make a new folder name, you could just provide the name of folder instead of “.” and it would make a folder for you.

You know that it is finished when you see “Happy Hacking” on your terminal. If you see this, we are ready to move on.

Now that we have our React App installed, now we can start it. In the terminal type the following command. This command will start the React App.

npm start

After you hit Enter, you should see your default browser open. Although I suggest Google Chrome because of it’s development tools making life easier, it’s still your personal preference, but we cannot guarantee development quality with other browsers.

If you do not see the browser tab open

http://localhost:3000

then go to above URL or even better, I’ve something for you. This will take you to your app.

This is the Welcome screen of React. But we want to build an Google Clone, so we need to clean up our React project a bit so that we can get started with the Google Clone.

Delete (optional) three files from the src folder from the React App. Those three files are

• App.test.js
• logo.svg
• setupTests.js

We are deleting these files because these are not relevant to us in any project.

That’s not all, if you check the browser window now, I know what you’re seeing, do not freak out, we have the solution, go to App.js and remove the following line from code.

import logo from “./logo.svg”;

Also remove everything under the first <div> element from your App.js file. You’re code should look like the following:

import React from “react”;
import “./App.css”;
function App() {return 
<div className=”app”>
React App</div>;
}export default App;

Now let’s cleanup the CSS files a bit.

Go to App.css and remove all the contents of your file.

Now go to index.css and add this piece of code on the top. And look at the change on the app. What do you see?

*{
 margin: 0;
 padding: 0;
}

This will get rid of the margin and padding of the page.

Now we have our React project perfectly set up. Now we can start making the Google Clone.

1. Setting up the React Router

A very important thing to consider in a React app is the navigation (moving from one page to another) of the users. Since React is a single page application, it doesn’t support multiple routes by default.

But the node packages come to our save. There’s a package named react-router-dom which allows us to create routes for our React project. Not a lot complicated. Setting up is one time, and then whenever you add a new page, you just need to inform the Router. Don’t worry we will cover that in depth here!

Open your terminal and enter the following command to install react-router-dom

npm install react-router-dom

For reference click here.

When the installation completes, you should see something like this

Once it’s installed, now let’s get our hands dirty and write some actual code. Let’s make a new component. To make a component, simple make a new file. We call it Home.js for our case. The convention is that the first letter of a component must be in capitals. Also create a Home.css file for the component styling.

Also to make life easier, go ahead and install a Visual Studio Code extension named ES7 React/Redux/GraphQL/React-Native snippets. This extension will make the boiler plate for React components without you being typing the code all by yourself.

Let’s go in Home.js. Just type in “rfce” and you should get an option to autocomplete the snippets as shown in following picture.

Hit Enter while on “rfce”. This will autocomplete the React boiler plate for you. Now let’s change the class of the div element provided us to “home”. We follow BEM convention while styling our components.

BEM Convention helps our CSS and JSX organized for us to read later, and everything becomes easy to keep track of.

Let’s just add some text there for now, let’s say Hello. The code on the Home.js file now should be

2. Set the Homepage

Let’s organize our environment by creating a folders in the src folder: components (The folder structure totally depends on you)

Let’s start with the homepage!

• In the pages folder, create a file named Home.js.
• Once you are in the file, type rfce to use the snippet from ES7 Snippets. This will create a React component that is ready to be exported.
• Still in the pages folder, make a Home.css file and import it into your Home.js component.
• The homepage will consist of two different elements:

The header:

The body:

The body of the homepage

3. Build the Homepage Header

• In the Home.js file, create two divs with the classNames of home__header and home__body. The home__header will further contain two <div> children with the className of home__headerLeft and home__headerRight.
• Inside these divs, we will have four <Link> components from React Router, a <Icon/> component, and a <Avatar/> component from Material UI.
• To give some styling to our Home.js component, open Home.cssand add the following code:

To render the icons and the avatar, we have to install Material UI.

• Open the terminal and type the following command:

npm install @material-ui/core @material-ui/icons

• Now import the grid icon and the avatar in the Home.js file:

import AppsIcon from '@material-ui/icons/Apps';import AccountCircleIcon from '@material-ui/icons/AccountCircle';

• The <Link> components allow users to navigate around the application without reloading pages. To use them, install React Router. Open your terminal and enter the following command to install react-router-dom:

npm install react-router-dom

• In the Home.js file, import the <Link> component from react-router-dom:

import {Link} from “react-router-dom”;

• To make the <Link> components work, we have to set up the React Router.
• Go to App.js and import the following dependencies:

import {BrowserRouter as Router, Route, Switch} from "react-router-dom";

• Wrap the entire app in the <Router> component so that every component has access to the router.
• Add a <Switch> component. This component will only render the first route that matches the current URL.
• Inside the <Switch> component, add the routes with their own paths. The <Route> component renders a specific UI when its path matches the current URL.
• Import the Home component and render it inside the <Route path=”/”> component.

We have just built the header of the homepage!

Homepage header

4. Add the Homepage Logo

Now, let’s start to build the homepage body by adding and styling the logo.

• Go to the Home.js file. Inside the <div> with the className of home__body, add the Google logo: “https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png”
• Add some styling to the homepage body with CSS.
• Back in the Home.js file, add a second <div> child with the className of home__inputContainer. Inside this <div>, we will render the <Search/> component.

Your Home.js file should now look like this:

5.Build the Search Component

The reason for creating the search bar as a component is to reuse it later in the SearchPage component.

• In the componentsfolder, create a file named Search.js.
• Once you are in the file, type rfce to use the snippet from ES7 Snippets.
• Still in the pages folder, make a Search.css file and import it into your Search component.
• In the Search.js file, create a form . This container will have a <div> child with the className of search. The <searchIcon> will further contain a className search-icon an input, and a <MicIcon> with className mic-icon
• Import the two icons from Material-UI:

import SearchIcon from "@material-ui/icons/Search";
import MicIcon from "@material-ui/icons/Mic";

Now we have to create the two buttons: Google Search and I’m Feeling Lucky.

• Create a <div> container with the className of buttons.
• Define the Google Search button type as submit. This way, the Google search will work not only when you click the button but also when you press Enter.
• By this point, your Search.js file should look like this:

• To give some styling to our Search.js component, open index.scss and add the following code:
• Back in the Home.js file, import and render the <Search/> component.

We have just built the UI of the Google homepage!

6. Add the Search Functionality