BookHub
A comprehensive full-stack platform for reading, tracking, and annotating books with AI-powered personalized insights.
Technologies Used
Project Overview
BookHub is a robust full-stack application designed to be a central hub for avid readers. It allows users to manage their reading history, rate books, and discover new recommendations across various genres. Beyond standard tracking, it features an integrated PDF viewer and a rich-text editing experience for taking detailed notes on reading materials directly within the browser. The platform further enhances the reading experience by integrating edge-based AI capabilities to assist with intelligent summarization and generating insights from texts.
Key Features
Comprehensive book tracking and rating system with personal reading histories and genre preferences.
Integrated PDF viewing capabilities directly within the browser for seamless reading.
Rich-text note-taking features using TipTap for annotating specific reading materials.
AI-powered text generation and insights utilizing the Vercel AI SDK and OpenAI edge functions.
Secure authentication flow using NextAuth with the Prisma adapter
Robust file uploading and management via UploadThing and Uppy.
High-Level Architecture
The application follows a modern serverless architecture built on the Next.js App Router, heavily utilizing React Server Components for optimal performance and SEO. The backend relies on the Prisma ORM to interact with an underlying PostgreSQL database hosted on Supabase, handling complex relational data like user histories, book metadata, and recommendations. Content management and file uploads are streamlined via UploadThing. The architecture also integrates edge functions via the Vercel AI SDK to deliver low-latency AI responses without blocking the main Node.js thread.
Challenges & Learnings
A significant technical challenge involved orchestrating the seamless coexistence of heavy client-side libraries—such as the PDF.js viewer and TipTap rich-text editor—without degrading the application's overall performance metrics. This was resolved by aggressively code-splitting these heavy components and dynamically importing them only when needed on specific routes. Additionally, state synchronization between the AI chat streams, notes editor, and PDF context required careful state management to prevent race conditions during real-time document interaction