first commit

2024-05-21 14:13:25 +08:00
commit 88859a806a
36 changed files with 19806 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
--- a/README.md
+++ b/README.md
@@ -0,0 +1,70 @@
+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+
+The page will reload when you make changes.\
+You may also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can't go back!**
+
+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.
+
+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.
+
+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.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Code Splitting
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+
+### Analyzing the Bundle Size
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+
+### Making a Progressive Web App
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
+
+### Advanced Configuration
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+
+### Deployment
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+
+### `npm run build` fails to minify
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,63 @@
+{
+  "name": "example-react",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@mantine/core": "^7.9.0",
+    "@mantine/form": "^7.9.0",
+    "@mantine/hooks": "^7.9.0",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.6.8",
+    "moment": "^2.30.1",
+    "nanoid": "^5.0.7",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.51.4",
+    "react-router-dom": "^6.23.0",
+    "react-scripts": "5.0.1",
+    "recoil": "^0.7.7",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@types/axios": "^0.14.0",
+    "@types/react": "^18.3.2",
+    "@types/react-dom": "^18.3.0",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/recoil": "^0.0.9",
+    "source-map-loader": "^5.0.0",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.4.5"
+  },
+  "overrides": {
+    "react-scripts": {
+      "typescript": "^5"
+    }
+  }
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
--- a/public/logo192.png
+++ b/public/logo192.png
--- a/public/logo512.png
+++ b/public/logo512.png
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
--- a/public/robots.txt
+++ b/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
--- a/src/App.css
+++ b/src/App.css
@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -0,0 +1,147 @@
+import {
+  // RouterProvider,
+  Routes,
+  Route,
+  useNavigate,
+  // createBrowserRouter,
+  // redirect,
+} from "react-router-dom";
+
+import Posts from "./routes/Posts";
+import ErrorPage from "./routes/ErrorPage";
+import Profile from "./routes/Profile";
+import Login from "./routes/Login";
+import Root from "./routes/Root";
+import { useEffect, useRef, useState } from "react";
+import ProtectedRoute from "./components/ProtectedRoute";
+import { http } from "./middleware/axiosConfig";
+import { UserContext } from "./middleware/userContext";
+import { MantineProvider } from "@mantine/core";
+import { useRecoilState } from "recoil";
+import { userState } from "./states/userState";
+
+export default function App() {
+  //NEW-------------------
+  const navigate = useNavigate();
+  const [loading, setLoading] = useState(true);
+  // Keep track of if the user is logged in; initial value is based on the session storage
+  // useRef for its synchronous nature; errors when using useState
+  const loggedIn = useRef(
+    sessionStorage.getItem("loggedIn") == "true" || false
+  );
+
+  // Initial value is based on the session storage
+  //OLD--------------
+  // const [user, setUser] = useState(sessionStorage.getItem("user") || {})
+  //NEW------------------
+  const [user, setUser] = useRecoilState(userState);
+
+  // On mount, check if the user is logged in and update the user state based on the session storage
+  // useEffect(() => {
+  //   if (loggedIn.current) {
+  //     setUser(JSON.parse(sessionStorage.getItem("user")))
+  //   }
+  //   if (!loggedIn.current) {
+  //     setUser({})
+  //   }
+  // }, [])
+
+  // On successful login, update the user state, login status and session storage
+  const login = async () => {
+    try {
+      // Send a GET request to the /api/user route and retrieve the user
+      const res = await http.get("/api/user");
+      sessionStorage.setItem("loggedIn", true);
+      loggedIn.current = true;
+      sessionStorage.setItem("user", JSON.stringify(res.data));
+      setUser(res.data);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  // Refresh the user state and session storage
+  const refreshUser = async () => {
+    setLoading(true);
+    try {
+      // Send a GET request to the /api/user route and retrieve the user
+      const res = await http.get("/api/user");
+      setUser(res.data);
+      // sessionStorage.setItem("user", JSON.stringify(res.data))
+    } catch (error) {
+      console.error(error);
+      setUser(null);
+      navigate("/login");
+    }
+    setLoading(false);
+  };
+
+  // On logout, update the user state, login status and session storage
+  const logout = async () => {
+    try {
+      const res = await http.post("/api/logout");
+      sessionStorage.setItem("loggedIn", false);
+      loggedIn.current = false;
+      sessionStorage.setItem("user", JSON.stringify({}));
+      setUser(null);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  useEffect(() => {
+    refreshUser();
+  }, []);
+
+  // const router = createBrowserRouter([
+  //   {
+  //     // Main route
+  //     path: "/",
+  //     element: (
+  //       <ProtectedRoute
+  //         element={<Root logout={logout} />}
+  //         loggedIn={loggedIn.current}
+  //       />
+  //     ),
+  //     errorElement: <ErrorPage />,
+  //     // Nested routes for outlet
+  //     children: [
+  //       {
+  //         path: "posts",
+  //         element: <ProtectedRoute element={<Posts />} loggedIn={loggedIn.current} />,
+  //       },
+  //       {
+  //         path: "profile",
+  //         element: <ProtectedRoute element={<Profile />} loggedIn={loggedIn.current} />,
+  //       },
+  //     ],
+  //   },
+  //   {
+  //     path: "/login",
+  //     element: <Login onLogin={login} />,
+  //   },
+  // ]);
+
+  return (
+    // Provide the user and refreshUser function to the children routes
+    <MantineProvider>
+      {/* <UserContext.Provider value={[user, refreshUser]}> */}
+      {/* <RouterProvider router={router} /> */}
+      <Routes>
+        <Route element={<ProtectedRoute user={user} loading={loading} logout={logout} />}>
+          <Route
+            path="/profile"
+            element={<Profile refreshUser={refreshUser} />}
+          />
+          <Route path="/posts" element={<Posts />} />
+        </Route>
+        <Route
+          path="/login"
+          element={<Login onLogin={login} loading={loading} />}
+        />
+        <Route path="*" element={<ErrorPage />} />
+      </Routes>
+      {/* </UserContext.Provider> */}
+    </MantineProvider>
+  );
+}
--- a/src/App.test.js
+++ b/src/App.test.js
@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});
--- a/src/components/AddEditModal.tsx
+++ b/src/components/AddEditModal.tsx
@@ -0,0 +1,127 @@
+import { Alert, Button, Input, InputLabel, Modal } from "@mantine/core"
+import { useForm, SubmitHandler, Form } from "react-hook-form"
+import { http } from "../middleware/axiosConfig"
+import { useEffect, useState } from "react"
+
+interface Props {
+  opened: boolean
+  onClose: () => void
+  fetchPosts: () => void
+  fetchComment: () => void
+  modalMode: "Add Post" | "Edit Post" | "Edit Comment"
+  id?: string
+  content?: string
+}
+
+export default function AddEditModal({opened, onClose, fetchPosts, fetchComment, modalMode, id, content}: Props) {
+  const {
+    register,
+    resetField,
+    handleSubmit,
+    setValue,
+    formState: { errors },
+  } = useForm()
+
+  //NEW-------------
+  const [formMsg, setFormMsg] = useState(null)
+
+  //NEW-------------
+  useEffect(() => {
+    if (content && id) {
+      setValue("content", content)
+    } else {
+      setValue("content", "")
+    }
+    //added opened so it will always trigger this every open of the modal
+  }, [opened])
+
+  //OLD
+  // // When the user submits the form
+  // const onSubmit = (data) => {
+  //   // If the modal mode is Add Post
+  //   if (modalMode === "Add Post") {
+  //     // Send a POST request to the /api/posts route with the content in the request body
+  //     // Inserts a new post into the database
+  //     http.post("api/posts", data).then(() => {
+  //       onClose();
+  //       resetField("content");
+  //       // Refreshes the posts
+  //       fetchPosts();
+  //     });
+  //     // If the modal mode is Edit Post
+  //   } else if (modalMode === "Edit Post") {
+  //     // Send a PUT request to the /api/posts/:id route with the content in the request body
+  //     // Updates the post in the database
+  //     http.put(`api/posts/${id}`, data).then(() => {
+  //       onClose();
+  //       resetField("content");
+  //       // Refreshes the posts
+  //       fetchPosts();
+  //     });
+  //     // If the modal mode is Edit Comment
+  //   } else if (modalMode === "Edit Comment") {
+  //     // Send a PUT request to the /api/comments/:id route with the content in the request body
+  //     // Updates the comment in the database
+  //     http.put(`api/comments/${id}`, data).then(() => {
+  //       onClose();
+  //       resetField("content");
+  //       // Refreshes the comments
+  //       fetchComment();
+  //     });
+  //   }
+  // };
+  //-------------NEW
+  // When the user submits the form
+  const onSubmit = async (data) => {
+    setFormMsg(null)
+    try {
+      // If the modal mode is Add Post
+      if (modalMode === "Add Post") {
+        // Send a POST request to the /api/posts route with the content in the request body
+        // Inserts a new post into the database
+        await http.post("api/posts", data)
+        // If the modal mode is Edit Post
+      } else if (modalMode === "Edit Post") {
+        // Send a PUT request to the /api/posts/:id route with the content in the request body
+        // Updates the post in the database
+        await http.put(`api/posts/${id}`, data)
+        // If the modal mode is Edit Comment
+      } else if (modalMode === "Edit Comment") {
+        // Send a PUT request to the /api/comments/:id route with the content in the request body
+        // Updates the comment in the database
+        await http.put(`api/comments/${id}`, data)
+        fetchComment();
+      }
+
+      onClose()
+      resetField("content")
+      // Refreshes the posts
+      fetchPosts()
+    } catch (err) {
+      console.error(err)
+      if (err.response && err.response.data) {
+        const { error } = err.response.data
+        if (error) {
+          setFormMsg(error)
+        }
+      }
+    }
+  }
+  return (
+    <Modal opened={opened} onClose={onClose} title={modalMode}>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        {formMsg && <Alert color="red">{formMsg}</Alert>}
+        <InputLabel>Content</InputLabel>
+        <Input {...register("content")} />
+        {/* Submit button; changes based on modal mode */}
+        <Button type="submit">
+          {modalMode === "Add Post"
+            ? "Post"
+            : modalMode === "Edit Comment" || modalMode === "Edit Post"
+            ? "Edit"
+            : ""}
+        </Button>
+      </form>
+    </Modal>
+  )
+}
--- a/src/components/AuthenticationForm.jsx
+++ b/src/components/AuthenticationForm.jsx
@@ -0,0 +1,182 @@
+import {
+  Anchor,
+  Button,
+  Checkbox,
+  Divider,
+  Group,
+  Paper,
+  PasswordInput,
+  Space,
+  Stack,
+  Text,
+  TextInput,
+} from "@mantine/core";
+import { useToggle } from "@mantine/hooks";
+import { useForm } from "react-hook-form";
+import { http } from "../middleware/axiosConfig";
+import { useNavigate } from "react-router-dom";
+import { useEffect, useState } from "react";
+
+// The login/registration form component that allows users to either register or login
+// It can be toggled between login and registration
+export default function AuthenticationForm({ onLogin }) {
+  const {
+    register,
+    resetField,
+    handleSubmit,
+    watch,
+    formState: { errors },
+  } = useForm();
+
+  // Toggle between login and registration
+  const [type, toggle] = useToggle(["login", "register"]);
+  const [credsError, setCredsError] = useState(false);
+  const [regSuccessful, setRegSuccessful] = useState(false);
+
+  useEffect(() => {
+    getCsrfToken();
+  }, []);
+
+  const getCsrfToken = async () => {
+    await http.get("/sanctum/csrf-cookie");
+    console.log("SUCCESS")
+  }
+  // Called when the login/register button is clicked
+  const onSubmit = async (data) => {
+    if (type === "login") {
+      try {
+        setCredsError(false);
+        // Retrieve the CSRF token neccessary for authentication
+        // Causes a 419 error if not called
+        await http.get("/sanctum/csrf-cookie");
+        // Send a POST request to the /api/login route with the user's email and password in the request body
+        const res = await http.post("api/login", {
+          email: data.email,
+          password: data.password,
+        });
+        if (res.status === 200) {
+          // Call the onLogin function passed from the parent component
+          await onLogin();
+        }
+      } catch (error) {
+        if (error.response.status === 401) {
+          setCredsError(true);
+        }
+      }
+    } else {
+      try {
+        // Send a POST request to the /api/register route with the user's name, email and password in the request body
+        const res = await http.post("api/register", {
+          name: data.name,
+          email: data.email,
+          password: data.password,
+        });
+        if (res.status === 201) {
+          setRegSuccessful(true);
+        }
+      } catch (error) {
+        console.error(error);
+      }
+    }
+  };
+
+  return (
+    <Paper radius="md" p="xl" withBorder>
+      <Text size="lg" fw={500}>
+        Welcome to MeepMoop, please {type} to access the site
+      </Text>
+
+      <Space h="md" />
+
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <Stack>
+          {/* Input for name if registering */}
+          {type === "register" && (
+            <TextInput
+              required
+              label="Name"
+              placeholder="Your name"
+              {...register("name")}
+              radius="md"
+            />
+          )}
+          {/* Input for email */}
+          <TextInput
+            required
+            label="Email"
+            placeholder="hello@meepmoop.com"
+            // Must have @
+            {...register("email", { required: true, pattern: /^\S+@\S+$/i })}
+            radius="md"
+            error={errors.email ? "Please enter a valid email" : null}
+          />
+          {/* Input for password */}
+          {type === "login" ? (
+            <PasswordInput
+              required
+              label="Password"
+              placeholder="Your password"
+              // No pattern and no min required for login
+              {...register("password", { required: true })}
+              radius="md"
+              // Error message if password is not valid and on login mode
+              error={
+                type === "login" && errors.password
+                  ? "Please enter a valid password"
+                  : null
+              }
+            />
+          ) : (
+            <PasswordInput
+              required
+              label="Password"
+              placeholder="Your password"
+              // Min 8 characters, 1 letter and 1 number, no spaces, only $ and @ allowed
+              {...register("password", {
+                required: true,
+                min: 8,
+                pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d@$]{8,}$/i,
+              })}
+              radius="md"
+              // Error message if password is not valid and on register mode
+              error={
+                type === "register" && errors.password
+                  ? "Please enter a valid password: at least 8 characters, 1 letter and 1 number, no spaces, only $ and @ allowed"
+                  : null
+              }
+            />
+          )}
+        </Stack>
+
+        <Group justify="space-between" mt="xl">
+          {credsError && type === "login" && (
+            <Text ta="center" c="red">
+              Log in failed. Make sure your credentials are correct.
+            </Text>
+          )}
+          {regSuccessful && type === "register" && (
+            <Text ta="center" c="green">
+              Registration successful. Please log in.
+            </Text>
+          )
+
+          }
+          <Anchor
+            component="button"
+            type="button"
+            c="dimmed"
+            onClick={() => toggle()}
+            size="xs"
+          >
+            {type === "register"
+              ? "Already have an account? Login"
+              : "Don't have an account? Register"}
+          </Anchor>
+          <Button type="submit" radius="xl">
+            {type.toUpperCase()}
+          </Button>
+        </Group>
+      </form>
+    </Paper>
+  );
+}
--- a/src/components/Comment.jsx
+++ b/src/components/Comment.jsx
@@ -0,0 +1,44 @@
+import { Button, Group, Paper, Stack, Text, Title } from "@mantine/core"
+import moment from "moment"
+import { useContext } from "react"
+import { UserContext } from "../middleware/userContext"
+import { useRecoilValue } from "recoil"
+import { userState } from "../states/userState"
+
+export default function Comment({
+  author,
+  authorId,
+  content,
+  date,
+  onEditComment,
+  commentId,
+}) {
+  // Get the current user data from the UserContext -- used to prevent property drilling and re-fetching
+  // the user data from the database repeatedly
+  // const [user, refreshUser] = useContext(UserContext);
+  const user = useRecoilValue(userState)
+  const handleEditComment = () => {
+    onEditComment(commentId)
+  }
+  const formattedDate = moment(date).format("MMMM Do YYYY, h:mm:ss a")
+
+  return (
+    <div>
+      <Paper shadow="xs" p="xs">
+        <Stack gap={0}>
+          <Group>
+            <Title size="h6">{author}</Title>
+            <Text size="sm">{formattedDate}</Text>
+            {/* Only show the edit button if the user is the author of the comment */}
+            {user.id === authorId && (
+              <Button variant="transparent" onClick={() => handleEditComment()}>
+                Edit
+              </Button>
+            )}
+          </Group>
+          <Text>{content}</Text>
+        </Stack>
+      </Paper>
+    </div>
+  )
+}
--- a/src/components/FAB.jsx
+++ b/src/components/FAB.jsx
@@ -0,0 +1,12 @@
+import { ActionIcon, Affix } from "@mantine/core";
+
+// Floating Action Button component
+export default function FAB({ onClick }) {
+  return (
+    <Affix position={{ bottom: 40, right: 40 }}>
+      <ActionIcon color="blue" radius="xl" size={60} onClick={onClick}>
+        +
+      </ActionIcon>
+    </Affix>
+  );
+}
--- a/src/components/Post.jsx
+++ b/src/components/Post.jsx
@@ -0,0 +1,89 @@
+import {
+  Stack,
+  Title,
+  Text,
+  Paper,
+  Group,
+  Button,
+  Input,
+  InputLabel,
+} from "@mantine/core"
+import { useForm } from "react-hook-form"
+import moment from "moment"
+import { http } from "../middleware/axiosConfig"
+import { useContext } from "react"
+import { UserContext } from "../middleware/userContext"
+import { useRecoilValue } from "recoil"
+import { userState } from "../states/userState"
+
+export default function Post({
+  author,
+  authorId,
+  content,
+  date,
+  postId,
+  onEditPost,
+  fetchComments,
+  children,
+}) {
+  const {
+    register,
+    resetField,
+    handleSubmit,
+    watch,
+    formState: { errors },
+  } = useForm()
+
+  // Get the current user data from the UserContext -- used to prevent property drilling and re-fetching
+  // the user data from the database repeatedly
+  // const [user, refreshUser] = useContext(UserContext);
+  const user = useRecoilValue(userState)
+
+  // Format the date to a more readable format
+  const formattedDate = moment(date).format("MMMM Do YYYY, h:mm:ss a")
+
+  // Called when the user submits the comment
+  const onSubmit = async (data) => {
+    try {
+      // Send a POST request to the /api/posts/:postId/comments route with the content in the request body
+      // Inserts a new comment into the database
+      await http.post(`api/posts/${postId}/comments`, data)
+      resetField("content")
+      // Refreshes the comments
+      fetchComments()
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  const handleEditPost = () => {
+    onEditPost(postId)
+  }
+
+  return (
+    <div>
+      <Paper shadow="xs" p="xs">
+        <Stack gap={0}>
+          <Group>
+            <Title size="h6">{author}</Title>
+            <Text size="sm">{formattedDate}</Text>
+            {/* Only show the edit button if the current user is the author of the post */}
+            {user.id === authorId && (
+              <Button variant="transparent" onClick={() => handleEditPost()}>
+                Edit
+              </Button>
+            )}
+          </Group>
+          <Text>{content}</Text>
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <InputLabel>Comments</InputLabel>
+            <Input {...register("content")} />
+            <Button type="submit">Comment</Button>
+            {/* Where comments go */}
+            {children}
+          </form>
+        </Stack>
+      </Paper>
+    </div>
+  )
+}
--- a/src/components/PostSkeleton.jsx
+++ b/src/components/PostSkeleton.jsx
@@ -0,0 +1,20 @@
+import { Stack, Skeleton, Paper, Group } from "@mantine/core";
+
+export default function PostSkeleton({ loading }) {
+  if (!loading) return null;
+
+  return (
+    <Paper shadow="xs" p="xs" mb="md">
+      <Stack gap={3}>
+        <Group mb={5}>
+          <Skeleton height={10} width="20%" radius={"xl"} />
+          <Skeleton height={10} width="30%" radius={"xl"} />
+          <Skeleton height={10} width="10%" radius={"xl"} />
+        </Group>
+        <Skeleton height={10} width="100%" radius={"xl"} />
+        <Skeleton height={10} width="100%" radius={"xl"} />
+        <Skeleton height={10} width="100%" radius={"xl"} />
+      </Stack>
+    </Paper>
+  );
+}
--- a/src/components/ProtectedRoute.jsx
+++ b/src/components/ProtectedRoute.jsx
@@ -0,0 +1,31 @@
+import { Navigate, Outlet } from "react-router-dom"
+
+// A component that only displays the element/route if the user is logged in
+// else, redirects to the login page
+// export default function ProtectedRoute({ element, loggedIn }) {
+//   console.log("PROTECTED ROUTE: " + loggedIn);
+//   if (loggedIn === true) {
+//     return element;
+//   } else {
+//     return <Navigate to="/login" />;
+//   }
+// }
+
+import React from "react"
+import Root from "../routes/Root"
+
+export default function ProtectedRoute({ user, loading, logout }) {
+  return (
+    <>
+      {!loading ? (
+        user ? (
+          <Root logout={logout} />
+        ) : (
+          <Navigate to="/login" />
+        )
+      ) : (
+        <div>loading....</div>
+      )}
+    </>
+  )
+}
--- a/src/index.css
+++ b/src/index.css
@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
--- a/src/index.js
+++ b/src/index.js
@@ -0,0 +1,25 @@
+import * as React from "react"
+import ReactDOM from "react-dom/client"
+import "./index.css"
+import reportWebVitals from "./reportWebVitals"
+import { MantineProvider } from "@mantine/core"
+import "@mantine/core/styles.css"
+
+import App from "./App"
+import { BrowserRouter } from "react-router-dom"
+import { RecoilRoot } from "recoil"
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <RecoilRoot>
+        <App />
+      </RecoilRoot>
+    </BrowserRouter>
+  </React.StrictMode>
+)
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals()
--- a/src/logo.svg
+++ b/src/logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
--- a/src/middleware/axiosConfig.js
+++ b/src/middleware/axiosConfig.js
@@ -0,0 +1,7 @@
+import axios from "axios"
+
+export const http = axios.create({
+  baseURL: "http://172.17.20.46:3001",
+  withCredentials: true,
+  withXSRFToken: true,
+})
--- a/src/middleware/userContext.js
+++ b/src/middleware/userContext.js
@@ -0,0 +1,3 @@
+import { createContext } from "react";
+
+export const UserContext = createContext();
--- a/src/reportWebVitals.js
+++ b/src/reportWebVitals.js
@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;
--- a/src/routes/ErrorPage.jsx
+++ b/src/routes/ErrorPage.jsx
@@ -0,0 +1,14 @@
+// import { useRouteError } from "react-router-dom";
+
+export default function ErrorPage() {
+  // const error = useRouteError();
+  // console.error(error);
+
+  return (
+    <div id="error-page">
+      <h1>Oops!</h1>
+      <p>Sorry, an unexpected error has occurred.</p>
+      <p>{/* <i>{error.statusText || error.message}</i> */}</p>
+    </div>
+  )
+}
--- a/src/routes/Login.css
+++ b/src/routes/Login.css
@@ -0,0 +1 @@
+
--- a/src/routes/Login.jsx
+++ b/src/routes/Login.jsx
@@ -0,0 +1,39 @@
+import { Navigate, useNavigate } from "react-router-dom"
+import AuthenticationForm from "../components/AuthenticationForm"
+import "./Login.css"
+import { Container } from "@mantine/core"
+import { useRecoilValue } from "recoil"
+import { userState } from "../states/userState"
+
+// The Login route that displays the login/registration form
+export default function Login({ onLogin, loading }) {
+  const navigate = useNavigate()
+  //NEW-------------
+  const user = useRecoilValue(userState)
+
+  // Called when the login/register button is clicked
+  async function handleLogin() {
+    // Call the onLogin function passed from the parent component
+    await onLogin()
+    // Navigate to the posts page after logging in
+    navigate("/posts")
+  }
+
+  return (
+    <>
+      {!loading ? (
+        !user ? (
+          <div id="login-page">
+            <Container size={450} pt={100}>
+              <AuthenticationForm onLogin={handleLogin} />
+            </Container>
+          </div>
+        ) : (
+          <Navigate to={"/posts"} />
+        )
+      ) : (
+        <div>loading....</div>
+      )}
+    </>
+  )
+}
--- a/src/routes/Posts.jsx
+++ b/src/routes/Posts.jsx
@@ -0,0 +1,192 @@
+import { useEffect, useState } from "react"
+import { http } from "../middleware/axiosConfig"
+import Post from "../components/Post"
+import FAB from "../components/FAB"
+import { useDisclosure } from "@mantine/hooks"
+import AddEditModal from "../components/AddEditModal"
+import Comment from "../components/Comment"
+import { Center, Flex, Title } from "@mantine/core"
+import PostSkeleton from "../components/PostSkeleton"
+
+// The Posts route that displays a list of posts and its respective comments fetched from the database
+// Otherwise, it displays a text that indicates that there are no posts to display
+export default function Posts() {
+  const [posts, setPosts] = useState([])
+  const [comments, setComments] = useState({})
+  const [opened, toggle] = useDisclosure(false)
+  // Control the modal mode - Add Post, Edit Post, Edit Comment
+  const [modalMode, setModalMode] = useState("Add Post")
+  // Id of the post or comment being edited
+  //OLD--------------
+  // const [id, setId] = useState(0)
+  //NEW---------------
+  const [contentEdit, setContentEdit] = useState({ id: 0, content: "" })
+  const [loading, setLoading] = useState(true)
+
+  // Fetch posts and comments
+  const fetchPostsAndComments = async () => {
+    try {
+      // Send a GET request to the /api/posts route and retrieve the posts
+      const res = await http.get("api/posts")
+      setPosts(res.data)
+      setLoading(false)
+      res.data.forEach((post) => {
+        // Send a GET request to the /api/comments route and retrieve the comments for each post
+        fetchComments(post.id)
+      })
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  // Fetch posts
+  const fetchPosts = async () => {
+    try {
+      const res = await http.get("api/posts")
+      setPosts(res.data)
+    } catch (error) {
+      console.error(error)
+      setLoading(false)
+    }
+  }
+
+  // Fetch a specific comment to retrieve its post ID
+  const fetchComment = async (commentId) => {
+    try {
+      // Send a GET request to the /api/comments route and retrieve the comment
+      const res = await http.get(`api/comments/${commentId}`)
+      // Fetch the comments for the post that the comment belongs to; refreshes the comments
+      fetchComments(res.data.post_id)
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  // Fetch comments
+  const fetchComments = async (postId) => {
+    try {
+      // Send a GET request to the /api/comments route and retrieve the comments
+      const res = await http.get(`api/posts/${postId}/comments`)
+      // Set the comments in the state
+      setComments((prevComments) => ({ ...prevComments, [postId]: res.data }))
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  // Fetch posts and comments on component mount
+  useEffect(() => {
+    fetchPostsAndComments()
+  }, [])
+
+  //OLD---------------------
+  // For setting the modal mode to Edit Comment
+  // const handleEditComment = (commentId) => {
+  //   console.log(commentId)
+  //   setModalMode("Edit Comment")
+  //   setId(commentId)
+  //   toggle.open()
+  // }
+  //NEW------------------
+  const handleEditComment = (commentId, content) => {
+    console.log(commentId)
+    setModalMode("Edit Comment")
+    setContentEdit({
+      id: commentId,
+      content: content,
+    })
+    toggle.open()
+  }
+
+  //OLD-----------------------------
+  // For setting the modal mode to Edit Post
+  // const handleEditPost = (postId) => {
+  //   console.log(postId);
+  //   setModalMode("Edit Post");
+  //   setId(postId);
+  //   toggle.open();
+  // };
+  //NEW-----------------
+  const handleEditPost = (postId, content) => {
+    console.log(postId)
+    setModalMode("Edit Post")
+    setContentEdit({
+      id: postId,
+      content: content,
+    })
+    toggle.open()
+  }
+
+  // For setting the modal mode to Add Post
+  const handleAddPost = () => {
+    //NEW---------------------------------------
+    setContentEdit({
+      id: 0,
+      content: "",
+    })
+    setModalMode("Add Post")
+    toggle.open()
+  }
+
+  return (
+    <Flex direction="column" h={"100%"}>
+      <Title order={2} ta={"center"}>
+        Posts
+      </Title>
+      {/* When posts are still being loaded, display skeletons */}
+      <PostSkeleton loading={loading} />
+      <PostSkeleton loading={loading} />
+      <PostSkeleton loading={loading} />
+      <PostSkeleton loading={loading} />
+      {/* When there are no posts to display, display text */}
+      {!loading && posts.length === 0 && (
+        <Center h={"80%"}>
+          <Title order={4} size="h4" ta={"center"}>
+            No posts yet! Create one!
+          </Title>
+        </Center>
+      )}
+      {/* For each post, display the post and its comments */}
+      {posts.map((post) => (
+        <Post
+          key={post.id}
+          author={post.user.fname}
+          authorId={post.user.id}
+          content={post.content}
+          date={post.created_at}
+          postId={post.id}
+          onEditPost={(postId) => handleEditPost(postId, post.content)}
+          fetchComments={() => fetchComments(post.id)}
+        >
+          {/* For each comment, display the comment based on its post ID */}
+          {comments[post.id]?.map((comment) => (
+            <Comment
+              key={comment.id}
+              author={comment.user.fname}
+              authorId={comment.user.id}
+              content={comment.content}
+              date={comment.created_at}
+              commentId={comment.id}
+              onEditComment={(commentId) =>
+                handleEditComment(commentId, comment.content)
+              }
+            />
+          ))}
+        </Post>
+      ))}
+      {/* Floating Action Button to display Add Post modal */}
+      <FAB onClick={handleAddPost} />
+      {/* Add Edit Modal to allow users to add or edit posts or comments */}
+      {/* UPDATED PROPS */}
+      <AddEditModal
+        opened={opened}
+        onClose={toggle.close}
+        fetchPosts={fetchPosts}
+        fetchComment={() => fetchComment(contentEdit.id)}
+        id={contentEdit.id}
+        modalMode={modalMode}
+        content={contentEdit.content}
+      />
+    </Flex>
+  )
+}
--- a/src/routes/Profile.jsx
+++ b/src/routes/Profile.jsx
@@ -0,0 +1,99 @@
+import { useContext, useEffect, useState } from "react"
+import { UserContext } from "../middleware/userContext"
+import {
+  Button,
+  Flex,
+  Group,
+  InputLabel,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+} from "@mantine/core"
+import { http } from "../middleware/axiosConfig"
+import { useRecoilValue } from "recoil"
+import { userState } from "../states/userState"
+
+// The profile route displays the user's profile information and allows them to edit it.
+export default function Profile({ refreshUser }) {
+  // Get the current user data from the UserContext -- used to prevent property drilling and re-fetching
+  // the user data from the database repeatedly
+  // const [user, refreshUser] = useContext(UserContext);
+  const user = useRecoilValue(userState)
+  const [editName, setEditName] = useState("")
+  const [editEmail, setEditEmail] = useState("")
+
+  // Called when the edit button near name is clicked
+  const handleEditName = async () => {
+    // Send a POST request to the /api/edit route with the user's new name in the request body
+    // Edits the name of the current user in the database
+    const res = await http.post("/api/edit", {
+      fname: editName,
+    })
+    // Call the refreshUser function to update the user data
+    refreshUser()
+    // Reset the editName state variable to an empty string
+    setEditName("")
+  }
+
+  // Called when the edit button near email is clicked
+  const handleEditEmail = async () => {
+    // Send a POST request to the /api/edit route with the user's new email in the request body
+    // Edits the email of the current user in the database
+    const res = await http.post("/api/edit", {
+      email: editEmail,
+    })
+    // Call the refreshUser function to update the user data
+    refreshUser()
+    // Reset the editEmail state variable to an empty string
+    setEditEmail("")
+  }
+
+  return (
+    <Flex direction="column" h={"100%"}>
+      <Title order={2} ta={"center"}>
+        My Profile
+      </Title>
+      <Stack h={"80%"} gap={0} mt={50}>
+        <Group justify="center" gap={30}>
+          <Title order={4}>Name</Title>
+          <Group gap={0}>
+            <Text>{user.name}</Text>
+            <Button
+              variant="transparent"
+              size="xs"
+              onClick={() => {
+                handleEditName()
+              }}
+            >
+              Edit
+            </Button>
+            {/* Input for new name */}
+            <TextInput
+              value={editName}
+              onChange={(e) => setEditName(e.target.value)}
+            ></TextInput>
+          </Group>
+        </Group>
+        <Group justify="center" gap={30}>
+          <Title order={4}>E-mail Address</Title>
+          <Group gap={0}>
+            <Text>{user.email}</Text>
+            <Button
+              variant="transparent"
+              size="xs"
+              onClick={() => handleEditEmail()}
+            >
+              Edit
+            </Button>
+            {/* Input for new email */}
+            <TextInput
+              value={editEmail}
+              onChange={(e) => setEditEmail(e.target.value)}
+            ></TextInput>
+          </Group>
+        </Group>
+      </Stack>
+    </Flex>
+  )
+}
--- a/src/routes/Root.css
+++ b/src/routes/Root.css
@@ -0,0 +1,3 @@
+.main-header {
+  align-content: center;
+}
--- a/src/routes/Root.jsx
+++ b/src/routes/Root.jsx
@@ -0,0 +1,76 @@
+import { useState } from "react";
+import { useDisclosure } from "@mantine/hooks";
+import { AppShell, Burger, NavLink, Box, Button, Group } from "@mantine/core";
+import { Link, Outlet, useLocation } from "react-router-dom";
+import "./Root.css";
+
+// Links for the sidebar
+const data = [
+  { link: "/posts", label: "Posts" },
+  { link: "/profile", label: "Profile" },
+];
+
+// The root component renders the sidebar and the header that will
+// shared by all other routes.
+export default function Root({ logout }) {
+  const location = useLocation();
+
+  // The initial active index is determined by finding the index of the data
+  // item that matches the current location pathname.
+  const [active, setActive] = useState(
+    data.findIndex((item) => item.link === location.pathname)
+  );
+
+  // Toggle the visibility of the sidebar
+  const [opened, { toggle }] = useDisclosure();
+
+  // The links for the sidebar, mapped from the data items
+  const links = data.map((item, index) => (
+    <NavLink
+      to={item.link}
+      key={item.label}
+      active={index === active}
+      label={item.label}
+      onClick={(e) => {
+        setActive(index);
+      }}
+      variant="filled"
+      component={Link}
+    />
+  ));
+
+  return (
+    /* The AppShell component is used to render the sidebar and the main content of the page */
+    <AppShell
+      header={{ height: 60 }}
+      navbar={{
+        width: { sm: 200, lg: 300 },
+        breakpoint: "sm",
+        collapsed: { mobile: !opened },
+      }}
+      padding="md"
+    >
+      {/* The header of the page that with the burger that can toggle the sidebar on smaller screens */}
+      <AppShell.Header className="main-header">
+        <Group justify="space-between" px={20}>
+          <Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
+          <div>Logo</div>
+          <Button variant="transparent" onClick={logout}>
+            Logout
+          </Button>
+        </Group>
+      </AppShell.Header>
+
+      {/* The sidebar displays the links in a collapsible menu */}
+      <AppShell.Navbar p="md">
+        <Box>{links}</Box>
+      </AppShell.Navbar>
+
+      {/* The main content of the page is rendered here */}
+      <AppShell.Main h={"80vh"}>
+        {/* The outlet allows the content of the route to be rendered -- from react-router-dom */}
+        <Outlet />
+      </AppShell.Main>
+    </AppShell>
+  );
+}
--- a/src/setupTests.js
+++ b/src/setupTests.js
@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';
--- a/src/states/userState.js
+++ b/src/states/userState.js
@@ -0,0 +1,12 @@
+import { nanoid } from "nanoid"
+import { atom } from "recoil"
+
+export const userState = atom({
+  key: `${nanoid()}-userState`,
+  default: null,
+})
+
+export const loggedIn = atom({
+  key: `${nanoid()}-loggedIn`,
+  default: false,
+})
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist/", // path to output directory
+    "sourceMap": true, // allow sourcemap support
+    "strictNullChecks": true, // enable strict null checks as a best practice
+    "module": "es6", // specify module code generation
+    "jsx": "react-jsx", // use typescript to transpile jsx to js
+    "target": "es5", // specify ECMAScript target version
+    "allowJs": true, // allow a partial TypeScript and JavaScript codebase
+    "moduleResolution": "node",
+    "baseUrl": "./src",
+  },
+  "include": ["src"]
+}
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>