Realtime tweets visualizer with Pusher and Zappier

In this Mediajam, I’ll be taking you through the process of building a real-time tweets visualizer using

Nuxt.js as the web development framework. We will be using

• Cloudinary to store a tweet image template and perform transformations on it.

• Pusher to receive real-time tweet events.

• Zappier to easily automate the collection of tweets from Twitter and send them to Pusher.

The article assumes that you are familiar with Javascript and Nuxt.js.

Visit the codesandbox below to test the final product:

📦realtime-tweet-visualizer-nuxt

┣ 📦components

┣ ┣ 📜Hero.vue

┣ ┣ 📜NuxtLogo.vue

┣ ┣ 📜Tutorial.vue

┣ ┣ 📜Tweet.vue

┣ ┣ 📜TweetImage.vue

┣ ┗ 📜Wall.vue

┣ ┣ 📦pages

┣ ┗ 📜index.vue

┣ 📦plugins

┣ ┗ 📜vue-final-modal.js

┣ 📦static

┣ ┗ 📜favicon.ico

┣ 📦store

┣ ┗ 📜README.md

┣ ┣ 📜.editorconfig

┣ 📜.env.example

┣ 📜.gitignore

┣ 📜README.md

┣ 📜nuxt.config.js

┣ 📜package.json

┗ 📜yarn.lock

This tutorial assumes you’re already familiar with Vue and Javascript. Node.js and Nuxt.js will also be utilized (some knowledge of the two is expected but not mandatory).

There are numerous tutorials available on how to accomplish this. On installation and adding the path to your environment variables, you can consult the official Node.js website. You could also look into [NVM], a node version manager (https://github.com/nvm-sh/nvm). I would recommend the latter if you are a power user who will be switching between node versions frequently.

Pusher is a platform that provides APIs to developers so they can build collaboration and communication features into their web and mobile applications. You should create a Pusher account if you don’t already have one. Both the Channels and Beams Sandbox plans are completely free and will work nicely with this example project. To start using pusher in the application do the following :

1. Create a Channels app by clicking Get Started

2. Follow the steps in the dialog box to name your app with the name of your preference and also choose a preferred cluster location from the list.

3. Note the app id, key, secret, and cluster from the App Keys page because you’ll need them to connect to your Channels app.

[Zappier] is a tool that lets you automate tasks and create workflows by integrating various applications such as Twitter. We shall leverage it in the application to track tweets based on the different hash-tags we shall declare.

To get started on using the platform, create or sign in to a Zapier account and perform the following actions :

Apps created in Zapier are known as Zaps

• Every Zap requires a trigger. A trigger is basically an event that will run the Zap. Since we want specific hashtags, we will select the search mentions trigger on Twitter.

• Authenticate Zapier into your Twitter Account

• Enter the search terms you want to monitor. You may use query operators E.g. #javascript OR #js OR #python OR #java OR #php OR #rubyonrails OR #typescript OR #dart OR #flutter OR #cloudinary

• Confirm this step works with a test by clicking on the ‘Test and Review’ button which will run the code.

Once an event (hash-tag) has been triggered on zappier, we will need to publish it in Pusher so that we can view it in real-time on the application. To achieve this :

1. Create a new step by choosing the app Pusher.
2. You will be requested to input the pusher app keys.
3. Select the publish pusher event action event.
4. Set up the action by providing the following information:

• Channels: tweets
• Event name: new-tweet
• Event data:
• username: Twitter username
• text: Twitter text
• full_name: Twitter full name
• tweet_url: Twitter url
• user_profile_image: Twitter user profile image
• created_at: Twitter created at
• lang: Twitter lang

5. To ensure everything works well, Test and Trigger an event on Zappier then visit the Pusher debug console in the pusher dashboard to view all the triggered events in real-time.

6. To be able to get the latest Tweets with hashtags in real-time, click the Activate Zap button which will turn it on.

To get started, make sure npx is installed on your system. This can be achieved through:

yarn global add npx

# OR

npm install -g npx
Code language: PHP (php)

Then open up your terminal/command line and navigate to your desired Project folder. Run the following command to create your project.

yarn create-nuxt-app realtime-tweet-visualizer

This command above will ask you a series of questions. We recommend using the following defaults for this project:

• Programming Language -> JavaScript
• Package manager -> Yarn
• UI Framework -> TailwindCSS
• Nuxt.Js modules -> None
• Rendering mode: Universal (SSR/SSG)
• Deployment target: Client-side (SPA hosting)

After installation, navigate to the project folder and launch it with the following command :

yarn dev

At the root of your project, create a new file and name it .env.local. Inside the file, paste the following data

NUXT_ENV_CLOUDINARY_CLOUD_NAME=YOUR_CLOUD_NAME
NUXT_ENV_PUSHER_APP_KEY =YOUR_PUSHER_APP_KEY
NUXT_ENV_PUSHER_CLUSTER=YOUR_PUSHER_CLUSTER

Replace YOUR_CLOUD_NAME YOUR_PUSHER_APP_KEY and YOUR_PUSHER_CLUSTER with the appropriate values from pusher and cloudinary

The background card for all the tweets shall be served from Cloudinary. To install cloudinary into the project using npm or yarn run the following command :

npm install @nuxtjs/cloudinary
# OR
yarn add @nuxtjs/cloudinary
Code language: CSS (css)

Then add @nuxtjs/cloudinary as a module in your nuxt.config.js file.

export  default  {
modules:  [
'@nuxtjs/cloudinary'
]
  }
Code language: CSS (css)

In your nuxt.config.js, create a cloudinary section for your cloudinary configurations.

cloudinary:  {

cloudName:  process.env.NUXT_ENV_CLOUDINARY_CLOUD_NAME,

useComponent:  true

}

Code language: CSS (css)

As the background card for our tweets, we shall use this image template. Feel free to grab it and add it to your cloudinary media library. For the purpose of this tutorial, this file is saved using this public id: realtime-tweet-visualizer/tweet_card_template_vazitc

To install pusher into the application using yarn or npm run the following command :

npm install pusher-js

# OR

yarn add pusher-js
Code language: PHP (php)

To trim the text of the tweets to a certain number of characters we shall leverage this package. To install it run the following command :

npm install trim-characters

# OR

yarn add trim-characters
Code language: PHP (php)

To render and style the application’s components we shall use this lightweight templating package that supports Tailwind CSS out of the box. Run the following to install it into the application :

npm install vue-final-modal@latest
# OR
yarn add vue-final-modal@latest
Code language: PHP (php)

Then create a main.js plugin file to configure the package in the plugins directory:

import  VueFinalModal  from  'vue-final-modal/lib'
Vue.use(VueFinalModal())
Code language: JavaScript (javascript)

Add the plugin to our nuxt.config.js file.

export  default  {
plugins:  ['~plugins/vue-final-modal.js'],
build:  {
transpile:  ['vue-final-modal']
}
 }

Code language: CSS (css)

We are going to connect our Nuxt.Js application to our pusher app. First, we are going to set the required environment variables. You can obtain these keys by opening your app on Pusher and checking the App Keys tab.

NUXT_ENV_PUSHER_APP_KEY=
NUXT_ENV_PUSHER_CLUSTER=

To Display all the triggered tweets from Pusher inside the components directory, create a Wall.vue file which will be used to display all the tweets with declared hashtags in real-time.

In the file, import and create a pusher instance using the above credentials. We shall do this in the same file in order to listen to incoming events.

import  Pusher  from  "pusher-js";
const  PUSHER  =  new  Pusher(process.env.NUXT_ENV_PUSHER_APP_KEY,  {
cluster:  process.env.NUXT_ENV_PUSHER_CLUSTER,
});
Code language: JavaScript (javascript)

As we shall be listening to only one channel and event, let’s set them as constants.

const  CHANNEL  =  "tweets";
const  EVENT  =  "new-tweet";
Code language: JavaScript (javascript)

The next step is to subscribe to our channel and bind to the new-tweet event.

mounted()  {

const  channel  =  PUSHER.subscribe(CHANNEL);

channel.bind(EVENT,  (data)  =>  {

this.tweets.push(data);

});

},

Code language: JavaScript (javascript)

To notify Pusher that we are no longer listening for events, we shall unsubscribe in the beforeDestroy event lifecycle hook. This hook is called before we destroy the component.

beforeDestroy()  {

PUSHER.unsubscribe(CHANNEL);

},

In order to start the rendering of tweets, in the components folder create a TweetImage.vue file. This component shall be used to render the tweets, we shall be using a series of transformations. Let’s break them down first before reviewing the full result.

The below code will just display the plain tweet template image. The options specified are:

• publicId: The public id of the image in Cloudinary

• secure: Instructs the Cloudinary SDK that we want a secure https resource.

• width: Specifies the width of the image

• alt: Alternative text for the image.

<cld-image

publicId="realtime-tweet-visualizer/tweet_card_template_vazitc"

secure="true"

width="500"

:alt="`${tweet.username}'s tweet`"

>

</cld-image>

Code language: HTML, XML (xml)

We shall now use the fetch transformation to display the user’s profile image. To position it correctly, we’ll specify the x and y coordinates. We shall then specify maximum border-radius (r="max") to ensure our image is rounded.

<cld-transformation

:overlay="`fetch:${tweet.user_profile_image}`"

y="-70"

x="-265"

r="max"

/>

Code language: HTML, XML (xml)

To display the user’s full name, username, text and created_at, we shall use text overlays.

The challenge is that some characters aren’t compatible with the transformation, thus we created the following method to clean the text. We shall first remove all URLs. We shall then remove all characters not included in this regex group: [A-Za-z0-9_@.#&+-].

To wrap the text in the template, we shall add a newline after every 70th character.

safeText(str)  {

return  new  String(str)

.replace(/(?:https?|ftp):\/\/[\n\S]+/g,  "URL")

.replace(/[^ A-Za-z0-9_@.#&+-]/gi,  "")

.replace(/.{70}/g,  "$&\n");

},

Code language: JavaScript (javascript)

To ensure our texts are safe for usage in URLs, we shall the encodeURIComponent. We shall also specify the x, y coordinates for placing the text. Here is a sample of the code used to transform text onto the template.

<cld-transformation

:overlay="`text:arial_16_bold:${encodeURIComponent(safeText(tweet.full_name))},co_rgb:34383d`"

y="-85"

x="-176"

/>

Code language: HTML, XML (xml)

Here is the code of home the transformations all come together.

<cld-image

publicId="realtime-tweet-visualizer/tweet_card_template_vazitc"

secure="true"

width="500"

:alt="`${tweet.username}'s tweet`"

>

<cld-transformation

:overlay="`fetch:${tweet.user_profile_image}`"

y="-70"

x="-265"

r="max"

/>

<cld-transformation
:overlay="`text:arial_16_bold:${encodeURIComponent(safeText(tweet.full_name))},co_rgb:34383d`"

y="-85"

x="-176"

/>
<cld-transformation
:overlay="`text:arial_16_thin:@${encodeURIComponent(safeText(tweet.username))},co_rgb:536471`"
y="-60"
x="-176"
/>

<cld-transformation
:overlay="`text:arial_16_thin:@${encodeURIComponent(safeText(tweet.text.substring(0, 300)))},co_rgb:0f1419`"
crop="fit"
y="10"
/>

<cld-transformation

:overlay="`text:arial_16_thin:${tweet.created_at},co_rgb:536471`"
y="95"
x="-170"
/>
</cld-image>

Code language: HTML, XML (xml)

After you’ve completed all of the above, you should be able to see real-time tweets on the homepage of your app, demonstrating the power of each individual tool used in the application.

The Final code repository can be found HERE

You may find these resources useful.

• Zapier Documentation
• Pusher Documentation
• Nuxt.js Docs