Background

There are many sophisticated note taking app but I just want a simple one that I can enter some text from my laptop, and it will appear in my mobile phone.

What is the plan?

What is Firestore ?

It's NoSQL database that can automatically sync across different devices. You will immediately see the changes appear on other devices.

What to do?

1. Setup a Firebase project

Goto https://firebase.google.com/ and register for an account, then go to the Firebase console and add a project. Go through the wizard pages to add your project.

After that, goto Usage and billing to make sure you are using a free plan so you don't pay for anything.

Goto Details & settings and modify your plan if it's not Spark plan.

Now you can start playing with it without worry.

2. Setup project settings

Goto Project settings.

Setup the public details for your application.

3. Setup authentication

We need to setup the authentication so everyone can only see the note they own. Goto Authentication page and enable the Google sign-in method.

Just enable it and save.

4. Create the ReactJS web application

Create an empty directory and run this command:

npx create-react-app write-it-down-web --template typescript

To check if your ReactJS web application is working, run this command to start the web server:

npm start

It should open your browser automatically and you should see a rotating React icon. Now you can exit the browser and the web server.

5. Add login capability to the web application

First we install the dependencies for Firebase by running this command:

npm i firebase firebaseui

This will install the Firebase and the UI to perform the login. Now we add a React Context for storing login related details. Put these in ./src/contexts/LoggedInContext.ts :

import firebase from 'firebase';
import React from 'react';

const LoggedInContext = React.createContext<Partial<{
    user: firebase.User | null,
    clear: () => Promise<void>,
}>>({});

export default LoggedInContext;

This will store the user details and the function to logout the user. Now we add a login page, which will be shown if the user is NOT logged in yet. Put these in ./src/components/LoginPanel.tsx :

import './LoginPanel.css';
import '../../node_modules/firebaseui/dist/firebaseui.css';

import firebase from 'firebase';
import * as firebaseui from 'firebaseui';
import React, { useEffect, useRef } from 'react';

let uiPromise = Promise.resolve<firebaseui.auth.AuthUI | null>(null);

const LoginPanel = () => {
    const ref = useRef<HTMLDivElement>(null);

    useEffect(() => {
        uiPromise = uiPromise.then(() => {
            const ui = new firebaseui.auth.AuthUI(firebase.auth());
            ui.start(ref.current!, {
                signInOptions: [firebase.auth.GoogleAuthProvider.PROVIDER_ID],
                signInFlow: 'popup',
                callbacks: { signInSuccessWithAuthResult: () => false }
            });
            return ui;
        });
        return () => { uiPromise = uiPromise.then(ui => ui!.delete()).then(() => null) };
    });

    return (
        <div className="login-panel">
            <h1>Write it down</h1>
            <div ref={ref}></div>
        </div>
    );
};

export default LoginPanel;

Now we add some stylings to it. Put these in ./src/components/LoginPanel.css :

.login-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

This will show the title and the login button in the middle of the page. Now we add a dummy home page, which will be shown if the user is logged in. Put these in ./src/components/HomePanel.tsx :

import React, { useContext } from 'react';
import LoggedInContext from '../contexts/LoggedInContext';

const HomePage = () => {
    const loggedIn = useContext(LoggedInContext);

    return (
        <div>
            <h1>Home page </h1>
            <button type="button" onClick={loggedIn.clear}>Logout</button>
        </div>
    );
}

export default HomePage;

This will show a title and a logout button. Now we change the entry point to show the corresponding page based on the login status. Put these in ./src/App.tsx :

import './App.css';

import firebase from 'firebase';
import React, { useEffect, useState } from 'react';

import HomePanel from './components/HomePanel';
import LoginPanel from './components/LoginPanel';
import LoggedInContext from './contexts/LoggedInContext';

// TODO: Configure Firebase here

const App = () => {
  const auth = firebase.auth();
  const [user, setUser] = useState<firebase.User | null>();

  const logout = async () => {
    await auth.signOut();
  };

  useEffect(() => {
    return auth.onAuthStateChanged(newUser => setUser(newUser));
  }, [auth]);

  return (
    <LoggedInContext.Provider value={{ user, clear: logout }}>
      {user === undefined ? null : user ? <HomePanel /> : <LoginPanel />}
    </LoggedInContext.Provider>
  );
};

export default App;

Lastly, clear the contents of ./src/App.css .

6. Setup Firebase for the web application

This login capability is not done yet. We need to configure the web application to use the Firebase. Open your Firebase console in the browser and go to the project settings. Goto Your apps section and click on the </> button to add a web application.

Just fill in the App nickname and click on Register app button.

Now you should see some Javascript code to setup the Firebase. We just need to firebaseConfig . Copy the content between { and }.

Now open ./src/App.tsx and replace // TODO: Configure Firebase here with these:

firebase.initializeApp({
  apiKey: "<from_the_content_copied_just_now>",
  authDomain: "<from_the_content_copied_just_now>",
  databaseURL: "<from_the_content_copied_just_now>",
  projectId: "<from_the_content_copied_just_now>",
  storageBucket: "<from_the_content_copied_just_now>",
  messagingSenderId: "<from_the_content_copied_just_now>",
  appId: "<from_the_content_copied_just_now>",
  measurementId: "<from_the_content_copied_just_now>"
});

The parameter for the firebase.initializeApp method should be the value you copied just now.

Now it's done. You can run this command to test everything:

npm start

Next we will do Make a note taking app with Firestore - Part 1.2 Markdown editor