Ch 5.1 - Adding AI Backend to App

Author: theReynald

.gitignore

@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+.env
 
 # Editor directories and files
 .vscode/*

book-lessons-app/src/context/AppContext.jsx

@@ -9,12 +9,12 @@ export function AppProvider({ children }) {
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(null);
 
-  const selectBook = useCallback(async (bookTitle) => {
+  const selectBook = useCallback(async (book) => {
     setIsLoading(true);
     setError(null);
 
     try {
-      const result = await extractLessons(bookTitle);
+      const result = await extractLessons(book);
       setSelectedBook(result.book);
       setLessons(result.lessons);
     } catch (err) {

book-lessons-app/src/hooks/useBookSearch.js

@@ -1,14 +1,19 @@
-import { useState, useCallback } from "react";
-import { books } from "../data/books";
+import { useState, useCallback, useRef } from "react";
+import { searchBooks } from "../services/bookService";
 
 export function useBookSearch() {
   const [query, setQuery] = useState("");
   const [results, setResults] = useState([]);
   const [isSearching, setIsSearching] = useState(false);
+  const debounceRef = useRef(null);
 
   const search = useCallback((searchTerm) => {
     setQuery(searchTerm);
 
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+    }
+
     if (!searchTerm.trim()) {
       setResults([]);
       setIsSearching(false);
@@ -17,24 +22,25 @@ export function useBookSearch() {
 
     setIsSearching(true);
 
-    // Simulated 500ms search delay
-    const timeoutId = setTimeout(() => {
-      const matches = books.filter(
-        (book) =>
-          book.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
-          book.author.toLowerCase().includes(searchTerm.toLowerCase()),
-      );
-      setResults(matches);
-      setIsSearching(false);
+    debounceRef.current = setTimeout(async () => {
+      try {
+        const books = await searchBooks(searchTerm);
+        setResults(books);
+      } catch {
+        setResults([]);
+      } finally {
+        setIsSearching(false);
+      }
     }, 500);
-
-    return () => clearTimeout(timeoutId);
   }, []);
 
   const clear = useCallback(() => {
     setQuery("");
     setResults([]);
     setIsSearching(false);
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+    }
   }, []);
 
   return { query, results, isSearching, search, clear };

book-lessons-app/src/services/bookService.js

@@ -0,0 +1,28 @@
+const OPEN_LIBRARY_API = "https://openlibrary.org/search.json";
+
+export async function searchBooks(query) {
+  if (!query.trim()) return [];
+
+  const url = `${OPEN_LIBRARY_API}?q=${encodeURIComponent(query)}&limit=8&fields=key,title,author_name,subject,first_sentence,cover_i`;
+  const res = await fetch(url);
+
+  if (!res.ok) {
+    throw new Error("Failed to search books");
+  }
+
+  const data = await res.json();
+
+  if (!data.docs || data.docs.length === 0) return [];
+
+  return data.docs.map((doc) => ({
+    id: doc.key,
+    title: doc.title || "Untitled",
+    author: (doc.author_name || []).join(", ") || "Unknown Author",
+    genre: (doc.subject || ["General"])[0],
+    description: doc.first_sentence?.[0] || "No description available.",
+    coverImage: doc.cover_i
+      ? `https://covers.openlibrary.org/b/id/${doc.cover_i}-M.jpg`
+      : null,
+    coverColor: "#3B82F6",
+  }));
+}

book-lessons-app/src/services/lessonService.js

@@ -1,28 +1,61 @@
-import { books } from "../data/books";
-import { lessons } from "../data/lessons";
-
-/**
- * Simulates extracting lessons from a book.
- * Returns a Promise that resolves after a 1-second delay (simulating AI processing).
- * Later, this can be swapped for a real AI API call.
- */
-export function extractLessons(bookTitle) {
-  return new Promise((resolve, reject) => {
-    setTimeout(() => {
-      const book = books.find(
-        (b) => b.title.toLowerCase() === bookTitle.toLowerCase(),
-      );
-
-      if (!book) {
-        reject(new Error(`Book "${bookTitle}" not found in database.`));
-        return;
-      }
-
-      const bookLessons = lessons
-        .filter((l) => l.bookId === book.id)
-        .sort((a, b) => a.dayOfWeek - b.dayOfWeek);
-
-      resolve({ book, lessons: bookLessons });
-    }, 1000);
+const OPENAI_API_URL = "https://api.openai.com/v1/chat/completions";
+
+export async function extractLessons(book) {
+  const apiKey = import.meta.env.VITE_OPENAI_API_KEY;
+
+  if (!apiKey) {
+    throw new Error(
+      "OpenAI API key is not configured. Add VITE_OPENAI_API_KEY to your .env file.",
+    );
+  }
+
+  const prompt = `You are a book lesson extractor. Given the book "${book.title}" by ${book.author}, generate exactly 7 practical daily lessons a reader can apply over one week.
+
+Return a JSON array of 7 objects with these fields:
+- id (number, 1-7)
+- title (string, short lesson title)
+- description (string, 2-3 sentences explaining the lesson)
+- actionStep (string, one concrete action the reader can take today)
+- category (string, a short category label like "Habits", "Focus", "Mindset", etc.)
+- dayOfWeek (number, 1-7 for Monday-Sunday)
+
+Return ONLY the JSON array, no markdown fences or extra text.`;
+
+  const res = await fetch(OPENAI_API_URL, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${apiKey}`,
+    },
+    body: JSON.stringify({
+      model: "gpt-4o-mini",
+      messages: [{ role: "user", content: prompt }],
+      temperature: 0.7,
+      max_tokens: 2000,
+    }),
   });
+
+  if (!res.ok) {
+    const errorData = await res.json().catch(() => ({}));
+    throw new Error(
+      errorData.error?.message || `OpenAI API error: ${res.status}`,
+    );
+  }
+
+  const data = await res.json();
+  const content = data.choices[0].message.content.trim();
+
+  let lessons;
+  try {
+    lessons = JSON.parse(content);
+  } catch {
+    const match = content.match(/\[[\s\S]*\]/);
+    if (match) {
+      lessons = JSON.parse(match[0]);
+    } else {
+      throw new Error("Failed to parse lessons from AI response.");
+    }
+  }
+
+  return { book, lessons };
 }

book-lessons-app/src/versions/data-dense/DenseLayout.jsx

@@ -34,8 +34,8 @@ export default function DenseLayout() {
   }, []);
 
   const handleSelect = useCallback(
-    (bookTitle) => {
-      selectBook(bookTitle);
+    (book) => {
+      selectBook(book);
       clear();
       setCompletedLessons(new Set());
     },

book-lessons-app/src/versions/data-dense/components/DenseSearch.jsx

@@ -30,7 +30,7 @@ export default function DenseSearch({
   }
 
   function handleSelect(book) {
-    onSelect(book.title);
+    onSelect(book);
     setIsOpen(false);
   }