Description
For this assignment, you will need to understand components, props, JSX, state,
and HTTP requests.
Barstool Archive
Erika Nardini from Barstool Sports wants to make a throwback site from late
2020/early 2021. Your goal is to display a few of the articles in a list for
some of the readers of the website to reference. You will find the data here:
https://www.jalirani.com/files/barstool.json
Requirements Your job is grab this remote article data via a HTTP request
and display these articles in a list. Each article needs to have:
• An article title (this should be clickable and take the user to the article
on the actual Barstool Sport’s website)
• The article thumbnail/image
• The author
• The author’s avatar/image
• The number of comments for the article
Use the small thumbnail image (this must render nicely). A few of the articles
have a .gif for a thumbnail
1
Figure 1: Example Article
Notes
• Your website does not need to minic my screenshot, it just needs to have
the data mentioned above.
• All five items needed for each article is contained inside of the JSON
objects.
• *Wink Wink* For article thumbnail it is image.location + image.thumbnail.small
(the url is broken up into two parts)
• Test the data in your browser to ensure it works. i.e. copy and paste
image.location + image.thumbnail.small and put it in the address bar in
your browser to ensure you can see an image.
• If the article thumbnail/image has a .gif instead of a .png/.jpg you can look
at this article for guidance ttps://stackoverflow.com/questions/44371716/addanimated-gifs-to-react-web-apps or I will allow you to substitute it for an
image of your choice since we don’t cover how to display .gif’s (even though
it’s easy, just try it).
• Here is a simple example of a HTTP request in React:
https://jasonwatmore.com/post/2020/07/17/react-axios-http-get-requestexamples
• Don’t worry about adding CSS, fonts, etc. Just focus on displaying the
five items for each article listed above.
Submission
Please submit the following on Blackboard:
• barstool.zip
