Project overview
MockSocial - Generate realistic fake social media post or message screenshots for Twitter, Instagram, Facebook, Discord, and ChatGPT. Customize usernames, text, profile pictures, posts, reactions, badges, and themes effortlessly.
Project features
-
You can choose from 6 different social media platforms: Twitter, Instagram, Facebook, Discord, ChatGPT.
-
Ability to add custom values to the image:
- Username.
- Post text, or message text.
- Profile picture.
- Post picture.
- Reaction emoji.
- User badge selection.
- Theme selection.
Build process
When I came up with this idea I checked few simillar purpose websites and I wasn't very impressed. I was looking for a place where you could generate fake images for multiple platforms and not just posts, I also wanted messages or comments of that platform but all the apps I checked lacked one of the features so I made my own. First I wanted to know how can you generate a picture from html and css. I found and tested couple libraries and at the end chose @hugocxl/react-to-image which is a fork of html-to-image that had easy to use hooks for React.
Later in development I realised that I need to store temporary images preferably for free. And for that I chose Uploadthing which an AWS S3 service that allows me to have 2 GB of file storage.
The problem was that the storage will eventually fill up so created a function that would automatically delete the image after uploading and getting the URL. Since the image doesn't disappear until the page is refreshed this solution worked perfectly.