Tweet2img: convert your tweets into beautiful images.
So people who are active on Instagram and Twitter often post their tweets screenshots as images on Instagram, also they edit that screenshot in Photoshop or canva, so after seeing a few Instagram posts that contain tweets, I decided to make a project for my React practice.
Here is tweet2img. convert your tweets into beautiful images.
The idea is to create this type of image from a tweet, so I tried to design it like that, which contains a background image or colour and theme colour of a tweet, like light and dark mode, and by changing opacity and border-radius image looks very good. See some examples where I take design inspiration. 👇
🔃Starting the project
⚙️Backend Auth
After deciding to make a project, the first problem was how to fetch tweet data with the link of a tweet here I don't want to make users sign in with Twitter; they can fetch tweets without signing in. So I started reading Twitter API docs, and I must say Twitter API docs are confusing at first, then I found some solutions on GitHub.
I had to implement application-only authentication for the Twitter API. This is called OAuth 2.0, and the API can be accessed with a bearer token. You can find a detailed example from my repo here. This was the most challenging part of the project: to make a working solution from the API.
🎨Frontend
I used React for the frontend. In the frontend, I have to fetch the ID of a tweet ( each tweet has a unique ID), then send that ID to the backend and get the tweet data back from the API. Then I start working on other features like tweet theme, background image, opacity and border radius.
I use the same theme as Twitter light and dark theme, then move on to background image for that I implement four options to choose an image, you can choose from your device or give photo link or plain colour and also include photos from Unsplash by using Unsplash API so you can get search photos in the app. I used Bootstrap for styling.
For doing this global theme and image, I need something for state management, maybe Redux is too heavy for this simple app, so I chose Context API, it is very easy to use, and I learn Context API for this project. You can see the entire structure of tweet2img below 👇.
🛠️ Tech stack
Reactfor frontend.Context APIfor state management.NodejsandExpressfor backend auth.Twitter APIfor tweets data.Unsplash APIfor photos.
⚡ Features
Create a good post from your tweet in one click
set background from your local files, links or directly from Unsplash, and choose different colours
Set light and dark mode for your tweet
Change the opacity and border-radius of a tweet
Download the tweet image in .png
⚙️ About the process
This project took longer than I expected to finish. sometimes I can't figure out how to implement a particular feature, and one error can take so much time, the hardest part for me is to implement Twitter API auth, I tried so many examples but nothing work, sometimes I procrastinate, all of this factor takes so long to complete it but at the end, I finished the project, I made this project for practice purpose and even tried documenting this process on Twitter.
While building this project, I learned about Context API and how to handle application-only type authentication of the API.
There are so many things that can be added. I have built some basic features and want to add some new features in a new version.
Upcoming features
Adding support for tweets containing media (currently only supports text-based tweets).
More custom theme options and templates.
High-quality image download.
Directly post or schedule to Instagram from the web app.
So here is the project
*** Tweet2img: convert your tweets into images. You can find full code here Github. ***
Note: Due to twitter(X) APIs are move to paid program the app will not working as of now, you can check out the demo here
One final thought is by building a side project you can learn more than a tutorial.
Share your feedback and suggestions in the comments. Thanks for reading. 😊
