Product Hunt Today - An Automatic Twitter Bot for Generating Short Video Introductions to Popular Product Hunt Projects
- Published on
TL;DR
I made a side project: Product Hunt Today, a fully automated Twitter bot.
It crawls popular projects daily on Product Hunt through the Product Hunt API, then generates short videos using Remotion (with React!), writes some introductions, and publishes tweets via the Twitter API.
Github repo: Kamigami55/product-hunt-today
Follow Product Hunt Today: @ProductHunToday
The Origin of the Product Hunt Today Side Project
In early March 2022, I joined the 100DaysOfCode Challenge, committing to code every day for 100 days.
Discovering Remotion, Making Videos with React
As I was thinking about what to do first, I saw a Youtube video by Fireship introducing Remotion, this cool tool.
Remotion allows us to use React.js code to produce mp4 videos, where every frame's layout and animation are realized using web CSS animations. I found it very interesting, so I decided to create something cool with Remotion.
Finding the Crypto Prices Model Project
I began exploring what kind of videos Remotion could produce and stumbled upon the Showcase page on their official website, where I saw the Crypto Prices project by @tokenviz.
This project is also a Twitter bot that publishes several short videos daily, summarizing the recent few hours' trends in cryptocurrency rises and falls.
This is one of their tweets, listing the five cryptocurrencies with the largest drops within a day:
Source: Original Tweet
I found this application form very interesting, fully leveraging Remotion's advantages, automatically generating a large number of videos by integrating external API data.
I could learn several skills and tools, including: video production with Remotion, external data API integration, Twitter posting API, and cronjob for scheduling scripts.
The content of the videos was simple, without overly complex animations, and the duration was short, preventing the project scope from becoming too large and reducing the risk of abandonment. The difficulty was just right.
So, I started thinking about how to adapt this project's concept into my version.
The Concept of Product Hunt Today Was Born
Usually, when I brainstorm project ideas, I open the Product Hunt website to browse recent cool projects to inspire creativity.
Product Hunt is a project launch media platform where people upload various projects (mostly software) daily, ranging from independent developers' new side projects to new products from software giants, all seeking exposure to attract users.
Users can vote (Upvote) on projects they are interested in to support them. Projects with more Upvotes get better exposure positions, usually indicating the best creativity or completeness. Product Hunt also awards badges to the top five upvoted projects of the day, a significant achievement for developers.
While browsing, I thought, since Product Hunt also changes rapidly daily with a ranking concept, why not use Product Hunt's daily popular projects to make Remotion short videos!
I also needed this project to keep track of daily popular projects while scrolling through Twitter without constantly
opening the Product Hunt webpage.
So, I decided to start making the Product Hunt Today Twitter bot!
What Does Product Hunt Today Do
Product Hunt Today @ProductHunToday is a Twitter bot.
Currently, it posts an article daily summarizing the previous day's top five products on Product Hunt:
Source: Original Tweet
The video looks like this:
And the discussion thread will contain the URLs of the five products, along with a more comprehensive description:
It has been posting automatically since March 20, 2022, making it easy to keep up with daily popular projects.
Product Hunt Today is now also showcased on the Remotion website!
Technology
Product Hunt Today uses the following technologies and tools:
- Remotion: Generating videos with React
- Product Hunt API 2.0 (GraphQL): Fetching popular products from Product Hunt
- Twitter API: Automatically uploading videos and posting on Twitter
- Tailwind CSS: CSS styling for video content
- Github Actions: Triggering scripts daily (Fetching data from Product Hunt -> Generating video -> Posting on Twitter)
- google/zx: Writing scripts in JavaScript
- Node.js (v16.14.0): Script execution environment
The project is completely open-source, and the source code can be found on Github:
Github repo: Kamigami55/product-hunt-today
Next Steps
I spent a week completing Product Hunt Today!
I really like this project, the scale is just right, I can learn a lot of new technologies, it can operate completely free of charge automatically, and it can actually help myself and others!
Next, I will continue to complete the #100DaysOfCode challenge, with the next phase goal being to optimize my personal website.
When I have time, I will also continue to improve Product Hunt Today, with the expected direction as follows:
- Increase the variety of tweets (weekly review, monthly review, instant hot projects of the day)
- Optimize video styles, making the content easier to absorb (currently the carousel is too fast, and there are too many words)
- Write more blog articles, introducing the actual code principles of Product Hunt Today, as well as introductions to various technologies (like Remotion 101)
That's all!
If you like this project, feel free to follow it and star the Github repo to motivate me to create more interesting projects!
Follow Product Hunt Today on Twitter to support this cool bot: @ProductHunToday
Follow me on Twitter, I'll share more about the development process of side projects: @EasonChang_me
Give a big star to the Github repo: Kamigami55/product-hunt-today