In Which I Vibe-Code A Personal Library System

When I was a kid, I was interested in a number of professions that are now either outdated, or have changed completely. One of those dreams involved checking out books and things to patrons, and it was focused primarily on pulling out the little card and adding a date-due stamp.

Of course, if you’ve been to a library in the last 20 years, you know that most of them don’t work that way anymore. Either the librarian scans special barcodes, or you check materials out yourself simply by placing them just so, one at a time. Either way, you end up with a printed receipt with all the materials listed, or an email. I ask you, what’s the fun in that? At least with the old way, you’d usually get a bookmark for each book by way of the due date card.

As I got older and spent the better part of two decades in a job that I didn’t exactly vibe with, I seriously considered becoming a programmer. I took Java, Android, and UNIX classes at the local junior college, met my now-husband, and eventually decided I didn’t have the guts to actually solve problems with computers. And, unlike my husband, I have very little imagination when it comes to making them do things.

Fast forward to last weekend, the one before Thanksgiving here in the US. I had tossed around the idea of making a personal library system just for funsies a day or so before, and I brought it up again. My husband was like, do you want to make it tonight using ChatGPT? And I was like, sure — not knowing what I was getting into except for the driver’s seat, excited for the destination.

Vibing On a Saturday Night

I want to make a book storage system. Can you please write a Python script that uses SQL Alchemy to make a book model that stores these fields: title, author, year of publication, genre, and barcode number?

So basically, I envisioned scanning a book’s barcode, pulling it up in the system, and then clicking a button to check it out or check it back in. I knew going in that some of my books don’t have barcodes at all, and some are obliterated or covered up with college bookstore stickers and what have you. More on that later.

First, I was told to pip install sqlalchemy, which I did not have. I was given a python script called books_db.py to get started. Then I asked for code that looks up all the books and prints them, which I was told to add to the script.

Then things were getting serious. I asked it to write a Flask server and a basic HTML front end for managing the books in the system. I was given the Flask server as app.py, and then some templates: base.html to be used by all pages, and index.html to view all the books, and add_book.html to, you know, add a new book. At that point, I got to see what it had created for the first time, and I thought it was lovely for a black and white table. But it needed color.

Yeah, so I’ve been busy adding books and not CSS color keywords to genres lately.

Check It Out

This is a great book, and you should read it whether you think you have a problem or not.

I asked the chat-thing for features and implemented them piecemeal, as you do if you’re not a masochist. First up was a cute little trash-can delete-button for every entry. Then it was time to set up the CheckoutEvent. Each of these events records which book it belongs to, whether it’s a check-out or check-in event, and the timestamp of said event. Of course, then it was time to get the checkout history wired to the front-end and accessible by clicking a book’s title.

All I really had to do was add a history route to app.py, update index.html to make the titles clickable, and create the book_history.html it spat out. Then I had it add the buttons for checking in and out on the new checkout history page, which involved adding routes to app.py as well as a helper to compute the current status.

Then it had me modify the history route and update book_history.html with the actual buttons. And they’re super cute, too — there’s a little red book on the checkout button, and a green book on the check-in.

Barcode Blues

On the index.html page, can you add a barcode number-based search box? And when the user searches, redirect them to the book page for that barcode?

Now it was time to get the barcode scanning situation up and running. I was sure at some point that ChatGPT would time me out for the night since I use the free model, but it just kept helping me do whatever I wanted, and even suggesting new features.

I wanted the barcode handling to be twofold: one, it should definitely pull the checkout page if the book exists in the system, and it should also definitely go to the book-entering page if not.

Yes — that’s a great workflow feature.
We’ll add a barcode search box to your index page, and when someone submits a barcode, the app will:

  1. Look up the book by barcode

  2. Redirect straight to that book’s checkout history page

  3. Show a nice error if the barcode doesn’t exist

I did what it told me, adding a barcode search route in app.py and updating the index() route to use it. I then added its barcode search form to index.html. It was at this point that I had to figure out a way to generate barcodes so I could make little stickers for the books that lack them entirely, or have otherwise obliterated ones.

I have a pretty basic 1D barcode scanning gun, and it won’t scan everything. As I soon found out, it prefers fake EAN barcodes to UPCs altogether. I finally found an online barcode generator and got to work, starting with a list of randomly-generated numbers I made with Excel. I decided I wanted all the fake barcodes to start with 988, which is close enough to the ISBN 978 lead-in, and happens to use my favorite number twice.

We took a brief detour as I asked the chat-thing to make the table to have ascending/descending sorting by clicking the headers. The approach it chose was to keep things server-side, and use little arrows to indicate direction. I added sorting logic to app.py and updated index.html to produce the clickable headers, and also decided that the entries should be color-coded based on genre, and implemented that part without help from GPT. Then I got tired and went to bed.

The Long, Dark Night of the Solo Programmer

I’m of a certain age and now sleep in two parts pretty much every night. In fact, I’m writing this part now at 1:22 AM, blasting Rush (2112) and generally having a good time. But I can tell you that I was not having a good time when I got out of bed to continue working on this library system a couple of hours later.

There I was, entering books (BEEP!), when I decided I’d had enough of that and needed to try adding more features. I cracked my knuckles and asked the chat-thing if it could make it so the search works across all fields — title, author, year, genre, or barcode. It said, cool, we can do that with a simple SQLAlchemy or_ query. I was like, whatever, boss; let’s get crazy.

Can you make it so the search works across all fields?

It had me import or_ and update the search route in app.py to replace the existing barcode search route with a generalized search using POST. Then I was to update index.html to rename the input to a general query. Cool.

But no. I messed it up some how and got an error about a missing {% endblock %}. In my GPT history it says, I’m confused about step 2. Where do I add it? And maybe I was just tired. I swear I just threw the code up there at the top like it told me to. But it said:

Ah! I see exactly why it’s confusing — your current index.html starts with the <h1> and then goes straight into the table. The search form should go right under the <h1> and before the table.

Then I was really confused. Didn’t I already have a search box that only handled barcodes? I sure did, over in base.html. So the new search code ended up there. Maybe that’s wrong. I don’t remember the details, but I searched the broader internet about my two-layer error and got the thing back to a working state many agonizing minutes later. Boy, was I proud, and relieved that I didn’t have to ask my husband to fix my mistake(s) in the morning. I threw my arms in the air and looked around for the cats to tell them the good news, but of course, I was the only one awake.

Moar Features!

I wasn’t satisfied. I wanted more. I asked it to add a current count of books in the database and display it toward the top. After that, it offered to add a count of currently-checked-out vs. available books, to which I said yes please. Then I wanted an author page that accepts an author’s name and shows all books by that author. I asked for a new page that shows all the books that are checked out. Most recently, I made it so the search box and the column headers persist on scroll.

I’m still trying to think of features, but for now I’m busy entering books, typing up check-out cards on my IBM Wheelwriter 5, and applying library pockets to the inside back covers of all my books. If you want to make your own personal library system, I put everything on GitHub.

On the Shoulders of Giants (and Robots)

I couldn’t have done any of this without my husband’s prompts and guidance, his ability to call shenanigans on GPT’s code whenever warranted, and ChatGPT itself. Although I have programmed in the past, it’s been a good long time since I even printed “Hello, World” in any language, though I did find myself recalling a good deal about this and that syntax.

If you want to make a similar type of niche system for your eyes only, I’d say this could be one way to do it. Wait, that’s pretty non-committal. I’d say just go for it. You have yourself and the broader Internet to check mistakes along the way, and you just might like some of the choices it makes on your behalf.

2 thoughts on “In Which I Vibe-Code A Personal Library System

  1. Did the same thing but for: cd,dvd,bluray,book management + ereader + jellyfin integration, isbn lookup, lable generator, currency, i18n, reading stats wishlist the whole 9 yards. works great!

    The problem with these tools is though, you are easilly the only one using it + maintaining it. so do not create too many AI side projects!

Leave a Reply to William-syCancel reply

Please be kind and respectful to help make the comments section excellent. (Comment Policy)

This site uses Akismet to reduce spam. Learn how your comment data is processed.