Description
Overview
This assignment will be worth 6% of your total grade. The goal of this project
is to test more advanced React.js concepts. You must delete the node modules
directory from the project before submitting. If you do not, you will lose 10%
from your assignment grade.
Specifications
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
2
