Readlist Application 📗

Date: 18.05.2020

When stumpling across interesting read such as projects to implement, blog posts or in general any type of information I want to categorize, I always have been struggling with keeping these notes together. Usually I would make them on different devices and want to bring them together into a single collated list.

Thus I decided to build a small web application to accomplish this: having a common place for all links that I want to keep for reading or follow ups. 🤨

Readlist: (requires a Facebook account)

How did I implement the Readlist application?

As I also wanted to use the project to expand my knowledge on React JS, I decided to dive more into combining React JS and Typescript. The main advantage of Typescript over plain Javascript is typesafety during compilation time. This helps to avoid passing around incompatible data types and in my opinion also hepls in increasing readability of the code as it becomes more clear what data is passed around. This greatly reduces the number of places where potential bugs can sneak in 🐞

I used the Typescript template of the Create React App generator:

As the application consists of several components: the frontend, the backend and a database, I use Docker to bundle the resources into 3 separate containers that are orchestrated for local testing using docker-compose.

The backend and the frontend containers are deployed to Heroku as PaaS platform. The database is a MongoDB, NoSQL database as the data can be easily retrieved via a single key. The database hosted on

I use Facebook to identify the users of the application: To link the React application with the Facebook login, I use the React Facebook Login library.

Which functionality does the Readlist app provide?

In its current version, the Readlist application allow users 5 basic operations:

Each Readlist item consists of a title to provide some information what the link is about. The link itself and some keywords related to the link.

Screenshot of the Sensor project

How does the project’s vision look like?

As the current functionality is quite limited there are plenty of ideas on how to extend the application.

But for now I have focused to deliver a Minimum Viable Product (MVP).

Ideas for future extensions include:

That’s all for now. Happy reading and organizing your readlist 🗄