Sending website aggregate document to Kindle
Tags: kindle, vercel, react, nextjs
Published: 2024-06-25 19:05:02

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/


![Screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pxu8h2wnf675gz5ryd3r.png)



## 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](postmarkapp.com)
* for this kind of services you need your own registered domain. I used [one](https://www.mirogoj.com/) 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

NextJS
* 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

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