A full-featured library management frontend built with React, TypeScript, and Chakra UI. Browse books, filter by genre and author, borrow and return titles, leave comments, and manage user accounts — all in a clean, responsive interface.
Backend: Pairs with library-java — a Spring Boot REST API.
| Feature | Description |
|---|---|
| Book catalogue | Browse all available books with cover images and metadata |
| Search | Real-time search by title or author |
| Genre & author filters | Sidebar filter panel — select a genre or author to narrow results |
| Borrow / Return | Borrow available books and return them when done |
| Book detail page | Full book info + user comments |
| Comment system | Add comments to any book |
| User page | View borrowed books and account details |
| Sign-up | New user registration |
| Layer | Technology |
|---|---|
| Framework | React 18 |
| Language | TypeScript |
| Build tool | Vite |
| UI library | Chakra UI |
| Routing | React Router v6 |
| State | React hooks (useState, useEffect) |
| Data fetching | Custom hooks (useBooks, useGenres, useAuthors) |
# 1. Clone
git clone https://github.com/salamon30/bookShelfGenious.git
cd bookShelfGenious/BookshelfGenius-feature-borrowed-books
# 2. Install dependencies
npm install
# 3. Start the dev server
npm run dev
# → http://localhost:5173Make sure the library-java backend is running on
http://localhost:8080before starting the frontend.
src/
├── App.tsx # Root layout — NavBar, GenreList, AuthorList, BookGrid
├── components/
│ ├── NavBar.tsx # Search bar + navigation
│ ├── BookGrid.tsx # Responsive book card grid
│ ├── BookPage.tsx # Book detail + comments
│ ├── GenreList.tsx # Genre filter sidebar
│ ├── AuthorList.tsx # Author filter sidebar
│ ├── SignUpPage.tsx # User registration form
│ └── UserPage.tsx # Borrowed books + account info
└── hooks/
├── useBooks.ts # Fetch and manage book state
├── useGenres.ts # Genre data
└── useAuthors.ts # Author data
Recep Uzun — AI Master's Student @ Deggendorf Institute of Technology
