> For the complete documentation index, see [llms.txt](https://react-firebase.gitbook.io/rf/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://react-firebase.gitbook.io/rf/guides/build-a-react-app-with-firebase-auth-and-realtime-database.md).

# Build a React App with Firebase Auth and Realtime Database

React Firebase Auth Realtime DB Tutorial

### Overview

We want to build a bookmarking app that allows a user to add links and metadata and then be able to search through them.

### App description

* If a user is not authenticated, they should see a Login/Register screen
* A user can choose to login/register with Google or Anonymously.
* Once a user is authenticated the login/register buttons should disappear.
* If a user is authenticated, they should see a : 
  * A big text input with auto-complete.
  * A small button to logout.
  * A list of all their bookmarks sorted by last used.
* Once the user starts typing, the autocomplete field should suggest clickable links that will open the link in a new tab.

Looking at the app description we will need to use `firebase/auth` and `firebase/database` or `firebase/firestore`

### App wireframe

![](https://2946308717-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LKIOWqKtRm-4MEjeGPb%2F-LKMFjnLfRfh13mbL7Lv%2F-LKM_XmGVg3P8SQuKuJy%2FScreen%20Shot%202018-08-20%20at%204.45.59%20PM.png?alt=media\&token=2a0ba0d3-236e-4e7a-85f5-0f70c9e125d4)

![](https://2946308717-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LKIOWqKtRm-4MEjeGPb%2F-LKQf9YDyr389tk4Wxy1%2F-LKQfLLrpaAYuMwkvWrX%2FScreen%20Shot%202018-08-21%20at%2011.48.50%20AM.png?alt=media\&token=afcdf569-444c-435b-bebb-b02ab8a5b8ec)

#### Now that we have the requirements we can get started !

You can read the whole code [here](https://github.com/rakannimer/react-firebase/tree/master/modules/tutorial-bookmarking-app) if you want to go straight to the code. 

Every step below will have a matching git commit that you can browse.