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: https://brakidreadlist.herokuapp.com/ (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: https://create-react-app.dev/docs/adding-typescript/

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 https://cloud.mongodb.com.

I use Facebook to identify the users of the application: https://developers.facebook.com. 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:

• to login via their Facebook account which provides them with an easy to use mechanism to access their Readist items from different devices.
• to access all their created Readlist items and to check their status: read or not read.
• change the status of a Readlist item after reading. This functionality helps the user to tick a link he or she has finished reading.
• delete Readlist items. 🗑
• and last (but not least in the project’s vision): adding new links to store for reading.

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.

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:

• easier usability:
  • endless scrolling instead of having to manually load more records.
  • when pasting/dropping a link on the page automatically fill the form for a new item. Also load the title of the page and keywords from the page’s content.
• allow sharing readlist items between users
• filtering by title and keywords to find relevant links.

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