When I was launching DailyWall (check that project out if you haven't yet) on Product Hunt, Andrey Azimov was helping me since I'm horrible at marketing. And when we were done preparing everything and re-cropping and re-compressing images for the 7th time we thought "Wouldn't it be cool if there was like a script that did all of this?"
Then we figured that we're probably not the only ones who had this problem and it should probably be a web app rather than a script. So I immediately opened my code editor and started sketching it out. And in 2.5 days we released it 🙈
What it does
Preview Hunt has the following features:
- Side-by-side live preview of a product while editing
- Guided editor with tips for every step
- Thumbnail validation and assistance
- Image cropping
- Preview page that looks just like when it's live on Product Hunt
- It can also be used to validate Twitter and Facebook link cards
- Time in Product Hunt timezone
- Downloadable Launch Kit. All your content organized in a convenient file (in TXT, HTML and Markdown formats), your cropped images and a thumbnail, along with some useful pre-launch materials from us
While thinking about how it should work, Andrey suggested that it would be great to have an ability to generate a static preview page that can be used for things like Twitter card validator or just shared with a team of makers.
That meant that the app could not be just static anymore, which brings us to the next section:
How it does it
Preview Hunt uses a mix of various tech. It's a Next.js app running over an Express server. We used Ant Design for quickly throwing together the front end UI and we just straight up copied Product Hunt's HTML for the preview. For data persistency we used Firebase.
One of the biggest features is the ability to generate preview pages. The way it works is when the user presses "Create Preview Page" we send all the information along with cropped images and a thumbnail to the server where it's saved, and we give the user a link which looks exactly like Product Hunt links to a page that also looks exactly like Product Hunt page with a few minor changes like the logo to distinguish Preview Hunt pages from real posts.
You can use this to validate Twitter cards, share with your team, etc. You can also delete the page at any time. Pages are also automatically deleted 24 hours after publishing and all of their assets are purged.
Here's an example of what a preview page looks like.
Another big feature is Launch Kits. When you press "Create Launch Kit", Preview Hunt sends all the info, cropped images and a thumbnail to the server where it's used to create a content file, zipped up and uploaded to Firebase Storage with a one-time link. After the Launch Kit is downloaded, it's immediately deleted from the Storage.
Content generation uses EJS for TXT and Markdown file and then uses Markedto generate HTML.
We of course used Preview Hunt to prepare the submission of Preview Hunt. Metaaaaaa 😃
The launch was way more succesful than we expected. It became #1 Product of the Day with over 1,200 upvotes (including Ryan Hoover himself 😀) which is over 2x more than that day's #2 and later #2 Product of the Week. The month isn't over yet at the time of this writing :)
That's pretty much it for this project. Give it a try if you're launching a product soon, hopefully it will make your life a bit easier :)
Andrey Azimov was a huge part of this project. Follow him and support his work, he deserves it 👍🏻
Be sure to check out my other works, you might find some of my other projects interesting as well!