Pia Kim
front end developer
Pia Kim

Bookreads

stack:
  • Next.js
  • react
  • Firebase/Firestore
  • Vercel
  • Google Books API

Overview

In this app, users can keep a catalog of their books and categorize them in different ways.

The initial idea for this came from my wanting to build a "database" consisting of my family's art books, which our shelves are filled with. Some are old and some are new, and I thought it would be useful to keep a record of these books, especially since they are valuable to my family.

This app served as another useful tool for my teaching position - it would be a great way to keep track of all the books we have at our learning center as we have a huge collection of fiction and nonfiction books.

The goal is to archive your books by keeping them in "libraries", or bookshelves, or collections, and simply enter the information for each book. To search for a book, I integrated the Google Books API which was useful because all of the books we use for our classes are archived.

Some of the ideas I thought about included:

  • book shop/marketplace?

  • trade with other collectors?

  • interact with other users?

These are ideas that I still would like to explore as I build upon the app.

This project was a great way for me to explore Next.js. I built the foundation following a video course (React 2025) which provided a solid jumping off point. I wanted to personalize as much as possible and plan to continue to build upon this app by adding features and of course, books.

Challenges

Server-side rendering means the HTML on the page is generated on the server on each request. It's not that it was challenging, but I had to wrap my head around the concept and how it differs from static rendering. SSR is one of the biggest advantages of using Next.js.

One of the non-technical challenges was the process of searching for books online. Because most of these books are very old and some do not have not much information online . As a result, some books' fields were left empty, which had bothered me at first, but if this a way to archive one's books, just having the title and basic information should be enough.

Takeaways

  • I learned a lot working with Next.js - I think it also helped that I had Gatsby knowledge, and I can compare and contrast as I went

  • Along with Gatsby, Next.js is a very powerful framework and can be an optimal choice in many cases

©2021 Pia Kim