first commit

app/BookProvider.tsx

@@ -0,0 +1,18 @@
+"use client";
+import { useRef } from "react";
+import { Provider } from "react-redux";
+import { makeStore, AppStore } from "../lib/store";
+
+import React from "react";
+
+const BookProvider = ({ children }: { children: React.ReactNode }) => {
+  const storeRef = useRef<AppStore>(undefined);
+  if (!storeRef.current) {
+    // Create the store instance the first time this renders
+    storeRef.current = makeStore();
+  }
+
+  return <Provider store={storeRef.current}>{children}</Provider>;
+};
+
+export default BookProvider;

app/Books.tsx

@@ -0,0 +1,172 @@
+"use client";
+
+import { clearList, resetList, deleteBook } from "@/lib/features/bookSlice";
+import { useAppDispatch, useAppSelector } from "@/lib/hooks";
+
+const Books = () => {
+  const { books } = useAppSelector((store) => store.books);
+  const dispatch = useAppDispatch();
+
+  const handleClear = () => {
+    dispatch(clearList());
+  };
+
+  const reset = () => {
+    dispatch(resetList());
+  };
+
+  const remove = (id: any) => {
+    dispatch(deleteBook(id));
+  };
+
+  return (
+    <main className="min-h-screen bg-base-200 p-6 md:p-10">
+      <div className="max-w-6xl mx-auto space-y-8">
+        {/* Header Section */}
+        <header className="card bg-base-100 shadow-xl border border-base-300">
+          <div className="card-body flex-col md:flex-row items-start md:items-center justify-between gap-4">
+            <div>
+              <span className="badge badge-secondary badge-outline text-xs font-semibold tracking-wide">
+                Advanced Web Development
+              </span>
+              <h1 className="text-3xl font-extrabold text-base-content mt-1">
+                Books by J.K. Rowling
+              </h1>
+              <p className="text-sm text-base-content/60">
+                Total Available:{" "}
+                <span className="font-bold text-primary">{books.length}</span>
+              </p>
+            </div>
+
+            {/* Action Buttons */}
+            <div className="flex gap-2">
+              {books.length > 0 ? (
+                <button
+                  onClick={handleClear}
+                  className="btn btn-error btn-outline btn-sm"
+                >
+                  Clear List
+                </button>
+              ) : (
+                <button onClick={reset} className="btn btn-primary btn-sm">
+                  Reset List
+                </button>
+              )}
+            </div>
+          </div>
+        </header>
+
+        {/* Book Grid / Empty State */}
+        {books.length > 0 ? (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {books.map((book) => {
+              const { id, volumeInfo, saleInfo } = book;
+              const thumbnail = volumeInfo.imageLinks?.thumbnail;
+              const price = saleInfo.listPrice?.amount
+                ? `${saleInfo.listPrice.amount} ${saleInfo.listPrice.currencyCode}`
+                : "Not for Sale";
+
+              return (
+                <div
+                  key={id}
+                  className="card bg-base-100 shadow-md border border-base-200 hover:shadow-2xl transition-all duration-300 flex flex-col justify-between"
+                >
+                  <div className="card-body p-6">
+                    {/* Top Row: Category & Rating */}
+                    <div className="flex justify-between items-center gap-2 mb-2">
+                      <span className="badge badge-neutral text-xs truncate max-w-37.5]">
+                        {volumeInfo.categories?.[0] || "General"}
+                      </span>
+                      {volumeInfo.averageRating && (
+                        <div className="badge badge-warning gap-1 font-bold text-xs">
+                          ★ {volumeInfo.averageRating}
+                        </div>
+                      )}
+                    </div>
+
+                    {/* Book Thumbnail & Info */}
+                    <div className="flex gap-4 my-2">
+                      {thumbnail ? (
+                        <img
+                          src={thumbnail}
+                          alt={volumeInfo.title}
+                          className="w-20 h-28 object-cover rounded-md shadow-md shrink-0"
+                        />
+                      ) : (
+                        <div className="w-20 h-28 bg-base-300 rounded-md flex items-center justify-center text-xs text-base-content/50 shrink-0">
+                          No Cover
+                        </div>
+                      )}
+
+                      <div className="space-y-1">
+                        <h2 className="card-title text-base font-bold text-base-content line-clamp-2">
+                          {volumeInfo.title}
+                        </h2>
+                        <p className="text-xs text-base-content/70">
+                          {volumeInfo.authors?.join(", ")}
+                        </p>
+                        <p className="text-xs text-base-content/50">
+                          {volumeInfo.publishedDate?.split("-")[0]} •{" "}
+                          {volumeInfo.publisher}
+                        </p>
+                      </div>
+                    </div>
+
+                    {/* Description Snippet */}
+                    {volumeInfo.description && (
+                      <p className="text-xs text-base-content/70 line-clamp-3 mt-2">
+                        {volumeInfo.description}
+                      </p>
+                    )}
+                  </div>
+
+                  {/* Card Footer */}
+                  <div className="card-actions justify-between items-center bg-base-200/50 px-6 py-3 border-t border-base-200">
+                    <span className="font-bold text-sm text-primary">
+                      {price}
+                    </span>
+                    <a
+                      href={volumeInfo.previewLink}
+                      target="_blank"
+                      rel="noreferrer"
+                      className="btn btn-xs btn-accent btn-outline"
+                    >
+                      Preview Book
+                    </a>
+                    <button
+                      className="btn btn-active btn-accent btn-xs transition-all hover:brightness-125"
+                      onClick={() => remove(book.id)}
+                    >
+                      {" "}
+                      remove{" "}
+                    </button>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        ) : (
+          /* Empty State Alert */
+          <div className="card bg-base-100 border border-base-300 shadow-lg text-center p-12">
+            <div className="max-w-md mx-auto space-y-4">
+              {/* books emoji character unicode code point: U+1F4DA */}
+              <div className="text-5xl">📚</div>
+              <h3 className="text-xl font-bold text-base-content">
+                No Books to Display
+              </h3>
+              <p className="text-sm text-base-content/60">
+                You cleared the list of books. Click below to restore the Google
+                Books dataset.
+              </p>
+              <button onClick={reset} className="btn btn-primary btn-sm mt-2">
+                Restore Books
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </main>
+  );
+};
+
+export default Books;

app/globals.css

@@ -0,0 +1,27 @@
+@import "tailwindcss";
+@plugin "daisyui";
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}

app/layout.tsx

@@ -0,0 +1,32 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+import BookProvider from "./BookProvider";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({ children }: LayoutProps<"/">) {
+  return (
+    <html
+      lang="en"
+      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+    >
+      <body className="min-h-full flex flex-col">
+        <BookProvider>{children}</BookProvider>
+      </body>
+    </html>
+  );
+}

app/page.tsx

@@ -0,0 +1,10 @@
+import Image from "next/image";
+import Books from "./Books";
+
+export default function Home() {
+  return (
+    <div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
+      <Books />
+    </div>
+  );
+}

app/useRef1.tsx

@@ -0,0 +1,21 @@
+import { useRef, JSX } from "react";
+
+export default function InputFocus(): JSX.Element {
+  // 1. Create a ref (initially null)
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleClick = () => {
+    // 3. Access the native DOM element via .current and focus it
+    inputRef.current?.focus();
+  };
+
+  return (
+    <div>
+      {/* 2. Attach the ref to the JSX element */}
+      <input ref={inputRef} type="text" className="input input-bordered" />
+      <button onClick={handleClick} className="btn btn-primary ml-2">
+        Focus Input
+      </button>
+    </div>
+  );
+}

app/useRef2.tsx

@@ -0,0 +1,35 @@
+import { useState, useRef, JSX } from "react";
+
+export default function Timer(): JSX.Element {
+  const [seconds, setSeconds] = useState(0);
+
+  // Store the timer ID in a ref so clearing it doesn't cause a re-render
+  const timerIdRef = useRef<NodeJS.Timeout | null>(null);
+
+  const startTimer = () => {
+    if (timerIdRef.current !== null) return;
+
+    timerIdRef.current = setInterval(() => {
+      setSeconds((prev) => prev + 1);
+    }, 1000);
+  };
+
+  const stopTimer = () => {
+    if (timerIdRef.current !== null) {
+      clearInterval(timerIdRef.current);
+      timerIdRef.current = null; // Clear ref value without triggering a re-render
+    }
+  };
+
+  return (
+    <div>
+      <p className="text-2xl font-bold">Seconds: {seconds}</p>
+      <button onClick={startTimer} className="btn btn-success mr-2">
+        Start
+      </button>
+      <button onClick={stopTimer} className="btn btn-error">
+        Stop
+      </button>
+    </div>
+  );
+}