renaming app directory

2025-02-23 14:55:13 -06:00
parent 5f26c48aba
commit e3f20617e9
43 changed files with 3 additions and 3 deletions
--- a/app/src/App.tsx
+++ b/app/src/App.tsx
@@ -0,0 +1,25 @@
+import { Route, Routes } from 'react-router-dom';
+import Projects from './components/projects/Projects';
+import SiteNav from './components/siteNav/SiteNav';
+import { useAppContext } from './hooks/appContext/UseAppContext';
+import { IPublicClientApplication } from '@azure/msal-browser';
+import { MsalProvider } from '@azure/msal-react';
+
+interface AppProps {
+  pca: IPublicClientApplication
+}
+
+const App = ({ pca }: AppProps) => {
+  const appContext = useAppContext();
+
+  return (
+    <MsalProvider instance={pca}>
+      <SiteNav />
+      <Routes>
+        <Route path='/' element={<Projects />} />
+      </Routes>
+    </MsalProvider>
+  )
+}
+
+export default App
--- a/app/src/assets/react.svg
+++ b/app/src/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/app/src/auth/msalConfig.ts
+++ b/app/src/auth/msalConfig.ts
@@ -0,0 +1,70 @@
+/*
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+import { LogLevel } from '@azure/msal-browser';
+
+/**
+ * Configuration object to be passed to MSAL instance on creation. 
+ * For a full list of MSAL.js configuration parameters, visit:
+ * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md 
+ */
+
+export const msalConfig = {
+    auth: {
+        clientId: import.meta.env.VITE_CLIENT_ID, // This is the ONLY mandatory field that you need to supply.
+        authority: `https://login.microsoftonline.com/${import.meta.env.VITE_TENANT_ID}`, // Replace the placeholder with your tenant subdomain 
+        redirectUri: import.meta.env.VITE_REDIRECT_URL, // Points to window.location.origin. You must register this URI on Microsoft Entra admin center/App Registration.
+        postLogoutRedirectUri: '/', // Indicates the page to navigate after logout.
+        navigateToLoginRequestUrl: false, // If "true", will navigate back to the original request location before processing the auth code response.
+    },
+    cache: {
+        cacheLocation: 'sessionStorage', // Configures cache location. "sessionStorage" is more secure, but "localStorage" gives you SSO between tabs.
+        storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
+    },
+    system: {
+        loggerOptions: {
+            loggerCallback: (level: any, message: any, containsPii: any) => {
+                if (containsPii) {
+                    return;
+                }
+                switch (level) {
+                    case LogLevel.Error:
+                        console.error(message);
+                        return;
+                    case LogLevel.Info:
+                        console.info(message);
+                        return;
+                    case LogLevel.Verbose:
+                        console.debug(message);
+                        return;
+                    case LogLevel.Warning:
+                        console.warn(message);
+                        return;
+                    default:
+                        return;
+                }
+            },
+        },
+    },
+};
+
+/**
+ * Scopes you add here will be prompted for user consent during sign-in.
+ * By default, MSAL.js will add OIDC scopes (openid, profile, email) to any login request.
+ * For more information about OIDC scopes, visit: 
+ * https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-permissions-and-consent#openid-connect-scopes
+ */
+export const loginRequest = {
+    scopes: [`api://${import.meta.env.VITE_CLIENT_ID}/user_impersonation`],
+};
+
+/**
+ * An optional silentRequest object can be used to achieve silent SSO
+ * between applications by providing a "login_hint" property.
+ */
+// export const silentRequest = {
+//     scopes: ["openid", "profile"],
+//     loginHint: "example@domain.net"
+// };
--- a/app/src/components/actionMenu/ActionMenu.tsx
+++ b/app/src/components/actionMenu/ActionMenu.tsx
@@ -0,0 +1,61 @@
+import { useState } from 'react';
+import { ActionMenuProps } from './ActionMenuProps.interface';
+import {
+  Icon,
+  IconButton,
+  ListItemIcon,
+  ListItemText,
+  Menu,
+  MenuItem,
+} from '@noahspan/noahspan-components';
+import { FormMode } from '../../enums/formMode';
+
+const ActionMenu = ({ id, onDelete, onOpenCloseForm }: ActionMenuProps) => {
+  const [anchorElAction, setAnchorElAction] = useState<null | HTMLElement>(
+    null
+  );
+
+  const onOpenActionMenu = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorElAction(event.currentTarget);
+  };
+
+  const onCloseActionMenu = () => {
+    setAnchorElAction(null);
+  };
+
+  return (
+    <div>
+      <IconButton onClick={onOpenActionMenu}>
+        <Icon iconName='fa-ellipsis-vertical' size="sm" />
+      </IconButton>
+      <Menu
+        anchorEl={anchorElAction}
+        keepMounted
+        open={Boolean(anchorElAction)}
+        onClose={onCloseActionMenu}
+      >
+        <MenuItem onClick={() => onOpenCloseForm(FormMode.EDIT, id)}>
+          <ListItemIcon>
+            <Icon iconName='fa-pen' size="lg" />
+          </ListItemIcon>
+          <ListItemText>Edit</ListItemText>
+        </MenuItem>
+        <MenuItem onClick={() => onOpenCloseForm(FormMode.VIEW, id)}>
+          <ListItemIcon>
+            <Icon iconName='fa-eye' size="lg" />
+          </ListItemIcon>
+          <ListItemText>View</ListItemText>
+        </MenuItem>
+        <hr className="my-3" />
+        <MenuItem onClick={() => onDelete(id)}>
+          <ListItemIcon>
+            <Icon iconName='fa-trash' size="lg" />
+          </ListItemIcon>
+          <ListItemText>Delete</ListItemText>
+        </MenuItem>
+      </Menu>
+    </div>
+  );
+};
+
+export default ActionMenu;
--- a/app/src/components/actionMenu/ActionMenuProps.interface.tsx
+++ b/app/src/components/actionMenu/ActionMenuProps.interface.tsx
@@ -0,0 +1,7 @@
+import { FormMode } from '../../enums/formMode';
+
+export interface ActionMenuProps {
+  id: string;
+  onDelete: (entryId: string) => void;
+  onOpenCloseForm: (formMode: FormMode, id: string) => void;
+}
--- a/app/src/components/confirmationDialog/ConfirmationDialog.tsx
+++ b/app/src/components/confirmationDialog/ConfirmationDialog.tsx
@@ -0,0 +1,51 @@
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  Icon,
+  Spinner
+} from '@noahspan/noahspan-components';
+import { ConfirmationDialogProps } from './ConfirmationDialogProps.interface';
+
+const ConfirmationDialog = ({
+  contentText,
+  isLoading,
+  isOpen,
+  onCancel,
+  onConfirm,
+  title
+}: ConfirmationDialogProps) => {
+  return (
+    <Dialog
+      onClose={onCancel}
+      open={isOpen}
+      sx={{
+        '& .MuiDialog-paper': { width: '2000px' }
+      }}
+    >
+      <DialogTitle>{title}</DialogTitle>
+      <DialogContent sx={{ textAlign: 'center' }}>
+        {!isLoading && <DialogContentText>{contentText}</DialogContentText>}
+        {isLoading && <Spinner />}
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onCancel} variant="outlined" startIcon={<Icon iconName='fa-xmark' />}>
+          No
+        </Button>
+        <Button
+          onClick={onConfirm}
+          variant="contained"
+          startIcon={<Icon iconName='fa-circle-check'/>}
+        >
+          Yes
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default ConfirmationDialog;
--- a/app/src/components/confirmationDialog/ConfirmationDialogProps.interface.ts
+++ b/app/src/components/confirmationDialog/ConfirmationDialogProps.interface.ts
@@ -0,0 +1,8 @@
+export interface ConfirmationDialogProps {
+  contentText: string;
+  isLoading: boolean;
+  isOpen: boolean;
+  onCancel: () => void;
+  onConfirm: () => void;
+  title: string;
+}
--- a/app/src/components/profile/Profile.tsx
+++ b/app/src/components/profile/Profile.tsx
@@ -0,0 +1,108 @@
+// import {
+//   Box,
+//   Container,
+//   Grid,
+//   Typography
+// } from '@noahspan/noahspan-components';
+// import profile from '../../../data/profile/profile.json';
+
+// const getSkills = (category: string) => {
+//   let skillsString: string = '';
+
+//   for (const skill of profile.skills) {
+//     console.log(skill)
+//     if (skill.category === category) {
+//       skillsString += `${skill.group} (`
+//       console.log(skillsString)
+//       for (const skillName of skill.skills) {
+//         skillsString += `${skillName}, `
+//       }
+
+//       skillsString += '), ';
+//     }
+//   }
+//   console.log(skillsString)
+//   return skillsString
+// }
+
+// const Profile = () => {
+//   return (
+//     <Container>
+//       <Box sx={{ margin: '20px' }}>
+//         <Grid container spacing={1}>
+//           <Grid size={12}>
+//             <Typography variant="h5">{`${profile.intro.firstName} ${profile.intro.lastName}`}</Typography>
+//           </Grid>
+//           <Grid size={12}>
+//             <Typography variant="body1">{profile.intro.title}</Typography>
+//           </Grid>
+//           <Grid size={12}>
+//             <Typography variant="body1">{profile.intro.location}</Typography>
+//           </Grid>
+//           <Grid size={12}>
+//             <Typography variant="h5">Summary</Typography>
+//           </Grid>
+//           <Grid size={12}>
+//             <Typography variant="body1">{profile.about.details}</Typography>
+//           </Grid>
+//           <Grid size={12}>
+//             <Typography variant="h5">Skills</Typography>
+//           </Grid>
+//           <Grid size={12}>
+//             <Typography variant="h6">Experienced</Typography>
+//           </Grid>
+//           <Grid size={12}>
+//             <Typography variant="body1">{getSkills('Experienced')}</Typography>
+//           </Grid>
+//           <Grid size={12}>
+//             <Typography variant="h6">Familiar</Typography>
+//           </Grid>
+//           <Grid size={12}>
+//             <Typography variant="body1">{getSkills('Familiar')}</Typography>
+//           </Grid>
+//           <Grid size={12}>
+//             <Typography variant="h5">Experience</Typography>
+//           </Grid>
+//           {profile.experiences.length > 0 && profile.experiences.map((experience) => {
+//             return (
+//               <>
+//                 <Grid size={6}>
+//                   <Typography variant='h6'>{experience.jobTitle}</Typography>
+//                 </Grid>
+//                 <Grid display='flex' justifyContent='right' size={6}>
+//                   <Typography variant='body1'>{`${experience.startDate}-${experience.endDate}`}</Typography>
+//                 </Grid>
+//                 <Grid size={6}>
+//                   <Typography variant='body1'>{experience.company}</Typography>
+//                 </Grid>
+//                 <Grid display='flex' justifyContent='right' size={6}>
+//                   <Typography variant='body1'>{experience.location}</Typography>
+//                 </Grid>
+//               </>
+//             )
+//           })}
+//           {profile.experiences.length > 0 && profile.education.map((education) => {
+//             return (
+//               <>
+//                 <Grid size={6}>
+//                   <Typography variant='h6'>{education.school}</Typography>
+//                 </Grid>
+//                 <Grid display='flex' justifyContent='right' size={6}>
+//                   <Typography variant='body1'>{education.location}</Typography>
+//                 </Grid>
+//                 <Grid size={6}>
+//                   <Typography variant='body1'>{education.degree}</Typography>
+//                 </Grid>
+//                 <Grid display='flex' justifyContent='right' size={6}>
+//                   <Typography variant='body1'>{education.fieldOfStudy}</Typography>
+//                 </Grid>
+//               </>
+//             )
+//           })}
+//         </Grid>
+//       </Box>
+//     </Container>
+//   )
+// }
+
+// export default Profile;
--- a/app/src/components/projectForm/ProjectForm.tsx
+++ b/app/src/components/projectForm/ProjectForm.tsx
@@ -0,0 +1,354 @@
+import { useEffect, useReducer } from 'react';
+import {
+  Alert,
+  Button,
+  Drawer,
+  Grid,
+  Icon,
+  IconButton,
+  IconName,
+  TextField,
+  Typography
+} from '@noahspan/noahspan-components';
+import { useForm, Controller, FormProvider } from 'react-hook-form';
+import { initialState, reducer } from './reducer';
+import { ProjectFormProps } from './ProjectFormProps.interface';
+import { FormMode } from '../../enums/formMode';
+import { useIsAuthenticated } from '@azure/msal-react';
+import { useAccessToken } from '../../hooks/accessToken/UseAccessToken';
+import { useHttpClient } from '../../hooks/httpClient/UseHttpClient';
+import { AxiosError, AxiosInstance, AxiosResponse } from 'axios';
+
+const ProjectForm = ({ isDrawerOpen, mode, onOpenClose, projectId }: ProjectFormProps) => {
+  const [state, dispatch] = useReducer(reducer, initialState);
+  const httpClient: AxiosInstance = useHttpClient();
+  const { getAccessToken } = useAccessToken();
+  const isAuthenticated = useIsAuthenticated();
+  const defaultValues = {
+    partitionKey: 'project',
+    rowKey: '',
+    title: '',
+    subTitle: '',
+    iconName: '',
+    summary: '',
+    repoName: '',
+    siteUrl: '',
+    order: ''
+  }
+  const methods = useForm({
+    defaultValues: defaultValues
+  });
+  const watchRepoName = methods.watch(['repoName'])
+
+  const onCancel = () => {
+    methods.reset(defaultValues);
+    dispatch({ type: 'SET_IS_DISABLED', payload: false });
+    onOpenClose(FormMode.CANCEL);
+  };
+
+  const onSubmit = async (data: unknown) => {
+    console.log(data)
+    try {
+      dispatch({ type: 'SET_IS_LOADING', payload: true });
+
+      const accessToken: string = await getAccessToken();
+
+      if (!projectId) {
+        await httpClient.post(`api/projects`, data, {
+          headers: {
+            Authorization: accessToken
+          }
+        });
+      } else {
+        await httpClient.put(`api/projects/project/${projectId}`, data, {
+          headers: {
+            Authorization: accessToken
+          }
+        });
+      }
+
+      methods.reset(defaultValues);
+      dispatch({ type: 'SET_IS_DISABLED', payload: false });
+      onOpenClose(FormMode.CANCEL);
+    } catch (error) {
+      const axiosError = error as AxiosError;
+
+      dispatch({ type: 'SET_ERROR', payload: axiosError.message });
+    } finally {
+      dispatch({ type: 'SET_IS_LOADING', payload: false });
+    }
+  };
+
+  useEffect(() => {
+    if (watchRepoName.length > 0) {
+      methods.setValue('rowKey', watchRepoName[0])
+    }
+  }, [watchRepoName])
+
+  useEffect(() => {
+    if (mode === FormMode.VIEW) {
+      dispatch({ type: 'SET_IS_DISABLED', payload: true });
+    }
+  }, [mode]);
+
+  useEffect(() => {
+    const getProject = async () => {
+      try {
+        dispatch({ type: 'SET_IS_LOADING', payload: true });
+
+        const config = isAuthenticated
+          ? { headers: { Authorization: await getAccessToken() } }
+          : {};
+        const response: AxiosResponse = await httpClient.get(
+          `api/projects/project/${projectId}`,
+          config
+        );
+        const entry = response.data;
+
+        methods.reset(entry);
+      } catch (error) {
+        const axiosError = error as AxiosError;
+
+        dispatch({ type: 'SET_ERROR', payload: axiosError.message });
+      } finally {
+        dispatch({ type: 'SET_IS_LOADING', payload: false });
+      }
+    };
+
+    if (projectId && isDrawerOpen) {
+      getProject();
+    }
+  }, [projectId]);
+
+  return (
+    <Drawer
+      open={isDrawerOpen}
+      anchor='right'
+      PaperProps={{
+        sx: {
+          padding: '30px',
+          width: '33%'
+        }
+      }}
+    >
+      <FormProvider {...methods}>
+        <form onSubmit={methods.handleSubmit(onSubmit)}>
+          <Grid container spacing={2}>
+            <Grid size={11}>
+              <Typography variant='h4'>{`${mode.toString().toLowerCase().charAt(0).toUpperCase() + mode.toString().slice(1).toLowerCase()} Project`}</Typography>
+            </Grid>
+            <Grid display="flex" justifyContent="right" size={1}>
+              <IconButton onClick={onCancel}>
+                <Icon iconName={IconName.XMARK} />
+              </IconButton>
+            </Grid>
+            {state.error && (
+              <Grid display="flex" justifyContent="center" size={12}>
+                <Alert
+                  onClose={() =>
+                    dispatch({ type: 'SET_ERROR', payload: undefined })
+                  }
+                  severity="error"
+                  sx={{ width: '100%' }}
+                >
+                  {state.error}
+                </Alert>
+              </Grid>
+            )}
+            <Grid alignItems="center" display="flex" size={4}>
+              <Typography variant="body1">Order</Typography>
+            </Grid>
+            <Grid size={8}>
+              <Controller
+                name="order"
+                control={methods.control}
+                render={({ field: { onChange, value } }) => (
+                  <TextField
+                    disabled={state.isDisabled}
+                    error={methods.formState.errors.siteUrl ? true : false}
+                    fullWidth
+                    helperText={
+                      methods.formState.errors.siteUrl
+                        ? methods.formState.errors.siteUrl.message?.toString()
+                        : undefined
+                    }
+                    onChange={onChange}
+                    value={value}
+                  />
+                )}
+              />
+            </Grid>
+            <Grid alignItems="center" display="flex" size={4}>
+              <Typography variant="body1">Title</Typography>
+            </Grid>
+            <Grid size={8}>
+              <Controller
+                name="title"
+                control={methods.control}
+                render={({ field: { onChange, value } }) => (
+                  <TextField
+                    disabled={state.isDisabled}
+                    error={methods.formState.errors.title ? true : false}
+                    fullWidth
+                    helperText={
+                      methods.formState.errors.title
+                        ? methods.formState.errors.title.message?.toString()
+                        : undefined
+                    }
+                    onChange={onChange}
+                    value={value}
+                  />
+                )}
+              />
+            </Grid>
+            <Grid alignItems="center" display="flex" size={4}>
+              <Typography variant="body1">Sub Title</Typography>
+            </Grid>
+            <Grid size={8}>
+              <Controller
+                name="subTitle"
+                control={methods.control}
+                render={({ field: { onChange, value } }) => (
+                  <TextField
+                    disabled={state.isDisabled}
+                    error={methods.formState.errors.siteUrl ? true : false}
+                    fullWidth
+                    helperText={
+                      methods.formState.errors.siteUrl
+                        ? methods.formState.errors.siteUrl.message?.toString()
+                        : undefined
+                    }
+                    onChange={onChange}
+                    value={value}
+                  />
+                )}
+              />
+            </Grid>
+            <Grid alignItems="center" display="flex" size={4}>
+              <Typography variant="body1">Icon Name</Typography>
+            </Grid>
+            <Grid size={8}>
+              <Controller
+                name="iconName"
+                control={methods.control}
+                render={({ field: { onChange, value } }) => (
+                  <TextField
+                    disabled={state.isDisabled}
+                    error={methods.formState.errors.iconName ? true : false}
+                    fullWidth
+                    helperText={
+                      methods.formState.errors.iconName
+                        ? methods.formState.errors.iconName.message?.toString()
+                        : undefined
+                    }
+                    onChange={onChange}
+                    value={value}
+                  />
+                )}
+              />
+            </Grid>
+            <Grid alignItems="center" display="flex" size={4}>
+              <Typography variant="body1">Repo Name</Typography>
+            </Grid>
+            <Grid size={8}>
+              <Controller
+                name="repoName"
+                control={methods.control}
+                render={({ field: { onChange, value } }) => (
+                  <TextField
+                    disabled={state.isDisabled}
+                    error={methods.formState.errors.repoName ? true : false}
+                    fullWidth
+                    helperText={
+                      methods.formState.errors.repoName
+                        ? methods.formState.errors.repoName.message?.toString()
+                        : undefined
+                    }
+                    onChange={onChange}
+                    value={value}
+                  />
+                )}
+              />
+            </Grid>
+          <Grid alignItems="center" display="flex" size={4}>
+            <Typography variant="body1">Site URL</Typography>
+          </Grid>
+          <Grid size={8}>
+            <Controller
+              name="siteUrl"
+              control={methods.control}
+              render={({ field: { onChange, value } }) => (
+                <TextField
+                  disabled={state.isDisabled}
+                  error={methods.formState.errors.siteUrl ? true : false}
+                  fullWidth
+                  helperText={
+                    methods.formState.errors.siteUrl
+                      ? methods.formState.errors.siteUrl.message?.toString()
+                      : undefined
+                  }
+                  onChange={onChange}
+                  value={value}
+                />
+              )}
+            />
+          </Grid>
+          <Grid alignItems="center" display="flex" size={4}>
+            <Typography variant="body1">Summary</Typography>
+          </Grid>
+          <Grid size={8}>
+            <Controller
+              name="summary"
+              control={methods.control}
+              render={({ field: { onChange, value } }) => (
+                <TextField
+                  disabled={state.isDisabled}
+                  error={methods.formState.errors.summary ? true : false}
+                  fullWidth
+                  helperText={
+                    methods.formState.errors.summary
+                      ? methods.formState.errors.summary.message?.toString()
+                      : undefined
+                  }
+                  multiline
+                  maxRows={5}
+                  onChange={onChange}
+                  value={value}
+                />
+              )}
+            />
+          </Grid>
+          <Grid display="flex" gap={2} justifyContent="right" size={12}>
+              <Button
+                disabled={
+                  state.isDisabled && mode.toString() !== FormMode.VIEW
+                    ? state.isDisabled
+                    : false
+                }
+                startIcon={<Icon iconName={IconName.XMARK} />}
+                variant="outlined"
+                onClick={onCancel}
+                size="small"
+              >
+                {mode.toString() !== FormMode.VIEW ? 'Cancel' : 'Close'}
+              </Button>
+              {mode.toString() !== FormMode.VIEW && (
+                <Button
+                  disabled={state.isDisabled}
+                  startIcon={<Icon iconName={IconName.SAVE} />}
+                  size="small"
+                  type="submit"
+                  variant="contained"
+                >
+                  Save
+                </Button>
+              )}
+            </Grid>
+          </Grid>
+        </form>
+      </FormProvider>
+    </Drawer>
+  )
+}
+
+export default ProjectForm;
--- a/app/src/components/projectForm/ProjectFormProps.interface.ts
+++ b/app/src/components/projectForm/ProjectFormProps.interface.ts
@@ -0,0 +1,8 @@
+import { FormMode } from "../../enums/formMode";
+
+export interface ProjectFormProps {
+  projectId?: string;
+  isDrawerOpen: boolean;
+  mode: FormMode;
+  onOpenClose: (mode: FormMode) => void;
+}
--- a/app/src/components/projectForm/ProjectFormState.interface.ts
+++ b/app/src/components/projectForm/ProjectFormState.interface.ts
@@ -0,0 +1,5 @@
+export interface ProjectFormState {
+  error: string | undefined;
+  isDisabled: boolean;
+  isLoading: boolean;
+}
--- a/app/src/components/projectForm/reducer.ts
+++ b/app/src/components/projectForm/reducer.ts
@@ -0,0 +1,41 @@
+import { ProjectFormState } from "./ProjectFormState.interface"
+
+type Action = 
+| { type: 'SET_ERROR'; payload: string | undefined }
+| { type: 'SET_IS_DISABLED'; payload: boolean }
+| { type: 'SET_IS_LOADING'; payload: boolean }
+
+export const initialState: ProjectFormState = {
+  error: undefined,
+  isDisabled: false,
+  isLoading: true,
+};
+
+export const reducer = (
+  state: ProjectFormState,
+  action: Action
+): ProjectFormState => {
+  switch (action.type) {
+    case 'SET_ERROR': {
+      return {
+        ...state,
+        error: action.payload
+      };
+    }
+    case 'SET_IS_DISABLED': {
+      return {
+        ...state,
+        isDisabled: action.payload
+      };
+    }
+    case 'SET_IS_LOADING': {
+      return {
+        ...state,
+        isLoading: action.payload
+      };
+    }
+    default: {
+      return state;
+    }
+  }
+};
--- a/app/src/components/projects/Project.interface.ts
+++ b/app/src/components/projects/Project.interface.ts
@@ -0,0 +1,11 @@
+export interface Project {
+  partitionKey: string;
+  rowKey: string;
+  iconName: string;
+  order: string;
+  repoName: string;
+  siteUrl: string;
+  subTitle: string;
+  summary: string;
+  title: string;
+}
--- a/app/src/components/projects/Projects.tsx
+++ b/app/src/components/projects/Projects.tsx
@@ -0,0 +1,248 @@
+import { Project } from './Project.interface';
+import {
+  Box,
+  Button,
+  Card,
+  CardActions,
+  CardContent,
+  CardHeader,
+  Container,
+  Grid,
+  Icon,
+  IconName,
+  Typography
+} from '@noahspan/noahspan-components';
+import { useIsAuthenticated } from '@azure/msal-react';
+import { FormMode } from '../../enums/formMode';
+import { useEffect, useReducer } from 'react';
+import { initialState, reducer } from './reducer';
+import { AxiosError, AxiosInstance, AxiosResponse } from 'axios';
+import { useHttpClient } from '../../hooks/httpClient/UseHttpClient';
+import { useAccessToken } from '../../hooks/accessToken/UseAccessToken';
+import ProjectForm from '../projectForm/ProjectForm';
+import ConfirmationDialog from '../confirmationDialog/ConfirmationDialog';
+import ActionMenu from '../actionMenu/ActionMenu';
+
+const Projects = () => {
+  const [state, dispatch] = useReducer(reducer, initialState)
+  const httpClient: AxiosInstance = useHttpClient();
+  const isAuthenticated = useIsAuthenticated();
+  const { getAccessToken } = useAccessToken();
+
+  const findIconByName: IconName = (name: string) => {
+    const keys = Object.keys(IconName);
+
+    for (const key of keys) {
+      if (IconName[key] === name) {
+        return key
+      }
+    }
+
+    return undefined;
+  }
+
+  const getProjects = async (): Promise<Project[]> => {
+    try {
+      // const config = isAuthenticated
+      //   ? { headers: { Authorization: await getAccessToken() } }
+      //   : {};
+      const response: AxiosResponse = await httpClient.get(
+        `api/projects`,
+        // config
+      );
+      const projects: Project[] = response.data;
+
+      projects.sort((a, b) => Number(a.order) - Number(b.order))
+
+      console.log(projects)
+
+      return projects;
+    } catch (error) {
+      throw new Error('broken');
+    }
+  };
+
+  const onOpenCloseProjectForm = (mode: FormMode, projectId?: string) => {
+    switch (mode) {
+      case FormMode.ADD:
+      case FormMode.EDIT:
+      case FormMode.VIEW:
+        dispatch({
+          type: 'SET_OPEN_CLOSE_PROJECT_FORM',
+          payload: {
+            formMode: mode,
+            selectedProjectId: projectId,
+            isFormOpen: true
+          }
+        });
+
+        break;
+      case FormMode.CANCEL:
+        dispatch({
+          type: 'SET_OPEN_CLOSE_PROJECT_FORM',
+          payload: {
+            formMode: mode,
+            selectedProjectId: undefined,
+            isFormOpen: false
+          }
+        });
+
+        break;
+    }
+  };
+
+  const onDeleteProject = (entryId: string) => {
+    dispatch({
+      type: 'SET_DELETE',
+      payload: { isConfirmationDialogOpen: true, selectedProjectId: entryId }
+    });
+  };
+
+  const onConfirmationDialogConfirm = async () => {
+    try {
+      dispatch({ type: 'SET_IS_CONFIRMATION_DIALOG_LOADING', payload: true });
+
+      const token = await getAccessToken();
+      const config = isAuthenticated
+        ? { headers: { Authorization: `${token}` } }
+        : {};
+
+      // await httpClient.delete(`api/logs/log/${state.selectedEntryId}`, config);
+
+      dispatch({
+        type: 'SET_DELETE',
+        payload: { isConfirmationDialogOpen: false, selectedProjectId: undefined }
+      });
+      // await getProjects();
+    } catch (error) {
+      const axiosError = error as AxiosError;
+
+      dispatch({
+        type: 'SET_ERROR',
+        payload: `Loading of logbook entries failed with the following message: ${axiosError.message}`
+      });
+    } finally {
+      dispatch({ type: 'SET_IS_CONFIRMATION_DIALOG_LOADING', payload: false });
+    }
+  };
+
+  const onConfirmationDialogCancel = () => {
+    dispatch({
+      type: 'SET_DELETE',
+      payload: { isConfirmationDialogOpen: false, selectedProjectId: undefined }
+    });
+  };
+
+  useEffect(() => {
+    const loadProjects = async () => {
+      try {
+        const projects = await getProjects();
+
+        dispatch({ type: 'SET_PROJECTS', payload: projects })
+      } catch (error) {
+        console.log(error);
+      }
+    }
+    
+    loadProjects()
+  }, []);
+
+  return (
+    <Container>
+      <Box sx={{ margin: '20px' }}>
+        <Grid container spacing={2}>
+          <Grid size={10}>
+            <Typography variant="h4">Projects</Typography>
+          </Grid>
+          <Grid display='flex' justifyContent='right' size={2}>
+            {isAuthenticated &&
+              <Button
+                onClick={() => onOpenCloseProjectForm(FormMode.ADD)}
+                startIcon={<Icon iconName='fa-plus' />}
+                variant='contained'
+              >
+                Add Project
+              </Button>
+            }
+          </Grid>
+          {state.projects.length > 0 && state.projects.map((project: Project) => {
+            return (
+              <Grid display='flex' justifyContent='center' size={12}>
+                <Card
+                  sx={{
+                    width: '100%'
+                  }}
+                >
+                  <CardHeader
+                    action={isAuthenticated ? <ActionMenu id={project.rowKey} onDelete={onDeleteProject} onOpenCloseForm={onOpenCloseProjectForm} /> : null}
+                    avatar={<Icon iconName={IconName[findIconByName(project.iconName)]} size='2x' />}
+                    subheader={project.subTitle}
+                    title={project.title}
+                    slotProps={{
+                      subheader: {
+                        fontSize: '16px'
+                      },
+                      title: {
+                        fontSize: '24px',
+                      }
+                    }}
+                  />
+                  <CardContent>
+                    <Typography variant='body1'>{project.summary}</Typography>
+                  </CardContent>
+                  <CardActions>
+                    <Grid container direction='row' size={12}>
+                      <Grid container direction='row' justifyContent='center' alignItems='center' size={project.siteUrl === '' ? 12 : 6}>
+                        {project.repoName !== '' &&
+                          <Button
+                            component='a'
+                            href={`https://github.com/noahspannbauer/${project.repoName}`}
+                            startIcon={<Icon iconName={IconName.GITHUB} />}
+                            target='_blank'
+                          >
+                            Code
+                          </Button>
+                        }
+                      </Grid>
+                      <Grid container direction='row' justifyContent='center' alignItems='center' size={6}>
+                        {project.siteUrl !== '' &&
+                          <Button
+                            href={project.siteUrl}
+                            startIcon={<Icon iconName={IconName.ARROW_UP_RIGHT_FROM_SQUARE} />}
+                          >
+                            Visit
+                          </Button>
+                        }
+                      </Grid>
+                    </Grid>
+                    
+                  </CardActions>
+                </Card>
+              </Grid>
+            )
+          })}
+        </Grid>
+        {state.isFormOpen && 
+          <ProjectForm
+            isDrawerOpen={state.isFormOpen}
+            mode={state.formMode}
+            onOpenClose={(mode) => onOpenCloseProjectForm(mode)}
+            projectId={state.selectedProjectId}
+          />
+        }
+        {state.isConfirmDialogOpen && (
+          <ConfirmationDialog
+            contentText="Are you sure you want to delete the project?"
+            isLoading={state.isConfirmDialogLoading}
+            isOpen={state.isConfirmDialogOpen}
+            onCancel={onConfirmationDialogCancel}
+            onConfirm={onConfirmationDialogConfirm}
+            title="Confirm Delete"
+          />
+        )}
+      </Box>
+    </Container>
+  )
+}
+
+export default Projects;
--- a/app/src/components/projects/ProjectsState.interface.ts
+++ b/app/src/components/projects/ProjectsState.interface.ts
@@ -0,0 +1,13 @@
+import { FormMode } from '../../enums/formMode';
+import { Project } from './Project.interface';
+
+export interface ProjectsState {
+  projects: Project[];
+  formMode: FormMode;
+  error: string | undefined;
+  isConfirmDialogLoading: boolean;
+  isConfirmDialogOpen: boolean;
+  isFormOpen: boolean;
+  isLoading: boolean;
+  selectedProjectId: string | undefined;
+}
--- a/app/src/components/projects/reducer.ts
+++ b/app/src/components/projects/reducer.ts
@@ -0,0 +1,92 @@
+import { FormMode } from '../../enums/formMode';
+import { ProjectsState } from './ProjectsState.interface'
+import { Project } from './Project.interface';
+
+type Action =
+  | {
+      type: 'SET_DELETE';
+      payload: {
+        isConfirmationDialogOpen: boolean;
+        selectedProjectId: string | undefined;
+      };
+    }
+  | { type: 'SET_PROJECTS'; payload: Project[] }
+  | { type: 'SET_ERROR'; payload: string | undefined }
+  | { type: 'SET_FORM_MODE'; payload: FormMode }
+  | { type: 'SET_IS_CONFIRMATION_DIALOG_LOADING'; payload: boolean }
+  | { type: 'SET_IS_LOADING'; payload: boolean }
+  | {
+      type: 'SET_OPEN_CLOSE_PROJECT_FORM';
+      payload: {
+        formMode: FormMode;
+        selectedProjectId: string | undefined;
+        isFormOpen: boolean;
+      };
+    };
+
+export const initialState: ProjectsState = {
+  projects: [],
+  error: undefined,
+  formMode: FormMode.CANCEL,
+  isConfirmDialogLoading: false,
+  isConfirmDialogOpen: false,
+  isFormOpen: false,
+  isLoading: false,
+  selectedProjectId: undefined
+};
+
+export const reducer = (
+  state: ProjectsState,
+  action: Action
+): ProjectsState => {
+  switch (action.type) {
+    case 'SET_DELETE': {
+      return {
+        ...state,
+        isConfirmDialogOpen: action.payload.isConfirmationDialogOpen,
+        selectedProjectId: action.payload.selectedProjectId
+      };
+    }
+    case 'SET_PROJECTS': {
+      return {
+        ...state,
+        projects: action.payload
+      };
+    }
+    case 'SET_ERROR': {
+      return {
+        ...state,
+        error: action.payload
+      };
+    }
+    case 'SET_FORM_MODE': {
+      return {
+        ...state,
+        formMode: action.payload
+      };
+    }
+    case 'SET_IS_CONFIRMATION_DIALOG_LOADING': {
+      return {
+        ...state,
+        isConfirmDialogLoading: action.payload
+      };
+    }
+    case 'SET_IS_LOADING': {
+      return {
+        ...state,
+        isLoading: action.payload
+      };
+    }
+    case 'SET_OPEN_CLOSE_PROJECT_FORM': {
+      return {
+        ...state,
+        formMode: action.payload.formMode,
+        isFormOpen: action.payload.isFormOpen,
+        selectedProjectId: action.payload.selectedProjectId
+      };
+    }
+    default: {
+      return state;
+    }
+  }
+};
--- a/app/src/components/siteNav/SiteNav.tsx
+++ b/app/src/components/siteNav/SiteNav.tsx
@@ -0,0 +1,130 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAppContext } from '../../hooks/appContext/UseAppContext';
+import {
+  Icon,
+  MenuItem,
+  Navbar,
+  Spinner,
+  Typography
+} from '@noahspan/noahspan-components';
+import { useIsAuthenticated, useMsal } from '@azure/msal-react';
+import { useAccessToken } from '../../hooks/accessToken/UseAccessToken';
+import { useHttpClient } from '../../hooks/httpClient/UseHttpClient';
+import { AxiosInstance, AxiosResponse } from 'axios';
+import { User } from '@microsoft/microsoft-graph-types';
+
+const SiteNav = () => {
+  const [loading, setLoading] = useState<boolean>(false);
+  const [userPhoto, setUserPhoto] = useState<string>();
+  const httpClient: AxiosInstance = useHttpClient();
+  const appContext = useAppContext();
+  const isAuthenticated = useIsAuthenticated();
+  const { getAccessToken } = useAccessToken();
+  const { instance } = useMsal();
+  const navigate = useNavigate();
+  const pages = [
+    {
+      name: 'Projects',
+      url: '/'
+    }
+  ];
+  const handleSignIn = () => {
+    instance.loginRedirect({
+      scopes: [`api://${import.meta.env.VITE_CLIENT_ID}/user_impersonation`]
+    });
+  };
+  const handleSignOut = () => {
+    instance.logoutRedirect();
+  };
+  const getUserProfile = async (accessToken: string): Promise<User> => {
+    try {
+      const response: AxiosResponse = await httpClient.get(`api/userProfile`, {
+        headers: {
+          Authorization: accessToken
+        }
+      });
+      const userProfile: User = response.data;
+
+      return userProfile;
+    } catch (error) {
+      throw new Error();
+    }
+  };
+  const getUserPhoto = async (accessToken: string): Promise<string> => {
+    try {
+      const response: AxiosResponse = await httpClient.get(`api/userPhoto`, {
+        headers: {
+          Authorization: accessToken
+        },
+        responseType: 'arraybuffer'
+      });
+      const arrayBufferView = new Uint8Array(response.data);
+      const blob = new Blob([arrayBufferView], { type: 'image/png' });
+      const imageUrl = window.URL.createObjectURL(blob);
+
+      return imageUrl;
+    } catch (error) {
+      console.log(error);
+      throw new Error();
+    }
+  };
+  const handlePageClick = (url: string) => {
+    navigate(url);
+  };
+
+  const Settings = () => {
+    return (
+      <MenuItem onClick={handleSignOut}>
+        <Icon iconName='fa-sign-out' />
+        <Typography sx={{ marginLeft: '10px', textAlign: 'center' }}>
+          Sign Out
+        </Typography>
+      </MenuItem>
+    );
+  };
+
+  useEffect(() => {
+    const setUserProfile = async () => {
+      try {
+        setLoading(true);
+
+        const accessToken: string = await getAccessToken();
+        const userProfile = await getUserProfile(accessToken);
+        const userPhoto = await getUserPhoto(accessToken);
+
+        setUserPhoto(userPhoto);
+
+        appContext.dispatch({
+          type: 'SET_USER_PROFILE',
+          payload: userProfile
+        });
+      } catch (error) {
+        console.log(error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (
+      isAuthenticated &&
+      Object.keys(appContext.state.userProfile).length === 0
+    ) {
+      setUserProfile();
+    }
+  }, [isAuthenticated]);
+
+  return (
+    <Navbar
+      handlePageClick={handlePageClick}
+      handleSignIn={handleSignIn}
+      isAuthenticated={isAuthenticated}
+      logo={<Icon iconName='fa-user-tie' size="2x" />}
+      pages={pages}
+      settings={<Settings />}
+      userPhoto={userPhoto}
+    />
+  );
+};
+
+export default SiteNav;
--- a/app/src/context/appContext/AppContext.tsx
+++ b/app/src/context/appContext/AppContext.tsx
@@ -0,0 +1,5 @@
+import { Context, createContext } from 'react';
+import { AppContextProps } from './AppContextProps.interface';
+
+export const AppContext: Context<AppContextProps> =
+  createContext<AppContextProps>({} as AppContextProps);
--- a/app/src/context/appContext/AppContextProps.interface.ts
+++ b/app/src/context/appContext/AppContextProps.interface.ts
@@ -0,0 +1,7 @@
+import { Action } from './reducer';
+import { AppContextState } from './AppContextState.interface';
+
+export interface AppContextProps {
+  state: AppContextState;
+  dispatch: React.Dispatch<Action>;
+}
--- a/app/src/context/appContext/AppContextProvider.tsx
+++ b/app/src/context/appContext/AppContextProvider.tsx
@@ -0,0 +1,30 @@
+import { useMemo, useReducer } from 'react';
+import { AppContext } from './AppContext';
+import { AppContextProviderProps } from './AppContextProviderProps.interface';
+import { AppContextProps } from './AppContextProps.interface';
+import { AppContextState } from './AppContextState.interface';
+import { reducer } from './reducer';
+
+const AppContextProvider = (
+  props: AppContextProviderProps
+) => {
+  const intialState: AppContextState = {
+    featureFlags: [],
+    userProfile: {}
+  };
+  const [state, dispatch] = useReducer(reducer, intialState);
+  const contextValue: AppContextProps = useMemo(() => {
+    return {
+      state,
+      dispatch
+    };
+  }, [state, dispatch]);
+
+  return (
+    <AppContext.Provider value={contextValue}>
+      {props.children}
+    </AppContext.Provider>
+  );
+};
+
+export default AppContextProvider;
--- a/app/src/context/appContext/AppContextProviderProps.interface.ts
+++ b/app/src/context/appContext/AppContextProviderProps.interface.ts
@@ -0,0 +1,3 @@
+export interface AppContextProviderProps {
+  children: React.ReactNode;
+}
--- a/app/src/context/appContext/AppContextState.interface.ts
+++ b/app/src/context/appContext/AppContextState.interface.ts
@@ -0,0 +1,6 @@
+import { User } from '@microsoft/microsoft-graph-types';
+
+export interface AppContextState {
+  featureFlags: { key: string; enabled: boolean }[];
+  userProfile: User;
+}
--- a/app/src/context/appContext/reducer.ts
+++ b/app/src/context/appContext/reducer.ts
@@ -0,0 +1,22 @@
+import { User } from '@microsoft/microsoft-graph-types';
+import { AppContextState } from './AppContextState.interface';
+
+export type Action =
+  | { type: 'SET_USER_PROFILE'; payload: User };
+
+export const reducer = (
+  state: AppContextState,
+  action: Action
+): AppContextState => {
+  switch (action.type) {
+    case 'SET_USER_PROFILE': {
+      return {
+        ...state,
+        userProfile: action.payload
+      };
+    }
+    default: {
+      return state;
+    }
+  }
+};
--- a/app/src/enums/formMode.ts
+++ b/app/src/enums/formMode.ts
@@ -0,0 +1,6 @@
+export enum FormMode {
+  ADD = 'ADD',
+  EDIT = 'EDIT',
+  VIEW = 'VIEW',
+  CANCEL = 'CANCEL'
+}
--- a/app/src/hooks/accessToken/UseAccessToken.tsx
+++ b/app/src/hooks/accessToken/UseAccessToken.tsx
@@ -0,0 +1,32 @@
+import {
+  AuthenticationResult,
+  InteractionRequiredAuthError
+} from '@azure/msal-browser';
+import { useMsal } from '@azure/msal-react';
+
+export const useAccessToken = () => {
+  const { accounts, instance } = useMsal();
+  const getAccessToken = async () => {
+    const tokenRequest = {
+      account: accounts[0],
+      scopes: [`api://${import.meta.env.VITE_CLIENT_ID}/user_impersonation`]
+    };
+
+    try {
+      const response: AuthenticationResult =
+        await instance.acquireTokenSilent(tokenRequest);
+
+      return `Bearer ${response.accessToken}`;
+    } catch (error) {
+      if (error instanceof InteractionRequiredAuthError) {
+        await instance.acquireTokenRedirect(tokenRequest);
+      }
+
+      throw error;
+    }
+  };
+
+  return {
+    getAccessToken
+  };
+};
--- a/app/src/hooks/appContext/UseAppContext.tsx
+++ b/app/src/hooks/appContext/UseAppContext.tsx
@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import { AppContext } from '../../context/appContext/AppContext';
+
+export const useAppContext = () => {
+  const { state, dispatch } = useContext(AppContext);
+
+  return {
+    state,
+    dispatch
+  };
+};
--- a/app/src/hooks/httpClient/UseHttpClient.tsx
+++ b/app/src/hooks/httpClient/UseHttpClient.tsx
@@ -0,0 +1,29 @@
+import axios, { AxiosInstance, CreateAxiosDefaults } from 'axios';
+
+export const useHttpClient = () => {
+  let config: CreateAxiosDefaults<any> = {
+    baseURL: import.meta.env.VITE_API_URL,
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  };
+
+  // if (import.meta.env.DEV) {
+  //   config = {
+  //     baseURL: import.meta.env.VITE_API_URL,
+  //     headers: {
+  //       'Content-Type': 'application/json'
+  //     }
+  //   };
+  // } else {
+  //   config = {
+  //     headers: {
+  //       'Content-Type': 'application/json'
+  //     }
+  //   };
+  // }
+
+  const httpClient: AxiosInstance = axios.create(config);
+
+  return httpClient;
+};
--- a/app/src/index.css
+++ b/app/src/index.css
--- a/app/src/main.tsx
+++ b/app/src/main.tsx
@@ -0,0 +1,39 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+import { BrowserRouter } from 'react-router-dom';
+import { AuthenticationResult, EventMessage, EventType, PublicClientApplication } from '@azure/msal-browser';
+import { msalConfig } from './auth/msalConfig.ts';
+import AppContextProvider from './context/appContext/AppContextProvider.tsx';
+
+const msalInstance: PublicClientApplication = new PublicClientApplication(msalConfig);
+
+msalInstance.initialize().then(() => {
+  const accounts = msalInstance.getAllAccounts();
+
+  if (accounts.length > 0) {
+    msalInstance.setActiveAccount(accounts[0]);
+  }
+
+  msalInstance.addEventCallback((event: EventMessage) => {
+    if (event.eventType === EventType.LOGIN_SUCCESS && event.payload) {
+      const payload = event.payload as AuthenticationResult;
+      const account = payload.account;
+
+      msalInstance.setActiveAccount(account)
+    }
+  })
+
+  createRoot(document.getElementById('root')!).render(
+    <StrictMode>
+      <AppContextProvider>
+        <BrowserRouter>
+          <App pca={msalInstance} />
+        </BrowserRouter>
+      </AppContextProvider>
+    </StrictMode>
+  )
+})
+
+
--- a/app/src/vite-env.d.ts
+++ b/app/src/vite-env.d.ts
@@ -0,0 +1,12 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_API_URL: string;
+  readonly VITE_CLIENT_ID: string;
+  readonly VITE_TENANT_ID: string;
+  readonly VITE_REDIRECT_URL: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>