Commit With Frontend and Backend in MERN

frontend/src/Page3.js

@@ -0,0 +1,51 @@
+import React, { useState } from "react";
+import './Page3.css'
+
+const Page3 = () => {
+  const [meetingDetails, setMeetingDetails] = useState(null);
+
+  // Handle form submission
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+
+    try {
+      const response = await fetch('/create-meeting', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+
+      const data = await response.json();
+      setMeetingDetails({
+        id: data.id,
+        join_url: data.join_url,
+      });
+    } catch (error) {
+      console.error("Error creating meeting:", error);
+    }
+  };
+
+  return (
+    <div>
+      <h1>Generate Zoom Meeting</h1>
+      <form id="meetingForm" onSubmit={handleSubmit}>
+        <button type="submit">Create Meeting</button>
+      </form>
+
+      {meetingDetails && (
+        <div id="meetingDetails">
+          <p>Meeting ID: {meetingDetails.id}</p>
+          <p>
+            Join URL:{" "}
+            <a href={meetingDetails.join_url} target="_blank" rel="noopener noreferrer">
+              {meetingDetails.join_url}
+            </a>
+          </p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Page3;