How to Build a Location-based Twitter Search App with React and Cosmic JS
Tags: javascript, react, cosmicjs
Published: 2019-01-30 11:58:42

---
title: How to Build a Location-based Twitter Search App with React and Cosmic JS
published: true
description: 
tags: Javascript, ReactJS, CosmicJS
---
![Background Image](https://cosmic-s3.imgix.net/15012da0-1ff8-11e9-8b75-9b9c29c68edc-tweets-by-location.png?w=1000)

# Tweets by location
Hi, In this tutorial, we are going to create an application that filters twitter tweets by location using [React](https://reactjs.org/) and [Cosmic JS](https://cosmicjs.com/). We will be using [Cosmic JS npm package](https://www.npmjs.com/package/cosmicjs) for the implementation of the basic CRUD system in our application. Let's get started.


# TL;DR
[View the Demo](https://search-tweets-by-location.cosmicapp1.co/)
[Download the GitHub repo](https://github.com/haykadamyan/tweet-locator)

# Prerequisites
You will be required to install [Node JS](https://nodejs.org/en/) and [NPM](https://www.npmjs.com/) before starting. Make sure you already have them.

# Getting Started
#### Doing everything using the existing git repo
First of all, you have to be sure you have node > 8.x:
As our application uses external APIs, such as [Cosmic JS](https://cosmicjs.com/), [Gmail API](https://developers.google.com/gmail/api/) and [Twitter API](https://developer.twitter.com/en/docs.html) we have to set the environment variables for these APIs.
Note you will have to create API keys in the services mentioned above to put the "KEYS" in the ``.env`` file. 
Here is how your ``.env`` file has to look like.
{% gist https://gist.github.com/haykadamyan/3835df61c65dec024a7115a29720107a %}

After setting up the ``.env``file we have to run the following commands.
{% gist https://gist.github.com/haykadamyan/2c2b001d9c444399d0648fec0a95f83e %}

After the successfull completion of the last command browser window will automatically open, and the `package.json` will look like this.
{% gist https://gist.github.com/haykadamyan/d79200227dde499453519f8c835bea50 %}

Now the app has to be running on ``http://localhost:3000``

# Congratulations!!!

# Source code

##### Server.js

Now it's time to understand how the magic works. 
Let's take a look at `server.js`

{% gist https://gist.github.com/haykadamyan/c7e5516fad13800a500fcd1b2a96ee32 %}

Nothing special in this code, unless we take a look at the line **14**. Here we setup the endpoint for the twitter API requests, and prepare the standart request body. 
More about this at [Twitter API Documentation](https://developer.twitter.com/en/docs.html)

##### Pages/index.js

`pages/index.js` is our home page file, where we have our UI, and the requests to the API's we use.

{% gist https://gist.github.com/haykadamyan/16682a290b202fe2188aaa96e46ff636 %}


###### Important functions
* onChangeLocation - calls **search** function when we select a location on the map
* search - Sends request to the Twitter API and receives the tweets in the choosen location
* componentDidMount - Loads the most popular search topics through [Cosmic JS](https://cosmicjs.com/) API

##### Lib/cosmic.js

`lib/comsic.js`  is the file where our code of relations with Buckets has been hosted.

{% gist https://gist.github.com/haykadamyan/9d6ec45df6fcc08a872d2169cd9b96f1 %}

###### Important functions

*   getSearchHistory - returns the history of the searches that were done
*   addHistory - checks if we have that topic searched before, if yes we make the popularity rank of the topic higher in our db, if not we add it there with the popularity rank 0.

##### Lib/twitter.js

`lib/twitter.js`  is the file where our code for [Twitter API](https://developer.twitter.com/en/docs.html) is hosted.

{% gist https://gist.github.com/haykadamyan/2d548514ad322ef4f3af8da806400c6f %}

###### Important functions

* searchTweets - sends a search request to the [Twitter API](https://developer.twitter.com/en/docs.html)



# Conclusion

In this tutorial we've learned how to build an app that filters twitter tweets by location using [React](https://reactjs.org/) and [Cosmic JS](https://cosmicjs.com/).