Implement Firebase configuration with environment variables and update related components

.env.example

@@ -0,0 +1,9 @@
+# Vite only exposes env vars prefixed with VITE_
+# Firebase Web config (these values are not private keys, but still treat your .env as local-only)
+VITE_FIREBASE_API_KEY=
+VITE_FIREBASE_AUTH_DOMAIN=
+VITE_FIREBASE_PROJECT_ID=
+VITE_FIREBASE_STORAGE_BUCKET=
+VITE_FIREBASE_MESSAGING_SENDER_ID=
+VITE_FIREBASE_APP_ID=
+VITE_FIREBASE_MEASUREMENT_ID=

.gitignore

@@ -29,4 +29,3 @@ pnpm-workspace.yaml
 
 # Environment variables
 .env
-.env*

Dockerfile

@@ -2,6 +2,14 @@ FROM node:22 AS builder
 
 WORKDIR /app
 
+ARG VITE_FIREBASE_API_KEY
+ARG VITE_FIREBASE_AUTH_DOMAIN
+ARG VITE_FIREBASE_PROJECT_ID
+ARG VITE_FIREBASE_STORAGE_BUCKET
+ARG VITE_FIREBASE_MESSAGING_SENDER_ID
+ARG VITE_FIREBASE_APP_ID
+ARG VITE_FIREBASE_MEASUREMENT_ID
+
 # Copy package*.json
 COPY package*.json .
 
@@ -12,6 +20,13 @@ RUN npm install
 COPY . .
 
 # Build the application
+ENV VITE_FIREBASE_API_KEY=$VITE_FIREBASE_API_KEY \
+	VITE_FIREBASE_AUTH_DOMAIN=$VITE_FIREBASE_AUTH_DOMAIN \
+	VITE_FIREBASE_PROJECT_ID=$VITE_FIREBASE_PROJECT_ID \
+	VITE_FIREBASE_STORAGE_BUCKET=$VITE_FIREBASE_STORAGE_BUCKET \
+	VITE_FIREBASE_MESSAGING_SENDER_ID=$VITE_FIREBASE_MESSAGING_SENDER_ID \
+	VITE_FIREBASE_APP_ID=$VITE_FIREBASE_APP_ID \
+	VITE_FIREBASE_MEASUREMENT_ID=$VITE_FIREBASE_MEASUREMENT_ID
 RUN npm run build
 
 FROM nginx:alpine

docker-compose.yml

@@ -1,18 +1,19 @@
 services:
   app:
-    build: .
+    build:
-    environment:
+      context: .
-      apiKey: ${apiKey}
+      args:
-      authDomain: ${authDomain}
+        VITE_FIREBASE_API_KEY: ${VITE_FIREBASE_API_KEY}
-      projectId: ${projectId}
+        VITE_FIREBASE_AUTH_DOMAIN: ${VITE_FIREBASE_AUTH_DOMAIN}
-      storageBucket: ${storageBucket}
+        VITE_FIREBASE_PROJECT_ID: ${VITE_FIREBASE_PROJECT_ID}
-      messagingSenderId: ${messagingSenderId}
+        VITE_FIREBASE_STORAGE_BUCKET: ${VITE_FIREBASE_STORAGE_BUCKET}
-      appId: ${appId}
+        VITE_FIREBASE_MESSAGING_SENDER_ID: ${VITE_FIREBASE_MESSAGING_SENDER_ID}
-      measurementId: ${measurementId}
+        VITE_FIREBASE_APP_ID: ${VITE_FIREBASE_APP_ID}
+        VITE_FIREBASE_MEASUREMENT_ID: ${VITE_FIREBASE_MEASUREMENT_ID}
     ports:
       - "80"
     deploy:
-      replicas: 1
+      replicas: 3
       restart_policy:
         condition: on-failure
       rollback_config:

firebase.ts

@@ -1,22 +1 @@
-// Import the functions you need from the SDKs you need
+export { app, db } from "./src/firebase.ts";
-import { initializeApp } from "firebase/app";
-import { getFirestore } from "firebase/firestore";
-// 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
-// For Firebase JS SDK v7.20.0 and later, measurementId is optional
-const firebaseConfig = {
-  apiKey: process.env.apiKey,
-  authDomain: process.env.authDomain,
-  projectId: process.env.projectId,
-  storageBucket: process.env.storageBucket,
-  messagingSenderId: process.env.messagingSenderId,
-  appId: process.env.appId,
-  measurementId: process.env.measurementId
-};
-
-// Initialize Firebase
-const app = initializeApp(firebaseConfig);
-const db = getFirestore(app);
-export { app, db };

src/App.tsx

@@ -11,6 +11,7 @@ import AthleticSection from "./components/AthleticsSection";
 import EntrepreuneurshipSection from "./components/EntrepreneurshipSection";
 import ReviewSection from "./components/ReviewSection";
 import Footer from "./components/Footer";
+import { isFirebaseConfigured } from "./firebase";
 
 const App = () => {
   const { theme, toggleTheme } = useTheme();
@@ -23,11 +24,34 @@ const App = () => {
     text: "",
   });
 
+  const formatFirebaseError = (error: unknown): string => {
+    if (error && typeof error === "object") {
+      const maybeCode = (error as { code?: unknown }).code;
+      const maybeMessage = (error as { message?: unknown }).message;
+      const code = typeof maybeCode === "string" ? maybeCode : undefined;
+      const message = typeof maybeMessage === "string" ? maybeMessage : undefined;
+      if (code && message) return `${code}: ${message}`;
+      if (message) return message;
+    }
+    return String(error);
+  };
+
   useEffect(() => {
-    fetchReviews().then(setReviews);
+    fetchReviews()
+      .then(setReviews)
+      .catch((error) => {
+        console.error("Error fetching reviews:", error);
+      });
   }, []);
 
   const handleAddReview = () => {
+    if (!isFirebaseConfigured) {
+      alert(
+        "Reviews are not configured yet. Add VITE_FIREBASE_* values to a .env/.env.local file and restart `pnpm dev`."
+      );
+      return;
+    }
+
     if (
       !newReview.name ||
       newReview.rating < 1 ||
@@ -42,14 +66,18 @@ const App = () => {
     // Add the new review to the state
     addReview(newReview)
       .then(() => {
-        fetchReviews().then(setReviews);
+        fetchReviews()
+          .then(setReviews)
+          .catch((error) => {
+            console.error("Error fetching reviews after add:", error);
+          });
         alert("Review added successfully!");
         setNewReview({ name: "", rating: -1, position: "", text: "" });
         setShowModal(false);
       })
       .catch((error) => {
         console.error("Error adding review:", error);
-        alert("Failed to add review. Please try again later.");
+        alert(`Failed to add review: ${formatFirebaseError(error)}`);
         setShowModal(false);
       });
   };
@@ -60,8 +88,7 @@ const App = () => {
       .map((_, i) => (
         <Star
           key={i}
-          className={`w-4 h-4 ${
+          className={`w-4 h-4 ${i < rating ? "fill-yellow-400 text-yellow-400" : "text-gray-300"
-            i < rating ? "fill-yellow-400 text-yellow-400" : "text-gray-300"
             }`}
         />
       ));
@@ -69,8 +96,7 @@ const App = () => {
 
   return (
     <div
-      className={`min-h-screen transition-all duration-300 ${
+      className={`min-h-screen transition-all duration-300 ${theme === "dark"
-        theme === "dark"
           ? "bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900"
           : "bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100"
         }`}
@@ -78,8 +104,7 @@ const App = () => {
       {/* Theme Toggle Button */}
       <button
         onClick={toggleTheme}
-        className={`fixed top-4 right-4 z-50 p-3 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 border ${
+        className={`fixed top-4 right-4 z-50 p-3 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 border ${theme === "dark"
-          theme === "dark"
             ? "bg-slate-800 text-white border-slate-700 hover:bg-slate-700"
             : "bg-white text-slate-800 border-slate-200 hover:bg-slate-50"
           }`}
@@ -128,23 +153,20 @@ const App = () => {
       {showModal && (
         <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm">
           <div
-            className={`rounded-2xl shadow-2xl w-full max-w-md ${
+            className={`rounded-2xl shadow-2xl w-full max-w-md ${theme === "dark" ? "bg-slate-800" : "bg-white"
-              theme === "dark" ? "bg-slate-800" : "bg-white"
               }`}
           >
             <div className="p-6">
               <div className="flex items-center justify-between mb-6">
                 <h3
-                  className={`text-xl font-semibold ${
+                  className={`text-xl font-semibold ${theme === "dark" ? "text-white" : "text-slate-800"
-                    theme === "dark" ? "text-white" : "text-slate-800"
                     }`}
                 >
                   Add a Review
                 </h3>
                 <button
                   onClick={() => setShowModal(false)}
-                  className={`transition-colors ${
+                  className={`transition-colors ${theme === "dark"
-                    theme === "dark"
                       ? "text-slate-500 hover:text-slate-300"
                       : "text-slate-400 hover:text-slate-600"
                     }`}
@@ -155,8 +177,7 @@ const App = () => {
               <div className="space-y-4">
                 <div>
                   <label
-                    className={`block text-sm font-medium mb-1 ${
+                    className={`block text-sm font-medium mb-1 ${theme === "dark" ? "text-slate-300" : "text-slate-700"
-                      theme === "dark" ? "text-slate-300" : "text-slate-700"
                       }`}
                   >
                     Name
@@ -167,8 +188,7 @@ const App = () => {
                     onChange={(e) =>
                       setNewReview({ ...newReview, name: e.target.value })
                     }
-                    className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 ${
+                    className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 ${theme === "dark"
-                      theme === "dark"
                         ? "border-slate-600 bg-slate-700 text-white"
                         : "border-slate-300 bg-white text-slate-900"
                       }`}
@@ -177,8 +197,7 @@ const App = () => {
                 </div>
                 <div>
                   <label
-                    className={`block text-sm font-medium mb-1 ${
+                    className={`block text-sm font-medium mb-1 ${theme === "dark" ? "text-slate-300" : "text-slate-700"
-                      theme === "dark" ? "text-slate-300" : "text-slate-700"
                       }`}
                   >
                     Position
@@ -189,8 +208,7 @@ const App = () => {
                     onChange={(e) =>
                       setNewReview({ ...newReview, position: e.target.value })
                     }
-                    className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 ${
+                    className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 ${theme === "dark"
-                      theme === "dark"
                         ? "border-slate-600 bg-slate-700 text-white"
                         : "border-slate-300 bg-white text-slate-900"
                       }`}
@@ -199,8 +217,7 @@ const App = () => {
                 </div>
                 <div>
                   <label
-                    className={`block text-sm font-medium mb-1 ${
+                    className={`block text-sm font-medium mb-1 ${theme === "dark" ? "text-slate-300" : "text-slate-700"
-                      theme === "dark" ? "text-slate-300" : "text-slate-700"
                       }`}
                   >
                     Rating
@@ -215,8 +232,7 @@ const App = () => {
                         className="text-2xl transition-transform hover:scale-110"
                       >
                         <Star
-                          className={`w-6 h-6 ${
+                          className={`w-6 h-6 ${star <= newReview.rating
-                            star <= newReview.rating
                               ? "fill-yellow-400 text-yellow-400"
                               : theme === "dark"
                                 ? "text-gray-600"
@@ -229,8 +245,7 @@ const App = () => {
                 </div>
                 <div>
                   <label
-                    className={`block text-sm font-medium mb-1 ${
+                    className={`block text-sm font-medium mb-1 ${theme === "dark" ? "text-slate-300" : "text-slate-700"
-                      theme === "dark" ? "text-slate-300" : "text-slate-700"
                       }`}
                   >
                     Review
@@ -240,8 +255,7 @@ const App = () => {
                     onChange={(e) =>
                       setNewReview({ ...newReview, text: e.target.value })
                     }
-                    className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 ${
+                    className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 ${theme === "dark"
-                      theme === "dark"
                         ? "border-slate-600 bg-slate-700 text-white"
                         : "border-slate-300 bg-white text-slate-900"
                       }`}
@@ -253,8 +267,7 @@ const App = () => {
               <div className="flex gap-3 mt-6">
                 <button
                   onClick={() => setShowModal(false)}
-                  className={`flex-1 px-4 py-2 border rounded-lg transition-colors ${
+                  className={`flex-1 px-4 py-2 border rounded-lg transition-colors ${theme === "dark"
-                    theme === "dark"
                       ? "border-slate-600 text-slate-300 bg-slate-700 hover:bg-slate-600"
                       : "border-slate-300 text-slate-700 bg-white hover:bg-slate-50"
                     }`}
@@ -263,7 +276,8 @@ const App = () => {
                 </button>
                 <button
                   onClick={handleAddReview}
-                  className="flex-1 px-4 py-2 text-white transition-colors bg-indigo-600 rounded-lg hover:bg-indigo-700"
+                  disabled={!isFirebaseConfigured}
+                  className="flex-1 px-4 py-2 text-white transition-colors bg-indigo-600 rounded-lg hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-indigo-600"
                 >
                   Add Review
                 </button>

src/components/Footer.tsx

@@ -10,10 +10,9 @@ const Footer: React.FC<Props> = ({ isOutOfCollege }) => {
 
   return (
     <section className="mb-16">
-          <div className={`rounded-2xl shadow-xl text-white p-12 text-center transition-all duration-300 ${
+      <div className={`rounded-2xl shadow-xl text-white p-12 text-center transition-all duration-300 ${theme === 'dark'
-            theme === 'dark' 
+        ? 'bg-linear-to-r from-indigo-700 to-purple-700'
-              ? 'bg-gradient-to-r from-indigo-700 to-purple-700' 
+        : 'bg-linear-to-r from-indigo-600 to-purple-600'
-              : 'bg-gradient-to-r from-indigo-600 to-purple-600'
         }`}>
         <h2 className="mb-6 text-4xl font-bold">Let's Connect</h2>
         <p className="mb-8 text-xl opacity-90">
@@ -22,7 +21,7 @@ const Footer: React.FC<Props> = ({ isOutOfCollege }) => {
         </p>
         <div className="flex flex-wrap justify-center gap-6">
           <a
-                href="khokharmaaz@gmail.com"
+            href="mailto:khokharmaaz@gmail.com"
             className="flex items-center gap-2 px-6 py-3 transition-colors rounded-lg bg-white/20 backdrop-blur-sm hover:bg-white/30"
           >
             <Mail className="w-5 h-5" />

src/components/ReviewSection.tsx

@@ -1,5 +1,5 @@
 import { Star, Plus } from 'lucide-react';
-import { type JSX } from 'react';
+import type { FC, JSX } from 'react';
 import { type Review } from '../reviewsApi';
 import { useTheme } from '../contexts/ThemeContext';
 
@@ -9,18 +9,16 @@ interface Props {
   renderStars: (rating: number) => JSX.Element[];
 }
 
-const ReviewSection: React.FC<Props> = ({ setShowModal, renderStars, reviews }) => {
+const ReviewSection: FC<Props> = ({ setShowModal, renderStars, reviews }) => {
   const { theme } = useTheme();
 
   return (
     <section className="mb-16">
       <div className="flex items-center justify-between mb-8">
         <div className="flex items-center gap-3">
-              <Star className={`w-8 h-8 transition-colors duration-300 ${
+          <Star className={`w-8 h-8 transition-colors duration-300 ${theme === 'dark' ? 'text-indigo-400' : 'text-indigo-600'
-                theme === 'dark' ? 'text-indigo-400' : 'text-indigo-600'
             }`} />
-              <h2 className={`text-3xl font-bold transition-colors duration-300 ${
+          <h2 className={`text-3xl font-bold transition-colors duration-300 ${theme === 'dark' ? 'text-white' : 'text-slate-800'
-                theme === 'dark' ? 'text-white' : 'text-slate-800'
             }`}>
             Professional Reviews
           </h2>
@@ -34,30 +32,25 @@ const ReviewSection: React.FC<Props> = ({ setShowModal, renderStars, reviews })
         </button>
       </div>
       <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-            {reviews.length > 1 ? (
+        {reviews.length > 0 ? (
           reviews.map((review, index) => (
             <div
               key={index}
-                  className={`rounded-2xl shadow-lg p-6 hover:shadow-xl transition-all duration-300 ${
+              className={`rounded-2xl shadow-lg p-6 hover:shadow-xl transition-all duration-300 ${theme === 'dark' ? 'bg-slate-800' : 'bg-white'
-                    theme === 'dark' ? 'bg-slate-800' : 'bg-white'
                 }`}
             >
               <div className="flex items-center gap-3 mb-4">
-                    <div className={`w-12 h-12 rounded-full flex items-center justify-center transition-colors duration-300 ${
+                <div className={`w-12 h-12 rounded-full flex items-center justify-center transition-colors duration-300 ${theme === 'dark' ? 'bg-blue-900/30' : 'bg-blue-100'
-                      theme === 'dark' ? 'bg-blue-900/30' : 'bg-blue-100'
                   }`}>
-                      <Star className={`w-8 h-8 ${
+                  <Star className={`w-8 h-8 ${theme === 'dark' ? 'text-blue-400' : 'text-blue-600'
-                        theme === 'dark' ? 'text-blue-400' : 'text-blue-600'
                     }`} />
                 </div>
                 <div>
-                      <h3 className={`text-lg font-semibold transition-colors duration-300 ${
+                  <h3 className={`text-lg font-semibold transition-colors duration-300 ${theme === 'dark' ? 'text-white' : 'text-slate-800'
-                        theme === 'dark' ? 'text-white' : 'text-slate-800'
                     }`}>
                     {review.name}
                   </h3>
-                      <p className={`text-sm transition-colors duration-300 ${
+                  <p className={`text-sm transition-colors duration-300 ${theme === 'dark' ? 'text-slate-400' : 'text-slate-600'
-                        theme === 'dark' ? 'text-slate-400' : 'text-slate-600'
                     }`}>
                     {review.position}
                   </p>
@@ -66,14 +59,12 @@ const ReviewSection: React.FC<Props> = ({ setShowModal, renderStars, reviews })
               <div className="flex items-center mb-4">
                 {renderStars(review.rating)}
               </div>
-                  <p className={`transition-colors duration-300 ${
+              <p className={`transition-colors duration-300 ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'
-                    theme === 'dark' ? 'text-slate-300' : 'text-slate-700'
                 }`}>{review.text}</p>
             </div>
           ))
         ) : (
-              <div className={`col-span-full text-center rounded-2xl p-6 transition-colors duration-300 ${
+          <div className={`col-span-full text-center rounded-2xl p-6 transition-colors duration-300 ${theme === 'dark'
-                theme === 'dark' 
               ? 'text-slate-400 bg-slate-700'
               : 'text-slate-500 bg-slate-100'
             }`}>

src/firebase.ts

@@ -0,0 +1,58 @@
+import { initializeApp, type FirebaseApp } from "firebase/app";
+import { getFirestore, type Firestore } from "firebase/firestore";
+
+const requiredEnvKeys = [
+  "VITE_FIREBASE_API_KEY",
+  "VITE_FIREBASE_AUTH_DOMAIN",
+  "VITE_FIREBASE_PROJECT_ID",
+  "VITE_FIREBASE_STORAGE_BUCKET",
+  "VITE_FIREBASE_MESSAGING_SENDER_ID",
+  "VITE_FIREBASE_APP_ID",
+] as const;
+
+type RequiredEnvKey = (typeof requiredEnvKeys)[number];
+
+type FirebaseConfig = {
+  apiKey: string;
+  authDomain: string;
+  projectId: string;
+  storageBucket: string;
+  messagingSenderId: string;
+  appId: string;
+  measurementId?: string;
+};
+
+function buildFirebaseConfig(): FirebaseConfig | null {
+  const missing = requiredEnvKeys.filter(
+    (key) => !import.meta.env[key as RequiredEnvKey]
+  );
+
+  if (missing.length > 0) {
+    console.error(
+      `[firebase] Missing Vite env vars: ${missing.join(
+        ", "
+      )}. Add them to .env (dev) or as build args (docker build).`
+    );
+    return null;
+  }
+
+  return {
+    apiKey: import.meta.env.VITE_FIREBASE_API_KEY!,
+    authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN!,
+    projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID!,
+    storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET!,
+    messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID!,
+    appId: import.meta.env.VITE_FIREBASE_APP_ID!,
+    measurementId: import.meta.env.VITE_FIREBASE_MEASUREMENT_ID,
+  };
+}
+
+const firebaseConfig = buildFirebaseConfig();
+
+export const isFirebaseConfigured = Boolean(firebaseConfig);
+
+export const app: FirebaseApp | null = firebaseConfig
+  ? initializeApp(firebaseConfig)
+  : null;
+
+export const db: Firestore | null = app ? getFirestore(app) : null;

src/reviewsApi.ts

@@ -1,4 +1,4 @@
-import { db } from '../firebase';
+import { db } from './firebase.ts';
 import { collection, getDocs, addDoc } from 'firebase/firestore';
 
 export type Review = {
@@ -8,13 +8,15 @@ export type Review = {
   text: string;
 };
 
-const reviewsCollection = collection(db, 'reviews');
+const reviewsCollection = db ? collection(db, 'reviews') : null;
 
 export async function fetchReviews(): Promise<Review[]> {
+  if (!reviewsCollection) return [];
   const snapshot = await getDocs(reviewsCollection);
   return snapshot.docs.map(doc => doc.data() as Review);
 }
 
 export async function addReview(review: Review): Promise<void> {
+  if (!reviewsCollection) throw new Error('Firestore is not configured (missing Vite Firebase env vars).');
   await addDoc(reviewsCollection, review);
 }

src/vite-env.d.ts

@@ -1 +1,15 @@
 /// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+	readonly VITE_FIREBASE_API_KEY?: string;
+	readonly VITE_FIREBASE_AUTH_DOMAIN?: string;
+	readonly VITE_FIREBASE_PROJECT_ID?: string;
+	readonly VITE_FIREBASE_STORAGE_BUCKET?: string;
+	readonly VITE_FIREBASE_MESSAGING_SENDER_ID?: string;
+	readonly VITE_FIREBASE_APP_ID?: string;
+	readonly VITE_FIREBASE_MEASUREMENT_ID?: string;
+}
+
+interface ImportMeta {
+	readonly env: ImportMetaEnv;
+}