Build a Library Management System Using Next.js
Last Updated :
05 Aug, 2024
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 lms
Step 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 lms
Step 4: Install the necessary package in your project using the following command.
npm install bootstrap
Step 5: Create the folder structure as shown below and create the files in respective folders.
Project Structure
.png)
Folder StructureDependencies
"dependencies": {
"bootstrap": "^5.3.3",
"next": "14.1.3",
"react": "^18",
"react-dom": "^18",
}Example: Create the required files and write the following code.
JavaScript
// 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 dev
Output
Build a Library Management System Using Next.js
Similar Reads
Build a Learning Management System Using Next.js A Learning Management System (LMS) is a platform for delivering, tracking, and managing educational courses. In this article, we'll guide you through building a simple LMS using Next.js, covering course creation, listing, and basic management features.PrerequisitesNext.jsBootstrapNodeJSApproach to B
7 min read
Build an Event Management System Using Next.js An Event Management System is a web application that helps users create and manage events. It typically includes features such as event creation, editing, deletion, and listing. By using Next.js, a React framework for server-rendered applications, we can use its built-in routing and server-side rend
10 min read
How to Build Library Management System Using NodeJS? A Library Management System is an essential application for managing books, users, and transactions in a library. It involves adding, removing, updating, and viewing books and managing users. In this article, we will walk through how to build a simple Library Management System using NodeJS.What We A
6 min read
Build an Inventory Management System Using NextJS We will build an Inventory Management System. We will walk through the step-by-step process of creating an inventory management system. This application contains a dashboard that shows a brief report of our inventory. Product sections show all the products listed with a search filter and allow users
13 min read
Build a Task Management App using Next JS A Task management app is a useful web application that assists in efficiently organizing and managing tasks. It provides various functionalities such as creating tasks, assigning prioritieÂs and deadlines, marking complete tasks, and enabling task search based on keÂywords and priorities.Preview of
5 min read