Many people who said that they couldn't "write", actually post many tweets. It shows that twitter is successfully breaking down the barrier to writing.
BUT
The reading experience isn't as fun as the writing. As someone who loves to produce contents, having a blog is still important. It's easier for people to read our content without all the twitter's clutter.
Your tweets will be compete with other tweets from people on the timeline and it can be interrupted by ads or algorithm. It's not happening if you have your own blog.
What is TwitNest?
For that reason, I create TwitNest. It's a nest for your tweets. Just like a blog (it's a blog!), you can have a nice place for your thoughts. But not like a blog, where you don't know what to write, you can directly import all your tweets to lit the fire. More than that, you can manage these 'tweets'. You can edit , delete or create a new post (and a tweet) from TwitNest.
I build TwitNest as part of the Hashnode's hackathon as well. I think it's a huge bonus and motivation for us programmer who always WANT to build things, but never did.
Features of TwitNest
Import your tweets as a Posts
Rather than writing from zero, I believe our tweets can be a good seed for our next article. TwitNest will import all tweet and group thread into a single post
Delete the post you don't like
Not all tweets deserved as a post, including a reply or retweet, we'll just ignored it. You have full control on deleting what tweet should be gone from your blog
Edit the post
This is a single feature that always requested from twitter. We can't edit our tweet, BUT we have to be able to edit our blog. It's ours! You can improve your tweets, by editing the tweets that got imported. Including change the title
Create a Tweet/Blog-Post
TwitNest isn't just a reader, you can create a tweet or Make a Thread (multiple tweets) and a single post in one form. No need to sync again.
Customize SEO title and description.
It's very important to have a nice title and snippet that will shows up in search engine like Google. You can tweak the SEO setting for your post at TwitNest
How to make your blog with Twitnest?
With just one click! Try it here
Technical Stuff
Code: NextJS
The code is available on Github/ I use NextJS both for frontend and backend. Since it's a fullstack framework. I like to simplify things when building MVP like this, so we can focus on building the features. Now moving between stacks.
Server: Vercel
With Vercel, it's very easy to deploy our NextJs platform. It also works really well with the database platform we're going to use (Planetscale, see below). They offer free subdomain and preview for our deployment.
Deploying on Vercel also can trigger the linter, so if you forget running 'lint', Vercel won't deploy our code unless it's pass is linter. It's very good to keep our code clean.
Database: PlanetScale
Right now, there are many tools available for us, as a developer to try our idea without paying a single penny. One of the tools, is Planetscale. It's a serverless database platform. Means, we don't need any complicated setup to have our own database running! These last few years, we have many platform that offer a serverless function to run, but still lacking in database. Now Planetscale filling this gap!
ORM: Prisma
Prisma act as a bridge, between our code and the database. It'll make sure the typesafety and migration tools for us. It's even more useful, with the feature from PlanetScale, which introducing branching system for our database.
Here's a complete guide on how to connect Prisma X PlanetScale X NextJs.
Twitter API
I use twitter lite combine with NextAuth to play with twitter API. The part that I need like login via twitter and get information will be handled easily with both of these.
How I made it (and challenge)
Turn Twitter's thread as a post
Just moving all tweets as blogs won't be useful. I need to make a thread from twitter into a single post. So When fetching tweets, I'll look at reply_status_id as part of the response from twitter and collect connected tweets as one post.
I also need to ignore a retweet or reply to other account, which is usually not a meaningful post.
Publishing a thread and a post
At first, I was thinking to only build this as 'reader'. But we're already halfway from having a real blog. So I add the ability to post a tweet or even a thread and directly save is as post as well in one go.
To create a thread with twitter API, We just need to loop the 'status'/'text', and get the id when it's done, to be used as parent_id on the next tweet.
Get and Display media
I need to learn the response from Twitter API, try thing out like: post a tweet with single image, multiple images, a gif and video. See if there's any pattern.
It's a bit tricky, when building a thread. Since I save the data based on a single post, not each tweet. So I create a method where I give a placeholder (a certain text that not likely will come as a tweet) everytime a media occurred. Then later, replace this placeholder with media when people visiting the single pot.
I need to save the media information as well. In order to do this, I create a 'json' column (it's possible with mysql/planetscale and prisma), since the media response API is not straightforward. The idea is, I save all the response from media and can easily retrieve any info that I need later depend on the type, since I have the complete information on my column.
Design
As a developer, we try to rush things and always make the minimal version of our product. "as long as it works!".
I need to give some space, after finishing the product's features, to think clearly what kind of design I want to implement, and how to make it super nice in the UX side.
I think doing all at once, will drain our energy. So giving space between this task is worked for me.
New stuff I learn
I learn along the way. Here's some notable what's new for me
Make it simple
I learned that we need to make it as easy as possible for people to get the "Aha Moment" for our product to be loved. So I tried to remove all the unnecessary step to start your blog by just login to your twitter. TwitNest will do the rest for you.
After that, you can filter (delete) which posts you want to show to reader, which to edit or even make a new one! again.. just like a blog!
Using Planetscale
Planetscale has a well supported CLI, as well as very nice GUI. We can choose between working in the GUI or via CLI. Both of them are really design well to use.
Planetscale don't support foreign key constrant.
Cited from Planetscale's blog There are two major technical reasons why foreign key constraints are not supported:
- The way FOREIGN KEY constraints are implemented in MySQL (or, rather, in the InnoDB storage engine) interferes with Online DDL operations. Learn more in this Vitess blog post.
- Limited to single MySQL server scope, FOREIGN KEY constraints are impossible to maintain once your data grows and is split over multiple database servers. This typically happens when you introduce functional partitioning/sharding and/or horizontal sharding.
- Branch database I don't know that branching database is a thing and it's "good" thing. Multiple times, while building this, I need to change the schema. And separating between two different branch turns out is very useful and safe for my app.
Using Prisma
Having our column of database listed in a file, is a good thing. I can always look at it without opening the connection to database. Prisma have a good documentation to do the CRUD stuff we need.
Screenshots
Get a simple blog
Manage your Tweets, you can edit or delete it!
Turn twitter thread, into a single post
Create a Post and Tweet in one go
