Reading Bookmark Manager for the tech blogging platform

Reading Bookmark Manager for the tech blogging platform

Introduction

We have a variety of tech blogging platforms such as Hashnode, dev.to, medium, daily.dev, and others. Everyone platform stands out in the crowd having special features. As a reader and creator, I have accounts on all the platforms, where I read and create content.

While reading content on these websites, I create a reading list/bookmarks to read articles later or some articles that I would love to re-visit again. Creating bookmarks on all these platforms is easy but managing it can be a hectic job to do. Managing bookmark/reading list such as removing articles, and finding articles from the various platform.

To solve these, I have created a Reading Bookmark Manager, CryptoMark, for the Hashnode X PlanetScale hackathon. Let's learn about more it.

CryptoMark

CryptoMark brings a reading list/bookmark from different blogging platforms to a single place.

Bringing all reading lists from different places to a single page will help manage the list easily. It has a search button to query through the reading list to find the particular article from the list.

CryptoMark - Reading Bookmark Manager.png

We have created a beautiful card component to display the article. Clicking on the card will take you to the article from where you can make edits on the bookmark such as removing it.

I believe every product should be available to be used without registering yourself. We have implemented such that you can use it without registering yourself to our app. As an authentication, we are using the public key of your wallet. It currently supports only MetaMask.

Currently, it supports daily.dev and dev.to the platform to manage the reading list but we are working on the medium public reading list.

Future Updates

We are planning to add more features and make it better. We are planning features such as:

  • Adding Medium supports through the public reading list.
  • Adding Hashnode. It is complicated as their API does not give access to Bookmarks but still, we will try to figure out any solution.
  • Currently, you can view the reading list through the platform such as there is a tab for daily.dev and dev.to. We are planning to have two views, combining all platform lists into a single list and by platform tabs.

Using the CryptoMark

When you visit our website at reading-list-manager.vercel.app. You will find the tabs for daily.dev and dev.to.

daily.dev

For enabling the daily.dev, you need the shareable bookmark link. You can get it from app.daily.dev. Under the bookmark section, click on Share bookmark to open the Bookmarks sharing features. You need to enable the public sharing option. After enabling it, you have the URL for sharing the bookmark. The URL will have the latest 20 bookmakers in the XML format.

daily.dev bookmark

Just copy and paste the URL into the input box. After pasting, click on the search button. If everything goes well you will have your bookmark from the daily.dev.

daily.dev bookmark

dev.to

When you switched to dev.to. You will have an input box asking for the API key of your dev.to. This key is quite important and can be used to post or edit any article from your behalf to your profile. If you log in to our app using the MetaMask, then we will store the API key in our PlanetScale database. Otherwise, there is no storing of any data. We ensure that this key will not be used for any other endpoints other than fetching the reading list.

Let's get the API key now. Visit dev.to, then go to the setting. Find the ⚡Extensions tab from the left panel. At the bottom, you will find the DEV Community API Keys. Enter a proper name for the project and then click on Generate API Key. Now, you will have your API key.

image.png

Copy and paste the API key into the input box of dev.to tab in our application. After entering, click on the Search button. After loading, you will have all your reading lists from dev.to our platform.

dev.to bookmark

Using this you can have your reading list on our platform. If you click on the Connect button from the header, you will ask to connect your MetaMask to our platform, once granted for the user. You don't need to copy and paste all the data again and again.

Tech-Stack Used

I have used the following tech stack in building the application.

  • NextJS: For building the frontend of the application.

  • ExpressJS: For building the backend of the application.

  • thirdWeb: For creating the button, to connect our application to the MetaMask Wallet.

  • PlanetScale: This was my first time using the platform, but I was pretty comfortable using it because of the well-written documentation. I was able to create a database to store the Public Key, and URL from daily.dev and API key from dev.to.

  • Heroku: To deploy the backend of our application.

  • Vercel: To deploy the frontend of our application.

Conclusion

I was planning to build this application for a long time, but during this hackathon, I was able to work on my idea. I was able to create an application for the community.

I would love to know, your thoughts on the CryptoMark. Along with that I also want suggestions, feedback, or feature request from your side.

Thanks for reading the blog post.

Did you find this article valuable?

Support Suraj Vishwakarma by becoming a sponsor. Any amount is appreciated!