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

backend/.env

@@ -0,0 +1 @@
+MONGO_URI=mongodb+srv://vsamarth1212:[email protected]/

backend/.env.exapmle

@@ -0,0 +1 @@
+MONGO_URI=enter_your_mongo_uri

backend/.gitignore

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

backend/controller/reservation.controller.js

@@ -0,0 +1,42 @@
+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 {
+    const validationResult = reservationSchema.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 reservation = await Reservation.create(validationResult.data);
+
+    res.status(201).json({
+      success: true,
+      message: "Reservation created successfully",
+      data: reservation,
+    });
+  } catch (error) {
+    console.error("Error creating reservation:", error);
+    res.status(500).json({
+      success: false,
+      message: "An error occurred while creating the reservation",
+    });
+  }
+}
+
+module.exports = {
+  createReservation,
+};

backend/index.js

@@ -1,6 +1,32 @@
 const express = require("express");
+const cors = require("cors");
 const app = express();
 const port = 3000;
+require("dotenv").config();
+const mongoose = require("mongoose");
 
-app.get("/", (req, res) => res.send("Hello World!"));
-app.listen(port, () => console.log(`Example app listening on port ${port}!`));
+app.use(
+  cors({
+    origin: ["http://localhost:5173", "https://play-cafe.vercel.app"],
+  })
+);
+
+app.use(express.json());
+
+mongoose
+  .connect(process.env.MONGO_URI, {
+    useNewUrlParser: true,
+    useUnifiedTopology: true,
+  })
+  .then(() => {
+    console.log("Connected to MongoDB");
+  })
+  .catch((error) => {
+    console.error("Database connection failed:", error.message);
+    console.error(error.stack);
+    process.exit(1);
+  });
+
+app.use("/api", require("./routes/index"));
+
+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"
   }
 }

backend/routes/index.js

@@ -0,0 +1,18 @@
+const express = require("express");
+const Reservation = require("../models/reservation.model");
+
+const router = express.Router();
+
+router.use("/reservation", require("./reservationRouter"));
+router.get("/", (req, res) => {
+  res.json({
+    message: "Welcome to the restaurant API!",
+    version: "1.0.0",
+    endpoints: {
+      Reservation: "/reservation",
+    },
+    documentation: "https://api-docs-url.com",
+  });
+});
+
+module.exports = router;

backend/routes/reservationRouter.js

@@ -0,0 +1,17 @@
+const express = require("express");
+const { createReservation } = require("../controller/reservation.controller");
+const router = express.Router();
+
+router.post("/create", createReservation);
+router.get("/", (req, res) => {
+  res.json({
+    message: "Welcome to the restaurant reservation API!",
+    version: "1.0.0",
+    endpoints: {
+      createReservation: "/create [POST]",
+    },
+    documentation: "https://api-docs-url.com",
+  });
+});
+
+module.exports = router;

frontend/package.json

@@ -13,6 +13,7 @@
     "@splidejs/splide": "^4.1.4",
     "@splidejs/splide-extension-auto-scroll": "^0.5.3",
     "autoprefixer": "^10.4.19",
+    "axios": "^1.7.7",
     "clsx": "^2.1.1",
     "framer-motion": "^11.5.6",
     "react": "^18.3.1",

frontend/src/components/Pages/Register.jsx

@@ -1,10 +1,36 @@
+import { 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 [date, setDate] = useState("");
+  const [time, setTime] = useState("");
+  const [guests, setGuests] = useState();
+
+  const handleSubmit = (e) => {
+    console.log(guests);
+    console.log(time);
+    console.log(date);
+    e.preventDefault();
+    fetch("http://localhost:3000/api/reservation/create", {
+      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 +72,9 @@ 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 +96,10 @@ 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 +112,9 @@ 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 +128,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 +137,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