Introducing Hashnode to Twitter

Great work Soumya Ranjan Mohanty, Keep it up 👏 I was looking for some open source project to learn more about twitter API and this is the best. Keep up the good work 🙌

Soumya Ranjan Mohanty4y ago

Hey Savio Martin. Thanks for your kind words about the project :)

Love your back-to-back rocking projects! Keep it up! 🙌

Kritika Pattalam Bharathkumar4y ago

This is excellent. Great work.

Soumya Ranjan Mohanty4y ago

Hey Kritika Pattalam Bharathkumar! Thanks a lot for your kind words. :)

Eleftheria Batsou4y ago

Wow, that's amazing Soumya Ranjan Mohanty! I like that you can customize the tweets.

I'll start using it for my own articles :)

Soumya Ranjan Mohanty4y ago

Thanks a ton Eleftheria Batsou!

Really glad you find my application of use. :)

Rutik Wankhade4y ago

Really cool idea and execution as well. Great job 🙌

Soumya Ranjan Mohanty4y ago

Hey Rutik Wankhade, thank you for your kind words. Glad you liked the app.

Ashish maurya4y ago

Soumya Ranjan Mohanty I am telling you this is everything I needed right now. Amazing Idea and Implementation and specially the live changes we can see while editing was something to be appreciated. All the best buddy you did a great work totally gonna use it from now on.

Soumya Ranjan Mohanty4y ago

Hey Ashish maurya, this comment made my day! Thanks for your kind words. Really hope you find this useful 😄.

Ashish maurya4y ago

Soumya Ranjan Mohanty you welcome buddy, and believe me I am already using this app for my next blog posts.

More from this blog

Create a Discord Slash Bot using HarperDB Custom Functions

Hello folks 👋! Have you ever created a Node.js server using Express/Fastify? Have you used a service like HarperDB to store your data? If yes, then you are in luck! HarperDB has introduced Custom Functions which helps us to use HarperDB methods t...

Oct 22, 202117 min read198

Create a Discord Slash Bot using HarperDB Custom Functions

What is Tailwind CSS and why you should use it

Originally published at soumya.dev Tailwind CSS is a utility-first CSS framework which means it has various utility classes which help to create layouts and rapidly create custom designs. I have always loved Adam( Tailwind CSS creator)’s streams whe...

Oct 26, 20209 min read57

What is Tailwind CSS and why you should use it

Soumya Ranjan Mohanty's Dev Blog

3 posts

Engineer. Bored.

Introduction

Hey folks 👋

I am really glad to present to you Hashnode to Twitter application, which is my submission for Hashnode X Auth0 Hackathon. A big thanks to Auth0 and @Hashnode for giving me this opportunity to sharpen my dev skills. 💪

Live Application / Source Code

Inspiration 🤔

The Problem

I have noticed many developers starting their blogs but failing to get substantial eyeballs on their post. Hashnode surely helps in this case by mapping it to one's personal custom domain for free, and get readership by showing one's articles directly to the feed of many developers. It also drives traffic to one's blog domain directly.

But still, social media is one of the most important driving factors for the success of one's blog. We all have seen various developer tweet threads go viral.

The Solution

So, I decided to build a tool which takes the content from your blog and directly tweets on your behalf. The tweets would be customizable with hashtags, emojis and all the Twitter goodness!

What exactly is "Hashnode to Twitter"❓

Hashnode to Twitter is a web application which allows you to convert your Hashnode article summary to easy-to-consume tweet threads with a CTA to your blog post. This will help you to increase the popularity of your blogs and bring more eyeballs.

Features

Video Demo

https://www.youtube.com/watch?v=DrGGFzX61Rk

The user needs to login via Twitter as the application would post on his behalf to Twitter. On clicking "Continue with Twitter" on the Auth0 login screen, the page redirects to twitter's authorization page:

Extract content from Hashnode blog post URL

On the homescreen, the user is presented with a URL input where he can enter the link to a Hashnode blog post. Upon logging in via Twitter, he can see the article content split up into tweet-sized chunks.

Edit tweets and make a thread 🧵

Threads are one of the most popular forms of content on Twitter. In the Edit screen, the user can see the Hashnode article split into tweets of 280 or less characters. User can delete one or more tweets, edit the content of the tweets. There is also a popular hashtags and emojis section from where he can pick the popular hashtags and emojis to use in the tweets. All of these tweets will be converted into a thread.

edit last tweet.png A last tweet is automatically added to encourage readers to go to the Hashnode blog article.

View rich, realtime, exact preview of tweets

preview part.png While editing the tweets and making the twitter thread, the user will be able to see a realtime preview of his tweets in the right side panel. All texts, mentions, links, hashtags, emojis are the exact same as one would see after actually tweeting. After the user is happy with the twitter thread's contents, he can click on the Tweet button to start tweeting the thread via his logged-in Twitter account.

Success page

After clicking the Tweet button on the edit page, the tweet thread is posted from his Twitter account. On successful posting of all the tweets in the thread, the user is sent to the success/done page where all the actual tweets from Twitter are embedded. He can also click to view his tweet(s) in a new tab.

How I Built It 🛠

Tech Stack Overview

Frontend 🌈 - Next.js
Backend ⚙️- Next.js serverless functions
Authentication 🔐- Auth0
Twitter API
Styling 💅- Tailwind CSS
Code Formatter - Prettier
Version Control - GitHub
Deployment 🚀- Vercel

Framework

I chose Next.js for my frontend framework because it makes it so easy to build a working app with its file-system routing, image optimization. It also has all features like Static Site Generation, Server Side Rendering and Client Side rendering and the developer has the choice to choose any of these, on a per-page basis.

Another reason I chose Next.js is because of its support for API routes which I have used for creating serverless functions. I call these functions from my frontend and use their responses.

Authentication

For auth, I used Auth0. And this was my first time using Auth0 with Next.js. And boy was I surprised! I literally had to add 2 lines in API routes to make my app authenticated and I could get the user's details in my frontend using the useUser hook. It was brilliant!

import { handleAuth } from '@auth0/nextjs-auth0';

export default handleAuth();

https://giphy.com/gifs/producthunt-mind-blown-blow-your-26ufdipQqU2lhNA4g

The docs were super-helpful in order to add Twitter as a Social Authentication method.

For my app, I needed write access to a user's Twitter profile as my app would be posting on their behalf. So, I needed to call the Twitter API with the logged-in user's context. For this, I used the Auth0 Management API Tokens. This helps me access the Twitter API with the user's Twitter account.

This was quite new for me so I had fun learning this.

CSS Framework

I used my all-time favorite CSS framework - Tailwind CSS. Now-a-days, I can't even imagine starting a project without using Tailwind. The utility classes, pseudo selectors are quite handy if one is looking to build out a frontend quickly.

Version Control

I used GitHub as my version control so that I could roll back to any previous commit as and when required.

Deployment

I chose Vercel for deploying my app as it has first-class support for Next.js and its API routes. So, it was a no-brainer choice.

Lighthouse score

This is the lighthouse score of the app in an incognito window:

What I learned & challenges faced

I learnt a lot of new things while developing this application.

The first thing which I learnt is: I normally decide on the idea of an application and a lot of the effort is wasted on make auth work. Instead, I have used Auth0 for the first time in an actual app and I can feel the weight lifted from my shoulders. And the integration with Next.js is amazing.
I used the Twitter API from a user's context for the first time. This enables the app developer to post tweets, reply to tweets and do other things as the user. This was also very easily done with Auth0.

I also faced some challenges along the way.

One of the most time-taking challenge I faced was: showing the meta image of links in the Twitter card on the Edit/Preview page. I tried to use unfurl.js but I was getting CORS error. So, I decided to proxy the request via an API route and I was successful in fetching the meta image of any link.
In order to show the correct preview of tweet mentions, hashtags and URLs to be blue in color and link to the correct destinations, I had to extract them manually from the text the user had entered. I was confused as how to do this elegantly. Luckily, I found twitter-text which helped me in this immensely.

What's next for "Hashnode to Twitter"

Add functionality to upload code blocks automatically to carbon.now.sh and add them to tweets.
Make use of AI (GPT-3 or others) to generate/optimize tweets for more readers.
Add posting to other social media as well like Facebook, Instagram, LinkedIn.

Try it Out

Live Application
View Source Code

Please try this out and give your valuable feedback in the comments below or on Twitter.

Again thanks to Auth0 and @Hashnode for this amazing opportunity!

Command Palette

Comments (15)

More from this blog

Introduction

Inspiration 🤔

The Problem

The Solution

What exactly is "Hashnode to Twitter"❓

Features

Video Demo

Login Screen

Extract content from Hashnode blog post URL

Edit tweets and make a thread 🧵

View rich, realtime, exact preview of tweets

Success page

How I Built It 🛠

Tech Stack Overview

Framework

Authentication

CSS Framework

Version Control

Deployment

Lighthouse score

What I learned & challenges faced

What's next for "Hashnode to Twitter"

Try it Out