eLib Client

A Next.js frontend for an online library platform where users can discover books, view book details, and manage their own uploaded books from a personal dashboard.

Features

• Public home page with server-rendered book listing
• Single-book detail page with metadata and download action
• Authentication flow (register, login, logout)
• Protected dashboard for authenticated users
• Book management in dashboard:
  • upload new books
  • edit existing books
  • delete books
• Persistent auth state using browser storage

Tech Stack

• Next.js 16 (App Router)
• React 19
• TypeScript
• Tailwind CSS 4
• Lucide React icons

Prerequisites

• Node.js 18+ (recommended: latest LTS)
• npm 9+
• Running eLib backend API

Environment Variables

Create a .env file in the project root:

BACKEND_URL=http://localhost:5000/api/v1
NEXT_PUBLIC_BACKEND_URL=http://localhost:5000/api/v1

Variable usage:

• BACKEND_URL: used by server-side data fetching (home page book list)
• NEXT_PUBLIC_BACKEND_URL: used by client-side API calls (auth, dashboard CRUD, book details)

Getting Started

1. Install dependencies:

npm install

2. Start the development server:

npm run dev

3. Open http://localhost:3000

Available Scripts

• npm run dev - run in development mode
• npm run build - create production build
• npm run start - start production server
• npm run lint - run ESLint

Project Structure

src/
  app/
    (home)/                # Home page and public book list
    book/[bookId]/         # Single book page
    login/                 # Login page
    register/              # Registration page
    dashboard/             # Protected user dashboard
  components/              # Shared UI (navbar, footer, loading)
  hooks/                   # Custom hooks (auth state)
  lib/                     # API client helpers
  types/                   # Shared TypeScript types

Backend Integration Notes

The UI expects backend routes under:

• /users/register
• /users/login
• /books
• /books/:bookId

Authenticated routes use a bearer token stored in localStorage as authToken.

Screenshots

Add screenshots to public/screenshots and reference them here:

![Home page](public/screenshots/home.png)
![Book details](public/screenshots/book-details.png)
![Dashboard](public/screenshots/dashboard.png)

Suggested capture list:

• Home page (book grid)
• Login / Register pages
• Single book details page
• Dashboard (book list)
• Upload and Edit book modals

API Notes

• The app depends on both server-side and client-side API access:
  • server components use BACKEND_URL
  • client components use NEXT_PUBLIC_BACKEND_URL
• If books are not loading on home page, verify the backend is reachable from server-side rendering context.
• If login/dashboard actions fail, confirm browser-accessible NEXT_PUBLIC_BACKEND_URL is correct.
• Auth token is stored in localStorage and sent as Authorization: Bearer <token> for protected book routes.
• For production, configure CORS on the backend to allow your deployed frontend domain.

Contributing

Contributions are welcome.

1. Fork the repository
2. Create a feature branch (git checkout -b feature/your-feature)
3. Commit your changes (git commit -m "feat: add your feature")
4. Push your branch (git push origin feature/your-feature)
5. Open a pull request

Please keep changes focused, run lint locally, and include clear PR descriptions.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Deployment

Deploy this app to Vercel or any Node-compatible hosting provider.

For production, make sure both BACKEND_URL and NEXT_PUBLIC_BACKEND_URL point to your deployed backend API.