Building A Meme Generator using Appsmith
Published: 2021-10-31 17:43:52

In this article I will be showing you how to build a simple meme generator platform using appsmith and a third party api called [`Humor Api`](https://humorapi.com/) 

### <u>Pre-Requisites</u>
In order to follow along with this tutorial you will need the following:
- Appsmith account: if you don't already have one you can create one via this [link](https://app.appsmith.com/user/signup)

<br>

### Building The Interface on Appsmith
We'll start by building the interface to the meme generator platform  on appsmith, so login to your appsmith dashboard and click on the button to create a new application. 

On the design area, we're going to drag an `image widget` to the middle of the screen which will display the meme, we also need a `button` widget that will randomize the meme each time its clicked, change the default text on the button to `generate meme`. 

Your design should look something like that shown below:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9dud4c8vfktad1wrmwq8.PNG)

### Integrating With HumorApi
To begin with you need to sign up for a free account on `HumorApi` platform and then get your `api-key` which will be used to communicate with the `Humor APi` server. You can sign up for a free account [](https://humorapi.com/console/#Dashboard). Once you're signed up head over to the `Profile` section on your dashboard and copy your api-key as shown below:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x6qjsfpjmd1aefd053vz.PNG)

We will now link the interface with the api, in order for us to this we need to create a new data source. Head over to the `Datasources` section on the dashboard and then click the option to create a new api, give this api a name, perhaps `randomMemes`. It will send a `GET` request to the `Humor Api` endpoint of `https://api.humorapi.com/memes/random?api-key=YOUR-API-KEY&keywords=random`.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/weki95t81sdkoefwhs6z.PNG)

This API will be responsible for fetching random memes from the public api. Save this api and head back to the widgets section. Head over to the submit widget and bring up the settings pane, and under the `Actions` section choose the option to `Execute a query` and then select the `randomMemes` api from the list of options showed.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ifer6wuc3s0h3zjwqkfl.PNG)

On the image widget bring up the settings pane as well, and in the `image` option add the following so that the image loads the url from the response of the  random meme api.

```js
{{randomMemes.data.url}}
```
Now click on the `generate meme` button and you should now see that the image changes the meme appearing on it, each time you click it. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lye7gl7ik8je9c84xx51.PNG)

We can choose to deploy this application and share with the public however we want. That's it, you have successfully created a random meme generator in a few easy steps, thanks for staying with me - have fun coding!.