Google Drive Clone with ReactJS, Firebase and Authentication

Drive

In this post we are going to make a Google Drive clone using ReactJS. We will be also using firebase to store the files and for authentication.

Beside this we will be using styled components to style our project. This project have been inspired by this awesome series from Camel Coder.

We need to first create a new project with create-react-app called google drive from terminal.

Google Drive

Once the project is created, we will delete some of the boiler plate files.

Delete files

Next, in index.js file we will delete the not required code and it will look like below.

index.js

Next, in App.js file we will delete the not required code and it will look like below.

App.js

We will also make all margin to 0 in the index.css file.

index.css

Now, run the project with npm start and it will look like below.

localhost

Next, create a components folder inside src folder. And in it create a Header.js file. Next in the App.js file, we will include it.

App.js

Now, in the Header.js file we will add the below styled components. We have also installed the package of styled-components in the integrated terminal.

Header.js

Now, we will use the created Styled components and also show a image using img tag in the Header.js file.

Header.js

Now, in localhost we will see a nice Drive logo.

Drive

Now, we will also add Material UI version 4 in our project and import some icons at the top, in Header.js file.

Header.js

Next, we will update our HeaderContainer styled component and also add styled components for HeaderSearch in Header.js file.

Header.js

Now, we will also add HeaderSearch and other icons in our Header.js file.

Header.js

Now, our header is almost perfect, except the end of it.

localhost

To make the icons perfect, we will add a new styled component in Header.js file.

Header.js

Now, the end part is also shown perfect in localhost.

localhost

Now, we will update our App.js to include Sidebar component also.

App.js

Next, we will create our Sidebar. So, create a file Sidebar.js inside the components folder. Here, we are first adding the required imports.

Sidebar.js

Now, we will add the basic structure in Sidebar.js. Here, we are using the basic structure and a image also.

Sidebar.js

The basic sidebar is shown with no styling in localhost.

localhost

We will also add a new SidebarOptions styled component in Sidebar.js file. Here, we are showing an icon and a progress bar.

Sidebar.js

Now, we will also see the new icons and progress bar in localhost.

localhost

Next, we are going to add our App class code in index.css file. This class we are using in App component.

index.css

Our styles are more aligned now.

localhost

We also need to change all divs to a SidebarOption in Sidebar.js file.

Sidebar.js

Next, we are going to add the styles in our styled components in Sidebar.js file.

Sidebar.js

Now, our Sidebar is looking perfect in localhost.

localhost

We will also add the styles for the progress bar and icons in Sidebar.js file.

Sidebar.js

Now, our progress bar and icons are also showing perfect in localhost.

localhost

Now, we will create a new Data.js file in components folder. And we will also add it in the App.js file.

App.js

Now, in Data.js file we will add all imports and some styled components.

Data.js

We are going to use the created styled components in Data.js file.

Data.js

Now, our Data component will be shown perfectly in localhost.

localhost

Next, we will add some more styled components in Data.js file.

Data.js

We will also add a style for DataListRow in Data.js file.

Data.js

Now, after the DataHeader, we will show the new styled components in Data.js file.

Data.js

Now, our Data component is finished and it is showing perfectly in localhost.

localhost

Now, we will setup firebase. So, first go to console.firebase.google.com and click on Add Project.

firebase

Next, we need to give the project a name. And click on the Continue button.

firebase

In the next screen disable the Google Analytics and click on the Create project button.

firebase

Once the project is created, we can click the Continue button.

firebase

First we will setup the Authentication. So, click on Authentication and then the Get Started button.

firebase

In the next screen, we will choose Google.

firebase

Now, we need to give our email id in the next screen and click on Save button.

firebase

In the next screen, it will show that the google authentication is Enabled.

firebase

Now, we will setup the database. So, click on the Firestore Database and then Create database button.

firestore

In the pop-up click on the radio button for Start in Test mode. And then click on Next button.

firestore

Now, we will give the location and click on Enable button.

Enable

Now, we need to set the Storage for storing the files. So, click on Storageand then Rules. Inside it we are allowing all.

Storage

Now, we need to get the keys. So, click on the Settings cog and then Project settings.

Settings

Now, scroll down in the next page. After that click on the Web button.

Code button

In the next screen, we need to give the app a name. Also, setup Firebase Hosting. And then click on Register app.

Register

Next, it will ask us to install firebase. This step we will do later. After that click on the Next button.

Install

The next screen will also ask us to install firebase tools. This step we have to do only once. After that click on the Next button.

tools

It will again show us some more deploy steps. We need to just clickon the Continue to the console button.

Console

In the next screen, we will get our config which we need to copy.

config

Now, create a firebase.js file inside the src folder. And put the config from above in it.

firebase.js

We will now add the boiler plate code to use firebase db, storage, auth and provider in firebase.js file.

firebase.js

Now, we will have a Modal to be shown while uploading file. So, in Sidebar.js file we will import Modal from Material UI and also some styled components.

Sidebar.js

We are going to have some more styles for ModalBody in Sidebar.js file.

Sidebar.js

Now, inside the Sidebar function, we will have a new state of open. And we will also show the modal with the styled components with two input.

Sidebar.js

Now, our nice pop-up will be shown in localhost.

localhost

When the user clicks Submit, we want to show a uploading text. For this we will have a styled component and an uploading state in the Sidebar.js file.

Now, we will show the uploading para if the uploading state is true or else the input buttons.

We have also given the onClick handler to the Sidebar button.

Sidebar.js

Now, we will add the main logic to upload a file in Sidebar.js file. First the onChange in input of file, will get the file selected.

Now, the handleUpload, which runs when we click the Submit button, will have the main logic.

Here, we are first using the storage code to upload the storage in firbase. After that we are using the uploaded file details to save the details of the file in firestore database.

Sidebar.js

We also need to have the imports of firebase in Sidebar.js file.

Sidebar.js

Now, again go to localhost and upload a file.

Upload

Now, if we check the Storage we can see the file been uploaded.

Storage

We will also see the details of it in firestore database.

firestore

Now, we also want to show these uploaded files. So, in the Data.js file we will first do the required imports.

After that we have a files state. Now from inside a useEffect, we are calling firebase databse and getting the array and setting it to files array.

Data.js

Now, we also need a function to change the size to KB, MB in the Data.js file. For this we have got a function from stack overflow.

Data.js

Now, we will map through the file to show it in both folder format and in list in the Data.js file.

Data.js

Now, we will see the files in localhost.

localhost

Now, we will also add Authentication in our project. So, we will add styles for the same first in App.js file.

App.js

Now, we will use the signInWithPopup() method from firebase to login to the app. Here, we will login the login screen if we don’t find the user in App.js file.

App.js

We will also use the new props of photoURL in the Header.js file.

Header.js

Now, when we go to the app for first time, we will see the login screen.

localhost

Now, when we login through our gmail account we will see the photo of the logged in user also at the top right.

User

It’s time to deploy our app and make it live. So, go to the terminal and run firebase login

login

After that give firebase init command. Here use arrow key and press the spacebar to Hosting and after that press enter.

Hosting

Then select Use an existing project and press enter.

Existing

Here, you need to select the correct project.

project

Next, we choose the public directory and it is build. The next option is Yes for single-page app and github deploys No.

build

Now, we need to run npm run build in the terminal for a production optimal build.

build

Now, the final command is firebase deploy to deploy the frontend to firebase.

deploy

Now, our app is sucessfully deployed and the functionalities are working perfectly.

Live

You can find the code for the same here.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store