Build a Google Keep Clone with React, React Hooks, Styled Components, and Firebase
Get Started with React
In this tutorial, we’ll create a clone of Google Keep using React, React Hooks, Styled Components, and Firebase. Before we dive in, make sure you have basic knowledge of React (functional components), React Hooks, and JavaScript. You’ll also need Node >= 8.10 and npm >= 5.6 installed on your machine.
Setting Up Firebase
First, let’s create a Firebase project. Open the Firebase console, sign in, and create a project by clicking on “add project.” Fill in your project name and decide whether to enable Google Analytics. Once you’ve created the project, navigate to the Project Settings and register your web app. You’ll receive a Firebase config script tag, which you’ll need to copy.
Create a Firebase.js File
Create a Firebase.js file in your src folder, import the Firebase we installed, and paste the config details into the script tag. Don’t forget to export Firebase, as this is the file you’ll be importing to your React components.
Building the Layout
Let’s create our header component. We’ll import React and Styled Components, and then create a functional component and export it. We’ll also create a nav wrapper, logos wrapper, and image element using Styled Components.
Creating the Main Component
Next, let’s create a Main.js file and import React and Styled Components. We’ll create a functional component called Main, where we return the main HTML element. We’ll also create a form that will house the input for the title of our note and textarea for the note body.
Adding Interactivity
To achieve the Google Keep app’s functionality, we’ll create states for showInput, textValue, titleValue, and their state handlers. We’ll pass these props into the Main component and dynamically display the title input. We’ll also add value and onChange events for the textarea, and set showInput to true onFocus.
Adding Auto-Grow Functionality
To ensure the textarea grows automatically with text, we’ll create an autoGrow function using the useRef Hook. We’ll pass the element we want into the autoGrow function and use it to update the textarea’s height.
Handling Focus and Blur Events
To achieve the Google Keep app’s functionality, we’ll create states for textFocused and titleFocused. We’ll pass these props into the Main component and set them to true or false depending on whether the textarea and title inputs are focused or not.
Adding a New Note
When the App is clicked, we’ll call a function that checks if both textFocused and titleFocused are false and if either textValue or titleValue isn’t empty before adding a new note. We’ll create a state for our notes and add the new note object to the preexisting notes.
Displaying Notes
Let’s create a Note.js file for our note component. We’ll import Note.js into our Main.js component and create a wrapper for the notes called NoteCon. We’ll add the wrapper after NoteInput and map the notes we’ll be getting from App.js to the Note component.
Storing and Fetching Data from Firebase
To persist our notes, we’ll store our notes information to Firebase and get it from there every time we refresh. We’ll use Firebase’s inbuilt methods to store data and fetch it using the getData function. We’ll call the getData function inside the useEffect Hook to ensure it runs only once, at the initial time the component is mounted.
What’s Next?
With this, we’ve created a simple clone of Google Keep. However, some functionalities are still missing, such as editing a note, deleting, splitting into different categories, and even creating different database accounts for each user. You can try adding these features and more on your own.