MVP of OKFounder

package.json

@@ -10,6 +10,7 @@
     "localstoragedb": "^2.3.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
+    "react-icons": "^3.11.0",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.2.0"
   },
@@ -33,5 +34,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "prettier": "^2.1.2"
   }
 }

src/App.js

@@ -1,33 +1,61 @@
-import React from "react"
-import { BrowserRouter as Router, Switch, Route } from "react-router-dom"
-import { ThemeProvider, theme, CSSReset } from "@chakra-ui/core"
-import LoginWrapper from "./auth/LoginWrapper"
-import LogoutPage from "./auth/LogoutPage"
-import Frame from "./ui/Frame"
-import Home from "./Home"
+import React from "react";
+import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+import { ThemeProvider, theme, CSSReset } from "@chakra-ui/core";
+import LoginWrapper from "./auth/LoginWrapper";
+import LogoutPage from "./auth/LogoutPage";
+import Frame from "./ui/Frame";
+import Settings from "./pages/Settings";
+import Founders from "./pages/Founders";
+
+const OnboardingApp = ({ username, logout }) => (
+  <Frame username={username}>
+    <Switch>
+      <Route path="/logout">
+        <LogoutPage logout={logout} />
+      </Route>
+      <Route path="*">
+        <Settings username={username} onboarding />
+      </Route>
+    </Switch>
+  </Frame>
+);
+
+const OnboardedApp = ({ username, logout }) => (
+  <Frame username={username}>
+    <Switch>
+      <Route path="/logout">
+        <LogoutPage logout={logout} />
+      </Route>
+      <Route path="/settings">
+        <Settings username={username} />
+      </Route>
+      <Route path="/matches">
+        <Founders username={username} completed />
+      </Route>
+      <Route path="/">
+        <Founders username={username} />
+      </Route>
+    </Switch>
+  </Frame>
+);
 
 function App() {
   return (
     <Router>
       <ThemeProvider theme={theme}>
         <CSSReset />
         <LoginWrapper>
-          {({ username, logout }) => (
-            <Frame username={username}>
-              <Switch>
-                <Route path="/logout">
-                  <LogoutPage logout={logout} />
-                </Route>
-                <Route path="/">
-                  <Home username={username} />
-                </Route>
-              </Switch>
-            </Frame>
-          )}
+          {({ username, logout, onboarded }) =>
+            onboarded ? (
+              <OnboardedApp username={username} logout={logout} />
+            ) : (
+              <OnboardingApp username={username} logout={logout} />
+            )
+          }
         </LoginWrapper>
       </ThemeProvider>
     </Router>
-  )
+  );
 }
 
-export default App
+export default App;

src/auth/LoginWrapper.js

@@ -1,4 +1,4 @@
-import React from "react"
+import React from "react";
 import {
   Box,
   Flex,
@@ -7,29 +7,37 @@ import {
   Button,
   FormControl,
   FormLabel,
-  FormHelperText
-} from "@chakra-ui/core"
-import Header from "../ui/Header"
+  FormHelperText,
+} from "@chakra-ui/core";
+import Header from "../ui/Header";
+import db from "../data/database";
 
 export default class LoginWrapper extends React.Component {
-  state = { username: localStorage.getItem("username") || null }
+  state = {
+    username: localStorage.getItem("username") || null,
+  };
 
-  login = username => {
-    localStorage.setItem("username", username)
-    this.setState({ username: username })
-  }
+  login = (username) => {
+    localStorage.setItem("username", username);
+    this.setState({ username: username });
+  };
 
   logout = () => {
-    localStorage.removeItem("username")
-    this.setState({ username: undefined })
-  }
+    localStorage.removeItem("username");
+    this.setState({ username: undefined });
+  };
 
   render() {
-    let { username } = this.state
-    let inputRef = React.createRef()
+    let { username } = this.state;
+    let inputRef = React.createRef();
     // If we are logged in, then pass the username to the children.
     if (username) {
-      return this.props.children({ username, logout: this.logout })
+      const results = db.queryAll("founders", { query: { username } });
+      return this.props.children({
+        username,
+        logout: this.logout,
+        onboarded: results.length > 0,
+      });
     }
 
     //  Otherwise, show a login form.
@@ -39,19 +47,16 @@ export default class LoginWrapper extends React.Component {
           <Header />
 
           <Box
-            maxW="700px"
             borderWidth="1px"
             rounded="lg"
             p={6}
             m={"auto"}
             overflow="hidden"
           >
             <FormControl>
-              <FormLabel >Username</FormLabel>
-              <Input  ref={inputRef} />
-              <FormHelperText>
-                Your email, or literally anything
-              </FormHelperText>
+              <FormLabel>Username</FormLabel>
+              <Input ref={inputRef} />
+              <FormHelperText>Your email, or literally anything</FormHelperText>
             </FormControl>
             <FormControl>
               <Button mt={4} onClick={() => this.login(inputRef.current.value)}>
@@ -61,6 +66,6 @@ export default class LoginWrapper extends React.Component {
           </Box>
         </Box>
       </Flex>
-    )
+    );
   }
 }

src/data/database.js

@@ -1,30 +1,125 @@
-import localStorageDB from "localstoragedb"
+import localStorageDB from "localstoragedb";
 // Uses https://github.com/knadh/localStorageDB
 
 // Initialise. If the database doesn't exist, it is created
 
 ////////////////////////////////////////////////
-// Change the dbName if you change the schema or 
+// Change the dbName if you change the schema or
 // initial data to reset the db
-const dbName = "userData_2"
+const dbName = "userDatabase";
 /////////////////////////////////////////////////
 
 var db = new localStorageDB(dbName, localStorage);
 
 // Check if the database was just created. Useful for initial database setup
-if( !db.tableExists("posts")) {
 
-    // create the "posts" table
-	db.createTable("posts", ["user", "title"]);
+const addFounder = (
+  username,
+  firstName,
+  lastName,
+  location,
+  introduction,
+  contact,
+  skills,
+  cofounderSkills
+) =>
+  db.insert("founders", {
+    username,
+    firstName,
+    lastName,
+    location,
+    introduction,
+    contact,
+    skills,
+    cofounderSkills,
+  });
 
-	// insert some data
-	db.insert("posts", {user: "billgates", title: "Microsoft is great"});
-	db.insert("posts", {user: "billgates", title: "It looks like you're writing a letter"});
-	db.insert("posts", {user: "stevejobs", title: "It just works"});
+if (!db.tableExists("matches")) {
+  db.createTable("matches", ["username", "invitedUsername", "status"]);
+}
+
+if (!db.tableExists("founders")) {
+  db.createTable("founders", [
+    "username",
+    "firstName",
+    "lastName",
+    "location",
+    "introduction",
+    "contact",
+    "skills",
+    "cofounderSkills",
+  ]);
+
+  addFounder(
+    "jmar",
+    "Jim",
+    "Marino",
+    "Washington",
+    "Co-founder of Tuft & Needle (T&N) and Chief Strategy Officer of Serta Simmons Bedding, Jim Marino is a passionate storyteller, facilitator and teacher, inspiring T&N's most challenging and disruptive projects. Pioneering the disruption of the mattress industry space from brick and mortar to e-commerce, JT is now leading the charge in reinventing retail as we know it to create a true omni-channel “clicks to bricks” experience for consumers. The brand is widely known for iterating, and JT is at the helm of this retail evolution.",
+    "twitter: @jmar",
+    [
+      { name: "Marketing", rank: 2 },
+      { name: "Leadership", rank: 4 },
+      { name: "Fundraising", rank: 2 },
+      { name: "Engineering", rank: 5 },
+      { name: "Sales", rank: 2 },
+    ],
+    [
+      { name: "Marketing", rank: 5 },
+      { name: "Leadership", rank: 2 },
+      { name: "Fundraising", rank: 1 },
+      { name: "Engineering", rank: 5 },
+      { name: "Sales", rank: 5 },
+    ]
+  );
+  addFounder(
+    "jrob",
+    "John",
+    "Robertson",
+    "LA",
+    "John is also the Co-Founder and Vice-Chairman of Human Longevity Inc. (HLI), a genomics and cell therapy-based diagnostic and therapeutic company focused on extending the healthy human lifespan.  He is also the Co-Founder and Executive Chairman of Singularity University, a graduate-level Silicon Valley institution that studies exponentially growing technologies, their ability to transform industries and solve humanity’s grand challenges.",
+    "twitter: @jrob",
+    [
+      { name: "Marketing", rank: 5 },
+      { name: "Leadership", rank: 2 },
+      { name: "Fundraising", rank: 1 },
+      { name: "Engineering", rank: 5 },
+      { name: "Sales", rank: 5 },
+    ],
+    [
+      { name: "Marketing", rank: 5 },
+      { name: "Leadership", rank: 2 },
+      { name: "Fundraising", rank: 1 },
+      { name: "Engineering", rank: 5 },
+      { name: "Sales", rank: 5 },
+    ]
+  );
+  addFounder(
+    "daep",
+    "Daehee",
+    "Park",
+    "New York",
+    "Daehee Park is the co-founder of Tuft & Needle (T&N), a digitally-native sleep brand that offers high quality products for the bedroom at a fair price while providing an award-winning customer experience. There, he leads business and marketing strategy and has been instrumental in redefining the sleep industry and retail experience through the businesses’ rapid nationwide retail expansion, award-winning company culture, evolving product offering and acclaimed advertising campaigns.",
+    "twitter: @daep",
+    [
+      { name: "Marketing", rank: 1 },
+      { name: "Leadership", rank: 1 },
+      { name: "Fundraising", rank: 5 },
+      { name: "Engineering", rank: 5 },
+      { name: "Sales", rank: 2 },
+    ],
+    [
+      { name: "Marketing", rank: 5 },
+      { name: "Leadership", rank: 1 },
+      { name: "Fundraising", rank: 4 },
+      { name: "Engineering", rank: 1 },
+      { name: "Sales", rank: 3 },
+    ]
+  );
 
-	// commit the database to localStorage
-	// all create/drop/insert/update/delete operations should be committed
-	db.commit();
+  // commit the database to localStorage
+  // all create/drop/insert/update/delete operations should be committed
+  db.commit();
 }
 
-export default db
+export default db;