A clean, functional, and fully responsive frontend application for managing a library system. Built with React, TypeScript, Redux Toolkit, and RTK Query, this project allows users to manage books, borrow them, and view borrow summaries.
🌐 Frontend: Library Management Live 🔗 Backend: Live Link 📁 Backend Repo: Github
This project was developed as part of an assignment to demonstrate:
- REST API integration using RTK Query
- State management with Redux Toolkit
- Book and Borrow management features
- Pagination, forms, validation, and summary
- View all books in grid with sorting & pagination.
- Add new books using a type-safe form.
- Edit book details with form pre-filled.
- Delete books with confirmation dialog.
- Implemented business logic that If book
copies === 0, it becomes Unavailable.
- Borrow a book with
quantityanddue date. - Form validation:
- Quantity cannot exceed available copies.
- Future dates only.
- After borrowing:
- Copies decrease.
- Book may become unavailable if all copies borrowed.
- Redirect to borrow summary with success message.
- Aggregated summary showing:
- Book title, ISBN, and total quantity borrowed.
- Fetched using a backend aggregation endpoint.
| Route | Description |
|---|---|
/books |
Book list with actions |
/create-book |
Add a new book |
/books/:id |
Book detail view |
/edit-book/:id |
Edit a book |
/borrow/:bookId |
Borrow a book |
/borrow-summary |
View borrow summary |
| Layer | Technology |
|---|---|
| Frontend | React + TypeScript |
| State Management | Redux Toolkit + RTK Query |
| Forms | React Hook Form + Zod |
| API | RESTful API (Node + Express + MongoDB/Mongoose) |
| Styling | Tailwind CSS |
| Notifications | sonner (toast notifications) |
- Node.js (v18+ recommended)
- Backend API running and accessible
npm install --forcenpm run devnpm run buildThis project is open-source and available under the MIT License.