<p>In this tutorial, we are going to create an application that filters Twitter tweets by selecting a specific location on the map. We are going to use <a href="https://reactjs.org/" rel="noopener noreferrer" target="_blank">React</a> and <a href="https://cosmicjs.com/" rel="noopener noreferrer" target="_blank">Cosmic</a>. We will be using <a href="https://www.npmjs.com/package/cosmicjs" rel="noopener noreferrer" target="_blank">Cosmic npm package</a> for saving and sorting the most popular searches in our application. Let&#39;s get started.</p><h1 id="tldr">TL;DR</h1><p><a href="https://cosmicjs.com/apps/search-tweets-by-location-app" rel="noopener noreferrer" target="_blank">View the Demo</a></p><p><a href="https://github.com/cosmicjs/react-search-tweets-by-location" rel="noopener noreferrer" target="_blank">Download the GitHub repo</a></p><h1 id="prerequisites">Prerequisites</h1><p>You will be required to install <a href="https://nodejs.org/en/" rel="noopener noreferrer" target="_blank">Node JS</a> and <a href="https://www.npmjs.com/" rel="noopener noreferrer" target="_blank">NPM</a> before starting. Make sure you already have them.</p><h1 id="gettingstarted">Getting Started</h1><h4 id="doingeverythingusingtheexistinggitrepo">Doing everything using the existing git repo</h4><p>First of all, you have to be sure you have node &gt; 8.x: As our application uses external APIs, such as <a href="https://cosmicjs.com/" rel="noopener noreferrer" target="_blank">Cosmic</a>, <a href="https://developers.google.com/gmail/api/">Gmail API</a> and <a href="https://developer.twitter.com/en/docs.html" rel="noopener noreferrer" target="_blank">Twitter API</a> 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 &quot;KEYS&quot; in the <code>.env</code> file. Here is how your <code>.env</code> file has to look like.</p><div class="fr-embedly               " data-original-embed="<a href='https://gist.github.com/haykadamyan/3835df61c65dec024a7115a29720107a.js' class='embedly-card'></a>"><a href="https://gist.github.com/haykadamyan/3835df61c65dec024a7115a29720107a.js" class="embedly-card"></a></div><p>After setting up the <code>.env</code>file we have to run the following commands.&nbsp;</p><div class="fr-embedly              " data-original-embed="<a href='https://gist.github.com/haykadamyan/2c2b001d9c444399d0648fec0a95f83e.js' class='embedly-card'></a>"><a href="https://gist.github.com/haykadamyan/2c2b001d9c444399d0648fec0a95f83e.js" class="embedly-card"></a></div><p>After the successful completion of the last command browser window will automatically open, and the <code>package.json</code> will look like this.&nbsp;</p><div class="fr-embedly              " data-original-embed="<a href='https://gist.github.com/haykadamyan/d79200227dde499453519f8c835bea50.js' class='embedly-card'></a>"><a href="https://gist.github.com/haykadamyan/d79200227dde499453519f8c835bea50.js" class="embedly-card"></a></div><p>Now the app has to be running on <code>http://localhost:3000</code></p><h1><a id="Source_code_28"></a>Source code</h1><h5><a id="Serverjs_30"></a>Server.js</h5><p>Now it&rsquo;s time to understand how the magic works.<br>Let&rsquo;s take a look at <code>server.js</code></p><div class="fr-embedly          " data-original-embed="<a href='https://gist.github.com/haykadamyan/c7e5516fad13800a500fcd1b2a96ee32.js' class='embedly-card'></a>"><a href="https://gist.github.com/haykadamyan/c7e5516fad13800a500fcd1b2a96ee32.js" class="embedly-card"></a></div><p>Nothing special in this code, unless we take a look at the line <strong>14</strong>. Here we setup the endpoint for the Twitter API requests, and prepare the standart request body.<br>More about this at <a href="https://developer.twitter.com/en/docs.html">Twitter API Documentation</a></p><h5><a id="Pagesindexjs_40"></a>Pages/index.js</h5><p><code>pages/index.js</code> is our home page file, where we have our UI, and the requests to the API&rsquo;s we use.</p><div class="fr-embedly          " data-original-embed="<a href='https://gist.github.com/haykadamyan/16682a290b202fe2188aaa96e46ff636.js' class='embedly-card'></a>"><a href="https://gist.github.com/haykadamyan/16682a290b202fe2188aaa96e46ff636.js" class="embedly-card"></a></div><h6><a id="Important_functions_47"></a>Important functions</h6><ul><li>onChangeLocation - calls <strong>search</strong> function when we select a location on the map</li><li>search - Sends request to the Twitter API and receives the tweets in the choosen location</li><li>componentDidMount - Loads the most popular search topics through <a href="https://cosmicjs.com/">Cosmic</a> API</li></ul><h5><a id="Libcosmicjs_52"></a>Lib/cosmic.js</h5><p><code>lib/comsic.js</code> is the file where our code of relations with Buckets has been hosted.</p><div class="fr-embedly          " data-original-embed="<a href='https://gist.github.com/haykadamyan/9d6ec45df6fcc08a872d2169cd9b96f1.js' class='embedly-card'></a>"><a href="https://gist.github.com/haykadamyan/9d6ec45df6fcc08a872d2169cd9b96f1.js" class="embedly-card"></a></div><p><a id="Important_functions_58"></a>Important functions</p><ul><li>getSearchHistory - returns the history of the searches that were done</li><li>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.</li></ul><h5><a id="Libtwitterjs_63"></a>Lib/twitter.js</h5><p><code>lib/twitter.js</code> is the file where our code for <a href="https://developer.twitter.com/en/docs.html">Twitter API</a> is hosted.</p><div class="fr-embedly         " data-original-embed="<a href='https://gist.github.com/haykadamyan/2d548514ad322ef4f3af8da806400c6f.js' class='embedly-card'></a>"><a href="https://gist.github.com/haykadamyan/2d548514ad322ef4f3af8da806400c6f.js" class="embedly-card"></a></div><h6><a id="Important_functions_69"></a>Important functions</h6><ul><li>searchTweets - sends a search request to the <a href="https://developer.twitter.com/en/docs.html">Twitter API</a></li></ul><h1><a id="Conclusion_75"></a>Conclusion</h1><p>In this tutorial, we&rsquo;ve learned how to build an app that filters twitter tweets by location using <a href="https://reactjs.org/">React</a> and <a href="https://cosmicjs.com/">Cosmic</a>. All the important functions and API calls that were used in the process of development are described above.</p><p><br>If you have any questions about the development process, feel free to contact me at <a href="mailto:drprog00@gmail.com">drprog00@gmail.com</a>.</p>

How to Build a Location-based Twitter Search App with React and Cosmic

<p>In this tutorial, I&#39;m going to show you how to create a <strong>Todo list app with pomodort timer included</strong> using <a href="https://reactjs.org/">React</a> and <a href="https://cosmicjs.com/">Cosmic</a>. We will be using Cosmic npm package
for implementing the basic CRUD for our objects and to retrieve data and media from Cosmic. Let&#39;s get started.</p><h2><strong>TL;DR</strong></h2><p><a href="https://cosmicjs.com/apps/react-pomodoro-todo-app" rel="noopener noreferrer" target="_blank">View the Demo</a><br><a href="https://github.com/cosmicjs/react-todo-pomodoro" rel="noopener noreferrer" target="_blank">Download the GitHub repo</a></p><h1><span style="font-size: 24px;"><strong>Prerequisites</strong></span></h1><p>You will be requiring to install Node JS and npm before starting. Make sure you already have them.</p><h1><span style="font-size: 24px;"><strong>Getting Started</strong></span></h1><h1><span style="font-size: 24px;">Doing everything using the existing git repo</span></h1><p>First of all, you have to be sure you have node &gt; 6.x and yarn installed, than run the following commands:</p><div class="fr-embedly           " data-original-embed="<a href='https://gist.github.com/haykadamyan/4b7c1038eed1de093353547dfc12a5c3' class='embedly-card'></a>"><a href="https://gist.github.com/haykadamyan/4b7c1038eed1de093353547dfc12a5c3" class="embedly-card"></a></div><p>After successfull completion of the last command browser window will automatically open <code>package.json</code> will look like this.</p><div class="fr-embedly         " data-original-embed="<a href='https://gist.github.com/haykadamyan/b9eb8baab0bed3b7c63fbc0678c9ded8' class='embedly-card'></a>"><a href="https://gist.github.com/haykadamyan/b9eb8baab0bed3b7c63fbc0678c9ded8" class="embedly-card"></a></div><p>Now the app has to be running on <code><a href="http://localhost:3000">http://localhost:300</a></code></p><p><span style="font-size: 24px;">Let&#39;s setup&nbsp;</span><code><span style="font-size: 24px;">webpack.config.js</span></code></p><div class="fr-embedly         " data-original-embed="<a href='https://gist.github.com/haykadamyan/953a96363125bf7d054d48965642acc6' class='embedly-card'></a>"><a href="https://gist.github.com/haykadamyan/953a96363125bf7d054d48965642acc6" class="embedly-card"></a></div><p>Code written here is responsible for compiling React JS.</p><p><span style="font-size: 24px;">Setting up&nbsp;</span><code><span style="font-size: 24px;">./src/components/app/app.js</span></code></p><div class="fr-embedly         " data-original-embed="<a href='https://gist.github.com/haykadamyan/a653b019bdb1cc35cc1eb6ca4277c45b' class='embedly-card'></a>"><a href="https://gist.github.com/haykadamyan/a653b019bdb1cc35cc1eb6ca4277c45b" class="embedly-card"></a></div><p>In this file we are creating the home page file. So in state we are keeping the following data.</p><ol><li>Form-&gt; title : Responsible for new task input value</li><li>List: Array of strings, here are saved all the tasks</li><li>showNewTaskInput: Boolean value, responsible for show/hide the new task input</li><li>notification: Current notification name, we also have types for notifications listed below as an object, here are sorted the names for the notification types.</li></ol><p>We use the following methods in our <code>Class</code>:</p><ol><li>Constructor: We are setupping new <code>Api service</code>, this gonna be used to connect to the Cosmic API.</li><li>ComponentWillMount: This is function which belongs to React component lifecycle, here we just call another method created by us.</li><li>getData: Function which does a call to the API and updates the list of tasks, after what we reset the value of new task input using <code>this.resetForm()</code></li><li>createNotification: Function which gets a notification type as an argument and puts it in the state for further use</li><li>onChange: Function is responsible to keep the new task title in the state.</li><li>onSave: Function creates a new task using the Cosmic api.</li><li>onStart: Function is responsible for starting the timer for specific task, it calls the Api to save the start time in the Cosmic&#39;s db.</li><li>onDone: Function is responsible for setting the status of specific task to &quot;Done&quot;.</li><li>onUpdate: Function is responsible to update specific task&#39;s title.</li><li>showNewTaskInput: Function shows new task input.</li><li>resetForm: Function is responsible for cleaning the value of the new task input.</li><li>render: In render we put our html, and call our functions mentioned above.</li></ol><h1><span style="font-size: 24px;">Setting up&nbsp;</span><code><span style="font-size: 24px;">./src/task-list/list-item/index.js</span></code></h1><p><br></p><div class="fr-embedly         " data-original-embed="<a href='https://gist.github.com/haykadamyan/e5ff1fe0e638d6ff87d61f8bee9d1383' class='embedly-card'></a>"><a href="https://gist.github.com/haykadamyan/e5ff1fe0e638d6ff87d61f8bee9d1383" class="embedly-card"></a></div><h1><span style="font-size: 24px;">In</span><span style="font-size: 24px;"><code>list-item</code> we are creating each task item</span></h1><p><br></p><p>In state we are keeping 2 items:</p><ol><li>editing: If the title is currently in process of change</li><li>title: Current title of the task</li></ol><p>Below we 3 functions coming after. They will call the functions passed to component by <code>props</code>.</p><p>Next 2 functions have some logic in them. Here they are:</p><ol><li>onEdit: Function which is responsive for updating the state <code>editing</code> item.</li><li>onChange: Function which changes the <code>title</code> item in the state.</li></ol><p>Then we have 2 React component lifecycle methods:</p><ol><li>componentWillReceiveProps: In this function we are checking if component has recieved new props we are updating our local state.</li><li>render: All the HTML code goes here. Where we call our functions mentioned above.</li></ol><h1><span style="font-size: 24px;">Setting up&nbsp;</span><code><span style="font-size: 24px;">./src/components/countdown/index.js</span></code></h1><p><br></p><div class="fr-embedly       " data-original-embed="<a href='https://gist.github.com/haykadamyan/216fb8b2ab27e33af1ced2065da947ad' class='embedly-card'></a>"><a href="https://gist.github.com/haykadamyan/216fb8b2ab27e33af1ced2065da947ad" class="embedly-card"></a></div><p>In this file we are using <a href="https://momentjs.com/">Moment JS</a> for doing basic calculation for the time countdown.</p><p>We are all set up, you can run the application, and enjoy it.</p>

Blogs by Hayk Adamyan

Start building today

Blogs by Hayk Adamyan

.css-9vqfqm{display:inline-block;white-space:pre;}.css-sanqhm{opacity:0;}Start building today

Start building today