Skip to content
displays most common words from tweets
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


tweeter preview

A coding challenge to interact with the Twiiter API. The user inputs a Twitter username, the app fetches all of the users' tweets, and outputs a graph showing the most common used words.


git clone
cd tweeter
yarn                # npm install
yarn start          # npm run start

then --> localhost:3000


This is what happens on initial page load..

  1. <AppContainer /> checks this.props.params.user (url) to see if a user is already included in the url. It also sets up a global window.addEventListener on the keydown event. Anytime event.keyCode === 13 (enter) is pressed, the makeRequest() function is fired.

  2. The <Search /> component includes children <Input /> and <Button /> components. When a user searches / looks-up a Twitter user_name, the makeRequest() function is fired.

  3. makeRequest() is the main function of the whole project. It uses the axios promise-based HTTP client to fetch - http://localhost:9090/${user} - which will return an array of tweets from the Twitter API.

    • If the server.js file returns an error and no array of tweets, this.state.isError is set to true and the <Error /> component is rendered.
    • Also, while makeRequest() and all the parsing of data is happening, this.state.isLoading is set to true and renders a <Loading /> component.
  4. Once I have all the data / tweets, I can now parse it / make usable. I start with sanitizeTweets() which does some basic RegExp and clears out mentions (@), hashtags (#), numbers (2), URLS (str.startsWith('http')), and splits the original tweets array into a 2D array of sanitized words tweet-by-tweet. This function then returns a hash table / object containing all the sanitized words as the key and the word count as the value (i.e. {'the': 23})

  5. From here, I create a sortTweets() function which takes this tweets object (hash table) and creates a new array of objects (i.e. [{word: 'the', count: 23}]), sorts them by count size (high --> low), slices the 10 most-common words, and then sorts it again in alphabetical order and returns this array of top-10 tweets.

  6. This top-10 array of tweets is passed to a <Tweets /> component which passes along the props to its' <Graph /> and <Info /> children. The <Graph /> component maps over tweets array and uses the react-easy-chart package to create the bar graph. The <Info /> component takes in the user, tweetsCount, and wordsCount - which displays a quick summary sentence and a <Link /> to the users' Twitter account at the bottom.


frontend -

  • create-react-app - this project was bootstrapped using Facebook's create-react-app

  • react-router - declarative routing for React.js

  • axios - promise-based HTTP client for the browser + node.js

  • react-easy-chart - very quick and easy graphing components for React.js (uses D3.js)

  • react-icons - for using ionic icons

backend -

  • express - node.js web application framework

  • twitter - Twitter API client library for node.js

  • cors - Node.js CORS middleware

  • compression - Node.js compression middleware

Going Forward

A few things I would've done differently or features I'd like to add.

  • Right now, no one really cares how many times @jack or @realdonaldtrump says the word 'the', so I would've liked to add an option that excludes common words. But then I ran into the issue of where do I draw this line between too-common and common (i.e. check this wikipedia article (most-common-words) - is 'would' too common to include?)

  • I would've liked to add another option to include hashtags. The default / right now is set to exclude all mentions, hashtags, numbers, URLs, and so on.

  • For some reason (I didn't look into this too much), but requesting all the tweets from @jack will only return an array of 180 tweets, when the max limit should be 3,200 tweets from the Twitter API - again, didn't look into this too much.

You can’t perform that action at this time.