Fix : bumped next version

app/contexts/UserContext.jsx

@@ -1,12 +1,11 @@
 'use client';
 import { createContext, useContext, useEffect, useState } from 'react';
-import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';
+import { supabase } from '@/lib/supabase';
 
 const UserContext = createContext();
 
 export const UserProvider = ({ children }) => {
   const [user, setUser] = useState(null);
-  const supabase = createClientComponentClient();
 
   useEffect(() => {
     const getSessionAndUser = async () => {

app/globals.css

@@ -1,8 +1,16 @@
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --font-poppins: "Poppins", sans-serif;
+}
+
+@source "./**/*.{js,ts,jsx,tsx}";
+@source "../pages/**/*.{js,ts,jsx,tsx}";
+@source "../components/**/*.{js,ts,jsx,tsx}";
 
 body {
   font-family: 'Poppins', sans-serif;

app/layout.jsx

@@ -4,7 +4,7 @@ import { SpeedInsights } from "@vercel/speed-insights/next"
 import { AuthProvider } from '@/app/contexts/AuthContext';
 import { UserProvider } from '@/app/contexts/UserContext';
 import ClientLayoutWrapper from "@/app/components/ui/ClientLayoutWrapper";
-import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
+import { createServerClient } from "@supabase/ssr";
 import { cookies } from "next/headers";
 
 const GA_ID = process.env.NEXT_PUBLIC_GA_ID;
@@ -57,7 +57,19 @@ export const metadata = {
 };
 
 export default async function RootLayout({ children }) {
-  const supabase = createServerComponentClient({ cookies });
+  const cookieStore = await cookies();
+  const supabase = createServerClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
+    {
+      cookies: {
+        getAll: () => cookieStore.getAll(),
+        setAll: () => {
+          // Server Components can't set cookies; middleware/route handlers refresh the session.
+        },
+      },
+    }
+  );
   const {
     data: { session },
   } = await supabase.auth.getSession();

app/visualizer/linkedList/types/singly/animation.jsx

@@ -1,13 +1,6 @@
 'use client';
 import React, { useState, useRef, useEffect } from 'react';
-import Footer from '@/app/components/footer';
 import ResetButton from '@/app/components/ui/resetButton';
-import ExploreOther from '@/app/components/ui/exploreOther';
-import Content from "@/app/visualizer/linkedList/types/singly/content";
-import Quiz from '@/app/visualizer/linkedList/types/singly/quiz';
-import CodeBlock from "@/app/visualizer/linkedList/types/singly/codeBlock";
-import BackToTop from '@/app/components/ui/backtotop';
-import GoBackButton from "@/app/components/ui/goback";
 
 const SinglyLinkedListVisualizer = () => {
   const [inputValue, setInputValue] = useState('');
@@ -90,17 +83,6 @@ const SinglyLinkedListVisualizer = () => {
   return (
     <div className="min-h-screen max-h-auto bg-gray-100 dark:bg-zinc-950 text-gray-800 dark:text-gray-200">
       <main className="container mx-auto px-6 pt-16 pb-4">
-        {/* go back block here */}
-        <div className="mt-10 sm:mt-10">
-          <GoBackButton />
-        </div>
-
-        {/* main logic here */}
-        <h1 className="text-4xl md:text-4xl mt-6 ml-10 font-bold text-left text-gray-900 dark:text-white mb-0">
-          <span className="text-black dark:text-white">Singly Linked List</span>
-        </h1>
-        <div className="bg-black border border-none dark:bg-gray-600 w-100 h-[2px] rounded-xl mt-2 mb-5"></div>
-        <Content />
         <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
           Visualize Singly Linked List Operations
         </p>
@@ -211,28 +193,7 @@ const SinglyLinkedListVisualizer = () => {
               </div>
             )}
           </div>
-
-          <p className="text-lg text-center text-gray-600 dark:text-gray-400 mt-8 mb-8">
-          Test Your Knowledge before moving forward!
-        </p>
-        <Quiz />
-
-        <CodeBlock/>
-
-        <ExploreOther
-          title="Explore Other Types"
-          links={[
-            { text: "Doubly Linked List", url: "./doubly" },
-            { text: "Circular Linked List", url: "./circular" },
-          ]}
-        />
       </main>
-      <div>
-        <div className="bg-gray-700 z-10 h-[1px]"></div>
-      </div>
-      <div className="bg-gray-700 z-10 h-[1px]"></div>
-      <BackToTop />
-      <Footer />
     </div>
   );
 };

app/visualizer/linkedList/types/singly/content.jsx

@@ -1,3 +1,5 @@
+"use client";
+
 const content = () => {
   const overview = [
     `A Singly Linked List is a linear data structure where each element (node) contains data and a pointer to the next node. Unlike arrays, linked lists don't have fixed sizes and allow efficient insertion/deletion at any position.`,

app/visualizer/linkedList/types/singly/page.jsx

@@ -1,34 +1,121 @@
 import Animation from "@/app/visualizer/linkedList/types/singly/animation";
 import Navbar from "@/app/components/navbarinner";
+import Breadcrumbs from "@/app/components/ui/Breadcrumbs";
+import ArticleActions from "@/app/components/ui/ArticleActions";
+import Content from "@/app/visualizer/linkedList/types/singly/content";
+import Quiz from "@/app/visualizer/linkedList/types/singly/quiz";
+import Code from "@/app/visualizer/linkedList/types/singly/codeBlock";
+import ModuleCard from "@/app/components/ui/ModuleCard";
+import { MODULE_MAPS } from "@/lib/modulesMap";
+import ExploreOther from '@/app/components/ui/exploreOther';
+import BackToTopButton from '@/app/components/ui/backtotop';
+import Footer from '@/app/components/footer';
 
 export const metadata = {
-  title: 'Singly Linked List Implementation | Visualize Linked List in JS, C, Python, Java',
-  description: 'Explore Singly Linked List implementation with interactive visualizations and real-time code examples in JavaScript, C, Python, and Java. Learn insertion, deletion, and traversal with step-by-step animations. Perfect for DSA beginners and interview preparation.',
+  title:
+    "Singly Linked List Implementation | Visualize Linked List in JS, C, Python, Java",
+  description:
+    "Explore Singly Linked List implementation with interactive visualizations and real-time code examples in JavaScript, C, Python, and Java. Learn insertion, deletion, and traversal with step-by-step animations. Perfect for DSA beginners and interview preparation.",
   keywords: [
-    'Singly Linked List Implementation',
-    'Singly Linked List Visualization',
-    'Linked List in JavaScript',
-    'Linked List in C',
-    'Linked List in Python',
-    'Linked List in Java',
-    'DSA Linked List',
-    'Linked List Operations',
-    'Insertion in Linked List',
-    'Deletion in Linked List',
-    'Traverse Linked List',
-    'Learn Linked List',
-    'Visualize Linked List',
-    'DSA for Beginners',
-    'Interactive Linked List Tool',
+    "Singly Linked List Implementation",
+    "Singly Linked List Visualization",
+    "Linked List in JavaScript",
+    "Linked List in C",
+    "Linked List in Python",
+    "Linked List in Java",
+    "DSA Linked List",
+    "Linked List Operations",
+    "Insertion in Linked List",
+    "Deletion in Linked List",
+    "Traverse Linked List",
+    "Learn Linked List",
+    "Visualize Linked List",
+    "DSA for Beginners",
+    "Interactive Linked List Tool",
   ],
-  robots: 'index, follow',
+  robots: "index, follow",
+  openGraph: {
+    images: [
+      {
+        url: "/og/stack/isFull.png",
+        width: 1200,
+        height: 630,
+        alt: "Stack isFull Visualization",
+      },
+    ],
+  },
 };
 
 export default function Page() {
+  const paths = [
+    { name: "Home", href: "/" },
+    { name: "Visualizer", href: "/visualizer" },
+    { name: "Linked List : Singly", href: "" },
+  ];
+
   return (
     <>
-      <Navbar/>
-      <Animation/>
+      <div>
+        <Navbar />
+      </div>
+
+      <div className="py-20 bg-gray-100 dark:bg-neutral-900 text-gray-800 dark:text-gray-200">
+        <section className="px-6 md:px-12">
+          <div className="mt-10 sm:mt-10 mb-4">
+            <Breadcrumbs paths={paths} />
+          </div>
+          <div className="flex items-center flex-col">
+            <div className="flex">
+              <p className="uppercase tracking-wide bg-green-500 dark:text-black px-4 py-1 mb-2 rounded-full">
+                Types
+              </p>
+            </div>
+            <h1 className="text-4xl md:text-4xl font-bold text-center text-gray-900 dark:text-white mb-0">
+              Singly Linked List
+            </h1>
+            <ArticleActions />
+          </div>
+          <div className="bg-black border border-none dark:bg-gray-600 w-100 h-[2px] rounded-xl my-10"></div>
+          <Content />
+        </section>
+
+        <section>
+          <Animation />
+        </section>
+
+        <section className="px-6">
+          <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-2">
+            Test Your Knowledge before moving forward!
+          </p>
+          <Quiz />
+        </section>
+
+        <section className="px-6">
+          <Code />
+        </section>
+
+        <section className="px-6 md:px-12 my-12">
+          <ModuleCard
+            moduleId={MODULE_MAPS.isFull}
+            title="Singly Linked List"
+            description="Mark Singly Linked List as done and view it on your dashboard"
+            initialDone={false}
+          />
+        </section>
+
+        <section>
+          <ExploreOther
+          title="Explore Other Types"
+          links={[
+            { text: "Doubly Linked List", url: "./doubly" },
+            { text: "Circular Linked List", url: "./circular" },
+          ]}
+        />
+        </section>
+      </div>
+
+      <BackToTopButton />
+      <Footer />
     </>
   );
-};
+}

app/visualizer/linkedList/types/singly/quiz.jsx

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+"use client";
+import { useState } from 'react';
 import { FaCheck, FaTimes, FaArrowRight, FaArrowLeft, FaInfoCircle, FaRedo, FaTrophy, FaStar, FaAward } from 'react-icons/fa';
 import { motion, AnimatePresence } from 'framer-motion';
 

eslint.config.mjs

@@ -1,14 +1,5 @@
-import { dirname } from "path";
-import { fileURLToPath } from "url";
-import { FlatCompat } from "@eslint/eslintrc";
+import nextCoreWebVitals from "eslint-config-next/core-web-vitals";
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-const compat = new FlatCompat({
-  baseDirectory: __dirname,
-});
-
-const eslintConfig = [...compat.extends("next/core-web-vitals")];
+const eslintConfig = [...nextCoreWebVitals];
 
 export default eslintConfig;

lib/modulesMap.js

@@ -24,4 +24,5 @@ export const MODULE_MAPS = {
     priorityQueue : "d4764df9-355c-4a5c-b9ff-e6f71a667396",
     queueArray : "06ec481b-d6a7-46e9-8a74-16031d298734",
     queueLinkedList : "b217f8ad-38e3-4f55-b066-2f5f67d7ea36",
+    singlyLinkedList : "c2a06c17-8ecc-49e7-a17b-aaf75544e782",
 }

lib/supabase.js

@@ -1,6 +1,6 @@
-import { createClientComponentClient } from '@supabase/auth-helpers-nextjs'
+import { createBrowserClient } from '@supabase/ssr'
 
-export const supabase = createClientComponentClient({
-  supabaseUrl: process.env.NEXT_PUBLIC_SUPABASE_URL,
-  supabaseKey: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
-});
+export const supabase = createBrowserClient(
+  process.env.NEXT_PUBLIC_SUPABASE_URL,
+  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
+);