Kazi's Library

Kazi's Library is a web application to track the books I read and resurface highlights parsed from a Kindle e-reader.

I developed this application when I started reading a lot of non-fiction books and noticed it was hard to retain the information in my memory. Highlighting important pieces of the text on my Kindle e-reader was helpful, but revisiting them on the slow device was a chore and resurfacing old highlights a tedious manual process. One available solution to this problem was Readwise but this was a paid service not exactly tailored to my needs, so I decided to develop a web application on my own.

Core Features

• Adding books I am reading or have finished reading with images and metadata automatically retrieved from the Google Books API
• Adding highlights to books by parsing an uploaded Kindle e-reader highlights file
• Viewing books I am reading or have finished reading
• Viewing highlights from books I have finished reading
• Viewing some random highlights selected from all highlights
• Authentication to upload data

Technology Stack

• React: Selected to gain experience with a popular frontend JavaScript framework
• Node.js and Express.js: Selected to create a REST API for my backend in the same language as my frontend
• Prisma: Selected to try a new ORM for interacting with a SQL database instead of Sequelize which I had worked with previously
• PostgreSQL: Selected due to the relational nature of data in my application and prior experience
• Tailwind CSS: Selected to quickly develop consistent designs

Technical Challenges

One technical challenge I experienced was adding highlights from the Kindle highlights files. I had never worked with file uploading in a web application before so I had to learn about using a form in React to send multipart form data to my Node.js and Express.js REST API. Then I had to create a parser to read the Kindle highlights HTML file and identify the necessary fields to be exported into a JSON, which would then be inserted as records into my PostgreSQL database.

This was also my first major project working with React or a frontend JavaScript framework in general, so I had to spend a lot of time learning the fundamentals of the library and reading example code to develop the web application. There were many areas I noticed where my code seemed inefficient and could improve, which mainly seemed to revolve around data fetching, so I noted this as something to research in the future as I gained proficiency in working with React.

Lessons Learned

My main takeaway from this project is how a frontend framework like React could greatly improve the developer experience of building user interfaces, while also improving the user experience. I learned about the benefits of creating encapsulated components with their own state to break up complex UIs and create code which is organized well and can be maintained far into the future. I also learned about areas where an application built with React could benefit from additional tooling for things such as data fetching with a library like React Query or a framework with more opinionated data fetching methods like Next.js.

Next Steps

Most of the significant features of this web application have already been implemented, so in the future I want to prioritize code quality and user experience. I plan on doing this by using React Query for data fetching and mutations instead of using the useEffect and useState hooks, or using Next.js for server-side rendering of certain pages to improve the user experience and performance. As a more major update, I may implement some social functionality into the web application, with users being able to like other users' highlights and share them to other social media platforms.