LarsGJobloop · LarsGJobloop · Jun 18, 2023 · Jun 18, 2023 · Jun 18, 2023 · Jun 18, 2023
diff --git a/README.md b/README.md
@@ -10,21 +10,53 @@
 
 R Mess aims to be a realtime messaging application learning experience.
 
+## Architecture
+
+![Architecture Diagram](./docs/architecture.png)
+
+- Static File Server
+  Delivers the Application files to the client, along with brooker adress
+- Application
+  Frontend application for interacting with the chat room and connecting to the...
+- Message Brooker
+  Responsible for accepting new subscriptions and publishing messages to subscribers
+
 ## Goal
 
 - Frontend
   - Chat Client
-  Some way of Reading and Posting messages.
+    - Creating and/or entering rooms
+    - Publishing and listening for messages in a room
   - Framework [React](https://react.dev/)
 
 - Backend
-  - Message Brooker, using the Publication-Subscription pattern
-  Some way of accepting messages and distributing them to all online clients.
+  - Message Brooker
+    - Enables clients to subscribe to rooms, publish messages and recive messages from other online clients
+    - ?? Persistance ??
   - Framework [Nats](https://nats.io/)
 
+## How to run
+
+1. Ensure you have some way to run Docker Compose files
+  - Windows
+    - [Docker Desktop](https://www.docker.com/products/docker-desktop/)
+  - iOS
+    - [OrbStack](https://orbstack.dev/)
+    - [Docker Desktop](https://www.docker.com/products/docker-desktop/)
+  - Linux
+    - [Docker Engine](https://docs.docker.com/engine/install/ubuntu/)
+    - [Docker Desktop](https://www.docker.com/products/docker-desktop/)
+
+2. From the project root folder run ```$ docker compose up```
+
+3. Open up open your browser and navigate to **http://localhost:5000**
+
 ## References
 
 - [Publication Subscription Pattern](https://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern)
+- [Connection Websockets](https://en.wikipedia.org/wiki/WebSocket)
+- [Containers (Docker)](https://www.docker.com/resources/what-container/)
+- [Lightweight Orchestration (Docker Compose)](https://docs.docker.com/compose/)
 
 ### Languages
 

diff --git a/backend/Dockerfile b/backend/Dockerfile
diff --git a/client/.eslintrc.cjs b/client/.eslintrc.cjs
@@ -2,16 +2,14 @@ module.exports = {
   env: { browser: true, es2020: true },
   extends: [
     "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:react/jsx-runtime",
+    "plugin:@typescript-eslint/recommended",
     "plugin:react-hooks/recommended",
     "prettier",
   ],
+  parser: "@typescript-eslint/parser",
   parserOptions: { ecmaVersion: "latest", sourceType: "module" },
-  settings: { react: { version: "18.2" } },
   plugins: ["react-refresh"],
   rules: {
     "react-refresh/only-export-components": "warn",
-    "react/prop-types": "off",
   },
 };
diff --git a/client/.prettierrc.cjs b/client/.prettierrc.cjs
@@ -0,0 +1 @@
+module.exports = {};
diff --git a/client/.prettierrc.json b/client/.prettierrc.json
diff --git a/client/Dockerfile b/client/Dockerfile
@@ -1,7 +1,5 @@
 FROM lipanski/docker-static-website:latest
 
-COPY ./server.config .
-
 COPY ./dist .
 
-CMD ["/busybox", "httpd", "-f", "-v", "-p", "3000", "-c", "server.config"]
+CMD ["/busybox", "httpd", "-f", "-v", "-p", "80"]
diff --git a/client/index.html b/client/index.html
@@ -4,10 +4,18 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>R Mess</title>
+
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Oswald&display=swap"
+      rel="stylesheet"
+    />
+
+    <title>R-Mess</title>
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>