move frontend to port 80, add screenshots in readme

Author: Peter Wilson

README.md

@@ -5,7 +5,7 @@ This is an implementation of a scalable day trading application for UVic's Scala
 
 ## Running
 
-`docker compose up` will get the server running. It expects your computer has 16GB of ram and allocates memory between containers accordingly.
+`docker compose up` will get the server running. It expects your computer has 16GB of ram and allocates memory between containers accordingly. The frontend will be available at `http://localhost:80`
 
 ### CLI
 
@@ -14,14 +14,11 @@ There are downloadable binaries for the CLI on the releases pages. `cli --help`
 ### GUI
 NextJS React Application
 
-#### Run frontend in development mode
-1. Node 16 or greater must be installed
-2. Run
-```sh
-cd frontend
-npm install
-npm run dev
-```
+<img src="readmeimages/1.png" alt="">
+<img src="readmeimages/2.png" alt="">
+<img src="readmeimages/3.png" alt="">
+<img src="readmeimages/4.png" alt="">
+<img src="readmeimages/5.png" alt="">
 
 ## Architecture
 

docker-compose.yml

@@ -14,7 +14,11 @@ services:
       POSTGRES_PASSWORD: "daytrader"
     command: postgres -c max_connections=5010 -c fsync=off -c synchronous_commit=off -c full_page_writes=false -c effective_cache_size=8GB
     healthcheck:
-      test: ["CMD-SHELL", "sh -c 'pg_isready -U daytrader -d daytrader'"]
+      test:
+        [
+          "CMD-SHELL",
+          "sh -c 'pg_isready -U daytrader -d daytrader'"
+        ]
       interval: 5s
       timeout: 5s
       retries: 5
@@ -38,7 +42,7 @@ services:
         condition: service_started
     init: true
     ports:
-      - "80:8000"
+      - "8000:8000"
   quote-server-adaptor:
     image: ghcr.io/marcusdunn/day-trader/quote-server-adaptor
     init: true
@@ -54,4 +58,4 @@ services:
       - FRONTEND_URL=http://swift-trader-frontend:3000/
       - transactionURI=lean:8000
     ports:
-      - "3000:3000"
+      - "80:3000"

frontend/README.md

@@ -43,3 +43,11 @@ swift-trader-frontend/
     ├── components/      # Contains reusable UI components
     └── ...           
 ```
+
+## Screenshots
+
+<img src="../readmeimages/1.png" alt="">
+<img src="../readmeimages/2.png" alt="">
+<img src="../readmeimages/3.png" alt="">
+<img src="../readmeimages/4.png" alt="">
+<img src="../readmeimages/5.png" alt="">

frontend/pages/api/clients/DayTraderClient.js

@@ -5,7 +5,7 @@ import path from "path";
 const protoPath = path.join(process.cwd(), 'pages', 'api', 'clients', 'day-trader.proto');
 const def = loadSync(protoPath)
 const definitions = grpc.loadPackageDefinition(def)
-const DayTraderClient = new definitions.day_trader.DayTrader(process.env.transactionURI || 'localhost:80', grpc.credentials.createInsecure());
+const DayTraderClient = new definitions.day_trader.DayTrader(process.env.transactionURI || 'localhost:8000', grpc.credentials.createInsecure());
 
 
 export function Add(userId, amount, requestNum) {