Frontend Prompt – Next.js Audiobook Platform

You are building the frontend of an AI Audiobook Platform using Next.js 14 (App Router) + TypeScript + TailwindCSS + shadcn/ui.

The backend is a FastAPI service exposing REST APIs. Your frontend must authenticate, upload books, show processing status, display chapters, and stream audio.

Tech Stack (use these)

Next.js 14 with App Router + TypeScript
TailwindCSS + shadcn/ui components
Axios (or Fetch) for API calls
Zustand (or Context) for global state (auth + player)
HTML5
<audio>
for playback (custom UI wrapper OK)
Vercel env-style config via
```
.env.local
```

Environment variables

NEXT_PUBLIC_API_BASE=https://<your-backend-base-url>

Folder Structure (generate this)

app/
  layout.tsx
  page.tsx                     # Landing page
  login/page.tsx
  signup/page.tsx
  dashboard/page.tsx           # My Library
  upload/page.tsx              # Upload flow
  books/[id]/page.tsx          # Book details + chapters + player
components/
  AuthForm.tsx
  BookCard.tsx
  ChapterList.tsx
  AudioPlayer.tsx
  UploadForm.tsx
  Protected.tsx                # gate for auth-only routes
lib/
  api.ts                       # axios instance + typed helpers
  auth.ts                      # token storage + helpers
  types.ts                     # DTOs for API responses
  usePlayerStore.ts            # Zustand store for audio player
styles/
  globals.css

API Contract (call exactly like this)

Auth

POST /auth/signup

→ body

{ email: string, password: string }

→

{ token: string }

POST /auth/login

→ body

{ email: string, password: string }

→

{ token: string }

Books & Tasks

POST /books/upload

(multipart form) → fields:

title?: string

file: File

→

{ task_id: string }

GET /status/{task_id}

→

{ status: "queued" | "processing" | "ready" | "failed", progress?: number, book_id?: string, error?: string }

GET /books

→

Array<{ book_id: string, title: string, status: "processing" | "ready" | "failed" }>

GET /books/{book_id}

→

{ book_id: string, title: string, status: string, chapters: Array<{ chapter_id: string, number: number, title: string }> }

GET /books/{book_id}/chapters/{chapter_id}/audio

→

{ presigned_url: string, expires_in: number }

(Optional) Progress

POST /progress

→ body

{ book_id: string, chapter_id: string, position_seconds: number }

→

{ ok: true }

GET /progress?book_id=...

→

{ chapter_id: string, position_seconds: number }

All authenticated requests must include header:
Authorization: Bearer <token>

Pages & Flows (implement end-to-end)

1) Authentication

Build
```
/login
```
and
```
/signup
```
pages using shadcn/ui forms.
On success, store JWT (localStorage or cookie) and redirect to
```
/dashboard
```
.
Provide a simple Protected component to gate routes that require auth.

2) Dashboard (My Library)

Fetch
```
GET /books
```
on load.
Render cards (title, status). If
```
processing
```
, show progress indicator.
“View Book” button routes to
```
/books/[id]
```
when status is
```
ready
```
.

3) Upload Book

Page
```
/upload
```
with
```
UploadForm
```
:
- Inputs: Title (optional), File input (PDF/DOCX/EPUB/TXT)
- Submit →
```
POST /books/upload
```
  (multipart).
- Receive
```
{ task_id }
```
  and begin polling
```
GET /status/{task_id}
```
  every 5–10s.
- If status becomes
```
ready
```
  , redirect to
```
/books/{book_id}
```
  .
- If
```
failed
```
  , show error toast and allow retry.

4) Book Details + Chapters

Fetch
```
GET /books/{book_id}
```
.
Render book title and chapters list with Play buttons.
When user selects a chapter:
- Call
```
GET /books/{book_id}/chapters/{chapter_id}/audio
```
  .
- Receive
```
{ presigned_url }
```
  and hand off to the audio player.
Keep current chapter & URL in a global player store (Zustand).

5) Audio Player

Build
```
AudioPlayer.tsx
```
with controls:
- Play/Pause, Seek (progress bar), Current Time/Duration
- Chapter title display
The component consumes state from
```
usePlayerStore
```
(src + playing + position).
If progress API is enabled:
- Auto-save
```
position_seconds
```
  to
```
POST /progress
```
  every 30s and on pause/unload.
- On
```
/books/{book_id}
```
  load, fetch
```
GET /progress?book_id=...
```
  and resume.

6) Error & Loading UX

Use skeletons/placeholders while loading data.
Show toast notifications for API errors.
For unauthorized 401 responses, clear token and redirect to
```
/login
```
.

State Management (Zustand example)

Auth store:

{ token, setToken, clearToken }

Player store:

{ chapterId, src, isPlaying, position, setSrc(), play(), pause(), seek() }

lib/api.ts

(specify behaviors)

Create an axios instance with:
- ```
baseURL = process.env.NEXT_PUBLIC_API_BASE
```
- Request interceptor adds
```
Authorization
```
  header if token exists.
- Response interceptor handles 401 → clear token + redirect to
```
/login
```
  .

Export typed functions:

```
signup(data)
```
,
```
login(data)
```
```
getBooks()
```
,
```
getBook(bookId)
```
```
uploadBook(formData)
```
```
pollStatus(taskId)
```
```
getChapterAudioUrl(bookId, chapterId)
```

saveProgress({ book_id, chapter_id, position_seconds })

```
getProgress(bookId)
```

Types (put in

lib/types.ts

)

export type AuthResponse = { token: string };

export type TaskStatus = "queued" | "processing" | "ready" | "failed";

export interface UploadResponse { task_id: string; }
export interface StatusResponse {
  status: TaskStatus;
  progress?: number;
  book_id?: string;
  error?: string;
}

export interface BookListItem {
  book_id: string;
  title: string;
  status: "processing" | "ready" | "failed";
}

export interface BookDetail {
  book_id: string;
  title: string;
  status: string;
  chapters: { chapter_id: string; number: number; title: string; }[];
}

export interface PresignedUrl { presigned_url: string; expires_in: number; }

export interface ProgressPayload {
  book_id: string;
  chapter_id: string;
  position_seconds: number;
}

export interface ProgressState {
  chapter_id: string;
  position_seconds: number;
}

Components (expected behaviors)

AuthForm.tsx

Mode: "login" | "signup"
On submit, call correct auth API.
On success, save token and
```
router.push("/dashboard")
```
.

BookCard.tsx

Props:
```
BookListItem
```
Render title + status + action button.
If
```
ready
```
, button links to
```
/books/[id]
```
.

UploadForm.tsx

Inputs: title (optional), file (required)

On submit:

POST
```
/books/upload
```
(multipart)

Poll

/status/{task_id}

until

{ status: "ready", book_id }

Navigate to
```
/books/{book_id}
```

Show progress and retry on error.

ChapterList.tsx

Props: chapters array
For each chapter:
- On click Play → fetch presigned URL and update player store.

AudioPlayer.tsx

Wraps
```
<audio>
```
element and syncs with player store.
Displays current time, duration, seek bar, play/pause.

Protected.tsx

Gate component: if no token → redirect to
```
/login
```
.

Styling & UX

Tailwind + shadcn/ui:

Use

Card

Button

Input

Label

Progress

Skeleton

Toast

Mobile-first responsive design.
Dark mode support.
Accessibility: keyboard navigation, aria labels on controls.

Acceptance Checklist

Auth pages function and set token
Dashboard lists books with correct statuses
Upload flow works with polling and redirects to the new book
Book details show chapters and can play audio via presigned URL
Player persists and controls work; (optional) progress saved/restored
API errors handled with toasts; unauthorized redirects to login
All API calls include Bearer token
Uses
```
.env.local
```
for
```
NEXT_PUBLIC_API_BASE
```

Notes

Do not implement backend; assume endpoints work as defined.
Keep code modular and typed.
Prefer server components for static pages, client components for forms/player.
Keep player as a single shared component mounted high in the tree (e.g., in layout) so it persists across routes.

Frontend Prompt – Next.js Audiobook Platform

You are building the frontend of an AI Audiobook Platform using Next.js 14 (App Router) + TypeScript + TailwindCSS + shadcn/ui.

The backend is a FastAPI service exposing REST APIs. Your frontend must authenticate, upload books, show processing status, display chapters, and stream audio.

Tech Stack (use these)

Next.js 14 with App Router + TypeScript
TailwindCSS + shadcn/ui components
Axios (or Fetch) for API calls
Zustand (or Context) for global state (auth + player)
HTML5
<audio>
for playback (custom UI wrapper OK)
Vercel env-style config via
```
.env.local
```

Environment variables

NEXT_PUBLIC_API_BASE=https://<your-backend-base-url>

Folder Structure (generate this)

app/
  layout.tsx
  page.tsx                     # Landing page
  login/page.tsx
  signup/page.tsx
  dashboard/page.tsx           # My Library
  upload/page.tsx              # Upload flow
  books/[id]/page.tsx          # Book details + chapters + player
components/
  AuthForm.tsx
  BookCard.tsx
  ChapterList.tsx
  AudioPlayer.tsx
  UploadForm.tsx
  Protected.tsx                # gate for auth-only routes
lib/
  api.ts                       # axios instance + typed helpers
  auth.ts                      # token storage + helpers
  types.ts                     # DTOs for API responses
  usePlayerStore.ts            # Zustand store for audio player
styles/
  globals.css

API Contract (call exactly like this)

Auth

POST /auth/signup

→ body

{ email: string, password: string }

→

{ token: string }

POST /auth/login

→ body

{ email: string, password: string }

→

{ token: string }

Books & Tasks

POST /books/upload

(multipart form) → fields:

title?: string

file: File

→

{ task_id: string }

GET /status/{task_id}

→

{ status: "queued" | "processing" | "ready" | "failed", progress?: number, book_id?: string, error?: string }

GET /books

→

Array<{ book_id: string, title: string, status: "processing" | "ready" | "failed" }>

GET /books/{book_id}

→

{ book_id: string, title: string, status: string, chapters: Array<{ chapter_id: string, number: number, title: string }> }

GET /books/{book_id}/chapters/{chapter_id}/audio

→

{ presigned_url: string, expires_in: number }

(Optional) Progress

POST /progress

→ body

{ book_id: string, chapter_id: string, position_seconds: number }

→

{ ok: true }

GET /progress?book_id=...

→

{ chapter_id: string, position_seconds: number }

All authenticated requests must include header:
Authorization: Bearer <token>

Pages & Flows (implement end-to-end)

1) Authentication

Build
```
/login
```
and
```
/signup
```
pages using shadcn/ui forms.
On success, store JWT (localStorage or cookie) and redirect to
```
/dashboard
```
.
Provide a simple Protected component to gate routes that require auth.

2) Dashboard (My Library)

Fetch
```
GET /books
```
on load.
Render cards (title, status). If
```
processing
```
, show progress indicator.
“View Book” button routes to
```
/books/[id]
```
when status is
```
ready
```
.

3) Upload Book

Page
```
/upload
```
with
```
UploadForm
```
:
- Inputs: Title (optional), File input (PDF/DOCX/EPUB/TXT)
- Submit →
```
POST /books/upload
```
  (multipart).
- Receive
```
{ task_id }
```
  and begin polling
```
GET /status/{task_id}
```
  every 5–10s.
- If status becomes
```
ready
```
  , redirect to
```
/books/{book_id}
```
  .
- If
```
failed
```
  , show error toast and allow retry.

4) Book Details + Chapters

Fetch
```
GET /books/{book_id}
```
.
Render book title and chapters list with Play buttons.
When user selects a chapter:
- Call
```
GET /books/{book_id}/chapters/{chapter_id}/audio
```
  .
- Receive
```
{ presigned_url }
```
  and hand off to the audio player.
Keep current chapter & URL in a global player store (Zustand).

5) Audio Player

Build
```
AudioPlayer.tsx
```
with controls:
- Play/Pause, Seek (progress bar), Current Time/Duration
- Chapter title display
The component consumes state from
```
usePlayerStore
```
(src + playing + position).
If progress API is enabled:
- Auto-save
```
position_seconds
```
  to
```
POST /progress
```
  every 30s and on pause/unload.
- On
```
/books/{book_id}
```
  load, fetch
```
GET /progress?book_id=...
```
  and resume.

6) Error & Loading UX

Use skeletons/placeholders while loading data.
Show toast notifications for API errors.
For unauthorized 401 responses, clear token and redirect to
```
/login
```
.

State Management (Zustand example)

Auth store:

{ token, setToken, clearToken }

Player store:

{ chapterId, src, isPlaying, position, setSrc(), play(), pause(), seek() }

lib/api.ts

(specify behaviors)

Create an axios instance with:
- ```
baseURL = process.env.NEXT_PUBLIC_API_BASE
```
- Request interceptor adds
```
Authorization
```
  header if token exists.
- Response interceptor handles 401 → clear token + redirect to
```
/login
```
  .

Export typed functions:

```
signup(data)
```
,
```
login(data)
```
```
getBooks()
```
,
```
getBook(bookId)
```
```
uploadBook(formData)
```
```
pollStatus(taskId)
```
```
getChapterAudioUrl(bookId, chapterId)
```

saveProgress({ book_id, chapter_id, position_seconds })

```
getProgress(bookId)
```

Types (put in

lib/types.ts

)

export type AuthResponse = { token: string };

export type TaskStatus = "queued" | "processing" | "ready" | "failed";

export interface UploadResponse { task_id: string; }
export interface StatusResponse {
  status: TaskStatus;
  progress?: number;
  book_id?: string;
  error?: string;
}

export interface BookListItem {
  book_id: string;
  title: string;
  status: "processing" | "ready" | "failed";
}

export interface BookDetail {
  book_id: string;
  title: string;
  status: string;
  chapters: { chapter_id: string; number: number; title: string; }[];
}

export interface PresignedUrl { presigned_url: string; expires_in: number; }

export interface ProgressPayload {
  book_id: string;
  chapter_id: string;
  position_seconds: number;
}

export interface ProgressState {
  chapter_id: string;
  position_seconds: number;
}

Components (expected behaviors)

AuthForm.tsx

Mode: "login" | "signup"
On submit, call correct auth API.
On success, save token and
```
router.push("/dashboard")
```
.

BookCard.tsx

Props:
```
BookListItem
```
Render title + status + action button.
If
```
ready
```
, button links to
```
/books/[id]
```
.

UploadForm.tsx

Inputs: title (optional), file (required)

On submit:

POST
```
/books/upload
```
(multipart)

Poll

/status/{task_id}

until

{ status: "ready", book_id }

Navigate to
```
/books/{book_id}
```

Show progress and retry on error.

ChapterList.tsx

Props: chapters array
For each chapter:
- On click Play → fetch presigned URL and update player store.

AudioPlayer.tsx

Wraps
```
<audio>
```
element and syncs with player store.
Displays current time, duration, seek bar, play/pause.

Protected.tsx

Gate component: if no token → redirect to
```
/login
```
.

Styling & UX

Tailwind + shadcn/ui:

Use

Card

Button

Input

Label

Progress

Skeleton

Toast

Mobile-first responsive design.
Dark mode support.
Accessibility: keyboard navigation, aria labels on controls.

Acceptance Checklist

Auth pages function and set token
Dashboard lists books with correct statuses
Upload flow works with polling and redirects to the new book
Book details show chapters and can play audio via presigned URL
Player persists and controls work; (optional) progress saved/restored
API errors handled with toasts; unauthorized redirects to login
All API calls include Bearer token
Uses
```
.env.local
```
for
```
NEXT_PUBLIC_API_BASE
```

Notes

Do not implement backend; assume endpoints work as defined.
Keep code modular and typed.
Prefer server components for static pages, client components for forms/player.
Keep player as a single shared component mounted high in the tree (e.g., in layout) so it persists across routes.

Frontend Prompt – Next.js Audiobook Platform

Related Skills

Markdown Converter

Nano Banana Pro

1password