feat: Add firebase basic setup

.env.example

@@ -0,0 +1,7 @@
+NEXT_PUBLIC_FIREBASE_API_KEY=
+NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
+NEXT_PUBLIC_FIREBASE_PROJECT_ID=
+NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
+NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=
+NEXT_PUBLIC_FIREBASE_APP_ID=
+NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=

package.json

@@ -18,6 +18,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "embla-carousel-react": "^8.0.2",
+    "firebase": "^10.11.1",
     "lucide-react": "^0.360.0",
     "material-symbols": "^0.17.1",
     "next": "14.1.4",

src/components/GridCard.tsx

@@ -26,7 +26,6 @@ const GridCard = ({
   cardBorderColor,
   variant = "secondary",
 }: GridCardProps) => {
-  console.log(image);
   return (
     <div
       className={`text-start flex flex-col items-start gap-16 py-12 px-8 md:py-16 md:px-12 rounded-xl justify-between ${backgroundColor} hover:outline hover:outline-[1px] hover:outline-${cardBorderColor}`}

src/context/AuthContext.tsx

@@ -0,0 +1,49 @@
+'use client'
+import { createContext, useContext, useEffect, useState, ReactNode } from 'react';
+import { getAuth, onAuthStateChanged, User } from 'firebase/auth';
+import firebase_app from '@/lib/firebase/config';
+import Loading from '@/app/loading';
+
+// Initialize Firebase auth instance
+const auth = getAuth( firebase_app );
+
+// Create the authentication context
+export const AuthContext = createContext( {} );
+
+// Custom hook to access the authentication context
+export const useAuthContext = () => useContext( AuthContext );
+
+interface AuthContextProviderProps {
+  children: ReactNode;
+}
+
+export function AuthContextProvider( { children }: AuthContextProviderProps ): JSX.Element {
+  // Set up state to track the authenticated user and loading status
+  const [ user, setUser ] = useState<User | null>( null );
+  const [ loading, setLoading ] = useState( true );
+
+  useEffect( () => {
+    // Subscribe to the authentication state changes
+    const unsubscribe = onAuthStateChanged( auth, ( user ) => {
+      if ( user ) {
+        // User is signed in
+        setUser( user );
+      } else {
+        // User is signed out
+        setUser( null );
+      }
+      // Set loading to false once authentication state is determined
+      setLoading( false );
+    } );
+
+    // Unsubscribe from the authentication state changes when the component is unmounted
+    return () => unsubscribe();
+  }, [] );
+
+  // Provide the authentication context to child components
+  return (
+    <AuthContext.Provider value={{ user }}>
+      {loading ? <Loading/> : children}
+    </AuthContext.Provider>
+  );
+}

src/lib/firebase/auth/signIn.ts

@@ -0,0 +1,19 @@
+import firebase_app from "../config";
+import { signInWithEmailAndPassword, getAuth } from "firebase/auth";
+
+// Get the authentication instance using the Firebase app
+const auth = getAuth(firebase_app);
+
+// Function to sign in with email and password
+export default async function signIn(email: string, password: string) {
+  let result = null, // Variable to store the sign-in result
+    error = null; // Variable to store any error that occurs
+
+  try {
+    result = await signInWithEmailAndPassword(auth, email, password); // Sign in with email and password
+  } catch (e) {
+    error = e; // Catch and store any error that occurs during sign-in
+  }
+
+  return { result, error }; // Return the sign-in result and error (if any)
+}

src/lib/firebase/auth/signUp.ts

@@ -0,0 +1,19 @@
+import firebase_app from "../config";
+import { createUserWithEmailAndPassword, getAuth } from "firebase/auth";
+
+// Get the authentication instance using the Firebase app
+const auth = getAuth(firebase_app);
+
+// Function to sign up a user with email and password
+export default async function signUp(email: string, password: string) {
+  let result = null, // Variable to store the sign-up result
+    error = null; // Variable to store any error that occurs
+
+  try {
+    result = await createUserWithEmailAndPassword(auth, email, password); // Create a new user with email and password
+  } catch (e) {
+    error = e; // Catch and store any error that occurs during sign-up
+  }
+
+  return { result, error }; // Return the sign-up result and error (if any)
+}

src/lib/firebase/config.ts

@@ -0,0 +1,19 @@
+// Import the functions you need from the SDKs you need
+import { initializeApp, getApps } from "firebase/app";
+// TODO: Add SDKs for Firebase products that you want to use
+// https://firebase.google.com/docs/web/setup#available-libraries
+
+// Your web app's Firebase configuration
+const firebaseConfig = {
+  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
+  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
+  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
+  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
+  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
+  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
+};
+
+// Initialize Firebase
+let firebase_app = getApps().length === 0 ? initializeApp(firebaseConfig) : getApps()[0];
+
+export default firebase_app;

src/lib/firebase/firestore/addData.ts

@@ -0,0 +1,30 @@
+import firebase_app from "../config";
+import { getFirestore, doc, setDoc } from "firebase/firestore";
+
+// Get the Firestore instance
+const db = getFirestore(firebase_app);
+
+// Function to add data to a Firestore collection
+export default async function addData(
+  collection: string,
+  id: string,
+  data: any
+) {
+  // Variable to store the result of the operation
+  let result = null;
+  // Variable to store any error that occurs during the operation
+  let error = null;
+
+  try {
+    // Set the document with the provided data in the specified collection and ID
+    result = await setDoc(doc(db, collection, id), data, {
+      merge: true, // Merge the new data with existing document data
+    });
+  } catch (e) {
+    // Catch and store any error that occurs during the operation
+    error = e;
+  }
+
+  // Return the result and error as an object
+  return { result, error };
+}

src/lib/firebase/firestore/getData.ts

@@ -0,0 +1,26 @@
+import firebase_app from "../config";
+import { getFirestore, doc, getDoc } from "firebase/firestore";
+
+// Get the Firestore instance
+const db = getFirestore(firebase_app);
+
+// Function to retrieve a document from a Firestore collection
+export default async function getDocument(collection: string, id: string) {
+  // Create a document reference using the provided collection and ID
+  const docRef = doc(db, collection, id);
+  // Variable to store the result of the operation
+  let result = null;
+  // Variable to store any error that occurs during the operation
+  let error = null;
+
+  try {
+    // Retrieve the document using the document reference
+    result = await getDoc(docRef);
+  } catch (e) {
+    // Catch and store any error that occurs during the operation
+    error = e;
+  }
+
+  // Return the result and error as an object
+  return { result, error };
+}