Library Tower: Building a public domain library using Next.js

Introduction:

In my previous post, I talked about building my first project which is a library where you can read Ebooks from, and in this post I am going to talk about how i made it better or where I improved it.

I started working on it with just JavaScript but I thought that I needed a framework or a library to help me build it faster or easier. In retrospect, I realize that sticking with JS alone would have been beneficial, considering it was my first project I should have spent more time with it, understand better how it manipulated the DOM (Document Object Model is a programming interface for web documents) and what not.

When deploying the project I got stuck with the server and also the library didn’t work as I planned so I thought I would work on it again.

Structure:

I didn’t plan how I would build the first library, just organically building it, which I think is fine since it was my first project but having a structure would make the process easier.

Unlike in the older library where I wanted to include all the books available in Anna’s Archive to retrieve the books from, I thought i would have my own books database. I don’t have the resources to host millions of books like Anna’s Archive so i opted to just host public domain books.

Design:

The design of the first library was simple, I would search and display books with Google Books API. Then you would choose a book and a modal would pop up with the book’s information and the option to download it or read it.

In the current library I choose a different approach, you would have a home page where you could select popular, fiction or none-fiction books. When browsing the library I didn’t want to display book covers because there weren’t any good covers for public domain books, so I just displayed the side of the book, like you are browsing a real library how awesome is that.

Currently I am not hosting a lot of public domain books but it is a work in progress. I get the books from the Gutenberg project, I really appreciate their efforts.

TypeScript and TailwindCSS:

I mentioned in the previous post that I didn’t know TS and Tailwind that is why I didn’t use them. I had a lot of errors making the ArtistryNest website, from server problems, to states to hydration but I think a lot of them could have been avoided by using TS. In this current project I faced a fewer issues, maybe I gained more experience or the project was smaller compared to previous one but i think TS helped in minimizing the errors. I might be wrong so take my opinion with a bag of salt.

Now on to Tailwind, I have nothing but good things to say about it. I had a really good experience using it, the only drawback is you have to learn the syntax but installing the VS Code extension or an LSP for code completion and checking Tailwind’s docs from time to time will greatly improve the learning process. How it differs from plain CSS? Tailwind is like inline CSS style:

<div style="width: 690px; height: 420px;">Nice</div> // Inline CSS

<div class="w-[690px] h-[420px]">Nice</div> // TailwindCSS

So like they say, you don’t leave the comfort of your html. Also you don’t name the classes, I had a CSS file with 3K lines, so it was hard to track the classes but with Tailwind, it is very helpful not to name the classes again. Personally, I appreciate CSS, especially when aiming to create something unique. It remains a powerful tool in web development.