Browse a 50,000-book library with instant search and author filtering — Next.js 15, React 19, Drizzle, and Neon Postgres.
🚀 Try it live →
A book-inventory playground for the bleeding edge of the React/Next.js stack. The dataset (scripts/books.csv, ~50k rows) is loaded into Neon Postgres, then served through React Server Components with streaming Suspense. Search stays snappy thanks to a pg_trgm GIN index and Postgres unaccent, while a custom backpressure hook keeps the UI smooth as you type.
✨ Features
- Streaming RSC pagination — server components fetch, paginate, and stream results (30 per page) via Suspense.
- Accent-insensitive search —
lower(unaccent(title)) LIKE …powered by a Postgres trigram GIN index. - Author filter sidebar — multi-select authors via URL search params; works with native
<Form>(Next 15) for progressive enhancement. - Backpressure-aware input —
useBackpressure+ React 19'suse()keep typing responsive while older requests are discarded. - Edge-friendly data layer —
@neondatabase/serverless+ Drizzle ORM over HTTP, no connection pool to babysit. - Polished UI — Tailwind, Radix primitives (shadcn-style), Geist font, Sonner toasts, and a welcome toast on first visit.
🛠️ Tech Stack
| Layer | Technology |
|---|---|
| Framework | Next.js 15 (canary, App Router, Turbopack dev) |
| UI | React 19 RC, Tailwind CSS, Radix UI, Lucide icons |
| Data | Drizzle ORM, @neondatabase/serverless, @vercel/postgres (seeder) |
| Database | Neon / Vercel Postgres with pg_trgm + unaccent |
| Tooling | TypeScript 5, Prettier, Bun (seed script) |
🙌 Credits
Built by Mohamed Gado.