From 0272ce8d9113f3d902d84a9421dee523b5b8bb80 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Fri, 10 May 2024 11:41:16 -0700
Subject: [PATCH 01/14] Added section component, updated and renamed Button
 component

---
 .../Button/{index.css => Button.css}          |   0
 .../Button/{index.jsx => Button.jsx}          |  34 +++++-
 Client/src/Components/Section/Section.jsx     | 112 ++++++++++++++++++
 Client/src/Pages/Demo/Demo.jsx                |  15 ++-
 Client/src/Utils/Theme.js                     |  11 ++
 5 files changed, 166 insertions(+), 6 deletions(-)
 rename Client/src/Components/Button/{index.css => Button.css} (100%)
 rename Client/src/Components/Button/{index.jsx => Button.jsx} (50%)
 create mode 100644 Client/src/Components/Section/Section.jsx

diff --git a/Client/src/Components/Button/index.css b/Client/src/Components/Button/Button.css
similarity index 100%
rename from Client/src/Components/Button/index.css
rename to Client/src/Components/Button/Button.css
diff --git a/Client/src/Components/Button/index.jsx b/Client/src/Components/Button/Button.jsx
similarity index 50%
rename from Client/src/Components/Button/index.jsx
rename to Client/src/Components/Button/Button.jsx
index 66a345746..727a3d941 100644
--- a/Client/src/Components/Button/index.jsx
+++ b/Client/src/Components/Button/Button.jsx
@@ -18,23 +18,47 @@ const levelConfig = {
     variant: "contained",
     color: "error",
   },
+  imagePrimary: {
+    color: "primary",
+    variant: "text",
+  },
+  imageSecondary: {
+    color: "secondary",
+    variant: "text",
+  },
+  imageTertiary: {
+    color: "tertiary",
+    variant: "text",
+  },
 };
 
 /**
  * @param {Object} props
- * @param {'primary' | 'secondary' | 'tertiary' | 'error'} props.level - The level of the button
+ * @param {'primary' | 'secondary' | 'tertiary' | 'error' | 'imagePrimary' | 'imageSecondary' | 'imageTertiary'} props.level - The level of the button
  * @param {string} props.label - The label of the button
+ * @param {React.ReactNode} props.img - Image for button
  * @param {boolean} [props.disabled] - Whether the button is disabled
+ * @param {Object} prps.sx - Styles for the button
  * @returns {JSX.Element}
  * @example
  * // Render an error button
- * <Button level="error" label="Error" disabled />
+ * <Button level="error" label="Error" disabled sx={{marginTop: "1rem"}}/>
  */
 
-const Button = ({ level, label, disabled }) => {
+const Button = ({ level, label, disabled, img, sx }) => {
   const { variant, color } = levelConfig[level];
+  console.log(img);
   return (
-    <MuiButton variant={variant} color={color} disabled={disabled}>
+    <MuiButton
+      variant={variant}
+      color={color}
+      disabled={disabled}
+      sx={{
+        textTransform: "none",
+        ...sx,
+      }}
+    >
+      {img && img}
       {label}
     </MuiButton>
   );
@@ -43,6 +67,8 @@ const Button = ({ level, label, disabled }) => {
 Button.propTypes = {
   level: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
+  img: PropTypes.node,
+  sx: PropTypes.object,
   disabled: PropTypes.bool,
 };
 
diff --git a/Client/src/Components/Section/Section.jsx b/Client/src/Components/Section/Section.jsx
new file mode 100644
index 000000000..978ae72b4
--- /dev/null
+++ b/Client/src/Components/Section/Section.jsx
@@ -0,0 +1,112 @@
+import PropTypes from "prop-types";
+import {
+  Box,
+  Container,
+  useTheme,
+  Typography,
+  TextField,
+  Switch,
+} from "@mui/material";
+import MenuIcon from "@mui/icons-material/Menu";
+import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
+import Button from "../Button/Button";
+import AddIcon from "@mui/icons-material/Add";
+
+/**
+ * @component
+ * @param {Object} props
+ * @param { Array} props.montitors - Array of monitors associated with the section
+ * @returns {JSX.Element}
+ * @example
+ * // Renders a section component with a list of monitors
+ * <Section monitors={monitors} />
+ */
+
+const Section = ({ monitors }) => {
+  console.log(monitors);
+  const theme = useTheme();
+  return (
+    <>
+      <Container
+        disableGutters
+        sx={{
+          border: `1px solid ${theme.palette.section.borderColor}`,
+          borderRadius: `${theme.shape.borderRadius}px`,
+        }}
+      >
+        <Box
+          sx={{
+            textAlign: "left",
+            padding: `${theme.spacing(2)}`,
+            bgcolor: `${theme.palette.section.bgColor}`,
+            borderBottom: `1px solid ${theme.palette.section.borderColor}`,
+          }}
+        >
+          <Typography>Section Name</Typography>
+          <TextField
+            placeholder="Service Name"
+            sx={{
+              "& input": {
+                width: "320px",
+                height: "34px",
+                padding: "10px 14px 10px 14px",
+              },
+            }}
+          />
+        </Box>
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "start",
+            textAlign: "left",
+            padding: `${theme.spacing(2)}`,
+            gap: 2,
+          }}
+        >
+          <Typography>Servers List</Typography>
+          <Button level="primary" label="Add new" />
+          {monitors.map((monitor) => {
+            return (
+              <Box
+                key={monitor.id}
+                sx={{
+                  boxSizing: "border-box",
+                  width: "100%",
+                  padding: "10px 14px 10px 14px",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  border: `1px solid ${theme.palette.section.borderColor}`,
+                  borderRadius: `${theme.shape.borderRadius}px`,
+                  bgcolor: `${theme.palette.section.bgColor}`,
+                }}
+              >
+                <MenuIcon
+                  sx={{ color: `${theme.palette.section.borderColor}` }}
+                />
+                <Switch checked={monitor.isActive} />
+                <Typography sx={{ flexGrow: 1 }}>{monitor.name}</Typography>
+                <DeleteOutlineIcon
+                  sx={{ color: `${theme.palette.section.borderColor}` }}
+                />
+              </Box>
+            );
+          })}
+        </Box>
+      </Container>
+      <Button
+        sx={{ marginTop: theme.spacing(2) }}
+        level="imageSecondary"
+        label="Add new section"
+        img={<AddIcon />}
+      />
+    </>
+  );
+};
+
+Section.propTypes = {
+  monitors: PropTypes.array,
+};
+
+export default Section;
diff --git a/Client/src/Pages/Demo/Demo.jsx b/Client/src/Pages/Demo/Demo.jsx
index b5771ab46..ad97bb0e8 100644
--- a/Client/src/Pages/Demo/Demo.jsx
+++ b/Client/src/Pages/Demo/Demo.jsx
@@ -1,9 +1,8 @@
 import React from "react";
-import Button from "../../Components/Button";
+import Button from "../../Components/Button/Button";
 import Link from "../../Components/Link";
 import ColoredLabel from "../../Components/Label/ColoredLabel";
 import {
-  Box,
   useTheme,
   Switch,
   Checkbox,
@@ -19,11 +18,13 @@ import StatusLabel from "../../Components/Label/StautsLabel";
 import Avatar from "../../Components/Avatar/Avatar";
 import ProgressStepper from "../../Components/ProgressStepper/ProgressStepper";
 import avatarImage from "../../assets/Images/avatar_placeholder.png";
+import Section from "../../Components/Section/Section";
 import { DataGrid } from "@mui/x-data-grid";
 
 import { DatePicker } from "@mui/x-date-pickers/DatePicker";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import AddIcon from "@mui/icons-material/Add";
 
 const cols = [
   {
@@ -84,6 +85,12 @@ const steps = [
   { label: "Invite your team", content: "Start collaborating with your team" },
 ];
 
+const monitors = [
+  { id: 0, name: "Google", isActive: true },
+  { id: 1, name: "Yahoo", isActive: false },
+  { id: 2, name: "Reddit", isActive: true },
+];
+
 const Demo = () => {
   const [radio, setRadio] = React.useState(1);
   const [tab, setTab] = React.useState("departments");
@@ -121,6 +128,7 @@ const Demo = () => {
         <Button level="secondary" label="Secondary" disabled />
         <Button level="tertiary" label="Tertiary" disabled />
         <Button level="error" label="Error" disabled />
+        <Button level="imageTertiary" label="Image Button" img={<AddIcon />} />
       </div>
       <div>
         <Link
@@ -224,6 +232,9 @@ const Demo = () => {
       <div>
         <ProgressStepper steps={steps}></ProgressStepper>
       </div>
+
+      <h4>Section</h4>
+      <Section monitors={monitors} />
     </div>
   );
 };
diff --git a/Client/src/Utils/Theme.js b/Client/src/Utils/Theme.js
index c24b18242..99a442dfb 100644
--- a/Client/src/Utils/Theme.js
+++ b/Client/src/Utils/Theme.js
@@ -12,6 +12,10 @@ const labelGray = "#475467";
 const labelPurple = "#6941C6";
 const labelGreen = "#067647";
 const labelRed = "#F04438";
+
+//Section colros
+const sectionBorder = "#D0D5DD";
+const sectionBg = "#F8F9F8";
 const theme = createTheme({
   palette: {
     primary: {
@@ -39,6 +43,13 @@ const theme = createTheme({
     labelRed: {
       color: labelRed,
     },
+    section: {
+      borderColor: sectionBorder,
+      bgColor: sectionBg,
+    },
+  },
+  shape: {
+    borderRadius: 4,
   },
 });
 

From f4832f03245a88cbc81ecf34fc904d80d4b9b81d Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Fri, 10 May 2024 12:03:02 -0700
Subject: [PATCH 02/14] Added state to section component, removed console.log
 from button

---
 Client/src/Components/Button/Button.jsx   |  1 -
 Client/src/Components/Section/Section.jsx | 27 ++++++++++++++++++++---
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/Client/src/Components/Button/Button.jsx b/Client/src/Components/Button/Button.jsx
index 727a3d941..0756cda1b 100644
--- a/Client/src/Components/Button/Button.jsx
+++ b/Client/src/Components/Button/Button.jsx
@@ -47,7 +47,6 @@ const levelConfig = {
 
 const Button = ({ level, label, disabled, img, sx }) => {
   const { variant, color } = levelConfig[level];
-  console.log(img);
   return (
     <MuiButton
       variant={variant}
diff --git a/Client/src/Components/Section/Section.jsx b/Client/src/Components/Section/Section.jsx
index 978ae72b4..3ce773c81 100644
--- a/Client/src/Components/Section/Section.jsx
+++ b/Client/src/Components/Section/Section.jsx
@@ -1,4 +1,5 @@
 import PropTypes from "prop-types";
+import { useState, useEffect } from "react";
 import {
   Box,
   Container,
@@ -23,7 +24,24 @@ import AddIcon from "@mui/icons-material/Add";
  */
 
 const Section = ({ monitors }) => {
-  console.log(monitors);
+  const [monitorStates, setMonitorStates] = useState(
+    monitors.map((monitor) => monitor.isActive)
+  );
+
+  useEffect(() => {
+    console.log("Monitor states updated", monitorStates);
+    // Update DB here
+  }, [monitorStates]);
+
+  const handleMonitor = (monitorIndex) => {
+    setMonitorStates((prevStates) => {
+      const newStates = [...prevStates];
+      newStates[monitorIndex] = !newStates[monitorIndex];
+
+      return newStates;
+      // Need to update DB with new monitor state
+    });
+  };
   const theme = useTheme();
   return (
     <>
@@ -66,7 +84,7 @@ const Section = ({ monitors }) => {
         >
           <Typography>Servers List</Typography>
           <Button level="primary" label="Add new" />
-          {monitors.map((monitor) => {
+          {monitors.map((monitor, index) => {
             return (
               <Box
                 key={monitor.id}
@@ -85,7 +103,10 @@ const Section = ({ monitors }) => {
                 <MenuIcon
                   sx={{ color: `${theme.palette.section.borderColor}` }}
                 />
-                <Switch checked={monitor.isActive} />
+                <Switch
+                  checked={monitorStates[index]}
+                  onChange={() => handleMonitor(index)}
+                />
                 <Typography sx={{ flexGrow: 1 }}>{monitor.name}</Typography>
                 <DeleteOutlineIcon
                   sx={{ color: `${theme.palette.section.borderColor}` }}

From 3de2a17cbc607a70df0bdab700a15d665fd71f59 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Fri, 10 May 2024 12:25:05 -0700
Subject: [PATCH 03/14] Renamed link component, added links to Demo page

---
 Client/src/Components/Button/Button.jsx       |   1 +
 .../Components/Link/{index.css => Link.css}   |   0
 .../Components/Link/{index.jsx => Link.jsx}   |  17 +--
 Client/src/Pages/Demo/Demo.jsx                | 110 +++++++++++++++---
 4 files changed, 101 insertions(+), 27 deletions(-)
 rename Client/src/Components/Link/{index.css => Link.css} (100%)
 rename Client/src/Components/Link/{index.jsx => Link.jsx} (78%)

diff --git a/Client/src/Components/Button/Button.jsx b/Client/src/Components/Button/Button.jsx
index 0756cda1b..a43142be8 100644
--- a/Client/src/Components/Button/Button.jsx
+++ b/Client/src/Components/Button/Button.jsx
@@ -33,6 +33,7 @@ const levelConfig = {
 };
 
 /**
+ * @component
  * @param {Object} props
  * @param {'primary' | 'secondary' | 'tertiary' | 'error' | 'imagePrimary' | 'imageSecondary' | 'imageTertiary'} props.level - The level of the button
  * @param {string} props.label - The label of the button
diff --git a/Client/src/Components/Link/index.css b/Client/src/Components/Link/Link.css
similarity index 100%
rename from Client/src/Components/Link/index.css
rename to Client/src/Components/Link/Link.css
diff --git a/Client/src/Components/Link/index.jsx b/Client/src/Components/Link/Link.jsx
similarity index 78%
rename from Client/src/Components/Link/index.jsx
rename to Client/src/Components/Link/Link.jsx
index e8d26a7c7..9c643ebbe 100644
--- a/Client/src/Components/Link/index.jsx
+++ b/Client/src/Components/Link/Link.jsx
@@ -1,6 +1,15 @@
 import { Link as MuiLink, useTheme } from "@mui/material";
 import PropTypes from "prop-types";
 
+/**
+ * @component
+ * @param {Object} props
+ * @param {'primary' | 'secondary' | 'tertiary' | 'error'} props.level - The level of the link
+ * @param {string} props.label - The label of the link
+ * @param {string} props.url - The URL of the link
+ * @returns {JSX.Element}
+ */
+
 const Link = ({ level, label, url }) => {
   const theme = useTheme();
 
@@ -22,14 +31,6 @@ const Link = ({ level, label, url }) => {
     },
     error: {},
   };
-
-  /**
-   * @typedef {Object} Props
-   * @property {'primary' | 'secondary' | 'tertiary' | 'error'} level - The level of the link
-   * @property {string} label - The label of the link
-   * @property {string} url - The URL of the link
-   */
-
   const { sx, color } = levelConfig[level];
   return (
     <MuiLink href={url} sx={sx} color={color}>
diff --git a/Client/src/Pages/Demo/Demo.jsx b/Client/src/Pages/Demo/Demo.jsx
index ad97bb0e8..1c294ba5c 100644
--- a/Client/src/Pages/Demo/Demo.jsx
+++ b/Client/src/Pages/Demo/Demo.jsx
@@ -1,6 +1,6 @@
 import React from "react";
 import Button from "../../Components/Button/Button";
-import Link from "../../Components/Link";
+import Link from "../../Components/Link/Link";
 import ColoredLabel from "../../Components/Label/ColoredLabel";
 import {
   useTheme,
@@ -25,6 +25,7 @@ import { DatePicker } from "@mui/x-date-pickers/DatePicker";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import AddIcon from "@mui/icons-material/Add";
+import Divider from "@mui/material/Divider";
 
 const cols = [
   {
@@ -112,23 +113,87 @@ const Demo = () => {
     alert(event.target.checked ? `${type} checked` : `${type} unchecked`);
   };
 
+  const links = [
+    {
+      name: "Buttons",
+      url: "#buttons",
+    },
+    {
+      name: "Disabled Buttons",
+      url: "#disabled-buttons",
+    },
+    {
+      name: "Labels",
+      url: "#labels",
+    },
+    {
+      name: "Status Labels",
+      url: "#status-labels",
+    },
+    {
+      name: "Avatar",
+      url: "#avatar",
+    },
+    {
+      name: "Switches",
+      url: "#switches",
+    },
+    {
+      name: "Checkboxes",
+      url: "#checkboxes",
+    },
+    {
+      name: "Radio",
+      url: "#radio",
+    },
+    {
+      name: "Table",
+      url: "#table",
+    },
+    {
+      name: "Tabs",
+      url: "#tabs",
+    },
+    {
+      name: "Date Picker",
+      url: "#date-picker",
+    },
+    {
+      name: "Stepper",
+      url: "#stepper",
+    },
+    {
+      name: "Section",
+      url: "#section",
+    },
+  ];
+
   const theme = useTheme();
   return (
     <div>
-      <h4>Buttons</h4>
+      <ul style={{ listStyle: "none" }}>
+        {links.map((link) => (
+          <li key={link.url}>
+            <Link level="primary" label={link.name} url={link.url} />
+          </li>
+        ))}
+      </ul>
+      <Divider sx={{ margin: `${theme.spacing(2)}` }} />
+      <h4 id="buttons">Buttons</h4>
       <div>
         <Button level="primary" label="Primary" />
         <Button level="secondary" label="Secondary" />
         <Button level="tertiary" label="Tertiary" />
         <Button level="error" label="Error" />
+        <Button level="imageTertiary" label="Image Button" img={<AddIcon />} />
       </div>
-      <h4>Disabled Buttons</h4>
+      <Divider sx={{ margin: `${theme.spacing(2)}` }} />
+      <h4 id="disabled-buttons">Disabled Buttons</h4>
       <div>
         <Button level="primary" label="Primary" disabled />
         <Button level="secondary" label="Secondary" disabled />
         <Button level="tertiary" label="Tertiary" disabled />
         <Button level="error" label="Error" disabled />
-        <Button level="imageTertiary" label="Image Button" img={<AddIcon />} />
       </div>
       <div>
         <Link
@@ -137,43 +202,48 @@ const Demo = () => {
           url={"https://www.google.com"}
         />
       </div>
-      <h4>Labels</h4>
+      <Divider sx={{ margin: `${theme.spacing(2)}` }} />
+      <h4 id="labels">Labels</h4>
       <div>
         <ColoredLabel label="Label" color={theme.palette.labelGray.color} />
         <ColoredLabel label="Label" color={theme.palette.labelPurple.color} />
         <ColoredLabel label="Label" color={theme.palette.labelGreen.color} />
         <ColoredLabel label="Label" color={theme.palette.labelOrange.color} />
       </div>
-
-      <h4>Status Lables</h4>
+      <Divider sx={{ margin: `${theme.spacing(2)}` }} />
+      <h4 id="status-labels">Status Lables</h4>
       <div>
         <StatusLabel status="Seen" />
         <StatusLabel status="Waiting" />
         <StatusLabel status="New" />
         <StatusLabel status="Active" />
       </div>
-      <h4>Avatar</h4>
+      <Divider sx={{ margin: `${theme.spacing(2)}` }} />
+      <h4 id="avatar">Avatar</h4>
       <div style={{ display: "flex" }}>
         <Avatar src={avatarImage} firstName="Alex" lastName="Holliday" />
         <Avatar firstName="Alex" lastName="Holliday" />
         <Avatar src={avatarImage} firstName="Alex" lastName="Holliday" small />
         <Avatar firstName="Alex" lastName="Holliday" small />
       </div>
-      <h4>Switches</h4>
+      <Divider sx={{ margin: `${theme.spacing(2)}` }} />
+      <h4 id="switches">Switches</h4>
       <div>
         <Switch onChange={(event) => change(event, "Switch")} />
         <Switch size="small" />
         <Switch disabled />
         <Switch checked />
       </div>
-      <h4>Checkboxes</h4>
+      <Divider sx={{ margin: `${theme.spacing(2)}` }} />
+      <h4 id="checkboxes">Checkboxes</h4>
       <div>
         <Checkbox onChange={(event) => change(event, "Checkbox")} />
         <Checkbox size="small" />
         <Checkbox disabled />
         <Checkbox checked />
       </div>
-      <h4>Radio</h4>
+      <Divider sx={{ margin: `${theme.spacing(2)}` }} />
+      <h4 id="radio">Radio</h4>
       <div>
         <FormControl>
           <FormLabel>Demo Radio</FormLabel>
@@ -195,7 +265,8 @@ const Demo = () => {
           </RadioGroup>
         </FormControl>
       </div>
-      <h4>Table</h4>
+      <Divider sx={{ margin: `${theme.spacing(2)}` }} />
+      <h4 id="table">Table</h4>
       <div style={{ width: "75vw" }}>
         <DataGrid
           autoHeight
@@ -209,7 +280,8 @@ const Demo = () => {
           pageSizeOptions={[5, 10]}
         />
       </div>
-      <h4>Tabs</h4>
+      <Divider sx={{ margin: `${theme.spacing(2)}` }} />
+      <h4 id="tabs">Tabs</h4>
       <div style={{ display: "flex", justifyContent: "center" }}>
         {" "}
         <Tabs value={tab} onChange={handleTab}>
@@ -219,21 +291,21 @@ const Demo = () => {
           <Tab label="Approvals" value="approvals" />
         </Tabs>
       </div>
-
-      <h4>Date Picker</h4>
+      <Divider sx={{ margin: `${theme.spacing(2)}` }} />
+      <h4 id="date-picker">Date Picker</h4>
       <div>
         <LocalizationProvider dateAdapter={AdapterDayjs}>
           <DatePicker onChange={handleDate} />
         </LocalizationProvider>
         <h4>{date}</h4>
       </div>
-
-      <h4>Stepper</h4>
+      <Divider sx={{ margin: `${theme.spacing(2)}` }} />
+      <h4 id="stepper">Stepper</h4>
       <div>
         <ProgressStepper steps={steps}></ProgressStepper>
       </div>
-
-      <h4>Section</h4>
+      <Divider sx={{ margin: `${theme.spacing(2)}` }} />
+      <h4 id="section">Section</h4>
       <Section monitors={monitors} />
     </div>
   );

From def8ba4b9df81f6dd6854491e5b0ff14a1e5d40a Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Fri, 10 May 2024 13:36:04 -0700
Subject: [PATCH 04/14] Added monitor router, controller, and model

---
 Server/controllers/monitorController.js | 19 ++++++++++
 Server/index.js                         | 46 ++++++++++++++-----------
 Server/models/monitor.js                | 37 ++++++++++++++++++++
 Server/routes/monitorRoute.js           |  8 +++++
 Server/validation/joi.js                | 12 ++++---
 5 files changed, 96 insertions(+), 26 deletions(-)
 create mode 100644 Server/controllers/monitorController.js
 create mode 100644 Server/models/monitor.js
 create mode 100644 Server/routes/monitorRoute.js

diff --git a/Server/controllers/monitorController.js b/Server/controllers/monitorController.js
new file mode 100644
index 000000000..1044d3f48
--- /dev/null
+++ b/Server/controllers/monitorController.js
@@ -0,0 +1,19 @@
+const { getMonitorsByIdValidation } = require("../validation/joi");
+
+const getAllMonitors = async (req, res) => {
+  res.json({ message: "Hello from Monitor Controller" });
+};
+
+const getMonitorById = async (req, res) => {
+  const { error } = getMonitorsByIdValidation.validate(req.params);
+  if (error) {
+    return res
+      .status(400)
+      .json({ success: false, msg: error.details[0].message });
+  }
+
+  const monitorId = req.params.monitorId;
+  return res.json({ success: true, msg: "Monitor found", data: { monitorId } });
+};
+
+module.exports = { getAllMonitors, getMonitorById };
diff --git a/Server/index.js b/Server/index.js
index 173c2c78d..3913d1a58 100644
--- a/Server/index.js
+++ b/Server/index.js
@@ -1,28 +1,32 @@
-const express = require('express')
-const helmet = require('helmet')
-const cors = require('cors')
-const authRouter = require('./routes/authRoute')
-const { connectDbAndRunServer } = require('./configs/db')
-require('dotenv').config()
+const express = require("express");
+const helmet = require("helmet");
+const cors = require("cors");
+const authRouter = require("./routes/authRoute");
+const monitorRouter = require("./routes/monitorRoute");
+const { connectDbAndRunServer } = require("./configs/db");
+require("dotenv").config();
 // const { sendEmail } = require('./utils/sendEmail')
 
 /**
  * NOTES
- * Email Service will be added 
+ * Email Service will be added
  * Logger Service will be added (Winston or similar)
  */
 
-const app = express()
+const app = express();
 
 // middlewares
-app.use(cors(
-    //We will add configuration later
-))
-app.use(express.json())
-app.use(helmet())
+app.use(
+  cors()
+  //We will add configuration later
+);
+app.use(express.json());
+app.use(helmet());
 
 //routes
-app.use('/api/v1/auth', authRouter);
+app.use("/api/v1/auth", authRouter);
+
+app.use("/api/v1/monitors", monitorRouter);
 
 // Testing email service
 // app.use('/sendEmail', async (req, res) => {
@@ -31,12 +35,12 @@ app.use('/api/v1/auth', authRouter);
 // })
 
 //health check
-app.use('/api/v1/healthy', (req, res) => {
-    try {
-        return res.status(200).json({message:"Healthy"})
-    } catch (error) {
-        return res.status(500).json({message:error.message})
-    }
-})
+app.use("/api/v1/healthy", (req, res) => {
+  try {
+    return res.status(200).json({ message: "Healthy" });
+  } catch (error) {
+    return res.status(500).json({ message: error.message });
+  }
+});
 
 connectDbAndRunServer(app);
diff --git a/Server/models/monitor.js b/Server/models/monitor.js
new file mode 100644
index 000000000..513d4e2be
--- /dev/null
+++ b/Server/models/monitor.js
@@ -0,0 +1,37 @@
+const mongoose = require("mongoose");
+
+const MonitorSchema = mongoose.Schema({
+  userId: {
+    type: String,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  description: {
+    type: String,
+  },
+  url: {
+    type: String,
+    required: true,
+  },
+  isActive: {
+    type: Boolean,
+    default: true,
+  },
+  interval: {
+    // in milliseconds
+    type: Number,
+    default: 60000,
+  },
+  updated_at: {
+    type: Date,
+    default: Date.now,
+  },
+  created_at: {
+    type: Date,
+    default: Date.now,
+  },
+});
+
+module.exports = mongoose.model("Monitor", MonitorSchema);
diff --git a/Server/routes/monitorRoute.js b/Server/routes/monitorRoute.js
new file mode 100644
index 000000000..724ee79b6
--- /dev/null
+++ b/Server/routes/monitorRoute.js
@@ -0,0 +1,8 @@
+const router = require("express").Router();
+const monitorController = require("../controllers/monitorController");
+const { getMonitorsByIdValidation } = require("../validation/joi");
+
+router.get("/", monitorController.getAllMonitors);
+router.get("/:monitorId", monitorController.getMonitorById);
+
+module.exports = router;
diff --git a/Server/validation/joi.js b/Server/validation/joi.js
index d28f9b7da..c5b2b58d1 100644
--- a/Server/validation/joi.js
+++ b/Server/validation/joi.js
@@ -1,10 +1,12 @@
-const joi = require('joi')
-
+const joi = require("joi");
 
 const authValidation = joi.object({
-    email: joi.string().email().required(),
-    password: joi.string().min(8).required(),
+  email: joi.string().email().required(),
+  password: joi.string().min(8).required(),
 });
 
+const getMonitorsByIdValidation = joi.object({
+  monitorId: joi.string().required(),
+});
 
-module.exports = {authValidation}
\ No newline at end of file
+module.exports = { authValidation, getMonitorsByIdValidation };

From 2e2d91937e533b1e0026324dc019018032227f9f Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Fri, 10 May 2024 13:59:33 -0700
Subject: [PATCH 05/14] Added fake DB for monitor route testing

---
 Server/controllers/monitorController.js  | 48 +++++++++++++++++++++---
 Server/db/FakeDb.js                      | 46 +++++++++++++++++++++++
 Server/models/{monitor.js => Monitor.js} |  0
 Server/routes/monitorRoute.js            |  2 +-
 Server/validation/joi.js                 | 11 +++++-
 5 files changed, 100 insertions(+), 7 deletions(-)
 create mode 100644 Server/db/FakeDb.js
 rename Server/models/{monitor.js => Monitor.js} (100%)

diff --git a/Server/controllers/monitorController.js b/Server/controllers/monitorController.js
index 1044d3f48..f7a85ce4c 100644
--- a/Server/controllers/monitorController.js
+++ b/Server/controllers/monitorController.js
@@ -1,9 +1,20 @@
-const { getMonitorsByIdValidation } = require("../validation/joi");
+const {
+  getMonitorsByIdValidation,
+  getMonitorsByUserIdValidation,
+} = require("../validation/joi");
+const db = require("../db/FakeDb");
 
+// Gets all monitors
 const getAllMonitors = async (req, res) => {
-  res.json({ message: "Hello from Monitor Controller" });
+  try {
+    const monitors = await db.getAllMonitors();
+    return res.json({ success: true, msg: "Monitors found", data: monitors });
+  } catch (error) {
+    return res.status(500).json({ success: false, msg: error.message });
+  }
 };
 
+// Get a monitor by ID
 const getMonitorById = async (req, res) => {
   const { error } = getMonitorsByIdValidation.validate(req.params);
   if (error) {
@@ -12,8 +23,35 @@ const getMonitorById = async (req, res) => {
       .json({ success: false, msg: error.details[0].message });
   }
 
-  const monitorId = req.params.monitorId;
-  return res.json({ success: true, msg: "Monitor found", data: { monitorId } });
+  try {
+    const monitorId = req.params.monitorId;
+    const monitor = await db.getMonitorById(monitorId);
+    return res.json({ success: true, msg: "Monitor found", data: monitor });
+  } catch (error) {
+    return res.status(500).json({ success: false, msg: error.message });
+  }
 };
 
-module.exports = { getAllMonitors, getMonitorById };
+// Gets a monitor by user ID
+const getMonitorsByUserId = async (req, res) => {
+  const { error } = getMonitorsByUserIdValidation.validate(req.params);
+  if (error) {
+    return res
+      .status(400)
+      .json({ success: false, msg: error.details[0].message });
+  }
+
+  try {
+    const userId = req.params.userId;
+    const monitors = await db.getMonitorsByUserId(userId);
+    return res.json({
+      success: true,
+      msg: `Monitors for user ${userId} found`,
+      data: monitors,
+    });
+  } catch (error) {
+    return res.status(500).json({ success: false, msg: error.message });
+  }
+};
+
+module.exports = { getAllMonitors, getMonitorById, getMonitorsByUserId };
diff --git a/Server/db/FakeDb.js b/Server/db/FakeDb.js
new file mode 100644
index 000000000..b604a9294
--- /dev/null
+++ b/Server/db/FakeDb.js
@@ -0,0 +1,46 @@
+const Monitor = require("../models/Monitor");
+
+const FAKE_MONITOR_DATA = [];
+
+for (let i = 0; i < 10; i++) {
+  FAKE_MONITOR_DATA.push(
+    new Monitor({
+      userId: i % 2 === 0 ? 1 : 2,
+      name: `Monitor ${i}`,
+      description: `Description for Monitor ${i}`,
+      url: `https://monitor${i}.com`,
+      isActive: true,
+      interval: 60000,
+      updated_at: new Date(),
+      created_at: new Date(),
+    })
+  );
+}
+
+const getAllMonitors = async () => {
+  return FAKE_MONITOR_DATA;
+};
+
+const getMonitorById = async (monitorId) => {
+  const idx = FAKE_MONITOR_DATA.findIndex((monitor) => {
+    return monitor.id === monitorId;
+  });
+  if (idx === -1) {
+    throw new Error(`Monitor with id ${monitorId} not found`);
+  }
+  return FAKE_MONITOR_DATA[idx];
+};
+
+const getMonitorsByUserId = async (userId) => {
+  const userMonitors = FAKE_MONITOR_DATA.filter((monitor) => {
+    return monitor.userId === userId;
+  });
+
+  if (userMonitors.length === 0) {
+    throw new Error(`Monitors for user ${userId} not found`);
+  }
+
+  return userMonitors;
+};
+
+module.exports = { getAllMonitors, getMonitorById, getMonitorsByUserId };
diff --git a/Server/models/monitor.js b/Server/models/Monitor.js
similarity index 100%
rename from Server/models/monitor.js
rename to Server/models/Monitor.js
diff --git a/Server/routes/monitorRoute.js b/Server/routes/monitorRoute.js
index 724ee79b6..7c6767364 100644
--- a/Server/routes/monitorRoute.js
+++ b/Server/routes/monitorRoute.js
@@ -1,8 +1,8 @@
 const router = require("express").Router();
 const monitorController = require("../controllers/monitorController");
-const { getMonitorsByIdValidation } = require("../validation/joi");
 
 router.get("/", monitorController.getAllMonitors);
 router.get("/:monitorId", monitorController.getMonitorById);
+router.get("/user/:userId", monitorController.getMonitorsByUserId);
 
 module.exports = router;
diff --git a/Server/validation/joi.js b/Server/validation/joi.js
index c5b2b58d1..2fb59a377 100644
--- a/Server/validation/joi.js
+++ b/Server/validation/joi.js
@@ -1,4 +1,5 @@
 const joi = require("joi");
+const user = require("../models/user");
 
 const authValidation = joi.object({
   email: joi.string().email().required(),
@@ -9,4 +10,12 @@ const getMonitorsByIdValidation = joi.object({
   monitorId: joi.string().required(),
 });
 
-module.exports = { authValidation, getMonitorsByIdValidation };
+const getMonitorsByUserIdValidation = joi.object({
+  userId: joi.string().required(),
+});
+
+module.exports = {
+  authValidation,
+  getMonitorsByIdValidation,
+  getMonitorsByUserIdValidation,
+};

From 49a11b5abbe57b4526242f235c02e3f2af18d60e Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Fri, 10 May 2024 14:03:36 -0700
Subject: [PATCH 06/14] Added some comments RE fake database

---
 Server/controllers/monitorController.js | 2 ++
 Server/db/FakeDb.js                     | 6 ++++++
 2 files changed, 8 insertions(+)

diff --git a/Server/controllers/monitorController.js b/Server/controllers/monitorController.js
index f7a85ce4c..deaf2d8ba 100644
--- a/Server/controllers/monitorController.js
+++ b/Server/controllers/monitorController.js
@@ -2,6 +2,8 @@ const {
   getMonitorsByIdValidation,
   getMonitorsByUserIdValidation,
 } = require("../validation/joi");
+
+// Fake database, if we have standardized DB methods we can swap out databases easily
 const db = require("../db/FakeDb");
 
 // Gets all monitors
diff --git a/Server/db/FakeDb.js b/Server/db/FakeDb.js
index b604a9294..8eed7779c 100644
--- a/Server/db/FakeDb.js
+++ b/Server/db/FakeDb.js
@@ -1,3 +1,9 @@
+// **************************
+// FakeDB is used to simulate the database
+// If we standarize the DB methods we can swap out databases easily
+// Too bad JS doesn't have interfaces, that would be nice.  TypeScript anyone?
+// **************************
+
 const Monitor = require("../models/Monitor");
 
 const FAKE_MONITOR_DATA = [];

From 7d6d2d341b1edfd313e6cf1c97cac8d0b9b68143 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Fri, 10 May 2024 14:04:13 -0700
Subject: [PATCH 07/14] Added one last comment

---
 Server/db/FakeDb.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/Server/db/FakeDb.js b/Server/db/FakeDb.js
index 8eed7779c..d3b793f11 100644
--- a/Server/db/FakeDb.js
+++ b/Server/db/FakeDb.js
@@ -49,4 +49,5 @@ const getMonitorsByUserId = async (userId) => {
   return userMonitors;
 };
 
+// Conisder standardizing these methods so we can swap databases easily
 module.exports = { getAllMonitors, getMonitorById, getMonitorsByUserId };

From 8d6529d497c481935417d9dc187d03291d334f33 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Fri, 10 May 2024 14:34:04 -0700
Subject: [PATCH 08/14] Added some endpoint info to readme

---
 README.md | 92 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 92 insertions(+)

diff --git a/README.md b/README.md
index 19a0670e1..4b5375c8f 100644
--- a/README.md
+++ b/README.md
@@ -28,11 +28,103 @@ BlueWave uptime monitoring application
 1.  Change directory to the `Server` directory
 2.  Install all depencies by running `npm install`
 
+---
+
+#### Configuration
+
+Configure the server with the following environmental variables
+
+| ENV Varialbe Name    | Required/Optional | Type   | Description                       |
+| -------------------- | ----------------- | ------ | --------------------------------- |
+| DB_CONNECTION_STRING | Required          | string | Specfies URL for MongoDB Database |
+
+---
+
 #### Starting the Development Server
 
 1.  run `npm run dev` to start the development server
 
+---
+
+#### Endpoints
+
+All endpoints return a response in this format:
+
+| Name    | Type      | Notes                         |
+| ------- | --------- | ----------------------------- |
+| success | `boolean` | Success or failure of request |
+| msg     | `string`  | Message describing response   |
+| data    | `Object`  | Arbitrary Payload             |
+
+Example:
+
+```
+{success: true, msg: "Successful Request", data: {test: testData}}
+```
+
+##### Data Types
+
+###### Monitor
+
+| Name        | Type      | Notes                                    |
+| ----------- | --------- | ---------------------------------------- |
+| userId      | `string`  | Unique ID identifying monitor creator    |
+| name        | `string`  | Name of the monitor                      |
+| description | `string`  | Description of the monitor               |
+| url         | `string`  | Url the monitor will ping                |
+| isActive    | `boolean` | Whether or not the monitor is active     |
+| interval    | `integer` | Interval with which to ping monitor (ms) |
+| updatedAt   | `Date`    | Last time the monitor was updated        |
+| CreatedAt   | `Date`    | When the monitor was updated             |
+
+---
+
+##### GET /api/v1/monitors
+
+###### Response
+
+| Status Code | Type                  | Description                      |
+| ----------- | --------------------- | -------------------------------- |
+| 200         | Response with Payload | Response with a list of monitors |
+
+###### Payload
+
+| Type             | Notes             |
+| ---------------- | ----------------- |
+| `Array[Monitor]` | Array of monitors |
+
+---
+
+##### GET /api/v1/monitor/:id
+
+###### Response
+
+| Status Code | Type                  | Description                    |
+| ----------- | --------------------- | ------------------------------ |
+| 200         | Response with Payload | Response with a single monitor |
+
+###### Payload
+
+| Type      | Notes                                               |
+| --------- | --------------------------------------------------- |
+| `Monitor` | Single monitor with the id in the request parameter |
+
+---
+
+##### GET /api/v1/monitors/user/:userId
+
+| Status Code | Type                  | Description                      |
+| ----------- | --------------------- | -------------------------------- |
+| 200         | Response with Payload | Response with a list of monitors |
+
+###### Payload
+
+| Type             | Notes                                                              |
+| ---------------- | ------------------------------------------------------------------ |
+| `Array[Monitor]` | Array of monitors created by user with userId specified in request |
+
 ## Contributors
+
 <a href="https://github.com/bluewave-labs/bluewave-uptime/graphs/contributors">
   <img src="https://contrib.rocks/image?repo=bluewave-labs/bluewave-uptime" />
 </a>

From dfdfb4f8b5d3a1afd77d8411e87db01667ff564c Mon Sep 17 00:00:00 2001
From: M M <cosmicray23@hotmail.com>
Date: Fri, 10 May 2024 19:53:18 -0700
Subject: [PATCH 09/14] Implemented the search feature.

---
 Client/src/Components/Search/index.css |  0
 Client/src/Components/Search/index.jsx | 41 ++++++++++++++++++++++++++
 Client/src/Pages/Home/index.jsx        |  2 ++
 3 files changed, 43 insertions(+)
 create mode 100644 Client/src/Components/Search/index.css
 create mode 100644 Client/src/Components/Search/index.jsx

diff --git a/Client/src/Components/Search/index.css b/Client/src/Components/Search/index.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/Client/src/Components/Search/index.jsx b/Client/src/Components/Search/index.jsx
new file mode 100644
index 000000000..770db3309
--- /dev/null
+++ b/Client/src/Components/Search/index.jsx
@@ -0,0 +1,41 @@
+import Autocomplete from '@mui/material/Autocomplete';
+import TextField from '@mui/material/TextField';
+import Chip from '@mui/material/Chip';
+import Box from '@mui/material/Box';
+
+const teamMembers = [
+  { title: 'John Doe'},
+  { title: 'Jane Smith'},
+  { title: 'Alex Johnson'},
+];
+
+export default function Search() {
+  return (
+    <Box padding={10}> {/* Add padding to the container */}
+      <Autocomplete
+        multiple
+        id="tags-outlined"
+        options={teamMembers}
+        getOptionLabel={(option) => option.title}
+        filterSelectedOptions
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            label="Team Members"
+            placeholder="Favorites"
+          />
+        )}
+        renderTags={(value, getTagProps) =>
+          value.map((option, index) => (
+            <Chip
+              key={index}
+              variant="outlined"
+              label={option.title}
+              {...getTagProps({ index })}
+            />
+          ))
+        }
+      />
+    </Box>
+  );
+}
diff --git a/Client/src/Pages/Home/index.jsx b/Client/src/Pages/Home/index.jsx
index 28d7d6ac4..8742da6f1 100644
--- a/Client/src/Pages/Home/index.jsx
+++ b/Client/src/Pages/Home/index.jsx
@@ -1,4 +1,5 @@
 import DropdownTeamMember from "../../Components/DropdownTeamMember";
+import Search from "../../Components/Search";
 import "./index.css";
 
 const Home = () => {
@@ -6,6 +7,7 @@ const Home = () => {
     <>
       <div>Home</div>
       <DropdownTeamMember />
+      <Search />
     </>
   );
 };

From 145ff8e7161049b18b5856148fb26c9a7168300c Mon Sep 17 00:00:00 2001
From: M M <cosmicray23@hotmail.com>
Date: Sat, 11 May 2024 11:03:38 -0700
Subject: [PATCH 10/14] Addressed the comments.

---
 Client/src/Components/Search/index.jsx | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/Client/src/Components/Search/index.jsx b/Client/src/Components/Search/index.jsx
index 770db3309..391b95c02 100644
--- a/Client/src/Components/Search/index.jsx
+++ b/Client/src/Components/Search/index.jsx
@@ -2,6 +2,7 @@ import Autocomplete from '@mui/material/Autocomplete';
 import TextField from '@mui/material/TextField';
 import Chip from '@mui/material/Chip';
 import Box from '@mui/material/Box';
+import { useTheme } from "@mui/material";
 
 const teamMembers = [
   { title: 'John Doe'},
@@ -9,9 +10,16 @@ const teamMembers = [
   { title: 'Alex Johnson'},
 ];
 
-export default function Search() {
+/**
+ * @component
+ * @returns {JSX.Element}
+ */
+
+export default function Search()
+ {
+  const theme = useTheme();
   return (
-    <Box padding={10}> {/* Add padding to the container */}
+    <Box padding={theme.spacing(2)}> {/* Add padding to the container */}
       <Autocomplete
         multiple
         id="tags-outlined"
@@ -26,12 +34,12 @@ export default function Search() {
           />
         )}
         renderTags={(value, getTagProps) =>
-          value.map((option, index) => (
+          value.map((option) => (
             <Chip
-              key={index}
+              key={option.title}
               variant="outlined"
               label={option.title}
-              {...getTagProps({ index })}
+              {...getTagProps({ option })}
             />
           ))
         }

From 8cc92e6c40d44f73a6bb92b5492707f5a34c5921 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Mon, 13 May 2024 14:21:27 -0700
Subject: [PATCH 11/14] Implemented MongoDB example db, updated documentation

---
 Server/configs/db.js                    | 29 ++++-----
 Server/controllers/monitorController.js |  9 +--
 Server/db/FakeDb.js                     | 38 ++++++++++--
 Server/db/MongoDB.js                    | 80 +++++++++++++++++++++++++
 Server/index.js                         | 27 ++++++++-
 Server/routes/monitorRoute.js           |  1 -
 6 files changed, 154 insertions(+), 30 deletions(-)
 create mode 100644 Server/db/MongoDB.js

diff --git a/Server/configs/db.js b/Server/configs/db.js
index 174978ca3..ba3c8b660 100644
--- a/Server/configs/db.js
+++ b/Server/configs/db.js
@@ -1,18 +1,15 @@
-const mongoose = require('mongoose')
+const PORT = process.env.PORT || 5000;
 
-const PORT = process.env.PORT || 5000
+const connectDbAndRunServer = async (app, db) => {
+  try {
+    await db.connect();
+    app.listen(PORT, () => {
+      console.log(`server started on port:${PORT}`);
+    });
+  } catch (error) {
+    console.log("Failed to connect to DB");
+    console.error(error);
+  }
+};
 
-const connectDbAndRunServer = async (app) => {    
-    await mongoose.connect(process.env.DB_CONNECTION_STRING).then(() => {
-        console.log("DB connected")
-        // run server
-        app.listen(PORT, () => {
-            console.log(`server started on port:${PORT}`)
-        })
-    }).catch((err) => {
-        console.log(err)
-    })
-}
-
-
-module.exports = { connectDbAndRunServer }
\ No newline at end of file
+module.exports = { connectDbAndRunServer };
diff --git a/Server/controllers/monitorController.js b/Server/controllers/monitorController.js
index deaf2d8ba..dda18d8ff 100644
--- a/Server/controllers/monitorController.js
+++ b/Server/controllers/monitorController.js
@@ -3,13 +3,10 @@ const {
   getMonitorsByUserIdValidation,
 } = require("../validation/joi");
 
-// Fake database, if we have standardized DB methods we can swap out databases easily
-const db = require("../db/FakeDb");
-
 // Gets all monitors
 const getAllMonitors = async (req, res) => {
   try {
-    const monitors = await db.getAllMonitors();
+    const monitors = await req.db.getAllMonitors();
     return res.json({ success: true, msg: "Monitors found", data: monitors });
   } catch (error) {
     return res.status(500).json({ success: false, msg: error.message });
@@ -27,7 +24,7 @@ const getMonitorById = async (req, res) => {
 
   try {
     const monitorId = req.params.monitorId;
-    const monitor = await db.getMonitorById(monitorId);
+    const monitor = await req.db.getMonitorById(monitorId);
     return res.json({ success: true, msg: "Monitor found", data: monitor });
   } catch (error) {
     return res.status(500).json({ success: false, msg: error.message });
@@ -45,7 +42,7 @@ const getMonitorsByUserId = async (req, res) => {
 
   try {
     const userId = req.params.userId;
-    const monitors = await db.getMonitorsByUserId(userId);
+    const monitors = await req.db.getMonitorsByUserId(userId);
     return res.json({
       success: true,
       msg: `Monitors for user ${userId} found`,
diff --git a/Server/db/FakeDb.js b/Server/db/FakeDb.js
index d3b793f11..6dfa89ac9 100644
--- a/Server/db/FakeDb.js
+++ b/Server/db/FakeDb.js
@@ -1,7 +1,23 @@
 // **************************
-// FakeDB is used to simulate the database
-// If we standarize the DB methods we can swap out databases easily
-// Too bad JS doesn't have interfaces, that would be nice.  TypeScript anyone?
+// The idea here is to provide a layer of abstraction between the database and whoever is using it.
+// Instead of directly calling mongoose methods, we can call the methods on the DB object.
+// If this were Typescript or Java or Golang an interface would be implemented to ensure the methods are available.
+// But we do the best we can with Javascript.
+//
+// If the methods are consistent all we have to do to swap out one DB for another is simply change the import.
+//
+// Example:
+// We start with the fake DB:
+//
+// const db = require("../db/FakeDb");
+// const monitors = await db.getAllMonitors();
+//
+// And when we want to swtich to a real DB, all we have to do is swap the import
+//
+// const db = require("../db/MongoDb");
+// const monitors = await db.getAllMonitors();
+//
+// The rest of the code is the same, as all the `db` methods are standardized.
 // **************************
 
 const Monitor = require("../models/Monitor");
@@ -23,6 +39,14 @@ for (let i = 0; i < 10; i++) {
   );
 }
 
+const connect = async () => {
+  try {
+    await console.log("Connected to FakeDB");
+  } catch (error) {
+    console.error(error);
+  }
+};
+
 const getAllMonitors = async () => {
   return FAKE_MONITOR_DATA;
 };
@@ -49,5 +73,9 @@ const getMonitorsByUserId = async (userId) => {
   return userMonitors;
 };
 
-// Conisder standardizing these methods so we can swap databases easily
-module.exports = { getAllMonitors, getMonitorById, getMonitorsByUserId };
+module.exports = {
+  connect,
+  getAllMonitors,
+  getMonitorById,
+  getMonitorsByUserId,
+};
diff --git a/Server/db/MongoDB.js b/Server/db/MongoDB.js
new file mode 100644
index 000000000..3c48a448d
--- /dev/null
+++ b/Server/db/MongoDB.js
@@ -0,0 +1,80 @@
+const Monitor = require("../models/Monitor");
+const mongoose = require("mongoose");
+
+const seedDatabase = async () => {
+  const FAKE_MONITOR_DATA = [];
+
+  for (let i = 0; i < 10; i++) {
+    FAKE_MONITOR_DATA.push(
+      new Monitor({
+        userId: i % 2 === 0 ? 1 : 2,
+        name: `Monitor ${i}`,
+        description: `Description for Monitor ${i}`,
+        url: `https://monitor${i}.com`,
+        isActive: true,
+        interval: 60000,
+        updated_at: new Date(),
+        created_at: new Date(),
+      })
+    );
+  }
+
+  for (const monitor of FAKE_MONITOR_DATA) {
+    await monitor.save();
+  }
+};
+
+const connect = async () => {
+  try {
+    await mongoose.connect(process.env.DB_CONNECTION_STRING);
+    console.log("Connected to MongoDB");
+
+    const monitors = await Monitor.find();
+    if (monitors.length === 0) {
+      console.log("Seeding database with fake data");
+      await seedDatabase();
+    } else {
+      console.log("Database already seeded");
+    }
+  } catch (error) {
+    console.error("Failed to connect to MongoDB");
+    throw error;
+  }
+};
+
+// Gets all monitors
+const getAllMonitors = async (req, res) => {
+  try {
+    const monitors = await Monitor.find();
+    return monitors;
+  } catch (error) {
+    throw error;
+  }
+};
+
+// Get a monitor by ID
+const getMonitorById = async (req, res) => {
+  try {
+    const monitor = await Monitor.findById(req.params.monitorId);
+    return monitor;
+  } catch (error) {
+    throw error;
+  }
+};
+
+// Gets a monitor by user ID
+const getMonitorsByUserId = async (req, res) => {
+  try {
+    const monitors = await Monitor.find({ userId: req.params.userId });
+    return monitors;
+  } catch (error) {
+    throw error;
+  }
+};
+
+module.exports = {
+  connect,
+  getAllMonitors,
+  getMonitorById,
+  getMonitorsByUserId,
+};
diff --git a/Server/index.js b/Server/index.js
index 3913d1a58..c8136c2d0 100644
--- a/Server/index.js
+++ b/Server/index.js
@@ -3,10 +3,23 @@ const helmet = require("helmet");
 const cors = require("cors");
 const authRouter = require("./routes/authRoute");
 const monitorRouter = require("./routes/monitorRoute");
-const { connectDbAndRunServer } = require("./configs/db");
+const { connectDbAndRunServer, connectViaInterface } = require("./configs/db");
 require("dotenv").config();
 // const { sendEmail } = require('./utils/sendEmail')
 
+// **************************
+// Here is where we can swap out DBs easily.  Spin up a mongoDB instance and try it out.
+// Simply comment out the FakeDB and uncomment the MongoDB or vice versa.
+// We can easily swap between any type of data source as long as the methods are implemented
+//
+// FakeDB
+// const db = require("./db/FakeDb");
+//
+// MongoDB
+const db = require("./db/MongoDB");
+//
+// **************************
+
 /**
  * NOTES
  * Email Service will be added
@@ -23,6 +36,16 @@ app.use(
 app.use(express.json());
 app.use(helmet());
 
+// **************************
+// Make DB accessible anywhere we have a Request object
+// By adding the DB to the request object, we can access it in any route
+// Thus we do not need to import it in every route file, and we can easily swap out DBs as there is only one place to change it
+// **************************
+app.use((req, res, next) => {
+  req.db = db;
+  next();
+});
+
 //routes
 app.use("/api/v1/auth", authRouter);
 
@@ -43,4 +66,4 @@ app.use("/api/v1/healthy", (req, res) => {
   }
 });
 
-connectDbAndRunServer(app);
+connectDbAndRunServer(app, db);
diff --git a/Server/routes/monitorRoute.js b/Server/routes/monitorRoute.js
index 7c6767364..e12982905 100644
--- a/Server/routes/monitorRoute.js
+++ b/Server/routes/monitorRoute.js
@@ -1,6 +1,5 @@
 const router = require("express").Router();
 const monitorController = require("../controllers/monitorController");
-
 router.get("/", monitorController.getAllMonitors);
 router.get("/:monitorId", monitorController.getMonitorById);
 router.get("/user/:userId", monitorController.getMonitorsByUserId);

From 7957612a85a59229702e9e9652e7db895b30c1dc Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Mon, 13 May 2024 14:23:03 -0700
Subject: [PATCH 12/14] Removed unused method

---
 Server/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Server/index.js b/Server/index.js
index c8136c2d0..ef8cdc982 100644
--- a/Server/index.js
+++ b/Server/index.js
@@ -3,7 +3,7 @@ const helmet = require("helmet");
 const cors = require("cors");
 const authRouter = require("./routes/authRoute");
 const monitorRouter = require("./routes/monitorRoute");
-const { connectDbAndRunServer, connectViaInterface } = require("./configs/db");
+const { connectDbAndRunServer } = require("./configs/db");
 require("dotenv").config();
 // const { sendEmail } = require('./utils/sendEmail')
 

From 1746cfaa13b3be90f5ee7b435c4a226db34edc9c Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Mon, 13 May 2024 14:50:36 -0700
Subject: [PATCH 13/14] Fixed naming conventions to comply with standard

---
 .../Avatar/{avatar.css => index.css}          |   0
 .../Avatar/{Avatar.jsx => index.jsx}          |   0
 .../Button/{Button.css => index.css}          |   0
 .../Button/{Button.jsx => index.jsx}          |   0
 Client/src/Components/Label/BaseLabel.jsx     |  54 ------
 Client/src/Components/Label/ColoredLabel.jsx  |  67 --------
 Client/src/Components/Label/StautsLabel.jsx   |  46 -----
 .../Label/{BaseLabel.css => index.css}        |   0
 Client/src/Components/Label/index.jsx         | 157 ++++++++++++++++++
 .../Components/Link/{Link.jsx => index.jsx}   |   0
 .../Components/Link/{Link.css => link.css}    |   0
 .../{ProgressStepper.css => index.css}        |   0
 .../{ProgressStepper.jsx => index.jsx}        |   0
 .../Section/{Section.jsx => index.jsx}        |   2 +-
 Client/src/Pages/Demo/Demo.jsx                |  14 +-
 15 files changed, 164 insertions(+), 176 deletions(-)
 rename Client/src/Components/Avatar/{avatar.css => index.css} (100%)
 rename Client/src/Components/Avatar/{Avatar.jsx => index.jsx} (100%)
 rename Client/src/Components/Button/{Button.css => index.css} (100%)
 rename Client/src/Components/Button/{Button.jsx => index.jsx} (100%)
 delete mode 100644 Client/src/Components/Label/BaseLabel.jsx
 delete mode 100644 Client/src/Components/Label/ColoredLabel.jsx
 delete mode 100644 Client/src/Components/Label/StautsLabel.jsx
 rename Client/src/Components/Label/{BaseLabel.css => index.css} (100%)
 create mode 100644 Client/src/Components/Label/index.jsx
 rename Client/src/Components/Link/{Link.jsx => index.jsx} (100%)
 rename Client/src/Components/Link/{Link.css => link.css} (100%)
 rename Client/src/Components/ProgressStepper/{ProgressStepper.css => index.css} (100%)
 rename Client/src/Components/ProgressStepper/{ProgressStepper.jsx => index.jsx} (100%)
 rename Client/src/Components/Section/{Section.jsx => index.jsx} (98%)

diff --git a/Client/src/Components/Avatar/avatar.css b/Client/src/Components/Avatar/index.css
similarity index 100%
rename from Client/src/Components/Avatar/avatar.css
rename to Client/src/Components/Avatar/index.css
diff --git a/Client/src/Components/Avatar/Avatar.jsx b/Client/src/Components/Avatar/index.jsx
similarity index 100%
rename from Client/src/Components/Avatar/Avatar.jsx
rename to Client/src/Components/Avatar/index.jsx
diff --git a/Client/src/Components/Button/Button.css b/Client/src/Components/Button/index.css
similarity index 100%
rename from Client/src/Components/Button/Button.css
rename to Client/src/Components/Button/index.css
diff --git a/Client/src/Components/Button/Button.jsx b/Client/src/Components/Button/index.jsx
similarity index 100%
rename from Client/src/Components/Button/Button.jsx
rename to Client/src/Components/Button/index.jsx
diff --git a/Client/src/Components/Label/BaseLabel.jsx b/Client/src/Components/Label/BaseLabel.jsx
deleted file mode 100644
index aa23aeab3..000000000
--- a/Client/src/Components/Label/BaseLabel.jsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import PropTypes from "prop-types";
-import "./BaseLabel.css";
-import { useTheme } from "@mui/material";
-
-/**
- * @typedef {Object} Styles
- * @param {string} [color] - The text color
- * @param {string} [backgroundColor] - The background color
- * @param {string} [borderColor] - The border color
- */
-
-/**
- * @component
- * @param {Object} props
- * @param {string} props.label - The label of the label
- * @param {Styles} props.styles - CSS Styles passed from parent component
- * @param {React.ReactNode} children - Children passed from parent component
- * @returns {JSX.Element}
- */
-
-const BaseLabel = ({ label, styles, children }) => {
-  const theme = useTheme();
-  // Grab the default borderRadius from the theme to match button style
-  const { borderRadius } = theme.shape;
-  // Calculate padding for the label to mimic button.  Appears to scale correctly, not 100% sure though.
-  const padding = theme.spacing(1 * 0.75, 2);
-
-  return (
-    <div
-      className="label"
-      style={{
-        borderRadius: borderRadius,
-        borderColor: theme.palette.tertiary.main,
-        color: theme.palette.tertiary.main,
-        padding: padding,
-        ...styles,
-      }}
-    >
-      {children}
-      {label}
-    </div>
-  );
-};
-
-BaseLabel.propTypes = {
-  label: PropTypes.string.isRequired,
-  styles: PropTypes.shape({
-    color: PropTypes.string,
-    backgroundColor: PropTypes.string,
-  }),
-  children: PropTypes.node,
-};
-
-export default BaseLabel;
diff --git a/Client/src/Components/Label/ColoredLabel.jsx b/Client/src/Components/Label/ColoredLabel.jsx
deleted file mode 100644
index 744652050..000000000
--- a/Client/src/Components/Label/ColoredLabel.jsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { useTheme } from "@mui/material";
-import { PropTypes } from "prop-types";
-import BaseLabel from "./BaseLabel";
-
-// Produces a lighter color based on a hex color and a percent
-// lightenColor("#067647", 20) will produce a color 20% lighter than #067647
-const lightenColor = (color, percent) => {
-  let r = parseInt(color.substring(1, 3), 16);
-  let g = parseInt(color.substring(3, 5), 16);
-  let b = parseInt(color.substring(5, 7), 16);
-
-  const amt = Math.round((255 * percent) / 100);
-
-  r = r + amt <= 255 ? r + amt : 255;
-  g = g + amt <= 255 ? g + amt : 255;
-  b = b + amt <= 255 ? b + amt : 255;
-
-  r = r.toString(16).padStart(2, "0");
-  g = g.toString(16).padStart(2, "0");
-  b = b.toString(16).padStart(2, "0");
-
-  return `#${r}${g}${b}`;
-};
-
-/**
- * @component
- * @param {Object} props
- * @param {string} props.label - The label of the label
- * @param {string} props.color - The color of the label, specified in #RRGGBB format
- * @returns {JSX.Element}
- * @example
- * // Render a red label
- * <ColoredLabel label="Label" color="#FF0000" />
- */
-
-const ColoredLabel = ({ label, color }) => {
-  const theme = useTheme();
-  // If an invalid color is passed, default to the labelGray color
-  if (
-    typeof color !== "string" ||
-    !/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(color)
-  ) {
-    color = theme.palette.labelGray.color;
-  }
-
-  // Calculate lighter shades for border and bg
-  const borderColor = lightenColor(color, 20);
-  const bgColor = lightenColor(color, 75);
-
-  return (
-    <BaseLabel
-      label={label}
-      styles={{
-        color: color,
-        borderColor: borderColor,
-        backgroundColor: bgColor,
-      }}
-    ></BaseLabel>
-  );
-};
-
-ColoredLabel.propTypes = {
-  label: PropTypes.string.isRequired,
-  color: PropTypes.string.isRequired,
-};
-
-export default ColoredLabel;
diff --git a/Client/src/Components/Label/StautsLabel.jsx b/Client/src/Components/Label/StautsLabel.jsx
deleted file mode 100644
index 108ca0f2f..000000000
--- a/Client/src/Components/Label/StautsLabel.jsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import PropTypes from "prop-types";
-import BaseLabel from "./BaseLabel";
-import { Box } from "@mui/material";
-import { useTheme } from "@mui/material";
-
-/**
- * @component
- * @param {Object} props
- * @param {'Seen' | 'Waiting' | 'New' | 'Active'} props.status - The status for the label
- * @returns {JSX.Element}
- * @example
- * // Render an active label
- * <StatusLabel status="Active" />
- */
-
-const StatusLabel = ({ status }) => {
-  const theme = useTheme();
-
-  const colorLookup = {
-    Seen: theme.palette.labelGray.color,
-    Waiting: theme.palette.labelRed.color,
-    New: theme.palette.labelOrange.color,
-    Active: theme.palette.labelGreen.color,
-  };
-
-  // Look up the color for the status, default to labelGray if not found
-  const color = colorLookup[status] || theme.palette.labelGray.color;
-
-  return (
-    <BaseLabel label={status}>
-      <Box
-        width={12}
-        height={12}
-        bgcolor={color}
-        borderRadius="50%"
-        marginRight={1}
-      />
-    </BaseLabel>
-  );
-};
-
-StatusLabel.propTypes = {
-  status: PropTypes.oneOf(["Seen", "Waiting", "New", "Active"]),
-};
-
-export default StatusLabel;
diff --git a/Client/src/Components/Label/BaseLabel.css b/Client/src/Components/Label/index.css
similarity index 100%
rename from Client/src/Components/Label/BaseLabel.css
rename to Client/src/Components/Label/index.css
diff --git a/Client/src/Components/Label/index.jsx b/Client/src/Components/Label/index.jsx
new file mode 100644
index 000000000..c47b53cb8
--- /dev/null
+++ b/Client/src/Components/Label/index.jsx
@@ -0,0 +1,157 @@
+import PropTypes from "prop-types";
+import { Box } from "@mui/material";
+import { useTheme } from "@mui/material";
+import "./index.css";
+
+/**
+ * @typedef {Object} Styles
+ * @param {string} [color] - The text color
+ * @param {string} [backgroundColor] - The background color
+ * @param {string} [borderColor] - The border color
+ */
+
+/**
+ * @component
+ * @param {Object} props
+ * @param {string} props.label - The label of the label
+ * @param {Styles} props.styles - CSS Styles passed from parent component
+ * @param {React.ReactNode} children - Children passed from parent component
+ * @returns {JSX.Element}
+ */
+
+const BaseLabel = ({ label, styles, children }) => {
+  const theme = useTheme();
+  // Grab the default borderRadius from the theme to match button style
+  const { borderRadius } = theme.shape;
+  // Calculate padding for the label to mimic button.  Appears to scale correctly, not 100% sure though.
+  const padding = theme.spacing(1 * 0.75, 2);
+
+  return (
+    <div
+      className="label"
+      style={{
+        borderRadius: borderRadius,
+        borderColor: theme.palette.tertiary.main,
+        color: theme.palette.tertiary.main,
+        padding: padding,
+        ...styles,
+      }}
+    >
+      {children}
+      {label}
+    </div>
+  );
+};
+
+BaseLabel.propTypes = {
+  label: PropTypes.string.isRequired,
+  styles: PropTypes.shape({
+    color: PropTypes.string,
+    backgroundColor: PropTypes.string,
+  }),
+  children: PropTypes.node,
+};
+
+// Produces a lighter color based on a hex color and a percent
+// lightenColor("#067647", 20) will produce a color 20% lighter than #067647
+const lightenColor = (color, percent) => {
+  let r = parseInt(color.substring(1, 3), 16);
+  let g = parseInt(color.substring(3, 5), 16);
+  let b = parseInt(color.substring(5, 7), 16);
+
+  const amt = Math.round((255 * percent) / 100);
+
+  r = r + amt <= 255 ? r + amt : 255;
+  g = g + amt <= 255 ? g + amt : 255;
+  b = b + amt <= 255 ? b + amt : 255;
+
+  r = r.toString(16).padStart(2, "0");
+  g = g.toString(16).padStart(2, "0");
+  b = b.toString(16).padStart(2, "0");
+
+  return `#${r}${g}${b}`;
+};
+
+/**
+ * @component
+ * @param {Object} props
+ * @param {string} props.label - The label of the label
+ * @param {string} props.color - The color of the label, specified in #RRGGBB format
+ * @returns {JSX.Element}
+ * @example
+ * // Render a red label
+ * <ColoredLabel label="Label" color="#FF0000" />
+ */
+
+const ColoredLabel = ({ label, color }) => {
+  const theme = useTheme();
+  // If an invalid color is passed, default to the labelGray color
+  if (
+    typeof color !== "string" ||
+    !/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(color)
+  ) {
+    color = theme.palette.labelGray.color;
+  }
+
+  // Calculate lighter shades for border and bg
+  const borderColor = lightenColor(color, 20);
+  const bgColor = lightenColor(color, 75);
+
+  return (
+    <BaseLabel
+      label={label}
+      styles={{
+        color: color,
+        borderColor: borderColor,
+        backgroundColor: bgColor,
+      }}
+    ></BaseLabel>
+  );
+};
+
+ColoredLabel.propTypes = {
+  label: PropTypes.string.isRequired,
+  color: PropTypes.string.isRequired,
+};
+
+/**
+ * @component
+ * @param {Object} props
+ * @param {'Seen' | 'Waiting' | 'New' | 'Active'} props.status - The status for the label
+ * @returns {JSX.Element}
+ * @example
+ * // Render an active label
+ * <StatusLabel status="Active" />
+ */
+
+const StatusLabel = ({ status }) => {
+  const theme = useTheme();
+
+  const colorLookup = {
+    Seen: theme.palette.labelGray.color,
+    Waiting: theme.palette.labelRed.color,
+    New: theme.palette.labelOrange.color,
+    Active: theme.palette.labelGreen.color,
+  };
+
+  // Look up the color for the status, default to labelGray if not found
+  const color = colorLookup[status] || theme.palette.labelGray.color;
+
+  return (
+    <BaseLabel label={status}>
+      <Box
+        width={12}
+        height={12}
+        bgcolor={color}
+        borderRadius="50%"
+        marginRight={1}
+      />
+    </BaseLabel>
+  );
+};
+
+StatusLabel.propTypes = {
+  status: PropTypes.oneOf(["Seen", "Waiting", "New", "Active"]),
+};
+
+export { ColoredLabel, StatusLabel };
diff --git a/Client/src/Components/Link/Link.jsx b/Client/src/Components/Link/index.jsx
similarity index 100%
rename from Client/src/Components/Link/Link.jsx
rename to Client/src/Components/Link/index.jsx
diff --git a/Client/src/Components/Link/Link.css b/Client/src/Components/Link/link.css
similarity index 100%
rename from Client/src/Components/Link/Link.css
rename to Client/src/Components/Link/link.css
diff --git a/Client/src/Components/ProgressStepper/ProgressStepper.css b/Client/src/Components/ProgressStepper/index.css
similarity index 100%
rename from Client/src/Components/ProgressStepper/ProgressStepper.css
rename to Client/src/Components/ProgressStepper/index.css
diff --git a/Client/src/Components/ProgressStepper/ProgressStepper.jsx b/Client/src/Components/ProgressStepper/index.jsx
similarity index 100%
rename from Client/src/Components/ProgressStepper/ProgressStepper.jsx
rename to Client/src/Components/ProgressStepper/index.jsx
diff --git a/Client/src/Components/Section/Section.jsx b/Client/src/Components/Section/index.jsx
similarity index 98%
rename from Client/src/Components/Section/Section.jsx
rename to Client/src/Components/Section/index.jsx
index 3ce773c81..9c5415385 100644
--- a/Client/src/Components/Section/Section.jsx
+++ b/Client/src/Components/Section/index.jsx
@@ -10,7 +10,7 @@ import {
 } from "@mui/material";
 import MenuIcon from "@mui/icons-material/Menu";
 import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
-import Button from "../Button/Button";
+import Button from "../Button/";
 import AddIcon from "@mui/icons-material/Add";
 
 /**
diff --git a/Client/src/Pages/Demo/Demo.jsx b/Client/src/Pages/Demo/Demo.jsx
index 1c294ba5c..8ee00818b 100644
--- a/Client/src/Pages/Demo/Demo.jsx
+++ b/Client/src/Pages/Demo/Demo.jsx
@@ -1,7 +1,6 @@
 import React from "react";
-import Button from "../../Components/Button/Button";
-import Link from "../../Components/Link/Link";
-import ColoredLabel from "../../Components/Label/ColoredLabel";
+import Button from "../../Components/Button/";
+import Link from "../../Components/Link";
 import {
   useTheme,
   Switch,
@@ -14,13 +13,12 @@ import {
   Tab,
   Tabs,
 } from "@mui/material";
-import StatusLabel from "../../Components/Label/StautsLabel";
-import Avatar from "../../Components/Avatar/Avatar";
-import ProgressStepper from "../../Components/ProgressStepper/ProgressStepper";
+import { ColoredLabel, StatusLabel } from "../../Components/Label/";
+import Avatar from "../../Components/Avatar/";
+import ProgressStepper from "../../Components/ProgressStepper";
 import avatarImage from "../../assets/Images/avatar_placeholder.png";
-import Section from "../../Components/Section/Section";
+import Section from "../../Components/Section";
 import { DataGrid } from "@mui/x-data-grid";
-
 import { DatePicker } from "@mui/x-date-pickers/DatePicker";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";

From 4e12778f001b0e809228fe11a74a7e82ae6aba1c Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Mon, 13 May 2024 15:22:35 -0700
Subject: [PATCH 14/14] Remove seed data, not required

---
 Server/db/MongoDB.js | 31 -------------------------------
 1 file changed, 31 deletions(-)

diff --git a/Server/db/MongoDB.js b/Server/db/MongoDB.js
index 3c48a448d..6ad783877 100644
--- a/Server/db/MongoDB.js
+++ b/Server/db/MongoDB.js
@@ -1,41 +1,10 @@
 const Monitor = require("../models/Monitor");
 const mongoose = require("mongoose");
 
-const seedDatabase = async () => {
-  const FAKE_MONITOR_DATA = [];
-
-  for (let i = 0; i < 10; i++) {
-    FAKE_MONITOR_DATA.push(
-      new Monitor({
-        userId: i % 2 === 0 ? 1 : 2,
-        name: `Monitor ${i}`,
-        description: `Description for Monitor ${i}`,
-        url: `https://monitor${i}.com`,
-        isActive: true,
-        interval: 60000,
-        updated_at: new Date(),
-        created_at: new Date(),
-      })
-    );
-  }
-
-  for (const monitor of FAKE_MONITOR_DATA) {
-    await monitor.save();
-  }
-};
-
 const connect = async () => {
   try {
     await mongoose.connect(process.env.DB_CONNECTION_STRING);
     console.log("Connected to MongoDB");
-
-    const monitors = await Monitor.find();
-    if (monitors.length === 0) {
-      console.log("Seeding database with fake data");
-      await seedDatabase();
-    } else {
-      console.log("Database already seeded");
-    }
   } catch (error) {
     console.error("Failed to connect to MongoDB");
     throw error;