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
7 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
6 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
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
Building a Toll Road Management System using Node.js
In this article, we are going to build a simple Toll Road Management System using Node.js, where the data will be stored in a local MongoDB database. Problem Statement: In a toll tax plaza, it is difficult to record all the transactions and store them in a single place, along with that, if required,
15+ min read
Build a Recipe Manager Using Next.js
A Recipe Manager is a web application that allows users to manage and share their recipes. This application enables users to add new recipes, view a list of recipes, manage recipe and search for recipes by title. Built with Next.js, this app leverages server-side rendering for better performance. Us
10 min read
How to build Hostel Management System using Node.js ?
In this article, we are going to create a Hostel Management System. A Hostel Management System is used to manage the record of students of a college to which the college provides a hostel, where a college can view all the student data including their names, roll number, date of birth, city, phone nu
9 min read
Document Management System using NextJS
The Document Management System is a web application developed using Next.js, that allows users to efficiently manage their documents. The system provides features for uploading, organizing, and retrieving documents. Users can upload documents through the web interface, which are then stored in local
5 min read
Build a Car Rental System Using Next.js
We will build a car rental system using Next.js, a popular React framework that provides server-side rendering and static site generation. This platform will allow users to browse and book vehicles for short-term usage. Output Preview: Let us have a look at how the final output will look like. Prere
9 min read