hmjatt / Twitter-header

A Node script that display profile pictures of new followers on a twitter header

Twitter-header

A Node script to create Dynamic Twitter Header

Live Preview

This project is created to create a Twitter Bot in NodeJS that fetches 3 latest followers using Twitter API V2 and create a Dynamic Twitter Header and upload it to Twitter. Dotenv, Axios, Sharp, Cron NPM packages are also used in this project.CronJob is run once every 15 MINUTES in order to avoid making too many requests to Twitter API and not to run out of dyno hours on Heroku. 🐦 Feel free to reach me at Twitter 🤖

Technologies Used

   

Includes the following features/components:

- NPM
- Twitter API Client
- Dotenv
- Axios
- Sharp
- Twitter Develeoper Portal
- Cron
- Jimp
- Heroku

Usage

npm install

node index.js // to start generating header

Steps I followed to complete this project

1. Twitter Elevated Access

   • Create an application on Twitter Developer Portal
   • Apply for Elevated access if you don't have one

2. Setup Node App

   • Install NPM using npm init -y to skip questions.
   • Create index.js to test node.

3. Twitter Client

   • Install Twitter API V2 package using npm i twitter-api-v2.
   • Create a twitterClient.js module which connects to Twitter API V2.
   • Install Dotenv package using npm install dotenv --save.
   • Create a project at https://developer.twitter.com/en/portal/projects/new.
   • Create a .env file and copy API Keys to that file.
   • Create a testTweet() method inside index.js to test API.
   • Check Twitter App if it works, it should tweet the string inside method(IT WORKS 🎉)
   • Delete or comment testTweet() method because it worked and is no longer needed.

4. Get Followers

   • Create a twitterController.js module which collects data from Twitter API.
   • Get Twitter ID from Tweeterid
   • Create getFollowers() method in twitterController.js which returns 3 latest followers
   • Test getFollowers() method(IT WORKS 🎆)
   • Create a wrapper function generateHeader() in index.js which allows us to fetch followers, their images, save images and update our header dynamically.

5. Save Follower Images

   • Create getProfileImageUrl() method in twitterController.js which returns profile image URL from followers.
   • Create imageController.js module which contains methods to manipulate images.
   • Install Axios package using npm i axios, which performs our HTTP requests.
   • Install Sharp package using npm i sharp, which modifies fetched images and save it to our File System.
   • Create saveImage() method in imageController.js which fetches rounded profile picture of followers using axios and save them to our images folder.
   • Call getProfileImageUrl() and saveImage() methods in index.js module.
   • Test generateHeader() wrapper function and check if images are fetched(IT WORKS 🥳)

6. Create Header

   • Install Jimp package using npm install --save jimp, which will help us create Dynamic Twitter Header.
   • Import required dependencies on top of imageController.js module.
   • Create a createHeader() method in imageController.js module which creates dynamicTwitterHeader.png using headerTemplate.png and fetched profile picture of our followers.
   • Test createHeader() method and check if dynamicTwitterHeader.png is successfuly created(IT WORKS 🎉)

7. Update Header

   • Create a updateHeader() method in twitterController.js module which uploads dynamicTwitterHeader.png to Twitter.
   • Test updateHeader() method and check if dynamicTwitterHeader.png is successfuly uploaded to Twitter(IT WORKS wooohoooo 🥳)

8. Cron Job

   • Install Cron package using npm install cron, to create a CronJob which generates dynamicTwitterHeader.png at a specified time.
   • Import const CronJob = require("cron").CronJob dependency on top of index.js.
   • Create a new object job from the CronJob class which calls generateHeader() wrapper function once per minute.
   • Test job object and check if dynamicTwitterHeader.png is successfuly created and uploaded to Twitter(IT WORKS yeehaw 🎉)
   • Change CronJob to run once every 15 MINUTES in order to avoid making too many requests to Twitter API and not to run out of dyno hours on Heroku.

9. Deploy to Heroku

   • Signed up for Heroku free tier(500 Dyno Hours/ month)
   • Followed this medium article by Rushikesh Mhetre to Deploy our bot on Heroku and have it run remotely
   • Add a Procfile to repo and worker: node index.js as a command. Disable Web: npm start dyno and enable worker: node index.js dyno in Resources tab under Dashboard to start generating header every 15 minutes 😄

10. Delete old profile pictures

    • Only keep profile pictures of 3 latest followers and delete the rest.

Links to content that helped me with this project

1. Tutorials

   • Article on Dev.to by Dom The Dev
   • Youtube Video by Dom The Dev
   • GitHub Repo by Dom The Dev
   • Freecodecamp Article by Spruce Emmanuel

2. Twitter

   • Twitter Developer Portal

3. Canva

   • Twitter Header Template

4. NPM Packages

   • Twitter API v2
   • Dotenv Package
   • Cron Package
   • Sharp Package
   • Axios Package
   • Jimp Package

5. Deploy to Heroku

   • Heroku Pricing
   • Heroku Docs(Define a Procfile)
   • Medium article by Rushikesh Mhetre
   • Medium article by Sachin Sarawgi

Quote

“Keep your face always toward the sunshine - and shadows will fall behind you.”
— Walt Whitman

📦 🧶 ⌚