From 16962c89ee23fea9f6b7333ae875284baa42dd99 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cau=C3=AA=20Faleiros?= <cauefaleiros@gmail.com>
Date: Wed, 6 May 2026 16:12:05 -0300
Subject: [PATCH] feat: implement SSE real-time frontend updates on new payload
 reception

---
 backend/index.js          | 13 +++++++++++++
 src/components/Layout.tsx | 21 +++++++++++++++++++++
 2 files changed, 34 insertions(+)

diff --git a/backend/index.js b/backend/index.js
index aa12b77..c1a1de5 100644
--- a/backend/index.js
+++ b/backend/index.js
@@ -143,6 +143,12 @@ app.post('/api/data', authenticateAPIKey, async (req, res) => {
             }
             
             await client.query('COMMIT');
+            
+            // Broadcast update to all connected SSE clients
+            const broadcastMessage = `data: {"type": "update"}\n\n`;
+            for (const clientRes of sseClients) {
+                clientRes.write(broadcastMessage);
+            }
         } catch (error) {
             await client.query('ROLLBACK');
             console.error("Database insert error:", error);
@@ -152,6 +158,13 @@ app.post('/api/data', authenticateAPIKey, async (req, res) => {
     })();
 });
 
+app.listen(PORT, '0.0.0.0', () => {
+    console.log(`Nexstar Backend running at http://localhost:${PORT}`);
+    console.log(`Endpoint for n8n: POST http://localhost:${PORT}/api/data`);
+});      }
+    })();
+});
+
 app.listen(PORT, '0.0.0.0', () => {
     console.log(`Nexstar Backend running at http://localhost:${PORT}`);
     console.log(`Endpoint for n8n: POST http://localhost:${PORT}/api/data`);
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index baec7dd..5b9e0a7 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -36,6 +36,27 @@ const Layout = () => {
     };
 
     loadInitial();
+
+    // Set up SSE for real-time updates
+    const API_URL = import.meta.env.VITE_API_URL || '/api';
+    const sse = new EventSource(`${API_URL}/stream`);
+    
+    sse.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        if (data.type === 'update') {
+          fetchData().then(newData => {
+            setOrdersData(newData);
+          });
+        }
+      } catch (e) {
+        console.error("SSE parse error", e);
+      }
+    };
+
+    return () => {
+      sse.close();
+    };
   }, []);
 
   useEffect(() => {