Merge branch 'bug/10-remove-pubic-decorator-in-api' of https://github.com/noahspannbauer/noahspan-root into bug/10-remove-pubic-decorator-in-api

* adding api

* adding projects page

* adding project page

* updating terraform

* updating terraform

* adding github workflows

* adding github workflows

.github/workflows/main.yaml

@@ -26,7 +26,7 @@ jobs:
       - build-api
     uses: ./.github/workflows/deploy.yaml
     with:
-      app_name: flying-api
+      app_name: root-api
       environment_name: test
       version_number: ${{ github.run_id }}
     secrets: inherit
@@ -49,7 +49,7 @@ jobs:
       - build-app
     uses: ./.github/workflows/deploy.yaml
     with:
-      app_name: flying-app
+      app_name: root-app
       environment_name: test
       version_number: ${{ github.run_id }}
     secrets: inherit

.github/workflows/tag.yaml

@@ -19,7 +19,7 @@ jobs:
       - build-api
     uses: ./.github/workflows/deploy.yaml
     with:
-      app_name: flying-api
+      app_name: root-api
       environment_name: prod
       version_number: ${{ github.ref_name }}
     secrets: inherit
@@ -38,7 +38,7 @@ jobs:
       - build-app
     uses: ./.github/workflows/deploy.yaml
     with:
-      app_name: flying-app
+      app_name: root-app
       environment_name: prod
       version_number: ${{ github.ref_name }}
     secrets: inherit

api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "api",
-  "version": "0.0.1",
+  "version": "1.1.0",
   "description": "",
   "author": "",
   "private": true,
@@ -20,25 +20,24 @@
     "test:e2e": "jest --config ./test/jest-e2e.json"
   },
   "dependencies": {
-    "@azure/functions": "^1.0.3",
     "@nestjs/axios": "^4.0.0",
     "@nestjs/azure-func-http": "^0.10.0",
-    "@nestjs/common": "^10.0.0",
-    "@nestjs/config": "^4.0.0",
-    "@nestjs/core": "^10.0.0",
-    "@nestjs/platform-express": "^10.0.0",
+    "@nestjs/common": "^11.0.11",
+    "@nestjs/config": "^4.0.1",
+    "@nestjs/core": "^11.0.11",
+    "@nestjs/platform-express": "^11.0.11",
     "@noahspan/azure-database": "^3.1.2",
-    "@noahspan/noahspan-modules": "^0.6.5",
+    "@noahspan/noahspan-modules": "^1.1.5",
     "axios": "^1.7.9",
-    "reflect-metadata": "^0.1.14",
-    "rxjs": "^7.8.1",
+    "reflect-metadata": "^0.2.2",
+    "rxjs": "7.8.2",
     "uuid": "^11.0.5"
   },
   "devDependencies": {
     "@angular-devkit/schematics": "^19.1.4",
-    "@nestjs/cli": "^10.0.0",
-    "@nestjs/schematics": "^10.0.0",
-    "@nestjs/testing": "^10.0.0",
+    "@nestjs/cli": "^11.0.5",
+    "@nestjs/schematics": "^11.0.2",
+    "@nestjs/testing": "^11.0.11",
     "@schematics/angular": "^19.1.4",
     "@types/express": "^4.17.17",
     "@types/jest": "^29.5.2",
@@ -59,6 +58,9 @@
     "tsconfig-paths": "^4.2.0",
     "typescript": "^5.1.3"
   },
+  "files": [
+    "dist"
+  ],
   "jest": {
     "moduleFileExtensions": [
       "js",

api/src/app.controller.ts

@@ -1,78 +0,0 @@
-import {
-  Controller,
-  Get,
-  Headers,
-  Query,
-  StreamableFile,
-  UseGuards
-} from '@nestjs/common';
-// import { Client as MsGraphClient } from '@microsoft/microsoft-graph-client';
-import { MsGraphService } from '@noahspan/noahspan-modules'
-
-@Controller()
-export class AppController {
-  constructor(
-    private readonly msGraphService: MsGraphService
-  ) {}
-
-  @Get('userPhoto')
-  async getProfilePhoto(@Headers() headers: any): Promise<StreamableFile> {
-    // try {
-    //   const graphToken: string = await this.msGraphService.getMsGraphAuth(
-    //     headers.authorization.replace('Bearer ', ''),
-    //     ['user.read']
-    //   );
-    //   const client: MsGraphClient =
-    //     await this.msGraphService.getMsGraphClientDelegated(graphToken);
-    //   const blob: Blob = await client.api(`me/photos('48x48')/$value`).get();
-    //   const arrayBuffer: ArrayBuffer = await blob.arrayBuffer();
-    //   const buffer: Buffer = Buffer.from(arrayBuffer);
-
-    //   return new StreamableFile(buffer, {
-    //     type: 'application/json',
-    //     disposition: `attachment; filename="user_photo.png"`
-    //   });
-    // } catch (error) {
-    //   return error;
-    // }
-
-    try {
-      const buffer = await this.msGraphService.getProfilePhoto(
-        headers.authorization.replace('Bearer ', ''),
-        ['user.read']
-      )
-
-      return new StreamableFile(buffer, {
-        type: 'application/json',
-        disposition: `attachment; filename="user_photo.png"`
-      });
-    } catch (error) {
-      return error;
-    }
-  }
-
-  @Get('userProfile')
-  async getUserProfile(@Headers() headers: any): Promise<any> {
-    // try {
-    //   const graphToken: string = await this.msGraphService.getMsGraphAuth(
-    //     headers.authorization.replace('Bearer ', ''),
-    //     ['user.read']
-    //   );
-    //   const client: MsGraphClient =
-    //     await this.msGraphService.getMsGraphClientDelegated(graphToken);
-    //   const userProfile = await client.api(`me`).get();
-
-    //   return userProfile;
-    // } catch (error) {
-    //   return error;
-    // }
-
-    try {
-      const userProfile = await this.msGraphService.getUserProfile(headers.authorization.replace('Bearer ', ''));
-      
-      return userProfile;
-    } catch (error) {
-      return error;
-    }
-  }
-}

api/src/app.module.ts

@@ -1,11 +1,10 @@
 import { Module } from '@nestjs/common';
-import { APP_FILTER, APP_GUARD } from '@nestjs/core';
+import { APP_FILTER } from '@nestjs/core';
 import { HttpExceptionFilter } from './filters/http-exception.filter';
 import { ProjectModule } from './project/project.module';
-import { AuthGuard, AuthModule, MsGraphModule } from '@noahspan/noahspan-modules'
+import { AuthModule, UserModule } from '@noahspan/noahspan-modules'
 import { ConfigModule, ConfigService } from '@nestjs/config';
 import configuration from './config/configuration';
-import { AppController } from './app.controller';
 
 @Module({
   imports: [
@@ -23,7 +22,7 @@ import { AppController } from './app.controller';
     ConfigModule.forRoot({
       load: [configuration]
     }),
-    MsGraphModule.registerAsync({
+    UserModule.registerAsync({
       inject: [ConfigService],
       imports: [ConfigModule],
       useFactory: async (configService: ConfigService) => {
@@ -36,15 +35,10 @@ import { AppController } from './app.controller';
     }),
     ProjectModule
   ],
-  controllers: [AppController],
   providers: [
     {
       provide: APP_FILTER,
       useClass: HttpExceptionFilter
-    },
-    {
-      provide: APP_GUARD,
-      useClass: AuthGuard
     }
   ]
 })

api/src/config/configuration.ts

@@ -1,4 +1,5 @@
 export default () => ({
+  azureStorageConnectionString: process.env.AZURE_STORAGE_CONNECTION_STRING,
   clientId: process.env.CLIENT_ID,
   clientSecret: process.env.CLIENT_SECRET,
   tenantId: process.env.TENANT_ID

api/src/index.css

@@ -0,0 +1,3 @@
+body {
+  background-color: #f2f2f2;
+}

api/src/project/project.controller.ts

@@ -12,13 +12,14 @@ import {
 import { ProjectDto } from './project.dto';
 import { Project } from './project.entity';
 import { ProjectService } from './project.service';
-import { CustomError, Public } from '@noahspan/noahspan-modules';
+import { AuthGuard, CustomError, Public } from '@noahspan/noahspan-modules';
 
 @Controller('projects')
 export class ProjectController {
   constructor(private readonly projectService: ProjectService) {}
 
   @Get(':partitionKey/:rowKey')
+  @UseGuards(AuthGuard)
   async find(
     @Param('partitionKey') partitionKey: string,
     @Param('rowKey') rowKey: string
@@ -32,12 +33,12 @@ export class ProjectController {
     }
   }
 
-  @Public()
   @Get()
   async findAll() {
     try {
       return await this.projectService.findAll();
     } catch (error) {
+      console.log(error)
       const customError = error as CustomError;
 
       throw new HttpException(customError.message, customError.statusCode);
@@ -45,6 +46,7 @@ export class ProjectController {
   }
 
   @Post()
+  @UseGuards(AuthGuard)
   async create(@Body() projectDto: ProjectDto) {
     try {
       const project = new Project();
@@ -60,6 +62,7 @@ export class ProjectController {
   }
 
   @Put(':partitionKey/:rowKey')
+  @UseGuards(AuthGuard)
   async update(
     @Param('partitionKey') partitionKey: string,
     @Param('rowKey') rowKey: string,
@@ -79,6 +82,7 @@ export class ProjectController {
   }
 
   @Delete(':partitionKey/:rowKey')
+  @UseGuards(AuthGuard)
   async delete(
     @Param('partitionKey') partitionKey: string,
     @Param('rowKey') rowKey: string

api/src/project/project.entity.ts

@@ -1,7 +1,9 @@
+import { EntityString } from '@noahspan/azure-database';
+
 export class Project {
-  partitionKey: string;
-  rowKey: string;
-  displayName: string;
-  icon: string;
-  summary: string;
+  @EntityString() partitionKey: string;
+  @EntityString() rowKey: string;
+  @EntityString() displayName: string;
+  @EntityString() icon: string;
+  @EntityString() summary: string;
 }

api/src/project/project.module.ts

@@ -17,7 +17,7 @@ import { ConfigModule, ConfigService } from '@nestjs/config';
       inject: [ConfigService]
     }),
     AzureTableStorageModule.forFeature(Project, {
-      createTableIfNotExists: true,
+      createTableIfNotExists: false,
       table: 'projects'
     }),
   ],

api/src/project/project.service.ts

@@ -1,7 +1,6 @@
 import { InjectRepository, Repository } from '@noahspan/azure-database';
 import { Injectable } from '@nestjs/common';
 import { Project } from './project.entity';
-import { v4 as uuidv4 } from 'uuid';
 
 @Injectable()
 export class ProjectService {

app/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "app2",
+  "name": "app",
   "private": true,
-  "version": "0.0.0",
+  "version": "1.1.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -13,7 +13,7 @@
     "@azure/msal-browser": "^4.2.1",
     "@azure/msal-react": "^3.0.4",
     "@microsoft/microsoft-graph-types": "^2.40.0",
-    "@noahspan/noahspan-components": "^1.3.1",
+    "@noahspan/noahspan-components": "^1.4.0",
     "axios": "^1.7.9",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
@@ -32,5 +32,8 @@
     "typescript": "~5.7.2",
     "typescript-eslint": "^8.22.0",
     "vite": "^6.1.0"
-  }
+  },
+  "files": [
+    "dist"
+  ]
 }

app/src/App.tsx

@@ -1,7 +1,6 @@
 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';
 
@@ -10,8 +9,6 @@ interface AppProps {
 }
 
 const App = ({ pca }: AppProps) => {
-  const appContext = useAppContext();
-
   return (
     <MsalProvider instance={pca}>
       <SiteNav />

app/src/components/actionMenu/ActionMenu.tsx

@@ -3,6 +3,7 @@ import { ActionMenuProps } from './ActionMenuProps.interface';
 import {
   Icon,
   IconButton,
+  IconName,
   ListItemIcon,
   ListItemText,
   Menu,
@@ -26,7 +27,7 @@ const ActionMenu = ({ id, onDelete, onOpenCloseForm }: ActionMenuProps) => {
   return (
     <div>
       <IconButton onClick={onOpenActionMenu}>
-        <Icon iconName='fa-ellipsis-vertical' size="sm" />
+        <Icon iconName={IconName.ELLIPSIS_VERTICAL} size="sm" />
       </IconButton>
       <Menu
         anchorEl={anchorElAction}
@@ -36,20 +37,20 @@ const ActionMenu = ({ id, onDelete, onOpenCloseForm }: ActionMenuProps) => {
       >
         <MenuItem onClick={() => onOpenCloseForm(FormMode.EDIT, id)}>
           <ListItemIcon>
-            <Icon iconName='fa-pen' size="lg" />
+            <Icon iconName={IconName.PEN} size="lg" />
           </ListItemIcon>
           <ListItemText>Edit</ListItemText>
         </MenuItem>
         <MenuItem onClick={() => onOpenCloseForm(FormMode.VIEW, id)}>
           <ListItemIcon>
-            <Icon iconName='fa-eye' size="lg" />
+            <Icon iconName={IconName.EYE} size="lg" />
           </ListItemIcon>
           <ListItemText>View</ListItemText>
         </MenuItem>
         <hr className="my-3" />
         <MenuItem onClick={() => onDelete(id)}>
           <ListItemIcon>
-            <Icon iconName='fa-trash' size="lg" />
+            <Icon iconName={IconName.TRASH} size="lg" />
           </ListItemIcon>
           <ListItemText>Delete</ListItemText>
         </MenuItem>

app/src/components/confirmationDialog/ConfirmationDialog.tsx

@@ -1,5 +1,4 @@
 import {
-  Box,
   Button,
   Dialog,
   DialogActions,
@@ -7,6 +6,7 @@ import {
   DialogContentText,
   DialogTitle,
   Icon,
+  IconName,
   Spinner
 } from '@noahspan/noahspan-components';
 import { ConfirmationDialogProps } from './ConfirmationDialogProps.interface';
@@ -33,13 +33,13 @@ const ConfirmationDialog = ({
         {isLoading && <Spinner />}
       </DialogContent>
       <DialogActions>
-        <Button onClick={onCancel} variant="outlined" startIcon={<Icon iconName='fa-xmark' />}>
+        <Button onClick={onCancel} variant="outlined" startIcon={<Icon iconName={IconName.XMARK} />}>
           No
         </Button>
         <Button
           onClick={onConfirm}
           variant="contained"
-          startIcon={<Icon iconName='fa-circle-check'/>}
+          startIcon={<Icon iconName={IconName.CIRCLE_CHECK}/>}
         >
           Yes
         </Button>

app/src/components/projectForm/ProjectForm.tsx

@@ -15,7 +15,7 @@ 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 { useAccessToken } from '../../hooks/accessToken/UseAccessToken'
 import { useHttpClient } from '../../hooks/httpClient/UseHttpClient';
 import { AxiosError, AxiosInstance, AxiosResponse } from 'axios';
 
@@ -47,7 +47,6 @@ const ProjectForm = ({ isDrawerOpen, mode, onOpenClose, projectId }: ProjectForm
   };
 
   const onSubmit = async (data: unknown) => {
-    console.log(data)
     try {
       dispatch({ type: 'SET_IS_LOADING', payload: true });
 

app/src/components/projects/Projects.tsx

@@ -1,5 +1,6 @@
 import { Project } from './Project.interface';
 import {
+  Alert,
   Box,
   Button,
   Card,
@@ -10,6 +11,7 @@ import {
   Grid,
   Icon,
   IconName,
+  Spinner,
   Typography
 } from '@noahspan/noahspan-components';
 import { useIsAuthenticated } from '@azure/msal-react';
@@ -29,36 +31,20 @@ const Projects = () => {
   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;
-
+      console.log(projects);
       projects.sort((a, b) => Number(a.order) - Number(b.order))
 
-      console.log(projects)
-
       return projects;
     } catch (error) {
-      throw new Error('broken');
+      const axiosError = error as AxiosError;
+
+      throw new Error(axiosError.message);
     }
   };
 
@@ -107,19 +93,19 @@ const Projects = () => {
         ? { headers: { Authorization: `${token}` } }
         : {};
 
-      // await httpClient.delete(`api/logs/log/${state.selectedEntryId}`, config);
+      await httpClient.delete(`api/projects/project/${state.selectedProjectId}`, config);
 
       dispatch({
         type: 'SET_DELETE',
         payload: { isConfirmationDialogOpen: false, selectedProjectId: undefined }
       });
-      // await getProjects();
+      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}`
+        type: 'SET_ALERT',
+        payload: { severity: 'error', message: `Loading of projects failed with the following message: ${axiosError.message}` }
       });
     } finally {
       dispatch({ type: 'SET_IS_CONFIRMATION_DIALOG_LOADING', payload: false });
@@ -136,16 +122,24 @@ const Projects = () => {
   useEffect(() => {
     const loadProjects = async () => {
       try {
+        dispatch({ type: 'SET_IS_LOADING', payload: true })
         const projects = await getProjects();
 
         dispatch({ type: 'SET_PROJECTS', payload: projects })
       } catch (error) {
-        console.log(error);
+        dispatch({
+          type: 'SET_ALERT',
+          payload: { severity: 'error', message: `Loading of projects failed with the following message: ${error}` }
+        });
+      } finally {
+        dispatch({ type: 'SET_IS_LOADING', payload: false })
       }
     }
     
-    loadProjects()
-  }, []);
+    if (!state.isFormOpen || !state.isConfirmDialogOpen) {
+      loadProjects();
+    }
+  }, [state.isFormOpen, state.isConfirmDialogOpen]);
 
   return (
     <Container>
@@ -158,14 +152,27 @@ const Projects = () => {
             {isAuthenticated &&
               <Button
                 onClick={() => onOpenCloseProjectForm(FormMode.ADD)}
-                startIcon={<Icon iconName='fa-plus' />}
+                startIcon={<Icon iconName={IconName.PLUS}/>}
                 variant='contained'
               >
                 Add Project
               </Button>
             }
           </Grid>
-          {state.projects.length > 0 && state.projects.map((project: Project) => {
+          {!state.isLoading && state.alert && (
+            <Grid display="flex" justifyContent="center" size={12}>
+              <Alert
+                onClose={() =>
+                  dispatch({ type: 'SET_ALERT', payload: undefined })
+                }
+                severity={state.alert.severity}
+                sx={{ width: '100%' }}
+              >
+                {state.alert.message}
+              </Alert>
+            </Grid>
+          )}
+          {!state.isLoading && state.projects.length > 0 && state.projects.map((project: Project) => {
             return (
               <Grid display='flex' justifyContent='center' size={12}>
                 <Card
@@ -175,7 +182,7 @@ const Projects = () => {
                 >
                   <CardHeader
                     action={isAuthenticated ? <ActionMenu id={project.rowKey} onDelete={onDeleteProject} onOpenCloseForm={onOpenCloseProjectForm} /> : null}
-                    avatar={<Icon iconName={IconName[findIconByName(project.iconName)]} size='2x' />}
+                    avatar={<Icon iconName={project.iconName as IconName} size='2x' />}
                     subheader={project.subTitle}
                     title={project.title}
                     slotProps={{
@@ -198,7 +205,6 @@ const Projects = () => {
                             component='a'
                             href={`https://github.com/noahspannbauer/${project.repoName}`}
                             startIcon={<Icon iconName={IconName.GITHUB} />}
-                            target='_blank'
                           >
                             Code
                           </Button>
@@ -221,6 +227,16 @@ const Projects = () => {
               </Grid>
             )
           })}
+          {state.isLoading && (
+            <>
+              <Grid display="flex" justifyContent="center" size={12}>
+                <Spinner />
+              </Grid>
+              <Grid display="flex" justifyContent="center" size={12}>
+                Loading...
+              </Grid>
+            </>
+          )}
         </Grid>
         {state.isFormOpen && 
           <ProjectForm

app/src/components/projects/ProjectsState.interface.ts

@@ -1,10 +1,11 @@
 import { FormMode } from '../../enums/formMode';
+import { Alert } from '../../interfaces';
 import { Project } from './Project.interface';
 
 export interface ProjectsState {
+  alert: Alert | undefined;
   projects: Project[];
   formMode: FormMode;
-  error: string | undefined;
   isConfirmDialogLoading: boolean;
   isConfirmDialogOpen: boolean;
   isFormOpen: boolean;

app/src/components/projects/reducer.ts

@@ -1,6 +1,7 @@
 import { FormMode } from '../../enums/formMode';
 import { ProjectsState } from './ProjectsState.interface'
 import { Project } from './Project.interface';
+import { Alert } from '../../interfaces';
 
 type Action =
   | {
@@ -11,7 +12,7 @@ type Action =
       };
     }
   | { type: 'SET_PROJECTS'; payload: Project[] }
-  | { type: 'SET_ERROR'; payload: string | undefined }
+  | { type: 'SET_ALERT'; payload: Alert | undefined }
   | { type: 'SET_FORM_MODE'; payload: FormMode }
   | { type: 'SET_IS_CONFIRMATION_DIALOG_LOADING'; payload: boolean }
   | { type: 'SET_IS_LOADING'; payload: boolean }
@@ -25,13 +26,13 @@ type Action =
     };
 
 export const initialState: ProjectsState = {
-  projects: [],
-  error: undefined,
+  alert: undefined,
   formMode: FormMode.CANCEL,
   isConfirmDialogLoading: false,
   isConfirmDialogOpen: false,
   isFormOpen: false,
   isLoading: false,
+  projects: [],
   selectedProjectId: undefined
 };
 
@@ -53,10 +54,10 @@ export const reducer = (
         projects: action.payload
       };
     }
-    case 'SET_ERROR': {
+    case 'SET_ALERT': {
       return {
         ...state,
-        error: action.payload
+        alert: action.payload
       };
     }
     case 'SET_FORM_MODE': {

app/src/components/siteNav/SiteNav.tsx

@@ -3,9 +3,9 @@ import { useNavigate } from 'react-router-dom';
 import { useAppContext } from '../../hooks/appContext/UseAppContext';
 import {
   Icon,
+  IconName,
   MenuItem,
   Navbar,
-  Spinner,
   Typography
 } from '@noahspan/noahspan-components';
 import { useIsAuthenticated, useMsal } from '@azure/msal-react';
@@ -14,21 +14,25 @@ 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 SiteNav: React.FC<unknown> = () => {
   const [userPhoto, setUserPhoto] = useState<string>();
+  const [pages, setPages] = useState<{ name: string; url: 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 getPages = () => {
+    const pages = [
+      {
+        name: 'Projects',
+        url: '/'
+      }
+    ];
+
+    setPages(pages)
+  };
   const handleSignIn = () => {
     instance.loginRedirect({
       scopes: [`api://${import.meta.env.VITE_CLIENT_ID}/user_impersonation`]
@@ -39,7 +43,7 @@ const SiteNav = () => {
   };
   const getUserProfile = async (accessToken: string): Promise<User> => {
     try {
-      const response: AxiosResponse = await httpClient.get(`api/userProfile`, {
+      const response: AxiosResponse = await httpClient.get(`api/user/profile`, {
         headers: {
           Authorization: accessToken
         }
@@ -53,7 +57,7 @@ const SiteNav = () => {
   };
   const getUserPhoto = async (accessToken: string): Promise<string> => {
     try {
-      const response: AxiosResponse = await httpClient.get(`api/userPhoto`, {
+      const response: AxiosResponse = await httpClient.get(`api/user/photo`, {
         headers: {
           Authorization: accessToken
         },
@@ -65,7 +69,6 @@ const SiteNav = () => {
 
       return imageUrl;
     } catch (error) {
-      console.log(error);
       throw new Error();
     }
   };
@@ -76,7 +79,7 @@ const SiteNav = () => {
   const Settings = () => {
     return (
       <MenuItem onClick={handleSignOut}>
-        <Icon iconName='fa-sign-out' />
+        <Icon iconName={IconName.SIGN_OUT} />
         <Typography sx={{ marginLeft: '10px', textAlign: 'center' }}>
           Sign Out
         </Typography>
@@ -87,8 +90,6 @@ const SiteNav = () => {
   useEffect(() => {
     const setUserProfile = async () => {
       try {
-        setLoading(true);
-
         const accessToken: string = await getAccessToken();
         const userProfile = await getUserProfile(accessToken);
         const userPhoto = await getUserPhoto(accessToken);
@@ -101,8 +102,6 @@ const SiteNav = () => {
         });
       } catch (error) {
         console.log(error);
-      } finally {
-        setLoading(false);
       }
     };
 
@@ -111,15 +110,20 @@ const SiteNav = () => {
       Object.keys(appContext.state.userProfile).length === 0
     ) {
       setUserProfile();
+      getPages();
     }
   }, [isAuthenticated]);
 
+  useEffect(() => {
+    getPages();
+  }, [])
+
   return (
     <Navbar
       handlePageClick={handlePageClick}
       handleSignIn={handleSignIn}
       isAuthenticated={isAuthenticated}
-      logo={<Icon iconName='fa-user-tie' size="2x" />}
+      logo={<Icon iconName={IconName.USER_TIE} size='2xl' />}
       pages={pages}
       settings={<Settings />}
       userPhoto={userPhoto}

app/src/context/appContext/AppContextProvider.tsx

@@ -9,7 +9,6 @@ const AppContextProvider = (
   props: AppContextProviderProps
 ) => {
   const intialState: AppContextState = {
-    featureFlags: [],
     userProfile: {}
   };
   const [state, dispatch] = useReducer(reducer, intialState);

app/src/context/appContext/AppContextState.interface.ts

@@ -1,6 +1,5 @@
 import { User } from '@microsoft/microsoft-graph-types';
 
 export interface AppContextState {
-  featureFlags: { key: string; enabled: boolean }[];
   userProfile: User;
 }

app/src/index.css

@@ -0,0 +1,3 @@
+body {
+  background-color: #f2f2f2;
+}

app/src/interfaces.ts

@@ -0,0 +1,4 @@
+export interface Alert {
+  severity: 'success' | 'error' | 'info' | 'warning';
+  message: string;
+}

app/src/main.tsx

@@ -6,6 +6,7 @@ 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';
+import './index.css';
 
 const msalInstance: PublicClientApplication = new PublicClientApplication(msalConfig);
 

data/profile/profile.json

@@ -1,212 +0,0 @@
-{
-  "experiences": [
-    {
-      "jobTitle": "Senior Software Engineer",
-      "company": "Sensonix, Inc.",
-      "location": "Plymouth, Minnesota",
-      "startDate": "April 2023",
-      "endDate": "Present",
-      "details": null
-    },
-    {
-      "jobTitle": "Senior Software Engineer",
-      "company": "Amano McGann, Inc.",
-      "location": "Roseville, Minnesota",
-      "startDate": "July 2022",
-      "endDate": "April 2023",
-      "details": null
-    },
-    {
-      "jobTitle": "Senior Software Engineer",
-      "company": "Optum",
-      "location": "Eden Prairie, Minnesota",
-      "startDate": "March 2021",
-      "endDate": "June 2022",
-      "details": null
-    },
-    {
-      "jobTitle": "Senior Software Engineer",
-      "company": "Target",
-      "location": "Minneapolis, Minnesota",
-      "startDate": "December 2018",
-      "endDate": "February 2021",
-      "details": null
-    },
-    {
-      "jobTitle": "Developer, Business Systems",
-      "company": "Minnesota Twins",
-      "location": "Minneapolis, Minnesota",
-      "startDate": "February 2017",
-      "endDate": "December 2018",
-      "details": null
-    },
-    {
-      "jobTitle": "SharePoint Administrator/Developer",
-      "company": "Minnesota Judicial Branch",
-      "location": "Saint Paul, Minnesota",
-      "startDate": "January 2016",
-      "endDate": "February 2017",
-      "details": null
-    },
-    {
-      "jobTitle": "Consultant",
-      "company": "Magenic Technologies",
-      "location": "Saint Louis Park, Minnesota",
-      "startDate": "August 2011",
-      "endDate": "January 2016",
-      "details": null
-    }
-  ],
-  "education": [
-    {
-      "school": "Metropolitan State University",
-      "location": "Saint Paul, Minnesota",
-      "degree": "Bachelor of Arts",
-      "fieldOfStudy": "Technical Communication"
-    },
-    {
-      "school": "Century College",
-      "location": "White Bear Lake, Minnesota",
-      "degree": "Associate of Arts",
-      "fieldOfStudy": "Liberal Arts"
-    }
-  ],
-  "about": {
-    "details": "\\# This is some markdown.",
-    "summary": null
-  },
-  "intro": {
-    "firstName": "Noah",
-    "lastName": "Spannbauer",
-    "photoUrl": null,
-    "title": "Senior Software Engineer",
-    "location": "Minneapolis, Minnesota, United States"
-  },
-  "skills": [
-    {
-      "category": "Experienced",
-      "group": "Agile Methodologies",
-      "skills": [
-        "Scrum"
-      ]
-    },
-    {
-      "category": "Experienced",
-      "group": "Containerization",
-      "skills": [
-        "Docker",
-        "Kubernetes",
-        "Helm"
-      ]
-    },
-    {
-      "category": "Experienced",
-      "group": "Continuous Integration and Continuous Delivery",
-      "skills": [
-        "GitHub Actions",
-        "Argo CD"
-      ]
-    },
-    {
-      "category": "Experienced",
-      "group": "Database",
-      "skills": [
-        "PostgreSQL"
-      ]
-    },
-    {
-      "category": "Experienced",
-      "group": "Front-End Web Development",
-      "skills": [
-        "React",
-        "Node.js"
-      ]
-    },
-    {
-      "category": "Experienced",
-      "group": "Infrastructure as Code",
-      "skills": [
-        "Terraform"
-      ]
-    },
-    {
-      "category": "Experienced",
-      "group": "Messaging",
-      "skills": [
-        "RabbitMQ"
-      ]
-    },
-    {
-      "category": "Experienced",
-      "group": "Programming Languages",
-      "skills": [
-        "JavaScript",
-        "Typescript"
-      ]
-    },
-    {
-      "category": "Experienced",
-      "group": "Test Automation",
-      "skills": [
-        "Cucumber",
-        "Gherkin",
-        "Jest",
-        "Playwright"
-      ]
-    },
-    {
-      "category": "Experienced",
-      "group": "Cloud",
-      "skills": [
-        "Amazon Web Services (AWS)"
-      ]
-    },
-    {
-      "category": "Familiar",
-      "group": "Cloud",
-      "skills": [
-        "Azure"
-      ]
-    },
-    {
-      "category": "Familiar",
-      "group": "Continuous Integration and Continuous Delivery",
-      "skills": [
-        "Azure DevOps",
-        "Drone",
-        "Vela"
-      ]
-    },
-    {
-      "category": "Familiar",
-      "group": "Database",
-      "skills": [
-        "MongoDB",
-        "SQL Server"
-      ]
-    },
-    {
-      "category": "Familiar",
-      "group": "Messaging",
-      "skills": [
-        "Khafka"
-      ]
-    },
-    {
-      "category": "Familiar",
-      "group": "Programming Languages",
-      "skills": [
-        "C#",
-        "Powershell"
-      ]
-    },
-    {
-      "category": "Familiar",
-      "group": "Test Automation",
-      "skills": [
-        "Cypress"
-      ]
-    }
-  ],
-  "___mb_schema": "/.mattrbld/schemas/Profile.json"
-}

data/projects/projects.json

@@ -1,23 +0,0 @@
-{
-  "projects": [
-    {
-      "repoName": "noahspan-components",
-      "title": "Components (React + Storybook)",
-      "iconName": "fa-puzzle-piece",
-      "summary": "A component library with custom React components, extended components from Material UI, and a subset of Font Awesome icons."
-    },
-    {
-      "repoName": "noahspan-flying",
-      "title": "Flying (React + Nest.js)",
-      "iconName": "fa-plane",
-      "summary": "A pilot logbook for logging flight hours."
-    },
-    {
-      "repoName": "noahspan-modules",
-      "title": "Modules (Nest.js)",
-      "iconName": "fa-gear",
-      "summary": "A library of custom modules for projects using Nest.js."
-    }
-  ],
-  "___mb_schema": "/.mattrbld/schemas/Projects.json"
-}

docker-compose.yaml

@@ -2,10 +2,33 @@ version: '3.8'
 
 services:
   azurite:
-    container_name: azurite
+    container_name: azurite-root
     image: mcr.microsoft.com/azure-storage/azurite:3.33.0
     ports:
       - '10000:10000'
       - '10001:10001'
       - '10002:10002'
-    command: 'azurite --blobHost 0.0.0.0 --queueHost 0.0.0.0 --tableHost 0.0.0.0 --loose'
+    command: 'azurite --blobHost 0.0.0.0 --queueHost 0.0.0.0 --tableHost 0.0.0.0 --loose'
+    volumes: 
+      - ./azurite-root:/data
+
+  api:
+    container_name: root-api
+    build:
+      context: .
+      target: api
+    ports:
+      - '3000:3000'
+    env_file:
+      - ./api/.env
+
+  app:
+    container_name: root-app
+    build:
+      context: .
+      target: app
+    ports: 
+      - '8080:8080'
+
+volumes:
+  azurite-root:

infrastructure/config/main.tf

@@ -5,8 +5,8 @@ locals {
   }
 
   container_app_app_container_image = {
-    test = "noahspan/root-app:v0.0.1"
-    prod = "noahspan/root-app:v0.0.1"
+    test = "noahspan/root-app:v1.0.0"
+    prod = "noahspan/root-app:v1.0.0"
   }
 
   container_app_app_container_name = {
@@ -20,8 +20,8 @@ locals {
   }
 
   container_app_api_container_image = {
-    test = "noahspan/root-api:v0.0.1"
-    prod = "noahspan/root-api:v0.0.1"
+    test = "noahspan/root-api:v1.0.0"
+    prod = "noahspan/root-api:v1.0.0"
   }
 
   container_app_api_container_name = {

infrastructure/main.tf

@@ -1,3 +1,10 @@
+module "storage" {
+  source = "github.com/noahspannbauer/noahspan-terraform/modules/storage"
+  resource_group_name = var.RESOURCE_GROUP_NAME
+  storage_account_name = module.environment.storage_account_name
+  storage_tables = module.environment.storage_tables
+}
+
 module "container_app" {
   source = "github.com/noahspannbauer/noahspan-terraform/modules/container_app"
   app_subdomain_name = var.APP_SUBDOMAIN_NAME
@@ -17,7 +24,6 @@ module "container_app" {
   domain_name = var.DOMAIN_NAME
   log_analytics_workspace_name = module.environment.log_analytics_workspace_name
   resource_group_name = var.RESOURCE_GROUP_NAME
-  storage_account_name = module.environment.storage_account_name
-  storage_tables = module.environment.storage_tables
+  storage_account_primary_connection_string = module.storage.storage_account_primary_connection_string
   tenant_id = var.TENANT_ID
 }

package.json

@@ -1,11 +1,12 @@
 {
-  "name": "noahspan-root",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
+  "name": "@noahspan/noahspan-root",
+  "version": "1.1.0",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "preprod": "rimraf ./.prod && pnpm --filter api build && pnpm --filter app build",
+    "prod": "pnpm --filter api --prod deploy ./.prod/api && pnpm --filter app --prod deploy ./.prod/app"
   },
-  "author": "",
-  "license": "ISC"
+  "devDependencies": {
+    "rimraf": "^6.0.1"
+  }
 }

pnpm-workspace.yaml

@@ -1,4 +1,3 @@
 packages:
   - 'api'
-  - 'app'
-  - 'app2'
+  - 'app'