Let’s get practical

Exercise 1: Fetch and Display Data with useEffect

Difficulty: Easy Concepts: useEffect, data fetching, async state (loading, error, success)

Build a component that fetches and displays a list of items from a public REST API of your choice.

Requirements:

Pick any public REST API that returns a list of items — JSONPlaceholder, PokeAPI, Open Library, REST Countries or anything else you find interesting. No API key should be required.
Create a React component that fetches data inside a useEffect with the correct dependency array

Model your async state as a TypeScript discriminated union with three states:

type FetchState<T> =  | { status: 'loading' }  | { status: 'error'; message: string }  | { status: 'success'; data: T };

Render a loading message while the request is in flight
Render a meaningful error message if the request fails
Render the data as a list once it arrives (at minimum show the name or title of each item)
Check response.ok before parsing JSON and throw an error if it's false

Hints:

Don't put async directly on the useEffect callback: define an async function inside it and call it
Set state to { status: 'loading' } at the start of the effect so the loading state resets if a dependency changes
If you're not sure what shape the API returns, fetch the URL in your browser first and look at the raw JSON

Exercise 2: Search with Dynamic Fetching and Cleanup

Difficulty: Medium Concepts: useEffect dependencies, cleanup, AbortController, controlled inputs

Extend what you built in Exercise 1 into a searchable interface where the fetch re-runs based on user input.

Requirements:

Add a text input that controls a query state variable
The useEffect should re-fetch whenever query changes: query must be in the dependency array
If query is empty, skip the fetch and reset to an idle state instead of showing a loading spinner

Add AbortController cleanup so that changing the query while a fetch is in flight cancels the previous request:

useEffect(() => {  if (!query.trim()) {    setState({ status: 'idle' });    return;  }  const controller = new AbortController();  // ... fetch with { signal: controller.signal }  return () => controller.abort();}, [query]);

Handle the AbortError separately: a cancelled request is not a real error and should not update the error state
All three states (loading, error, success) plus the idle state must be handled in the render

Hints:

error.name === 'AbortError' is how you detect a cancelled request in a .catch() handler
If you're using async/await, wrap in try/catch and check error instanceof Error && error.name !== 'AbortError'
Set setState({ status: 'loading' }) before starting the fetch but after the empty-query guard, so the loading state is visible while the request is in flight
Test the cleanup by typing quickly: you should not see flickering between results from different queries

Exercise 3: Network Tab Investigation

Difficulty: Easy Concepts: Browser DevTools, Network tab, watching fetch calls, HTTP status codes

Use the browser's Network tab to observe and understand what your Exercise 2 component is actually doing over the network.

Requirements:

Open your Exercise 2 component in the browser with DevTools open on the Network tab, filtered to Fetch/XHR. Complete each of the following tasks and write down your answers in a comment block at the top of your component file:

Find a successful request — type a search query and let it complete. Click the request row and open the Headers tab. What is the full request URL? What status code did the server return?
Inspect the response — with the same request selected, open the Preview tab. Does the shape of the data match what you expected? Note one field from the response that your component is currently not displaying.
Catch a cancelled request — type several characters quickly without pausing. Do you see any requests with a (cancelled) status? This is your AbortController cleanup working. If you don't see any cancellations, try typing faster.
Trigger a 404 — temporarily change your fetch URL to something that doesn't exist (add a typo, like /userss instead of /users). What status code appears in the Network tab? What does the Preview tab show: is it JSON or something else?
Simulate a slow connection — set the throttling dropdown to Slow 3G and trigger a fresh fetch. How long does the request take according to the Time column? Is your loading state visible long enough to notice?

Set throttling back to No throttling when you're done.

Hints:

Make sure DevTools is already open before you trigger the fetch. The Network tab only captures requests made while it's open
Right-click a request row to copy its URL, which is useful for testing in the browser address bar directly

Exercise 4: Native CSS to Tailwind

Difficulty: Easy Concepts: Tailwind utility classes, how Tailwind maps to CSS properties

Convert the CSS below to Tailwind utility classes applied directly to the JSX. The goal is to produce a visually identical result without writing any CSS.

Starting point — the CSS:

.card {
  background-color: #ffffff;
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  max-width: 28rem;
  width: 100%;
}

.card-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 0.5rem;
}

.card-body {
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.625;
  margin-bottom: 1.5rem;
}

.card-button {
  display: inline-block;
  background-color: #2563eb;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
}

.card-button:hover {
  background-color: #1d4ed8;
}

@media (min-width: 640px) {
  .card {
    padding: 2rem;
  }
}

Starting point — the JSX (with CSS classes):

export default function Card() {
  return (
    <div className="card">
      <h2 className="card-title">Getting started</h2>
      <p className="card-body">
        This is a simple card component. It has a title, some body text, and a call-to-action button below.
      </p>
      <button className="card-button">Learn more</button>
    </div>
  );
}

Requirements:

Remove the CSS classes entirely: no values inside className that reference a stylesheet (make sure you have empty className attributes so you can fill them with Tailwind utility classes)
Apply Tailwind utility classes directly to each element so the result looks the same
The responsive padding change (sm: breakpoint) must be included
The hover state on the button must be included
Do not use arbitrary values (w-[28rem]) where a built-in Tailwind class exists: look up the closest match in the Tailwind docs

Hints:

Work element by element: convert the card container first, then the title, then the body, then the button
Tailwind's spacing scale: p-6 = 1.5rem, p-8 = 2rem, mb-2 = 0.5rem, mb-6 = 1.5rem
text-gray-500 is #6b7280, text-gray-900 is #111827, bg-blue-600 is #2563eb, hover:bg-blue-700 is #1d4ed8
max-w-md = 28rem (Tailwind has named max-width sizes worth looking up)
After converting, open the browser and compare your result side by side with the original CSS version to check they match

The HackYourFuture curriculum is licensed under CC BY-NC-SA 4.0 *https://hackyourfuture.net/*

CC BY-NC-SA 4.0 Icons

Built with ❤️ by the HackYourFuture community · Thank you, contributors

Found a mistake or have a suggestion? Let us know in the feedback form.

Week 6

Let’s get practical

Exercise 1: Fetch and Display Data with useEffect

Exercise 2: Search with Dynamic Fetching and Cleanup

Exercise 3: Network Tab Investigation

Exercise 4: Native CSS to Tailwind