Tweet2img: convert your tweets into beautiful images.

Tweet2img: convert your tweets into beautiful images.

So people who are active on Instagram and Twitter often post their tweets screenshot as images on Instagram, also they edit that screenshot in photoshop or canva, so after seeing a few Instagram post which contains 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. 👇

moodboard-tweets.png

🔃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 sign in. So I started reading Twitter API docs, and I must say Twitter API docs are confusing at first, then I found some solutions from Github.

I had to implement application only authentication of Twitter API. This is called OAuth 2.0 and 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 a project, to make a working solution from API.

🎨Frontend

I used react for frontend, in frontend I have to fetch the id of a tweet ( each tweet has a unique id ) then send that id to the backend and getting tweet data back from API. Then I start working on other features like tweet theme, background image, opacity and border radius.

I use the exact 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 choose 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 👇.

IMG_20210907_130915.jpg

🛠️ Tech stack

  • React for frontend.
  • Context API for state management.
  • Nodejs and Express for backend auth.
  • Twitter API for tweets data.
  • Unsplash API for 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 to your tweet
  • change opacity and border-radius of a tweet
  • Download tweet image in .png

⚙️ About the process

This project took to longer than I accepted 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 API.

There are so many things that can be added, I have built some basic features and wand to add some new features in a new version.

Upcoming features

  • adding support for tweets containing media (currently only support 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.

screencapture-tweettoimg-herokuapp-2021-09-20-18_26_59.png

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. 😊