Managing a collection of books has never been easier! In this blog, we’ll build a Book Management System using Spring Boot for the backend and a simple HTML + JavaScript frontend. This project demonstrates the power of RESTful APIs combined with a clean and user-friendly interface.

By the end of this blog, you’ll have a fully functional CRUD (Create, Read, Update, Delete) application integrated with a MySQL database and a dynamic frontend.

🔎 1. Introduction: What are we building and why?

This project is a Book Management System that allows users to:

Add books with details such as title, author, price, and an image URL.
View all books in a list format.
Edit or delete books using RESTful APIs.
Interact with the backend using a responsive frontend.

This project is perfect for beginners who want to:

Learn Spring Boot for backend development.
Build RESTful APIs with JPA and Hibernate.
Create a simple UI using HTML, Tailwind CSS, and JavaScript.

📚 2. Backend Architecture

The backend is built using Spring Boot and follows the CRUD design pattern. Here's an overview of the key components:

Book Entity

The Book class is annotated with @Entity, representing the database table. Each book has:

An autogenerated ID.
Fields for title, author, price, and imageUrl.

@Entity
public class Book {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private int id;

    private String title;
    private String author;
    private double price;
    private String imageUrl;

    // Getters and Setters...

    @Override
    public String toString() {
        return "Book{" +
                "id=" + id +
                ", title='" + title + '\'' +
                ", author='" + author + '\'' +
                ", price=" + price +
                ", imageUrl='" + imageUrl + '\'' +
                '}';
    }
}

Book Repository

The BookRepository interface extends JpaRepository, providing built-in methods for CRUD operations. Custom methods are also defined for filtering books by:

Author name.
Keyword in the title.
Price range.

@Repository
public interface BookRepository extends JpaRepository<Book, Integer> {

    List<Book> findByAuthor(String author);

    List<Book> findByTitleContaining(String keyword);

    List<Book> findByPriceBetween(double minPrice, double maxPrice);
}

Book Controller

The BookController class exposes RESTful endpoints for managing books:

POST /books: Add a new book.
GET /books: Retrieve all books.
PUT /books/{id}: Update a book by ID.
DELETE /books/{id}: Delete a book by ID.

@RestController
public class BookController {

    @Autowired
    BookRepository bookRepository;

    @PostMapping("/books")
    public Book createBook(@RequestBody Book book) {
        return bookRepository.save(book);
    }

    @GetMapping("/books")
    public List<Book> retrieveAllBooks() {
        return bookRepository.findAll();
    }

    @PutMapping("/books/{id}")
    public Book updateBook(@PathVariable int id, @RequestBody Book book) {
        book.setId(id);
        return bookRepository.save(book);
    }

    @DeleteMapping("/books/{id}")
    public ResponseEntity<?> deleteBook(@PathVariable int id, @RequestBody Book book) {
        book.setId(id);
        bookRepository.delete(book);
        return ResponseEntity.ok().build();
    }
}

Application Entry Point

The CrudRestJpaDemoApplication class is the entry point of the Spring Boot application.

@SpringBootApplication
public class CrudRestJpaDemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(CrudRestJpaDemoApplication.class, args);
    }
}

💻 3. Frontend Architecture

The frontend is built using HTML, Tailwind CSS, and vanilla JavaScript. It communicates with the backend RESTful APIs to perform CRUD operations.

Key Features:

Add Book Form: A form to input book details and save them to the backend.
Book List: Dynamically generated list of books fetched from the backend.
Edit/Delete Buttons: Buttons to update or delete books.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Book Management</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-6">
<div class="max-w-3xl mx-auto bg-white p-6 rounded shadow">
  <h2 class="text-xl font-bold mb-4">Book Management</h2>

  <form id="bookForm" class="mb-4">
    <input type="hidden" id="bookId">
    <input type="text" id="bookTitle" placeholder="Book Title" class="w-full p-2 border rounded mb-2" required>
    <input type="text" id="bookAuthor" placeholder="Author" class="w-full p-2 border rounded mb-2" required>
    <input type="number" id="bookPrice" placeholder="Price" class="w-full p-2 border rounded mb-2" required>
    <input type="text" id="bookImageUrl" placeholder="Image URL" class="w-full p-2 border rounded mb-2" required>
    <div class="flex space-x-2">
      <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded">Save Book</button>
      <button type="button" onclick="updateBook()" class="bg-green-500 text-white px-4 py-2 rounded">Update Book</button>
    </div>
  </form>

  <ul id="bookList" class="space-y-4"></ul>
</div>

<script>
  // JavaScript for interacting with the backend
</script>
</body>
</html>

🧠 4. Challenges & Learnings

Challenges:

Designing a clean and user-friendly API with Spring Boot.
Handling null or invalid inputs on both the backend and frontend.
Ensuring the frontend dynamically updates without refreshing the page.

Learnings:

How to build RESTful APIs with Spring Boot.
CRUD operations with JPA and Hibernate.
Creating dynamic UI components using vanilla JavaScript.

🏃‍♂️ 5. How to Run It

Prerequisites:

Java 21 (or compatible version) installed.
MySQL Database running locally.
Node.js (optional, for running a local server for the frontend).

Steps:

Clone the GitHub repository:

 git clone https://github.com/Mayurdpatil67/springboot-rest-bookstore.git
 cd springboot-rest-bookstore

Configure the database in application.properties:

 spring.datasource.url=jdbc:mysql://localhost:3306/bookdb
 spring.datasource.username=root
 spring.datasource.password=yourpassword

Run the Spring Boot application:
```
 mvn spring-boot:run
```
Open the index.html file in a browser to interact with the frontend.

🌟 6. GitHub Repository

The complete source code for this project is available on GitHub. Feel free to clone, fork, or contribute to the repository:

GitHub Link: Book Management System

🌟 7. Conclusion

This project demonstrates how to build a full-stack application using Spring Boot for the backend and a simple, dynamic frontend. You’ve learned:

How to create RESTful APIs with Spring Boot.
How to manage a MySQL database with JPA and Hibernate.
How to build a clean and interactive UI with Tailwind CSS and JavaScript.

What’s Next?

Add pagination for the book list.
Implement search and filter functionality.
Add user authentication for secure access.

Happy coding! 📚🚀

Building a Book Management System with Spring Boot