defining more components, beginning to lay out site structure

client/package-lock.json

@@ -9,7 +9,8 @@
       "version": "0.0.0",
       "dependencies": {
         "react": "^18.0.0",
-        "react-dom": "^18.0.0"
+        "react-dom": "^18.0.0",
+        "react-router-dom": "^6.3.0"
       },
       "devDependencies": {
         "@types/react": "^18.0.0",
@@ -376,6 +377,17 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.18.3",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.3.tgz",
+      "integrity": "sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==",
+      "dependencies": {
+        "regenerator-runtime": "^0.13.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.7.tgz",
@@ -1097,6 +1109,14 @@
         "node": ">=4"
       }
     },
+    "node_modules/history": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
+      "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
     "node_modules/is-core-module": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.9.0.tgz",
@@ -1253,6 +1273,35 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
+      "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
+      "dependencies": {
+        "history": "^5.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
+      "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
+      "dependencies": {
+        "history": "^5.2.0",
+        "react-router": "6.3.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
+    "node_modules/regenerator-runtime": {
+      "version": "0.13.9",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+    },
     "node_modules/resolve": {
       "version": "1.22.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz",
@@ -1658,6 +1707,14 @@
         "@babel/helper-plugin-utils": "^7.16.7"
       }
     },
+    "@babel/runtime": {
+      "version": "7.18.3",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.3.tgz",
+      "integrity": "sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==",
+      "requires": {
+        "regenerator-runtime": "^0.13.4"
+      }
+    },
     "@babel/template": {
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.7.tgz",
@@ -2103,6 +2160,14 @@
       "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
       "dev": true
     },
+    "history": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
+      "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
+      "requires": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
     "is-core-module": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.9.0.tgz",
@@ -2207,6 +2272,28 @@
       "integrity": "sha512-XP8A9BT0CpRBD+NYLLeIhld/RqG9+gktUjW1FkE+Vm7OCinbG1SshcK5tb9ls4kzvjZr9mOQc7HYgBngEyPAXg==",
       "dev": true
     },
+    "react-router": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
+      "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
+      "requires": {
+        "history": "^5.2.0"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
+      "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
+      "requires": {
+        "history": "^5.2.0",
+        "react-router": "6.3.0"
+      }
+    },
+    "regenerator-runtime": {
+      "version": "0.13.9",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+    },
     "resolve": {
       "version": "1.22.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz",

client/package.json

@@ -9,7 +9,8 @@
   },
   "dependencies": {
     "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "react-router-dom": "^6.3.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",
@@ -18,4 +19,4 @@
     "typescript": "^4.6.3",
     "vite": "^2.9.9"
   }
-}
+}

client/src/App.css

@@ -1,14 +1,60 @@
-.App {
+/* todo: define and import fonts */
-  background-color: #282c34;
+
-  min-height: 100vh;
+/* universal styles */
+.page {
   display: flex;
+  position: relative;
+  top: 5rem;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  z-index: 7;
-  font-size: calc(10px + 2vmin);
-  color: white;
 }
 
 button {
-  font-size: calc(10px + 2vmin);
+  background-color: green;
 }
+
+/* navbar styles */
+nav {
+  display: flex;
+  position: absolute;
+  background-color: rgb(12, 6, 6);
+  color: white;
+  top: 0;
+  justify-content: space-around;
+  width: 100%;
+  height: auto;
+  border-bottom: 1px solid white;
+  z-index: 9;
+}
+
+/* landing page styles */
+.landing > * {
+  display: flex;
+  flex-flow: column wrap;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  height: auto;
+  padding: 1.2rem;
+  margin-bottom: 5rem;
+}
+
+.landing header {
+  margin-top: 8rem;
+  width: 45vw;
+  background-color: gray;
+}
+
+.landing section {
+  width: 60vw;
+  background-color: gray;
+}
+
+.shop-buttons {
+  display: flex;
+  flex-flow: row nowrap;
+  width: 45vw;
+  background-color: gray;
+  justify-content: space-around;
+}

client/src/App.tsx

@@ -1,34 +1,22 @@
-import { useState } from 'react'
+import NavBar from './components/Navbar';
-import { getAllUsers, registerNewUser } from './util/apiUtils';
+import LandingPage from './components/LandingPage';
-import { userInfo } from './types/main';
+
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import './App.css'
+import LoginForm from './components/LoginForm';
+import Register from './components/Register';
 
 function App() {
-  const [response, setResponse] = useState<any>(undefined);
-
-  let newUser: userInfo = {
-    email: 'anotherperson@email.com',
-    name: "one more person",
-    password: "dumb_password"
-  }
-
   return (
-    <div className="App">
+    <BrowserRouter>
-      <h2>Server response:</h2>
+        <NavBar/>
-      <div>
-      {response && response.map((field: userInfo) => {
-        return (
-          <>
-          <p key={`${field.name}_name`}>{field.name}</p>
-          <p key={`${field.name}_email`}>{field.email}</p>
-          </>
-        )
-      })}
-      </div>
 
-      <button onClick={() => getAllUsers().then(res => setResponse(res))}>API call?</button>
+        <Routes>
-      <button onClick={() => registerNewUser(newUser).then(res => alert(res))}>Add sample user</button>
+          <Route path="/" element={<LandingPage/>} />
-    </div>
+          <Route path="/login" element={<LoginForm/>} />
+          <Route path="/register" element={<Register/>} />
+        </Routes>
+    </BrowserRouter>
   )
 }
 

client/src/components/LandingPage.tsx

@@ -0,0 +1,25 @@
+import Page from "./Page";
+
+function LandingPage() {
+    return (
+        <Page classes="landing">
+            <header>
+                <h1>Welcome to Mikayla's Mostly Useless Little Store!</h1>
+                <p>Thanks so much for visiting!</p>
+            </header>
+
+            <section className="site-description">
+                <p>This site was built as part of the curriculum for the Codecademy Full Stack Engineer career path. The listings you see on this site do correspond to
+                real life products, which can be purchased through a functioning payment system powered by Stripe. Personal data is rigorously encoded and
+                protected. Feel free to shoot me a message with any questions or comments about this project, and enjoy browsing!</p>
+            </section>
+
+            <div className="shop-buttons">
+                <button>SHOP ALL</button>
+                <button>SHOP BY...</button>
+            </div>
+        </Page>
+    )
+}
+
+export default LandingPage;

client/src/components/LoginForm.tsx

@@ -0,0 +1,11 @@
+import Page from "./Page";
+
+function LoginForm() {
+    return (
+        <Page>
+            <h1>Log in here!</h1>
+        </Page>
+    )
+}
+
+export default LoginForm;

client/src/components/Navbar.tsx

@@ -0,0 +1,15 @@
+import { useState } from "react";
+
+function NavBar() {
+    const [loggedIn, setLoggedIn] = useState(false);
+
+    return (
+        <nav>
+            <p>Logo</p>
+            <p>Search bar</p>
+            {loggedIn ? <p>Profile info</p> : <p>Log In</p>}
+        </nav>
+    )
+}
+
+export default NavBar;

client/src/components/Page.tsx

@@ -0,0 +1,9 @@
+function Page({ children, classes }: any) {
+    return (
+        <section className={`page ${classes}`}>
+            {children}
+        </section>
+    )
+}
+
+export default Page;

client/src/components/Register.tsx

@@ -0,0 +1,11 @@
+import Page from "./Page";
+
+function Register() {
+    return (
+        <Page>
+            <h1>Enter your information to register:</h1>
+        </Page>
+    );
+}
+
+export default Register;