Document undefined bug fixed

app/projects/page.tsx

@@ -7,9 +7,10 @@ import Footer from "@/components/ui/Footer";
 import {motion} from "framer-motion";
 import ProjectCard from "@/components/ui/ProjectCard";
 import EmptyState from "@/components/ui/EmptyState";
+import {Project} from "@/interfaces";
 
 const Page = () => {
-    const [selectedFilter, setSelectedFilter] = useState("All")
+    const [selectedFilter, setSelectedFilter] = useState<string>("All")
     const [filters, setFilters] = useState([])
     const [projects, setProjects] = useState([] as Project[])
     const fetchFilterItems = async () => {
@@ -22,8 +23,12 @@ const Page = () => {
     }
     useEffect(() => {
         fetchFilterItems()
+    }, []);
+
+    useEffect(() => {
         fetchProjects()
     }, [selectedFilter])
+
     return (
         <main className="w-full relative min-h-[100vh]">
             <Header/>

context/GlobalProvider.tsx

@@ -1,16 +1,8 @@
 "use client";
 
 import React, {createContext, Dispatch, SetStateAction, useContext, useEffect, useState} from "react";
-import {app, currentUser, loginAnonymouslyUser} from "@/firebase/Config";
-import {initializeAppCheck, ReCaptchaV3Provider} from "@firebase/app-check";
-
-interface GlobalContextType {
-    user: any;
-    playPartyAnimation: boolean;
-    setPlayPartyAnimation: Dispatch<SetStateAction<boolean>>;
-    emailCopied: boolean;
-    setEmailCopied: Dispatch<SetStateAction<boolean>>;
-}
+import {currentUser, loginAnonymouslyUser} from "@/firebase/Config";
+import {GlobalContextType} from "@/interfaces";
 
 const GlobalContext = createContext<GlobalContextType>({} as GlobalContextType);
 export const useGlobalContext = () => useContext(GlobalContext)
@@ -21,16 +13,17 @@ export const GlobalProvider = ({children}: { children: React.ReactNode }) => {
     const [user, setUser] = useState<any>();
 
     const logUser = async () => {
-        if(currentUser){
+        if (currentUser) {
             setUser(currentUser);
             console.log("Current User Logged In")
-        }else {
+        } else {
             const user = await loginAnonymouslyUser();
+            console.log("New User Logged In")
             setUser(user);
         }
     }
     useEffect(() => {
-        logUser().then(() => console.log("New User Logged In"))
+        logUser().then(() => console.log("User Logged In"))
     }, []);
     return (
         <GlobalContext.Provider value={{

firebase/Config.ts

@@ -1,9 +1,13 @@
-import {initializeApp} from "firebase/app";
-import {getAnalytics, isSupported} from "firebase/analytics";
-import {get, getDatabase, ref} from "@firebase/database";
-import {getAuth, signInAnonymously} from "@firebase/auth";
-import {initializeAppCheck, ReCaptchaV3Provider} from "@firebase/app-check";
+"use client";
 
+import { FirebaseApp, initializeApp } from "firebase/app";
+import { getAnalytics, isSupported } from "firebase/analytics";
+import { Database, get, getDatabase, ref } from "@firebase/database";
+import { Auth, getAuth, signInAnonymously } from "@firebase/auth";
+import { AppCheck, initializeAppCheck, ReCaptchaEnterpriseProvider } from "@firebase/app-check";
+import { Project } from "@/interfaces";
+
+// Firebase configuration object
 const firebaseConfig = {
     databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
     apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
@@ -15,68 +19,87 @@ const firebaseConfig = {
     measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID
 };
 
-export const app = initializeApp(firebaseConfig);
-
-initializeAppCheck(app, {
-    // @ts-ignore
-    provider: new ReCaptchaV3Provider(process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY),
-    isTokenAutoRefreshEnabled: true
-});
+// Initialize Firebase only if running in the client environment
+let app: FirebaseApp | null = null;
+let auth: Auth | null = null;
+let db: Database | null = null;
+let appCheck: AppCheck | null = null;
 
-isSupported().then(yes => yes ? getAnalytics(app) : null);
-const auth = getAuth(app);
+if (typeof window !== "undefined" && !app) {
+    app = initializeApp(firebaseConfig);
 
+    appCheck = initializeAppCheck(app, {
+        provider: new ReCaptchaEnterpriseProvider(process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY!),
+        isTokenAutoRefreshEnabled: true,
+    });
 
-export const currentUser = getAuth(app).currentUser;
+    isSupported().then((yes) => yes ? getAnalytics(app!) : null);
 
-const db = getDatabase(app);
-const filterRef = ref(db, 'filters');
-const projectRef = ref(db, "projects")
+    auth = getAuth(app);
+    db = getDatabase(app);
+}
 
+// Function to get filter menu items
 export const getFilterMenuItems = async () => {
+    if (!db) return null; // Ensure db is defined
+
     try {
+        const filterRef = ref(db, "filters");
         const dataSnapshot = await get(filterRef);
-        return dataSnapshot.val()
+        return dataSnapshot.val();
     } catch (e) {
-        console.log(e)
+        console.error(e);
     }
-}
+};
 
+// Function to get projects based on a filter
 export const getProjects = async (filter: string) => {
+    if (!db) return null; // Ensure db is defined
+
     try {
-        let projects;
+        const projectRef = ref(db, "projects");
         const filteredDataSnapshot = await get(projectRef);
-        projects = filteredDataSnapshot.val();
+        let projects: Project[] = filteredDataSnapshot.val() || [];
+
         switch (filter) {
             case "NextJS/React":
-                let nextProjects = projects;
-                projects = projects.filter((project: Project) => project.stack.includes("React"));
-                nextProjects = nextProjects.filter((project: Project) => project.stack.includes("NextJS"));
-                projects = projects.concat(nextProjects)
-                break;
+                const reactProjects = projects.filter((project: Project) => project.stack.includes("React"));
+                const nextJSProjects = projects.filter((project: Project) => project.stack.includes("NextJS"));
+                return [...reactProjects, ...nextJSProjects];
             case "React Native/Expo":
-                let reactNativeProjects = projects;
-                projects = projects.filter((project: Project) => project.stack.includes("Expo"))
-                reactNativeProjects = projects.filter((project: Project) => project.stack.includes("React Native"));
-                projects = projects.concat(reactNativeProjects)
-                break;
+                const expoProjects = projects.filter((project: Project) => project.stack.includes("Expo"));
+                const reactNativeProjects = projects.filter((project: Project) => project.stack.includes("React Native"));
+                return [...expoProjects, ...reactNativeProjects];
             case "Jetpack Compose":
-                projects = projects.filter((project: Project) => project.stack.includes("Jetpack Compose"))
-                break;
+                return projects.filter((project: Project) => project.stack.includes("Jetpack Compose"));
             case "All":
                 return projects;
             default:
-                projects = []
+                return [];
         }
-        return projects;
     } catch (e) {
-        console.log(e)
+        console.error(e);
     }
-}
+};
+
+// Function to log in a user anonymously
 export const loginAnonymouslyUser = async () => {
+    if (!auth) return null; // Ensure auth is defined
+
     try {
         return await signInAnonymously(auth);
     } catch (e) {
-        console.log(e)
+        console.error(e);
     }
-}
+};
+
+// Function to get the current user
+export const currentUser = () => {
+    if (!auth) return null; // Ensure auth is defined
+
+    try {
+        return auth.currentUser;
+    } catch (e) {
+        console.error(e);
+    }
+};

interfaces/index.ts

@@ -1,7 +1,18 @@
-interface Project {
+import {Dispatch, SetStateAction} from "react";
+
+export interface Project {
     name: string;
     description: string;
     stack: string[];
     thumbnail: string;
     url: string;
+}
+
+
+export interface GlobalContextType {
+    user: any;
+    playPartyAnimation: boolean;
+    setPlayPartyAnimation: Dispatch<SetStateAction<boolean>>;
+    emailCopied: boolean;
+    setEmailCopied: Dispatch<SetStateAction<boolean>>;
 }