We've acquired some data from the Twitter Streaming API. Using React, let's create a Twitter feed to display this data. The finished website should look like this:
From your challenges directory, run the following:
$ et get twitter-feed
$ cd twitter-feed
$ npm install
$ npm start
If you go to localhost:8080, the page will display nothing, and the console will show no errors. You'll find the data for your application in src/constants/data.js
. DO NOT MODIFY this data.
- The finished application should contain the information in the mock-up.
- When clicking on the reply icon, an alert box should pop up with the text "reply".
- When clicking on the retweet icon, an alert box should pop up with the text "retweet".
- When clicking on the like icon, an alert box should pop up with the text "like".
- When clicking on the more icon, an alert box should pop up with the text "favorite".
- When the tweet object's
favorited
property istrue
, then the like icon should be red. - When the tweet object's
retweeted
property istrue
, then the retweet icon should be green. - If the tweet includes a media entity, remove the corresponding
display_url
from the tweettext
and show the image in the tweet. - Front-end developers style their applications. You're a front-end developer. Therefore, you must style your application so it matches the mock-up.
- To complete this challenge, you should not have to create additional
components. The
Tweet
andTwitterFeed
components should be all that you need to create a functioning application. - Start by looking over the provided data and make sure you understand the
data structure. While investigating the data structure, you should note that tweets with images contain an object which possesses a
media_url
and adisplay_url
. Themedia_url
is the URL to the image, so use this URL to display the image in your application. Thedisplay_url
is a URL found in the tweettext
. Make sure you remove thedisplay_url
from the tweettext
before displaying it in your application. - Foundation and Font Awesome are available for you to use via a CDN. Rejoice!