DEV Community

Mihovil Frater
Mihovil Frater

Posted on

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/

Screenshot

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

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

Top comments (0)