react-firebase-steps's Introduction

React/Firebase/ReactStrap/Sass

Look for multiple steps in different branches.

Firebase: setup
Postman: add sample data
App: add login/logout (modify sample data to match uid)
App: get data
App: post data
App: delete data
App: update data

Project Setup

This project was bootstrapped with Create React App.
Once you download the project, run npm install in the project directory.

Firebase Setup

Create a Firebase Realtime Database.
Setup Database Rules

{
"rules": {
  ".read": true,
  ".write": true,
    "boards": {
      ".indexOn": ["uid"]
    },
    "pins": {
      ".indexOn": ["boardId", "uid"]
    }
  }
}

Setup Authentication/ Sign-in Method - start with Google.
Use Postman to add sample data.
Create config.js with your projects credentials. (helpers/data/config.js)

Firebase Flow

When the App loads up, it should check for firebase and if not found initialize the app with firebase. (helpers/data/connection). This happens before anything else.
```
fbConnection();
```

Within App.js setup a function to listen for when a user logs in or out.

 authListener = () => firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    this.setState({ authed: true });
  } else {
    this.setState({ authed: false });
  }
});

componentDidMount() should invoke authListener()
Create a function loadComponent to determine what to show (full app or login)
render() invokes loadComponent and pass the state of authed to the <MyNavbar authed={authed} /> . This gives ability to show login or logout in the navbar.

NPM Available Scripts

In the project directory, you can run:

`npm start`

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser. The page will reload if you make edits.
You will also see any lint errors in the console.