Pia Kim
front end developer
Pia Kim
Front end developer

Artreads

stack:
  • Next.js
  • react
  • Firebase/Firestore
  • Vercel

Overview

Users can showcase their collection of arts-related books and keep a personal catalog.

If you walked into our house, the first thing you might notice is the row of tall shelves that reach almost to the ceiling. We have always for as long as I remember, had shelves and shelves full of books - fiction, nonfiction, science, poetry, history, psychology, sociology - everything. In particular, my dad has always loved collecting art books.

I thought it would be useful to somehow keep a record of these books, starting with the art books and then eventually expand to include everything. 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.

The goal is to archive your books by keeping them in "libraries", or bookshelves, or collections, and simply enter the information for each book. In the process, I learned about the kinds of books that my dad owned because I had to search each one, to find images, descriptions, prices, etc.

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

  • Next.js feels fast and efficient - 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