feat: init

frontend/src/App.js

@@ -0,0 +1,49 @@
+import React, { useState, useEffect } from 'react';
+import './App.css';
+import { getServices } from './api';
+import ServiceCard from './components/ServiceCard';
+
+function App() {
+  const [services, setServices] = useState([]);
+
+  async function fetchServices() {
+    const fetchedServices = await getServices();
+    setServices(fetchedServices);
+  }
+
+  useEffect(() => {
+    fetchServices();
+
+    const ws = new WebSocket('ws://localhost:3001/api/events');
+
+    ws.onmessage = (event) => {
+      const message = JSON.parse(event.data);
+      if (message.type === 'container' && (message.action === 'start' || message.action === 'stop')) {
+        fetchServices();
+      }
+    };
+
+    ws.onclose = () => {
+      // Optional: handle reconnection logic here
+    };
+
+    return () => {
+      ws.close();
+    };
+  }, []);
+
+  return (
+    <div className="App">
+      <header className="App-header">
+        <h1>Docker Service Display</h1>
+      </header>
+      <main className="service-grid">
+        {services.map(service => (
+          <ServiceCard key={service.id} service={service} />
+        ))}
+      </main>
+    </div>
+  );
+}
+
+export default App;