feat: implement SSE real-time frontend updates on new payload reception

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`);

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(() => {