react app

frontend/src/App.css

@@ -0,0 +1,71 @@
+/* App.css */
+
+.App {
+  text-align: center;
+  margin-top: 50px;
+}
+
+h1 {
+  font-size: 24px;
+  margin-bottom: 20px;
+}
+
+input {
+  padding: 10px;
+  font-size: 16px;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  width: 200px;
+  margin-right: 10px;
+}
+
+button {
+  padding: 10px 20px;
+  font-size: 16px;
+  background-color: #4caf50;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #45a049;
+}
+
+hr {
+  margin-top: 30px;
+  margin-bottom: 30px;
+  border: 0;
+  border-top: 1px solid #ccc;
+}
+
+h2 {
+  font-size: 20px;
+  margin-bottom: 10px;
+}
+
+table {
+  width: 400px;
+  border-collapse: collapse;
+  margin: 0 auto;
+}
+
+th,
+td {
+  padding: 8px;
+  text-align: left;
+}
+
+th {
+  background-color: #4caf50;
+  color: white;
+}
+
+tr:nth-child(even) {
+  background-color: #f2f2f2;
+}
+
+tr:hover {
+  background-color: #ddd;
+}

frontend/src/App.js

@@ -0,0 +1,97 @@
+import "./App.css";
+import axios from "axios";
+import React, { useState, useEffect } from "react";
+
+const URL = "http://localhost:3000";
+function App() {
+  const [data, setData] = useState([]);
+  const [inputValue, setInputValue] = useState("");
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  const fetchData = async () => {
+    try {
+      const response = await axios.get(URL + "/user");
+      console.log(response.data);
+      setData(response.data);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const handleChange = (e) => {
+    setInputValue(e.target.value);
+  };
+
+  const postData = async () => {
+    try {
+      const response = await axios.post(URL + "/user", { data: inputValue });
+      console.log(response.data);
+      fetchData(); // Fetch data again after posting
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const dbinit = async () => {
+    try {
+      const response = await axios.post(URL + "/dbinit");
+      console.log(response.data);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const tbinit = async () => {
+    try {
+      const response = await axios.post(URL + "/tbinit");
+      console.log(response.data);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  return (
+    <div className="App">
+      <h1>User Submit Form</h1>
+      <input name="input-parameter" onChange={handleChange} />
+      <br />
+      <br />
+      <button onClick={postData}>Submit</button> <br />
+      <br />
+      <button style={{ backgroundColor: "red" }} onClick={dbinit}>
+        DB Init
+      </button>
+      <br />
+      <br />
+      <button style={{ backgroundColor: "orange" }} onClick={tbinit}>
+        Table Init
+      </button>
+      <br />
+      <hr />
+      <h2>Users List</h2>
+      <center>
+        <table>
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>Name</th>
+            </tr>
+          </thead>
+          <tbody>
+            {data.map((user) => (
+              <tr key={user.id}>
+                <td>{user.id}</td>
+                <td>{user.name}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </center>
+    </div>
+  );
+}
+
+export default App;

frontend/src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

frontend/src/index.js

@@ -0,0 +1,11 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);