Bump websocket-extensions from 0.1.3 to 0.1.4

.firebase/hosting.YnVpbGQ.cache

@@ -0,0 +1,21 @@
+404.html,1591729203526,05cbc6f94d7a69ce2e29646eab13be2c884e61ba93e3094df5028866876d18b3
+asset-manifest.json,1591729240525,375bfd1dabd784f4a13945e3f41101293b2a23e7f65c6548d2df5e5251c8b15b
+favicon.ico,1591729203527,a08fa4488c3ecef62d9effd03b3a989929bdcbecf5e905941f9034a15bd3dba3
+index.html,1591729240524,99ef266173b25f3241a78716fae1f2ffd37ecb11d8c32d81bf78659293a7d048
+logo192.png,1591729203527,caff018b7f1e8fd481eb1c50d75b0ef236bcd5078b1d15c8bb348453fee30293
+logo512.png,1591729203528,191fc21360b4ccfb1cda11a1efb97f489ed22672ca83f4064316802bbfdd750e
+manifest.json,1591729203529,341d52628782f8ac9290bbfc43298afccb47b7cbfcee146ae30cf0f46bc30900
+precache-manifest.7839cc18c10e8c3591e75a65609eb4bc.js,1591729240525,1624856277c03f07ad26d42704c830a2ba0b84cf87454009c38bbf93c83de21f
+robots.txt,1591729203529,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2
+service-worker.js,1591729240525,b3dc32d3f7a26a8d3c1ecba5d56e0b7e6b05cdcb9b992f11b0ba15be094c7923
+static/css/2.af3c1da9.chunk.css,1591729240550,f9dcfb4073c4b5cbf7ac456e9f2807330940f46564bedf95b740ab332e5e0677
+static/css/2.af3c1da9.chunk.css.map,1591729240551,0bf5aca4069b4729e2fb70d96efbcf889590a783908f4be5ce6ed1e406660437
+static/css/main.5ecd60fb.chunk.css,1591729240525,5573c72369cf5cd9c63d5779a485c5448d9d1285476a0b8938df3f9680fc645f
+static/css/main.5ecd60fb.chunk.css.map,1591729240550,685a1f6af79f427c9e8f633301e0ccd5fb6af4653c3bfe6d79346fb335a6c8fa
+static/js/2.3ca0d53c.chunk.js,1591729240550,0aa36d44ac71bb268491aa059e906faaec709549277959f38e862748bdf3e715
+static/js/2.3ca0d53c.chunk.js.LICENSE.txt,1591729240550,9fa87383de9ffef235eaf91a4b3a1685bd65da98fb669be6ad340b404d6b9927
+static/js/2.3ca0d53c.chunk.js.map,1591729240552,73eedd9f358ddb76c86b05dbc96047f68fc1f12a6f945463c6e682d97d67cb6c
+static/js/main.02fadd89.chunk.js,1591729240550,a1b2bdb5759bb27a19237acdc4dc8230e8fb3904ca2f5247c15104df9e33fac1
+static/js/main.02fadd89.chunk.js.map,1591729240552,2a1d7d327734c76192f62154094da07e1b429cde00f93807040742adb21a3e77
+static/js/runtime-main.fdfe72f8.js,1591729240529,5c5f751272ac4e54c80a08adc06385bc2ba84e80fcc2b49e47b07af92d09a660
+static/js/runtime-main.fdfe72f8.js.map,1591729240551,63cd1802a480a06510fd85e71314e773039f047eebe3096bee8ef345f68fcd9a

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "recodedfacebook"
+  }
+}

README.md

@@ -1,68 +1,77 @@
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+# Re:Coded Facebook
 
-## Available Scripts
+In this project, we will be writing the Re:Coded Facebook.
 
-In the project directory, you can run:
+It is composed of two parts:
 
-### `yarn start`
+1. A signup page (you write this)
+2. [A page to view the members](https://recodedfacebook.web.app/facebook) (I wrote this)
 
-Runs the app in the development mode.<br />
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+## Learning Goals
 
-The page will reload if you make edits.<br />
-You will also see any lint errors in the console.
+- Practice open-endedness and debugging
+- Learn to authenticate a user using Firebase Auth Google Account sign-in
+- Learn to use React Bootstrap (if you haven't already)
+- Generate billions of dollars (50-50 between me...and Ammar. We'll buy each of you a döner when we sell, to thank you for your hard work)
 
-### `yarn test`
+## Requirements
 
-Launches the test runner in the interactive watch mode.<br />
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+The signup page should work as follows.
 
-### `yarn build`
+### Technology
 
-Builds the app for production to the `build` folder.<br />
-It correctly bundles React in production mode and optimizes the build for the best performance.
+- Firebase
+- React Bootstrap
 
-The build is minified and the filenames include the hashes.<br />
-Your app is ready to be deployed!
+### Form fields
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+There are exactly four items.
 
-### `yarn eject`
+Please use React Bootstrap to implement this form. The package has been installed for you already. You are expected to read the React Bootstrap documentation (not to be confused with normal bootstrap).
 
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+1. A login with Google button.
+2. A text box for city
+3. A text box for profile ("I'm a really cool guy")
+4. A submit button
 
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+(2) and (3) are fairly straight forward. (1) and (4) are further explained below.
 
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+#### Google Button
 
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+- There is an image in the code directory for the Google Button. This image should be used as the button. You may want to review learn.co or look up how to use an image in React.
+- When clicked, it should use Firebase Auth in order to retrieve the information about this Google account. Some of this information will be used in a later step (see _Submit Button_). I'm being intentionally vague about the fields that you have to use; you will have to inspect the post-authentication output yourself.
 
-## Learn More
+### Submit Button
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+The Firebase Database, which only I can see, accepts the following fields.
 
-To learn React, check out the [React documentation](https://reactjs.org/).
+- `city`: The value in the "city" form field.
+- `name`: The value in the "user" form field.
+- `userId`: The unique user ID (available via Google. Please don't make a user ID yourself).
+- `imageUrl`: The Google profile picture of the image (available via Google).
 
-### Code Splitting
+Please read these field names very carefully, as Firebase will crash if you try to insert any fields that you didn't specify.
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
+### Optional
 
-### Analyzing the Bundle Size
+If the user is logged in with Google, hide the Google button and show their email.
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
+### Submission
 
-### Making a Progressive Web App
+Please create a REPL or a **private** Github repository. Please send Ammar and I the link at the beginning of the first working session.
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
+### Finishing Early
 
-### Advanced Configuration
+If you finish early, you will be given Github access to the super secret, proprietary, once-in-a-millenium implementation of the Re:Coded Facebook itself, and you may work as you desire on styling it (though if multiple people finish you will have to find a way to collaborate on features without stepping on each other).
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
+## Appendix
 
-### Deployment
+### The Rules
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
+As mentioned previously in class, the purpose of this exercise is to challenge our ability to tackle ambiguity and strengthen our individual coding skills. While certainly there is a feeling of satisfaction from completion, no one will judge you on whether you do or don't complete this activity over the many sessions that we do in class.
 
-### `yarn build` fails to minify
+I realize these are fairly strict rules, but you will have to give some trust to Ammar and I as your instructors when we emphasize the importance of being able to operate individually in coding.
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
+- **No asking a human questions on how to fix something.** The only exception is in the first class if you have some setup issues on your machine; for some reason the app is not running.
+- **No sharing of code.** No one should ever see your code (valuable intellectual property) unless both people have completed the activity.
+- **No sharing of approaches.** There should be no discussion about how someone did this or that, unless both people have completed the activity.

firebase.json

@@ -0,0 +1,14 @@
+{
+  "hosting": {
+    "rewrites": [ {
+      "source": "**",
+      "destination": "/index.html"
+     }],
+    "public": "build",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ]
+  }
+}

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": {

public/404.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Page Not Found</title>
+
+    <style media="screen">
+      body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
+      #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; }
+      #message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; }
+      #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
+      #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
+      #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
+      #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
+      #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
+      #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
+      @media (max-width: 600px) {
+        body, #message { margin-top: 0; background: white; box-shadow: none; }
+        body { border-top: 16px solid #ffa100; }
+      }
+    </style>
+  </head>
+  <body>
+    <div id="message">
+      <h2>404</h2>
+      <h1>Page Not Found</h1>
+      <p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
+      <h3>Why am I seeing this?</h3>
+      <p>This page was generated by the Firebase Command-Line Interface. To modify it, edit the <code>404.html</code> file in your project's configured <code>public</code> directory.</p>
+    </div>
+  </body>
+</html>

src/App.js

@@ -1,25 +1,20 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React from "react";
+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";
+import Container from "react-bootstrap/Container";
 
 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>
+    <Container>
+      <Router>
+        <Switch>
+          <Route path={"/signup"} component={SignUpPage} />
+          <Route path={"/facebook"} component={FacebookPage} />
+        </Switch>
+      </Router>
+    </Container>
   );
 }
 

src/Facebook.js

@@ -0,0 +1,39 @@
+import React from "react";
+import db from "./firebase";
+import Card from "react-bootstrap/Card";
+
+// These props are destructured from the Firebase field names.
+const ProfileBox = ({ city, imageUrl, name, profile, userId }) => {
+  return (
+    <Card style={{ width: "18rem" }}>
+      <Card.Img variant="top" src={imageUrl} />
+      <Card.Body>
+        <Card.Title>{name}</Card.Title>
+        <Card.Text>{profile}</Card.Text>
+        <Card.Text>{city}</Card.Text>
+      </Card.Body>
+    </Card>
+  );
+};
+
+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;