Google Drive Clone with ReactJS, Firebase and Authentication
--
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.
Once the project is created, we will delete some of the boiler plate files.
Next, in index.js file we will delete the not required code and it will look like below.
Next, in App.js file we will delete the not required code and it will look like below.
We will also make all margin to 0 in the index.css file.
Now, run the project with npm start and it will look like below.
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.
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.
Now, we will use the created Styled components and also show a image using img tag in the Header.js file.
Now, in localhost we will see a nice Drive logo.
Now, we will also add Material UI version 4 in our project and import some icons at the top, in Header.js file.
Next, we will update our HeaderContainer styled component and also add styled components for HeaderSearch in Header.js file.
Now, we will also add HeaderSearch and other icons in our Header.js file.
Now, our header is almost perfect, except the end of it.
To make the icons perfect, we will add a new styled component in Header.js file.
Now, the end part is also shown perfect in localhost.
Now, we will update our App.js to include Sidebar component also.
Next, we will create our Sidebar. So, create a file Sidebar.js inside the components folder. Here, we are first adding the required imports.
Now, we will add the basic structure in Sidebar.js. Here, we are using the basic structure and a image also.
The basic sidebar is shown with no styling in localhost.
We will also add a new SidebarOptions styled component in Sidebar.js file. Here, we are showing an icon and a progress bar.
Now, we will also see the new icons and progress bar in localhost.
Next, we are going to add our App class code in index.css file. This class we are using in App component.
Our styles are more aligned now.
We also need to change all divs to a SidebarOption in Sidebar.js file.
Next, we are going to add the styles in our styled components in Sidebar.js file.
Now, our Sidebar is looking perfect in localhost.
We will also add the styles for the progress bar and icons in Sidebar.js file.
Now, our progress bar and icons are also showing perfect in localhost.
Now, we will create a new Data.js file in components folder. And we will also add it in the App.js file.
Now, in Data.js file we will add all imports and some styled components.
We are going to use the created styled components in Data.js file.
Now, our Data component will be shown perfectly in localhost.
Next, we will add some more styled components in Data.js file.
We will also add a style for DataListRow in Data.js file.
Now, after the DataHeader, we will show the new styled components in Data.js file.
Now, our Data component is finished and it is showing perfectly in localhost.
Now, we will setup firebase. So, first go to console.firebase.google.com and click on Add Project.
Next, we need to give the project a name. And click on the Continue button.
In the next screen disable the Google Analytics and click on the Create project button.
Once the project is created, we can click the Continue button.
First we will setup the Authentication. So, click on Authentication and then the Get Started button.
In the next screen, we will choose Google.
Now, we need to give our email id in the next screen and click on Save button.
In the next screen, it will show that the google authentication is Enabled.
Now, we will setup the database. So, click on the Firestore Database and then Create database button.
In the pop-up click on the radio button for Start in Test mode. And then click on Next button.
Now, we will give the location and click on Enable button.
Now, we need to set the Storage for storing the files. So, click on Storageand then Rules. Inside it we are allowing all.
Now, we need to get the keys. So, click on the Settings cog and then Project settings.
Now, scroll down in the next page. After that click on the Web button.
In the next screen, we need to give the app a name. Also, setup Firebase Hosting. And then click on Register app.
Next, it will ask us to install firebase. This step we will do later. After that click on the Next button.
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.
It will again show us some more deploy steps. We need to just clickon the Continue to the console button.
In the next screen, we will get our config which we need to copy.
Now, create a firebase.js file inside the src folder. And put the config from above in it.
We will now add the boiler plate code to use firebase db, storage, auth and provider in firebase.js file.
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.
We are going to have some more styles for ModalBody in Sidebar.js file.
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.
Now, our nice pop-up will be shown in 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.
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.
We also need to have the imports of firebase in Sidebar.js file.
Now, again go to localhost and upload a file.
Now, if we check the Storage we can see the file been uploaded.
We will also see the details of it in firestore database.
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.
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.
Now, we will map through the file to show it in both folder format and in list in the Data.js file.
Now, we will see the files in localhost.
Now, we will also add Authentication in our project. So, we will add styles for the same first in App.js file.
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.
We will also use the new props of photoURL in the Header.js file.
Now, when we go to the app for first time, we will see the login screen.
Now, when we login through our gmail account we will see the photo of the logged in user also at the top right.
It’s time to deploy our app and make it live. So, go to the terminal and run firebase login
After that give firebase init command. Here use arrow key and press the spacebar to Hosting and after that press enter.
Then select Use an existing project and press enter.
Here, you need to select the correct project.
Next, we choose the public directory and it is build. The next option is Yes for single-page app and github deploys No.
Now, we need to run npm run build in the terminal for a production optimal build.
Now, the final command is firebase deploy to deploy the frontend to firebase.
Now, our app is sucessfully deployed and the functionalities are working perfectly.
You can find the code for the same here.
