final app optimisations: 1

backend/controllers/events.controller.js

@@ -1,7 +1,9 @@
 import clubsData from "../data/clubs.data.json" assert { type: 'json' };
 import eventsData from "../data/events.data.json" assert { type: 'json' };
+import Event from "../models/event.model.js";
 import Membership from "../models/order.model.js";
 import Payment from "../models/payment.model.js";
+import Registration from "../models/registration.model.js";
 
 export const getClubs = (req, res) => {
     try {
@@ -31,9 +33,6 @@ export const getClubById = (req, res) => {
 export const getMyClubs = async (req, res) => {
     try {
         const userClubs = await Membership.findOne({ user: req.params.id });
-        /*if (!userClubs) {
-            return res.status(400).json({ error: "Not enrolled in any club! Enrol Now...!!!" });
-        }*/
         if (!userClubs) {
             return;
         }
@@ -75,4 +74,25 @@ export const getEventById = (req, res) => {
         console.log(error.message);
         res.status(500).json({ error: "Internal Server error" });
     }
+}
+
+export const getMyRegistrations = async (req, res) => {
+    try {
+        const userRegs = await Registration.findOne({ user: req.params.id });
+        if (!userRegs) {
+            return;
+        }
+
+        const eventIds = userRegs.events;
+        const events = await Event.find({ _id: { $in: eventIds } });
+
+        if (events) {
+            res.status(200).json(events);
+        } else {
+            res.status(400).json({ error: "Error in Fetching orders" });
+        }
+    } catch (err) {
+        console.log(err)
+        res.status(500).json({ error: "Internal Server Error" });
+    }
 }

backend/routes/event.routes.js

@@ -1,5 +1,5 @@
 import express from "express";
-import { getClubById, getClubs, getEventById, getEvents, getMyClubs } from "../controllers/events.controller.js";
+import { getClubById, getClubs, getEventById, getEvents, getMyClubs, getMyRegistrations } from "../controllers/events.controller.js";
 
 const router = express();
 
@@ -8,5 +8,6 @@ router.get("/get-club/:id", getClubById);
 router.get("/my-clubs/:id", getMyClubs);
 router.get("/get-events", getEvents);
 router.get("/get-event/:id", getEventById);
+router.get("/my-registrations/:id", getMyRegistrations);
 
 export default router;

frontend/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "framer-motion": "^11.11.17",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hot-toast": "^2.4.1",

frontend/src/App.jsx

@@ -11,10 +11,10 @@ import CompletePayment from "./pages/payments/CompletePayment";
 import CancelPayment from "./pages/payments/CancelPayment";
 import CompleteRegistration from "./pages/registration/CompleteRegistration";
 import CancelRegistration from "./pages/registration/CancelRegistration";
+import MyRegistrations from "./pages/registration/MyRegistrations";
 
 function App() {
   const { authUser } = useAuthContext();
-  console.log(authUser);
 
   return (
     <>
@@ -30,6 +30,7 @@ function App() {
           <Route path="/cancel-payment" element={authUser ? <CancelPayment /> : <Navigate to="/login" />} />
           <Route path="/complete-registration" element={authUser ? <CompleteRegistration /> : <Navigate to="/login" />} />
           <Route path="/cancel-registration" element={authUser ? <CancelRegistration /> : <Navigate to="/login" />} />
+          <Route path="/registrations" element={authUser ? <MyRegistrations /> : <Navigate to="/login" />} />
         </Routes>
 
         <Toaster />

frontend/src/components/Navbar.jsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { HiOutlineBars3 } from "react-icons/hi2";
-import { MdHome, MdLogout, MdEmojiEvents } from "react-icons/md";
+import { MdHome, MdLogout, MdEmojiEvents, MdAppRegistration } from "react-icons/md";
 import { GrAnnounce } from "react-icons/gr";
 import { IoCloseSharp } from "react-icons/io5";
 import useLogout from "../hooks/useLogout";
@@ -25,6 +25,11 @@ const Navbar = () => {
             icon: <GrAnnounce className="w-5 h-5" />,
             link: "/notice-board",
         },
+        {
+            text: "Registrations",
+            icon: <MdAppRegistration className="w-5 h-5" />,
+            link: "/registrations",
+        },
     ];
 
     return (

frontend/src/components/RegistrationCard.jsx

@@ -0,0 +1,28 @@
+/* eslint-disable react/prop-types */
+import formatDate from "../utils/formatDate";
+
+const RegistrationCard = ({ event }) => {
+    const date = formatDate(event.createdAt);
+
+    return (
+        <div className="flex flex-col gap-2 items-center bg-green-500/30 backdrop-blur-lg p-3 rounded-lg shadow-lg border border-green-500/20 hover:border-4">
+            <img src="logo.png" alt="logo" className="w-[300px] h-[70px]" />
+            <img src={event.image_url} alt={event.product_id} className="w-[250px] h-[220px] rounded-md" />
+
+            <div className="flex flex-col gap-1 items-center justify-center">
+                <span className="text-lg font-semibold text-gray-700">{event.club} presents</span>
+                <span className="text-xl font-bold">{event.name}</span>
+                <span className="text-gray-600 font-semibold">{event.desc}</span>
+                <span className="text-gray-600">{event.institute}</span>
+                <span className="text-gray-600 font-semibold text-lg">Team Details</span>
+                <span className="text-gray-600">{event.team_name}</span>
+                <span className="text-gray-600">{event.team_lead_name}</span>
+                <span className="text-gray-600">{event.team_lead_phone}</span>
+                <span className="text-gray-600">Team Strength: {event.members.length}</span>
+                <span className="text-gray-600">Date of Purchase: {date}</span>
+            </div>
+        </div>
+    )
+}
+
+export default RegistrationCard;

frontend/src/components/Spinner.jsx

@@ -0,0 +1,15 @@
+import { motion } from 'framer-motion';
+
+const Spinner = () => {
+  return (
+    <div className="flex items-center justify-center h-full">
+      <motion.div
+        animate={{ rotate: 360 }}
+        transition={{ repeat: Infinity, duration: 1, ease: "linear" }}
+        className="h-5 w-5 border-t-4 border-blue-300 border-solid rounded-full"
+      />
+    </div>
+  );
+};
+
+export default Spinner;

frontend/src/hooks/useGetMyEvents.js

@@ -0,0 +1,36 @@
+import { useState } from "react";
+import toast from "react-hot-toast";
+import { useAuthContext } from "../context/AuthContext";
+
+const useGetMyEvents = () => {
+    const [loading, setLoading] = useState();
+    const apiUrl = import.meta.env.VITE_API_URL;
+    const { authUser } = useAuthContext()
+
+    const myEvents = async () => {
+        setLoading(true);
+        try {
+            const res = await fetch(`${apiUrl}/events/my-registrations/${authUser._id}`, {
+                method: "GET",
+                headers: {
+                    "Content-Type": "application/json"
+                }
+            });
+            const data = await res.json();
+
+            if (data.error) {
+                throw new Error(data.error);
+            }
+
+            return data;
+        } catch (error) {
+            toast.error(error.message);
+            console.log(error.message);
+        } finally {
+            setLoading(false);
+        }
+    }
+    return { loading, myEvents }
+}
+
+export default useGetMyEvents;

frontend/src/pages/auth/Login.jsx

@@ -6,6 +6,7 @@ import { HiMiniEyeSlash } from 'react-icons/hi2';
 import useLogin from '../../hooks/useLogin';
 import useForgotPassword from '../../hooks/useForgotPassword';
 import toast from "react-hot-toast";
+import Spinner from "../../components/Spinner";
 
 const Login = () => {
 	const [inputs, setInputs] = useState({ email: '', password: '' });
@@ -18,7 +19,7 @@ const Login = () => {
 
 	const handleSubmit = async (e) => {
 		e.preventDefault();
-		if(forgotPasswordMode) {
+		if (forgotPasswordMode) {
 			return;
 		}
 		if (!inputs.email || !inputs.password) {
@@ -89,9 +90,15 @@ const Login = () => {
 								</div>
 
 								<div className="flex flex-col items-center justify-center mt-10">
-									<button className="w-full bg-green-700 text-white text-lg py-2 rounded-full hover:bg-green-500 transition-colors" disabled={loading}>
-										Login
-									</button>
+									{loading ? (
+										<button className="w-full bg-green-700 text-white text-lg py-2 rounded-full hover:bg-green-500 transition-colors" disabled={loading}>
+											<Spinner />
+										</button>
+									) : (
+										<button className="w-full bg-green-700 text-white text-lg py-2 rounded-full hover:bg-green-500 transition-colors" disabled={loading}>
+											Login
+										</button>
+									)}
 
 									<button onClick={handleForgotPassword} className="text-gray-800 hover:underline hover:text-green-700 mt-3">
 										Forgot Password?
@@ -138,9 +145,15 @@ const Login = () => {
 								</div>
 
 								{otpSent && (<div className="flex flex-col items-center justify-center mt-10">
-									<button className="w-full bg-green-700 text-white text-lg py-2 rounded-full hover:bg-green-500 transition-colors" disabled={otpLoading}>
-										Reset Password
-									</button>
+									{otpLoading ? (
+										<button className="w-full bg-green-700 text-white text-lg py-2 rounded-full hover:bg-green-500 transition-colors" disabled={otpLoading}>
+											<Spinner />
+										</button>
+									) : (
+										<button className="w-full bg-green-700 text-white text-lg py-2 rounded-full hover:bg-green-500 transition-colors" disabled={otpLoading}>
+											Reset Password
+										</button>
+									)}
 								</div>)}
 							</form>
 						</>

frontend/src/pages/auth/Signup.jsx

@@ -6,6 +6,7 @@ import { Link } from "react-router-dom";
 import { useState } from "react";
 import { HiMiniEyeSlash } from 'react-icons/hi2';
 import useSignup from '../../hooks/useSignup';
+import Spinner from "../../components/Spinner";
 
 const Signup = () => {
 	const [inputs, setInputs] = useState({
@@ -126,9 +127,15 @@ const Signup = () => {
 						</div>
 
 						<div className="flex flex-col items-center justify-center mt-5">
-							<button className="w-full bg-green-700 text-white text-lg py-2 rounded-full hover:bg-green-500 transition-colors" disabled={loading}>
+							{loading ? (
+								<button className="w-full bg-green-700 text-white text-lg py-2 rounded-full hover:bg-green-500 transition-colors" disabled={loading}>
+								<Spinner />
+							</button>
+							) : (
+								<button className="w-full bg-green-700 text-white text-lg py-2 rounded-full hover:bg-green-500 transition-colors" disabled={loading}>
 								Signup
 							</button>
+							)}
 
 							<Link to="/login" className="text-gray-800 hover:underline hover:text-green-700 mt-1">
 								Already have an Account? Login

frontend/src/pages/events/Events.jsx

@@ -4,6 +4,7 @@ import useGetClubs from "../../hooks/useGetClubs"; ``
 import ClubCard from "../../components/ClubCard";
 import useGetEvents from "../../hooks/useGetEvents";
 import EventCard from "../../components/EventCard";
+import Spinner from "../../components/Spinner";
 
 const Events = () => {
   const { loading, clubs } = useGetClubs();
@@ -50,7 +51,7 @@ const Events = () => {
         <div className="bg-gray-300 w-full h-[1.5px] mb-7"></div>
 
         {enLoading ? (
-          <span>Loading...</span>
+          <Spinner />
         ) : (
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
             {eventsData.map((event, index) => (