Building a Retro Barstool Article Viewer with React: Fetching and Displaying JSON Data

Introduction: Reviving the Barstool Vibe with React

If you're working on Cosc484 assignment 9, you're probably tasked with building a throwback site that displays articles from late 2020/early 2021 using React. Think of it like creating a mini Barstool Archive where users can browse old posts. This tutorial will guide you through the core concepts: components, props, JSX, state, and HTTP requests. We'll use a real JSON endpoint (https://www.jalirani.com/files/barstool.json) to fetch article data and render it in a clean list. No CSS required—just focus on the logic!

This project is a perfect real-world example of how React hooks like useState and useEffect work with fetch API to load dynamic content. By the end, you'll have a functional article viewer that displays titles, thumbnails, authors, avatars, and comment counts.

Why This Matters: From School Projects to Real Apps

Understanding how to fetch and display data from an API is a fundamental skill in modern web development. Whether you're building a news aggregator, a social media feed, or even a gaming leaderboard, the same principles apply. For instance, imagine you're creating an app that shows the latest Fortnite tournament results—you'd fetch JSON data and render it just like we do here. Or consider a finance dashboard that pulls stock prices from an API. The pattern is identical.

Step 1: Setting Up Your React Project

First, make sure you have Node.js installed. Then create a new React app using Create React App:

npx create-react-app barstool-archive
cd barstool-archive
npm start

This gives you a basic React project with a src folder. We'll work inside App.js and create a new component called ArticleList.

Step 2: Understanding the JSON Data Structure

Before coding, inspect the JSON data at the provided URL. Each article object contains:

• title: The article title
• image: An object with location and thumbnail properties
• author: An object with name and avatar properties
• comments: Number of comments
• url: Link to the actual article on Barstool Sports

Note that the thumbnail URL is built by concatenating image.location + image.thumbnail.small. Some thumbnails are GIFs—React can handle them like any image, but if you encounter issues, you can replace the GIF with a placeholder.

Step 3: Creating the ArticleList Component

Create a new file ArticleList.js in the src folder. This component will manage the state for articles and fetch them on mount. We'll use useState and useEffect hooks.

import React, { useState, useEffect } from 'react';

const ArticleList = () => {
  const [articles, setArticles] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://www.jalirani.com/files/barstool.json')
      .then(response => response.json())
      .then(data => {
        setArticles(data);
        setLoading(false);
      })
      .catch(error => console.error('Error fetching articles:', error));
  }, []);

  if (loading) return <p>Loading articles...</p>;

  return (
    <div>
      {articles.map(article => (
        <Article key={article.title} article={article} />
      ))}
    </div>
  );
};

export default ArticleList;

Step 4: Building the Article Component

Now create Article.js to display each article's details. This component receives props (the article object) and renders JSX.

import React from 'react';

const Article = ({ article }) => {
  const thumbnailUrl = article.image.location + article.image.thumbnail.small;

  return (
    <div style={{ border: '1px solid #ccc', padding: '10px', margin: '10px 0' }}>
      <h3>
        <a href={article.url} target="_blank" rel="noopener noreferrer">
          {article.title}
        </a>
      </h3>
      <img src={thumbnailUrl} alt={article.title} style={{ maxWidth: '200px' }} />
      <p><strong>Author:</strong> {article.author.name}</p>
      <img src={article.author.avatar} alt={article.author.name} style={{ width: '50px', borderRadius: '50%' }} />
      <p><strong>Comments:</strong> {article.comments}</p>
    </div>
  );
};

export default Article;

Step 5: Integrating the Components in App.js

In App.js, import and use the ArticleList component.

import React from 'react';
import ArticleList from './ArticleList';

function App() {
  return (
    <div className="App">
      <h1>Barstool Archive: Throwback Articles</h1>
      <ArticleList />
    </div>
  );
}

export default App;

Handling GIF Thumbnails

Some articles have GIF thumbnails. React displays GIFs the same as static images, so <img> works fine. However, if you prefer to avoid GIFs, you can check the file extension and replace with a placeholder:

const thumbnailUrl = article.image.location + article.image.thumbnail.small;
const isGif = thumbnailUrl.endsWith('.gif');
const displayUrl = isGif ? 'https://via.placeholder.com/200' : thumbnailUrl;

This is optional—the assignment allows substituting images.

Testing Your App

Run npm start and open http://localhost:3000. You should see a list of articles with clickable titles, thumbnails, author names, avatars, and comment counts. The data is fetched live from the remote JSON endpoint.

Common Pitfalls and Tips

• Missing dependencies: Ensure your useEffect has an empty dependency array [] to fetch only once.
• Image URLs: Double-check concatenation—missing a slash can break images.
• Console errors: Use the browser's developer tools to inspect network requests and console logs.

Going Further: Adding Search or Filtering

Once you have the basics, you can extend the app by adding a search bar to filter articles by title or author. This teaches you about controlled components and event handling. For example, you could use useState to store a search term and filter the articles array with .filter().

Real-World Inspiration: How This App Compares

This project mirrors what you'd do in a professional setting. For instance, the NBA website might fetch game scores from an API and display them in a similar list. Or a stock market app could show real-time quotes. The pattern of fetching data, storing it in state, and mapping over it to render components is universal.

Conclusion

You've now built a React app that fetches and displays articles from a remote API. You've practiced components, props, JSX, state, and HTTP requests—exactly what Cosc484 assignment 9 requires. Remember to test your data in the browser first, and don't forget to zip your project as barstool.zip for submission. Good luck!