technical-council-nitt · NAVIN2709 · Sep 3, 2025
diff --git a/index.html b/index.html
@@ -9,16 +9,15 @@
     <meta name="keywords" content="Ride NITT, NIT Trichy, Carpooling, NIT Trichy Carpooling" />
 
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
-    <link rel="icon" sizes="192x192" href="/logo-192.png">
-    <link rel="icon" sizes="32x32" href="/favicon-32x32.png">
-    <link rel="icon" sizes="16x16" href="/favicon-16x16.png">
+    <link rel="icon" sizes="192x192" href="/logo.png">
     <meta name="image" content="/logo-192.png">
 
     <meta property="og:title" content="Ride NITT | Car Pool like never before" />
     <meta property="og:description" content="Ride NITT is a carpooling platform for the students of NIT Trichy." />
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://ride-tc.vercel.app" />
-    <meta property="og:image" content="/logo-192.png" />
+    <meta property="og:image" content="/logo.png" />
+    <link rel="manifest" href="./manifest.json" />
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@tailwindcss/postcss": "^4.0.1",
-    "axios": "^1.7.9",
+    "axios": "^1.11.0",
     "classnames": "^2.5.1",
     "daisyui": "^4.12.23",
     "dotenv": "^16.4.7",

diff --git a/public/manifest.json b/public/manifest.json
@@ -1,25 +1,25 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Ride NITT",
+  "name": "Ride NITT",
   "icons": [
     {
-      "src": "favicon.ico",
+      "src": "/logo.png",
       "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
+      "type": "image/png"
     },
     {
-      "src": "logo192.png",
+      "src": "/logo.png",
       "type": "image/png",
       "sizes": "192x192"
     },
     {
-      "src": "logo512.png",
+      "src": "/logo.png",
       "type": "image/png",
       "sizes": "512x512"
     }
   ],
   "start_url": ".",
   "display": "standalone",
-  "theme_color": "#000000",
+  "theme_color": "#008955",
   "background_color": "#ffffff"
 }
diff --git a/public/sw.js b/public/sw.js
@@ -0,0 +1,16 @@
+self.addEventListener("push", (event) => {
+  const data = event.data.json();
+
+  event.waitUntil(
+    self.registration.showNotification(data.title, {
+      body: data.body,
+      icon: data.icon || "/logo.png",
+      data: { url: data.url || "/" }
+    })
+  );
+});
+
+self.addEventListener("notificationclick", (event) => {
+  event.notification.close();
+  event.waitUntil(clients.openWindow(event.notification.data.url));
+});
diff --git a/src/App.tsx b/src/App.tsx
@@ -19,6 +19,7 @@ import LoadingScreen from "./Components/LoadingScreen";
 import React from "react";
 import NewAccountSignup from "./Pages/NewAccountSignup.tsx";
 import Redirect from "./Components/Redirect.tsx";
+import usePushNotifications from "./Hooks/usePushNotifications";
 
 const App: React.FC = () => {
   return (
@@ -31,6 +32,7 @@ const App: React.FC = () => {
 
 const CustomRouter = () => {
   const { authLoading, user, hasSignedUp } = useAuth()
+  usePushNotifications(user);
 
   return (
     <BrowserRouter>

diff --git a/src/Components/AboutRideNitt.tsx b/src/Components/AboutRideNitt.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+const AboutRideNitt: React.FC<{ show: boolean; onClose: () => void }> = ({ show, onClose }) => {
+  if (!show) return null;
+  return (
+    <div className="fixed inset-0 z-30 flex items-center justify-center bg-black/40" onClick={onClose}>
+      <div
+        className="bg-white rounded-lg shadow-xl max-h-[80vh] overflow-y-auto p-6"
+        style={{ width: '80vw', marginLeft: '10vw', marginRight: '10vw', maxWidth: 'none' }}
+        onClick={e => e.stopPropagation()}
+      >
+        <h2 className="text-xl font-bold mb-4 text-green-700">About RideNITT</h2>
+        <p>content</p>
+        <button className="mt-6 px-4 py-2 bg-green-600 text-white rounded" onClick={onClose}>Close</button>
+      </div>
+    </div>
+  );
+};
+
+export default AboutRideNitt;
diff --git a/src/Components/Navigation.tsx b/src/Components/Navigation.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import { Link, useLocation } from "react-router-dom";
 import { useAuth } from "../Hooks/useAuth";
 import { IoSpeedometer, IoSpeedometerOutline } from "react-icons/io5";
@@ -8,9 +8,6 @@ const Navigation: React.FC = () => {
     const { user } = useAuth()
     const location = useLocation()
 
-    useEffect(() => {
-        console.log(location.pathname)
-    }, [location])
 
     return (
         <footer className="fixed bottom-[0px] h-[70px] left-0 right-0 text-white bg-[#008955] grid grid-cols-4 place-items-center">

diff --git a/src/Hooks/useAuth.tsx b/src/Hooks/useAuth.tsx
@@ -46,9 +46,8 @@ export const AuthProvider = ({ children }: {
 
       if (!userId) throw new Error("Invalid token");
 
-      await axios.get("/api/users/me")
+      await axios.get("api/users/me")
         .then(res => {
-          console.log(res.data.data)
           setUser(res.data.data)
         })
     } catch (err) {

diff --git a/src/Hooks/usePushNotifications.tsx b/src/Hooks/usePushNotifications.tsx
@@ -0,0 +1,54 @@
+import { useEffect } from "react";
+import axios from "axios";
+
+const VAPID_PUBLIC_KEY = "BAnAeN62IYpOlGk9mmw7frh1fjmqluKD6gjW3ey2_mhP1NWU6A_BAFTaAIJ9Vmr0d0swYK_hAT0ZFQnWwtRYkjY"; // Replace with your actual public key
+
+// Convert Base64 string to Uint8Array (BufferSource)
+function urlBase64ToUint8Array(base64String: string): Uint8Array {
+  const padding = "=".repeat((4 - (base64String.length % 4)) % 4);
+  const base64 = (base64String + padding)
+    .replace(/-/g, "+")
+    .replace(/_/g, "/");
+
+  const rawData = window.atob(base64);
+  const outputArray = new Uint8Array(rawData.length);
+
+  for (let i = 0; i < rawData.length; i++) {
+    outputArray[i] = rawData.charCodeAt(i);
+  }
+  return outputArray; // ✅ Now correctly Uint8Array (BufferSource)
+}
+
+// Define your user type
+interface User {
+  id?: string;
+  email?: string;
+  name?: string;
+}
+
+export default function usePushNotifications(user: User | null) {
+  useEffect(() => {
+    if (!user) return;
+    if (!user?.id) return; 
+
+    if ("serviceWorker" in navigator && "PushManager" in window) {
+      navigator.serviceWorker.register("/sw.js").then(async (registration) => {
+
+        const permission = await Notification.requestPermission();
+        if (permission === "granted") {
+          const subscription = await registration.pushManager.subscribe({
+            userVisibleOnly: true,
+            applicationServerKey: urlBase64ToUint8Array(VAPID_PUBLIC_KEY) as BufferSource, // 👈 cast fix
+          });
+
+          // Send subscription to backend
+          await axios.post(
+            "/api/notifications/subscribe",
+            { subscription, userId: user.id },
+            { withCredentials: true } 
+          );
+        }
+      });
+    }
+  }, [user]);
+}
diff --git a/src/Pages/Account.tsx b/src/Pages/Account.tsx
@@ -1,7 +1,8 @@
 import { useAuth } from '../Hooks/useAuth';
 import Redirect from '../Components/Redirect';
-import { FaCar, FaUser, FaPhoneAlt } from 'react-icons/fa';
+import { FaCar, FaUser, FaPhoneAlt,FaBookOpen } from 'react-icons/fa';
 import NittAutoDriversModal from '../Components/NittAutoDriversModal';
+import AboutRideNitt from '../Components/AboutRideNitt';
 import { Link, redirect } from 'react-router-dom';
 import axios from 'axios';
 import { toast } from 'react-toastify';
@@ -10,6 +11,7 @@ import { useState } from 'react';
 export default function AccountPage() {
   const { user, refreshAuth } = useAuth();
   const [showDrivers, setShowDrivers] = useState(false);
+  const [showAbout, setShowAbout] = useState(false);
 
   const handleLogout = () => {
     axios.delete("/auth/logout")
@@ -61,13 +63,23 @@ export default function AccountPage() {
               <span>Contact NITT Auto Drivers</span>
             </button>
           </li>
+          <li>
+            <button
+              className='flex items-center gap-2 p-2 bg-green-100 border border-solid border-black rounded-xl w-full'
+              onClick={() => setShowAbout(true)}
+            >
+              <FaBookOpen className='text-green-800' />
+              <span>About RideNITT</span>
+            </button>
+          </li>
 
           <li>
             <button onClick={handleLogout} className="p-2 border-[1.5px] border-[black] rounded-[90px] bg-[#008955] text-[white] font-[Quicksand] font-[700]">Logout</button>
           </li>
         </ul>
       </div>
       <NittAutoDriversModal show={showDrivers} onClose={() => setShowDrivers(false)} />
+      <AboutRideNitt show={showAbout} onClose={() => setShowAbout(false)} />
     </div>
   )
 }