A Library Management System (LMS) allows users to manage library books, members, and borrowing history. In this article, we'll build a basic LMS using Next.js, which will include functionalities for managing books, members, and viewing borrowing history.
Prerequisites:
Approach to Create Library Management System Using Next.js:
- Create Components Directory:
- Navbar.js: Navigation bar for the application.
- manage-book.js: Form to add or edit books.
- issue-book.js: Form to issue books.
- view-issued.js: Component to view issued books.
- Display a form to add books and a list of existing books which will have functionality to edit and delete books.
- Display a form to issue books to members where admin will select students name and book details to issue.
- Display a table of issued books with details like student name, book title, author, and issue date.
Steps to Create Library Management System
Step 1: Create a application of NextJS using the following command.
npx create-next-app lmsStep 2: It will ask you some questions, so choose as the following.
√ Would you like to use TypeScript? ... No
√ Would you like to use ESLint? ... No
√ Would you like to use Tailwind CSS? ... No
√ Would you like to use `src/` directory? ... Yes
√ Would you like to use App Router? (recommended) ... Yes
√ Would you like to customize the default import alias (@/*)? ... No
Step 3: Navigate to project directory
cd lmsStep 4: Install the necessary package in your project using the following command.
npm install bootstrapStep 5: Create the folder structure as shown below and create the files in respective folders.
Project Structure
.png)
Dependencies
"dependencies": {
"bootstrap": "^5.3.3",
"next": "14.1.3",
"react": "^18",
"react-dom": "^18",
}
Example: Create the required files and write the following code.
// Page.js
import LibraryManagement from './components/LibraryManagement';
function App() {
return (
<>
<LibraryManagement/ >
</>
);
}
export default LibraryManagement;
// Navbar.js
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Link from 'next/link';
function Navbar() {
return (
<nav className="navbar navbar-expand-lg navbar-light bg-light shadow top-0">
<div className="container">
<a className="navbar-brand text-success" href="#">
GFG Estate
</a>
<button className="navbar-toggler"
type="button" data-toggle="collapse"
data-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav">
<li className="nav-item">
<Link className="nav-link"
href="/">
Add Book
</Link>
</li>
<li className="nav-item">
<Link className="nav-link" href="/issue-book">Issue Book</Link>
</li>
<li className="nav-item">
<Link className="nav-link"
href="/view-issued">
View Issued Books
</Link>
</li>
</ul>
</div>
</div>
</nav>
);
}
export default Navbar;
// components/LibraryManagament.js
'use client'
import React, { useState, useEffect } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Navbar from '@/app/components/Navbar';
const ManageBooks = () => {
const [bookTitle, setBookTitle] = useState('');
const [author, setAuthor] = useState('');
const [publishedDate, setPublishedDate] = useState('');
const [quantity, setQuantity] = useState('');
const [books, setBooks] = useState([]);
const [editingBookId, setEditingBookId] = useState(null);
useEffect(() => {
const savedBooks = JSON.parse(localStorage.getItem('books')) || [];
setBooks(savedBooks);
}, []);
const handleAddBook = () => {
if (editingBookId) {
const updatedBooks = books.map((book) =>
book.id === editingBookId
? { ...book, title: bookTitle, author, publishedDate, quantity }
: book
);
localStorage.setItem('books', JSON.stringify(updatedBooks));
setBooks(updatedBooks);
setEditingBookId(null);
} else {
const newBook = {
id: Math.floor(Math.random() * 1000),
title: bookTitle,
author,
publishedDate,
quantity,
};
const updatedBooks = [...books, newBook];
localStorage.setItem('books', JSON.stringify(updatedBooks));
setBooks(updatedBooks);
}
setBookTitle('');
setAuthor('');
setPublishedDate('');
setQuantity('');
};
const handleEdit = (book) => {
setBookTitle(book.title);
setAuthor(book.author);
setPublishedDate(book.publishedDate);
setQuantity(book.quantity);
setEditingBookId(book.id);
};
const handleDelete = (id) => {
const updatedBooks = books.filter((book) => book.id !== id);
localStorage.setItem('books', JSON.stringify(updatedBooks));
setBooks(updatedBooks);
};
return (
<>
<Navbar />
<div className="container mt-5">
<div className="card">
<div className="card-body">
<h2 className="card-title">Manage Books</h2>
<form>
<div className="form-group">
<label htmlFor="bookTitle">Book Title</label>
<input
type="text"
className="form-control"
id="bookTitle"
value={bookTitle}
onChange={(e) => setBookTitle(e.target.value)}
/>
</div>
<div className="form-group mt-3">
<label htmlFor="author">Author</label>
<input
type="text"
className="form-control"
id="author"
value={author}
onChange={(e) => setAuthor(e.target.value)}
/>
</div>
<div className="form-group mt-3">
<label htmlFor="publishedDate">Published Date</label>
<input
type="date"
className="form-control"
id="publishedDate"
value={publishedDate}
onChange={(e) => setPublishedDate(e.target.value)}
/>
</div>
<div className="form-group mt-3">
<label htmlFor="quantity">Quantity</label>
<input
type="number"
className="form-control"
id="quantity"
value={quantity}
onChange={(e) => setQuantity(e.target.value)}
/>
</div>
<button type="button" className="btn btn-primary mt-3"
\onClick={handleAddBook}>
{editingBookId ? 'Update Book' : 'Add Book'}
</button>
</form>
<h3 className="mt-4">Book List</h3>
<ul className="list-group">
{books.map((book) => (
<li key={book.id} className="list-group-item d-flex
justify-content-between align-items-center">
<div>
<h5>{book.title}</h5>
<p>Author: {book.author}</p>
<p>Published Date: {book.publishedDate}</p>
<p>Quantity: {book.quantity}</p>
</div>
<div>
<button className="btn btn-warning btn-sm
me-2" onClick={() => handleEdit(book)}>Edit</button>
<button className="btn btn-danger btn-sm"
onClick={() => handleDelete(book.id)}>Delete</button>
</div>
</li>
))}
</ul>
</div>
</div>
</div>
</>
);
};
export default ManageBooks;
// pages/issue-book.js
import React, { useState, useEffect } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Navbar from '@/app/components/Navbar';
const IssueBook = () => {
const [students, setStudents] = useState([
{ name: 'Aarav Sharma' },
{ name: 'Vivaan Patel' },
{ name: 'Aditya Verma' },
{ name: 'Vihaan Kumar' },
{ name: 'Reyansh Gupta' },
{ name: 'Aanya Singh' },
{ name: 'Isha Reddy' },
{ name: 'Mira Nair' },
{ name: 'Saanvi Joshi' },
]);
const [books, setBooks] = useState([]);
const [selectedStudent, setSelectedStudent] = useState('');
const [selectedBookId, setSelectedBookId] = useState('');
const [issueDate, setIssueDate] = useState('');
useEffect(() => {
const savedBooks = JSON.parse(localStorage.getItem('books')) || [];
setBooks(savedBooks);
}, []);
const handleSelectedStudentChange = (e) => {
setSelectedStudent(e.target.value);
};
const handleSelectedBookChange = (e) => {
setSelectedBookId(e.target.value);
};
const handleIssueDateChange = (e) => {
setIssueDate(e.target.value);
};
const handleIssueBook = () => {
if (!selectedStudent || !selectedBookId || !issueDate) {
alert('Please fill in all fields.');
return;
}
const book = books.find(b => b.id === parseInt(selectedBookId)) || {};
const issuedBook = {
student: selectedStudent,
bookTitle: book.title || 'Unknown Title',
author: book.author || 'Unknown Author',
issueDate: issueDate,
};
const existingIssues = JSON.parse(localStorage.getItem('issuedBooks')) || [];
const updatedIssues = [...existingIssues, issuedBook];
localStorage.setItem('issuedBooks', JSON.stringify(updatedIssues));
setSelectedStudent('');
setSelectedBookId('');
setIssueDate('');
};
return (
<>
<Navbar />
<div className="container mt-5">
<div className="card">
<div className="card-body">
<h2 className="card-title">Issue Book</h2>
<form>
<div className="form-group">
<label htmlFor="student">Select Student</label>
<select
id="student"
className="form-select"
value={selectedStudent}
onChange={handleSelectedStudentChange}
>
<option value="">Select Student</option>
{students.map((student, index) => (
<option key={index} value={student.name}>
{student.name}
</option>
))}
</select>
</div>
<div className="form-group mt-3">
<label htmlFor="book">Select Book</label>
<select
id="book"
className="form-select"
value={selectedBookId}
onChange={handleSelectedBookChange}
>
<option value="">Select Book</option>
{books.map((book) => (
<option key={book.id} value={book.id}>
{book.title} - {book.author}
</option>
))}
</select>
</div>
<div className="form-group mt-3">
<label htmlFor="issueDate">Issue Date</label>
<input
type="date"
className="form-control"
id="issueDate"
value={issueDate}
onChange={handleIssueDateChange}
/>
</div>
<button
type="button"
className="btn btn-primary mt-3"
onClick={handleIssueBook}
>
Issue Book
</button>
</form>
</div>
</div>
</div>
</>
);
};
export default IssueBook;
// pages/view-issued.js
import React, { useState, useEffect } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Navbar from '@/app/components/Navbar';
const ViewIssuedBooks = () => {
const [issuedBooks, setIssuedBooks] = useState([]);
useEffect(() => {
// Fetch issued books from localStorage
const savedIssuedBooks = JSON.parse
(localStorage.getItem('issuedBooks')) || [];
setIssuedBooks(savedIssuedBooks);
}, []);
return (
<>
<Navbar />
<div className="container mt-5">
<div className="card">
<div className="card-body">
<h2 className="card-title">Issued Books</h2>
<div className="table-responsive">
<table className="table">
<thead>
<tr>
<th>Student</th>
<th>Book Title</th>
<th>Author</th>
<th>Issue Date</th>
</tr>
</thead>
<tbody>
{issuedBooks.length > 0 ? (
issuedBooks.map((issue, index) => (
<tr key={index}>
<td>{issue.student}</td>
<td>{issue.bookTitle}</td>
<td>{issue.author}</td>
<td>{issue.issueDate}</td>
</tr>
))
) : (
<tr>
<td colSpan="4" className="text-center">
No issued books</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
</div>
</div>
</>
);
};
export default ViewIssuedBooks;
Start your application using the following command
npm run devOutput
