💡Inspiration

As a frequent visitor to my institute's central library, I often wished for a simple way to check the availability of books without needing to visit in person. This experience inspired me to create HyperLibrary, a library management portal designed to simplify book access for school children. The platform allows students to browse and check book availability online, eliminating unnecessary trips for basic inquiries. Beyond convenience, HyperLibrary integrates intelligent APIs, which you'll discover more about later, to enhance the library experience. It also includes an administrator interface to streamline book issuance and management, ensuring seamless and efficient operations for both students and administrators.

⚒️ Tech Stack

To address the challenges of managing library resources efficiently, I utilized Modus to create intelligent APIs that generate detailed information with minimal input. For the frontend, I chose Next.js and Tailwind CSS for a fast and user-friendly experience. Data management is handled by Supabase, a PostgreSQL database, ensuring seamless storage of book details, issuance records, and user profiles. This combination creates a streamlined and efficient library management system for both students and administrators.

Modus App is Hosted on Hypermode, whereas the NextJS Project is Hosted on Verel.

🤔 Why Modus ?

It’s an easy way to build serverless apps. It lets me write in Go or AssemblyScript, and seamlessly integrates models and data. Whether building a simple app or something more complex, Modus scales to fit my needs, so I can focus on creating without worrying about infrastructure.

🏹 Modus Project Layout

🚀 Modus Manifest

The App Manifest in Modus defines essential configurations for our app’s functions, models, and integrations. It’s specified in the modus.json file and allows us to manage how your functions and models interact at runtime.

The manifest is structured into:

• Endpoints: Define how your app’s functions integrate with frontend or external APIs.

• Connections: Establish links to external services or model hosts.

• Models: Set up AI inference services for processing within your functions.

• Collections: Group text data to enable effective natural language searches.

Overall, it ensures that the app's resources are organized and accessible for efficient operation.

🏹 Database (Supabase)

Modus simplifies interactions with PostgreSQL databases using the PostgreSQL APIs. For my library management app, I’ve leveraged Supabase, which offers a fully managed PostgreSQL database with features like real-time functionality, automated backups, and useful extensions.

In my app, the database is structured into four main tables:

• Books: Stores details about the books available in the library.

• Students: Holds the personal information of the students.

• Issued: Tracks records of book issuance and returns.

• ScheduledTask: Track records of tasks scheduled for announcement.

With Supabase, the data is securely managed and easily accessible, providing a smooth experience for both users and administrators.

🔗 Modus Connections

• hypermode

  Default for model connections and collections.

• library-database

  This connection is used to connect PostgreSQL database provided by Supabase.

• openLibrary

  Base URL: https://openlibrary.org/

  It is an open, editable library catalog, building towards a web page for every book ever published.

• google

  This connection is used for the Gemini API.

• email

  This connection is used to connect with SMTP2GO (Mail Sending Service), More about it Later.

• discord

  This connection is to connect using Discord webhooks.

• telegram

  This connection is to connect using Telegram Bots/Channels.

• razorpay

  This connection is used to connect with RazorPay (Payment Service), More about it Later.

🦉 Modus Models

• text-generator

  meta-llama/Meta-Llama-3.1-8B-Instruct

  The Model is used to generate response to Text based Inputs.

• minilm

  sentence-transformers/all-MiniLM-L6-v2

  This is a lightweight model from the Sentence-Transformers library, optimized for sentence embeddings and semantic similarity tasks.

• gemini-1-5-pro

  gemini-1.5-pro, Model by Gemini

📚 Modus Collection

• books

  Books collection is used to store a copy of book details that is added manually by the administrator. Collections make it easy to use vector embeddings for natural language search by defining indexed data types that are embedded and searched automatically based on the chosen search method.

🦄 Modus Functions

1. generateText

   This function is designed to generate text using an AI model. The function retrieves the "text-generator" model from which we have defined it in the Modus Models Topic earlier.

2. generateTextWithGemini

   This function is used to generate text using the Gemini Model. For Testing Purpose only.

3. miniLMEmbed

   This function converts text into machine-readable vector representations that capture semantic meaning, enabling AI models to process and analyze text effectively. We defined this in our books collection in modus.json file to perform semantic search.

4. addBookToSupabase

   When an admin adds a new book, they only need to provide the book title, author, and ISBN number. The remaining details are automatically generated and updated to the database:

   • Category and Description: These are generated using the Meta LLaMA model through the Modus Function, which uses the provided ISBN to produce relevant content.

   • Cover Image: A dynamic link is generated using the ISBN, fetching the book cover from covers.openlibrary.org, and the image is then stored in the Books Database.

This streamlined process ensures that the admin can quickly add new books with minimal effort while maintaining comprehensive and accurate information.

Simultaneously, the books collection will be filled with a copy of some fields like book title, author and cover image. This will help us to retrieve data using Natural Language search option in student portal.

5. deleteBookFromSupabase

   This function deletes the particular books from the Books table and simultaneously removes it from the book collection.

6. addStudentToSupabase & deleteStudentFromSupabase

   Both of this functions perform addition and deletion in Students table from Admin side. without creating an authenticated email.

7. upsertBook & removeBook & searchBooks

   This three functions work together to manage and search book data stored in the books collection. The upsertBook function enables adding or updating book entries, taking inputs such as the book's unique ID, description, title, author, and cover. It ensures that the collection stays updated whenever a book is added. The removeBook function removes a specific book entry from the books collection using its ID. Lastly, the searchBooks function performs semantic searches on the books collection, leveraging embedding models defined in the Modus manifest file. Together, these functions ensure efficient data management and retrieval in the books collection.

8. fetchOpenBook

   This function retrieves book information from the OpenLibrary API based on a search term and returns an array of Book objects. Since the initial API response does not include detailed descriptions, the function calls a secondary helper function, fetchBookDescription, passing each book's unique key to fetch and attach the missing descriptions.

9. fetchBookDescription

   This function fetches detailed information about a specific book using its unique key from the OpenLibrary API. It retrieves fields like the title and description, filling in the additional metadata for a more comprehensive result when combined with fetchOpenBook.

   These functions work together to provide enriched book details by combining basic data and detailed descriptions.

10. sendEmail

    This function sends Email to any particular Email address.

    I used SMTP2GO Service.

    

    SMTP2GO is a fast and scalable email service provider, for sending transactional and marketing emails and viewing reports on email delivery.

11. generatePaymentLink

    This function Generate a Payment Link.

    To generate payment link, Initially I thought to use Stripe but than I thought why not use something which is popular in India and Made In India, So I decided to go with Razorpay Service.

    

    Razorpay is a financial technology platform that helps businesses accept, process, and disburse payments. It is an Reserve Bank of India-approved payment aggregator.

    This function uses razorpay API to generate payment links.

12. fetchCapturedPaymentLinks

    This function fetches all the Captured Links from Razorpay and return the Data.

13. sendMessageToTelegram

    This function uses Chat ID and Token ID of the Telegram Channel to post Messages.

14. sendMessageToDiscord

    This function uses Discord Webhook to post Messages.

15. scheduledTask

    This function passes the prompt and execute the Telegram and Discord Function based on applied Conditions. More on this further.

📮 POSTMAN

"Through payloads dense and headers tight,
Postman keeps the flow in sight."

To ensure the proper functioning of all exported functions in the Modus framework, I used Postman for API testing. This allowed me to verify the correctness of each function, detect any issues, and ensure smooth integration.

Additionally, Postman helped in loading the server schema by entering the server URL for introspection, further enhancing the testing process and improving overall system reliability.

📽️ Project In Action & Features

Before we start. My NextJS Project has a fetchGraphQL Component function, which I will be mentioning through out the project:

export const fetchGraphQL = async (query, variables = {}) => {
  try {
    const response = await fetch(API_URL, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Authorization: API_TOKEN,
      },
      body: JSON.stringify({
        query,
        variables,
      }),
    });

    const result = await response.json();

    if (!response.ok) {
      throw new Error(result.errors ? result.errors[0]?.message : 'Unknown error');
    }
    return result.data;
  } catch (error) {
    console.error('Error during GraphQL fetch:', error);
    throw error;
  }
};

This function is a helper to make GraphQL API requests by sending queries and variables to the Modus server which is deployed in Hypermode, handling the response, and catching any errors that occur during the request process.

1. Home Page, Consists of two buttons Admin and Student. Both are different portals. Lets dive in further.

   

🐴 ADMIN PORTAL

When the Admin button is clicked, the user is directed to an authentication page where only authorized administrators can signup/log in. There is also an option to sign up for admin registration, granting access to the portal upon successful authorization powered by supabase authentication.

Currently, the system is centralized, meaning multiple admins share access to the same portal and database, streamlining management while maintaining a unified data structure.

After successful login, we get the Admin Dashboard.

The Admin Dashboard Consists of several tabs, lets go on one by one.

1) Overview Tab

Overview Page consists of Total Books, Issued Books, Total Students and Available Books Count. Also a Chart to Check the Books Issued which can be filtered by Year.

I fetched the data directly from supabase client API.

For the Bar graph chart I used two package -

• chart.js - Charting library for rendering various types of charts

• react-chartjs-2 - This import brings in the Bar component from the react-chartjs-2 library. The Bar component is a React wrapper for the Chart.js bar chart, which allows you to create bar charts in a React application with ease.

2) Books Tab

Here, you can see the book details like Book Title, Author, Category, Status and Some Action buttons like Issue and Delete books. And a search bar to filter the books.

The Delete button uses the fetchGraphQL function to perform mutation with deleteFromSupabase function in modus.

As you can see a Add button on top right corner of the search bar of the Books page, this when clicked opens a Modal Form to List Physical books arrived at the Library.

Lets Add ‘A Tale of two Cities’ by Charles Dickens. You only have to put on the Title, Author Name and ISBN number of that particular Book. When you click Add Book Button, It uses the fetchGraphQL function to perform mutations in supabase using the addBookToSupabase() function in modus.

When we execute addBookToSupabase() function, It takes the three added parameters of the book and perform the following -

• Calls the generateText() function to generate a Category, Description, About the Book and an Announcement message about the Book Arrival in the Library.

• Performs Query to Insert the Generated Data into ‘Books‘ table in Supabase.

• Calls the upsertBook() function to Pass a copy of the Book Details to the books collection, so we can perform semantic search in student portal.

• Calls the sendMessageToDiscord() and sendMessageToTelegram() function where it passes the generated Announcement message to Inform the students about the latest book Arrival in Book club or Library channels.

And the Book is Finally Added with all the Details to Supabase, Modus Collection and Announcement messages has been sent to the subscribed user in Discord and Telegram Book Club groups. It is one of the most interesting way to notify the new arrival of books to the students.

When we click on the Delete button deleteBookFromSupabase() on that particular book. It perform the following -

• Performs the Query to Delete that particular Book data from ‘Books‘ table from Supabase.

• Calls the removeBook() function to delete that particular Book details from the books collection.

When we click on Issue Button, It displays the list of Students available, Note that the list of students are the students that register themselves in the student portal.

Let Issue the Book we just Added to a student. We click the Issue Button to display a modal with the Available Student List.

Now, when we click on Assign, It is Assigned to that particular student and the Issue action button changes to Return button, to make the status as returned when the book gets returned by the student to the library.

Now, Lets Move further.

3) Students Tab

The "Students" tab displays a list of all registered students along with basic details. When a student entry is clicked, a modal appears showing the student's basic information, currently issued books, and their issuance history.

You can see the Image below that the current Issued Book by AK is ‘A tale of two Cities’.

Additionally, the admin has the option to delete student records. There is also an "Add Student" button that allows the admin to manually add new student information. It trigger the modus functions - addStudentToSupabase() & deleteStudentFromSupabase() to perform the mutations with the help of fetchGraphQL().

4) Issued Books Record Tab

Issued Book Records keeps a track of every Book Issued by the Library. There is also a filter options to filter by Month, Book Title, Student Name and Author and an Late Fee Link Action Button.

The librarian has the option to add a late fee to a student's account for overdue book returns. The fee amount is predefined. When the "Add Late Fee" button is clicked, the following actions occur using Modus functions:

1. generatePaymentLink() is called, which leverages the RazorPay API to generate a short URL for the payment.

2. This generated payment URL is then passed to the sendEmail() function, along with the student's email address.

3. Using the SMTP2GO service, an email containing the payment link is sent to the student, notifying them of the late fee and providing a quick way to complete the payment.

Below You can see that 22f3000026@ds.study.iitm.ac.in is the sender ID I registered in SMTP2GO service to send the mail.

Now lets Click on the Payment Link.

We come to the payment page. I have enabled Test Mode in RazorPay for this. and My registered Razorpay Account name is ‘THE MILLENIUM’.

Now you can see the Payment For Option in the Image Below. It specify the Late fee Payment for that ParticuLar isssued book ‘ A Tale of two Cities’. also amount is mentioned. Before paying on any method, user needs to put on phone number.

Now, let's click on the payment link.

This will take us to the payment page, where I have enabled RazorPay's Test Mode for simulation. The RazorPay account name registered is "THE MILLENIUM."

On the payment page, you will see the "Payment For" section (as shown in the image below). It clearly specifies the late fee payment for the issued book, A Tale of Two Cities, along with the corresponding amount. Before proceeding with any payment method, the user is required to enter their phone number for verification.

Now, After choosing a payment method, It ask me to make this transaction as failure or success. Let make this a Success.

Now when the payment gets successful, the student will be notified by Razorpay itself for the Payment success. Now Lets Move Further.

5) Payments Tab

Here, when this tab loads, it refresh the page by calling modus function - fetchCapturedPaymentLinks() which fetches the captured links using Razorpay API.

In the image below, you can see that the amount status is showing as paid. The other rows were for Testing Purpose.

6) Announcements Tab

Here, we can schedule announcements for students with customized AI-generated content. To do this, we write a prompt, select the desired schedule time, and choose whether the announcement should repeat daily or not. If "Repeat None" is selected, a specific date for posting the message is displayed. Additionally, we can choose to post the announcement on Telegram or Discord.

When the "Create Announcement" button is clicked, the following steps are performed:

1. The data is saved to the 'ScheduledTask' table in Supabase.

2. The Modus function scheduledTask() is triggered, where the generateText() function is called to create the announcement content.

3. The generated content is then shared with students through sendMessageToDiscord() and sendMessageToTelegram().

This system streamlines the scheduling and posting of announcements to multiple platforms.

Lets take a closer look to the scheduled Announcement tab.

Fetching Tasks: When the component loads, it fetches existing scheduled tasks from the ScheduledTask table in Supabase. These tasks are then filtered based on whether they are daily or not. Daily tasks are stored separately, and other tasks are checked for overdue status based on their scheduled date.

Logic Behind Task Scheduling

Once a task is created, the system calculates the delay until the task is due to be triggered. This is done by calculating the time difference between the current time and the scheduled execution time. A timer is then set using setTimeout, which triggers the task at the correct time. If the task is set to repeat daily, the system will automatically reschedule it after 24 hours, ensuring that the task continues to be executed on a recurring basis until it is manually stopped or deleted.

Active Label: The Active label signifies that the prompt is still scheduled and has not yet passed its designated time for execution.

Executed Label: The Executed label indicates that the prompt has been successfully executed.

Stop Button: The Stop button is enabled only when the label is marked as Active. This allows the user to stop the scheduled task before it is executed. Once the task transitions to Executed, the Stop button becomes disabled, indicating that no further action can be taken and clears the associated timer, and updates its status as inactive in the database.

Delete Button: The Delete button removes the task from the Supabase database. Prior to deletion, the system ensures the task is stopped, clearing its active status and also stopping any active timers that were associated with its execution.

Here is the Scheduled Execution Output for Discord :

This helps the Librarian to Perform Scheduled Announcement to the Students in their Official Book Club Channels about Any Books or Any Interesting Topics with Modus Functionality.

7) Admin Settings Tab and Logout Button

Now, the Last Tab in the Admin setting which contains the Basic Admin Details and a delete button to delete the Account.

In the Side Menu there is a Logout button to logout from the session. This all uses the Supabase client utility.

🐴 STUDENT PORTAL

This is where most of the Modus Magic Happens. Lets Signup and Login as AK, the guy who borrowed/got the book ‘The tales of two cities’ assigned.

Now, This is Homepage, where the Header Consist of Student Greetings info such as Name and Email and a Log out Button to Log Out from the Session.

We have various tabs just like the admin panel, lets go through it one by one.

1) Books Catalogue Tab

When the page initially loads, it fetches the book data from the database using the Supabase client. Each book entry includes details such as the title, author, and ISBN. While adding a book through the admin panel, only basic information—such as the title, author, and ISBN was provided.

To enhance the visual presentation of the book catalog, the addBookToSupabase() function dynamically generates cover images for books using Open Library’s API. This function constructs a URL using the book's ISBN and fetches the corresponding cover image from Open Library's extensive database.

Open Library offers an open-source service that provides access to millions of book cover images, making it an ideal choice for enriching the library's visual content without manually uploading images.

For example, when adding a book:

1. The ISBN is sent to Open Library's API endpoint (e.g., https://covers.openlibrary.org/b/isbn/{ISBN}-L.jpg) to retrieve the cover image.

2. If a cover image is found, it is associated with the book record.

3. If no image is available, a placeholder image or a default fallback is used instead.

This integration significantly reduces the administrative overhead of managing book images while ensuring a visually appealing user interface. Additionally, it leverages Open Library's robust API to dynamically fetch accurate and high-quality book covers, enhancing the overall user experience of the library catalog.

Clicking on any book from the list gives you plenty of interesting details. You can easily check if the book is available without visiting the library. Each book has an "About" section with a brief description and other dynamic content powered by Modus Functions - generateText(). This includes an Interesting conversations related to or from the book, inspiring quotes, suggestions for similar books, and reviews and critiques. The tabs update with new and exciting content every time you click on them, making your experience more engaging and fun.

You can see that there in red it is labeled as Issued, so that student can be aware that this particular book has been Issued by some one.

Lets Try the Conversation and Quotes :

Now, You can see that below the author name there is TALK button, which when clicked opens a Conversation modal to chat with the Author about the book. It also uses the generateText() function.

This feature is very Interesting to keep the Students get to know more about the Book without getting Bored.

On the student portal homepage, you'll notice two floating buttons at the bottom left corner: "Recommend" and "Search."

Let’s start by clicking on "Search." This feature allows you to browse the book catalog using semantic search. If you recall, we’ve stored a copy of all Added books in the Modus collections books.

In the Image above, we searched for Show me books related to Business, The books are displayed along with a relevance score beneath each one, helping you easily find the most relevant titles.

Now, let’s click on the "Recommend" button. The "Recommend" feature utilizes the "Issued History" list to suggest books to the user based on their preferred genre.

2) Open Library Tab

Here I used the fetchOpenBook() function that perform search queries to fetch data from the Open Library API. In below Image, I searched ‘Harry Potter’, It fetched all related books.

When I Click over any of the Book, It uses the Same Component to display the books, but This Time, Instead of the ISSUED or AVAILABLE tag, it displayed as OPEN INTERNET BOOK.

Now, This makes it Interesting. The Open Library is an open, editable library catalog that aims to provide a web page for every book ever published. It is part of the Internet Archive, a nonprofit organization focused on providing universal access to all knowledge. Open Library allows users to explore books, borrow eBooks, and access metadata about books, authors, and publishing history. So, Using its API we can Fetch Most of the Books in the World and perform our Operations with Modus Functions 🤩.

3) Issued Books

Here is the List of Currently Issued books by the student.

4) Issued Books History

Here is the List of issued Books, when returned, shifts to this Tab. This Lists helps in performing the Recommendation Button in Home Page.

5) User Profile

Student can update their basic Details here in this Tab.

That’s it, The Project in Action. 📽️

🐴 Summary

The HyperLibrary system is a centralized library management portal designed to simplify administration and enhance student accessibility. The system consists of two key portals: Admin and Student, each offering distinct functionalities.

Admin Portal Features:

1. Dashboard Overview: Displays key metrics such as total books, issued books, total students, and available books. It includes a bar chart powered by chart.js and react-chartjs-2 for visualizing issued books data.

2. Books Tab: Provides detailed information about each book, including title, author, and status. Features include:

   • Adding books using a modal form, with automated category and description generation via addBookToSupabase().

   • Integration with Discord and Telegram for announcing new arrivals.

   • Issuing books to registered students and managing book returns.

   • Deleting books with data removal from Supabase and related collections.

3. Students Tab: Displays student information, issuance history, and allows for adding or removing students.

4. Issued Books Record Tab: Tracks all issued books, filters records, and facilitates late fee collection through RazorPay integration and SMTP2GO for seamless payments.

5. Payments Tab: Displays payment statuses and manages payment links via Modus and RazorPay APIs.

6. Announcements Tab: Enables AI-powered scheduled announcements with cross-platform posting to Telegram and Discord.

7. Admin Settings and Logout: Offers account management and logout functionalities.

Student Portal Features:

1. Books Catalogue: A dynamic catalog enriched with book cover images fetched via Open Library's API. It features semantic search and AI-generated engaging content for each book, such as quotes, critiques, and conversations. Also can Talk with Author.

2. Open Library Tab: Fetches and displays data from the Open Library API, enabling students to explore a global collection of books.

3. Issued Books and History: Tracks currently issued books and their history post-return.

4. User Profile: Allows students to manage their personal details.

✨ Bridging the Gap

In rural India, where resources are limited, libraries are vital for fostering learning and growth. Many schools face challenges with manual processes and inadequate infrastructure. HyperLibrary offers a tech-driven solution, enabling easy access to books from any device for students and efficient resource management for administrators. Bridging traditional libraries with modern needs, it aims to make learning accessible and empower students everywhere.

🚴‍♂️ Take a Look

Admin Credentials email : admin@gmail.com password : 123456789

Student Credentials email : akdeepaknyc@gmail.com password : 123456789

LINK : https://libraryspace.vercel.app/

🐻‍❄️ Githubs

Project - https://github.com/akdeepankar/libraryspace

Modus Functions - https://github.com/akdeepankar/true-tactic

🦉 Conclusion

HyperLibrary successfully bridges the gap between traditional library systems and modern technological needs. Its centralized, user-friendly design empowers librarians with efficient tools for resource management while engaging students with accessible, interactive features. By integrating advanced functionalities such as AI-generated content, semantic search, and cross-platform notifications, HyperLibrary transforms the learning experience. It is particularly impactful in underserved regions, where such innovations can significantly expand educational opportunities.

Thank You.🫡 It was Great Fun Working on this Project !! 😊