add basic login, signup, navbar

frontend/package-lock.json

@@ -10,7 +10,7 @@
       "dependencies": {
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-router": "^6.22.3"
+        "react-router-dom": "^6.22.3"
       },
       "devDependencies": {
         "@types/react": "^18.2.64",
@@ -2396,6 +2396,22 @@
         "react": ">=16.8"
       }
     },
+    "node_modules/react-router-dom": {
+      "version": "6.22.3",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz",
+      "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==",
+      "dependencies": {
+        "@remix-run/router": "1.15.3",
+        "react-router": "6.22.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",

frontend/package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router": "^6.22.3"
+    "react-router-dom": "^6.22.3"
   },
   "devDependencies": {
     "@types/react": "^18.2.64",

frontend/src/App.tsx

@@ -1,12 +1,21 @@
-import './App.css'
+import "./styles/App.css";
+import { Link } from 'react-router-dom';
 
-function App() {
+export default function App() {
 
   return (
     <>
+      <Navbar />
       <h1>PeerNotes</h1>
     </>
   )
 }
 
-export default App
+function Navbar() {
+  return (
+    <nav>
+      <Link to="/">Home</Link>
+      <Link to="/logout">Logout</Link>
+    </nav>
+  );
+}

frontend/src/assets/screens/Login.tsx

@@ -1,7 +0,0 @@
-export default function Login() {
-    return (
-        <div>
-            <h1>Login</h1>
-        </div>
-    );
-}

frontend/src/assets/screens/Signup.tsx

@@ -1,7 +0,0 @@
-export default function Signup() {
-    return (
-        <div>
-            <h1>Signup</h1>
-        </div>
-    );
-}

frontend/src/main.tsx

@@ -2,9 +2,33 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
 import './index.css'
+import {
+  createBrowserRouter,
+  RouterProvider,
+} from "react-router-dom";
+import Login from './screens/Login.tsx';
+import Signup from './screens/Signup.tsx';
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <App />,
+    children: [
+      // add more routes here
+    ]
+  },
+  {
+    path: "/login",
+    element: <Login />,
+  },
+  {
+    path: "/signup",
+    element: <Signup />,
+  },
+]);
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <RouterProvider router={router} />
   </React.StrictMode>,
 )

frontend/src/screens/Login.tsx

@@ -0,0 +1,19 @@
+import { Link } from "react-router-dom"
+import "../styles/Login.css"
+export default function Login() {
+    return (
+        <main>
+            <form>
+                <h1>Login</h1>
+                <div className="form-inputs">
+                    <label htmlFor="username">Username</label>
+                    <input type="text" name="username" id="username" />
+                    <label htmlFor="password">Password</label>
+                    <input type="password" name="password" id="password" />
+                </div>
+                <button>Login</button>
+                <p>or <Link to="/signup">Sign up</Link></p>
+            </form>
+        </main>
+    );
+}

frontend/src/screens/Signup.tsx

@@ -0,0 +1,19 @@
+import { Link } from "react-router-dom";
+import "../styles/Login.css"
+export default function Signup() {
+    return (
+        <main>
+            <form>
+                <h1>Sign Up</h1>
+                <div className="form-inputs">
+                    <label htmlFor="username">Username</label>
+                    <input type="text" name="username" id="username" />
+                    <label htmlFor="password">Password</label>
+                    <input type="password" name="password" id="password" />
+                </div>  
+                <button>Sign up</button>
+                <p>or <Link to="/login">Login</Link></p>
+            </form>
+        </main>
+    );
+}

frontend/src/styles/App.css

@@ -0,0 +1,9 @@
+nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 2rem;
+    border: 3px solid #f1f1f1;
+    border-radius: 5px;
+    color: white;
+}

frontend/src/styles/Login.css

@@ -0,0 +1,20 @@
+form {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 0.5rem;
+}
+main {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+h1 {
+    text-align: center;
+}
+
+.form-inputs {
+    display: flex;
+    flex-direction: column;
+}