3 hour MVP finished with initial functionality

package.json

@@ -3,10 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@chakra-ui/core": "^0.4.1",
-    "@emotion/core": "^10.0.22",
-    "@emotion/styled": "^10.0.23",
-    "emotion-theming": "^10.0.19",
+    "@chakra-ui/icons": "^1.0.2",
+    "@chakra-ui/react": "^1.0.4",
+    "@emotion/react": "^11.1.4",
+    "@emotion/styled": "^11.0.0",
+    "framer-motion": "^3.1.1",
     "localstoragedb": "^2.3.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",

src/App.js

@@ -1,33 +1,40 @@
-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 LoginWrapper from "./auth/LoginWrapper";
+import LogoutPage from "./auth/LogoutPage";
+import Frame from "./ui/Frame";
+import Explore from "./pages/Explore";
+import Matches from "./pages/Matches";
+import Profile from "./pages/Profile";
+import { ChakraProvider } from "@chakra-ui/react";
 
-function App() {
+const App = () => {
   return (
-    <Router>
-      <ThemeProvider theme={theme}>
-        <CSSReset />
+    <ChakraProvider>
+      <Router>
         <LoginWrapper>
           {({ username, logout }) => (
             <Frame username={username}>
               <Switch>
                 <Route path="/logout">
                   <LogoutPage logout={logout} />
                 </Route>
-                <Route path="/">
-                  <Home username={username} />
+                <Route path="/explore">
+                  <Explore username={username} />
+                </Route>
+                <Route path="/matches">
+                  <Matches username={username} />
+                </Route>
+                <Route path="/profile">
+                  <Profile username={username} />
                 </Route>
               </Switch>
             </Frame>
           )}
         </LoginWrapper>
-      </ThemeProvider>
-    </Router>
-  )
-}
+      </Router>
+    </ChakraProvider>
+  );
+};
 
-export default App
+export default App;

src/auth/LoginWrapper.js

@@ -1,43 +1,43 @@
-import React from "react"
+import React from "react";
 import {
   Box,
   Flex,
-  Text,
   Input,
   Button,
   FormControl,
   FormLabel,
-  FormHelperText
-} from "@chakra-ui/core"
-import Header from "../ui/Header"
+  FormHelperText,
+} from "@chakra-ui/react";
+import Header from "../ui/Header";
+import { Redirect } from "react-router-dom";
 
 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 })
+      return this.props.children({ username, logout: this.logout });
     }
 
     //  Otherwise, show a login form.
     return (
       <Flex direction="column" align="center">
+        <Redirect to="/explore"></Redirect>
         <Box width={"100%"} maxWidth={"1000px"} pl={2} pr={2}>
           <Header />
-
           <Box
             maxW="700px"
             borderWidth="1px"
@@ -47,11 +47,9 @@ export default class LoginWrapper extends React.Component {
             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 +59,6 @@ export default class LoginWrapper extends React.Component {
           </Box>
         </Box>
       </Flex>
-    )
+    );
   }
 }

src/data/database.js

@@ -1,30 +1,57 @@
-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 = "userData_7";
 /////////////////////////////////////////////////
 
 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"]);
+if (!db.tableExists("users")) {
+  // create the "posts" table
+  db.createTable("users", ["username", "bio", "contact", "skills"]);
+
+  // insert some data
+  db.insert("users", {
+    username: "kristofkovacs",
+    bio: "I'm a really great guy, and I'm really innovative",
+    contact: "kristof@kovacsegri.com",
+    skills: ["programming", "administrative"],
+  });
+  db.insert("users", {
+    username: "billgates",
+    bio:
+      "Ex-Microsoft CEO. Looking for a great designer to join Melinda and myself in the board of the foundation.",
+    contact: "contact@gates.com",
+    skills: ["programming", "communication"],
+  });
+  db.insert("users", {
+    username: "jonyive",
+    bio:
+      "MiniAluminiumalism is the future. Just quit Apple, looking for a new venture.",
+    contact: "jony@email.com",
+    skills: ["UX/UI", "design"],
+  });
+  db.insert("users", {
+    username: "simonsinek",
+    bio: "Always start with the why.",
+    contact: "simon@sinek.com",
+    skills: ["marketing", "sales", "communication"],
+  });
+  // commit the database to localStorage
+  // all create/drop/insert/update/delete operations should be committed
+  db.commit();
+}
 
-	// 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", ["from", "to", "status"]);
 
-	// commit the database to localStorage
-	// all create/drop/insert/update/delete operations should be committed
-	db.commit();
+  db.commit();
 }
 
-export default db
+export default db;