How I built a web app that emails me 5 random Kindle highlights daily

#webdev #react #nextjs #startup

TL;DR

built almost for free with nextjs, vercel, react, google chrome extension, aws cognito, heroku and easycron
creating a product that solve your own problems is the best source of motivation
Reddit is of great help to discuss ideas, problems and solutions

The Problem To Solve

I read a lot. Fictions and non-fictions. All on my Kindle.

As I read, I like to highlight sentences that inspire me and that I want to remember.

The problem is, I always forget them.

I don't want to manually go check my Kindle highlights. I want my highlights to come to me.

The solution: a daily email with 5 random of my highlights.

It's not a particularly innovative solution as other web apps do that already, but I found them either not good enough or too expensive.

So I built my own -- called JustRemind, currently in Beta version.

Infrastructure

Next.js for a modern web framework and for the free hosting on Vercel
postgresql database hosted for free on Heroku
easycron for sending the daily email
AWS Cognito for the authentication system
Google Chrome extension built with React to fetch the highlights

Challenges

Fetching the Kindle data

The first and main challenge was to extract the highlights from my Kindle.

I wanted a quick and user-friendly way to do it. As I tested the already existing services online, I realised that the Google Chrome extension way was the easiest method at the moment, considering that Amazing doesn't have a Kindle API.

The extension is responsible for:

fetching each book and its highlights, and
sending all that data to the JustRemind web app.

The web app also needs to send the user data to the extension so it can link the books data to the correct user.

Overall it's been a pain to setup and I believe the Kindle eco-system would benefit from an API or at least a user-made well-maintained open-source alternative.

Importing lots of data

I have 59 books and +2100 highlights on my kindle. Syncing on JustRemind means sending a lot of data through the API that needs to be processed by the backend and written in the database.

I wrote the backend in Next and I used the free Vercel hosting plan. When processing all that data, I faced some issues as Vercel was timing out.

So mitigate that issue, I:

split the API calls when syncing (ex. if a user needs to import 200 books, 4 api calls will be made with 50 books each), and:
upgrading to Vercel Pro plan to increase the timeout time from 10 seconds to 60 seconds

As part of the job to be done to move from the Beta to the finished product, I am considering rewriting the backend in Python using Flask, hosted on AWS Beanstalk.

Using unknown tools

Although I am familiar with React, Next and Vercel, I was not at all with the entire Google Chrome extension and AWS ecosystems.

Learning to use new tools and techniques is part of the beauty of the web dev job. It can be very frustrating to see your development time drastically increase as you spend time reading docs and searching solutions online. But in the end, it is very rewarding to broaden your knowledge with these new skills.

Result

From the moment I realised I had this issue I wanted to solve to this day where the Beta version is ready, 3 months have passed.

I spent most of my evenings and weekends thinking, tinkering and building this web app and it has been a lot of ups and downs.

Right now, and even if I end up being the only user of my app, I am super happy to have completed it and I am even more happy to read my morning dose of re-inspiration with my highlights being served daily with my morning coffee!