I created a fullstack app using one framework

About two months ago I started working on this project when I got fed up with the free tier that Feedly offers. If you are not familiar with Feedly, it is an app where you can add links to your favorite blogs or publications and group them all for you so you can stay up to date without jumping between web pages or keeping track of what blogs you like manually.

This is all great but Feedly is a paid app and it limits the free tier to having only three categories to organize the different links that you follow.

Tech stack

Feedly has many other features but what I described is the main idea. It is a content aggregator. I thought how hard could it be to replicate this core idea in a free, open-source app? Let's break it down:

1. We need a database to store all the links that a user adds, we must also store the user's identity and correlate each user to their links.
2. We will need an API to interact with the database. Adding or removing links for example.
3. We will need a frontend for the user to interact with. A webpage like the one you are looking at right now.

Taking all of this into account I decided to use the following:

1. Postgres database. Years ago I heard Prof. Andy Pavlo say that Postgres is the implementation of SQL that is closest to the standard.
2. NextJS framework. This is a fullstack JavaScript framework where the frontend is React and the backend is hosted on serverless functions. JavaScript is used to create both the frontend and the backend which saves us some time and effort.
3. NextUI component library. To speed things up I used a component library for the frontend. NextUI is still in beta but it gets the job done.

As you can see, using NextJS opens more doors for us. For example, I used Next-Auth to handle authentication.

I approached the development of the app with a backend-first mindset. Each new feature I add starts with me crafting a SQL query, then using the query in the server and exposing the service via and API endpoint and finally, consuming the API endpoint in the frontend.

At the frontend, I added React-Query, which is a third-party library that facilitates the management of async data. In other words, it communicates with the API in a smart way by keeping track of cache, data invalidation, refetch-interval ... etc.

How it works

The user signs in, we save the user's email. We do not use passwords in this app! instead we use OAuth.

The user will press the "add feed" button, a modal will popup with two input panes to take the link and the category to which the link belongs. This data is relayed to the backend (using API) and from there, the backend queries the link and starts looking for an RSS tag inside that web page.

Most modern websites keep their RSS tags in the header section. But some don't and for those, the server scrapes the entire page and loops over every HTML tag in the page looking for an RSS link.

After finding the RSS link we save it in the DB.

Then the server queries the RSS link and saves the results into the database with a timestamp.

The timestamp keeps track of how fresh the data is. I have a small function that queries the RSS feed if the timestamp is older than two hours. That way, the user always has the latest content.

Live-demo

Take a look at my latest project "Feedni" which is an open-source content aggregator designed to simplify the process of following blogs, magazines, news outlets ...etc.

If you want to read more articles like this, take a look at my blog