Initial commit - PromptTech

frontend/src/index.js

@@ -0,0 +1,87 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
+
+// Error boundary component
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error("React Error Boundary caught an error:", error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            minHeight: "100vh",
+            padding: "20px",
+            fontFamily: "system-ui, -apple-system, sans-serif",
+          }}
+        >
+          <h1 style={{ color: "#ef4444", marginBottom: "16px" }}>
+            Something went wrong
+          </h1>
+          <p style={{ color: "#6b7280", marginBottom: "24px" }}>
+            The application encountered an error. Please refresh the page.
+          </p>
+          <button
+            onClick={() => window.location.reload()}
+            style={{
+              padding: "12px 24px",
+              backgroundColor: "#3b82f6",
+              color: "white",
+              border: "none",
+              borderRadius: "6px",
+              cursor: "pointer",
+              fontSize: "16px",
+            }}
+          >
+            Reload Page
+          </button>
+          {process.env.NODE_ENV === "development" && this.state.error && (
+            <details style={{ marginTop: "24px", maxWidth: "600px" }}>
+              <summary style={{ cursor: "pointer", color: "#6b7280" }}>
+                Error Details
+              </summary>
+              <pre
+                style={{
+                  marginTop: "12px",
+                  padding: "16px",
+                  backgroundColor: "#f3f4f6",
+                  borderRadius: "6px",
+                  overflow: "auto",
+                  fontSize: "12px",
+                }}
+              >
+                {this.state.error.toString()}
+              </pre>
+            </details>
+          )}
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(
+  <ErrorBoundary>
+    <App />
+  </ErrorBoundary>
+);