Merge pull request #59 from fsereno/dev

Dev

.gitignore

@@ -238,4 +238,10 @@ BundleArtifacts/
 !*.[Cc]ache/
 
 #specific files
-docker-token.json
+docker-token.json
+*.secret.txt
+*.secret.json
+docker-compose.dev.yml
+docker-compose.yml
+nginx.conf
+nginx.dev.conf

.vscode/launch.json

@@ -4,6 +4,13 @@
    // For further information visit https://github.com/OmniSharp/omnisharp-vscode/blob/master/debugger-launchjson.md
    "version": "0.2.0",
    "configurations": [
+    {
+        "name": "Launch Chrome",
+        "request": "launch",
+        "type": "chrome",
+        "url": "http://localhost:8080",
+        "webRoot": "${workspaceFolder}"
+    },
     {
         "type": "aws-sam",
         "request": "direct-invoke",

.vscode/settings.json

@@ -27,5 +27,6 @@
         "!Select sequence",
         "!Split",
         "!Split sequence"
-    ]
+    ],
+    "csharp.preview.improvedLaunchExperience": true
 }

README.md

@@ -8,6 +8,8 @@ Passionate about software development and constantly eager to learn and adopt th
 ## My Portfolio Repository
 The purpose of this repository is to demonstrate skills in various technologies, coding proficiency and knowledge.
 
+This portfolio showcases a minimum viable product (MVP) for a technology-agnostic cloud deployment solution.
+
 To view a static version of this project with limited functionality, please visit:
 https://fsereno.github.io/portfolio/
 
@@ -16,29 +18,7 @@ To see a fully containerised version of this project deployed to AWS (Amazon Web
 - Raise an issue on Github (https://github.com/fsereno/portfolio/issues)
 - Contact me on LinkedIn (https://www.linkedin.com/in/fabio-sereno-6a97b986/)
 
-This project is both built and deployed with continuous integration and deployment (CI/CD).
-
-Some of the technology used in this project and related projects:
-- .NET (https://dotnet.microsoft.com)
-- Docker (https://www.docker.com/)
-- Docker Hub (https://hub.docker.com/)
-- NodeJS (https://nodejs.org/en/)
-- Webpack (https://webpack.js.org/)
-- Pug (https://pugjs.org/api/getting-started.html)
-- TypeScript (https://www.typescriptlang.org)
-- A-Frame (https://aframe.io/)
-- Sass (https://sass-lang.com/)
-- Three.js (https://threejs.org/)
-- React (https://reactjs.org/)
-- Vue (https://vuejs.org/)
-- Taiko (https://www.npmjs.com/package/taiko)
-- Mocha (https://mochajs.org/)
-- Chai (https://www.chaijs.com/)
-- Enzyme (https://enzymejs.github.io/enzyme/)
-- NUnit (https://nunit.org/)
-- SOLID principles
-- TDD - Test driven development
-- DDD - Domain driven development
+Alternatively to deploy locally, please clone this repository, ensure NodeJS and Docker are installed on your machine and you can then run the production version locally.
 
 ## Contents
 
@@ -82,7 +62,7 @@ However, once again, this will include all available services in the compose fil
 To include only specific services in the compose file, use the --include argument:
 
 ```shell
-$ npm run compose -- --include dataStructures --mode dev
+$ npm run compose -- --mode dev --include dataStructures
 ```
 ##### This will:
 - Compose the development version of the file.
@@ -143,13 +123,13 @@ $ npm run start  -- --mode dev --context dataStructures
 #### Run dependency analysis on a specific application
 
 ```shell
-$ npm run start -- --context dataStructures --mode analysis
+$ npm run analysis dir=dataStructures
 ```
 ##### This will:
 - Start the webpack analysis server.
 - Perform a dependency analysis of the dataStructures application frontend.
 - The default application is the root application - home.
-- Open your browser and navigate to http://localhost
+- Open your browser and navigate to http://localhost:8080
 
 ### Tasks
 
@@ -161,37 +141,23 @@ Tasks create ephemeral containers. Containers which are destroyed after a task h
 #### Build for release
 
 ```shell
-$ npm run task -- --name build
+$ npm run release
 ```
 ##### This will:
-- Create an ephemeral container to run the task.
 - Build the production static assets directory (dist or docs, depending on the configuration).
-- The container is automatically destroyed after use.
 
 #### Run all frontend unit tests
 
 ```shell
-$ npm run task --  --name test
-```
-##### This will:
-- Create an ephemeral container to run the task.
-- Run all application specific and global unit tests.
-
-#### Run all functional end-to-end tests
-
-Ensure the application is already running first.
-
-```shell
-$ npm run test-apps-e2e
+$ npm run test
 ```
 ##### This will:
-- Run all functional tests from the ./app/tests/functional directory
-- Currently this feature is a work in progress (WIP) and will not work on ARM architecture
+- Run all application specific and global frontend unit tests.
 
 #### Create a new application
 
 ```shell
-$ npm run task --  --name create
+$ npm run create
 ```
 ##### This will:
 - Create an ephemeral container to run the task.

app/app_UniqueDataEntry/backend/api/api.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Web">
 
   <PropertyGroup>
-    <TargetFramework>net7.0</TargetFramework>
+    <TargetFramework>net8.0</TargetFramework>
     <Nullable>enable</Nullable>
     <ImplicitUsings>enable</ImplicitUsings>
   </PropertyGroup>

app/app_UniqueDataEntry/backend/test/test.csproj

@@ -1,18 +1,18 @@
 <Project Sdk="Microsoft.NET.Sdk">
 
   <PropertyGroup>
-    <TargetFramework>net7.0</TargetFramework>
+    <TargetFramework>net8.0</TargetFramework>
     <ImplicitUsings>enable</ImplicitUsings>
     <Nullable>enable</Nullable>
 
     <IsPackable>false</IsPackable>
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="Microsoft.NET.Test.Sdk" Version="17.3.2" />
-    <PackageReference Include="moq" Version="4.18.4" />
-    <PackageReference Include="xunit" Version="2.4.2" />
-    <PackageReference Include="xunit.runner.visualstudio" Version="2.4.5">
+    <PackageReference Include="Microsoft.NET.Test.Sdk" Version="17.10.0" />
+    <PackageReference Include="Moq" Version="4.20.70" />
+    <PackageReference Include="xunit" Version="2.9.0" />
+    <PackageReference Include="xunit.runner.visualstudio" Version="2.8.2">
       <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
       <PrivateAssets>all</PrivateAssets>
     </PackageReference>

app/app_UniqueDataEntry/src/app.js

@@ -1,9 +1,10 @@
 "use strict;"
 
+import '../../sass/includes/styleDeps.scss';
 import '../sass/styles.scss';
 
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import { KeyGeneratorUtil } from '../../typeScript/Utils/keyGeneratorUtil/dist/index';
 import { SpinnerComponent } from '../../js/modules/react/spinnerComponent.js'
 import { ErrorModalComponent } from '../../js/modules/react/errorModalComponent.js';
@@ -174,7 +175,6 @@ class UniqueDataEntryApp extends React.Component {
         />
         <div className="row splitter">
           <div className="col-lg-12">
-            <h3>Items:</h3>
             <p>Add new items to the table. Only unique entries are allowed.</p>
             <div className="table-responsive">
               <table className="table" id="itemTable">
@@ -188,15 +188,15 @@ class UniqueDataEntryApp extends React.Component {
                   </tr>
                 </thead>
                 <tbody>
-                {this.state.items.map((item, index) => {
+                  {this.state.items.map((item, index) => {
                     let key = KeyGeneratorUtil.generate(`${item.secondName} ${item.contact} ${item.postCode}`);
                     return (
                       <tr key={key}>
                         <td>{item.firstName}</td>
                         <td>{item.secondName}</td>
                         <td>{item.contact}</td>
                         <td>{item.postCode}</td>
-                        <td><a href="#" className="badge badge-danger delete" data-index={index} onClick={this.handleDelete}>Delete</a></td>
+                        <td><a href="#" className="badge bg-danger delete" data-index={index} onClick={this.handleDelete}>Delete</a></td>
                       </tr>
                     )
                   })}
@@ -212,15 +212,12 @@ class UniqueDataEntryApp extends React.Component {
         </div>
         <div className="row">
           <div className="col-lg-12">
-            <FormComponent handleSubmit={this.handleSubmit}/>
+            <FormComponent handleSubmit={this.handleSubmit} />
           </div>
         </div>
       </div>
     );
   }
 }
 
-ReactDOM.render(
-  <UniqueDataEntryApp />,
-  document.getElementById('result')
-);
+ReactDOM.createRoot(document.getElementById('result')).render(<UniqueDataEntryApp />);

app/app_UniqueDataEntry/src/formComponent.js

@@ -4,6 +4,7 @@ import React, { useState } from 'react';
 import Button from 'react-bootstrap/Button';
 import Form from 'react-bootstrap/Form';
 import Col from 'react-bootstrap/Col';
+import Row from 'react-bootstrap/Row';
 
 export function FormComponent(props) {
 
@@ -30,8 +31,8 @@ export function FormComponent(props) {
   return (
     <>
       <Form noValidate validated={validated} onSubmit={handleSubmit}>
-        <Form.Row>
-          <Form.Group as={Col} md="2" controlId="firstNameInput">
+        <Row>
+          <Form.Group as={Col} md="3" controlId="firstNameInput" className='mb-3'>
             <Form.Control
               name="firstNameInput"
               type="text"
@@ -42,7 +43,9 @@ export function FormComponent(props) {
               Please enter a value.
             </Form.Control.Feedback>
           </Form.Group>
-          <Form.Group as={Col} md="2" controlId="secondNameInput">
+        </Row>
+        <Row>
+          <Form.Group as={Col} md="3" controlId="secondNameInput" className='mb-3'>
             <Form.Control
               name="secondNameInput"
               type="text"
@@ -53,7 +56,9 @@ export function FormComponent(props) {
               Please enter a value.
             </Form.Control.Feedback>
           </Form.Group>
-          <Form.Group as={Col} md="2" controlId="contactInput">
+        </Row>
+        <Row>
+          <Form.Group as={Col} md="3" controlId="contactInput" className='mb-3'>
             <Form.Control
               name="contactInput"
               type="text"
@@ -65,7 +70,9 @@ export function FormComponent(props) {
               Please enter a valid value.
             </Form.Control.Feedback>
           </Form.Group>
-          <Form.Group as={Col} md="2" controlId="postCodeInput">
+        </Row>
+        <Row>
+          <Form.Group as={Col} md="3" controlId="postCodeInput" className='mb-3'>
             <Form.Control
               name="postCodeInput"
               type="text"
@@ -76,10 +83,12 @@ export function FormComponent(props) {
               Please enter a value.
             </Form.Control.Feedback>
           </Form.Group>
-          <Form.Group as={Col} md="3"> 
+        </Row>
+        <Row>
+          <Form.Group as={Col} md="3">
             <Button variant="dark" id="submit" type="submit">Add item</Button>
           </Form.Group>
-        </Form.Row>
+        </Row>
       </Form>
     </>
   );

app/app_UniqueDataEntry/tests/e2e/taiko.test.js

@@ -20,6 +20,7 @@ beforeAll(async () => {
 describe(APPLICATION, () => {
   test('Should add an item to the table', async () => {
     await goto(URL);
+    await click(button({id: 'cookieBannerBtn'}));
     await write('James', into(textBox({ id: 'firstNameInput' })));
     await write('Brown', into(textBox({ id: 'secondNameInput' })));
     await write('(000) 111 222', into(textBox({ id: 'contactInput' })));
@@ -31,6 +32,7 @@ describe(APPLICATION, () => {
   }, 100000);
   test('Should not add a duplicate item to the table', async () => {
     await goto(URL);
+    await click(button({id: 'cookieBannerBtn'}));
     await write('John', into(textBox({ id: 'firstNameInput' })));
     await write('Doe', into(textBox({ id: 'secondNameInput' })));
     await write('000000000', into(textBox({ id: 'contactInput' })));
@@ -46,6 +48,7 @@ describe(APPLICATION, () => {
   }, 100000);
   test('Should remove an item to the table', async () => {
     await goto(URL);
+    await click(button({id: 'cookieBannerBtn'}));
     await click($('a.delete[data-index="0"]'));
     const result = await evaluate($('#itemTable'), (element) => element.innerText);
     expect(result).toBe('First name\tSecond name\tContact\tPostcode\tAction');

app/app_aframeComplex/src/app.js

@@ -1,12 +1,14 @@
 "use strict;"
 
+import '../../sass/includes/styleDeps.scss';
 import "../sass/styles.scss";
 
-import 'aframe';
 
+import 'aframe';
 import React from 'react';
-import ReactDOM from 'react-dom';
-class Scene extends React.Component {
+import ReactDOM from 'react-dom/client';
+
+class App extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -71,4 +73,4 @@ class Scene extends React.Component {
   }
 }
 
-ReactDOM.render(<Scene />,document.getElementById('result'));
+ReactDOM.createRoot(document.getElementById('result')).render(<App />);

app/app_basicEmailClientReactSpa/sass/styles.scss

@@ -3,13 +3,23 @@
 
 body {
     #spaNavBar {
-        a.active {
+        a.active, a:hover {
             border-bottom: 1px solid $white;
         }
         .navbar-nav {
             @media screen and (max-width: $small) {
                 margin: auto;
             }
+            a {
+                color: $white;
+                padding: 0.25rem 1rem 1rem 1rem;
+                text-decoration: none;
+            }
+            padding-bottom: 0.25rem;
         }
     }
+
+    .badge {
+        color: $real-white;
+    }
 }

app/app_basicEmailClientReactSpa/src/app.js

@@ -1,9 +1,10 @@
 "use strict;"
 
+import '../../sass/includes/styleDeps.scss';
 import '../sass/styles.scss';
 
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import { Router } from './components/router';
 import { EmailContextProvider } from './components/contextProviders/emailContextProvider';
 import { ToasterContextProvider } from '../../js/modules/react/toasterComponent';
@@ -19,4 +20,4 @@ function App() {
   );
 }
 
-ReactDOM.render(<App />, document.getElementById('result'));
+ReactDOM.createRoot(document.getElementById('result')).render(<App />);