Added Backend Route for Café Reservation Form and .env Configuration

backend/controller/reservation.controller.js

@@ -0,0 +1,35 @@
+const { z } = require("zod");
+const Reservation = require("../models/reservation.model");
+
+// Define the Zod schema for reservation validation
+const reservationSchema = z.object({
+  Guests: z.string(),
+  Date: z.string(),
+  Time: z.string(),
+});
+
+async function createReservation(req, res) {
+  try {
+    // Validate the request body against the schema
+    const validationResult = reservationSchema.safeParse(req.body);
+
+    if (!validationResult.success) {
+      return res.status(400).json({ message: validationResult.error.errors });
+    }
+
+    // Create the reservation if validation passes
+    const reservation = await Reservation.create({
+      Guests: validationResult.data.Guests,
+      Date: validationResult.data.Date,
+      Time: validationResult.data.Time,
+    });
+
+    res.status(201).json(reservation);
+  } catch (error) {
+    res.status(400).json({ message: error.message });
+  }
+}
+
+module.exports = {
+  createReservation,
+};

backend/index.js

@@ -1,6 +1,24 @@
 const express = require("express");
+const cors = require("cors");
 const app = express();
 const port = 3000;
+require("dotenv").config();
+const mongoose = require("mongoose");
+const { createReservation } = require("./controller/reservation.controller");
 
-app.get("/", (req, res) => res.send("Hello World!"));
-app.listen(port, () => console.log(`Example app listening on port ${port}!`));
+app.use(cors({}));
+
+app.use(express.json());
+
+mongoose
+  .connect(process.env.MONGO_URI)
+  .then(() => {
+    console.log("Connected to MongoDB");
+  })
+  .catch((error) => {
+    console.error("Database connection failed:", error);
+  });
+
+app.post("/create-reservation", createReservation);
+
+app.listen(port, () => console.log(`Server is running on port ${port}!`));

backend/models/reservation.model.js

@@ -0,0 +1,21 @@
+const mongoose = require("mongoose");
+const Schema = mongoose.Schema;
+
+const reservationSchema = new Schema({
+  Guests: {
+    type: String,
+    required: true,
+  },
+  Date: {
+    type: String,
+    required: true,
+  },
+  Time: {
+    type: String,
+    required: true,
+  },
+});
+
+const Reservation = mongoose.model("Reservation", reservationSchema);
+
+module.exports = Reservation;

backend/package.json

@@ -3,13 +3,21 @@
   "version": "1.0.0",
   "main": "index.js",
   "scripts": {
+    "start": "nodemon index.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "description": "",
   "dependencies": {
-    "express": "^4.21.0"
+    "cors": "^2.8.5",
+    "dotenv": "^16.4.5",
+    "express": "^4.21.0",
+    "mongoose": "^8.7.0",
+    "zod": "^3.23.8"
+  },
+  "devDependencies": {
+    "nodemon": "^3.1.7"
   }
 }

frontend/src/components/Pages/Register.jsx

@@ -1,10 +1,45 @@
+import { useEffect, useState } from "react";
 import pic from "../../assets/img/abt1.jpg";
 import pic2 from "../../assets/img/abt1.png";
 import pic3 from "../../assets/img/abt2.png";
 import pic4 from "../../assets/img/abt3.png";
 import pic5 from "../../assets/img/abt4.png";
 
 export default function Register() {
+  const [Guests, setGuests] = useState();
+  const [Date, setDate] = useState("");
+  const [Time, setTime] = useState("");
+
+  useEffect(() => {
+    console.log(Guests);
+  }, [Guests]);
+
+  useEffect(() => {
+    console.log(Date);
+  }, [Date]);
+
+  useEffect(() => {
+    console.log(Time);
+  }, [Time]);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    fetch("http://localhost:3000/create-reservation", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        Guests,
+        Date,
+        Time,
+      }),
+    })
+      .then((res) => res.json())
+      .then((data) => console.log(data))
+      .catch((error) => console.log(error));
+  };
+
   return (
     <>
       <div className="w-full mx-auto mt-10 lg:mt-0 md:mt-0">
@@ -46,6 +81,7 @@ export default function Register() {
                     </label>
                     <select
                       id="guests"
+                      onChange={(e) => setGuests(e.target.value)}
                       className="flex h-10 w-full items-center rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                     >
                       <option value="">Select number of guests</option>
@@ -67,7 +103,8 @@ export default function Register() {
                     <input
                       type="date"
                       id="date"
-                      className="flex h-10 w-full items-center rounded-md border border-input bg-white px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                      onChange={(e) => setDate(e.target.value)}
+                      className="flex h-10 w-full items-center rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                     />
                   </div>
                 </div>
@@ -80,6 +117,7 @@ export default function Register() {
                   </label>
                   <select
                     id="time"
+                    onChange={(e) => setTime(e.target.value)}
                     className="flex h-10 w-full items-center rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                   >
                     <option value="">Select time</option>
@@ -93,6 +131,7 @@ export default function Register() {
                 <button
                   className="inline-flex items-center justify-center p-4 bg-[#D9D9D9] hover:bg-[#C9C9C9]"
                   type="submit"
+                  onClick={handleSubmit}
                 >
                   Reserve Now
                 </button>
@@ -101,8 +140,8 @@ export default function Register() {
           </div>
         </section>
         <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-tighter text-amber-100 bg-green-900 p-5 text-center">
-                    Popular Board Games
-                </h1>
+          Popular Board Games
+        </h1>
         <div className="mt-8 w-full flex justify-center bg-white ">
           <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 mt-8 mb-10">
             <div