Build Bookstore App with Next.js and Tailwind CSS

Context

Create a simple bookstore app from scratch in an empty directory. The app features a book catalog (grid view) and individual book detail pages, powered by hardcoded mock data.

Tech Stack

  1. Next.js 15 (App Router)
  2. Tailwind CSS v4
  3. TypeScript

Project Structure

bookstore/
├── src/
│   ├── app/
│   │   ├── layout.tsx          # Root layout with navbar
│   │   ├── page.tsx            # Home — book grid catalog
│   │   ├── globals.css         # Tailwind imports
│   │   └── books/
│   │       └── [id]/
│   │           └── page.tsx    # Book detail page
│   ├── components/
│   │   ├── Navbar.tsx          # Site header with logo/nav
│   │   └── BookCard.tsx        # Card component for the grid
│   └── data/
│       └── books.ts            # Mock book data + TypeScript types
├── public/                     # (empty, Next.js default)
├── package.json
├── tsconfig.json
├── next.config.ts
└── tailwind.config.ts

Steps

  1. Scaffold Next.js project — npx create-next-app@latest . --typescript --tailwind --eslint --app --src-dir --no-import-alias --use-npm
  2. Create mock data — src/data/books.ts with ~8 books (title, author, price, genre, description, cover image URL, rating)
  3. Build BookCard component — cover image, title, author, price, rating; links to detail page
  4. Build Navbar component — logo/site name, link to home
  5. Build home page — responsive grid of BookCards with a heading
  6. Build book detail page — /books/[id] with full book info (cover, title, author, price, genre, description, rating)
  7. Polish styling — consistent Tailwind styling, hover effects, responsive layout

Mock Data Shape

type Book = {
  id: string;
  title: string;
  author: string;
  price: number;
  genre: string;
  description: string;
  coverImage: string;
  rating: number;
};

Cover images will use placeholder URLs from https://covers.openlibrary.org (real book covers, no API key needed).

Verification

  1. npm run dev — app starts without errors
  2. Home page shows a responsive grid of books
  3. Clicking a book card navigates to /books/[id] with full details
  4. Back navigation works from detail page
  5. Responsive layout works on mobile/tablet/desktop

Key features:

  1. Responsive grid layout (1 col mobile, 2 tablet, 3 laptop, 4 desktop)
  2. Hover animations on cards (lift + shadow + image zoom)
  3. Static generation with generateStaticParams for all book detail pages
  4. notFound() handling for invalid book IDs
  5. Sticky frosted-glass navbar

Run npm run dev to start the dev server at http://localhost:3000.