Add visitor count

index.html

@@ -8,7 +8,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
-
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
 
     <link rel="stylesheet" href="styles.css">
@@ -800,10 +800,9 @@ <h2 style="color: white; text-align: left; font-size: 4rem; margin-bottom: 10px;
                 flex-direction: column;
             }
         }
-    </style>
-<!-- </div>
-
-        /* Button hover effect */
+
+  <style> -->
+      hover effect */
         button[type="submit"]:hover {
             background-color: #005fa3;
         }
@@ -814,7 +813,6 @@ <h2 style="color: white; text-align: left; font-size: 4rem; margin-bottom: 10px;
             }
         }
     </style> -->
-</div>
 
 
         <div class="map-container">
@@ -1311,6 +1309,7 @@ <h2>Frequently Asked Questions</h2>
                     <a href="#"><i class="fab fa-linkedin"></i></a>
                     <a href="#"><i class="fab fa-youtube"></i></a>
                 </div>
+                <button id="visitorCounter" class="btn btn-info text-white rounded">Visitors Count: 1</button>
             </div>
 
 
@@ -1375,8 +1374,24 @@ <h4>FIND US</h4>
         </div>
     </footer>
 
+<!-- visitor -->
+<script>
+    // JavaScript to fetch visitor count from API
+    async function getVisitorCount() {
+        try {
+            const response = await fetch('http://localhost:5000/api/visitor-count');
+            const data = await response.json();
+            document.getElementById("visitorCount").innerText = data.count;
+        } catch (error) {
+            console.error("Error fetching visitor count:", error);
+        }
+    }
 
-    <script>
+    // Call the function on page load
+    getVisitorCount();
+</script>
+
+<script>
 // cursor 
 
 const coords = { x: 0, y: 0 };

server/app.js

@@ -32,6 +32,21 @@ app.use((req, res, next) => {
 // Route Definitions
 app.use("/api/v1/auth", auth_route); // Authentication routes
 
+
+// Route to get and increment the visitor count
+app.get('/api/visitor-count', async (req, res) => {
+  try {
+    const visitorCounter = await Counter.findByIdAndUpdate(
+      "visitorCount",
+      { $inc: { count: 1 } },
+      { new: true, upsert: true }
+    );
+    res.json({ count: visitorCounter.count });
+  } catch (err) {
+    console.error("Error updating visitor count:", err);
+    res.status(500).send("Server error");
+  }
+});
 // Error Handling Middleware
 app.use((err, req, res, next) => {
   console.error(err.stack);

server/models/user.js

@@ -1,5 +1,11 @@
 import mongoose from "mongoose";
 
+const CounterSchema = new mongoose.Schema({
+  _id: String,
+  count: { type: Number, default: 0 }
+});
+const Counter = mongoose.model("Counter", CounterSchema);
+
 const userSchema = new mongoose.Schema({
   email: {
     type: String,

server/package.json

@@ -21,7 +21,7 @@
     "express": "^4.21.0",
     "helmet": "^8.0.0",
     "jsonwebtoken": "^9.0.2",
-    "mongodb": "^6.9.0",
+    "mongodb": "^6.10.0",
     "mongoose": "^8.7.0",
     "nodemailer": "^6.9.15",
     "zod": "^3.23.8"

server/server.js

@@ -15,4 +15,6 @@ connect_db()
   .catch(err => {
     console.error("Failed to connect to the database:", err.message);
     process.exit(1); // Exit process if DB connection fails
-});
+});
+
+