Sounds familiar? Doesn't it?

All of us developers have abandoned tons of side-projects because a new shiny technology has just come up and how can we NOT try it. That FOMO on missing out on the new thing makes our interest in current thing feeble. I have been struggling with this for past 2 years when I moved in web development and since then, I managed to abandon 4 half built projects.

This time it is going to be different, I promised myself every time but always ended up in the same ditch.

As usual, I have been pondering over a new idea of a good and hosted commenting engine and I knew only good way to achieve that was to do a code marathon of 48 or 72 hours so that I do not lose the patience & abandon this project as well. Then came along #AmplifyHashnode hackathon and I say today that it could not have come up at a better time. It helped me maintain my pace and cadence.

3 weeks later, I am writing an article and releasing the alpha version of my first product, a commenting Engine - Loudrr. It could have easily been another forgotten side project. For the first time, I have spend time on the product I want to build everyday without fail and shipped it to production. Let's talk a little bit about the Product now.

Why Commenting Engine.

Building a blog with Gatsby, Next.js with MDX is easy but adding comments to that same blog is hard. Comments are saperate systems within themeselves and adding that to your quick built blog or e-commerce site can be a big headache. But they are necessary for the blog owner to know how readers are responding to thier content.

This is the problem I faced when I was building a blogging website for wife's cooking business ( shameless plug : checkout her channel if you are interested in healthy recipes).

Although, there are some solutions out there like Disqus, Hyvor Talk, etc. These are either very bad for your user's privacy or completely paid. There are open source projects like Mouthful, Commento which are free but self-hosted solution. But in the age of JamStack, who neads a headache to maintain a server.

So this project started as a personal need project but I saw the potential of it being a full fledged product. Hence, here it is.

The Stack

Next.js

The stack of Loudrr is pretty simple. I am only good at React so I needed to use something React based but I really don't like idea of webpages to be completely dependent on Javascript. Hence, Next.js here was obvious choice here and I think it has served well here.

Chakra-ui

I needed to build this project quickly so I picked Chakra UI to learn more about it. After 3 weeks, I think chakra is amazing for people like me who don't like css-in-js mess and the components are semantic and highly accesible. Not to mention that default theme is beautiful.

Although, Chakra comes with its own cost of big bundle as all the components are themed. If I had to choose again, I would pick tailwind as I like to keep css saperate and it greatly reduces the js bundle as well.

Neo4j

I wanted a commenting Engine with deeply nested replies and easy retreival so graph database became natural choice here. I went to the documentation of Neo4j and I must say it is awesome. I had never worked on Cypher but the language is so intuitive that I was able to write first draft of DB adapter and its test within first 2 days. Moreover, Graph database make relationships so expressive that it is much easier to the complete view.

See below example :

Entities	Description
Users(Green)	On the Left and Right You can 2 users are have commented lot of comments (yellow).
Domain(Pink)	There is one domain that user on the right has created and it has a relationship called HAS_DOMAIN.
Page(Blue)	Domain in Pink has one page on which there are comments and it has Lot of comments associated.
Comments(Yellow)	In Yellow bubbles of comments we can easily see which users have participated in commenting on that page. This will help users to have very insightful dashboard.

Although community option is limited in what it can do so I am still think whether to continue with Neo4j or should I look for something for a cheaper for a free database.

Deployment

The full-stack Next.js server is hosted as Amazon Fargate as a container. AWS amplify makes it a breeze to deploy your container based website by provisioning everything from S3 Storage to EC2 resource to mapping your domain to your container and then provisioning SSL Certificates for your domain.

The Best part is Amazon issued SSL certificates on AWS Certificate Manager are completely free and AWS amplify automatically provisions it. So the deployment was easy.

But Amazon could improve the onboarding on new users to amplify CLI with better documentation because Amplify CLI does so many things that it is very easy to get things wrong. It took me 8 test projects deployment to clearly understand the deployment process which did cost €10 but I guess it was worth it.

Neo4j is running on my personal server as I wanted to save on some costs.

Current State

Currently Loudrr is in alpha stage which means that basic functionality is there and there WILL be some bugs and things unpolished. But these will be improved over the course of next month.

I welcome you to try it and give me feedback about it. You can start by going through a simple docs and get started.

Note : currently comment widget is only available as the react component. Other platforms such as gatsby, Next.js, Squarespace will be supported in near future.

Call for contribution

If you are fascinated by graph database or you are looking to learn or teach me any of above technologies, feel free to go through the source code here on github

Try It

You can also try commenting Widget here.