feat: add Google AdSense component and integrate it into the layout; refactor Appwrite client initialization to use environment variables from a new lib/appwrite/env module

Author: danieldanielecki

.env.example

@@ -10,6 +10,7 @@ NEXT_PUBLIC_APPWRITE_COLLECTION_ID_TRIALS=
 NEXT_PUBLIC_APPWRITE_DATABASE_ID=
 NEXT_PUBLIC_APPWRITE_ENDPOINT=
 NEXT_PUBLIC_APPWRITE_PROJECT_ID=
+NEXT_PUBLIC_ADSENSE_CLIENT_ID=
 NEXT_PUBLIC_GA_TRACKING_ID=
 NEXT_PUBLIC_STRIPE_PRICE_ADS_FREE=price_...
 NEXT_PUBLIC_STRIPE_PRICE_BYOK=price_...

app/api/explanations/route.ts

@@ -2,6 +2,11 @@ import { NextRequest, NextResponse } from "next/server";
 import { Client, Databases, Query } from "node-appwrite";
 import { ExplanationService } from "../../../lib/explanation-service";
 import crypto from "crypto";
+import {
+  appwriteApiKey,
+  appwriteEndpoint,
+  appwriteProjectId,
+} from "@practice-tests-exams-platform/lib/appwrite/env";
 
 // Decrypt API key (same logic as in api-keys route)
 function decryptApiKey(encryptedKey: string): string {
@@ -31,9 +36,9 @@ function decryptApiKey(encryptedKey: string): string {
 // Initialize Appwrite client
 function getAppwriteClient() {
   const client = new Client()
-    .setEndpoint(process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT || "")
-    .setProject(process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID || "")
-    .setKey(process.env.NEXT_PUBLIC_APPWRITE_API_KEY || "");
+    .setEndpoint(appwriteEndpoint)
+    .setProject(appwriteProjectId)
+    .setKey(appwriteApiKey);
 
   return new Databases(client);
 }

app/api/profile/api-keys/route.ts

@@ -1,6 +1,11 @@
 import { NextRequest, NextResponse } from "next/server";
 import { Client, Databases, Query } from "node-appwrite";
 import crypto from "crypto";
+import {
+  appwriteApiKey,
+  appwriteEndpoint,
+  appwriteProjectId,
+} from "@practice-tests-exams-platform/lib/appwrite/env";
 
 // Simple encryption for API keys (uses environment variable as key)
 function encryptApiKey(apiKey: string): string {
@@ -52,9 +57,9 @@ function decryptApiKey(encryptedKey: string): string {
 // Initialize Appwrite client
 function getAppwriteClient() {
   const client = new Client()
-    .setEndpoint(process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT || "")
-    .setProject(process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID || "")
-    .setKey(process.env.NEXT_PUBLIC_APPWRITE_API_KEY || "");
+    .setEndpoint(appwriteEndpoint)
+    .setProject(appwriteProjectId)
+    .setKey(appwriteApiKey);
 
   return new Databases(client);
 }

app/api/profile/preferences/route.ts

@@ -1,12 +1,17 @@
 import { NextRequest, NextResponse } from "next/server";
 import { Client, Databases, Query } from "node-appwrite";
+import {
+  appwriteApiKey,
+  appwriteEndpoint,
+  appwriteProjectId,
+} from "@practice-tests-exams-platform/lib/appwrite/env";
 
 // Initialize Appwrite client
 function getAppwriteClient() {
   const client = new Client()
-    .setEndpoint(process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT || "")
-    .setProject(process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID || "")
-    .setKey(process.env.NEXT_PUBLIC_APPWRITE_API_KEY || "");
+    .setEndpoint(appwriteEndpoint)
+    .setProject(appwriteProjectId)
+    .setKey(appwriteApiKey);
 
   return new Databases(client);
 }

app/api/profile/route.ts

@@ -1,13 +1,18 @@
 import { NextRequest, NextResponse } from "next/server";
 import { Client, Databases } from "node-appwrite";
 import Stripe from "stripe";
+import {
+  appwriteApiKey,
+  appwriteEndpoint,
+  appwriteProjectId,
+} from "@practice-tests-exams-platform/lib/appwrite/env";
 
 // Initialize Appwrite client
 function getAppwriteClient() {
   const client = new Client()
-    .setEndpoint(process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT || "")
-    .setProject(process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID || "")
-    .setKey(process.env.NEXT_PUBLIC_APPWRITE_API_KEY || "");
+    .setEndpoint(appwriteEndpoint)
+    .setProject(appwriteProjectId)
+    .setKey(appwriteApiKey);
 
   return new Databases(client);
 }

app/api/stripe/webhook/route.ts

@@ -1,6 +1,11 @@
 import { NextRequest, NextResponse } from "next/server";
 import Stripe from "stripe";
 import { Client, Databases } from "node-appwrite";
+import {
+  appwriteApiKey,
+  appwriteEndpoint,
+  appwriteProjectId,
+} from "@practice-tests-exams-platform/lib/appwrite/env";
 
 // Force dynamic rendering for webhook endpoint
 export const dynamic = "force-dynamic";
@@ -13,12 +18,12 @@ const PRICE_ID_TO_SUBSCRIPTION: Record<string, string> = {
   [(process.env.NEXT_PUBLIC_STRIPE_PRICE_DITECTREV || "").trim()]: "ditectrev",
 };
 
-// Initialize Appwrite client (trim env vars to avoid newline issues)
+// Initialize Appwrite client (values trimmed in lib/appwrite/env.ts)
 function getAppwriteClient() {
   const client = new Client()
-    .setEndpoint((process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT || "").trim())
-    .setProject((process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID || "").trim())
-    .setKey((process.env.NEXT_PUBLIC_APPWRITE_API_KEY || "").trim());
+    .setEndpoint(appwriteEndpoint)
+    .setProject(appwriteProjectId)
+    .setKey(appwriteApiKey);
 
   return new Databases(client);
 }

app/layout.tsx

@@ -6,6 +6,7 @@ import Footer from "@practice-tests-exams-platform/components/Footer";
 import ApolloProvider from "@practice-tests-exams-platform/components/ApolloProvider";
 import Cookie from "@practice-tests-exams-platform/components/Cookie";
 import GoogleAnalytics from "@practice-tests-exams-platform/components/GoogleAnalytics";
+import GoogleAdSense from "@practice-tests-exams-platform/components/GoogleAdSense";
 import { AuthProvider } from "@practice-tests-exams-platform/contexts/AuthContext";
 import { ThemeProvider } from "@practice-tests-exams-platform/contexts/ThemeContext";
 import { TrialWarning } from "@practice-tests-exams-platform/components/TrialWarning";
@@ -135,6 +136,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
                 <Footer />
                 <Cookie />
                 <GoogleAnalytics />
+                <GoogleAdSense />
                 <TrialWarning />
               </main>
             </AuthProvider>

components/AuthModal.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useState, useEffect } from "react";
+import { createPortal } from "react-dom";
 import { useAuth } from "../contexts/AuthContext";
 import { Button } from "./Button";
 
@@ -34,6 +35,20 @@ export const AuthModal: React.FC<AuthModalProps> = ({
     type: string;
     value: string;
   } | null>(null);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = previousOverflow;
+    };
+  }, [isOpen]);
 
   // Load last used method from localStorage
   useEffect(() => {
@@ -67,7 +82,7 @@ export const AuthModal: React.FC<AuthModalProps> = ({
     }
   }, [isAuthenticated, isOpen, onClose]);
 
-  if (!isOpen) return null;
+  if (!isOpen || !mounted) return null;
 
   const handleEmailSignIn = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -155,13 +170,30 @@ export const AuthModal: React.FC<AuthModalProps> = ({
     }
   };
 
-  return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
-      <div className="bg-slate-800 rounded-lg p-6 w-full max-w-md">
+  return createPortal(
+    <div
+      className="fixed inset-0 z-[100] flex min-h-[100dvh] items-center justify-center overflow-y-auto bg-black/50 px-4 py-6 sm:py-10"
+      style={{
+        paddingTop: "max(1.5rem, env(safe-area-inset-top))",
+        paddingBottom: "max(1.5rem, env(safe-area-inset-bottom))",
+      }}
+      role="presentation"
+      onClick={onClose}
+    >
+      <div
+        className="relative w-full max-w-md shrink-0 rounded-lg bg-slate-800 p-6 shadow-2xl"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="auth-modal-title"
+        onClick={(e) => e.stopPropagation()}
+      >
         <div className="text-center mb-6">
           {trialExpired ? (
             <>
-              <h2 className="text-2xl font-bold text-white mb-2">
+              <h2
+                id="auth-modal-title"
+                className="text-2xl font-bold text-white mb-2"
+              >
                 Trial Expired
               </h2>
               <p className="text-slate-300">
@@ -171,7 +203,12 @@ export const AuthModal: React.FC<AuthModalProps> = ({
             </>
           ) : (
             <>
-              <h2 className="text-2xl font-bold text-white mb-2">Sign In</h2>
+              <h2
+                id="auth-modal-title"
+                className="text-2xl font-bold text-white mb-2"
+              >
+                Sign In
+              </h2>
               <p className="text-slate-300">
                 Choose your preferred sign-in method to continue.
               </p>
@@ -325,8 +362,8 @@ export const AuthModal: React.FC<AuthModalProps> = ({
                 {isVerifying
                   ? "Verifying..."
                   : isRedirecting
-                  ? "Redirecting..."
-                  : "Verify Code"}
+                    ? "Redirecting..."
+                    : "Verify Code"}
               </Button>
             </form>
 
@@ -437,6 +474,7 @@ export const AuthModal: React.FC<AuthModalProps> = ({
           </button>
         </div>
       </div>
-    </div>
+    </div>,
+    document.body,
   );
 };

components/GoogleAdSense.tsx

@@ -0,0 +1,19 @@
+import Script from "next/script";
+
+/**
+ * Loads the AdSense bootstrap script. Set NEXT_PUBLIC_ADSENSE_CLIENT_ID (e.g. ca-pub-…)
+ * in the environment. Place ad units in the UI or enable Auto ads in the AdSense console.
+ */
+export default function GoogleAdSense() {
+  const clientId = process.env.NEXT_PUBLIC_ADSENSE_CLIENT_ID?.trim();
+  if (!clientId) return null;
+
+  return (
+    <Script
+      async
+      src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${clientId}`}
+      crossOrigin="anonymous"
+      strategy="afterInteractive"
+    />
+  );
+}

lib/appwrite/config.ts

@@ -1,17 +1,15 @@
 import { Client, Account, Databases } from "appwrite";
+import { appwriteEndpoint, appwriteProjectId } from "./env";
 
 // Only initialize Appwrite client if we have the required environment variables
 // This prevents build-time errors during static generation
 const isClientSide = typeof window !== "undefined";
 const hasRequiredEnvVars =
-  process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT &&
-  process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID;
+  appwriteEndpoint.length > 0 && appwriteProjectId.length > 0;
 
 const client =
   isClientSide && hasRequiredEnvVars
-    ? new Client()
-        .setEndpoint(process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT!)
-        .setProject(process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID!)
+    ? new Client().setEndpoint(appwriteEndpoint).setProject(appwriteProjectId)
     : null;
 
 export const account = client ? new Account(client) : null;