Book Catalog App

A full-stack book catalog application built with Next.js, TypeScript, PostgreSQL, Prisma ORM, and NextAuth.js for user authentication.

Features

• User Authentication: Sign up/Sign in with email/password or Google OAuth
• Book Management: Add, view, and delete books
• Responsive Design: Mobile-friendly interface using Tailwind CSS
• Type Safety: Full TypeScript implementation
• Database Integration: PostgreSQL with Prisma ORM
• Session Management: Secure authentication with NextAuth.js

Tech Stack

• Frontend: Next.js 15 (App Router) + TypeScript
• Backend: Next.js API Routes
• Authentication: NextAuth.js (Email/Password, Google)
• Database: PostgreSQL (hosted via Neon/Supabase/ElephantSQL)
• ORM: Prisma
• Styling: Tailwind CSS
• Deployment: Vercel

API Routes

Method	Route	Description
GET	/api/books	Fetch all books
POST	/api/books	Add a new book
DELETE	/api/books/:id	Delete a book

Frontend Pages

• Home Page (/): Display all books with delete functionality
• Add Book Page (/add): Form to add new books
• Authentication Pages (/auth/signin): Login/signup with email/password or Google

Setup Instructions

Prerequisites

• Node.js 18+
• PostgreSQL database (local or hosted)
• Google OAuth credentials (optional)

1. Clone and Install Dependencies

git clone <your-repo-url>
cd book-catalog
npm install

2. Environment Variables

Create a .env.local file in the root directory:

# Database
DATABASE_URL="postgresql://username:password@localhost:5432/book_catalog"

# NextAuth.js
NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SECRET="your-secret-key-here"

# Google OAuth (optional)
GOOGLE_CLIENT_ID="your-google-client-id"
GOOGLE_CLIENT_SECRET="your-google-client-secret"

3. Database Setup

# Generate Prisma client
npx prisma generate

# Run database migrations
npx prisma migrate dev

# (Optional) Seed the database
npx prisma db seed

4. Run the Application

npm run dev

Visit http://localhost:3000 to see the application.

Deployment

1. Push to GitHub

git add .
git commit -m "Initial commit"
git push origin main

2. Deploy to Vercel

1. Connect your GitHub repository to Vercel

2. Set the following environment variables in Vercel:

   • DATABASE_URL: Your PostgreSQL connection string
   • NEXTAUTH_URL: Your Vercel app URL
   • NEXTAUTH_SECRET: A random secret string
   • GOOGLE_CLIENT_ID: Your Google OAuth client ID (optional)
   • GOOGLE_CLIENT_SECRET: Your Google OAuth client secret (optional)

3. Deploy the application

3. Database Migration on Production

After deployment, run the database migration:

npx prisma migrate deploy

Authentication Flow

Email/Password Authentication

1. Users can register with name, email, and password
2. Passwords are hashed using bcryptjs
3. Users can sign in with their credentials

Google OAuth Authentication

1. Users can sign in with their Google account
2. Requires Google OAuth credentials setup
3. Automatically creates user account on first sign-in

Database Schema

User Model

• id: Unique identifier
• name: User's full name
• email: User's email (unique)
• password: Hashed password (for email/password auth)
• image: Profile image URL
• createdAt: Account creation timestamp
• updatedAt: Last update timestamp

Book Model

• id: Unique identifier
• title: Book title
• author: Book author
• genre: Book genre
• userId: Reference to the user who added the book
• createdAt: Book creation timestamp
• updatedAt: Last update timestamp

Project Structure

book-catalog/
├── src/
│   ├── app/
│   │   ├── api/
│   │   │   ├── auth/
│   │   │   │   ├── [...nextauth]/route.ts
│   │   │   │   └── register/route.ts
│   │   │   └── books/
│   │   │       ├── route.ts
│   │   │       └── [id]/route.ts
│   │   ├── auth/
│   │   │   └── signin/page.tsx
│   │   ├── add/page.tsx
│   │   ├── layout.tsx
│   │   ├── page.tsx
│   │   └── providers.tsx
│   ├── lib/
│   │   ├── auth.ts
│   │   └── prisma.ts
│   └── types/
│       └── book.ts
├── prisma/
│   └── schema.prisma
├── .env.example
└── README.md

Features Implemented

✅ Backend API (Next.js + Prisma): Complete CRUD operations for books ✅ Authentication (NextAuth.js): Email/password and Google OAuth ✅ TypeScript Usage: Full type safety throughout the application ✅ Code Structure & Organization: Clean, modular architecture ✅ UI Design & UX: Responsive design with Tailwind CSS ✅ Deployment: Ready for Vercel deployment

Live Demo

• GitHub Repository: [Your GitHub Repo Link]
• Live Application: [Your Vercel Deployment Link]

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

License

This project is licensed under the MIT License.