contact me done

.gitignore

@@ -127,4 +127,6 @@ dist
 .yarn/unplugged
 .yarn/build-state.yml
 .yarn/install-state.gz
-.pnp.*
+.pnp.*
+
+functions/serviceAccountKey.json

client/src/components/App.css

@@ -242,3 +242,63 @@ html{
   }
 }
 
+.form-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 300px;
+  margin: 0 auto;
+  padding: 1rem;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.input-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.input-style {
+  padding: 0.5rem;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+}
+
+.textarea-style {
+  padding: 0.5rem;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  height: 100px;
+  resize: none;
+}
+
+.button-style {
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  border: none;
+  background: #007BFF;
+  color: #fff;
+  cursor: pointer;
+}
+
+.popup-style {
+  position: fixed;
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: #fff;
+  color:black;
+  padding: 1rem;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  text-align: center;
+}
+
+.time-bar-style {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 5px;
+  background: #007BFF;
+}

client/src/components/ContactMe.jsx

@@ -1,11 +1,93 @@
-import React from "react";
+import React, { useState } from "react";
+import axios from "axios";
+import { motion, AnimatePresence } from "framer-motion";
 
-function ContactMe(props){
-    return(
-        <nav>
-            PAGE UNDER DEVELOPMENT!
-        </nav>
+function ContactMe() {
+    const [formData, setFormData] = useState({
+        email: "",
+        name: "",
+        subject: "",
+        body: ""
+    });
+
+    const [responseMessage, setResponseMessage] = useState("");
+    const [showPopup, setShowPopup] = useState(false);
+
+    const handleChange = (e) => {
+        const { name, value } = e.target;
+        setFormData({
+            ...formData,
+            [name]: value
+        });
+    };
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        try {
+            const response = await axios.post("http://127.0.0.1:5001/portfolio-abhishekverma/us-central1/api/contact", formData);
+            setResponseMessage(response.data.message);
+            setShowPopup(true);
+            setTimeout(() => {
+                setShowPopup(false);
+            }, 2000);
+            setFormData({
+                email: "",
+                name: "",
+                subject: "",
+                body: ""
+            });
+        } catch (error) {
+            setResponseMessage("Error submitting the form");
+            setShowPopup(true);
+            setTimeout(() => {
+                setShowPopup(false);
+            }, 2000);
+            console.error("Error submitting the form", error);
+        }
+    };
+
+    return (
+        <div>
+            <form onSubmit={handleSubmit} className="form-container">
+                <div className="input-container">
+                    <label>Email:</label>
+                    <input type="email" name="email" value={formData.email} onChange={handleChange} required className="input-style" />
+                </div>
+                <div className="input-container">
+                    <label>Name:</label>
+                    <input type="text" name="name" value={formData.name} onChange={handleChange} required className="input-style" />
+                </div>
+                <div className="input-container">
+                    <label>Subject:</label>
+                    <input type="text" name="subject" value={formData.subject} onChange={handleChange} required className="input-style" />
+                </div>
+                <div className="input-container">
+                    <label>Body:</label>
+                    <textarea name="body" value={formData.body} onChange={handleChange} required className="textarea-style" />
+                </div>
+                <button type="submit" className="button-style">Submit</button>
+            </form>
+
+            <AnimatePresence>
+                {showPopup && (
+                    <motion.div
+                        initial={{ opacity: 0, y: -20 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        exit={{ opacity: 0, y: -20 }}
+                        className="popup-style"
+                    >
+                        {responseMessage}
+                        <motion.div
+                            initial={{ width: "100%" }}
+                            animate={{ width: 0 }}
+                            transition={{ duration: 2, ease: "linear" }}
+                            className="time-bar-style"
+                        />
+                    </motion.div>
+                )}
+            </AnimatePresence>
+        </div>
     );
 }
 
-export default ContactMe;
+export default ContactMe;

functions/index.js

@@ -1,19 +1,33 @@
-/**
- * Import function triggers from their respective submodules:
- *
- * const {onCall} = require("firebase-functions/v2/https");
- * const {onDocumentWritten} = require("firebase-functions/v2/firestore");
- *
- * See a full list of supported triggers at https://firebase.google.com/docs/functions
- */
+const functions = require("firebase-functions");
+const admin = require("firebase-admin");
+const express = require("express");
+const cors = require("cors");
+const {Timestamp} = require("firebase-admin/firestore");
 
-const {onRequest} = require("firebase-functions/v2/https");
-const logger = require("firebase-functions/logger");
+admin.initializeApp();
 
-// Create and deploy your first functions
-// https://firebase.google.com/docs/functions/get-started
+const db = admin.firestore();
+const app = express();
 
-// exports.helloWorld = onRequest((request, response) => {
-//   logger.info("Hello logs!", {structuredData: true});
-//   response.send("Hello from Firebase!");
-// });
+app.use(cors({origin: true}));
+app.use(express.json());
+
+app.post("/contact", async (req, res) => {
+  try {
+    const {email, name, subject, body} = req.body;
+
+    await db.collection("contacts").doc(email).set({
+      email,
+      name,
+      subject,
+      body,
+      timestamp: Timestamp.fromDate(new Date()),
+    });
+    res.status(200).send({message: "Contact form submitted successfully"});
+  } catch (error) {
+    console.error("Error adding document: ", error);
+    res.status(500).send({message: "Error submitting the form"});
+  }
+});
+
+exports.api = functions.https.onRequest(app);