Port change to 4000

Author: Akshit176022

apollo-server.mjs

@@ -21,29 +21,8 @@ const typeDefs = gql`
     about: String
   }
 
-  type BlogPost {
-    id: ID!
-    blog_title: String!
-    image: String!
-    author: String!
-    tags: [String!]!
-    description: String!
-    mdfile: String!
-  }
-
-  type Gallery {
-    id: ID!
-    image: String!
-    event: String
-    title: String
-    desc: String
-    set: String
-  }
-
   type Query {
     members: [Member]
-    blogPosts: [BlogPost]
-    gallery: [Gallery]
   }
 `;
 
@@ -53,20 +32,12 @@ const resolvers = {
       const { profileDetails } = await import(pathToFileURL(path.resolve(__dirname, './data/member_data.mjs')).href);
       return profileDetails;
     },
-    blogPosts: async () => {
-      const { blogData } = await import(pathToFileURL(path.resolve(__dirname, './data/blog_posts.mjs')).href);
-      return blogData;
-    },
-    gallery: async () => {
-      const { data } = await import(pathToFileURL(path.resolve(__dirname, './data/data.mjs')).href);
-      return data;
-    },
   },
 };
 
 const app = express();
 app.use(cors({
-  origin: '*',
+  origin: '*', // Allow all origins for development
 }));
 
 const startApolloServer = async () => {
@@ -80,7 +51,7 @@ const startApolloServer = async () => {
   await server.start();
   server.applyMiddleware({ app, path: '/graphql' });
 
-  const PORT = 5000;
+  const PORT = 4000;
   app.listen(PORT, () => {
     console.log(`🚀 Server ready at http://localhost:${PORT}${server.graphqlPath}`);
   });

data/project_data.mjs

@@ -17,7 +17,7 @@ export const topics = [
             "createdAt": "2024-07-25T22:10:13.564Z",
             "updatedAt": "2024-07-25T22:10:13.564Z",
             "__v": 0,
-             "img":"assets/images/projects/ui:ux.webp",
+             "img":"assets/images/projects/ui.webp",
             link : "https://space-traffic-managment.webflow.io/"
 
         },

public/assets/images/projects/ui:ux.webp public/assets/images/projects/ui.webp

@@ -11,11 +11,13 @@ import Footer from '../../components/footer';
 import Loader from "../../components/loader";
 import SkeletonLoader from "../../components/skeltonloader";
 
+// Apollo Client setup
 const client = new ApolloClient({
-  uri: process.env.GRAPH_QL_URI || 'http://localhost:5000/graphql',
+  uri: process.env.GRAPH_QL_URI || 'http://localhost:4000/graphql', // Make sure this matches your server's URL
   cache: new InMemoryCache(),
 });
 
+// GraphQL Query
 const GET_MEMBERS = gql`
   query GetMembers {
     members {
@@ -38,11 +40,13 @@ const Team = () => {
   const [showImage, setShowImage] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
 
+  // Apollo query hook
   const { loading, error, data } = useQuery(GET_MEMBERS, {
     client,
     fetchPolicy: 'cache-and-network',
   });
 
+  // Scroll progress animation
   const { scrollYProgress } = useScroll();
 
   useEffect(() => {
@@ -82,6 +86,12 @@ const Team = () => {
     return <Loader />;
   }
 
+  // Error handling
+  if (error) {
+    console.error('Error fetching data:', error);
+    return <div>Error: {error.message}</div>;
+  }
+
   return (
     <>
       <Navbar />
@@ -169,13 +179,13 @@ const Team = () => {
             <div className="flex flex-col items-center lg:items-start w-full mt-0 mb-8 lg:mt-80">
               <div className="sm:border-t-2 sm:border-white sm:w-3/4 lg:w-full mx-auto mb-4"></div>
               <div className="grid grid-cols-2 gap-4 lg:grid-cols-1 lg:gap-0 lg:-ml-8 sm:ml-0">
-              <div className="border-2 lg:border-hidden border-white rounded-lg sm:p-2 lg:p-0 lg:text-2xl text-1.3xl transition-transform transform font-actor hover:scale-105">
+                <div className="border-2 lg:border-hidden border-white rounded-lg sm:p-2 lg:p-0 lg:-ml-12 lg:text-2xl text-1.3xl transition-transform transform font-actor hover:scale-105">
                   <button onClick={() => setYear('FI')} className="w-full">FI ISTE</button>
                 </div>
                 <div className="border-2 lg:border-hidden border-white rounded-lg sm:p-2 lg:p-0 lg:text-2xl text-1.3xl text-center transition-transform transform font-actor hover:scale-105">
                   <button onClick={() => setYear('final')} className="w-full">FINAL YEAR</button>
                 </div>
-                <div className="border-2 lg:border-hidden border-white rounded-lg sm:p-2 lg:p-0 lg:text-2xl text-1.3xl text-center transition-transform font-actor transform hover:scale-105">
+                <div className="border-2 lg:border-hidden border-white rounded-lg sm:p-2 lg:p-0 lg:ml-4 lg:text-2xl text-1.3xl text-center transition-transform transform hover:scale-105">
                   <button onClick={() => setYear('Third')} className="w-full">THIRD YEAR</button>
                 </div>
                 <div className="border-2 border-white lg:border-hidden rounded-lg sm:p-2 lg:ml-8 lg:p-0 lg:text-2xl text-1.3xl text-center transition-transform font-actor transform hover:scale-105">
@@ -184,7 +194,6 @@ const Team = () => {
                 <div className="border-2 border-white lg:border-hidden rounded-lg sm:p-2 lg:p-0 lg:text-2xl text-1.3xl text-center transition-transform font-actor transform hover:scale-105">
                   <button onClick={() => setYear('first')} className="w-full">FIRST YEAR</button>
                 </div>
-               
               </div>
             </div>
           </div>
@@ -196,6 +205,7 @@ const Team = () => {
   );
 };
 
+// Wrap Team component with ApolloProvider
 const TeamWithApollo = () => (
   <ApolloProvider client={client}>
     <Team />