Sending website aggregate document to Kindle

Here is my experience of creating a web app which sends document to Kindle. It was something which I wanted to build for a long time.

The app which I built for that is in Croatian, since the document is in Croatian too. It is deployed on this site:
https://kindle-liturgija-dana.vercel.app/

Motivation

I am a Catholic and I try to read daily scripture everyday. I prefer reading it on Kindle. In order to do that, I would use my mobile phone to go to the website with daily readings, copy it into a Word document which I would then send to Kindle. Then I would read it on Kindle. It is boring job and after I read it, I also have to delete the document which takes few clicks on Kindle. It would be a pleasure if I would get this document automatically delivered into my Kindle once a month with all readings for each day of that month.

Technologies used

This was an opportunity for me to explore some new libraries and technologies:

• Vercel (cloud platform)
• NextJS (React framework)
• Adobe Spectrum (UI library)

What I learned from it

Website aggregate

• I was using library jsdom to extract interesting data from the website after I fetched its content. I fetched several routes, one for each day. And then I would combine it all into one HTML document.

Sending document to Kindle

• each Kindle device has its own email address. You can send a document to that address and it will be downloaded to Kindle when it connects to Internet. Kindle accepts .docx, .html., .mobi and various other formats of documents

Sending emails

• the best thing seemed to be to use some cloud service like Postmark
• for this kind of services you need your own registered domain. I used one from my friend (thank you Nikola).
• GMail is not allowed for this kind of services

Vercel cloud platform

• they have their own service for measuring website performanse (page insights)
• they also have a Firewall for mitigating DoS attacks
• they have website analytics which can be used to track statistics of page visitors
• it can host NextJS apps and they support serverless NodeJS functions
• easy setup for building the website after push to Git repo.
• once I had an error in build. The build was not successful and I could not find the build logs with error. I only managed to find some build status with error icon on GitHub. That part did not make me happy because I did not understand what was wrong. So that could be a deal breaker for some
• logs on free plan only exist for a short time

Forms in React

• I wanted to try out server actions. I was not very happy with all of that. The data is being sent using FormData and I didn't manage to find an elegant solution for reading this data in TypeScript. E.g. I had to transform each date from a string. All in all, I feel like it would have been easier to use NextJS route handler which is just like a REST service
• I didn't understand some details very well around this topic. I had uncontrolled form and I wanted to change label of a button depending on the value of one of the inputs of the form. To do that I introduced useState hook for that input element in the form (making this input a controlled one). I was expecting that each change of that input would re-render the whole component, which included the form, and that the values of uncontrolled inputs of the form would reset. I expected that the whole component with the form would be replaced with new DOM element which would keep the value of controlled input (the one with useState hook) and other inputs would have initial values. But it all worked fine as I wanted to. I guess that the DOM elements of uncontrolled inputs weren't replaced with new DOM element and that is why the value was persisted. And only the controlled input was replaced in DOM tree with the new value.

Dates in sever components (NextJS)

• I had troubles with transfering dates between client and server components
• if you do not need a time zone, the best thing seems to be to use UTC on server side
• I tried using date-fns library which has loads of functions+
• last day of the month messed up the time zones so I didn't use their function endOfMonth but I used an alternative way of calculating the last day of the month. Their function had a different time zone compared to the one for the first day of the month which is annoying because it was not consistent in that perspective

Programming with LLM

• I also wanted to try to use free versions of ChatGPT and Bard (now Gemini).
• I just got frustrated in trying to get what I needed. It means I need to practice prompt engineering and also it means that this services are not as mature as I was hoping them to be

Adobe Spectrum

• I wanted to try out this library. It looks really nice. But it feels like a framework. They do not encourage using standard CSS. Instead their system should be used where each component has a lot of attributes (for CSS) and including the ones associated with visual breakpoints (for grid system).
• they use special library for dates

Conclusion

In the end, I managed to build the application which I needed. Every 20th of each month I get the document in Kindle with daily readings for each day of the following month.

And I got to try out some of the things which seemed to be interesting and I learned something new.

Now I have some similar ideas to build aggregate document for some other sites like daily news portal. Or for website with Catholic articles from which I would take the most popular articles of the week.

Here is the code repository:
https://github.com/mih0vil/vercel-kindle-liturgija-dana