Nearby Room Fix / ChatMaps URL Formatting Fix (#103)

Will need to pick out some good icons/styles. Overlay offset needs some work still.

.github/workflows/frontend-tests.yml

@@ -1,29 +0,0 @@
-name: Frontend Next.Js Build Validation
-
-on:
-  pull_request:
-  push:
-    branches:
-      - "main"
-
-jobs:
-  nextjs:
-    runs-on: ubuntu-latest
-
-    steps:
-      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
-      - uses: actions/checkout@v3
-
-      - name: Setup Node
-        uses: actions/setup-node@v2
-        with:
-          node-version: 21.6.2
-
-      - name: Install dependencies
-        run: npm install frontend-next/
-
-      - name: Lint
-        run: npm --prefix frontend-next/ run lint
-
-      - name: Build Frontend
-        run: npm --prefix frontend-next/ run build

.gitignore

@@ -1,3 +1,10 @@
+# Android Build
+/frontend-next/android
+
+# Firebase Stuff
+firebase-admin-key.json
+firebase*.json
+
 # Logs
 logs
 *.log
@@ -127,4 +134,7 @@ dist
 .yarn/unplugged
 .yarn/build-state.yml
 .yarn/install-state.gz
-.pnp.*
+.pnp.*
+
+# Am I the only mac user
+**/.DS_Store

README.md

@@ -1,20 +1,22 @@
-# ChatMaps
+![](/frontend-next/public/logos/logo_transparent.png)
 Main repo for ChatMaps, our COS420 Project.
 
-ChatMaps is a web-based social networking service that allows users to connect to others in their local geographic area. It will implement an interactable mapping utility to show general user locations relative to other users, as well as a chat room feature that allows users to start public conversations based on a specified topic. ChatMaps is primarily intended for use in densely populated areas, such as college campuses or metropolitan areas, so people of similar interests can start conversations. The goal of this project is to create a web app that plots locations, gives a radius of the local area, and connects users into different topic-based chat rooms.
+ChatMaps is a web-based social networking service that allows users to connect to others in their local geographic area. It implements an interactable mapping utility to show general user locations relative to others, as well as a chat room feature that allows users to start public conversations based on any given topic. ChatMaps is primarily intended for use in densely populated areas, such as college campuses or metropolitan areas, so people of similar interests can start new conversations. The goal of this project is to create a web app that plots locations, gives a radius of the local area, and connects users into different topic-based chat rooms.
 
-This service will implement user login and profiles, allowing users to add each other as friends and start private conversations. There will be several default chat rooms of varying topics, but users will also have the ability to create their own topics that will be viewable by other users. For example, a user at the University of Maine could create a joinable chat room titled “COS420”, which would be visible to others near this campus.
+This service implements user login and profiles, allowing users to add each other as friends and start private conversations. There are several default chat rooms of varying topics, but users also have the ability to create their own rooms that will be visible to other users. For example, a user at the University of Maine could create a joinable chat room titled “COS420”, which would be joinable by others near this campus.
 
 This app shares some similarities to other social networks that implement location-based content. ChatMaps’ novel approach is to utilize user location to facilitate real-time communication with others within a given radius.
 
 The live version of this app can be found at:
 
-http://chatmaps.nicholaspease.com
+https://chatma.ps/
 
-A local version can be run with:
+A local version can be run (assuming you have Node installed) with:
 
 cd frontend-next/
 
+npm install
+
 npm run dev
 
 then navigating to:

backend/server_update_hook/.gitignore

@@ -1 +0,0 @@
-node_modules/

backend/server_update_hook/README.md

@@ -1,16 +0,0 @@
-## Server Update Hook
-The purpose of this file is to enable automatic server updates when a pull request to the main branch succeeds. This is accomplished via a workflow sent from Github to the server which then reloads both itself and the frontend.
-
-## API Endpoints
-Base Url: ```https://chatmaps.nicholaspease.com/api/v1/```
-
-|Route|Method|Response Type|Use|Responses|
-|-----|------|-------------|---|---------|
-|```/```    |GET   |Plain Text   |Heartbeat|200 - "OK"|
-|```/deploy```|POST|Plain Text   |Server Update Trigger|200 - "OK" - Server Online / Updated
-
-## Files
-|File|Purpose|
-|----|-------|
-|api.js|NodeJS API using Express|
-|README.md|API Reference|

backend/server_update_hook/api.js

@@ -1,32 +0,0 @@
-// Physical Server Update Hook
-// Imports
-// Requires express, body-parser, child_process
-const express = require("express")
-const bodyParser = require("body-parser")
-const { exec } = require("child_process")
-
-// Start the express app and initialize
-const app = express()
-app.use(bodyParser.urlencoded({ extended: false }));
-app.use(bodyParser.json()); // This processes all the POST data as JSON
-
-// Uses nodejs and express as "basic" backend server
-// Recieves webhook from Github at https://chatmaps.nicholaspease.com/
-app.post("/api/v1/deploy", function (req, res) {
-    // Webhook returns all pull request actions
-    // Limit to "closed", "merged", and the target branch being "main"
-    if (req.body.action == "closed" && req.body.pull_request.merged == true && req.body.pull_request.base.ref == "main") {
-        // (re)Start all the systemd files
-        exec("systemctl restart frontend-next.service", (error, stdout, stderr) => {});
-        exec("systemctl restart server_update_hook.service", (error, stdout, stderr) => {});
-    }
-    res.send("OK")
-})
-
-// Generic endpoint, useful to test if updater is alive
-app.get('/api/v1', (req, res) => {
-    res.send('OK')
-})
-
-// Server runs on port 8000, exposed on server at /api/v1
-app.listen(8000)

backend/server_update_hook/package-lock.json

@@ -1,728 +0,0 @@
-{
-  "name": "backend",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {
-    "": {
-      "dependencies": {
-        "body-parser": "^1.20.2",
-        "express": "^4.18.2"
-      }
-    },
-    "node_modules/accepts": {
-      "version": "1.3.8",
-      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
-      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
-      "dependencies": {
-        "mime-types": "~2.1.34",
-        "negotiator": "0.6.3"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/array-flatten": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
-      "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg=="
-    },
-    "node_modules/body-parser": {
-      "version": "1.20.2",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.2.tgz",
-      "integrity": "sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==",
-      "dependencies": {
-        "bytes": "3.1.2",
-        "content-type": "~1.0.5",
-        "debug": "2.6.9",
-        "depd": "2.0.0",
-        "destroy": "1.2.0",
-        "http-errors": "2.0.0",
-        "iconv-lite": "0.4.24",
-        "on-finished": "2.4.1",
-        "qs": "6.11.0",
-        "raw-body": "2.5.2",
-        "type-is": "~1.6.18",
-        "unpipe": "1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.8",
-        "npm": "1.2.8000 || >= 1.4.16"
-      }
-    },
-    "node_modules/bytes": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
-      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/call-bind": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
-      "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
-      "dependencies": {
-        "es-define-property": "^1.0.0",
-        "es-errors": "^1.3.0",
-        "function-bind": "^1.1.2",
-        "get-intrinsic": "^1.2.4",
-        "set-function-length": "^1.2.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/content-disposition": {
-      "version": "0.5.4",
-      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
-      "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
-      "dependencies": {
-        "safe-buffer": "5.2.1"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/content-type": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
-      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/cookie": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
-      "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/cookie-signature": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
-      "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
-    },
-    "node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dependencies": {
-        "ms": "2.0.0"
-      }
-    },
-    "node_modules/define-data-property": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
-      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
-      "dependencies": {
-        "es-define-property": "^1.0.0",
-        "es-errors": "^1.3.0",
-        "gopd": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/depd": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
-      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/destroy": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
-      "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
-      "engines": {
-        "node": ">= 0.8",
-        "npm": "1.2.8000 || >= 1.4.16"
-      }
-    },
-    "node_modules/ee-first": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
-      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
-    },
-    "node_modules/encodeurl": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
-      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/es-define-property": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
-      "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
-      "dependencies": {
-        "get-intrinsic": "^1.2.4"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/es-errors": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
-      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/escape-html": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
-    },
-    "node_modules/etag": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
-      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/express": {
-      "version": "4.18.2",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
-      "integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==",
-      "dependencies": {
-        "accepts": "~1.3.8",
-        "array-flatten": "1.1.1",
-        "body-parser": "1.20.1",
-        "content-disposition": "0.5.4",
-        "content-type": "~1.0.4",
-        "cookie": "0.5.0",
-        "cookie-signature": "1.0.6",
-        "debug": "2.6.9",
-        "depd": "2.0.0",
-        "encodeurl": "~1.0.2",
-        "escape-html": "~1.0.3",
-        "etag": "~1.8.1",
-        "finalhandler": "1.2.0",
-        "fresh": "0.5.2",
-        "http-errors": "2.0.0",
-        "merge-descriptors": "1.0.1",
-        "methods": "~1.1.2",
-        "on-finished": "2.4.1",
-        "parseurl": "~1.3.3",
-        "path-to-regexp": "0.1.7",
-        "proxy-addr": "~2.0.7",
-        "qs": "6.11.0",
-        "range-parser": "~1.2.1",
-        "safe-buffer": "5.2.1",
-        "send": "0.18.0",
-        "serve-static": "1.15.0",
-        "setprototypeof": "1.2.0",
-        "statuses": "2.0.1",
-        "type-is": "~1.6.18",
-        "utils-merge": "1.0.1",
-        "vary": "~1.1.2"
-      },
-      "engines": {
-        "node": ">= 0.10.0"
-      }
-    },
-    "node_modules/express/node_modules/body-parser": {
-      "version": "1.20.1",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
-      "integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==",
-      "dependencies": {
-        "bytes": "3.1.2",
-        "content-type": "~1.0.4",
-        "debug": "2.6.9",
-        "depd": "2.0.0",
-        "destroy": "1.2.0",
-        "http-errors": "2.0.0",
-        "iconv-lite": "0.4.24",
-        "on-finished": "2.4.1",
-        "qs": "6.11.0",
-        "raw-body": "2.5.1",
-        "type-is": "~1.6.18",
-        "unpipe": "1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.8",
-        "npm": "1.2.8000 || >= 1.4.16"
-      }
-    },
-    "node_modules/express/node_modules/raw-body": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz",
-      "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==",
-      "dependencies": {
-        "bytes": "3.1.2",
-        "http-errors": "2.0.0",
-        "iconv-lite": "0.4.24",
-        "unpipe": "1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/finalhandler": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
-      "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
-      "dependencies": {
-        "debug": "2.6.9",
-        "encodeurl": "~1.0.2",
-        "escape-html": "~1.0.3",
-        "on-finished": "2.4.1",
-        "parseurl": "~1.3.3",
-        "statuses": "2.0.1",
-        "unpipe": "~1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/forwarded": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
-      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/fresh": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
-      "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/function-bind": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
-      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/get-intrinsic": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
-      "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
-      "dependencies": {
-        "es-errors": "^1.3.0",
-        "function-bind": "^1.1.2",
-        "has-proto": "^1.0.1",
-        "has-symbols": "^1.0.3",
-        "hasown": "^2.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/gopd": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
-      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
-      "dependencies": {
-        "get-intrinsic": "^1.1.3"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/has-property-descriptors": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
-      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
-      "dependencies": {
-        "es-define-property": "^1.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/has-proto": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
-      "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/has-symbols": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/hasown": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.1.tgz",
-      "integrity": "sha512-1/th4MHjnwncwXsIW6QMzlvYL9kG5e/CpVvLRZe4XPa8TOUNbCELqmvhDmnkNsAjwaG4+I8gJJL0JBvTTLO9qA==",
-      "dependencies": {
-        "function-bind": "^1.1.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/http-errors": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
-      "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
-      "dependencies": {
-        "depd": "2.0.0",
-        "inherits": "2.0.4",
-        "setprototypeof": "1.2.0",
-        "statuses": "2.0.1",
-        "toidentifier": "1.0.1"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/iconv-lite": {
-      "version": "0.4.24",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
-      "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/inherits": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
-    },
-    "node_modules/ipaddr.js": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
-      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
-    "node_modules/media-typer": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
-      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/merge-descriptors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
-      "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w=="
-    },
-    "node_modules/methods": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
-      "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/mime": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
-      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
-      "bin": {
-        "mime": "cli.js"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/mime-db": {
-      "version": "1.52.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
-      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/mime-types": {
-      "version": "2.1.35",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
-      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dependencies": {
-        "mime-db": "1.52.0"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
-    },
-    "node_modules/negotiator": {
-      "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
-      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/object-inspect": {
-      "version": "1.13.1",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
-      "integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==",
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/on-finished": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
-      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
-      "dependencies": {
-        "ee-first": "1.1.1"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/parseurl": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
-      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/path-to-regexp": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
-      "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ=="
-    },
-    "node_modules/proxy-addr": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
-      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
-      "dependencies": {
-        "forwarded": "0.2.0",
-        "ipaddr.js": "1.9.1"
-      },
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
-    "node_modules/qs": {
-      "version": "6.11.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
-      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
-      "dependencies": {
-        "side-channel": "^1.0.4"
-      },
-      "engines": {
-        "node": ">=0.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/range-parser": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
-      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/raw-body": {
-      "version": "2.5.2",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz",
-      "integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==",
-      "dependencies": {
-        "bytes": "3.1.2",
-        "http-errors": "2.0.0",
-        "iconv-lite": "0.4.24",
-        "unpipe": "1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/safe-buffer": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ]
-    },
-    "node_modules/safer-buffer": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
-    },
-    "node_modules/send": {
-      "version": "0.18.0",
-      "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
-      "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
-      "dependencies": {
-        "debug": "2.6.9",
-        "depd": "2.0.0",
-        "destroy": "1.2.0",
-        "encodeurl": "~1.0.2",
-        "escape-html": "~1.0.3",
-        "etag": "~1.8.1",
-        "fresh": "0.5.2",
-        "http-errors": "2.0.0",
-        "mime": "1.6.0",
-        "ms": "2.1.3",
-        "on-finished": "2.4.1",
-        "range-parser": "~1.2.1",
-        "statuses": "2.0.1"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/send/node_modules/ms": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
-    },
-    "node_modules/serve-static": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz",
-      "integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==",
-      "dependencies": {
-        "encodeurl": "~1.0.2",
-        "escape-html": "~1.0.3",
-        "parseurl": "~1.3.3",
-        "send": "0.18.0"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/set-function-length": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.1.tgz",
-      "integrity": "sha512-j4t6ccc+VsKwYHso+kElc5neZpjtq9EnRICFZtWyBsLojhmeF/ZBd/elqm22WJh/BziDe/SBiOeAt0m2mfLD0g==",
-      "dependencies": {
-        "define-data-property": "^1.1.2",
-        "es-errors": "^1.3.0",
-        "function-bind": "^1.1.2",
-        "get-intrinsic": "^1.2.3",
-        "gopd": "^1.0.1",
-        "has-property-descriptors": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/setprototypeof": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
-      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
-    },
-    "node_modules/side-channel": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.5.tgz",
-      "integrity": "sha512-QcgiIWV4WV7qWExbN5llt6frQB/lBven9pqliLXfGPB+K9ZYXxDozp0wLkHS24kWCm+6YXH/f0HhnObZnZOBnQ==",
-      "dependencies": {
-        "call-bind": "^1.0.6",
-        "es-errors": "^1.3.0",
-        "get-intrinsic": "^1.2.4",
-        "object-inspect": "^1.13.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/statuses": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
-      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/toidentifier": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
-      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
-      "engines": {
-        "node": ">=0.6"
-      }
-    },
-    "node_modules/type-is": {
-      "version": "1.6.18",
-      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
-      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
-      "dependencies": {
-        "media-typer": "0.3.0",
-        "mime-types": "~2.1.24"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/unpipe": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
-      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/utils-merge": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
-      "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
-      "engines": {
-        "node": ">= 0.4.0"
-      }
-    },
-    "node_modules/vary": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
-      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    }
-  }
-}

backend/server_update_hook/package.json

@@ -1,6 +0,0 @@
-{
-  "dependencies": {
-    "body-parser": "^1.20.2",
-    "express": "^4.18.2"
-  }
-}

backend/systemd/README.md

@@ -1,8 +0,0 @@
-## systemd (systemctl) Files
-This folder contains all the files required by systemctl on the server for updating and running the backend/frontend. These are copied onto the server and placed in the ```/etc/systemd/system``` folder. 
-
-## Files
-|Filename|Connected Service|
-|--------|-----------------|
-|frontend-next.service|Folder: frontend-next|
-|server_update_hook.service|Folder: backend/server_update_hook|

backend/systemd/frontend-next.service

@@ -1,19 +0,0 @@
-[Unit]
-Description=ChatMaps Frontend Server
-After=network.target
-
-[Service]
-Type=simple
-User=root
-Group=root
-Restart=on-failure
-RestartSec=10
-WorkingDirectory=/root/ChatMaps/frontend-next
-ExecStartPre=/usr/bin/git pull
-ExecStartPre=/usr/bin/git checkout main
-ExecStartPre=/usr/bin/npm install
-ExecStartPre=/usr/bin/npm run build
-ExecStart=/usr/bin/npm run start
-
-[Install]
-WantedBy=multi-user.target

backend/systemd/server_update_hook.service

@@ -1,18 +0,0 @@
-[Unit]
-Description=ChatMaps Backend Server Updater / Restarter
-After=network.target
-
-[Service]
-Type=simple
-User=root
-Group=root
-Restart=on-failure
-RestartSec=10
-WorkingDirectory=/root/ChatMaps/backend/server_update_hook
-ExecStartPre=/usr/bin/git pull
-ExecStartPre=/usr/bin/git checkout main
-ExecStartPre=/usr/bin/npm install
-ExecStart=/usr/bin/node api.js
-
-[Install]
-WantedBy=multi-user.target

frontend-next/.eslintrc.json

@@ -1,3 +1,10 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": ["next/core-web-vitals"],
+  "rules": {
+    "no-unused-vars": ["warn", { "vars": "all", "args": "after-used", "ignoreRestSiblings": false }],
+    "jsx-a11y/alt-text": "off",
+    "@next/next/no-img-element": "off",
+    "no-console": 1,
+    "react-hooks/exhaustive-deps": "off"
+  }
 }

frontend-next/__tests__/Chat.js

@@ -0,0 +1,22 @@
+import { Chat } from "../src/components/app/datatypes";
+import renderer from 'react-test-renderer';
+
+var exampleChatObj = {
+    body: "Hello, World!",
+    isSystem: false,
+    timestamp: 1710527946340,
+    user: "TestUser"
+}
+
+var exampleUser = {
+    uid: "123456",
+    username: "TestUser",
+    lastOnline: true
+}
+
+it('Chat Renders Correctly', () => {
+    const tree = renderer
+        .create((<Chat chatObj={exampleChatObj} user={exampleUser} />))
+        .toJSON();
+    expect(tree).toMatchSnapshot();
+});

frontend-next/__tests__/ChatRoomSidebar.js

@@ -0,0 +1,14 @@
+import { ChatRoomSidebar } from "../src/components/app/datatypes";
+import renderer from 'react-test-renderer';
+
+var exampleRoom = {
+    name: "TestRoom",
+    description: "This is a test room.",
+}
+
+it('ChatRoomSidebar Renders Correctly', () => {
+    const tree = renderer
+        .create((<ChatRoomSidebar roomObj={exampleRoom} />))
+        .toJSON();
+    expect(tree).toMatchSnapshot();
+});

frontend-next/__tests__/DM.js

@@ -0,0 +1,30 @@
+import { DM } from "../src/components/app/friends/dm";
+import renderer from 'react-test-renderer';
+
+var message = "Hello, World! This is a test message. https://www.google.com"
+
+var exampleUser = {
+    uid: "123456",
+    username: "TestUser",
+    firstName: "Test",
+    lastName: "User",
+    lastOnline: true,
+    pfp: "https://th.bing.com/th/id/OIP.K5VoTfw97JiEc1OBODAjmQHaHO?rs=1&pid=ImgDetMain"
+}
+
+var friendObj = {
+    uid: "123456",
+    username: "TestUser",
+    firstName: "Test",
+    lastName: "Friend",
+    lastOnline: true,
+    pfp: "https://th.bing.com/th/id/OIP.K5VoTfw97JiEc1OBODAjmQHaHO?rs=1&pid=ImgDetMain"
+
+}
+
+it('RMF Renders Correctly', () => {
+    const tree = renderer
+        .create(<DM user={exampleUser} friendObj={friendObj} />)
+        .toJSON();
+    expect(tree).toMatchSnapshot();
+});

frontend-next/__tests__/Member.js

@@ -0,0 +1,25 @@
+import { FirstPage } from "@mui/icons-material";
+import { Member } from "../src/components/app/datatypes";
+import renderer from 'react-test-renderer';
+
+var exampleChatObj = {
+    body: "Hello, World!",
+    isSystem: false,
+    timestamp: 1710527946340,
+    user: "TestUser"
+}
+
+var exampleUser = {
+    uid: "123456",
+    username: "TestUser",
+    firstName: "Test",
+    lastName: "User",
+    lastOnline: true
+}
+
+it('Member Renders Correctly', () => {
+    const tree = renderer
+        .create((<Member memberObj={exampleUser} />))
+        .toJSON();
+    expect(tree).toMatchSnapshot();
+});

frontend-next/__tests__/RMF.js

@@ -0,0 +1,11 @@
+import { RMF } from "../src/components/app/datatypes";
+import renderer from 'react-test-renderer';
+
+var message = "Hello, World! This is a test message. https://www.google.com"
+
+it('RMF Renders Correctly', () => {
+    const tree = renderer
+        .create((RMF(message)))
+        .toJSON();
+    expect(tree).toMatchSnapshot();
+});

frontend-next/__tests__/__snapshots__/Chat.js.snap

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Chat Renders Correctly 1`] = `
+<div
+  className="width-[100%] bg-white rounded-lg mt-1 text-left p-1 grid grid-cols-2 mr-2"
+>
+  <div>
+    <span
+      className="mr-[5px]"
+      style={
+        {
+          "color": "#133337",
+        }
+      }
+    >
+      <a
+        className="hover:font-bold cursor-pointer"
+        href="/user?uid=undefined"
+        onClick={[Function]}
+        onMouseEnter={[Function]}
+        onTouchStart={[Function]}
+      >
+        TestUser
+      </a>
+    </span>
+    Hello, World!
+  </div>
+  <div
+    className="text-right text-[#d1d1d1]"
+  >
+    3/15/2024, 2:39:06 PM
+  </div>
+</div>
+`;

frontend-next/__tests__/__snapshots__/ChatRoomSidebar.js.snap

@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ChatRoomSidebar Renders Correctly 1`] = `
+<div
+  className="border-[black] border-1 shadow-lg p-2 m-2 rounded-lg cursor-pointer"
+>
+  <a
+    href="/chat?room=undefined/TestRoom-undefined"
+    onClick={[Function]}
+    onMouseEnter={[Function]}
+    onTouchStart={[Function]}
+  >
+    <div
+      className="grid grid-cols-3"
+    >
+      <div
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+      >
+        <svg
+          aria-hidden={true}
+          className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+          data-testid="PersonIcon"
+          focusable="false"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4m0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4"
+          />
+        </svg>
+        <div>
+          0
+           / 
+          0
+        </div>
+      </div>
+      <div
+        className="col-span-2"
+      >
+        <div
+          className="font-bold"
+        >
+          TestRoom
+        </div>
+        <div
+          className="italic"
+        >
+          This is a test room.
+        </div>
+      </div>
+    </div>
+  </a>
+</div>
+`;

frontend-next/__tests__/__snapshots__/DM.js.snap

@@ -0,0 +1,76 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RMF Renders Correctly 1`] = `
+<div
+  className="border-[black] border-1 shadow-lg m-2 rounded-lg"
+>
+  <div
+    className="grid grid-cols-4"
+  >
+    <div
+      className="place-content-center"
+    >
+      <svg
+        aria-hidden={true}
+        className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium cursor-pointer css-i4bv87-MuiSvgIcon-root"
+        data-testid="ChatIcon"
+        focusable="false"
+        onClick={[Function]}
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2M6 9h12v2H6zm8 5H6v-2h8zm4-6H6V6h12z"
+        />
+      </svg>
+    </div>
+    <div
+      className="col-span-3 cursor-pointer"
+    >
+      <div
+        onClick={[Function]}
+      >
+        <div
+          className="grid grid-cols-2 justify-items-center"
+        >
+          <div
+            className="mr-8"
+          >
+            <img
+              className="w-[50px] h-[50px]"
+              src="https://th.bing.com/th/id/OIP.K5VoTfw97JiEc1OBODAjmQHaHO?rs=1&pid=ImgDetMain"
+            />
+          </div>
+          <div
+            className=""
+          >
+            <div
+              className="font-bold"
+            >
+              <svg
+                aria-hidden={true}
+                className="MuiSvgIcon-root MuiSvgIcon-fontSize20px text-lime-600 mr-1 relative top-[-2px] css-821wyw-MuiSvgIcon-root"
+                data-testid="CircleIcon"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2"
+                />
+              </svg>
+              Test
+               
+              Friend
+            </div>
+            <div
+              className=""
+            >
+              @
+              TestUser
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

frontend-next/__tests__/__snapshots__/Member.js.snap

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Member Renders Correctly 1`] = `
+<a
+  href="/user?uid=123456"
+  onClick={[Function]}
+  onMouseEnter={[Function]}
+  onTouchStart={[Function]}
+>
+  <div
+    className="cursor-pointer g-[aliceblue] rounded-lg m-3 shadow-xl p-2"
+  >
+    <svg
+      aria-hidden={true}
+      className="MuiSvgIcon-root MuiSvgIcon-fontSize20px text-lime-600 mr-1 relative top-[-1px] css-821wyw-MuiSvgIcon-root"
+      data-testid="CircleIcon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2"
+      />
+    </svg>
+    TestUser
+  </div>
+</a>
+`;

frontend-next/__tests__/__snapshots__/RMF.js.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RMF Renders Correctly 1`] = `
+<span
+  className="mr-2"
+>
+  Hello, World! This is a test message. 
+  <img
+    className="max-w-[100%]"
+    src="https://www.google.com"
+  />
+</span>
+`;

frontend-next/capacitor.config.ts

@@ -0,0 +1,12 @@
+import { CapacitorConfig } from '@capacitor/cli';
+
+const config: CapacitorConfig = {
+  appId: 'com.jacsn.chatmaps',
+  appName: 'ChatMaps',
+  webDir: 'out',
+  server: {
+    androidScheme: 'https'
+  }
+};
+
+export default config;

frontend-next/firebase-config.js

@@ -0,0 +1,21 @@
+import { initializeApp, getApps, getApp } from "firebase/app";
+import { getAuth } from "firebase/auth";
+import { getDatabase} from "firebase/database"
+import {getStorage} from "firebase/storage"
+
+var config = {
+    apiKey: "AIzaSyDbDPjQGt-lIjNPeTG-Q5AECM1m0vtOr2c",
+    authDomain: "chatmaps-3e7fa.firebaseapp.com",
+    projectId: "chatmaps-3e7fa",
+    storageBucket: "chatmaps-3e7fa.appspot.com",
+    messagingSenderId: "771010649524",
+    appId: "1:771010649524:web:b6e66d3457820c817b26e1",
+    databaseURL: "https://chatmaps-3e7fa-default-rtdb.firebaseio.com/",
+}
+
+var app = getApps().length > 0 ? getApp() : initializeApp(config);
+var auth = getAuth(app);
+var storage = getStorage(app);
+var database = getDatabase(app);
+
+export { auth, app, database, storage };

frontend-next/jest.config.js

@@ -0,0 +1,204 @@
+const nextJest = require('next/jest')
+/**
+ * For a detailed explanation regarding each configuration property, visit:
+ * https://jestjs.io/docs/configuration
+ */
+
+/** @type {import('jest').Config} */
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: './',
+})
+const config = {
+  testEnvironment: 'jsdom',
+  // All imported modules in your tests should be mocked automatically
+  // automock: false,
+
+  // Stop running tests after `n` failures
+  // bail: 0,
+
+  // The directory where Jest should store its cached dependency information
+  // cacheDirectory: "C:\\Users\\Nick\\AppData\\Local\\Temp\\jest",
+
+  // Automatically clear mock calls, instances, contexts and results before every test
+  clearMocks: true,
+
+  // Indicates whether the coverage information should be collected while executing the test
+  collectCoverage: true,
+
+  // An array of glob patterns indicating a set of files for which coverage information should be collected
+  // collectCoverageFrom: undefined,
+
+  // The directory where Jest should output its coverage files
+  coverageDirectory: "coverage",
+
+  // An array of regexp pattern strings used to skip coverage collection
+  // coveragePathIgnorePatterns: [
+  //   "\\\\node_modules\\\\"
+  // ],
+
+  // Indicates which provider should be used to instrument code for coverage
+  coverageProvider: "v8",
+
+  // A list of reporter names that Jest uses when writing coverage reports
+  // coverageReporters: [
+  //   "json",
+  //   "text",
+  //   "lcov",
+  //   "clover"
+  // ],
+
+  // An object that configures minimum threshold enforcement for coverage results
+  // coverageThreshold: undefined,
+
+  // A path to a custom dependency extractor
+  // dependencyExtractor: undefined,
+
+  // Make calling deprecated APIs throw helpful error messages
+  // errorOnDeprecated: false,
+
+  // The default configuration for fake timers
+  // fakeTimers: {
+  //   "enableGlobally": false
+  // },
+
+  // Force coverage collection from ignored files using an array of glob patterns
+  // forceCoverageMatch: [],
+
+  // A path to a module which exports an async function that is triggered once before all test suites
+  // globalSetup: undefined,
+
+  // A path to a module which exports an async function that is triggered once after all test suites
+  // globalTeardown: undefined,
+
+  // A set of global variables that need to be available in all test environments
+  // globals: {},
+
+  // The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers.
+  // maxWorkers: "50%",
+
+  // An array of directory names to be searched recursively up from the requiring module's location
+  // moduleDirectories: [
+  //   "node_modules"
+  // ],
+
+  // An array of file extensions your modules use
+  // moduleFileExtensions: [
+  //   "js",
+  //   "mjs",
+  //   "cjs",
+  //   "jsx",
+  //   "ts",
+  //   "tsx",
+  //   "json",
+  //   "node"
+  // ],
+
+  // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
+  // moduleNameMapper: {},
+
+  // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
+  // modulePathIgnorePatterns: [],
+
+  // Activates notifications for test results
+  // notify: false,
+
+  // An enum that specifies notification mode. Requires { notify: true }
+  // notifyMode: "failure-change",
+
+  // A preset that is used as a base for Jest's configuration
+  // preset: undefined,
+
+  // Run tests from one or more projects
+  // projects: undefined,
+
+  // Use this configuration option to add custom reporters to Jest
+  // reporters: undefined,
+
+  // Automatically reset mock state before every test
+  // resetMocks: false,
+
+  // Reset the module registry before running each individual test
+  // resetModules: false,
+
+  // A path to a custom resolver
+  // resolver: undefined,
+
+  // Automatically restore mock state and implementation before every test
+  // restoreMocks: false,
+
+  // The root directory that Jest should scan for tests and modules within
+  // rootDir: undefined,
+
+  // A list of paths to directories that Jest should use to search for files in
+  // roots: [
+  //   "<rootDir>"
+  // ],
+
+  // Allows you to use a custom runner instead of Jest's default test runner
+  // runner: "jest-runner",
+
+  // The paths to modules that run some code to configure or set up the testing environment before each test
+  // setupFiles: [],
+
+  // A list of paths to modules that run some code to configure or set up the testing framework before each test
+  // setupFilesAfterEnv: [],
+
+  // The number of seconds after which a test is considered as slow and reported as such in the results.
+  // slowTestThreshold: 5,
+
+  // A list of paths to snapshot serializer modules Jest should use for snapshot testing
+  // snapshotSerializers: [],
+
+  // The test environment that will be used for testing
+  // testEnvironment: "jest-environment-node",
+
+  // Options that will be passed to the testEnvironment
+  // testEnvironmentOptions: {},
+
+  // Adds a location field to test results
+  // testLocationInResults: false,
+
+  // The glob patterns Jest uses to detect test files
+  // testMatch: [
+  //   "**/__tests__/**/*.[jt]s?(x)",
+  //   "**/?(*.)+(spec|test).[tj]s?(x)"
+  // ],
+
+  // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
+  // testPathIgnorePatterns: [
+  //   "\\\\node_modules\\\\"
+  // ],
+
+  // The regexp pattern or array of patterns that Jest uses to detect test files
+  // testRegex: [],
+
+  // This option allows the use of a custom results processor
+  // testResultsProcessor: undefined,
+
+  // This option allows use of a custom test runner
+  // testRunner: "jest-circus/runner",
+
+  // A map from regular expressions to paths to transformers
+  // transform: undefined,
+
+  // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
+  // transformIgnorePatterns: [
+  //   "\\\\node_modules\\\\",
+  //   "\\.pnp\\.[^\\\\]+$"
+  // ],
+
+  // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
+  // unmockedModulePathPatterns: undefined,
+
+  // Indicates whether each individual test should be reported during the run
+  // verbose: undefined,
+
+  // An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
+  // watchPathIgnorePatterns: [],
+
+  // Whether to use watchman for file crawling
+  // watchman: true,
+};
+
+module.exports = createJestConfig(config)

frontend-next/next.config.mjs

@@ -1,4 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {output: 'export'};
 
 export default nextConfig;

frontend-next/package.json

@@ -5,18 +5,44 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
+    "start": "npx serve@latest out",
+    "lint": "next lint",
+    "test": "jest"
   },
   "dependencies": {
+    "@babel/core": "^7.24.4",
+    "@babel/preset-env": "^7.24.4",
+    "@babel/preset-react": "^7.24.1",
+    "@capacitor/android": "^5.7.4",
+    "@capacitor/core": "^5.7.4",
+    "@capacitor/geolocation": "^5.0.7",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@headlessui/react": "^1.7.18",
+    "@mui/icons-material": "^5.15.14",
+    "@mui/material": "^5.15.14",
+    "bad-words": "^3.0.4",
+    "firebase": "^10.6.0",
     "next": "^14.1.0",
+    "pigeon-maps": "^0.21.3",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-beforeunload": "^2.6.0",
+    "react-dom": "^18.2.0",
+    "react-firebase-hooks": "^5.1.1",
+    "react-hook-form": "^7.50.1",
+    "react-test-renderer": "^18.2.0",
+    "tts-react": "^3.0.6"
   },
   "devDependencies": {
+    "@capacitor/assets": "^3.0.5",
+    "@capacitor/cli": "^5.7.4",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^15.0.2",
     "autoprefixer": "^10.0.1",
     "eslint": "^8",
     "eslint-config-next": "14.1.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "postcss": "^8",
     "tailwindcss": "^3.3.0"
   }

frontend-next/public/deletion.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>User Data Deletion Request</title>
+</head>
+<body>
+    <h1>User Data Deletion Request</h1>
+    <p>
+        To request the deletion of your user data from our system, please follow the steps below:
+    </p>
+    <ol>
+        <li>Compose an email to <a href="mailto:deletion@chatma.ps">deletion@chatma.ps</a>.</li>
+        <li>In the email subject, write "User Data Deletion Request".</li>
+        <li>In the body of the email, provide the following information:</li>
+        <ul>
+            <li>Your username: [Insert your username here]</li>
+            <li>Your email address associated with the account: [Insert your email address here]</li>
+        </ul>
+        <li>Send the email.</li>
+    </ol>
+    <p>
+        Our team will process your request as soon as possible. Please note that the deletion of your user data may take some time, and we will notify you once it has been completed.
+    </p>
+    <p>
+        If you have any further questions or concerns, please don't hesitate to contact us at <a href="mailto:support@chatma.ps">support@chatma.ps</a>.
+    </p>
+</body>
+</html>

frontend-next/public/manifest.webmanifest

@@ -0,0 +1,47 @@
+{
+  "icons": [
+    {
+      "src": "../icons/icon-48.webp",
+      "type": "image/png",
+      "sizes": "48x48",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "../icons/icon-72.webp",
+      "type": "image/png",
+      "sizes": "72x72",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "../icons/icon-96.webp",
+      "type": "image/png",
+      "sizes": "96x96",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "../icons/icon-128.webp",
+      "type": "image/png",
+      "sizes": "128x128",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "../icons/icon-192.webp",
+      "type": "image/png",
+      "sizes": "192x192",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "../icons/icon-256.webp",
+      "type": "image/png",
+      "sizes": "256x256",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "../icons/icon-512.webp",
+      "type": "image/png",
+      "sizes": "512x512",
+      "purpose": "any maskable"
+    }
+  ],
+  "background_color": "#ffffff"
+}

frontend-next/public/next.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

frontend-next/public/privacy.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ChatMaps Privacy Policy</title>
+</head>
+<body>
+    <h1>ChatMaps Privacy Policy</h1>
+
+    <p>At ChatMaps, we are committed to protecting your privacy and ensuring the security of your personal information. This privacy policy explains how we collect, use, and safeguard your data when you use our application.</p>
+
+    <h2>Collection of Personal Information</h2>
+
+    <p>ChatMaps requires access to your location in order to provide you with location-based services. However, we do not share, sell, or disclose your personal data to any third party.</p>
+
+    <h2>Child Safety</h2>
+
+    <p>ChatMaps is fully compliant with online child safety laws. We do not knowingly collect personal information from children under the age of 13. If you believe that we have inadvertently collected personal information from a child, please contact us immediately so that we can take appropriate action.</p>
+
+    <h2>Data Security</h2>
+
+    <p>We take the security of your personal information seriously. We implement industry-standard security measures to protect your data from unauthorized access, alteration, or disclosure.</p>
+
+    <h2>Changes to this Privacy Policy</h2>
+
+    <p>We reserve the right to update or modify this privacy policy at any time. Any changes will be effective immediately upon posting the updated policy on our website.</p>
+
+    <h2>Contact Us</h2>
+
+    <p>If you have any questions or concerns about our privacy policy, please contact us at privacy@chatma.ps .</p>
+</body>
+</html>

frontend-next/public/vercel.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>

frontend-next/src/app/app/layout.js

@@ -0,0 +1,17 @@
+import { Inter } from "next/font/google";
+import "../globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata = {
+  title: "ChatMaps: Home",
+  description: "ChatMaps: Social Media for College Students",
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <main className={inter.className}>
+      {children}
+    </main>
+  );
+}

frontend-next/src/app/app/page.js

@@ -0,0 +1,118 @@
+"use client";
+// System Imports
+import { useState, useEffect } from "react";
+
+// Dependencies
+import Drawer from '@mui/material/Drawer';
+
+// Firebase Imports
+import { auth, database } from "../../../firebase-config";
+import { ref, onValue, set } from "firebase/database";
+import { useAuthState } from "react-firebase-hooks/auth"
+
+// Component Imports
+import { Header } from "../../components/app/header";
+import { HomePage } from "../../components/app/page/home";
+import { Sidebar } from "../../components/app/sidebar/home";
+import {useWindowSize} from "../../components/app/datatypes";
+
+// Capacitor Import
+import { Geolocation } from '@capacitor/geolocation';
+
+/**
+* Contains most everything for the app homepage
+* @returns {Object} Home Page
+*/
+function Home() {
+  // State variables for app page
+  const [user, setUser] = useState(null); // user data
+  const [loadingLoc, setLoadingLoc] = useState(true); // location variable loading, true = loading, false = finished loading
+  const [authUser, authLoading] = useAuthState(auth) // auth user object (used to obtain other user object)
+  const [drawerOpen, setDrawerOpen] = useState(true); // drawer open state
+  const [coords, setCoords] = useState(null)
+
+  var windowSize = useWindowSize()
+  useEffect(() => {
+    if (windowSize.width < 767) {
+      setDrawerOpen(false)
+    } else {
+      setDrawerOpen(true)
+    }
+  }, [windowSize])
+
+  // Authentication Verification / Redirection if Profile Data not Filled out
+  useEffect(() => {
+    if (authUser && authLoading === false) {
+        onValue(ref(database, `users/${authUser.uid}`), (userData) => {
+            userData = userData.val();
+            if (userData) {
+                setUser(userData);
+            } else {
+                window.location.href = "/onboarding";
+            }
+        });
+    } else if (authLoading === false) {
+        window.location.href = "/login";
+    }
+  }, [authLoading])
+
+  useEffect(() => {
+    Geolocation.getCurrentPosition().then((position) => {
+      setCoords(position.coords);
+      setLoadingLoc(false);
+    });
+  }, [])
+
+  // Saves users last loc to profile for friends map
+  useEffect(() => {
+    if (coords && user) {
+      set(ref(database,`users/${user.uid}/location`), {
+        latitude: coords.latitude,
+        longitude: coords.longitude
+      })
+    }
+  }, [coords, user])
+
+  return (
+    <div className="overflow-hidden h-dvh">
+      {user && (
+        <div className="overflow-hidden h-dvh">
+          {/* Left Side of Page */}
+          <div className="overflow-hidden h-dvh md:mr-[405px]">
+            {/* Header */}
+            <Header
+              mainTab={"home"}
+              user={user}
+              sidebarControl={() => {setDrawerOpen(!drawerOpen)}}
+            />
+            {/* Main Page Section */}
+            <div className="mr-2 h-[calc(100%-110px)]">
+              {!loadingLoc && (
+                <HomePage loc={coords} user={user} />
+              )}
+              {loadingLoc && (
+                <HomePage loc={null} user={user} />
+              )}
+            </div>
+          </div>
+          {/* Sidebar (Right Side of Page) */}
+          <Drawer open={drawerOpen} anchor={"right"} variant={windowSize.width > 767? "persistent": "temporary"} onClose={() => {setDrawerOpen(false)}} sx={{
+          width: windowSize.width > 767? 400: "80%",
+          marginTop: 10,
+          flexShrink: 0,
+          '& .MuiDrawer-paper': {
+            width: windowSize.width > 767? 400: "80%",
+            borderLeft: 0,
+          },
+          }}>
+            <div className="shadow-2xl">
+              <Sidebar user={user} location={coords} loadingLoc={loadingLoc}/>
+            </div>
+          </Drawer>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default Home;

frontend-next/src/app/chat/layout.js

@@ -0,0 +1,18 @@
+import { Inter } from "next/font/google";
+import "../globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata = {
+  title: "ChatMaps: Chat",
+  description: "ChatMaps: Social Media for College Students",
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <main className={inter.className}>
+      {children}
+    </main>
+  );
+}
+

frontend-next/src/app/chat/page.js

@@ -0,0 +1,144 @@
+"use client";
+// System Imports
+import Drawer from '@mui/material/Drawer';
+import { useState, useEffect } from "react";
+
+// Firebase Imports
+import { auth, database } from "../../../firebase-config";
+import { ref, onValue, set, onDisconnect} from "firebase/database";
+import { useAuthState } from "react-firebase-hooks/auth"
+
+// Component Imports
+import { Header } from "../../components/app/header";
+import { ChatRoom } from "../../components/app/page/chat";
+import { Sidebar } from "../../components/app/sidebar/chat";
+import {useWindowSize} from "../../components/app/datatypes";
+
+
+/**
+ * Chat Page
+ * @returns {Object} Chat Page
+ */
+function Chat() {
+  // State variables for chat page
+  const [user, setUser] = useState(null); // user data
+  const [chatRoomObj, setChatRoomObj] = useState(null); // Current chatroom object
+  const [doneLoading, setDoneLoading] = useState(false) // is the page done loading or not
+  const [authUser, authLoading] = useAuthState(auth) // auth user object (used to obtain other user object)
+  const [drawerOpen, setDrawerOpen] = useState(true); // drawer open state
+
+  var windowSize = useWindowSize()
+  useEffect(() => {
+    if (windowSize.width < 767) {
+      setDrawerOpen(false)
+    } else {
+      setDrawerOpen(true)
+    }
+  }, [windowSize])
+  
+  // Authentication Verification / Redirection if Profile Data not Filled out
+  useEffect(() => {
+    if (authUser && authLoading === false && !user) {
+        onValue(ref(database, `users/${authUser.uid}`),(userData) => {
+            userData = userData.val();
+            if (userData) {
+                setUser(userData);
+            } else {
+                window.location.href = "/onboarding";
+            }
+        });
+    } else if (authLoading === false) {
+        window.location.href = "/login";
+    }
+  }, [authLoading])
+
+  // Users URL params to load proper chatroom, then logs the user into that room
+  useEffect(() => {
+    if (user) {
+        const searchParams = new URLSearchParams(document.location.search);
+        var path = searchParams.get("room")
+
+        /*// Send entered message
+        var payload = {
+            body: "entered",
+            user: user.username,
+            isSystem: true,
+            timestamp: new Date().getTime(),
+            uid: user.uid,
+        };
+        set(
+            ref(
+            database,
+            `/rooms/${path}/chats/${new Date().getTime()}-${user.username}`
+            ),
+            payload
+        );*/
+
+        // Add user to online for room
+        set(ref(database, `/rooms/${path}/users/online/${user.uid}`), user)
+
+        // Removes user from room on disconnect (reload, window close, internet lost)
+        onDisconnect(ref(database, `/rooms/${path}/users/online/${user.uid}`)).remove()
+
+        // Sends leaving message on disconnect (Timestamp function used due to new onDisconnect stuff)
+        /*someRef = ref(database, `/rooms/${path}/chats/${new Date().getTime()}-${user.username}`)
+        onDisconnect(someRef).set({
+          body: "left",
+          user: user.username,
+          isSystem: true,
+          timestamp: serverTimestamp(),
+          uid: user.uid,
+        })*/
+
+        // Room Object Load
+        onValue(ref(database, `/rooms/${path}`), (roomData) => {
+            roomData = roomData.val();
+            setChatRoomObj(roomData)
+            if (!doneLoading) {
+                setDoneLoading(true)
+            }
+        })
+
+        
+    }
+  }, [user]);
+
+  return (
+    <div>
+      {(authUser && doneLoading) && (
+        <div className="overflow-hidden h-dvh">
+          {/* Left Side of Page */}
+          <div className="overflow-hidden h-dvh md:mr-[400px]">
+            {/* Header */}
+            <Header
+              mainTab={"chat"}
+              chatRoomObj={chatRoomObj}
+              user={user}
+              sidebarControl={() => {setDrawerOpen(!drawerOpen)}}
+            />
+            {/* Main Page Section */}
+            <div className="mr-2 h-[calc(100%-110px)]">
+                <ChatRoom roomObj={chatRoomObj} user={user} />
+            </div>
+          </div>
+          {/* Sidebar (Right Side of Page) */}
+            <Drawer open={drawerOpen} anchor={"right"} variant={windowSize.width > 767? "persistent": "temporary"} onClose={() => {setDrawerOpen(false)}} sx={{
+          width: windowSize.width > 767? 400: "80%",
+          marginTop: 10,
+          flexShrink: 0,
+          '& .MuiDrawer-paper': {
+            width: windowSize.width > 767? 400: "80%",
+            borderLeft: 0,
+          },
+          }}>
+            <div className="shadow-2xl">
+              <Sidebar chatRoomObj={chatRoomObj}/>
+            </div>
+          </Drawer>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default Chat;

frontend-next/src/app/dm/layout.js

@@ -0,0 +1,18 @@
+import { Inter } from "next/font/google";
+import "../globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata = {
+  title: "ChatMaps: DM",
+  description: "ChatMaps: Social Media for College Students",
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <main className={inter.className}>
+      {children}
+    </main>
+  );
+}
+

frontend-next/src/app/dm/page.js

@@ -0,0 +1,147 @@
+"use client";
+// System Imports
+import Drawer from '@mui/material/Drawer';
+import { useState, useEffect } from "react";
+
+// Firebase Imports
+import { auth, database } from "../../../firebase-config";
+import { ref, onValue, set, onDisconnect} from "firebase/database";
+import { useAuthState } from "react-firebase-hooks/auth"
+
+// Component Imports
+import { Header } from "../../components/app/header";
+import { DMRoom } from "../../components/app/friends/page";
+import { Sidebar } from "../../components/app/sidebar/dm";
+import {useWindowSize} from "../../components/app/datatypes";
+
+
+/**
+ * DM Page
+ * @returns {Object} Chat Page
+ */
+function Chat() {
+  // State variables for chat page
+  const [user, setUser] = useState(null); // user data
+  const [chatRoomObj, setChatRoomObj] = useState(null); // Current chatroom object
+  const [doneLoading, setDoneLoading] = useState(false) // is the page done loading or not
+  const [authUser, authLoading] = useAuthState(auth) // auth user object (used to obtain other user object)
+  const [drawerOpen, setDrawerOpen] = useState(true); // drawer open state
+  const [isUserAuthed, setIsUserAuthed] = useState(false); // is the user authenticated or not
+
+  var windowSize = useWindowSize()
+  useEffect(() => {
+    if (windowSize.width < 767) {
+      setDrawerOpen(false)
+    } else {
+      setDrawerOpen(true)
+    }
+  }, [windowSize])
+  
+  // Authentication Verification / Redirection if Profile Data not Filled out
+  useEffect(() => {
+    if (authUser && authLoading === false) {
+      onValue(ref(database, `users/${authUser.uid}`), (userData) => {
+          userData = userData.val();
+          if (userData) {
+              setUser(userData);
+          } else {
+              window.location.href = "/onboarding";
+          }
+      });
+    } else if (authLoading === false) {
+        window.location.href = "/login";
+    }
+  }, [authLoading])
+
+  // Users URL params to load proper chatroom, then logs the user into that room
+  useEffect(() => {
+    if (user) {
+        const searchParams = new URLSearchParams(document.location.search);
+        var path = searchParams.get("dm")
+        if (path.includes(user.uid)) {
+          setIsUserAuthed(true)
+        } else {
+          location.href = "/app"
+        }
+        /*// Send entered message
+        var payload = {
+            body: "entered",
+            user: user.username,
+            isSystem: true,
+            timestamp: new Date().getTime(),
+            uid: user.uid,
+        };
+        set(
+            ref(
+            database,
+            `/rooms/${path}/chats/${new Date().getTime()}-${user.username}`
+            ),
+            payload
+        );*/
+
+        // Add user to online for room
+        set(ref(database, `/dms/${path}/users/online/${user.uid}`), user)
+
+        // Removes user from room on disconnect (reload, window close, internet lost)
+        onDisconnect(ref(database, `/dms/${path}/users/online/${user.uid}`)).remove()
+
+        // Sends leaving message on disconnect (Timestamp function used due to new onDisconnect stuff)
+        /*someRef = ref(database, `/rooms/${path}/chats/${new Date().getTime()}-${user.username}`)
+        onDisconnect(someRef).set({
+          body: "left",
+          user: user.username,
+          isSystem: true,
+          timestamp: serverTimestamp(),
+          uid: user.uid,
+        })*/
+
+        // Room Object Load
+        onValue(ref(database, `/dms/${path}`), (roomData) => {
+          roomData = roomData.val();
+          setChatRoomObj(roomData)
+          if (!doneLoading) {
+              setDoneLoading(true)
+          }
+        })
+    }
+  }, [user]);
+
+  return (
+    <div>
+      {(authUser && doneLoading && isUserAuthed) && (
+        <div className="overflow-hidden h-dvh">
+          {/* Left Side of Page */}
+          <div className="overflow-hidden h-dvh md:mr-[400px]">
+            {/* Header */}
+            <Header
+              mainTab={"dm"}
+              chatRoomObj={chatRoomObj}
+              user={user}
+              sidebarControl={() => {setDrawerOpen(!drawerOpen)}}
+            />
+            {/* Main Page Section */}
+            <div className="mr-2 h-[calc(100%-110px)]">
+                <DMRoom roomObj={chatRoomObj} user={user} />
+            </div>
+          </div>
+          {/* Sidebar (Right Side of Page) */}
+            <Drawer open={drawerOpen} anchor={"right"} variant={windowSize.width > 767? "persistent": "temporary"} onClose={() => {setDrawerOpen(false)}} sx={{
+          width: windowSize.width > 767? 400: "80%",
+          marginTop: 10,
+          flexShrink: 0,
+          '& .MuiDrawer-paper': {
+            width: windowSize.width > 767? 400: "80%",
+            borderLeft: 0,
+          },
+          }}>
+            <div className="shadow-2xl">
+              <Sidebar chatRoomObj={chatRoomObj} user={user}/>
+            </div>
+          </Drawer>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default Chat;

frontend-next/src/app/globals.css

@@ -2,17 +2,19 @@
 @tailwind components;
 @tailwind utilities;
 
-main {
+body {
   background-color: aliceblue;
   text-align: center;
-  text-wrap:pretty;
+  text-wrap: pretty;
 }
 
 button {
-  background-color: rgb(205, 205, 205);
+  background: #dee0e0;
   border-color: black;
   border: 5px;
   border-radius: 5px;
+  padding: 5px;
+  margin: 5px;
 }
 
 button:hover {
@@ -23,5 +25,12 @@ input {
   border: 1px solid black;
   border-radius: 4px;
   padding: 10px 10px;
+  margin: 5px;
 }
 
+input.err {
+  border: 2px solid red;
+  border-radius: 4px;
+  padding: 10px 10px;
+  margin: 5px;
+}

frontend-next/src/app/login/layout.js

@@ -0,0 +1,17 @@
+import { Inter } from "next/font/google";
+import "../globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata = {
+  title: "ChatMaps: Login",
+  description: "ChatMaps: Social Media for College Students",
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <main className={inter.className}>
+      {children}
+    </main>
+  );
+}

frontend-next/src/app/login/page.js

@@ -0,0 +1,135 @@
+"use client";
+// System Imports
+import "../globals.css";
+import { useForm, Form } from "react-hook-form";
+import Link from "next/link"
+import { useRouter } from "next/navigation";
+
+// Firebase Imports
+import { auth } from "../../../firebase-config";
+import {setPersistence,signInWithEmailAndPassword,indexedDBLocalPersistence } from "firebase/auth";
+
+/**
+ * Login Page
+ * @returns {Object} Login Page 
+*/
+function Login() {
+  var router = useRouter();
+  var {register,control,setError,reset,formState: { errors, isSubmitting, isSubmitted },} = useForm();
+
+  /**
+   * Logs into Firebase authentication
+   * @param {JSON} data - User Login Data (data.email, data.password) 
+   * @returns {void}
+   */
+  function authenticate({data}) {
+    setPersistence(auth, indexedDBLocalPersistence).then(() => {
+      signInWithEmailAndPassword(auth, data.email, data.password).then(
+        (userCredential) => {
+          if (userCredential.user) {
+            router.push("/app");
+          }
+        }
+      ).catch((error) => {
+        if (error == "auth/invalid-credential") {
+          const formError = {
+            type: "server",
+            message: "Username or Password Incorrect",
+          };
+          // set same error in both:
+          setError("password", formError);
+          setError("email", formError);
+          reset(data,{keepErrors: true})
+        } else {
+          const formError = {
+            type: "server",
+            message: "Server Error, Please try again later.",
+          };
+          // set same error in both:
+          setError("password", formError);
+          setError("email", formError);
+          reset(data,{keepErrors: true})
+        }
+        // ..
+      });
+    });
+  }
+
+  return (
+    <div>
+      <div className="grid h-screen place-items-center">
+        <div>
+          <Link href="/">
+            <img src="logos/logo_transparent_inverse.png" />
+          </Link>
+          <span className="text-[36px]">Chat with friends!</span>
+          <div>
+            <h3 className="text-[24px] mt-[25px] mb-2">Login</h3>
+            {errors.email && errors.password && (
+              <div className="text-[red] mb-2 text-[18px] text-bold">
+                Invalid Email or Password.
+              </div>
+            )}
+            <Form
+              onSubmit={authenticate}
+              encType={"application/json"}
+              control={control}
+            >
+              <input
+                type="email"
+                id="email"
+                className={errors.email && errors.password && "err"}
+                {...register("email", { required: true })}
+                placeholder="Enter Email Address"
+              />
+              <br />
+              <input
+                type="password"
+                id="password"
+                name="password"
+                className={errors.email && errors.password && "err"}
+                {...register("password", { required: true })}
+                placeholder="Enter Password"
+              />
+              <br />
+              <button
+                type="submit"
+                className="inline-flex items-center transition ease-in-out duration-150 m-5 bg-cyan-500 text-white font-bold py-2 px-4 rounded-full"
+              >
+                {(isSubmitting || isSubmitted) && (
+                  <span className="inline-block">
+                    <svg
+                      className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                    >
+                      <circle
+                        className="opacity-25"
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        strokeWidth="4"
+                      ></circle>
+                      <path
+                        className="opacity-75"
+                        fill="currentColor"
+                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                      ></path>
+                    </svg>
+                  </span>
+                )}
+                Log In
+              </button>
+              <br />
+              Need an account? <Link href="/register">Sign Up</Link>
+              <br />
+            </Form>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Login;

frontend-next/src/app/onboarding/layout.js

@@ -0,0 +1,18 @@
+import { Inter } from "next/font/google";
+import "../globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata = {
+  title: "ChatMaps: Onboarding",
+  description: "ChatMaps: Social Media for College Students",
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <main className={inter.className}>
+      {children}
+    </main>
+  );
+}
+

frontend-next/src/app/onboarding/page.js

@@ -0,0 +1,85 @@
+"use client";
+// System Imports
+import "../globals.css";
+import { useForm } from "react-hook-form";
+import { useRouter } from "next/navigation";
+
+// Firebase Imports
+import { ref, set } from "firebase/database";
+import { auth, database, storage } from "../../../firebase-config";
+import { onAuthStateChanged } from "firebase/auth";
+import { ref as sRef, getDownloadURL } from "firebase/storage";
+
+/**
+ * Onboarding Page
+ * @returns {Object} - Onboarding Page
+ */
+function Onboarding() {
+  var router = useRouter();
+  var { register, handleSubmit } = useForm();
+
+  function Onboard(data) {
+    onAuthStateChanged(auth, (user) => {
+      if (user.uid) {
+        data.uid = user.uid;
+        data.defined = true;
+        data.invisibleStatus = false;
+        data.bio = " ";
+        data.interests = " , , "
+        getDownloadURL(sRef(storage, `/default.png`)).then((url) => {
+          data.pfp = url;
+          data.email = user.email;
+          set(ref(database, `users/${user.uid}`), data);
+          router.push("/app");
+        })
+
+      } else {
+        return false;
+      }
+    });
+  }
+  return (
+    <div>
+      <div className="grid h-screen place-items-center">
+        <div>
+          <img src="logos/logo_transparent_inverse.png" />
+          <span className="text-[36px]">Chat with friends!</span>
+          <div className="m-5">
+            Welcome to ChatMaps! We are excited to have you join our community!
+            <br />
+            First we just need a little bit of information from you to get
+            started.
+          </div>
+          <form action="#" onSubmit={handleSubmit(Onboard)}>
+            <input
+              type="text"
+              {...register("username")}
+              placeholder="Display Name"
+            />
+            <br />
+            <input
+              type="text"
+              {...register("firstName")}
+              placeholder="First Name"
+            />
+            <br />
+            <input
+              type="text"
+              {...register("lastName")}
+              placeholder="Last Name"
+            />
+            <br />
+            <button
+              type="submit"
+              className="inline-flex items-center transition ease-in-out duration-150 m-5 bg-cyan-500 text-white font-bold py-2 px-4 rounded-full"
+            >
+              Save
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Onboarding;

frontend-next/src/app/page.js

@@ -1,27 +1,111 @@
-export default function Home() {
+"use client";
+import { useState, useEffect } from "react";
+import Link from "next/link"
+import { auth, database } from "../../firebase-config";
+import { ref, get } from "firebase/database";
+import { onAuthStateChanged } from "firebase/auth";
+
+// Capacitor Import
+import { Geolocation } from '@capacitor/geolocation';
+
+/**
+ * Home Page
+ * @returns {Object} - Home Page
+ */
+function Home() {
+  const [isLoadingLoc, setLoadingLoc] = useState(true); // is location loading?
+  const [roomCount, setRoomCount] = useState(null); // local room count
+  const [isAuthenticated, setAuth] = useState(false); // is user authenticated?
+  const [coords, setCoords] = useState(null)
+
+  // Authentication
+  useEffect(() => {
+    onAuthStateChanged(auth, async (user) => {
+      if (user) {
+        setAuth(true);
+      } else {
+        setAuth(false);
+      }
+    });
+  }, []);
+
+  useEffect(() => {
+    Geolocation.getCurrentPosition().then((position) => {
+      setCoords(position.coords);
+      setLoadingLoc(false);
+    });
+  }, [])
+
+  // Update room count on location fix
+  useEffect(() => {
+    if (coords) {
+      var path =
+            String(coords.latitude.toFixed(2)).replace(".", "") +
+            "/" +
+            String(coords.longitude.toFixed(2)).replace(".", "");
+      get(ref(database, `/rooms/${path}`)).then((snapshot) => {
+        if (snapshot.exists()) {
+          var count = 0;
+          snapshot.forEach(() => {
+            count++;
+          });
+          setRoomCount(count);
+        } else {
+          setRoomCount(0);
+        }
+        setLoadingLoc(false);
+      });
+    }
+  }, [coords])
+
   return (
-    <main className="flex min-h-screen flex-col justify-between p-24">
-      <h1>Welcome to ChatMaps.</h1>
-
-
-      <div id="room">
-        <label>Room </label>
-        <select>
-          <option>Room 1</option>
-          <option>Room 2</option>
-          <option>Room 3</option>
-        </select>
-        <button>Join Room</button>
+    <div>
+      <div className="grid h-screen place-items-center">
+        <div>
+          <img src="logos/logo_transparent_inverse.png" />
+          <span className="text-[36px]">Chat with friends!</span>
+          <div className="m-5">
+            {!isAuthenticated && (
+              <div>
+                <Link href="/login">
+                  <button className="bg-cyan-500 text-white font-bold py-2 px-4 rounded-full">
+                    Login
+                  </button>
+                </Link>
+                <Link href="/register">
+                  <button className="bg-cyan-500 text-white font-bold py-2 px-4 rounded-full">
+                    Register
+                  </button>
+                </Link>
+              </div>
+            )}
+            {isAuthenticated && (
+              <Link href="/app">
+              <button className="bg-cyan-500 text-white font-bold py-2 px-4 rounded-full">
+                Continue to App
+              </button>
+            </Link>
+            )}
+            {!isLoadingLoc && roomCount == 1 && (
+              <div className="text-[24px] pt-10">
+                Join others in {roomCount} room near you!
+              </div>
+            )}
+            {!isLoadingLoc && roomCount != 1 && roomCount != 0 && (
+              <div className="text-[24px] pt-10">
+                Join others in {roomCount} rooms near you!
+              </div>
+            )}
+            {(isLoadingLoc || (roomCount == 0 && !isLoadingLoc)) && (
+              <div className="text-[24px] pt-10">
+                Start the conversation today!
+              </div>
+            )}
+          </div>
+        </div>
       </div>
-
-
-      <div id="message">
-        <label>Enter a message</label>
-        <input />
-        <button>Send</button>
-      </div>
-
-
-    </main>
+    </div>
   );
 }
+
+export default Home;

frontend-next/src/app/register/layout.js

@@ -0,0 +1,17 @@
+import { Inter } from "next/font/google";
+import "../globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata = {
+  title: "ChatMaps: Register",
+  description: "ChatMaps: Social Media for College Students",
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <main className={inter.className}>
+      {children}
+    </main>
+  );
+}

frontend-next/src/app/register/page.js

@@ -0,0 +1,147 @@
+"use client";
+// System Imports
+import "../globals.css";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useForm, Form } from "react-hook-form";
+import Link from "next/link"
+
+// Firebase Imports
+import {createUserWithEmailAndPassword,signInWithEmailAndPassword,setPersistence,indexedDBLocalPersistence,} from "firebase/auth";
+import { auth } from "../../../firebase-config";
+
+/**
+ * Signs up user in Firebase Authentication
+ * @param {JSON} data - User signup data (data.email, data.password)
+ * @returns {Boolean} - True if user is signed up, False if user is not signed up
+ * @async
+ */
+async function Signup(data) {
+  var userCredential = await createUserWithEmailAndPassword(
+    auth,
+    data.email,
+    data.password
+  );
+  if (userCredential.user) {
+    setPersistence(auth, indexedDBLocalPersistence).then(() => {
+      signInWithEmailAndPassword(auth, data.email, data.password).then(
+        () => {
+          return true;
+        }
+      );
+    });
+  } else {
+    return false;
+  }
+}
+/**
+ * Register Page
+ * @returns {Object} - Registration Page
+ */
+function Register() {
+  var router = useRouter();
+  var {
+    register,
+    control,
+    formState: { errors },
+  } = useForm();
+  var emailRegex =
+    /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/;
+  var [passwordMismatch, setPasswordMismatch] = useState(false);
+  var [passwordLength, setPasswordLength] = useState(false);
+  const passwordMatch = (data) => {
+    return data.password === data.passwordCheck;
+  };
+
+  const passwordLengthMatch = (data) => {
+    return data.password.length >= 6;
+  }
+
+  /**
+   * Form onSubmit Handler
+   * @params {JSON} data - Form data
+   */
+  function onSubmit({ data }) {
+    if (passwordMatch(data) && passwordLengthMatch(data)) {
+      setPasswordMismatch(false);
+      setPasswordLength(false)
+      if (Signup(data)) {
+        router.push("/onboarding");
+      }
+    } else {
+      if (!passwordMatch(data)) {
+        setPasswordMismatch(true);
+      }
+      if (!passwordLengthMatch(data)) {
+        setPasswordLength(true);
+      }
+      return;
+    }
+  }
+
+  return (
+    <div>
+      <div className="grid h-screen place-items-center">
+        <div>
+          <Link href="/">
+            <img src="logos/logo_transparent_inverse.png" />
+          </Link>
+          <span className="text-[36px]">Chat with friends!</span>
+          <div>
+            <h3 className="text-[24px] mt-[15px]">Register</h3>
+            <Form
+              onSubmit={onSubmit}
+              encType={"application/json"}
+              control={control}
+            >
+              <input
+                type="email"
+                {...register("email", { required: true, pattern: emailRegex })}
+                className={errors.email && "err"}
+                placeholder="Enter Email Address"
+              />
+              <br />
+              <input
+                type="password"
+                {...register("password", { required: true })}
+                className={
+                  errors.password && errors.password.type == "required" && "err"
+                }
+                placeholder="Enter Password"
+              />
+              <br />
+              <input
+                type="password"
+                {...register("passwordCheck", { required: false })}
+                className={
+                  errors.passwordCheck &&
+                  errors.passwordCheck.type == "required" &&
+                  "err"
+                }
+                placeholder="Re-enter Password"
+              />
+              <br />
+              {passwordMismatch && (
+                <p className="text-red-500">Passwords do not match</p>
+              )}
+              {passwordLength && (
+                <p className="text-red-500">Password must be at least 6 characters</p>
+              )}
+              <button
+                type="submit"
+                className=" m-5 bg-cyan-500 text-white font-bold py-2 px-4 rounded-full"
+              >
+                {" "}
+                Register
+              </button>
+              <br />
+              Have an account? <Link href="/login">Login</Link>
+            </Form>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Register;

frontend-next/src/app/user/layout.js

@@ -0,0 +1,17 @@
+import { Inter } from "next/font/google";
+import "../globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata = {
+  title: "ChatMaps: User Profile",
+  description: "ChatMaps: Social Media for College Students",
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <main className={inter.className}>
+      {children}
+    </main>
+  );
+}

frontend-next/src/app/user/page.js

@@ -0,0 +1,182 @@
+"use client";
+// System Imports
+import { useState, useEffect } from "react";
+import { auth, database } from "../../../firebase-config";
+import { ref, onValue } from "firebase/database";
+import { useAuthState } from "react-firebase-hooks/auth"
+
+
+// Refactored Component Imports
+
+// Data Structure Imports
+import { ProfileRoom } from "../../components/app/profile/ProfileRoom";
+import { ProfileEdit } from "../../components/app/profile/ProfileEdit";
+import { Interest } from "../../components/app/profile/Interest";
+
+// Header Import
+import { Header } from "../../components/app/header";
+
+// Friend Import
+import { addFriend } from "../../components/app/friends/friends";
+
+// Icons
+import CircleIcon from '@mui/icons-material/Circle';
+
+/**
+ * User Profile Page
+ * @returns {Object} - User Profile Page
+ */
+function UserProfile() {
+  const [profileData, setProfileData] = useState(null); // Profile Data
+  const [isAuthenticated, setIsAuthenticated] = useState(false); // Determines if user is authenticated
+  const [user, setUser] = useState(null); // User Data
+  const [userInterestArray, setUserInterestArray] = useState(null); // Array of user's interests
+  const [userRoomsArray, setUserRoomsArray] = useState(null); // Array of user's rooms
+  const [isOwner, setIsOwner] = useState(false); // Determines if user is owner of profile
+  const [friends, setFriends] = useState(false); // is user a friend?
+  const [isPending, setPending] = useState(false); // is friend request pending?
+  const [authUser, authLoading] = useAuthState(auth) // auth user object (used to obtain other user object)
+
+
+  // Handles Edit State in Component, shares useState with ProfileEdit
+  const [isEditing, setIsEditing] = useState(false);
+  const handleIsEditing = (newValue) => {
+    setIsEditing(newValue);
+  };
+
+  // Authentication
+  useEffect(() => {
+    if (authUser && authLoading === false) {
+      const searchParams = new URLSearchParams(document.location.search);
+      var userUID = searchParams.get("uid")
+      onValue(ref(database, `users/${authUser.uid}`), (userData) => {
+          userData = userData.val();
+          if (userData) {
+            if (userData.uid == userUID) {
+              setIsOwner(true);
+            }
+            setIsAuthenticated(true);
+            setUser(userData);
+          } else {
+              window.location.href = "/onboarding";
+          }
+      });
+    } else if (authLoading === false) {
+        window.location.href = "/login";
+    }
+  }, [authLoading]);
+
+  // Grabs profile user data
+  useEffect(() => {
+    const searchParams = new URLSearchParams(document.location.search);
+    var userUID = searchParams.get("uid")
+    onValue(ref(database, "/users/" + userUID), (snapshot) => {
+      setProfileData(snapshot.val());
+
+      // Populates array with user's interests
+      var interests = snapshot.val().interests || null;
+      if (interests == null) {
+        // Placeholder for no interests specified, will be replaced with default interests
+        interests = "Music, Sports, Movies";
+      }
+      interests = interests.split(",");
+      var interestArray = [];
+      var i = 0;
+      for (var interest in interests) {
+        if (i < 4)
+          interestArray.push(<Interest interest={interests[interest]} key={interest}/>);
+        i++;
+      }
+      setUserInterestArray(interestArray);
+
+      // Populates array with user's rooms
+      var rooms = snapshot.val().rooms;
+      var roomArray = [];
+      for (var room in rooms) {
+        roomArray.push(<ProfileRoom room={rooms[room]} key={room}/>);
+      }
+      setUserRoomsArray(roomArray);
+    });
+  }, []);
+
+  useEffect(() => {
+    if (user && profileData) {
+      if ("friends" in user) {
+        profileData.uid in user.friends.friends ? setFriends(true) : setFriends(false);
+      }
+      if ("friends" in profileData) {
+        if ("requests" in profileData.friends)  {
+          user.uid in profileData.friends.requests ? setPending(true) : setPending(false);
+        }
+      }
+    }
+  }, [user, profileData]);
+
+  return (
+    <div>
+      {(isAuthenticated && profileData) && (
+        <div className="md:overflow-hidden">
+          {/* Left Side of Page */}
+          <div className="h-dvh md:overflow-hidden">
+            {/* Header */}
+            <Header user={user} mainTab={"profile"} />
+            {/* Main Page Section */}
+            <div className="md:grid md:grid-cols-3 mr-2 h-[calc(100%-110px)] pl-5 pr-5 pt-2 max-md:mb-10">
+              <div className="cols-span-1 bg-white shadow-2xl rounded-xl pt-5 max-md:pb-5">
+                {!isEditing && (
+                  <div>
+                    <img
+                      src={profileData.pfp}
+                      className="relative mx-auto rounded-2xl overflow-hidden max-h-[20%] max-w-[70%]"
+                    />
+                    <div className="font-bold text-[30px] flex justify-center items-center">
+                      {profileData.lastOnline == true && <CircleIcon className="text-lime-600 mr-3"/>}{profileData.firstName} {profileData.lastName}
+                    </div>
+                    <div className="text-[20px]">@{profileData.username}</div>
+                    <div className="pt-5">{profileData.bio}</div>
+                    <div className="grid grid-cols-3 p-3">
+                      {userInterestArray}
+                    </div>
+                    <div className="grid grid-cols-1 auto-cols-min justify-items-center">
+                      {isOwner && (
+                        <a
+                          onClick={() => {
+                            setIsEditing(true);
+                          }}
+                          className="w-[120px] p-2 cursor-pointer bg-cyan-500 text-white font-bold rounded-full text-center"
+                        >
+                          Edit Profile
+                        </a>
+                      )}
+                      {(!isOwner && !friends) && (
+                        <div>
+                          {(!isPending ) && (<a onClick={() => {addFriend(user, profileData.uid);setPending(true)}} className="w-[120px] p-2 cursor-pointer bg-cyan-500 text-white font-bold rounded-full text-center">Add Friend</a>)}
+                          {(isPending ) && (<a className="w-[120px] p-2 bg-cyan-500 text-white font-bold rounded-full text-center">Pending</a>)}  
+                        </div>
+                      )}
+                      {(!isOwner && friends ) && (<div className="font-bold text-[20px]">Friends</div>)}
+                    </div>
+                  </div>
+                )}
+                {isEditing && (
+                  <ProfileEdit
+                    profileData={profileData}
+                    user={user}
+                    onSave={handleIsEditing}
+                  />
+                )}
+              </div>
+              <div className="col-span-2">
+                <div className="h-dvh pb-20 overflow-auto grid md:grid-cols-3 max-md:grid-cols-1 max-md:mt-5 md:pl-5 justify-items-center gap-y-5 gap-1 w-[100%]">
+                  {userRoomsArray}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default UserProfile;

frontend-next/src/components/app/datatypes.js

@@ -0,0 +1,305 @@
+import Link from "next/link"
+import { useEffect, useState } from "react";
+const Filter = require('bad-words')
+const filter = new Filter();
+
+import {database} from "../../../firebase-config"
+import {remove, ref} from "firebase/database"
+
+// Icons
+import PersonIcon from '@mui/icons-material/Person';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import CircleIcon from '@mui/icons-material/Circle';
+
+import { TextToSpeech } from 'tts-react'
+
+// Chat Commands Dictionary
+const chatCommands = {
+  "/peter": "https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExcThtYjMxcWk2NG55YTE3OHdvNWJwcXVrZzV1ZmZkdWJ6cHBremFwdiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/13w5HmyiuaZ224/giphy.gif",
+  "/shrug": "¯\\_(ツ)_/¯",
+  "/tableflip": "(╯°□°）╯︵ ┻━┻",
+  "/unflip": "┬─┬ ノ( ゜-゜ノ)",
+  "/snoop": "https://media1.tenor.com/m/cIUjlvgnFRgAAAAd/dog-snoop.gif"
+}
+
+// Colors for Messages
+const userColors = [
+  "#ff80ed",
+  "#065535",
+  "#133337",
+  "#ffc0cb",
+  "#e6e6fa",
+  "#ffd700",
+  "#ffa500",
+  "#0000ff",
+  "#1b85b8",
+  "#5a5255",
+  "#559e83",
+  "#ae5a41",
+  "#c3cb71",
+];
+
+let dateOptions = {
+  weekday: "long",
+  year: "numeric",
+  month: "short",
+  day: "numeric",
+  hour: "2-digit",
+  minute: "2-digit",
+};
+
+/**
+ * Photo URL Test
+ * @param {String} url - URL to Test
+ * @returns {Boolean} - Image Loaded (True) or Not (False)
+ */
+function imageProcessing(url) {
+  var x = new Promise((resolve) => {
+    var img = new Image();
+    img.src = url;
+    img.onload = () => {
+      resolve([true, url]);
+    }
+    img.onerror = () => {
+      resolve([false, url]);
+    }
+  })
+  return x
+}
+
+
+/**
+ * Rich Message Formatting
+ * @param {String} message - Message to Format
+ * @returns {String} - Formatted Message (IN HTML)
+ */
+export async function RMF(message) {
+  var x = new Promise(async (resolve) => {
+    var URLREGEX = /[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/g;
+    var URLmatch = message.match(URLREGEX);
+    var newMessage = URLmatch ? [] : message
+    if (URLmatch) {
+      for (var i = 0; i < URLmatch.length; i++) {
+        if (URLmatch[i].includes("chatma.ps") ) {
+          // Rich Message Formatting for Chat Maps
+          if (URLmatch[i].includes("/chat?")) {
+            var roomName = URLmatch[i].split("?")[1].split("/")[2].split("-")[0].replaceAll("%20"," ")
+            newMessage.push((<span className="italic" key={roomName}>invites you to <Link href={"https://"+URLmatch[i]} className="underline" target="_blank">{roomName}</Link></span>))
+          }
+        } else {
+          await imageProcessing("https://"+URLmatch[i]).then((result) => {
+            if (result[0]) {
+              newMessage.push((<span className="mr-2" key={URLmatch[i]}>
+                {(URLmatch.length == 1) && message.split(result[1])[0].replace("https://","").replace("http://","")}
+                <img src={result[1]} className="max-w-[100%]"/>
+                {(i == URLmatch.length || URLmatch.length == 1) && message.split(result[1])[1]}
+              </span>))
+            } else {
+              newMessage.push((<span className="mr-2" key={URLmatch[i]}>
+              {URLmatch.length == 1 && message.split(URLmatch[i])[0]}
+              <Link href={result[1]} target="_blank" className="hover:underline">{URLmatch[i]}</Link>
+              {(i == URLmatch.length || URLmatch.length == 1) && message.split(URLmatch[i])[1]}
+            </span>))
+            }
+          })
+        }
+      }
+    }
+    resolve(newMessage)
+    
+  });
+  return x
+}
+/**
+ * Grabs Window Size
+ * @returns {Object} - Window Size Object (width, height)
+ */
+export function useWindowSize() {
+  const [windowSize, setWindowSize] = useState({
+    width: undefined,
+    height: undefined,
+  });
+
+  useEffect(() => {
+    function handleResize() {
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    }
+    window.addEventListener("resize", handleResize);
+    handleResize();
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  return windowSize;
+}
+
+/**
+ * Generates Color based on string hash
+ * @param {String} user_str - Username / String for hashing
+ * @returns {String} - Color Hex Code Index in userColors
+ */
+const generateColor = (user_str) => {
+  // hashes username for consistent colors, maybe all functionality to pick color later
+  let hash = 0;
+  for (let i = 0; i < user_str.length; i++) {
+    hash = user_str.charCodeAt(i) + (hash * 32 - hash);
+  }
+  const index = Math.abs(hash) % userColors.length;
+  return index;
+};
+
+
+/**
+ * Chat Message Object
+ * @props {JSON} chatObj - Chat Object
+ * @returns {Object} - Chat Message Component
+ */
+export function Chat({ chatObj, user, path }) {
+  const [message, setMessage] = useState([])
+  function deleteMessage() {
+    remove(ref(database, `${path}/chats/${chatObj.timestamp}-${chatObj.user}`))
+  }
+  
+  if (chatObj.body in chatCommands) {
+    chatObj.body = chatCommands[chatObj.body]
+  }
+
+  useEffect(() => {
+    // Peter Griffin Easter Egg and others
+    var messageFilterBypass = [undefined, null, '', ' ', '\'', '\"']
+    if (!messageFilterBypass.includes(chatObj.body) && (chatObj.body.length != 1 && !chatObj.body[0].match(/\W/))) {
+      var settingMessage = filter.clean(chatObj.body)
+      RMF(settingMessage).then((result) => {
+        setMessage(result)
+      })
+    } else {
+      setMessage(chatObj.body)
+    }
+  }, [])
+
+  return (
+    <div>
+      {message && (
+        <div className="width-[100%] bg-white rounded-lg mt-1 text-left p-1 grid grid-cols-2 mr-2">
+          <div>
+            {user.uid == chatObj.uid && <DeleteOutlineIcon fontSize="" className="ml-1 mr-1 cursor-pointer" onClick={() => {deleteMessage()}}/>}
+            <span className="mr-[5px]" style={{ color: userColors[generateColor(chatObj.user)] }}>
+              <Link href={`/user?uid=${chatObj.uid}`}
+              className="hover:font-bold cursor-pointer">
+                {chatObj.user}
+              </Link>
+            </span>
+            {(typeof message == 'string' && message.substring(0,4) == "/tts")? (<TextToSpeech autoPlay={true}> {chatObj.user + " said " + filter.clean(message.substring(5,message.length))} </TextToSpeech>): message}
+          </div>
+          <div className="text-right text-[#d1d1d1]">
+            {new Date(chatObj.timestamp).toLocaleString(dateOptions)}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+
+/**
+ * System Chat Message Object
+ * @prop {JSON} chatObj - Chat Object
+ * @returns {Object} - System Chat Message Component
+ */
+export function SystemMessage({ chatObj }) {
+  return (
+    <div className="width-[100%] bg-white rounded-lg mt-1 text-left p-1 grid grid-cols-2 mr-2">
+      <div className="text-[#d1d1d1]">
+        <span style={{ color: userColors[generateColor(chatObj.user)] }}>
+          <Link href={`/user?uid=${chatObj.uid}`}
+          className="hover:font-bold cursor-pointer">
+            {chatObj.user}
+          </Link>
+        </span>{" "}
+        has {chatObj.body} the room.
+      </div>
+      <div className="text-right text-[#d1d1d1]">
+        {new Date(chatObj.timestamp).toLocaleString(dateOptions)}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Member Object for Sidebar
+ * @prop {JSON} memberObj - Member Object
+ * @returns {Object} - Member Component
+ */
+export function Member({ memberObj }) {
+  return (
+    <Link href={"/user?uid=" + memberObj.uid}>
+      <div className="cursor-pointer g-[aliceblue] rounded-lg m-3 shadow-xl p-2">
+      {memberObj.lastOnline == true && <CircleIcon className="text-lime-600 mr-1 relative top-[-1px]" fontSize="20px"/>}{memberObj.username}
+      </div>
+    </Link>
+  );
+}
+
+/**
+ * Chat Room Object for Sidebar
+ * @prop {JSON} roomObj - Room Object
+ * @returns {Object} - Chat Room Component
+ */
+export function ChatRoomSidebar({ roomObj }) {
+  const [isRoomHovered, setIsRoomHovered] = useState(false);
+
+  if ("users" in roomObj) {
+    if ("online" in roomObj.users) {
+      var roomOnline = Object.keys(roomObj.users.online).length
+    } else {
+      var roomOnline = 0
+    }
+    if ("all" in roomObj.users) {
+      var roomTotal = Object.keys(roomObj.users.all).length
+    } else {
+      var roomTotal = 0
+    }
+  } else {
+    var roomOnline = 0
+    var roomTotal = 0
+  }
+  const handleMouseEnter = () => {
+    setIsRoomHovered(true);
+  };
+
+  const handleMouseLeave = () => {
+    setIsRoomHovered(false);
+  };
+
+  return (
+    <div className="border-[black] border-1 shadow-lg p-2 m-2 rounded-lg cursor-pointer">
+      <Link href={`/chat?room=${roomObj.path}/${roomObj.name}-${roomObj.timestamp}`}>
+        <div className="grid grid-cols-3">
+          <div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
+            <PersonIcon/>
+            {isRoomHovered && roomObj.users && (
+              <div 
+                className="fixed bg-white p-2 shadow-md"
+              >
+                <ul>
+                  {Object.values(roomObj.users.all).map((user, index) => ( // I hate making lists like this
+                    <li key={index}>{user.username}</li>
+                  ))}
+                </ul>
+              </div>
+            )}
+            <div>{roomOnline} / {roomTotal}</div>
+          </div>
+          <div className="col-span-2">
+            <div className="font-bold">{roomObj.name}</div>
+            <div className="italic">{roomObj.description}</div>
+          </div>
+        </div>
+      </Link>
+    </div>
+  );
+}
+
+// This will be removed once dateOptions is no longer used in this file
+export { dateOptions };

frontend-next/src/components/app/friends/dm.js

@@ -0,0 +1,59 @@
+// Firebase Imports
+import { database } from "../../../../firebase-config"
+import { ref, set, get } from "firebase/database";
+
+import ChatIcon from '@mui/icons-material/Chat';
+import CircleIcon from '@mui/icons-material/Circle';
+
+export function openDM(user, uid) {
+    var uid1 = user.uid < uid? user.uid : uid
+    var uid2 = user.uid > uid? user.uid : uid
+    get(ref(database, `dms/${uid1}-${uid2}`)).then((snapshot) => {
+        if (snapshot.exists()) {
+            window.location.href = `/dm?dm=${uid1}-${uid2}`
+        } else {
+            createDM(user, uid)
+            window.location.href = `/dm?dm=${uid1}-${uid2}`
+        }
+    });
+}
+
+
+export function createDM(user, uid) {
+    var uid1 = user.uid < uid? user.uid : uid
+    var uid2 = user.uid > uid? user.uid : uid
+    set(ref(database, `dms/${uid1}-${uid2}`), {
+        initUID: user.uid,
+        targetUID: uid,
+        room: uid1 + '-' + uid2,
+        UIDs: [user.uid, uid]
+    })
+}
+
+/**
+ * 
+ * @param {JSON} friendObj - Friend Object (user) 
+ * @returns DM Component
+ */
+export function DM({user,friendObj}) {
+    return (
+        <div className="border-[black] border-1 shadow-lg m-2 rounded-lg">
+                <div className='grid grid-cols-4'>
+                    <div className='place-content-center'>
+                        <ChatIcon className='cursor-pointer' onClick={() => {openDM(user,friendObj.uid)}}/>
+                    </div>
+                    <div className='col-span-3 cursor-pointer'>
+                        <div onClick={() => {openDM(user,friendObj.uid)}}>
+                            <div className='grid grid-cols-2 justify-items-center'>
+                                <div className='mr-8'><img src={friendObj.pfp} className= 'w-[50px] h-[50px]'/></div>
+                                <div className=''>
+                                    <div className="font-bold">{friendObj.lastOnline == true && <CircleIcon className="text-lime-600 mr-1 relative top-[-2px]" fontSize="20px"/>}{friendObj.firstName} {friendObj.lastName}</div>
+                                    <div className="">@{friendObj.username}</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+      </div>
+    )
+}

frontend-next/src/components/app/friends/friends.js

@@ -0,0 +1,107 @@
+import Link from 'next/link'
+
+// Icons
+import ChatIcon from '@mui/icons-material/Chat';
+
+// Firebase Imports
+import { database } from "../../../../firebase-config"
+import { ref, set } from "firebase/database";
+
+import { openDM } from './dm';
+
+// Icons
+import CheckIcon from '@mui/icons-material/Check';
+import CloseIcon from '@mui/icons-material/Close';
+import CircleIcon from '@mui/icons-material/Circle';
+
+/**
+ * Send a friend request to a user
+ * @param {JSON} user - User Object 
+ * @param {JSON} uid - User ID of the user to send a friend request to
+ */
+export function addFriend(user, uid) {
+    // Add to user's friend requests
+    set(ref(database, `users/${uid}/friends/requests/${user.uid}`), {
+        uid: user.uid
+    })
+}
+
+/**
+ * 
+ * @param {JSON} friendObj - Friend Object (user) 
+ * @returns Friend Component
+ */
+export function Friend({user,friendObj}) {
+    return (
+        <div className="border-[black] border-1 shadow-lg m-2 rounded-lg">
+                <div className='grid grid-cols-4'>
+                    <div className='place-content-center'>
+                        <ChatIcon className='cursor-pointer' onClick={() => {openDM(user,friendObj.uid)}}/>
+                    </div>
+                    <div className='col-span-3 cursor-pointer'>
+                        <Link href={`/user?uid=${friendObj.uid}`}>
+                            <div className='grid grid-cols-2 justify-items-center'>
+                                <div className='mr-8'><img src={friendObj.pfp} className= 'w-[50px] h-[50px]'/></div>
+                                <div className=''>
+                                    <div className="font-bold">{friendObj.lastOnline == true && <CircleIcon className="text-lime-600 mr-1 relative top-[-2px]" fontSize="20px"/>}{friendObj.firstName} {friendObj.lastName}</div>
+                                    <div className="">@{friendObj.username}</div>
+                                </div>
+                            </div>
+                        </Link>
+                    </div>
+                </div>
+      </div>
+    )
+}
+
+/**
+ * 
+ * @prop {JSON} user - User Object 
+ * @prop {JSON} requestingUser - User Object of the user requesting to be friends
+ * @returns {Object} Friend Request Component
+ */
+export function FriendRequest({user, requestingUser}) {
+    /**
+     * Accepts Friend Request
+     * @param {JSON} user - User Object
+     * @param {JSON} uid - User ID of the user who sent the friend request
+     */
+    function acceptRequest(user, uid) {
+        // Add to user's friends
+        set(ref(database, `users/${user.uid}/friends/friends/${uid}`), {
+            uid: uid
+        })
+        set(ref(database, `users/${uid}/friends/friends/${user.uid}`), {
+            uid: user.uid
+        })
+        removeRequest(user, uid)
+    }
+    /**
+     * Removes Friend Request
+     * @param {JSON} user - User Object
+     * @param {JSON} uid - User ID of the user who sent the friend request
+     */
+    function removeRequest(user, uid) {
+        // Remove from user's friend requests
+        set(ref(database, `users/${user.uid}/friends/requests/${uid}`), null)
+    }
+    return (
+        <div className="border-[black] border-1 shadow-lg m-2 rounded-lg">
+            <div className='grid grid-cols-4'>
+                <div className='place-content-center'>
+                    <CheckIcon className='cursor-pointer ml-5' onClick={() => {acceptRequest(user, requestingUser.uid)}}/>
+                    <CloseIcon className='cursor-pointer ml-5' onClick={() => {removeRequest(user, requestingUser.uid)}}/>
+                </div>
+                <div className='col-span-3 cursor-pointer'>
+                    <Link href={`/user?uid=${requestingUser.uid}`}>
+                        <div className='inline-block mr-5'><img src={requestingUser.pfp} className='w-[50px]'/></div>
+                        <div className='inline-block relative top-[-6px]'>
+                            <div className="font-bold">{requestingUser.firstName} {requestingUser.lastName}</div>
+                            <div className="">@{requestingUser.username}</div>
+                        </div>
+                    </Link>
+                </div>
+            </div>
+        </div>
+    )
+}

frontend-next/src/components/app/friends/page.js

@@ -0,0 +1,142 @@
+// Dependency Imports
+import { Form, useForm } from "react-hook-form";
+
+// Firebase Imports
+import { ref, set, onChildAdded, onChildRemoved } from "firebase/database";
+import { database } from "../../../../firebase-config";
+
+// Component Imports
+import { Chat, SystemMessage } from "../datatypes";
+
+// Icons
+import SendIcon from '@mui/icons-material/Send';
+
+// Notification
+import { createNotification } from "../notifications/notifications";
+
+import { useEffect, useState } from "react";
+
+/**
+ * Chat Room Component
+ * @prop {JSON} roomObj - Room Object
+ * @prop {JSON} user - User Object
+ * @returns {Object} - Chat Room Component
+ */
+export function DMRoom({ roomObj, user }) {
+  const [chatRoomObj, setChatRoomObj] = useState(roomObj);
+  const [chats, setChats] = useState(null);
+  var { register, control, reset, handleSubmit } = useForm();
+
+  // Listeners for DMs
+  useEffect(() => {
+    var path = roomObj.UIDs[0] < roomObj.UIDs[1] ? roomObj.UIDs[0] + "-" + roomObj.UIDs[1] : roomObj.UIDs[1] + "-" + roomObj.UIDs[0];
+    onChildAdded(ref(database, `/dms/${path}/chats`), (newDM) => {
+      if (chatRoomObj) {
+        var newDMRoomObj = chatRoomObj
+        if (newDMRoomObj) {
+          if (!newDMRoomObj.chats) {
+            newDMRoomObj.chats = {}
+          }
+          newDMRoomObj.chats[newDM.key] = newDM.val()
+          setChatRoomObj({...newDMRoomObj})
+        }
+      }
+
+    });
+    onChildRemoved(ref(database, `/dms/${path}/chats`), (removed) => {
+      if (chatRoomObj) {
+        var newDMRoomObj = chatRoomObj
+        var deleted = removed.val()
+        delete newDMRoomObj.chats[`${deleted.timestamp}-${deleted.user}`]
+        setChatRoomObj({...newDMRoomObj})
+      }
+    });
+  }, [])
+  
+  useEffect(() => {
+    // Message updater
+    var chatsArr = [];
+    var messages = chatRoomObj.chats;
+    for (var message in messages) {
+      if (messages[message].isSystem) {
+        chatsArr.push(
+          <SystemMessage
+            chatObj={messages[message]}
+            key={messages[message].timestamp}
+          />
+        );
+      } else {
+        chatsArr.push(
+          <Chat
+            chatObj={messages[message]}
+            user={user}
+            path={"/dms/" + chatRoomObj.room}
+            key={messages[message].timestamp + "-" + messages[message].user}
+          />
+        );
+      }
+    }
+    setChats(chatsArr.reverse())
+  }, [chatRoomObj])
+
+  /**
+   * Send Message in Chatroom
+   * @param {JSON} data - Message data to send (from form)
+   * @returns {void}
+   */
+  function sendMessage(data) {
+    // Other UID
+    var otherUID = chatRoomObj.initUID == user.uid ? chatRoomObj.targetUID : chatRoomObj.initUID;
+    // Send other user notification if not in room
+    if (chatRoomObj.users && chatRoomObj.users.online) {
+      if (!(otherUID in chatRoomObj.users.online)) {
+        createNotification(
+          "New Message",
+          `${user.username} sent you a message.`,
+          "dm",
+          user.uid,
+          otherUID
+        );
+      }
+    }
+
+    var messageFilterBypass = [undefined, null, "", " ", ' ', '\'']
+    reset();
+    if (!messageFilterBypass.includes(data.message)) {
+      var payload = {
+        body: data.message,
+        user: user.username,
+        uid: user.uid,
+        isSystem: false,
+        timestamp: new Date().getTime(),
+      };
+      set(
+        ref(
+          database,
+          `/dms/${chatRoomObj.room}/chats/${new Date().getTime()}-${user.username}`
+        ),
+        payload
+      );
+    }
+  }
+
+  if (!chats) return <div>No Chats</div>;
+  return (
+    <div className="m-1 h-[100%] rounded-lg">
+      <div className="h-[90%] m-4 overflow-y-auto flex flex-col-reverse">
+        {chats}
+      </div>
+      <div className="m-2 h-[10%] w-[100%] bg-white rounded-lg">
+        <Form
+          onSubmit={handleSubmit(sendMessage)}
+          control={control}
+        >
+          <div className="width-[100%] grid grid-cols-6 pr-5 pt-1">
+            <input type="text" {...register("message")} placeholder="Enter message..." className="col-span-5 border-[0px]" />
+            <button className="p-2 cursor-pointer bg-cyan-500 text-white font-bold rounded-full mr-5 w-[100%]"><SendIcon/></button>
+          </div>
+        </Form>
+      </div>
+    </div>
+  );
+}

frontend-next/src/components/app/header.js

@@ -0,0 +1,162 @@
+// System Imports
+import Link from "next/link"
+
+// Firebase Imports
+import { database } from "../../../firebase-config";
+import { ref, set, remove, onDisconnect, serverTimestamp } from "firebase/database";
+
+// Component Imports
+import { NotificationPanel } from "./notifications/notifications";
+import { ProfilePanel } from "./profile/ProfilePanel"
+
+// Icons
+import MenuIcon from '@mui/icons-material/Menu';
+import AddIcon from '@mui/icons-material/Add';
+import RemoveIcon from '@mui/icons-material/Remove';
+import CloseIcon from '@mui/icons-material/Close';
+import { useEffect } from "react";
+
+/**
+ * Closes Chat
+ * @param {JSON} chatRoomObj - Chat Room Object
+ * @param {JSON} user - User Object
+ * @returns {void}
+ */
+function closeChat(chatRoomObj, user, mainTab) {
+  if (mainTab == "chat") {
+  remove(ref(database, `/rooms/${chatRoomObj.path}/${chatRoomObj.name}-${chatRoomObj.timestamp}/users/online/${user.uid}`))
+  } else {
+  remove(ref(database, `/dms/${chatRoomObj.room}/users/online/${user.uid}`))
+  }
+
+}
+
+/**
+ * Adds Chat Room to My Rooms
+ * @param {JSON} chatRoomObj - Chat Room Object
+ * @param {JSON} user - User Object
+ * @returns {void}
+ */
+function addToMyRooms(chatRoomObj, user) {
+  set(
+    ref(
+      database,
+      `/users/${user.uid}/rooms/${chatRoomObj.name}-${chatRoomObj.timestamp}`
+    ),
+    {
+      name: chatRoomObj.name,
+      path: chatRoomObj.path,
+      timestamp: chatRoomObj.timestamp,
+      description: chatRoomObj.description,
+      longitude: chatRoomObj.longitude,
+      latitude: chatRoomObj.latitude,
+    }
+  );
+  var path =
+    chatRoomObj.path + "/" + chatRoomObj.name + "-" + chatRoomObj.timestamp;
+  user.lastOnline = serverTimestamp();
+  set(ref(database, `/rooms/${path}/users/all/${user.uid}`), user);
+}
+
+/**
+ * Removes Chat Room from My Rooms
+ * @param {JSON} chatRoomObj - Chat Room Object
+ * @param {JSON} user - User Object
+ * @returns {void}
+ */
+function removeFromMyRooms(chatRoomObj, user) {
+  var path =
+    chatRoomObj.path + "/" + chatRoomObj.name + "-" + chatRoomObj.timestamp;
+  remove(
+    ref(
+      database,
+      `/users/${user.uid}/rooms/${chatRoomObj.name}-${chatRoomObj.timestamp}`
+    )
+  );
+  remove(ref(database, `/rooms/${path}/users/all/${user.uid}`));
+}
+
+/**
+ * Header Component
+ * @prop {String} mainTab - Main Tab
+ * @prop {JSON} chatRoomObj - Chat Room Object
+ * @prop {JSON} user - User Object
+ */
+export function Header({mainTab,chatRoomObj,user,sidebarControl}) {
+  
+  if (mainTab == "chat") {
+    var roomName = chatRoomObj.name + "-" + chatRoomObj.timestamp;
+    if (user.rooms != null && roomName in user.rooms) {
+      // its in there
+      var isMyRoom = true;
+    } else {
+      // its not in there
+      var isMyRoom = false;
+    }
+
+  }
+
+  useEffect(() => {
+    // Sets User Online / Offline
+    // Stored in header for easy code maintenance and retains user online/offline throughout app
+    // Makes user online
+    if (user.invisibleStatus == false) {
+      set(ref(database, `/users/${user.uid}/lastOnline`), true)
+    }
+  }, [])
+
+  // Makes user offline (with last time online)
+  onDisconnect(ref(database, `/users/${user.uid}/lastOnline`)).set(serverTimestamp())
+
+  return (
+    <div className="flex m-2 rounded-lg h-[63px] bg-white shadow-2xl p-1">
+      <div className="flex shrink h-[60px]">
+        <Link href="/app">
+          <img src="/logos/logo_transparent_inverse.png" className="h-[60px] max-xl:hidden" />
+          <img src="/logos/icon.png" className="h-[50px] mt-[5px] mb-[5px] xl:hidden" />
+        </Link>
+      </div>
+      <div className="grow grid grid-rows-1 grid-flow-col auto-cols-max justify-end gap-2 h-[60px] p-2">
+        {mainTab == "chat" && isMyRoom == false && (
+          <a
+            onClick={() => {
+              addToMyRooms(chatRoomObj, user);
+              
+            }}
+            className="p-2 cursor-pointer bg-cyan-500 text-white font-bold rounded-full mr-2 flex items-center"
+          >
+            <AddIcon/>
+          </a>
+        )}
+        {mainTab == "chat" && isMyRoom == true && (
+          <a
+            onClick={() => {
+              removeFromMyRooms(chatRoomObj, user);
+            }}
+            className="p-2 cursor-pointer bg-cyan-500 text-white font-bold rounded-full mr-2 flex items-center"
+          >
+            <RemoveIcon/>
+          </a>
+        )}
+        {(mainTab == "chat" || mainTab == "dm" ) && (
+          <Link
+            href="/app"
+            className="p-2 cursor-pointer bg-cyan-500 text-white font-bold rounded-full mr-2 flex items-center"
+            onClick={() => {closeChat(chatRoomObj,user, mainTab)}}
+          >
+            <CloseIcon/>
+          </Link>
+        )}
+
+        {/* Notifications Panel */}
+        <NotificationPanel user={user}/>
+
+        {/*Profile Dropdown */}
+        <ProfilePanel user={user}/>
+
+        {/* Sidebar Control (for small screens) */}
+        {mainTab !== "profile" && (<div className="md:hidden p-2 cursor-pointer bg-cyan-500 text-white font-bold rounded-full mr-5 flex items-center" onClick={() => {sidebarControl()}}><MenuIcon/></div>)}
+        </div>
+    </div>
+  );
+}

frontend-next/src/components/app/map/geo.js

@@ -0,0 +1,106 @@
+import { Map, Marker, ZoomControl, Overlay } from "pigeon-maps";
+import { database } from "../../../../firebase-config";
+import { ref, get} from "firebase/database";
+import { useEffect, useState } from "react";
+import ChatBubbleTwoToneIcon from '@mui/icons-material/ChatBubbleTwoTone';
+import PersonOutlineTwoToneIcon from '@mui/icons-material/PersonOutlineTwoTone';
+import { red } from '@mui/material/colors';
+
+/**
+ * Geo Component for Wrapping Map
+ * @constructor
+ * @prop {JSON} loc - Location Object {latitude, longitude}
+ * @prop {Number} zoom - Zoom Level
+ * @prop {Boolean} moveable - Moveable Map
+ * @prop {Boolean} markers - Enable Markers
+ * @returns {Map} - Geo Component (As Map)
+ */
+export function Geo({ loc, zoom, moveable, user }) {
+  const [hovering, setHovering] = useState(false);
+  const [hoverText, setHoverText] = useState("");
+  const [hoverAnchor, setHoverAnchor] = useState([null,null]);
+  const [nearbyMarkersFinal, setNearbyMarkers] = useState(null);
+  
+  if (moveable && user.rooms) {
+    // Load My Rooms Markers
+    var myRoomsMarkers = Object.values(user.rooms).map((roomObj) => {
+      return (<Marker
+        key={roomObj.path + "-" + roomObj.name}
+        anchor={[roomObj.latitude, roomObj.longitude]}
+        onClick={() => {window.location.href = "/chat?room=" + roomObj.path + "/" + roomObj.name + "-" + roomObj.timestamp;}}
+        style={{pointerEvents:'auto'} /* So stupid */}
+        onMouseOver={() => {setHoverText(roomObj.name);setHovering(true);setHoverAnchor([roomObj.latitude, roomObj.longitude])}}
+        onMouseOut={() => {setHovering(false)}}
+      >
+        <ChatBubbleTwoToneIcon color="primary" fontSize="large"/>
+      </Marker>)
+    })
+  }
+
+  useEffect(() => {
+    // Load Nearby Markers
+    if (moveable && loc) {
+      const path = String(loc.latitude.toFixed(2)).replace(".", "") +"/" +String(loc.longitude.toFixed(2)).replace(".", "") +"/";
+      get(ref(database, `/rooms/${path}`)).then((snapshot) => {
+        console.log("ran")
+        if (snapshot.exists()) {
+          nearbyMarkers = snapshot.val();
+          if (nearbyMarkers) {
+            var nearbyMarkers = Object.values(nearbyMarkers).map((roomObj) => {
+              return (<Marker
+                key={roomObj.path + "-" + roomObj.name}
+                anchor={[roomObj.latitude, roomObj.longitude]}
+                onClick={() => {window.location.href = "/chat?room=" + roomObj.path + "/" + roomObj.name + "-" + roomObj.timestamp;}}
+                style={{pointerEvents:'auto'} /* So stupid */}
+                onMouseOver={() => {setHoverText(roomObj.name);setHovering(true);setHoverAnchor([roomObj.latitude, roomObj.longitude])}}
+                onMouseOut={() => {setHovering(false)}}
+              >
+                <ChatBubbleTwoToneIcon color="secondary" fontSize="large"/>
+              </Marker>)
+            })
+            setNearbyMarkers(nearbyMarkers);
+          }
+        }
+      })
+    }
+  }, [])
+
+  if (!loc) {
+    return <div>Getting Location...</div>;
+  } else {
+    return (
+      <>
+        <Map
+          center={[loc.latitude, loc.longitude]}
+          defaultZoom={zoom}
+          mouseEvents={moveable}
+          touchEvents={moveable}
+          attribution={false}
+        >
+          {zoom && <ZoomControl />}
+          {moveable && nearbyMarkersFinal}
+          {moveable && myRoomsMarkers}
+
+          { /* Overlay */}
+          {hovering && (
+            <Overlay anchor={hoverAnchor} offset={[0, 0]}>
+              <div className="bg-white rounded-lg p-2">
+                <p className="text-lg">{hoverText}</p>
+              </div>
+            </Overlay>
+          )}
+
+          {user && ( // Shows the user marker
+            <Marker
+              anchor={[loc.latitude, loc.longitude]}
+              color="red"
+              style={{pointerEvents:'auto'} /* So stupid */}
+            >
+              <PersonOutlineTwoToneIcon sx={{ color: red[500] }} fontSize="large"/>
+            </Marker>
+          )}
+        </Map>
+      </>
+    );
+  }
+}

frontend-next/src/components/app/notifications/notifications.js

@@ -0,0 +1,112 @@
+// System Imports
+import { Popover } from "@headlessui/react";
+
+// Icon Imports
+import NotificationsIcon from '@mui/icons-material/Notifications';
+import NotificationsPausedIcon from '@mui/icons-material/NotificationsPaused';
+import CloseIcon from '@mui/icons-material/Close';
+
+// Firebase Imports
+import { database } from "../../../../firebase-config";
+import { ref, set, remove } from "firebase/database";
+
+/**
+ * Notification Object
+ * @constructor
+ * @prop {user.notification} data - Notification data 
+ * @returns {Notification} - Notification Component
+ */
+function Notification({data}) {
+    /**
+     * Removes Notification
+     * @returns {void}
+     */
+    function removeNotification() {
+        remove(ref(database, `/users/${data.ruser}/notifications/${data.suser}-${data.action}`))
+    }
+
+    /**
+     * Determines Action
+     */
+    function onClick() {
+        if (data.action === "dm") {
+            var order = data.suser > data.ruser ? data.ruser + "-" + data.suser : data.suser + "-" + data.ruser;
+            window.location.href = "/dm?dm=" + order;
+            removeNotification()
+        }
+    }
+
+    return (
+        <div className="hover:bg-[#C0C0C0] rounded-lg cursor-pointer" >
+            <div className="float-right top-0 cursor-pointer p-2 text-[24px] text-slate-500">
+                <div onClick={() => {removeNotification()}}><CloseIcon/></div>
+            </div>
+            <div className="p-3 text-left" onClick={() => {onClick()}}>
+                <span className="font-bold">{data.title}</span><br/>
+                {data.byline}<br/>
+            </div>
+        </div>
+    )
+}
+
+
+/**
+* Creates New Notification
+* @param {String} title - Title of the notification
+* @param {String} byline - Byline of the notification
+* @param {String} action - Action to perform (friend request [fr], more to come)
+* @param {String} suser - Sending user UID
+* @param {String} ruser - Receiving user UID
+* @returns {void}
+*/
+export function createNotification(title, byline, action, suser, ruser) {
+    var timestamp = new Date().getTime();
+    var payload = {
+        title: title,
+        byline: byline,
+        action: action,
+        suser: suser,
+        ruser: ruser,
+        id: suser + "-" + action,
+        timestamp: timestamp
+    };
+    set(ref(database, `/users/${ruser}/notifications/${suser}-${action}`), payload);
+}
+
+/**
+ * Notification Panel
+ * @constructor
+ * @prop {user} user - User object (from Firebase)
+ * @returns {NotificationPanel} - Notification Panel Component
+ */
+export function NotificationPanel({user}) {
+    var notificationsMap = []
+        if (user.notifications) {
+            for (var notificationPackage in user.notifications) {
+                notificationsMap.push(<Notification data={user.notifications[notificationPackage]}/>)
+            }
+        } else {
+            notificationsMap = null
+        }
+
+    return (
+        <Popover className="relative">
+          <Popover.Button as="div">
+            <div className="h-[44px] p-[8px] cursor-pointer bg-cyan-500 text-white font-bold rounded-full shadow-2xl flex items-center">
+                <NotificationsIcon />
+            </div>
+          </Popover.Button>
+
+          <Popover.Panel className="absolute z-10 bg-white mt-[4px] rounded-xl ml-3 shadow-2xl w-64 md:right-[0px] max-md:right-[-300%]">
+            <div className="grid grid-cols-1">
+              {notificationsMap}
+              {!notificationsMap && 
+                <div className="h-[64px] flex flex-col justify-center items-center">
+                    <NotificationsPausedIcon/> All caught up!
+                </div>
+              }
+            </div>
+          </Popover.Panel>
+        </Popover>
+    )
+}

frontend-next/src/components/app/page/chat.js

@@ -0,0 +1,121 @@
+// Dependency Imports
+import { Form, useForm } from "react-hook-form";
+
+// Firebase Imports
+import { ref, set, onChildAdded, onChildRemoved } from "firebase/database";
+import { database } from "../../../../firebase-config";
+
+// Component Imports
+import { Chat, SystemMessage } from "../datatypes";
+
+// Icons
+import SendIcon from '@mui/icons-material/Send';
+import { useState,useEffect } from "react";
+
+/**
+ * Chat Room Component
+ * @prop {JSON} roomObj - Room Object
+ * @prop {JSON} user - User Object
+ * @returns {Object} - Chat Room Component
+ */
+export function ChatRoom({ roomObj, user }) {
+  const [chatRoomObj, setChatRoomObj] = useState(roomObj);
+  const [chats, setChats] = useState(null);
+  var { register, control, reset, handleSubmit } = useForm();
+             
+  // Listeners for Chats
+  useEffect(() => {
+    var path = chatRoomObj.path + "/" + chatRoomObj.name + "-" + chatRoomObj.timestamp;
+    onChildAdded(ref(database, `/rooms/${path}/chats`), (newChat) => {
+      var newChatRoomObj = chatRoomObj
+      if (newChatRoomObj) {
+        if (!newChatRoomObj.chats) {
+          newChatRoomObj.chats = {}
+        }
+        newChatRoomObj.chats[newChat.key] = newChat.val()
+        setChatRoomObj({...newChatRoomObj})
+      }
+
+    });
+    onChildRemoved(ref(database, `/rooms/${path}/chats`), (removed) => {
+      if (chatRoomObj) {
+        var newChatRoomObj = chatRoomObj
+        var deleted = removed.val()
+        delete newChatRoomObj.chats[`${deleted.timestamp}-${deleted.user}`]
+        setChatRoomObj({...newChatRoomObj})
+      }
+    });
+  }, [])
+
+  useEffect(() => {
+    // Message updater
+    var chatsArr = [];
+    var messages = chatRoomObj.chats;
+    for (var message in messages) {
+      if (messages[message].isSystem) {
+        chatsArr.push(
+          <SystemMessage
+            chatObj={messages[message]}
+            key={messages[message].timestamp + messages[message].user}
+          />
+        );
+      } else {
+        chatsArr.push(
+          <Chat
+            chatObj={messages[message]}
+            user={user}
+            path={"/rooms/" + chatRoomObj.path + "/" + chatRoomObj.name + "-" + chatRoomObj.timestamp}
+            key={messages[message].timestamp + "-" + messages[message].user}
+          />
+        );
+      }
+    }
+    setChats(chatsArr.reverse())
+  }, [chatRoomObj])
+  
+  /**
+   * Send Message in Chatroom
+   * @param {JSON} data - Message data to send (from form)
+   * @returns {void}
+   */
+  function sendMessage(data) {
+    var messageFilterBypass = [undefined, null, '', ' ', '\'', '\"']
+    if (!messageFilterBypass.includes(data.message)) {
+      reset();
+      var payload = {
+        body: data.message,
+        user: user.username,
+        uid: user.uid,
+        isSystem: false,
+        timestamp: new Date().getTime(),
+      };
+      set(
+        ref(
+          database,
+          `/rooms/${chatRoomObj.path + "/" + chatRoomObj.name + "-" + chatRoomObj.timestamp}/chats/${new Date().getTime()}-${user.username}`
+        ),
+        payload
+      );
+    }
+  }
+
+  if (!chats) return <div>No Chats</div>;
+  return (
+    <div className="m-1 h-[100%] rounded-lg">
+      <div className="h-[90%] m-4 overflow-y-auto flex flex-col-reverse">
+        {chats}
+      </div>
+      <div className="m-2 h-[10%] w-[100%] bg-white rounded-lg">
+        <Form
+          onSubmit={handleSubmit(sendMessage)}
+          control={control}
+        >
+          <div className="width-[100%] grid grid-cols-6 pr-5 pt-1">
+            <input type="text" {...register("message")} placeholder="Enter message..." className="col-span-5 border-[0px]" />
+            <button className="p-2 cursor-pointer bg-cyan-500 text-white font-bold rounded-full mr-5 w-[100%]"><SendIcon/></button>
+          </div>
+        </Form>
+      </div>
+    </div>
+  );
+}