<aside> 💻 The following article is regarding the project in this GitHub repository.

</aside>

<aside> 💡 TL;DR Watch this video to understand how to get started with Hasotion.

</aside>

Introduction 🤩

Are you someone like me who loves Hashnode as well as Notion? Well, then this article is for you. Keep reading.

When I am writing my blog posts, most of the time I am used to writing the article in Notion and copying and pasting all of the content to Hashnode or any other blogging platform I use. You might be wondering why I do that because Hashnode already has an insanely good editor for writing your blog posts.

Yes, that is indeed true but writing it on Notion helps me back up my content and really helps me with publishing the same article to multiple places.

This product is simply a result of an attempt to streamline that process even more by making use of Hashnode GraphQL APIs and Notion APIs.

Also, I think it is worth mentioning that this Hackathon was quite a challenge for me because I don’t have much GraphQL experience and the very short time period I had to complete this project.

In case you’re curious about the weird name, Hasotion is derived from Hashnode + Notion 😉

How Hasotion Works? 🤔

For you to get a rough idea, let me go over the flow of this application in a few steps and explain them. You can also take a look at the explanation video I have linked below in the Demo section.

  1. Log in to the application with Google
  2. Connect your Notion account and duplicate the provided database
  3. Connect your Hashnode account by providing the Personal access token (PAT) and the Blog ID
  4. Go to the Notion database. Write your article on a new page. Fill in all the details
  5. Check the Ready checkbox.
  6. Just click on the Update Article button under the title

The whole process is that simple. Before going more into the notion page details (Step 4) and technical details (Step 6), let me start by introducing my tech stack, the APIs and the interesting packages I used throughout my project.

Tech Stack ⚙️

  1. Next JS as the Javascript framework