From 9be6ea4cdda89b1150f3a9993f6e4070cfa06c36 Mon Sep 17 00:00:00 2001 From: Ebrahim Beiaty Date: Thu, 26 Mar 2026 20:49:43 +0000 Subject: [PATCH 01/21] initial html --- chat-app/frontend/index.html | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 chat-app/frontend/index.html diff --git a/chat-app/frontend/index.html b/chat-app/frontend/index.html new file mode 100644 index 0000000..69defc4 --- /dev/null +++ b/chat-app/frontend/index.html @@ -0,0 +1,18 @@ + + + + + + + Chat App + + +
+ + +
+ + + + + From e13f98543b52c40c25a951186b782ebd18f4811a Mon Sep 17 00:00:00 2001 From: Ebrahim Beiaty Date: Thu, 26 Mar 2026 20:50:27 +0000 Subject: [PATCH 02/21] initial server.js --- chat-app/backend/server.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 chat-app/backend/server.js diff --git a/chat-app/backend/server.js b/chat-app/backend/server.js new file mode 100644 index 0000000..1aaac6f --- /dev/null +++ b/chat-app/backend/server.js @@ -0,0 +1,21 @@ +const express = require("express"); +const app = express(); +const PORT = 3000; + +app.use(express.json()); + +let messages = []; + +app.get("/messages", (req, res) => { + res.json(messages); +}); + +app.post("/messages", (req, res) => { + const message = req.body; + messages.push(message); + res.status(201).json(message); +}); + +app.listen(PORT, () => { + console.log(`Server is running on port ${PORT}`); +}); From ef8a23e5ba316af03fdc63123cdb512f144ec031 Mon Sep 17 00:00:00 2001 From: Ebrahim Beiaty Date: Thu, 26 Mar 2026 21:22:15 +0000 Subject: [PATCH 03/21] edit html --- chat-app/frontend/index.html | 11 ++++++++--- chat-app/frontend/script.js | 38 ++++++++++++++++++++++++++++++++++++ chat-app/frontend/styles.css | 0 3 files changed, 46 insertions(+), 3 deletions(-) create mode 100644 chat-app/frontend/script.js create mode 100644 chat-app/frontend/styles.css diff --git a/chat-app/frontend/index.html b/chat-app/frontend/index.html index 69defc4..4c7b444 100644 --- a/chat-app/frontend/index.html +++ b/chat-app/frontend/index.html @@ -7,11 +7,16 @@ Chat App -
- +
    + +
    -
      diff --git a/chat-app/frontend/script.js b/chat-app/frontend/script.js new file mode 100644 index 0000000..b958a7d --- /dev/null +++ b/chat-app/frontend/script.js @@ -0,0 +1,38 @@ +const messagesList = document.getElementById("messages-list"); +const form = document.getElementById("message-form"); +const input = document.getElementById("message-input"); + +const BACKEND_URL = "http://127.0.0.1:3000"; + +// Fetch and display messages +async function loadMessages() { + const response = await fetch(`${BACKEND_URL}/messages`); + const messages = await response.json(); + messagesList.innerHTML = ""; + messages.forEach((msg) => { + const li = document.createElement("li"); + li.textContent = `${msg.username}: ${msg.text}`; + messagesList.appendChild(li); + }); +} + +// Handle form submission +form.addEventListener("submit", async (e) => { + e.preventDefault(); + + const newMessage = { + username: "User", + text: input.value, + }; + + await fetch(`${BACKEND_URL}/messages`, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(newMessage), + }); + + input.value = ""; + loadMessages(); +}); diff --git a/chat-app/frontend/styles.css b/chat-app/frontend/styles.css new file mode 100644 index 0000000..e69de29 From 1861f05c244eb8856d9e756ea9c613c98eef4a9d Mon Sep 17 00:00:00 2001 From: Ebrahim Beiaty Date: Thu, 26 Mar 2026 21:22:34 +0000 Subject: [PATCH 04/21] edit server --- .gitignore | 3 + chat-app/backend/package-lock.json | 854 +++++++++++++++++++++++++++++ chat-app/backend/package.json | 16 + chat-app/backend/server.js | 4 +- 4 files changed, 876 insertions(+), 1 deletion(-) create mode 100644 .gitignore create mode 100644 chat-app/backend/package-lock.json create mode 100644 chat-app/backend/package.json diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..9c97bbd --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +node_modules +dist +.env diff --git a/chat-app/backend/package-lock.json b/chat-app/backend/package-lock.json new file mode 100644 index 0000000..ab3409f --- /dev/null +++ b/chat-app/backend/package-lock.json @@ -0,0 +1,854 @@ +{ + "name": "backend", + "version": "1.0.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "backend", + "version": "1.0.0", + "license": "ISC", + "dependencies": { + "cors": "^2.8.6", + "express": "^5.2.1" + } + }, + "node_modules/accepts": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/accepts/-/accepts-2.0.0.tgz", + "integrity": "sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==", + "license": "MIT", + "dependencies": { + "mime-types": "^3.0.0", + "negotiator": "^1.0.0" + }, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/body-parser": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.2.2.tgz", + "integrity": "sha512-oP5VkATKlNwcgvxi0vM0p/D3n2C3EReYVX+DNYs5TjZFn/oQt2j+4sVJtSMr18pdRr8wjTcBl6LoV+FUwzPmNA==", + "license": "MIT", + "dependencies": { + "bytes": "^3.1.2", + "content-type": "^1.0.5", + "debug": "^4.4.3", + "http-errors": "^2.0.0", + "iconv-lite": "^0.7.0", + "on-finished": "^2.4.1", + "qs": "^6.14.1", + "raw-body": "^3.0.1", + "type-is": "^2.0.1" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" + } + }, + "node_modules/bytes": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz", + "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==", + "license": "MIT", + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/call-bind-apply-helpers": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz", + "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==", + "license": "MIT", + "dependencies": { + "es-errors": "^1.3.0", + "function-bind": "^1.1.2" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/call-bound": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz", + "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==", + "license": "MIT", + "dependencies": { + "call-bind-apply-helpers": "^1.0.2", + "get-intrinsic": "^1.3.0" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/content-disposition": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-1.0.1.tgz", + "integrity": "sha512-oIXISMynqSqm241k6kcQ5UwttDILMK4BiurCfGEREw6+X9jkkpEe5T9FZaApyLGGOnFuyMWZpdolTXMtvEJ08Q==", + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" + } + }, + "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==", + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/cookie": { + "version": "0.7.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz", + "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==", + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/cookie-signature": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.2.2.tgz", + "integrity": "sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==", + "license": "MIT", + "engines": { + "node": ">=6.6.0" + } + }, + "node_modules/cors": { + "version": "2.8.6", + "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.6.tgz", + "integrity": "sha512-tJtZBBHA6vjIAaF6EnIaq6laBBP9aq/Y3ouVJjEfoHbRBcHBAHYcMh/w8LDrk2PvIMMq8gmopa5D4V8RmbrxGw==", + "license": "MIT", + "dependencies": { + "object-assign": "^4", + "vary": "^1" + }, + "engines": { + "node": ">= 0.10" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" + } + }, + "node_modules/debug": { + "version": "4.4.3", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz", + "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==", + "license": "MIT", + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "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==", + "license": "MIT", + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/dunder-proto": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz", + "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==", + "license": "MIT", + "dependencies": { + "call-bind-apply-helpers": "^1.0.1", + "es-errors": "^1.3.0", + "gopd": "^1.2.0" + }, + "engines": { + "node": ">= 0.4" + } + }, + "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==", + "license": "MIT" + }, + "node_modules/encodeurl": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz", + "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==", + "license": "MIT", + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/es-define-property": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz", + "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==", + "license": "MIT", + "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==", + "license": "MIT", + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/es-object-atoms": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz", + "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==", + "license": "MIT", + "dependencies": { + "es-errors": "^1.3.0" + }, + "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==", + "license": "MIT" + }, + "node_modules/etag": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz", + "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==", + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/express": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/express/-/express-5.2.1.tgz", + "integrity": "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==", + "license": "MIT", + "dependencies": { + "accepts": "^2.0.0", + "body-parser": "^2.2.1", + "content-disposition": "^1.0.0", + "content-type": "^1.0.5", + "cookie": "^0.7.1", + "cookie-signature": "^1.2.1", + "debug": "^4.4.0", + "depd": "^2.0.0", + "encodeurl": "^2.0.0", + "escape-html": "^1.0.3", + "etag": "^1.8.1", + "finalhandler": "^2.1.0", + "fresh": "^2.0.0", + "http-errors": "^2.0.0", + "merge-descriptors": "^2.0.0", + "mime-types": "^3.0.0", + "on-finished": "^2.4.1", + "once": "^1.4.0", + "parseurl": "^1.3.3", + "proxy-addr": "^2.0.7", + "qs": "^6.14.0", + "range-parser": "^1.2.1", + "router": "^2.2.0", + "send": "^1.1.0", + "serve-static": "^2.2.0", + "statuses": "^2.0.1", + "type-is": "^2.0.1", + "vary": "^1.1.2" + }, + "engines": { + "node": ">= 18" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" + } + }, + "node_modules/finalhandler": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-2.1.1.tgz", + "integrity": "sha512-S8KoZgRZN+a5rNwqTxlZZePjT/4cnm0ROV70LedRHZ0p8u9fRID0hJUZQpkKLzro8LfmC8sx23bY6tVNxv8pQA==", + "license": "MIT", + "dependencies": { + "debug": "^4.4.0", + "encodeurl": "^2.0.0", + "escape-html": "^1.0.3", + "on-finished": "^2.4.1", + "parseurl": "^1.3.3", + "statuses": "^2.0.1" + }, + "engines": { + "node": ">= 18.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" + } + }, + "node_modules/forwarded": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz", + "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==", + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/fresh": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/fresh/-/fresh-2.0.0.tgz", + "integrity": "sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==", + "license": "MIT", + "engines": { + "node": ">= 0.8" + } + }, + "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==", + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/get-intrinsic": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz", + "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==", + "license": "MIT", + "dependencies": { + "call-bind-apply-helpers": "^1.0.2", + "es-define-property": "^1.0.1", + "es-errors": "^1.3.0", + "es-object-atoms": "^1.1.1", + "function-bind": "^1.1.2", + "get-proto": "^1.0.1", + "gopd": "^1.2.0", + "has-symbols": "^1.1.0", + "hasown": "^2.0.2", + "math-intrinsics": "^1.1.0" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/get-proto": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz", + "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==", + "license": "MIT", + "dependencies": { + "dunder-proto": "^1.0.1", + "es-object-atoms": "^1.0.0" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/gopd": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz", + "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==", + "license": "MIT", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/has-symbols": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz", + "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==", + "license": "MIT", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/hasown": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz", + "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==", + "license": "MIT", + "dependencies": { + "function-bind": "^1.1.2" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/http-errors": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz", + "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==", + "license": "MIT", + "dependencies": { + "depd": "~2.0.0", + "inherits": "~2.0.4", + "setprototypeof": "~1.2.0", + "statuses": "~2.0.2", + "toidentifier": "~1.0.1" + }, + "engines": { + "node": ">= 0.8" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" + } + }, + "node_modules/iconv-lite": { + "version": "0.7.2", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.2.tgz", + "integrity": "sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==", + "license": "MIT", + "dependencies": { + "safer-buffer": ">= 2.1.2 < 3.0.0" + }, + "engines": { + "node": ">=0.10.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" + } + }, + "node_modules/inherits": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", + "license": "ISC" + }, + "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==", + "license": "MIT", + "engines": { + "node": ">= 0.10" + } + }, + "node_modules/is-promise": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-4.0.0.tgz", + "integrity": "sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==", + "license": "MIT" + }, + "node_modules/math-intrinsics": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz", + "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==", + "license": "MIT", + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/media-typer": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-1.1.0.tgz", + "integrity": "sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==", + "license": "MIT", + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/merge-descriptors": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-2.0.0.tgz", + "integrity": "sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==", + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/mime-db": { + "version": "1.54.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz", + "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==", + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/mime-types": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.2.tgz", + "integrity": "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==", + "license": "MIT", + "dependencies": { + "mime-db": "^1.54.0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" + } + }, + "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==", + "license": "MIT" + }, + "node_modules/negotiator": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-1.0.0.tgz", + "integrity": "sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==", + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/object-inspect": { + "version": "1.13.4", + "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz", + "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==", + "license": "MIT", + "engines": { + "node": ">= 0.4" + }, + "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==", + "license": "MIT", + "dependencies": { + "ee-first": "1.1.1" + }, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/once": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", + "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==", + "license": "ISC", + "dependencies": { + "wrappy": "1" + } + }, + "node_modules/parseurl": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz", + "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==", + "license": "MIT", + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/path-to-regexp": { + "version": "8.4.0", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.4.0.tgz", + "integrity": "sha512-PuseHIvAnz3bjrM2rGJtSgo1zjgxapTLZ7x2pjhzWwlp4SJQgK3f3iZIQwkpEnBaKz6seKBADpM4B4ySkuYypg==", + "license": "MIT", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" + } + }, + "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==", + "license": "MIT", + "dependencies": { + "forwarded": "0.2.0", + "ipaddr.js": "1.9.1" + }, + "engines": { + "node": ">= 0.10" + } + }, + "node_modules/qs": { + "version": "6.15.0", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.0.tgz", + "integrity": "sha512-mAZTtNCeetKMH+pSjrb76NAM8V9a05I9aBZOHztWy/UqcJdQYNsf59vrRKWnojAT9Y+GbIvoTBC++CPHqpDBhQ==", + "license": "BSD-3-Clause", + "dependencies": { + "side-channel": "^1.1.0" + }, + "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==", + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/raw-body": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-3.0.2.tgz", + "integrity": "sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA==", + "license": "MIT", + "dependencies": { + "bytes": "~3.1.2", + "http-errors": "~2.0.1", + "iconv-lite": "~0.7.0", + "unpipe": "~1.0.0" + }, + "engines": { + "node": ">= 0.10" + } + }, + "node_modules/router": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/router/-/router-2.2.0.tgz", + "integrity": "sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==", + "license": "MIT", + "dependencies": { + "debug": "^4.4.0", + "depd": "^2.0.0", + "is-promise": "^4.0.0", + "parseurl": "^1.3.3", + "path-to-regexp": "^8.0.0" + }, + "engines": { + "node": ">= 18" + } + }, + "node_modules/safer-buffer": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", + "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", + "license": "MIT" + }, + "node_modules/send": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/send/-/send-1.2.1.tgz", + "integrity": "sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ==", + "license": "MIT", + "dependencies": { + "debug": "^4.4.3", + "encodeurl": "^2.0.0", + "escape-html": "^1.0.3", + "etag": "^1.8.1", + "fresh": "^2.0.0", + "http-errors": "^2.0.1", + "mime-types": "^3.0.2", + "ms": "^2.1.3", + "on-finished": "^2.4.1", + "range-parser": "^1.2.1", + "statuses": "^2.0.2" + }, + "engines": { + "node": ">= 18" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" + } + }, + "node_modules/serve-static": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-2.2.1.tgz", + "integrity": "sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw==", + "license": "MIT", + "dependencies": { + "encodeurl": "^2.0.0", + "escape-html": "^1.0.3", + "parseurl": "^1.3.3", + "send": "^1.2.0" + }, + "engines": { + "node": ">= 18" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" + } + }, + "node_modules/setprototypeof": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", + "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==", + "license": "ISC" + }, + "node_modules/side-channel": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz", + "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==", + "license": "MIT", + "dependencies": { + "es-errors": "^1.3.0", + "object-inspect": "^1.13.3", + "side-channel-list": "^1.0.0", + "side-channel-map": "^1.0.1", + "side-channel-weakmap": "^1.0.2" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/side-channel-list": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz", + "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==", + "license": "MIT", + "dependencies": { + "es-errors": "^1.3.0", + "object-inspect": "^1.13.3" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/side-channel-map": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz", + "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==", + "license": "MIT", + "dependencies": { + "call-bound": "^1.0.2", + "es-errors": "^1.3.0", + "get-intrinsic": "^1.2.5", + "object-inspect": "^1.13.3" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/side-channel-weakmap": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz", + "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==", + "license": "MIT", + "dependencies": { + "call-bound": "^1.0.2", + "es-errors": "^1.3.0", + "get-intrinsic": "^1.2.5", + "object-inspect": "^1.13.3", + "side-channel-map": "^1.0.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/statuses": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz", + "integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==", + "license": "MIT", + "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==", + "license": "MIT", + "engines": { + "node": ">=0.6" + } + }, + "node_modules/type-is": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/type-is/-/type-is-2.0.1.tgz", + "integrity": "sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw==", + "license": "MIT", + "dependencies": { + "content-type": "^1.0.5", + "media-typer": "^1.1.0", + "mime-types": "^3.0.0" + }, + "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==", + "license": "MIT", + "engines": { + "node": ">= 0.8" + } + }, + "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==", + "license": "MIT", + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/wrappy": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", + "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", + "license": "ISC" + } + } +} diff --git a/chat-app/backend/package.json b/chat-app/backend/package.json new file mode 100644 index 0000000..3543a00 --- /dev/null +++ b/chat-app/backend/package.json @@ -0,0 +1,16 @@ +{ + "name": "backend", + "version": "1.0.0", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "keywords": [], + "author": "", + "license": "ISC", + "description": "", + "dependencies": { + "cors": "^2.8.6", + "express": "^5.2.1" + } +} diff --git a/chat-app/backend/server.js b/chat-app/backend/server.js index 1aaac6f..e350aa1 100644 --- a/chat-app/backend/server.js +++ b/chat-app/backend/server.js @@ -1,9 +1,11 @@ const express = require("express"); +const cors = require("cors"); + const app = express(); const PORT = 3000; app.use(express.json()); - +app.use(cors()); let messages = []; app.get("/messages", (req, res) => { From f97c7c818bba370343e26957169eb518a631eba0 Mon Sep 17 00:00:00 2001 From: Ebrahim Beiaty Date: Thu, 26 Mar 2026 22:40:54 +0000 Subject: [PATCH 05/21] add username, timestamp --- chat-app/frontend/index.html | 6 ++++++ chat-app/frontend/script.js | 7 +++++-- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/chat-app/frontend/index.html b/chat-app/frontend/index.html index 4c7b444..88652d0 100644 --- a/chat-app/frontend/index.html +++ b/chat-app/frontend/index.html @@ -9,6 +9,12 @@
        + { const li = document.createElement("li"); - li.textContent = `${msg.username}: ${msg.text}`; + li.textContent = `${msg.username} (${msg.timeStamp}): ${msg.text}`; messagesList.appendChild(li); }); } @@ -21,8 +22,9 @@ form.addEventListener("submit", async (e) => { e.preventDefault(); const newMessage = { - username: "User", + username: usernameInput.value, text: input.value, + timeStamp: new Date().toLocaleTimeString(), }; await fetch(`${BACKEND_URL}/messages`, { @@ -34,5 +36,6 @@ form.addEventListener("submit", async (e) => { }); input.value = ""; + usernameInput.value = ""; loadMessages(); }); From 86f319781943193bc39b3362dcccd15c3342eacd Mon Sep 17 00:00:00 2001 From: Ebrahim Beiaty Date: Fri, 27 Mar 2026 15:27:07 +0000 Subject: [PATCH 06/21] add refresh every 2 sec --- chat-app/backend/package.json | 1 + chat-app/backend/server.js | 4 ++-- chat-app/frontend/script.js | 3 +++ 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/chat-app/backend/package.json b/chat-app/backend/package.json index 3543a00..4bcf7ec 100644 --- a/chat-app/backend/package.json +++ b/chat-app/backend/package.json @@ -2,6 +2,7 @@ "name": "backend", "version": "1.0.0", "main": "index.js", + "type": "module", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, diff --git a/chat-app/backend/server.js b/chat-app/backend/server.js index e350aa1..daadb9e 100644 --- a/chat-app/backend/server.js +++ b/chat-app/backend/server.js @@ -1,5 +1,5 @@ -const express = require("express"); -const cors = require("cors"); +import express from "express"; +import cors from "cors"; const app = express(); const PORT = 3000; diff --git a/chat-app/frontend/script.js b/chat-app/frontend/script.js index 667f66e..3426c91 100644 --- a/chat-app/frontend/script.js +++ b/chat-app/frontend/script.js @@ -39,3 +39,6 @@ form.addEventListener("submit", async (e) => { usernameInput.value = ""; loadMessages(); }); + +// Refresh messages every 2 seconds +setInterval(loadMessages, 2000); From f936ce3e491f12101fc1f26816f9dadda5035b6b Mon Sep 17 00:00:00 2001 From: Ebrahim Beiaty Date: Fri, 27 Mar 2026 16:27:56 +0000 Subject: [PATCH 07/21] edit the chat box --- chat-app/frontend/index.html | 2 + chat-app/frontend/script.js | 13 ++++- chat-app/frontend/styles.css | 92 ++++++++++++++++++++++++++++++++++++ 3 files changed, 105 insertions(+), 2 deletions(-) diff --git a/chat-app/frontend/index.html b/chat-app/frontend/index.html index 88652d0..551fc0a 100644 --- a/chat-app/frontend/index.html +++ b/chat-app/frontend/index.html @@ -7,6 +7,7 @@ Chat App +
          +
          diff --git a/chat-app/frontend/script.js b/chat-app/frontend/script.js index 3426c91..a3d374f 100644 --- a/chat-app/frontend/script.js +++ b/chat-app/frontend/script.js @@ -12,7 +12,12 @@ async function loadMessages() { messagesList.innerHTML = ""; messages.forEach((msg) => { const li = document.createElement("li"); - li.textContent = `${msg.username} (${msg.timeStamp}): ${msg.text}`; + li.innerHTML = ` +
          + ${msg.username} + ${msg.timeStamp} +
          +
          ${msg.text}
          `; messagesList.appendChild(li); }); } @@ -24,7 +29,11 @@ form.addEventListener("submit", async (e) => { const newMessage = { username: usernameInput.value, text: input.value, - timeStamp: new Date().toLocaleTimeString(), + timeStamp: new Date().toLocaleTimeString("en-US", { + hour: "numeric", + minute: "2-digit", + hour12: true, + }), }; await fetch(`${BACKEND_URL}/messages`, { diff --git a/chat-app/frontend/styles.css b/chat-app/frontend/styles.css index e69de29..ea5e954 100644 --- a/chat-app/frontend/styles.css +++ b/chat-app/frontend/styles.css @@ -0,0 +1,92 @@ +body { + font-family: Arial, sans-serif; + background: #f2f2f2; + display: flex; + justify-content: center; + padding: 40px; +} + +.chat-container { + width: 400px; + background: white; + border-radius: 10px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + display: flex; + flex-direction: column; + overflow: hidden; +} + +#messages-list { + list-style: none; + margin: 0; + padding: 14px; +} + +#messages-list li { + background: #eaeeef; + padding: 10px 14px; + margin-bottom: 12px; + border-radius: 10px; + max-width: 80%; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); +} + +.message-header { + display: flex; + justify-content: space-between; + margin-bottom: 6px; + font-size: 0.85rem; + color: #555; +} + +.username { + font-weight: bold; + color: #333; +} + +.username::before { + content: "💬 "; +} + +.timestamp { + font-size: 0.75rem; + color: #888; + align-items: flex-end; +} + +.message-text { + font-size: 1rem; + color: #222; +} + +form { + display: flex; + gap: 10px; + padding: 15px; + background: #fff; + border-top: 1px solid #ddd; +} +form input { + flex: 1; + min-width: 0; /* IMPORTANT: prevents overflow */ +} + +input { + flex: 1; + padding: 10px; + border-radius: 6px; + border: 1px solid #ccc; +} + +button { + padding: 10px 15px; + border: none; + background: #0078ff; + color: white; + border-radius: 6px; + cursor: pointer; +} + +button:hover { + background: #005fcc; +} From d00b6d89dca08e10d7661f3bc4b6c5b798965887 Mon Sep 17 00:00:00 2001 From: Ebrahim Beiaty Date: Fri, 27 Mar 2026 17:32:08 +0000 Subject: [PATCH 08/21] edit server, add port 3000 --- chat-app/backend/server.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/chat-app/backend/server.js b/chat-app/backend/server.js index daadb9e..deaed8b 100644 --- a/chat-app/backend/server.js +++ b/chat-app/backend/server.js @@ -2,8 +2,7 @@ import express from "express"; import cors from "cors"; const app = express(); -const PORT = 3000; - +const PORT = process.env.PORT || 3000; app.use(express.json()); app.use(cors()); let messages = []; From 4199ed4071d50f6801ea44904415b1e6ce18c05f Mon Sep 17 00:00:00 2001 From: Ebrahim Beiaty Date: Fri, 27 Mar 2026 17:55:10 +0000 Subject: [PATCH 09/21] edited the port --- chat-app/backend/server.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/chat-app/backend/server.js b/chat-app/backend/server.js index deaed8b..311a9c2 100644 --- a/chat-app/backend/server.js +++ b/chat-app/backend/server.js @@ -2,7 +2,7 @@ import express from "express"; import cors from "cors"; const app = express(); -const PORT = process.env.PORT || 3000; +const PORT = 3000; app.use(express.json()); app.use(cors()); let messages = []; From 8bd6b9011410dddd2061d2fd4ee34a3c6c963f6d Mon Sep 17 00:00:00 2001 From: Ebrahim Beiaty Date: Fri, 27 Mar 2026 18:23:32 +0000 Subject: [PATCH 10/21] edit the url to connect to backend --- chat-app/frontend/script.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/chat-app/frontend/script.js b/chat-app/frontend/script.js index a3d374f..891188d 100644 --- a/chat-app/frontend/script.js +++ b/chat-app/frontend/script.js @@ -3,7 +3,8 @@ const form = document.getElementById("message-form"); const input = document.getElementById("message-input"); const usernameInput = document.getElementById("username-input"); -const BACKEND_URL = "http://127.0.0.1:3000"; +const BACKEND_URL = + "https://xwc7hmpmk5kvt9ktptcvuuke.hosting.codeyourfuture.io"; // Fetch and display messages async function loadMessages() { From 571204eadb2baba716a8b2df97c8b583a4289e39 Mon Sep 17 00:00:00 2001 From: Ebrahim Beiaty Date: Fri, 27 Mar 2026 18:31:22 +0000 Subject: [PATCH 11/21] add readme --- README.md | 72 +++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 70 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 2d6b50c..fb887bf 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,71 @@ -# Coursework +# [Chat App](https://uretqju43s9008b1nyjk586m.hosting.codeyourfuture.io) -Exercises to practice and solidify your understanding of the Decomposition module of the Software Development Course. +A full-stack chat application built with: + +- Frontend: HTML, CSS, JavaScript +- Backend: Node.js, Express + +Users can send messages, see existing messages, and view updates from others. + +## Features + +- Send a message with username and text +- Fetch and display all chat messages +- Auto-refresh messages every 2 seconds +- Timestamp shown on each message + +## Project Structure + +```text +chat-app/ + backend/ + package.json + server.js + frontend/ + index.html + script.js + styles.css +``` + +## Run Locally + +### 1. Start the backend + +From the backend folder, install dependencies and run the server: + +```bash +cd chat-app/backend +npm install +node server.js +``` + +Backend runs on http://localhost:3000 + +### 2. Start the frontend + +Open chat-app/frontend/index.html in your browser. + +If you want to use local backend instead of deployed backend, set BACKEND_URL in script.js to: + +http://127.0.0.1:3000 + +## API + +- GET /messages: returns all messages +- POST /messages: adds a new message + +Example message object: + +```json +{ + "username": "Alex", + "text": "Hello everyone", + "timeStamp": "3:45 PM" +} +``` + +## Learning Goals + +- Build a frontend and backend that communicate using HTTP +- Practice working with JSON data +- Understand simple full-stack deployment flow From 5fbad1862882e912350e6ffa539ac00d927915d4 Mon Sep 17 00:00:00 2001 From: Ebrahim Beiati-Asl Date: Fri, 27 Mar 2026 19:21:47 +0000 Subject: [PATCH 12/21] Delete README.md --- README.md | 71 ------------------------------------------------------- 1 file changed, 71 deletions(-) delete mode 100644 README.md diff --git a/README.md b/README.md deleted file mode 100644 index fb887bf..0000000 --- a/README.md +++ /dev/null @@ -1,71 +0,0 @@ -# [Chat App](https://uretqju43s9008b1nyjk586m.hosting.codeyourfuture.io) - -A full-stack chat application built with: - -- Frontend: HTML, CSS, JavaScript -- Backend: Node.js, Express - -Users can send messages, see existing messages, and view updates from others. - -## Features - -- Send a message with username and text -- Fetch and display all chat messages -- Auto-refresh messages every 2 seconds -- Timestamp shown on each message - -## Project Structure - -```text -chat-app/ - backend/ - package.json - server.js - frontend/ - index.html - script.js - styles.css -``` - -## Run Locally - -### 1. Start the backend - -From the backend folder, install dependencies and run the server: - -```bash -cd chat-app/backend -npm install -node server.js -``` - -Backend runs on http://localhost:3000 - -### 2. Start the frontend - -Open chat-app/frontend/index.html in your browser. - -If you want to use local backend instead of deployed backend, set BACKEND_URL in script.js to: - -http://127.0.0.1:3000 - -## API - -- GET /messages: returns all messages -- POST /messages: adds a new message - -Example message object: - -```json -{ - "username": "Alex", - "text": "Hello everyone", - "timeStamp": "3:45 PM" -} -``` - -## Learning Goals - -- Build a frontend and backend that communicate using HTTP -- Practice working with JSON data -- Understand simple full-stack deployment flow From b95260cec69150839f06cb9afdb2787aafe22acc Mon Sep 17 00:00:00 2001 From: Ebrahim Beiati-Asl Date: Fri, 27 Mar 2026 19:24:06 +0000 Subject: [PATCH 13/21] Delete .gitignore --- .gitignore | 3 --- 1 file changed, 3 deletions(-) delete mode 100644 .gitignore diff --git a/.gitignore b/.gitignore deleted file mode 100644 index 9c97bbd..0000000 --- a/.gitignore +++ /dev/null @@ -1,3 +0,0 @@ -node_modules -dist -.env From 18087d6e519622be38ed605eef76d59be2ce2a08 Mon Sep 17 00:00:00 2001 From: Ebrahim Beiaty Date: Fri, 27 Mar 2026 19:32:26 +0000 Subject: [PATCH 14/21] delete readme --- chat-app/README.md | 57 +++++++++++++++++++++++++++++----------------- 1 file changed, 36 insertions(+), 21 deletions(-) diff --git a/chat-app/README.md b/chat-app/README.md index d26b1a1..ec283f6 100644 --- a/chat-app/README.md +++ b/chat-app/README.md @@ -1,34 +1,49 @@ -# Write and Deploy Chat Application Frontend and Backend +# [Chat App](https://uretqju43s9008b1nyjk586m.hosting.codeyourfuture.io) -### Link to the coursework +A full-stack chat application built with: -https://sdc.codeyourfuture.io/decomposition/sprints/2/prep/ +- Frontend: HTML, CSS, JavaScript +- Backend: Node.js, Express -You must complete and deploy a chat application. You have two weeks to complete this. +Users can send messages, see existing messages, and view updates from others. -It must support at least the following requirements: -* As a user, I can send add a message to the chat. -* As a user, when I open the chat I see the messages that have been sent by any user. -* As a user, when someone sends a message, it gets added to what I see. +## Project Structure -It must also support at least one additional feature. +```text +chat-app/ + backend/ + package.json + server.js + frontend/ + index.html + script.js + styles.css +``` -### Why are we doing this? +## Run Locally -Learning about deploying multiple pieces of software that interact. +### 1. Start the backend -Designing and implementing working software that users can use. +From the backend folder, install dependencies and run the server: -Exploring and understanding different ways of sending information between a client and server. +```bash +cd chat-app/backend +npm install +node server.js +``` -### Maximum time in hours +Backend runs on http://localhost:3000 -16 +### 2. Start the frontend -### How to submit +Open chat-app/frontend/index.html in your browser. -* Fork the Module-Decomposition repository -* Develop and deploy your chat app -* Create a pull request back into the original Module-Decomposition repo, including: - * A link to the deployed frontend on the CYF hosting environment - * A link to the deployed backend on the CYF hosting environment +If you want to use local backend instead of deployed backend, set BACKEND_URL in script.js to: + +http://127.0.0.1:3000 + +## Learning Goals + +- Build a frontend and backend that communicate using HTTP +- Practice working with JSON data +- Understand simple full-stack deployment flow From 71323d9578bd2a67bc1aa74bab0de43ff3c09a4e Mon Sep 17 00:00:00 2001 From: Ebrahim Beiaty Date: Fri, 27 Mar 2026 19:35:12 +0000 Subject: [PATCH 15/21] add gitignore --- .gitignore | 1 + 1 file changed, 1 insertion(+) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..b512c09 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules \ No newline at end of file From d78df6d74bf07173f328a5fd4413b75d64200b40 Mon Sep 17 00:00:00 2001 From: Ebrahim Beiati-Asl Date: Fri, 27 Mar 2026 19:45:51 +0000 Subject: [PATCH 16/21] Delete chat-app/README.md --- chat-app/README.md | 49 ---------------------------------------------- 1 file changed, 49 deletions(-) delete mode 100644 chat-app/README.md diff --git a/chat-app/README.md b/chat-app/README.md deleted file mode 100644 index ec283f6..0000000 --- a/chat-app/README.md +++ /dev/null @@ -1,49 +0,0 @@ -# [Chat App](https://uretqju43s9008b1nyjk586m.hosting.codeyourfuture.io) - -A full-stack chat application built with: - -- Frontend: HTML, CSS, JavaScript -- Backend: Node.js, Express - -Users can send messages, see existing messages, and view updates from others. - -## Project Structure - -```text -chat-app/ - backend/ - package.json - server.js - frontend/ - index.html - script.js - styles.css -``` - -## Run Locally - -### 1. Start the backend - -From the backend folder, install dependencies and run the server: - -```bash -cd chat-app/backend -npm install -node server.js -``` - -Backend runs on http://localhost:3000 - -### 2. Start the frontend - -Open chat-app/frontend/index.html in your browser. - -If you want to use local backend instead of deployed backend, set BACKEND_URL in script.js to: - -http://127.0.0.1:3000 - -## Learning Goals - -- Build a frontend and backend that communicate using HTTP -- Practice working with JSON data -- Understand simple full-stack deployment flow From 43cb5d116cb2f1f92d7c1c03d9c49b4e326e6090 Mon Sep 17 00:00:00 2001 From: Ebrahim Beiati-Asl Date: Fri, 27 Mar 2026 19:48:26 +0000 Subject: [PATCH 17/21] Delete .gitignore --- .gitignore | 1 - 1 file changed, 1 deletion(-) delete mode 100644 .gitignore diff --git a/.gitignore b/.gitignore deleted file mode 100644 index b512c09..0000000 --- a/.gitignore +++ /dev/null @@ -1 +0,0 @@ -node_modules \ No newline at end of file From 94db5fa9bcdd010ffd7efc4728402f3b3ffd10b0 Mon Sep 17 00:00:00 2001 From: Ebrahim Beiaty Date: Fri, 27 Mar 2026 20:06:48 +0000 Subject: [PATCH 18/21] edit gitignore --- .gitignore | 1 + 1 file changed, 1 insertion(+) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..b512c09 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules \ No newline at end of file From fd78f762bf600a46575cdb34d566c65b936a47f0 Mon Sep 17 00:00:00 2001 From: Ebrahim Beiaty Date: Sat, 28 Mar 2026 14:58:04 +0000 Subject: [PATCH 19/21] edit readme.md --- readme.md | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 readme.md diff --git a/readme.md b/readme.md new file mode 100644 index 0000000..2d6b50c --- /dev/null +++ b/readme.md @@ -0,0 +1,3 @@ +# Coursework + +Exercises to practice and solidify your understanding of the Decomposition module of the Software Development Course. From 7cecc844f5bc729aa5be759f87d227ab6defd29f Mon Sep 17 00:00:00 2001 From: Ebrahim Beiaty Date: Sat, 28 Mar 2026 14:59:23 +0000 Subject: [PATCH 20/21] move gitignor inside chat-app --- .gitignore => chat-app/.gitignore | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename .gitignore => chat-app/.gitignore (100%) diff --git a/.gitignore b/chat-app/.gitignore similarity index 100% rename from .gitignore rename to chat-app/.gitignore From c977d8d9709cae268e04ce6a7732a7498dd84d69 Mon Sep 17 00:00:00 2001 From: Ebrahim Beiaty Date: Sat, 28 Mar 2026 15:02:53 +0000 Subject: [PATCH 21/21] fixup --- readme.md => README.md | 0 chat-app/README.md | 34 ++++++++++++++++++++++++++++++++++ 2 files changed, 34 insertions(+) rename readme.md => README.md (100%) create mode 100644 chat-app/README.md diff --git a/readme.md b/README.md similarity index 100% rename from readme.md rename to README.md diff --git a/chat-app/README.md b/chat-app/README.md new file mode 100644 index 0000000..d26b1a1 --- /dev/null +++ b/chat-app/README.md @@ -0,0 +1,34 @@ +# Write and Deploy Chat Application Frontend and Backend + +### Link to the coursework + +https://sdc.codeyourfuture.io/decomposition/sprints/2/prep/ + +You must complete and deploy a chat application. You have two weeks to complete this. + +It must support at least the following requirements: +* As a user, I can send add a message to the chat. +* As a user, when I open the chat I see the messages that have been sent by any user. +* As a user, when someone sends a message, it gets added to what I see. + +It must also support at least one additional feature. + +### Why are we doing this? + +Learning about deploying multiple pieces of software that interact. + +Designing and implementing working software that users can use. + +Exploring and understanding different ways of sending information between a client and server. + +### Maximum time in hours + +16 + +### How to submit + +* Fork the Module-Decomposition repository +* Develop and deploy your chat app +* Create a pull request back into the original Module-Decomposition repo, including: + * A link to the deployed frontend on the CYF hosting environment + * A link to the deployed backend on the CYF hosting environment