Merge branch 'main' into feature/1-add-projects-and-about-pages

.github/workflows/app_build.yaml

@@ -15,10 +15,6 @@ env:
   VITE_TENANT_ID: ${{ vars.VITE_TENANT_ID }}
   VITE_REDIRECT_URL: ${{ vars.VITE_REDIRECT_URL }}
 
-permissions:
-  id-token: write
-  contents: read
-
 jobs:
   build:
     runs-on: ubuntu-latest
@@ -49,28 +45,26 @@ jobs:
           pnpm --filter app build
 
       - name: Deploy
-        if: ${{ inputs.environment_name != 'pull_request' }}
-        uses: azure/login@v2
-        with:
-          client-id: ${{ vars.VITE_CLIENT_ID }}
-          tenant-id: ${{ vars.VITE_TENANT_ID }}
-          subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
-      
-      - name: Upload
-        if: ${{ inputs.environment_name != 'pull_request' }}
-        uses: azure/CLI@v1
-        with:
-          inlineScript: |
-            az storage blob upload-batch --account-name ${{ vars.AZURE_STORAGE_ACCOUNT_NAME }} --auth-mode key -d '$web' -s ./app/dist
-
-      # - name: Purge CDN endpoint
-      #   if: ${{ inputs.environment_name != 'pull_request' }}
-      #   uses: azure/CLI@v1
-      #   with:
-      #     inlineScript: |
-      #       az cdn endpoint purge --content-paths  "/*" --profile-name "CDN_PROFILE_NAME" --name "CDN_ENDPOINT" --resource-group "RESOURCE_GROUP"
-
-      - name: Azure CLI logout
-        if: ${{ inputs.environment_name != 'pull_request' }}
+        if: ${{ github.event_name != 'pull_request' }}
         run: |
-          az logout
+          pnpm --filter app --prod deploy ./.prod/app
+
+      - name: Setup Docker Buildx
+        if: ${{ github.event_name != 'pull_request' }}
+        uses: docker/setup-buildx-action@v3
+
+      - name: Log into Docker Hub
+        if: ${{ github.event_name != 'pull_request' }}
+        uses: docker/login-action@v3
+        with:
+          username: ${{ vars.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Build and push to registry
+        if: ${{ github.event_name != 'pull_request' }}
+        uses: docker/build-push-action@v6
+        with:
+          push: true
+          tags: noahspan/root-app:${{ inputs.version_number }}
+          context: .
+          target: app

.github/workflows/main.yaml

@@ -26,30 +26,30 @@ jobs:
       - build-api
     uses: ./.github/workflows/deploy.yaml
     with:
-      app_name: root-api
+      app_name: flying-api
       environment_name: test
       version_number: ${{ github.run_id }}
     secrets: inherit
 
-  build-deploy-app:
+  build-app:
     if: ${{ needs.changes.outputs.app == 'true' }}
     name: build-app
     needs:
       - changes
-    uses: ./.github/workflows/app_build_deploy.yaml
+    uses: ./.github/workflows/app_build.yaml
     with:
       environment_name: test
       version_number: ${{ github.run_id }}
     secrets: inherit
 
-  # deploy-app:
-  #   name: deploy-app
-  #   needs: 
-  #     - changes
-  #     - build-app
-  #   uses: ./.github/workflows/deploy.yaml
-  #   with:
-  #     app_name: root-app
-  #     environment_name: test
-  #     version_number: ${{ github.run_id }}
-  #   secrets: inherit
+  deploy-app:
+    name: deploy-app
+    needs: 
+      - changes
+      - build-app
+    uses: ./.github/workflows/deploy.yaml
+    with:
+      app_name: flying-app
+      environment_name: test
+      version_number: ${{ github.run_id }}
+    secrets: inherit

.github/workflows/pull_request.yaml

@@ -23,7 +23,7 @@ jobs:
     name: build-app
     needs:
       - changes
-    uses: ./.github/workflows/app_build_deploy.yaml
+    uses: ./.github/workflows/app_build.yaml
     with:
       environment_name: pull_request
       version_number: ${{ github.run_id }}

.github/workflows/tag.yaml

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

api/package.json

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

api/src/app.controller.ts

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

api/src/config/configuration.ts

@@ -1,5 +1,4 @@
 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

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

api/src/project/project.controller.ts

@@ -12,14 +12,13 @@ import {
 import { ProjectDto } from './project.dto';
 import { Project } from './project.entity';
 import { ProjectService } from './project.service';
-import { AuthGuard, CustomError, Public } from '@noahspan/noahspan-modules';
+import { 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
@@ -33,12 +32,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);
@@ -46,7 +45,6 @@ export class ProjectController {
   }
 
   @Post()
-  @UseGuards(AuthGuard)
   async create(@Body() projectDto: ProjectDto) {
     try {
       const project = new Project();
@@ -62,7 +60,6 @@ export class ProjectController {
   }
 
   @Put(':partitionKey/:rowKey')
-  @UseGuards(AuthGuard)
   async update(
     @Param('partitionKey') partitionKey: string,
     @Param('rowKey') rowKey: string,
@@ -82,7 +79,6 @@ 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,9 +1,7 @@
-import { EntityString } from '@noahspan/azure-database';
-
 export class Project {
-  @EntityString() partitionKey: string;
-  @EntityString() rowKey: string;
-  @EntityString() displayName: string;
-  @EntityString() icon: string;
-  @EntityString() summary: string;
+  partitionKey: string;
+  rowKey: string;
+  displayName: string;
+  icon: string;
+  summary: string;
 }

api/src/project/project.module.ts

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

api/src/project/project.service.ts

@@ -1,6 +1,7 @@
 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/src/index.css

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

app/src/interfaces.ts

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

app2/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "app",
+  "name": "app2",
   "private": true,
-  "version": "1.2.0",
+  "version": "0.0.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.8.1",
+    "@noahspan/noahspan-components": "^1.3.1",
     "axios": "^1.7.9",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
@@ -32,8 +32,5 @@
     "typescript": "~5.7.2",
     "typescript-eslint": "^8.22.0",
     "vite": "^6.1.0"
-  },
-  "files": [
-    "dist"
-  ]
+  }
 }

app2/src/App.tsx

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

app2/src/components/actionMenu/ActionMenu.tsx

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

app2/src/components/confirmationDialog/ConfirmationDialog.tsx

@@ -1,4 +1,5 @@
 import {
+  Box,
   Button,
   Dialog,
   DialogActions,
@@ -6,7 +7,6 @@ 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={IconName.XMARK} />}>
+        <Button onClick={onCancel} variant="outlined" startIcon={<Icon iconName='fa-xmark' />}>
           No
         </Button>
         <Button
           onClick={onConfirm}
           variant="contained"
-          startIcon={<Icon iconName={IconName.CIRCLE_CHECK}/>}
+          startIcon={<Icon iconName='fa-circle-check'/>}
         >
           Yes
         </Button>

app2/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,6 +47,7 @@ const ProjectForm = ({ isDrawerOpen, mode, onOpenClose, projectId }: ProjectForm
   };
 
   const onSubmit = async (data: unknown) => {
+    console.log(data)
     try {
       dispatch({ type: 'SET_IS_LOADING', payload: true });
 

app2/src/components/projects/Projects.tsx

@@ -1,6 +1,5 @@
 import { Project } from './Project.interface';
 import {
-  Alert,
   Box,
   Button,
   Card,
@@ -11,8 +10,6 @@ import {
   Grid,
   Icon,
   IconName,
-  Skeleton,
-  Stack,
   Typography
 } from '@noahspan/noahspan-components';
 import { useIsAuthenticated } from '@azure/msal-react';
@@ -32,20 +29,36 @@ 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) {
-      const axiosError = error as AxiosError;
-
-      throw new Error(axiosError.message);
+      throw new Error('broken');
     }
   };
 
@@ -94,19 +107,19 @@ const Projects = () => {
         ? { headers: { Authorization: `${token}` } }
         : {};
 
-      await httpClient.delete(`api/projects/project/${state.selectedProjectId}`, config);
+      // await httpClient.delete(`api/logs/log/${state.selectedEntryId}`, config);
 
       dispatch({
         type: 'SET_DELETE',
         payload: { isConfirmationDialogOpen: false, selectedProjectId: undefined }
       });
-      await getProjects();
+      // await getProjects();
     } catch (error) {
       const axiosError = error as AxiosError;
 
       dispatch({
-        type: 'SET_ALERT',
-        payload: { severity: 'error', message: `Loading of projects failed with the following message: ${axiosError.message}` }
+        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 });
@@ -123,24 +136,16 @@ 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) {
-        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 })
+        console.log(error);
       }
     }
     
-    if (!state.isFormOpen || !state.isConfirmDialogOpen) {
-      loadProjects();
-    }
-  }, [state.isFormOpen, state.isConfirmDialogOpen]);
+    loadProjects()
+  }, []);
 
   return (
     <Container>
@@ -153,27 +158,14 @@ const Projects = () => {
             {isAuthenticated &&
               <Button
                 onClick={() => onOpenCloseProjectForm(FormMode.ADD)}
-                startIcon={<Icon iconName={IconName.PLUS}/>}
+                startIcon={<Icon iconName='fa-plus' />}
                 variant='contained'
               >
                 Add Project
               </Button>
             }
           </Grid>
-          {!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) => {
+          {state.projects.length > 0 && state.projects.map((project: Project) => {
             return (
               <Grid display='flex' justifyContent='center' size={12}>
                 <Card
@@ -183,7 +175,7 @@ const Projects = () => {
                 >
                   <CardHeader
                     action={isAuthenticated ? <ActionMenu id={project.rowKey} onDelete={onDeleteProject} onOpenCloseForm={onOpenCloseProjectForm} /> : null}
-                    avatar={<Icon iconName={project.iconName as IconName} size='2x' />}
+                    avatar={<Icon iconName={IconName[findIconByName(project.iconName)]} size='2x' />}
                     subheader={project.subTitle}
                     title={project.title}
                     slotProps={{
@@ -206,6 +198,7 @@ const Projects = () => {
                             component='a'
                             href={`https://github.com/noahspannbauer/${project.repoName}`}
                             startIcon={<Icon iconName={IconName.GITHUB} />}
+                            target='_blank'
                           >
                             Code
                           </Button>
@@ -222,42 +215,12 @@ const Projects = () => {
                         }
                       </Grid>
                     </Grid>
+                    
                   </CardActions>
                 </Card>
               </Grid>
             )
           })}
-          {state.isLoading && [...Array(6)].map((_element, index) => {
-            return (
-              <Grid display='flex' justifyContent='center' size={12}>
-                <Card
-                  key={index}
-                  sx={{
-                    width: '100%'
-                  }}
-                >
-                  <CardContent>
-                    <Grid container spacing={2}>
-                      <Grid size={1}>
-                        <Skeleton height={100} width={60} />
-                      </Grid>
-                      <Grid size={11}>
-                        <Stack>
-                          <Skeleton height={60} />
-                          <Skeleton height={30} />
-                        </Stack>
-                      </Grid>
-                      <Grid size={12}>
-                        <Skeleton />
-                        <Skeleton />
-                        <Skeleton />
-                      </Grid>
-                    </Grid>
-                  </CardContent>
-                </Card>
-              </Grid>
-            )
-          })}
         </Grid>
         {state.isFormOpen && 
           <ProjectForm

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

@@ -1,11 +1,10 @@
 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;

app2/src/components/projects/reducer.ts

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

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

app2/src/context/appContext/AppContextProvider.tsx

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

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

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

app2/src/main.tsx

@@ -6,7 +6,6 @@ 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

@@ -0,0 +1,212 @@
+{
+  "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

@@ -0,0 +1,23 @@
+{
+  "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,33 +2,10 @@ version: '3.8'
 
 services:
   azurite:
-    container_name: azurite-root
+    container_name: azurite
     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'
-    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:
+    command: 'azurite --blobHost 0.0.0.0 --queueHost 0.0.0.0 --tableHost 0.0.0.0 --loose'

infrastructure/.terraform.lock.hcl

@@ -2,20 +2,20 @@
 # Manual edits may be lost in future updates.
 
 provider "registry.terraform.io/hashicorp/azurerm" {
-  version = "4.26.0"
+  version = "3.104.0"
   hashes = [
-    "h1:Vdylhj5W0M+J62bOOdvVUlmGB7M5TfaNRcThdb8ydcc=",
-    "zh:0e381bace81028596d60e253bc320bf62d00ae2ec207d7c7e70cdbec5f543334",
-    "zh:32c8cf70e476a4d0e0a2d4cb94b4a4e95c287c5972ca1e8c0f37dc629fbe31cb",
-    "zh:568ebaa4c66fc668dc14c8ff323e47fc7b2ac3b5a5d9eec612de2b6a30164f4c",
-    "zh:596c218810ffb85bc7224574b6ba6dbab9295bfa7490eac98c5ff88beae75710",
-    "zh:75a0e5b60f24684d62944714deb1c790b17c8d4acc93b5cdb45a8187d887b7f1",
-    "zh:7d2abea6ab66a08fed7d1ab8d4f3a8344fe7e2ac76d7409a3e40e8c066df6f22",
-    "zh:7f4db75991fd610b2c0306226e5e1916d4b633cdb0126bc78951dce2365b3418",
-    "zh:95fe307defb6e0dc172855fa597140f3da96655b3c558c140ae51a4a6077f58d",
-    "zh:ae07cdd3c658c0e24d45f1cfadf8b085b18981bcd72a20093ce3f042ed0adf3f",
-    "zh:d2a471b9e42499a7247f873aebd5cbc8df0c6691f02a5c9b556aa00045c06869",
-    "zh:e0299c0f6eae2b1c935f552f76fc49a2e61975eeda9410e3920a004b74d9e750",
+    "h1:SSBkZNrevDxOI6j9tVel7/BKX/5xaMYUqx4qhLvrjS4=",
+    "zh:01aa74b1e13c797b20407c37c683b945ffb24462bb39cdaddcf5b3297272c85a",
+    "zh:42c3a69ece44ed6dbd5145dadbdbde9a2e99c3dc0b5a0b28544fd68e796a755d",
+    "zh:48102182e71a10f8337828239d770953fb54e95c4f617a5a327316ba7d9c9aa5",
+    "zh:4c086420f1acc033b5901dc266721a38f43cbab43dedae149df3ccd8d1a3615d",
+    "zh:634e3d701798d699f502c86d1ee591778fa0a46be81a220bd849c0389cd742f1",
+    "zh:6aa0c6cb606dcd8efe90fb9fb872aa5406119264ce2819d8daf35c813e6ba2f7",
+    "zh:8604d0a159b1905d7a92448d5e2e1ec0b3275b9b2d8f7986f4a566f570a6f90c",
+    "zh:912ddd9a43cbb168a58f1af625a8fe111e505c059442ad6126905449e5013877",
+    "zh:9ed54f1e7ae7881611ae659bfbd11db878adc77aa848b920cc0d76a1ab41a2ac",
+    "zh:b507020a566bdbc0dfe868103664361e8ee5549de6edceb7f5d6837dcd8af5a3",
     "zh:f569b65999264a9416862bca5cd2a6177d94ccb0424f3a4ef424428912b9cb3c",
+    "zh:f7fc6699a0359183911448bf9736777cd6d8ce91fd20d682cf635fa58e2905dd",
   ]
 }

infrastructure/config/main.tf

@@ -5,8 +5,8 @@ locals {
   }
 
   container_app_app_container_image = {
-    test = "noahspan/root-app:v1.0.0"
-    prod = "noahspan/root-app:v1.0.0"
+    test = "noahspan/root-app:v0.0.1"
+    prod = "noahspan/root-app:v0.0.1"
   }
 
   container_app_app_container_name = {
@@ -20,8 +20,8 @@ locals {
   }
 
   container_app_api_container_image = {
-    test = "noahspan/root-api:v1.0.0"
-    prod = "noahspan/root-api:v1.0.0"
+    test = "noahspan/root-api:v0.0.1"
+    prod = "noahspan/root-api:v0.0.1"
   }
 
   container_app_api_container_name = {
@@ -49,32 +49,11 @@ locals {
     prod = "root-log-analytics-workspace-prod"
   }
 
-  static_websites = {
-    test = [
-      {
-        error_404_document = "custom_not_found.html"
-        index_document = "index.html"
-      }
-    ]
-  }
-
   storage_account_name = {
     test = "noahspanroottest"
     prod = "noahspanrootprod"
   }
 
-  storage_blobs = {
-    test = [
-      {
-        name = "web"
-        storage_container_name = "$web"
-        type = "Block"
-        content_type = "text/html"
-        source = "index.html"
-      }
-    ]
-  }
-
   storage_tables = {
     test = ["projects"]
     prod = ["projects"]

infrastructure/config/outputs.tf

@@ -38,18 +38,10 @@ output "log_analytics_workspace_name" {
   value = local.log_analytics_workspace_name[var.environment]
 }
 
-output "static_websites" {
-  value = local.static_websites[var.environment]
-}
-
 output "storage_account_name" {
   value = local.storage_account_name[var.environment]
 }
 
-output "storage_blobs" {
-  value = local.storage_blobs[var.environment]
-}
-
 output "storage_tables" {
   value = local.storage_tables[var.environment]
 }

infrastructure/main.tf

@@ -1,12 +1,3 @@
-module "storage" {
-  source = "github.com/noahspannbauer/noahspan-terraform/modules/storage"
-  resource_group_name = var.RESOURCE_GROUP_NAME
-  static_websites = module.environment.static_websites
-  storage_account_name = module.environment.storage_account_name
-  storage_blobs = module.environment.storage_blobs
-  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
@@ -26,6 +17,7 @@ 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_primary_connection_string = module.storage.storage_account_primary_connection_string
+  storage_account_name = module.environment.storage_account_name
+  storage_tables = module.environment.storage_tables
   tenant_id = var.TENANT_ID
 }

package.json

@@ -1,12 +1,11 @@
 {
-  "name": "@noahspan/noahspan-root",
-  "version": "1.1.0",
+  "name": "noahspan-root",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
   "scripts": {
-    "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"
+    "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "devDependencies": {
-    "rimraf": "^6.0.1"
-  }
+  "author": "",
+  "license": "ISC"
 }

pnpm-workspace.yaml

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