Google Keep Clone with ReactJS and Firebase

Google Keep Clone with ReactJS and Firebase

google-keep-reactjs-firebase Google Keep clone with ReactJS and Firebase

Google Keep Clone with ReactJS and Firebase

This project was bootstrapped with Create React App.

screenshots of web app


Features include:

  • Adding of notes which are then saved to firebase database on the cloud
  • Fetching and Listing notes from firebase
  • Edit/Update any selected notes on the go
  • Delete any selected notes

Live demo

  • A video demonstration is at You first need to have internet connection.

  • For local demo, clone the repo on your machine by issuing these commands on your command prompt:

    • git clone
    • cd google-keep-reactjs-firebase
    • yarn start or npm start and a new tab will automatically open in your browser. If not, just open http://localhost:3000 to view it in the browser.
  • For online demo, Open to view it in the browser.

Issues, Feature Requests, and Contributing

Please make sure to read the full guidelines. Your issue may be closed without warning if you do not.


  1. Before reporting a new issue, browse through the issues to see if your similar issue hasn't been in existance.


  • Kindly write an indepth description of the bug alongside a demonstration(image/video) for better understanding.

Feature Requests

  • Write a detailed issue, explaning what it should do or how.
  • Include screenshot (if needed)


  • Fork the repo then clone the forked version locally.
  • Do your modifications in the dev branch (if not existant, kindly create a new one).
  • Ensure that your version is totally working at your end.
  • Send a PR(Pull Request)


Coming Soon

Download Details:

Author: waptik


Source Code:

reactjs firebase react javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

How to Create Protected Routes in a React app with Firebase and react-router

Using Firebase and react-router to create protected routes in a react app.

React Hooks and Redux, Send Push Notifications with ReactJS and Firebase

React Hooks and Redux, Send push notifications with ReactJS and Firebase, create web services and database with NodeJS

React Firebase Tutorial - How to Store and Retrieve Images - Fully Featured React Project Tutorial

React Firebase Tutorial. How to store and Retrieve images. Fully featured React Project Tutorial

Email Authentication with React Native, React-Navigation and Firebase

Learn how to implement an authentication flow using an email sign-in provider with React Native, react-navigation, and react-native-firebase. Managing user authentication flows in a mobile app is one of the most significant features to implement. We are going to discuss one of the strategies to implement an authentication flow using an email sign-in provider with React Native and the latest versions of react-navigation (version 5) and react-native-firebase (version 6) libraries. Yes, for backend service, we are going to use Firebase SDK.