"A curated sanctuary for literary enthusiasts."
Athenaeum is a full-stack bookstore web application built as a portfolio/demo project. It features a rich, elegantly designed UI with full authentication, a shopping cart, favourites, genre browsing, and an admin system (coming soon) — all without processing any real payments. (Yes, someone will always try the checkout button. I see you.)
- 🔍 Book Search & Discovery — Full-text search by title, author, or ISBN
- 🗂️ Genre Browsing — Explore books organized by curated literary genres
- 🛒 Shopping Cart — Add, remove, and update book quantities
- 💕 Favourites — Save books to your personal collection
- 🔐 Authentication — Email/password + Google & GitHub OAuth
- 👤 Role-Based Access — Separate user and admin profile pages
- 🌙 Dark / Light Theme — Persistent theme toggle using system preference detection
- 📄 Pagination — Responsive, adaptive items-per-page based on screen size
- 📱 Fully Responsive — It looks great on every screen
- 🧩 Breadcrumb Navigation — Contextual breadcrumbs for deep-linked pages
| Technology | Purpose |
|---|---|
| Next.js 16 | React framework with App Router, Server Components & Server Actions |
| React 19 | UI library with the latest concurrent features |
| TypeScript | Type safety across the entire codebase |
| Tailwind CSS v4 | Utility-first styling with CSS variables and theming |
| Lucide React | Beautiful, consistent icon library |
| Font | Role |
|---|---|
| Playfair Display | Headings & display text — classic, editorial feel |
| Cormorant Garamond | Body text — elegant, literary serif |
| DM Sans | UI elements — clean, modern sans-serif |
| Technology | Purpose |
|---|---|
| PostgreSQL (NeonDB) | Serverless PostgreSQL database hosted on Neon |
| Prisma v7 | Type-safe ORM with generated client & migrations |
| Technology | Purpose |
|---|---|
| better-auth v1.4 | Modern, full-featured auth library |
| Google OAuth | Social login via Google |
| GitHub OAuth | Social login via GitHub |
| Technology | Purpose |
|---|---|
| Zustand v5 | Lightweight global state (cart, theme, book store) |
| Technology | Purpose |
|---|---|
| Vercel | Hosting & deployment |
| dotenv | Environment variable management |
| tsx | TypeScript execution for scripts (e.g., seed) |
| ESLint | Code linting with Next.js & TypeScript rules |
athenaeum/
├── app/
│ ├── (pages)/
│ │ ├── auth/ # Sign in / Sign up
│ │ ├── books/ # Book listing & detail pages
│ │ ├── genres/ # Genre browsing
│ │ ├── favourites/ # User favourites
│ │ ├── cart/ # Shopping cart
│ │ ├── checkout/ # Checkout page
│ │ ├── about/ # About page
│ │ ├── footer/ # Footer pages
│ │ └── (profile)/ # Admin(coming soon) & user profile pages
│ ├── actions/ # Next.js Server Actions
│ ├── components/ # Reusable UI components
│ ├── hooks/ # Custom React hooks
│ ├── store/ # Zustand stores
│ └── utils/ # Utility functions
├── lib/
│ ├── auth.ts # better-auth server config
│ ├── auth-client.ts # better-auth client config
│ ├── db.ts # Prisma client singleton
│ └── generated/prisma/ # Prisma generated types & client
├── prisma/
│ ├── schema.prisma # Database schema
│ ├── seed.ts # Database seeder (55 classic books!)
│ └── migrations/ # SQL migration history
└── public/
- Node.js
>= 20.9.0 - NeonDB account (or any PostgreSQL database)
- Google & GitHub OAuth credentials (optional)
# Clone the repository
git clone https://github.com/subhajitroycode/athenaeum-bookstore-app.git
cd athenaeum-bookstore-app
# Install dependencies
npm installCreate a .env file in the root:
DATABASE_URL="postgresql://user:password@localhost:5432/athenaeum"
BETTER_AUTH_SECRET="your-secret-key"
BETTER_AUTH_URL="http://localhost:3000"
GOOGLE_CLIENT_ID="your-google-client-id"
GOOGLE_CLIENT_SECRET="your-google-client-secret"
GITHUB_CLIENT_ID="your-github-client-id"
GITHUB_CLIENT_SECRET="your-github-client-secret"# Run migrations
npx prisma migrate deploy
# Seed the database with 55 classic books
npx prisma db seednpm run devOpen http://localhost:3000 in your browser.
The app uses the following models:
- Book — Title, author, genre, ISBN, price, cover image, description
- User — Name, email, role (
user|admin), emailVerified - Cart + CartItem — Per-user cart with quantity tracking
- Favourite — Many-to-many between users and books
- Session, Account, Verification — Managed by better-auth
Athenaeum draws from classic editorial aesthetics — think bookshop meets literary magazine. The color palette uses warm browns and creams in light mode, shifting to deep, ink-like tones in dark mode. Typography is intentional: Playfair Display for grandeur, Cormorant Garamond for warmth, and DM Sans for precision.
Every transition, hover state, and animation was crafted to feel like turning a page — deliberate, unhurried, and a little indulgent.
| Role | Access |
|---|---|
| Guest | Browse books, genres, about page |
| User | + Favourites, cart, profile |
| Admin | + Admin dashboard (coming soon) |
To make a user an admin, update their role field in the database directly.
- No payments are processed. Relax! The checkout page exists purely for the experience and aesthetic purpose.
- Books are seeded from a curated list of 55 classic and contemporary titles sourced via the Open Library Covers API.
- OAuth requires valid credentials — for local dev, email/password auth works out of the box.
npm run dev # Start development server
npm run build # Build for production
npm run start # Start production server
npm run lint # Run ESLint- Open Library for the beautiful book cover images
- better-auth for making authentication actually pleasant to work with
- Prisma for the best ORM experience in the JS ecosystem
- Every reader who's ever bought more books than they'll ever finish (you know who you are)
Built with care by Subhajit Roy
P.S. — There's a hidden Easter egg somewhere in this project. If you stumble across it, congratulations — you've got the curiosity of a true developer (and probably too much free time, but I respect it). 🥚