First working version of everything.

package.json

@@ -6,8 +6,12 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "bootstrap": "^4.5.0",
+    "firebase": "^7.15.0",
     "react": "^16.13.1",
+    "react-bootstrap": "^1.0.1",
     "react-dom": "^16.13.1",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1"
   },
   "scripts": {

src/App.js

@@ -1,24 +1,18 @@
 import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import { Switch, Route, BrowserRouter as Router } from 'react-router-dom';
+import SignUpPage from './SignUp';
+import FacebookPage from './Facebook';
+import 'bootstrap/dist/css/bootstrap.min.css';
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div>
+      <Router>
+        <Switch>
+        <Route path={'/signup'} component={SignUpPage} />
+        <Route path={'/facebook'} component={FacebookPage} />
+        </Switch>
+      </Router>
     </div>
   );
 }

src/Facebook.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import db from './firebase';
+
+// These props are destructured from the Firebase field names.
+const ProfileBox = ({city, imageUrl, name, profile, userId }) => {
+  return (
+    <div>
+      <div>
+      {name}
+        </div>
+      <div>
+      {city}
+        </div>
+      <div>
+      {profile}
+        </div>
+      <img src={imageUrl} alt={name}/>
+      </div>
+  );
+};
+
+const FacebookPage = () => {
+  const [profiles, setProfiles] = React.useState([]);
+  React.useEffect(async () => {
+const profiles = await db.collection("profiles")
+.get()
+.then(querySnapshot => {
+  return querySnapshot.docs.map(doc => doc.data());
+
+});
+    setProfiles(profiles);
+  }, []);
+  return (<div>
+    {profiles.map(p => <ProfileBox {...p}/>)}
+    </div>);
+};
+
+export default FacebookPage;

src/SignUp.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import Button from 'react-bootstrap/Button';
+import Form from 'react-bootstrap/Form';
+import db from './firebase';
+import firebase from 'firebase';
+
+const SignUpPage = () => {
+  // Check if user is logged in.
+  // https://firebase.google.com/docs/auth/web/manage-users
+  const [user, setUser] = React.useState(firebase.auth().currentUser);
+  const [profile, setProfile] = React.useState('');
+  const [city, setCity] = React.useState('');
+
+  const handleGoogleAuthClick = () => {
+    const provider = new firebase.auth.GoogleAuthProvider();
+    firebase.auth().signInWithPopup(provider).then(function(result) {
+      const token = result.credential.accessToken;
+      const user = result.user;
+      setUser(user);
+    }).catch(function(error) {
+      if (error) {
+        alert(JSON.stringify(error));
+      }
+    });
+  }
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    await db.collection("profiles").doc(user.uid).set({
+      userId: user.uid,
+      name: user.displayName,
+      profile: profile,
+      city: city,
+      imageUrl: user.photoURL,
+    });
+
+    alert('Submitted!');
+  };
+
+  return (<div>
+<Form>
+  <Form.Group>
+    {!user && (<div onClick={handleGoogleAuthClick} style={{cursor: 'pointer'}}>
+    <img src={require('./google-signin.png')} />
+    </div>
+      )}
+    {user && (<div>You're logged in as {user.email}</div>)}
+      <Form.Control placeholder="Profile" onChange={(e) => setProfile(e.target.value)}/>
+      <Form.Control placeholder="City" onChange={(e) => setCity(e.target.value)}/>
+    <Button variant="primary" type="submit" onClick={handleSubmit}>
+      Submit
+    </Button>
+  </Form.Group>
+</Form>
+    </div>);
+};
+
+export default SignUpPage;

src/firebase.js

@@ -0,0 +1,18 @@
+import firebase from 'firebase';
+
+// Your web app's Firebase configuration
+var firebaseConfig = {
+  apiKey: "AIzaSyDPFwcO5W4cSdCIBU4zYSWd2Hsi52CLNQs",
+  authDomain: "recodedfacebook.firebaseapp.com",
+  databaseURL: "https://recodedfacebook.firebaseio.com",
+  projectId: "recodedfacebook",
+  storageBucket: "recodedfacebook.appspot.com",
+  messagingSenderId: "792119652578",
+  appId: "1:792119652578:web:6f456d9c56b5bf6c876ebb"
+};
+
+// Initialize Firebase
+const firebaseApp = firebase.initializeApp(firebaseConfig);
+const db = firebaseApp.firestore();
+
+export default db;