feat: add local storage bookmark functionality

app/bookmarks/page.tsx

@@ -0,0 +1,54 @@
+"use client";
+import { useBookmarks } from "../hooks/useBookmarks";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { Road_Rage } from "next/font/google";
+
+const roadRage = Road_Rage({
+  variable: "--font-road-rage",
+  subsets: ["latin"],
+  weight: "400",
+});
+
+export default function BookmarksPage() {
+  const { bookmarks, toggleBookmark } = useBookmarks();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => setMounted(true), []);
+  if (!mounted) return null;
+
+  return (
+    <div className="p-8 pt-24 min-h-screen bg-[#1B0D00] text-[#FAE8D7]">
+        <Link 
+        href="/" 
+        className="inline-flex items-center gap-2 mb-6 px-4 py-2 bg-[#e2d1c1] text-[#1b0d00] rounded hover:bg-[#ac9e91] transition font-bold"
+        style={{ fontFamily: "Rockwell, Serif, serif" }}
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
+        Back to Home
+      </Link>
+      <h1 className={`text-5xl font-bold mb-8 ${roadRage.className}`}>My Bookmarks</h1>
+      {bookmarks.length === 0 ? (
+        <p className="text-xl" style={{ fontFamily: "Rockwell, Serif, serif" }}>
+          No bookmarks saved yet. Go explore some subjects!
+        </p>
+      ) : (
+        <ul className="space-y-4 max-w-3xl">
+          {bookmarks.map((b) => (
+            <li key={b.url} className="flex items-center justify-between p-4 border border-[#FAE8D7] rounded hover:bg-[#2a1809] transition">
+              <Link href={b.url} className="text-2xl font-bold hover:underline" style={{ fontFamily: "Rockwell, Serif, serif" }}>
+                {b.title}
+              </Link>
+              <button 
+                onClick={() => toggleBookmark(b)} 
+                className="text-red-400 hover:text-red-300 font-bold px-4 py-2 border border-red-400 rounded"
+              >
+                Remove
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}

app/components/BookmarkButton.tsx

@@ -0,0 +1,28 @@
+"use client";
+import { Bookmark, BookmarkCheck } from "lucide-react";
+import { useBookmarks } from "../hooks/useBookmarks";
+import { useEffect, useState } from "react";
+import { usePathname } from "next/navigation"; 
+
+export default function BookmarkButton({ title }: { title: string }) { 
+  const { isBookmarked, toggleBookmark } = useBookmarks();
+  const [mounted, setMounted] = useState(false);
+  const pathname = usePathname(); 
+
+  useEffect(() => setMounted(true), []);
+  if (!mounted) return null; 
+
+  const bookmarked = isBookmarked(pathname);
+
+  return (
+    <button
+      onClick={() => toggleBookmark({ url: pathname, title })}
+      className="flex items-center gap-2 px-3 py-1 bg-[#e2d1c1] text-[#1b0d00] rounded hover:bg-[#ac9e91] transition"
+      title={bookmarked ? "Remove Bookmark" : "Save for Later"}
+      style={{ fontFamily: "Rockwell, Serif, serif" }}
+    >
+      {bookmarked ? <BookmarkCheck size={20} /> : <Bookmark size={20} />}
+      <span className="hidden sm:inline font-bold">{bookmarked ? "Saved" : "Save"}</span>
+    </button>
+  );
+}

app/components/navbar.tsx

@@ -54,6 +54,11 @@ export default function Navbar() {
         <li>
           <Link href="/quiz" className="hover:text-[#d2b48c] transition-colors duration-200 cursor-pointer">QUIZ</Link>
         </li>
+        <li>
+          <Link href="/bookmarks" className="hover:opacity-80 transition-opacity">
+            BOOKMARKS
+          </Link>
+        </li>
       </ul>
       {/* Mobile Hamburger */}
       <button
@@ -62,28 +67,24 @@ export default function Navbar() {
         onClick={() => setMenuOpen((open) => !open)}
       >
         <span
-          className={`block w-8 h-1 bg-white mb-1 transition-all duration-300 ${
-            menuOpen ? "rotate-45 translate-y-2" : ""
-          }`}
+          className={`block w-8 h-1 bg-white mb-1 transition-all duration-300 ${menuOpen ? "rotate-45 translate-y-2" : ""
+            }`}
         />
         <span
-          className={`block w-8 h-1 bg-white mb-1 transition-all duration-300 ${
-            menuOpen ? "opacity-0" : ""
-          }`}
+          className={`block w-8 h-1 bg-white mb-1 transition-all duration-300 ${menuOpen ? "opacity-0" : ""
+            }`}
         />
         <span
-          className={`block w-8 h-1 bg-white transition-all duration-300 ${
-            menuOpen ? "-rotate-45 -translate-y-2" : ""
-          }`}
+          className={`block w-8 h-1 bg-white transition-all duration-300 ${menuOpen ? "-rotate-45 -translate-y-2" : ""
+            }`}
         />
       </button>
       {/* Mobile Menu */}
-      <div 
-        className={`md:hidden absolute top-full left-0 w-full bg-[#1B0D00]/95 shadow-lg transition-all duration-300 origin-top ${
-          menuOpen 
-            ? "opacity-100 scale-y-100" 
+      <div
+        className={`md:hidden absolute top-full left-0 w-full bg-[#1B0D00]/95 shadow-lg transition-all duration-300 origin-top ${menuOpen
+            ? "opacity-100 scale-y-100"
             : "opacity-0 scale-y-0 pointer-events-none"
-        }`}
+          }`}
       >
         <ul
           className="flex flex-col items-center gap-4 py-4 font-bold"
@@ -98,29 +99,29 @@ export default function Navbar() {
         >
           <li>
             <Link href="/" onClick={() => setMenuOpen(false)} className="hover:text-[#d2b48c] transition-colors duration-200 cursor-pointer">
-        HOME
+              HOME
             </Link>
           </li>
           <li>
             <Link href="/#subjects" onClick={() => setMenuOpen(false)} className="hover:text-[#d2b48c] transition-colors duration-200 cursor-pointer">
-        SUBJECTS
+              SUBJECTS
             </Link>
           </li>
           <li>
             <Link href="/#contribute" onClick={() => setMenuOpen(false)} className="hover:text-[#d2b48c] transition-colors duration-200 cursor-pointer">
-        CONTRIBUTE
+              CONTRIBUTE
             </Link>
           </li>
           <li>
             <Link href="/#sponsor" onClick={() => setMenuOpen(false)} className="hover:text-[#d2b48c] transition-colors duration-200 cursor-pointer">
-        SPONSOR
+              SPONSOR
             </Link>
           </li>
           <li>
-              <Link href="/quiz" onClick={() => setMenuOpen(false)} className="hover:text-[#d2b48c] transition-colors duration-200 cursor-pointer">
-          QUIZ
-              </Link>
-            </li>
+            <Link href="/quiz" onClick={() => setMenuOpen(false)} className="hover:text-[#d2b48c] transition-colors duration-200 cursor-pointer">
+              QUIZ
+            </Link>
+          </li>
         </ul>
       </div>
     </nav>

app/hooks/useBookmarks.ts

@@ -0,0 +1,36 @@
+"use client";
+import { useState, useEffect } from "react";
+
+export type Bookmark = {
+  url: string;
+  title: string;
+};
+
+export function useBookmarks() {
+  const [bookmarks, setBookmarks] = useState<Bookmark[]>([]);
+
+  useEffect(() => {
+    const saved = localStorage.getItem("openCSE_bookmarks");
+    if (saved) {
+      setBookmarks(JSON.parse(saved));
+    }
+  }, []);
+
+  const toggleBookmark = (bookmark: Bookmark) => {
+    const exists = bookmarks.find((b) => b.url === bookmark.url);
+    let newBookmarks;
+    if (exists) {
+      newBookmarks = bookmarks.filter((b) => b.url !== bookmark.url);
+    } else {
+      newBookmarks = [...bookmarks, bookmark];
+    }
+    setBookmarks(newBookmarks);
+    localStorage.setItem("openCSE_bookmarks", JSON.stringify(newBookmarks));
+  };
+
+  const isBookmarked = (url: string) => {
+    return bookmarks.some((b) => b.url === url);
+  };
+
+  return { bookmarks, toggleBookmark, isBookmarked };
+}

app/sem1/c/[chapter]/page.tsx

@@ -10,7 +10,7 @@ import { moduleQuizzes } from "@/lib/quizData";
 import ChapterQuizInline from "../components/ChapterQuizInline";
 import { ArrowBigLeft, ArrowBigRight } from "lucide-react";
 import { Righteous } from "next/font/google";
-
+import BookmarkButton from "../../../components/BookmarkButton";
 const righteous = Righteous({
       subsets: ['latin'], 
       weight: '400', 
@@ -29,11 +29,12 @@ const chapters = [
 ];
 
 type ChapterProps = {
-  params: { chapter: string };
+  params: Promise<{ chapter: string }>;
 };
 
-export default function ChapterPage({ params }: ChapterProps) {
-  const currentIndex = chapters.findIndex((c) => c.id === params.chapter);
+export default async function ChapterPage({ params }: ChapterProps) {
+  const { chapter: chapterId } = await params;
+  const currentIndex =  chapters.findIndex((c) => c.id === chapterId);
   const chapter = chapters[currentIndex];
 
   if (!chapter) {
@@ -62,7 +63,12 @@ export default function ChapterPage({ params }: ChapterProps) {
         <h1 className={`text-4xl font-bold ${righteous.className} mb-2`}>
           Programming in C 
         </h1>
-        <p className={`text-2xl mt-[-8] ${righteous.className}`}>{chapter.title}</p>
+       <div className="flex items-center justify-between">
+  <p className={`text-2xl mt-[-8px] ${righteous.className}`}>
+    {chapter.title}
+  </p>
+  <BookmarkButton title={`C Programming : ${chapter.title}`} />
+</div>
 
         {/* Navigation Buttons */}
         <div className="flex justify-between mt-3">

app/sem1/em1/[chapter]/page.tsx

@@ -6,9 +6,10 @@ import { Ch3Content } from "../content/chapter3";
 import { Ch4Content } from "../content/chapter4";
 import { ArrowBigLeft, ArrowBigRight } from "lucide-react";
 import { Righteous } from "next/font/google";
+
+import BookmarkButton from "../../../components/BookmarkButton";
 import { moduleQuizzes } from "@/lib/quizData";
 import ChapterQuizInline from "../components/ChapterQuizInline";
-
 const righteous = Righteous({
   subsets: ["latin"],
   weight: "400",
@@ -56,9 +57,12 @@ export default function ChapterPage({ params }: ChapterProps) {
         Engineering Mathematics I
       </h1>
 
-      <p className={`text-2xl mt-[-8px] ${righteous.className}`}>
-        {chapter.title}
-      </p>
+      <div className="flex items-center justify-between">
+        <p className={`text-2xl mt-[-8px] ${righteous.className}`}>
+          {chapter.title}
+        </p>
+        <BookmarkButton title={`Em1: ${chapter.title}`} />
+      </div>
 
       {/* Top Navigation */}
       <div className="flex justify-between mt-4">

app/sem1/ep/[chapter]/page.tsx

@@ -8,13 +8,15 @@ import { Ch5Content } from "../content/chapter5";
 import ChapterQuizInline from "../components/ChapterQuizInline";
 import { ArrowBigLeft, ArrowBigRight } from "lucide-react";
 import { Righteous } from "next/font/google";
-import { moduleQuizzes } from "@/lib/quizData";
 
+import BookmarkButton from "../../../components/BookmarkButton";
+
+import { moduleQuizzes } from "@/lib/quizData";
 const righteous = Righteous({
-      subsets: ['latin'], 
-      weight: '400', 
-      variable: '--font-righteous', 
-    });
+  subsets: ['latin'],
+  weight: '400',
+  variable: '--font-righteous',
+});
 
 // Chapter data
 const chapters = [
@@ -59,8 +61,12 @@ export default function ChapterPage({ params }: ChapterProps) {
         <h1 className={`text-4xl font-bold ${righteous.className} mb-2`}>
           Engineering Physics
         </h1>
-        <p className={`text-2xl mt-[-8] ${righteous.className}`}>{chapter.title}</p>
-
+        <div className="flex items-center justify-between">
+          <p className={`text-2xl mt-[-8px] ${righteous.className}`}>
+            {chapter.title}
+          </p>
+          <BookmarkButton  title={`EP: ${chapter.title}`} />
+        </div>
         {/* Navigation Buttons */}
         <div className="flex justify-between mt-3">
           {prevChapter ? (
@@ -118,7 +124,7 @@ export default function ChapterPage({ params }: ChapterProps) {
             className="px-4 py-2 bg-[#e2d1c1] text-xl flex items-center justify-center text-[#1b0d00] rounded hover:bg-[#ac9e91] transition"
             style={{ fontFamily: 'Rockwell, Serif, serif' }}
           >
-            {nextChapter.title} <ArrowBigRight className="inline-block ml-1" /> 
+            {nextChapter.title} <ArrowBigRight className="inline-block ml-1" />
           </Link>
         ) : (
           <div />

app/sem2/dsc/[chapter]/page.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { Righteous } from "next/font/google";
+import BookmarkButton from "../../../components/BookmarkButton";
 
 import { Ch0Content } from "../content/chapter0";
 import { Ch1Content } from "../content/chapter1";
@@ -53,9 +54,12 @@ export default function ChapterPage({ params }: ChapterProps) {
           Data Structures using C
         </h1>
 
-        <p className={`text-2xl mt-[-8px] ${righteous.className}`}>
-          {chapter.title}
-        </p>
+        <div className="flex items-center justify-between">
+          <p className={`text-2xl mt-[-8px] ${righteous.className}`}>
+            {chapter.title}
+          </p>
+          <BookmarkButton  title={`DSC: ${chapter.title}`} />
+        </div>
 
         {/* Navigation */}
         <div className="flex justify-between mt-3">

app/sem2/em2/[chapter]/page.tsx

@@ -6,6 +6,8 @@ import { Ch3Content } from "../content/chapter3";
 import { Ch4Content } from "../content/chapter4";
 import { ArrowBigLeft, ArrowBigRight } from "lucide-react";
 import { Righteous } from "next/font/google";
+import BookmarkButton from "../../../components/BookmarkButton";
+
 import { moduleQuizzes } from "@/lib/quizData";
 import ChapterQuizInline from "../components/ChapterQuizInline";
 
@@ -55,9 +57,12 @@ export default function ChapterPage({ params }: ChapterProps) {
         Engineering Mathematics II
       </h1>
 
-      <p className={`text-2xl mt-[-8px] ${righteous.className}`}>
-        {chapter.title}
-      </p>
+ <div className="flex items-center justify-between">
+  <p className={`text-2xl mt-[-8px] ${righteous.className}`}>
+    {chapter.title}
+  </p>
+  <BookmarkButton  title={`DSC: ${chapter.title}`} />
+</div>
 
       {/* Top Navigation */}
       <div className="flex justify-between mt-4">

app/sem2/oops/[chapter]/page.tsx

@@ -10,7 +10,7 @@ import { Ch5Content } from "../content/chapter5";
 import { Ch6Content } from "../content/chapter6";
 import { Ch7Content } from "../content/chapter7";
 import { Ch8Content } from "../content/chapter8";
-
+import BookmarkButton from "../../../components/BookmarkButton";
 import { ArrowBigLeft, ArrowBigRight } from "lucide-react";
 import { moduleQuizzes } from "@/lib/quizData";
 import ChapterQuizInline from "../components/ChapterQuizInline";
@@ -70,10 +70,12 @@ export default function ChapterPage({ params }: ChapterProps) {
           Object-Oriented Programming in Java
         </h1>
 
-        <p className={`text-2xl mt-[-8px] ${righteous.className}`}>
-          {chapter.title}
-        </p>
-
+        <div className="flex items-center justify-between">
+          <p className={`text-2xl mt-[-8px] ${righteous.className}`}>
+            {chapter.title}
+          </p>
+          <BookmarkButton  title={`DSC: ${chapter.title}`} />
+        </div>
         {/* Navigation */}
         <div className="flex justify-between mt-3">
           {prevChapter ? (