Loader done

src/app/(pages)/developers/developers.module.scss

@@ -8,16 +8,16 @@
   color: #1e3432;
   margin-bottom: 20px;
   font-size: 60px;
+  padding-top: 5rem;
 }
 .devGrid {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  margin-top: 4rem;
+  margin: 4rem 0rem 4rem 4rem;
   flex-wrap: wrap;
   gap: 10rem;
-  margin-left: 8rem;
 }
 .devCard {
   display: flex;
@@ -52,7 +52,7 @@
 
 @media (max-width: 1000px) {
   .devGrid {
-    margin-left: 1rem;
+    margin-left: 0rem;
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -66,7 +66,7 @@
 
 @media (max-width: 800px) {
   .devGrid {
-    margin-left: 1rem;
+    margin-left: 0rem;
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -79,7 +79,7 @@
 }
 @media (max-width: 700px) {
   .devGrid {
-    margin-left: 1rem;
+    margin-left: 0rem;
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -106,7 +106,7 @@
 }
 @media (max-width: 500px) {
   .devGrid {
-    margin-left: 1rem;
+    margin-left: 0rem;
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -133,7 +133,7 @@
 }
 @media (max-width: 400px) {
   .devGrid {
-    margin-left: 1rem;
+    margin-left: 0rem;
     display: flex;
     flex-direction: row;
     align-items: center;

src/app/(pages)/developers/page.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-array-index-key */
 /* eslint-disable @next/next/no-img-element */
 
 /* eslint-disable import/extensions */
@@ -24,9 +25,9 @@ const Developers = () => {
       <h1>Developed by E-cell ,Nit Silchar</h1>
 
       <div className={styles.devGrid}>
-        {developers.map((member) => {
+        {developers.map((member, index) => {
           return (
-            <div className={styles.devCard}>
+            <div key={index} className={styles.devCard}>
               <Image
                 className={styles.devImage}
                 src={member.image}

src/app/(pages)/feedback/feedback.module.scss

@@ -34,6 +34,7 @@
     width: 100%;
     color: #1e3432;
     font-weight: 500;
+    margin-top: 2rem;
   }
   .feedbackContainer {
     width: 100%;

src/app/(pages)/page.js

@@ -9,7 +9,11 @@ export const metadata = {
   description: "Welcome",
 };
 
-export default function Home() {
+export default async function Home() {
+  await new Promise((resolve) => {
+    setTimeout(resolve, 3000);
+  });
+
   return (
     <main className="bg-white w-screen min-h-screen flex flex-col items-center pb-16">
       <div className="w-[70vw] rounded-lg md:rounded-3xl mt-[6.75rem]">

src/app/(pages)/team/TeamMember.jsx

@@ -4,8 +4,10 @@ import { useEffect, useState } from "react";
 import Image from "next/image";
 import styles from "./team.module.scss";
 import "../../globals.scss";
+import members from "../../../../public/data/team";
 
 const Team = () => {
+  // eslint-disable-next-line no-unused-vars
   const [teamMembers, setTeamMembers] = useState([]);
   const [error, setError] = useState("");
 
@@ -40,9 +42,10 @@ const Team = () => {
     <div className={styles.teamContainer}>
       <h1>Team Members</h1>
       <div className={styles.teamGrid}>
-        {teamMembers.map((member) => {
+        {members.map((member, index) => {
           return (
-            <div className={styles.teamCard}>
+            // eslint-disable-next-line react/no-array-index-key
+            <div key={index} className={styles.teamCard}>
               <Image
                 className={styles.teamImage}
                 src={member.image || "/images/placeholder_image.jpg"}

src/app/(pages)/team/team.module.scss

@@ -9,16 +9,16 @@
   color: #1e3432;
   margin-bottom: 20px;
   font-size: 60px;
+  padding-top: 5rem;
 }
 .teamGrid {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  margin-top: 4rem;
+  margin: 4rem 0rem 4rem 4rem;
   flex-wrap: wrap;
   gap: 10rem;
-  margin-left: 8rem;
 }
 .teamCard {
   display: flex;
@@ -54,7 +54,7 @@
 
 @media (max-width: 1000px) {
   .teamGrid {
-    margin-left: 1rem;
+    margin-left: 0rem;
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -67,7 +67,7 @@
 }
 @media (max-width: 800px) {
   .teamGrid {
-    margin-left: 1rem;
+    margin-left: 0rem;
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -80,7 +80,7 @@
 }
 @media (max-width: 700px) {
   .teamGrid {
-    margin-left: 1rem;
+    margin-left: 0rem;
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -108,7 +108,7 @@
 
 @media (max-width: 500px) {
   .teamGrid {
-    margin-left: 1rem;
+    margin-left: 0rem;
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -135,7 +135,7 @@
 }
 @media (max-width: 400px) {
   .teamGrid {
-    margin-left: 1rem;
+    margin-left: 0rem;
     display: flex;
     flex-direction: row;
     align-items: center;

src/app/globals.scss

@@ -147,3 +147,39 @@ body {
 .btn:hover {
   --x: 0%;
 }
+
+.loading-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  background-color: #f0f0f0;
+  color: #333;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.spinner {
+  width: 60px;
+  height: 60px;
+  border: 8px solid rgba(0, 0, 0, 0.1);
+  border-top: 8px solid #1e3432;
+  border-radius: 50%;
+  animation: spin 2s linear infinite;
+  margin-bottom: 10px;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.loading-container p {
+  font-size: 16px;
+  margin-top: 10px;
+  color: #555;
+}

src/app/layout.js

@@ -1,5 +1,7 @@
-import ToastHandler from "./components/ToastHandler";
 import "./globals.scss";
+import { Suspense } from "react";
+import Loading from "./loading";
+import ToastHandler from "./components/ToastHandler";
 
 export const metadata = {
   title: "Currenci",
@@ -11,7 +13,7 @@ export default function RootLayout({ children }) {
   return (
     <html lang="en">
       <body>
-        {children}
+        <Suspense fallback={<Loading />}>{children}</Suspense>
         <ToastHandler />
       </body>
     </html>

src/app/loading.js

@@ -1,7 +1,13 @@
 "use client";
 
-const loading = () => {
-  return <div className="loader"></div>;
-};
+import "./globals.scss";
 
-export default loading;
+export default function Loading() {
+  console.log("Loading component is rendering...");
+  return (
+    <div className="loading-container">
+      <div className="spinner"></div>
+      <p>Loading...</p>
+    </div>
+  );
+}

src/middleware.ts

@@ -23,3 +23,33 @@ export function middleware(request: NextRequest) {
 export const config = {
   matcher: ["/", "/signIn", "/signUp"],
 };
+
+const jwt = require("jsonwebtoken");
+
+export async function adminAuth(req, res, next) {
+  const token = await req.header("Authorization");
+
+  if (!token) {
+    return res
+      .status(401)
+      .json({ message: "Access denied. No token provided." });
+  }
+
+  try {
+    // Verify token
+    const decoded = jwt.verify(token, process.env.SECRET_KEY);
+    req.user = decoded;
+
+    // Check if the user has an admin role
+    if (req.user.role !== "admin") {
+      return res
+        .status(403)
+        .json({ message: "Access denied. Admin privileges required." });
+    }
+
+    next();
+  } catch (error) {
+    res.status(400).json({ message: "Invalid token." });
+  }
+  return next();
+}