React-Redux-Firebase-Boilerplate

Author: Whitney Griffith - ImpactWhit

Built from:

React-Redux-Firebase-Router Tutorial1 Tutorial2 Tutorial3

Instructions

Starting the project

git clone https://github.com/whitneygriffith/react-redux-firebase
create src/config/dev.jsin main folder and populate it with your personal configs from Firebase in the following format:

export const FirebaseConfig = {
    apiKey: "AIzaSyBnVQDfjkBkZfC7FcqsTpn8o7of45trmqs",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: ""
};

npm install
npm start

Adding a new page

Edit the following:

App.js
- Import the new page import NewPageComponentName from "./components/PageComponentFolder";
- Within the <div> tag embedded in <BrowserRouter> tag, add the following <Route exact path="/new_page_url" component={NewPageComponentName} /> To require Authentication to view a page:
App.js
- Within the <div> tag embedded in <BrowserRouter> tag, add the following <Route exact path="/new_page_url" component={requireAuth(NewPageComponentName)} />

Firebase Additional Suggestions

[ ] Implement Firebase Sign In With Link CallBack using onAuthStateChanged Listener

[ ] Error Handling to display error to user from Firebase's Sign In, Sign Up and other function calls

Sign Up Additional Suggestions

[ ] Create input pattern validators for Email, Phone Number Ref

Production TODOs

General

[ ] Separate Client from server side

Environment Variables

[ ] Set env to production in config.js

Firebase Console

[ ] Add domain to list of authorized domains [ ] Define what occurs to email action links on android or ios device

References

React + NodeJs Backend

Connecting ReactJS Frontend with NodeJs Backend

About

This is a boilerplate for a web app that has react, redux, firebase implemented.

Languages

Language:JavaScript 70.3%Language:CSS 27.8%Language:HTML 2.0%