feat:Adding Contact Us page Fontend+Backend

Backend/controllers/contactController.js

@@ -0,0 +1,14 @@
+const Contact = require("../models/contactModel");
+
+const contactForm = async (req, res) => {
+  try {
+    const response = req.body;
+    await Contact.create(response);
+    return res.status(200).json({ message: "message send successfully" });
+  } catch (error) {
+    console.error(error);
+    return res.status(500).json({ message: "message not delivered" });
+  }
+};
+
+module.exports = contactForm;

Backend/models/contactModel.js

@@ -0,0 +1,9 @@
+const { Schema, model } = require("mongoose");
+const contactSchema = new Schema({
+  username: { type: String, required: true },
+  email: { type: String, required: true },
+  message: { type: String, required: true },
+});
+// create a new collections(Model)
+const Contact = new model("Contact", contactSchema);
+module.exports = Contact;

Backend/routes/contactRoute.js

@@ -0,0 +1,8 @@
+const express = require("express");
+const router = express.Router();
+
+const contactForm = require("../controllers/contactController");
+
+router.route("/contactus").post(contactForm);
+
+module.exports = router;

Backend/server.js

@@ -12,6 +12,7 @@ const cookieParser = require("cookie-parser")
 const fileUpload = require("express-fileupload")
 const cors = require('cors');
 const session = require("express-session");
+const contactRoute = require("./routes/contactRoute");
 
 // middleware to recognize the body by express
 app.use(express.json())
@@ -68,6 +69,7 @@ app.get('/', (req, res) => {
 })
 
 app.use('/api', apiRoutes)
+app.use("/api/form", contactRoute);
 
 app.use((error, req, res, next) => {
     if (process.env.NODE_ENV === 'development') {

Client/package.json

@@ -23,7 +23,7 @@
     "cookie-parser": "^1.4.6",
     "dateformat": "^5.0.3",
     "dompurify": "^3.0.5",
-    "firebase": "^10.12.2",
+    "firebase": "^10.12.3",
     "hamburger-react": "^2.5.0",
     "html-react-parser": "^4.2.1",
     "html-to-text": "^9.0.5",

Client/src/App.jsx

@@ -12,6 +12,7 @@ import BlogSpecificPage from './pages/BlogSpecificPage'
 import ProtectedRoutesComponent from './components/ProtectedRoutesComponent'
 import SpeedDialComponent from './components/SpeedDialComponente'
 import CreatePostPage from './pages/CreatePostPage'
+import ContactUsPage from './pages/ContactUs'
 import {  useState } from 'react'
 import NotFoundPage from './pages/404Page'
 import Profile from './pages/Profile'
@@ -42,6 +43,7 @@ function App() {
             <Route path="/login" element={<LoginPage setIsLoading={setIsLoading} />} />
             <Route path="/profile" element={<Profile setIsLoading={setIsLoading} />} />
             <Route path="/register" element={<RegisterPage setIsLoading={setIsLoading} />} />
+            <Route path="/contactus" element={<ContactUsPage setIsLoading={setIsLoading} />} />
             <Route element={<ProtectedRoutesComponent />}>
               <Route path="/post-details/:postId" element={<BlogDescriptionPage setIsLoading={setIsLoading} />} />
               <Route path="/blogs/:tag" element={<BlogSpecificPage setIsLoading={setIsLoading} />} />

Client/src/components/HeaderComponent.jsx

@@ -97,6 +97,15 @@ const HeaderComponent = () => {
                 SECURITY
               </Link>
             </li>
+
+            <li className="nav-item">
+              <Link style={{ 'color': '#a7acb3' }}
+               className={`nav-link`}
+               to="contactus"
+             >
+              CONTACT US
+              </Link>
+            </li>
           </ul>
         </div>
 

Client/src/pages/ContactUs.jsx

@@ -0,0 +1,116 @@
+import { useState } from "react";
+import React from "react";
+import { Form, Button, Container, Row, Col } from "react-bootstrap";
+
+const defaultContactFormData = {
+  username: "",
+  email: "",
+  message: "",
+};
+
+function ContactUs() {
+  const [data, setData] = useState(defaultContactFormData);
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setData((prevData) => ({
+      ...prevData,
+      [name]: value,
+    }));
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      const response = await fetch(`${import.meta.env.VITE_API_URI}/api/form/contactus`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(data),
+      });
+
+      //console.log("response: ", response);
+      // alert(response);
+
+      if (response.ok) {
+        setData(defaultContactFormData);
+        const responseData = await response.json();
+        alert("Form Submitted Successfully");
+
+        //console.log(responseData);
+      } else {
+        // Handle API error here
+        console.error("API Error:", response.status, response.statusText);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  return (
+    <div
+      className="min-h-screen flex items-center justify-center w-full pt-40"
+      style={{
+        backgroundImage: "url('https://images.unsplash.com/photo-1488190211105-8b0e65b80b4e?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')",
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat',
+      }}
+    >
+      <Container className="flex justify-center items-center w-full h-full" >
+        <Row className="w-100">
+          <Col md={{ span: 6, offset: 3 }}>
+            <div className="p-4 shadow rounded bg-white mt-5 mb-5" >
+              <h2 className="text-center mb-4">Contact Us</h2>
+              <Form onSubmit={handleSubmit}>
+                <Form.Group controlId="formName" className="mb-3">
+                  <Form.Label>Name</Form.Label>
+                  <Form.Control
+                    type="text"
+                    placeholder="Enter your name"
+                    onChange={handleChange}
+                    value={data.username}
+                    name="username"
+                    required
+                  />
+                </Form.Group>
+
+                <Form.Group controlId="formEmail" className="mb-3">
+                  <Form.Label>Email address</Form.Label>
+                  <Form.Control
+                    type="email"
+                    placeholder="Enter your email"
+                    name="email"
+                    value={data.email}
+                    onChange={handleChange}
+                    required
+                  />
+                </Form.Group>
+
+                <Form.Group controlId="formMessage" className="mb-3">
+                  <Form.Label>Message</Form.Label>
+                  <Form.Control
+                    as="textarea"
+                    rows={3}
+                    placeholder="Enter your message"
+                    name="message"
+                    value={data.message}
+                    onChange={handleChange}
+                    required
+                  />
+                </Form.Group>
+
+                <Button variant="primary" type="submit" className="w-100">
+                  Submit
+                </Button>
+              </Form>
+            </div>
+          </Col>
+        </Row>
+      </Container>
+    </div>
+  );
+}
+
+export default ContactUs;