Interactive Twitter banner

An interactive Twitter banner build in Node.js and hosted on Netlify!
Live banner on my Twitter profile »

Don't forget to give me a follow @Twitter

Table of Contents

1. About The Project
2. Getting Started
   • Installation
3. License
4. Contact
5. Acknowledgments

About The Project

The Twitter API enables programmers to access data from their Twitter profile directly. This includes data like Tweets, Direct Messages, Spaces, Lists, users, and more.

This project will leverage the API to interact with your list of followers to create an interactive banner that displays the 4 most recent followers on your Twitter profile.

The banner utilizes a serverless Node.js function that pulls the 4 most recent followers once every hour. Thereafter, the function will overlay the follower's profile picture to the banner image and upload the updated banner to your profile.

There are various places you can run a project like this, but I choose Netlify due to a generous free tier limit and because they allow you to run scheduled functions.

(back to top)

Getting Started

Installation

1. Get a free API Key for your Twitter profile at https://developer.twitter.com/

2. Apply for Elevated Access to the Twitter API. Don't worry: this is free.

3. Clone the repo

   git clone https://github.com/LarsEjaas/TwitterBanner.git

4. Install NPM packages

   npm install

5. Create an .env file and add the variables listed in .env.example replacing the values with the keys from the API.

(back to top)

Local development

Netlify CLI is a command line interface that can be used to develop and debug Netlify functions locally. To use the client install it globally:

npm install netlify-cli -g

Read more details about the client at netlify

You can start the client by running:

netlify dev

...and while the client dev environment is running from a separate terminal run the function:

netlify functions:invoke

to test the function locally.

(back to top)

License

This project comes with no license. Feel free to clone the project and modify it to your liking.

(back to top)

Contact

Lars Ejaas - @twitter - Write to me directly on my webpage

(back to top)

Acknowledgments

The code for this project was inspired by code from several sources. Mainly:

Making dynamic Twitter header

and

How I made my Twitter header dynamic

Please follow Pavel Polívka and Chris Bonkers on Twitter if you like their articles and content:

Chris Bongers

Pavel Polívka

(back to top)