Created Feedback Submission System

backend/.gitignore

@@ -1,4 +1,4 @@
 node_modules
 dist
-
+.env
 package-lock.json

backend/config/api.info.js

@@ -0,0 +1,16 @@
+module.exports = {
+  message: "Welcome to the feedback API!",
+  version: "1.0.0",
+  endpoints: {
+    createFeedback: {
+      path: "/create",
+      method: "POST",
+      parameters: {
+        name: "string (required)",
+        email: "string (required)",
+        message: "string (required)",
+      },
+    },
+  },
+  documentation: "https://api-docs-url.com",
+};

backend/controller/feedback.controller.js

@@ -0,0 +1,47 @@
+const { z } = require("zod");
+const Feedback = require("../models/feedback.model");
+
+// Define the Zod schema for feedback validation
+const feedbackSchema = z.object({
+  name: z.string().min(2).max(100),
+  email: z.string().email(),
+  feedback: z.string().min(10),
+});
+
+async function createFeedback(req, res) {
+  try {
+    const validationResult = feedbackSchema.safeParse(req.body);
+
+    if (!validationResult.success) {
+      console.error("Validation error:", validationResult.error.errors);
+      return res.status(400).json({
+        success: false,
+        message: "Validation failed",
+        errors: validationResult.error.errors,
+      });
+    }
+
+    const feedback = await Feedback.create(validationResult.data);
+
+    res.status(201).json({
+      success: true,
+      message: "Feedback created successfully",
+      data: feedback,
+    });
+  } catch (error) {
+    console.error("Error creating feedback:", error);
+    res.status(500).json({
+      success: false,
+      message: "An error occurred while creating the feedback",
+    });
+  }
+}
+
+module.exports = createFeedback;
+
+//dummy api call for feedback
+// {
+//     "name": "John Doe",
+//     "email": "[email protected]",
+//     "feedback": "This is a dummy feedback"
+// }

backend/models/feedback.model.js

@@ -0,0 +1,41 @@
+const mongoose = require("mongoose");
+const Schema = mongoose.Schema;
+
+const feedbackSchema = new Schema(
+  {
+    name: {
+      type: String,
+      required: true,
+      trim: true,
+      maxlength: [100, "Name cannot be more than 100 characters"],
+    },
+    email: {
+      type: String,
+      required: true,
+      trim: true,
+      lowercase: true,
+      maxlength: [255, "Email cannot be more than 255 characters"],
+      match: [
+        /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/,
+        "Please fill a valid email address",
+      ],
+    },
+    feedback: {
+      type: String,
+      required: true,
+      trim: true,
+      maxlength: [1000, "Feedback cannot be more than 1000 characters"],
+    },
+    createdAt: {
+      type: Date,
+      default: Date.now,
+    },
+  },
+  {
+    timestamps: true,
+  }
+);
+
+const Feedback = mongoose.model("Feedback", feedbackSchema);
+
+module.exports = Feedback;

backend/routes/feedbackRouter.js

@@ -0,0 +1,19 @@
+const express = require("express");
+const Feedback = require("../models/feedback.model");
+const createFeedback = require("../controller/feedback.controller");
+
+const router = express.Router();
+
+router.post("/create", createFeedback);
+
+const apiInfo = require("../config/api.info");
+
+router.get("/", (req, res) => {
+  try {
+    res.json(apiInfo);
+  } catch (error) {
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+module.exports = router;

backend/routes/index.js

@@ -3,6 +3,18 @@ const Reservation = require("../models/reservation.model");
 
 const router = express.Router();
 
+let feedbackRouter;
+try {
+  feedbackRouter = require("./feedbackRouter");
+} catch (error) {
+  console.error("Error loading feedbackRouter:", error);
+  feedbackRouter = (req, res, next) => {
+    res
+      .status(500)
+      .json({ error: "Feedback functionality is currently unavailable" });
+  };
+}
+router.use("/feedback", feedbackRouter);
 router.use("/reservation", require("./reservationRouter"));
 router.get("/", (req, res) => {
   res.json({

frontend/.gitignore

@@ -22,3 +22,10 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# Frontend build
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.env

frontend/src/components/ui/FeedbackForm.jsx

@@ -13,16 +13,37 @@ const FeedbackForm = () => {
     hidden: { opacity: 0, y: 50 },
     visible: { opacity: 1, y: 0, transition: { duration: 0.5 } },
   };
-
+  const API_URL = import.meta.env.VITE_BACKEND_URI || "http://localhost:3000/";
   const [name, setName] = useState("");
   const [email, setEmail] = useState("");
   const [feedback, setFeedback] = useState("");
   const [submitted, setSubmitted] = useState(false);
+  const [error, setError] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
 
-  const handleSubmit = (e) => {
+  const handleSubmit = async (e) => {
     e.preventDefault();
+    setIsLoading(true);
     console.log(`Name: ${name}, Email: ${email}, Feedback: ${feedback}`);
+    const response = await fetch(`${API_URL}/feedback/create`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ name, email, feedback }),
+    });
+    const data = await response.json();
+    if (!response.ok) {
+      const errorMessage =
+        data.message || "An error occurred while submitting feedback.";
+      setError(errorMessage);
+      console.error("Feedback submission failed:", errorMessage);
+      return;
+    }
+
     setSubmitted(true);
+    setIsLoading(false);
+    setError(null);
     setTimeout(() => {
       setName("");
       setEmail("");
@@ -113,7 +134,7 @@ const FeedbackForm = () => {
                   type="submit"
                   className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-[#004D43] hover:bg-[#003d35] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#004D43]"
                 >
-                  Submit Feedback
+                  {isLoading ? "Submitting..." : "Submit Feedback"}
                 </button>
               </div>
             </form>
@@ -126,6 +147,15 @@ const FeedbackForm = () => {
                 Thank you for your feedback!
               </motion.div>
             )}
+            {error && (
+              <motion.div
+                initial={{ opacity: 0, y: -10 }}
+                animate={{ opacity: 1, y: 0 }}
+                className="mt-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded"
+              >
+                {error}
+              </motion.div>
+            )}
           </div>
         </motion.div>
       </div>