Added backend api for contanct us with proper folder structure

backend/app.js

@@ -4,6 +4,7 @@ import connectDB from "./utils/db.js";
 import blogRoutes from "./routes/blogRoutes.js";
 import userRoutes from "./routes/userRoutes.js";
 import feedbackRoutes from "./routes/feebackroute.js";
+import contactRoutes from "./routes/contactRoute.js";
 import cors from "cors";
 
 dotenv.config();
@@ -18,6 +19,7 @@ app.use(cors());
 app.use("/api/users", userRoutes);
 app.use("/api/blogs", blogRoutes);
 app.use("/api/feedback", feedbackRoutes);
+app.use("/api/contact", contactRoutes);
 
 const PORT = process.env.PORT || 5000;
 app.listen(PORT, () => {

backend/controllers/contactController.js

@@ -0,0 +1,30 @@
+import Contact from "../models/contact.js";
+
+export async function saveContact(req, resp) {
+    try {
+        const { name, email, subject, message } = req.body;
+
+        // Check if all fields are provided
+        if (!name || !email || !subject || !message) {
+            return resp.status(400).json({ message: "All fields are required." });
+        }
+
+        // Create new contact document
+        const newContact = new Contact({ name, email, subject, message });
+
+        // Save contact form data to the database
+        await newContact.save();
+
+        // Respond with success message
+        resp
+            .status(201)
+            .json({ message: "Contact form submitted successfully!", newContact });
+    } catch (error) {
+        console.error("Error saving contact form:", error);
+        resp.status(500).json({ message: "Failed to submit contact form.", error });
+    }
+}
+
+export async function getContact(req, resp) {
+    resp.send('hello contact')
+}

backend/models/contact.js

@@ -0,0 +1,33 @@
+import mongoose from "mongoose";
+
+const contactSchema = new mongoose.Schema({
+    name: {
+        type: String,
+        required: true,
+        trim: true
+    },
+    email: {
+        type: String,
+        required: true,
+        trim: true,
+        match: [/^\S+@\S+\.\S+$/, "Please enter a valid email address"]
+    },
+    subject: {
+        type: String,
+        required: true,
+        trim: true
+    },
+    message: {
+        type: String,
+        required: true,
+        trim: true
+    },
+    createdAt: {
+        type: Date,
+        default: Date.now
+    }
+});
+
+const Contact = mongoose.model("Contact", contactSchema);
+
+export default Contact;

backend/routes/contactRoute.js

@@ -0,0 +1,8 @@
+import express from "express";
+const router = express.Router();
+import { getContact, saveContact } from "../controllers/contactController.js";
+
+router.post("/saveContact", saveContact);
+router.get("/saveContact", getContact);
+
+export default router;

frontend/src/pages/Contact.js

@@ -63,11 +63,39 @@ export function renderContact(container) {
     `;
 
     // Form submission
-    document.getElementById('contactForm').addEventListener('submit', function(e) {
+    document.getElementById('contactForm').addEventListener('submit', async function (e) {
         e.preventDefault();
-        // Here you would typically send the form data to your server
-        // For this example, we'll just show a success message
-        document.getElementById('formSuccess').classList.remove('hidden');
-        this.reset();
+
+        // Create a new FormData object from the form
+        const formData = new FormData(this);
+
+        // Convert FormData to an object
+        const data = Object.fromEntries(formData.entries());
+
+        try {
+            // Send form data to backend API
+            const response = await fetch('http://localhost:5000/api/contact/saveContact', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(data)
+            });
+            console.log(response)
+
+            if (response.ok) {
+                // Display success message and reset the form
+                document.getElementById('formSuccess').classList.remove('hidden');
+                this.reset();
+            } else {
+                // Handle error response
+                const errorData = await response.json();
+                console.error("Error submitting form:", errorData.message);
+            }
+        } catch (error) {
+            console.error("Error submitting form:", error);
+        }
     });
+
+
 }