Fix three codebase bugs

package.json

@@ -19,6 +19,7 @@
     "chart.js": "^4.5.0",
     "firebase": "^10.14.1",
     "framer": "^2.4.1",
+    "isomorphic-dompurify": "^2.26.0",
     "lucide-react": "^0.539.0",
     "motion": "^12.23.12",
     "next": "14.2.15",

src/components/Workspace/ProblemDescription/ProblemDescription.tsx

@@ -1,3 +1,4 @@
+import DOMPurify from 'isomorphic-dompurify';
 import CircleSkeleton from "@/components/Skeletons/CircleSkeleton";
 import RectangleSkeleton from "@/components/Skeletons/RectangleSkeleton";
 import { auth, firestore } from "@/firebase/firebase";
@@ -305,7 +306,7 @@ const ProblemDescription: React.FC<ProblemDescriptionProps> = ({
       </div>
       <div className="p-4 overflow-y-auto h-[calc(100vh-100px)]">
         <div className="prose prose-invert max-w-none">
-          <div dangerouslySetInnerHTML={{ __html: problem.problemStatement }} />
+          <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(problem.problemStatement) }} />
           {problem.examples.length > 0 && (
             <div className="mt-4">
               {problem.examples.map((example, index) => (
@@ -336,7 +337,7 @@ const ProblemDescription: React.FC<ProblemDescriptionProps> = ({
           <div className="mt-4">
             <h3 className="text-softSilver font-medium">Constraints:</h3>
             <ul className="list-disc list-inside text-softSilver">
-              <div dangerouslySetInnerHTML={{ __html: problem.constraints }} />
+              <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(problem.constraints) }} />
             </ul>
           </div>
         </div>

src/firebase/firebase.ts

@@ -14,9 +14,11 @@ const firebaseConfig = {
 };
 
 // Initialize Firebase
-const app = !getApps.length ? initializeApp(firebaseConfig) : getApp();
+const app = getApps().length === 0 ? initializeApp(firebaseConfig) : getApp();
 
-const auth = getAuth(app);
+// Avoid initializing Auth during SSR/build where browser APIs/env may be unavailable
+const isBrowser = typeof window !== "undefined";
+const auth = isBrowser ? getAuth(app) : (null as any);
 const firestore = getFirestore(app);
 
 export { auth, firestore, app };

src/pages/api/judge0/result.ts

@@ -3,7 +3,7 @@ import type { NextApiRequest, NextApiResponse } from 'next';
 
 // Judge0 API configuration
 const RAPIDAPI_HOST = process.env.RAPIDAPI_HOST || 'judge0-ce.p.rapidapi.com';
-const RAPIDAPI_KEY = process.env.RAPIDAPI_KEY || process.env.NEXT_PUBLIC_RAPIDAPI_KEY;
+const RAPIDAPI_KEY = process.env.RAPIDAPI_KEY;
 
 interface Judge0ResultResponse {
   stdout?: string;

src/pages/api/judge0/submit.ts

@@ -3,7 +3,7 @@ import type { NextApiRequest, NextApiResponse } from 'next';
 
 // Judge0 API configuration
 const RAPIDAPI_HOST = process.env.RAPIDAPI_HOST || 'judge0-ce.p.rapidapi.com';
-const RAPIDAPI_KEY = process.env.RAPIDAPI_KEY || process.env.NEXT_PUBLIC_RAPIDAPI_KEY;
+const RAPIDAPI_KEY = process.env.RAPIDAPI_KEY;
 
 interface SubmitRequestBody {
   source_code: string;

src/pages/api/judge0/test.ts

@@ -3,7 +3,7 @@ import type { NextApiRequest, NextApiResponse } from 'next';
 
 // Judge0 API configuration
 const RAPIDAPI_HOST = process.env.RAPIDAPI_HOST || 'judge0-ce.p.rapidapi.com';
-const RAPIDAPI_KEY = process.env.RAPIDAPI_KEY || process.env.NEXT_PUBLIC_RAPIDAPI_KEY;
+const RAPIDAPI_KEY = process.env.RAPIDAPI_KEY;
 
 interface TestResponse {
   success: boolean;

src/pages/dsa/article/[...slug].tsx

@@ -62,8 +62,14 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
     const topicsRef = collection(firestore, 'topics');
     const topicsSnapshot = await getDocs(firebaseQuery(topicsRef, orderBy('serial', 'asc')));
 
-    let articleData = null;
-    let allItems = [];
+    let articleData: {
+      title: string;
+      slug: string;
+      githubPath: string;
+      youtubePath: string;
+      content: any[];
+    } | null = null;
+    let allItems: Array<{ slug: string; title: string; serial: number }>= [];
 
     // Process all topics and build a flat list for navigation
     topicsSnapshot.forEach((doc) => {

src/pages/dsa/topic/introduction/setup.tsx

@@ -21,7 +21,7 @@ const DSAEnvironmentSetup: React.FC = () => {
     dataKey,
     nameKey = "platform"
   }: {
-    data: Array<{ [key: string]: string | number }>;
+    data: Array<{ [key: string]: string | number } & { color?: string }>;
     title: string;
     dataKey: string;
     nameKey?: string;
@@ -52,7 +52,7 @@ const DSAEnvironmentSetup: React.FC = () => {
                 animate={{ width: `${item[dataKey]}%` }}
                 transition={{ duration: 1, delay: index * 0.1 }}
                 className="h-3 rounded-full"
-                style={{ backgroundColor: item.color }}
+                style={{ backgroundColor: typeof item.color === 'string' ? item.color : '#999' }}
               />
             </div>
           </motion.div>

src/pages/dsa/topic/introduction/whyDsa.tsx

@@ -34,7 +34,7 @@ const WhyDSA: React.FC = () => {
   ];
 
   const CustomBarChart = ({ data, title, dataKey, nameKey = "topic" }: {
-    data: Array<{ [key: string]: string | number }>;
+    data: Array<{ [key: string]: string | number } & { color?: string }>;
     title: string;
     dataKey: string;
     nameKey?: string;
@@ -65,7 +65,7 @@ const WhyDSA: React.FC = () => {
                 animate={{ width: `${item[dataKey]}%` }}
                 transition={{ duration: 1, delay: index * 0.1 }}
                 className="h-3 rounded-full"
-                style={{ backgroundColor: item.color }}
+                style={{ backgroundColor: typeof (item as any).color === 'string' ? (item as any).color : '#999' }}
               />
             </div>
           </motion.div>