A guide project on how to make interaction circles for Twitter
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Go to file
Simone Masiero 440e1c3161
Merge pull request #5 from WatheqAlshowaiter/main
adding some dots to the readme file, nothing big at all!
3 years ago
src use only bearer token 3 years ago
.env.example use only bearer token 3 years ago
.gitignore use only bearer token 3 years ago
.prettierrc.js initial commit 3 years ago
LICENSE initial commit 3 years ago
README.md adding some dots to the readme file, nothig big at all! 3 years ago
circle.png other circle was nicer 3 years ago
package.json initial commit 3 years ago
yarn.lock initial commit 3 years ago



Twitter Interaction Circle

Originally from Twopcharts it has been making the round in the dev community. I believe this is a great opportunity for a project to learn from. The concept is easy and straightforward but the realization encompasses a lot of concepts.

You can read more about the realization of this project on the HackerTyper Blog.


git clone git@github.com:duiker101/twitter-interaction-circle.git
cd twitter-interaction-circle
yarn install

Run with

yarn build

You can also generate a text version of the image with the complete list of the presented users with the following command

yarn build --text

The output will go in users.txt file in the root of the project


To use the project you will need Twitter API keys. You can get one on the developer portal.

As this project uses only public data, you don't need an authorization key, but you can generate a Bearer Token. This will prevent you from fetching any private data but will grant you slightly higher rate limiting.

More information about Twitter's bearer tokens can be found here

Once you have your consumer keys, rename the .env.example file .env and put them in there, it should look like this:


Make sure you don't have spaces.


If you wish, you can replace the first part of the main loop in the index.js to use the getUser() function instead of getMe(). This will allow you to generate the circles for any public Twitter user. All the API methods used take advantage only of public data.


You can try to apply the following changes to test your knowledge:

  • Apply a shade to each avatar based on the most common type of interaction
  • Fetch the circles for another user
  • Render a grid instead of the circles