Add server and client prototype

package-lock.json

@@ -16,6 +16,7 @@
         "@types/node": "^16.18.126",
         "@types/react": "^19.1.2",
         "@types/react-dom": "^19.1.3",
+        "lowdb": "^7.0.1",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
         "react-scripts": "5.0.1",
@@ -11234,6 +11235,21 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/lowdb": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/lowdb/-/lowdb-7.0.1.tgz",
+      "integrity": "sha512-neJAj8GwF0e8EpycYIDFqEPcx9Qz4GUho20jWFR7YiFeXzF1YMLdxB36PypcTSPMA+4+LvgyMacYhlr18Zlymw==",
+      "license": "MIT",
+      "dependencies": {
+        "steno": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/typicode"
+      }
+    },
     "node_modules/lower-case": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
@@ -15297,6 +15313,18 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/steno": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/steno/-/steno-4.0.2.tgz",
+      "integrity": "sha512-yhPIQXjrlt1xv7dyPQg2P17URmXbuM5pdGkpiMB3RenprfiBlvK415Lctfe0eshk90oA7/tNq7WEiMK8RSP39A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/typicode"
+      }
+    },
     "node_modules/string_decoder": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",

package.json

@@ -11,6 +11,7 @@
     "@types/node": "^16.18.126",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.3",
+    "lowdb": "^7.0.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-scripts": "5.0.1",

server/file.json

@@ -0,0 +1,4 @@
+{
+  "foo": "bar",
+  "baz": 42
+}

server/server.js

@@ -0,0 +1,67 @@
+const { LowSync } = require('lowdb');
+const { JSONFileSync } = require('lowdb/node');
+
+const db = new LowSync(new JSONFileSync('file.json'), {})
+
+const { createServer } = require('node:http');
+
+const key = "c3dpZ2dpdHlzd29vdHkK";
+const reStoreWrite = new RegExp(`/write/${key}/?`)
+const reStoreRead = new RegExp(`/read/${key}/?`)
+
+const hostname = '127.0.0.1';
+const port = 4444;
+
+const server = createServer((req, res) => {
+    res.setHeader('Content-Type', 'text/plain');
+    res.setHeader( 'Access-Control-Allow-Origin','*');
+    res.setHeader( 'Access-Control-Allow-Methods','POST,GET');
+
+    res.setHeader('Access-Control-Allow-Origin', '*');
+    res.setHeader('Access-Control-Request-Method', '*');
+    res.setHeader('Access-Control-Allow-Methods', 'OPTIONS, GET');
+    res.setHeader('Access-Control-Allow-Headers', '*');
+
+    res.statusCode = 200;
+    if (req.method === "OPTIONS") {
+        res.statusCode = 200;
+        res.end();
+    }
+    if (req.method !== "POST") {
+        res.statusCode = 400;
+        res.end();
+    }
+
+    console.log("post coming to", req.url)
+    if (req.url.match(reStoreRead)) {
+        console.log("got store read request")
+        db.read();
+        res.end(JSON.stringify(db.data));
+    } else if (req.url.match(reStoreWrite)) {
+        console.log("got store write request")
+
+        let chunks = [];
+        req.on("data", function (chunk) {
+            chunks.push(chunk);
+        });
+        req.on("end", function () {
+            var result = JSON.parse(Buffer.concat(chunks));
+            res.end();
+            handleWrite(result);
+        });
+        console.log("listeners ready")
+    }
+    console.log("reply")
+});
+
+server.listen(port, () => {
+    console.log(`Server running at http://${hostname}:${port}/`);
+});
+
+const handleWrite = (json) => {
+    console.log("Handler handles", json);
+    db.data = json;
+    db.write()
+    //db.read()
+
+};

src/App.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import logo from './logo.svg';
 import './App.css';
 
+const key="c3dpZ2dpdHlzd29vdHkK"
+
 function App() {
   return (
     <div className="App">
@@ -12,14 +14,31 @@ function App() {
         </p>
         <a
           className="App-link"
-          href="https://reactjs.org"
+          onClick={async () => {
-          target="_blank"
+            const rawResponse = await fetch(`http://localhost:4444/write/${key}/`, {
-          rel="noopener noreferrer"
+              method: 'POST',
-        >
+              headers: {
-          Learn React
+              },
-        </a>
+              body: JSON.stringify({a: 1, b: 'Textual content'})
-      </header>
+            });
-    </div>
+            await rawResponse.text();
+          }}
+          >
+          Write
+          </a>
+        <a
+          className="App-link"
+          onClick={async () => {
+            const rawResponse = await fetch(`http://localhost:4444/read/${key}/`, {
+              method: 'POST'
+            });
+            await rawResponse.text();
+          }}
+          >
+          Read
+          </a>
+          </header>
+          </div>
   );
 }