Twitter API, Yip Yip!
Tags: twitterapi, ruby, react, beginners
Published: 2019-07-13 18:07:57

---
title: Twitter API, Yip Yip!
published: true
description: What if Avatar: The Last Airbender was created by people that constantly retconned or added weird plot points on Twitter?
tags: twitter api, ruby, react, beginner
---

I had been wanting to dip into the Twitter API for reasons that are definitely not related to building my own Twitter Bot Army and found myself inspired by a recent conversation about how adding in superfluous "world building" detail can sometimes have questionable results. 

Of course this is the cursed tweet of which I speak.
![This cursed image](https://thepracticaldev.s3.amazonaws.com/i/7nql1pttpgi51hedvzln.png)

What did this add? Why was this ever allowed to be tweeted? Should this be the source of inspiration for my next personal project? I don't know the answer to the first two but the latter will received a resounding "sure, why not"! 

I decided that this project would essentially aim to mimic the twitter of a creator that was constantly retconning or adding to their series' canon. For my Twitter project's source material I chose Avatar: The Last Airbender (ATLA) for two main reasons:
1. ATLA is a perfect animated show 
(Editor's Note: Originally I had a whole passionate explanation here but really I think I can stop at those six words)
2. [There was a nice ATLA API - Thanks Paige Gorry!](https://github.com/paigeegorry/last-airbender-api)

Despite my red herring of an opening sentence to this blog - This personal project is not a twitter bot for my fictitious bot army but rather more akin to a random(ish) tweet generator. For the intention of this project (make wacky tweets that add/retcon plot points) I thought it would be fun to make a front end that the "audience" could interact with which is how I ended up with this. 

## Tweet Generator on Heroku
[ALT ALTA Tweet Generator](https://alt-atla.herokuapp.com/)
![Tweet Generator hosted on Heroku](https://thepracticaldev.s3.amazonaws.com/i/tr2p5si5ghn1qbdui79j.png)

## Generate Tweets on Twitter
[ALT ATLA Twitter](https://twitter.com/ALTALTA7)
![Generated Tweet on Twitter](https://thepracticaldev.s3.amazonaws.com/i/wly6v0leump8agkggufl.png)

## How it Works

The Tweet Generator front end is built with React and the Twitter handling back end is Ruby on Rails. 

**At a high level it works like this:**

1. Clicking the generate button will Math.rand(omly) call one of 19 possible tweet template functions 
2. Depending on which tweet template function is hit a fetch request will be made to the [ATLA API](https://github.com/paigeegorry/last-airbender-api) for a random character name or two and/or state will be set with the corresponding template message
3. A POST request with our state's message will be sent to our Ruby on Rails back end for handling
4. Receiving the message on the back end will trigger a function that posts our message via the Twitter API
5. The tweet is now live! 

You can check out the code for both here:
- [Front end github repo](https://github.com/kcarrel/JK-ATLA)
- [Back end github repo](https://github.com/kcarrel/JK-ATLA-BE)

# Some of my favorite resulting tweets

![Secret Aang Family](https://thepracticaldev.s3.amazonaws.com/i/x8kyii5wuxmuc3s5iawx.png)
[There is just a lot of things off about this family tree](https://avatar.fandom.com/wiki/Pik_and_Pak)

![Hama's revenge against the cabbage merchant](https://thepracticaldev.s3.amazonaws.com/i/0wtf7gtmet58qedk8top.png)

![Bosco the bear](https://thepracticaldev.s3.amazonaws.com/i/126s3wd84ubd4qridtc8.png)

![The Boulder crumbles](https://thepracticaldev.s3.amazonaws.com/i/ld942lo50dksi81uqvho.png)

![Steely Bois](https://thepracticaldev.s3.amazonaws.com/i/ixlynwquxqrg7xnrs3vl.png)

# Resources
- [Twitter API setup in Ruby](http://www.mattmorgante.com/technology/505)
- [ATLA API](https://last-airbender-api.herokuapp.com/)