🚀 New React Challenge: GitHub Contribution Heatmap

Fetching data in React without a library means juggling useEffect, abort controllers, isLoading booleans, error state, and cache invalidation — all by hand. SWR, TanStack Query, and RTK Query solve all of that out of the box. This challenge has the grid and components pre-built — your job is to wire up SWR and bring the GitHub-style heatmap to life.

---

🧩 Overview

Fetch contribution data for a GitHub-style heatmap using SWR. The grid and components are already built — you wire up data fetching with loading skeletons, error handling, and year navigation to make it work.

👉 https://www.reactchallenges.com/challenges/github-contribution-heatmap

---

✅ Requirements

• Fetch contribution data from https://example-heatmap?year={year}
• Write a custom fetcher that checks res.ok, parses the error body, and throws on failure — SWR won't know a request failed unless the fetcher throws
• Display a loading skeleton while data is being fetched
• Display an error skeleton with the server's error message when the request fails
• Display the heatmap grid with flattened contributions on success
• Allow switching between years (2023–2026) with interactive buttons
• Highlight the currently selected year button
• Calculate the offset so January 1st aligns with the correct weekday column

---

💡 Notes

• contributions is a 2D array (weeks × days) — flatten it with .flat() before passing to HeatmapGrid
• The mock API has a random 300-500ms delay and fails ~20% of the time
• The custom fetcher pattern is universal: SWR, TanStack Query, and RTK Query all require you to throw on non-ok responses
• The data is from Linus Torvalds' real GitHub contributions — every cell reflects actual commits, merges, and pull requests

---

🧪 Tests

1. Renders the app title
2. Shows skeleton while loading
3. Displays heatmap grid with contributions when data loads
4. Shows skeleton with error when request fails
5. Highlights 2026 as the selected year button
6. Fetches new data when switching to a different year
7. Aligns January 1st to the correct weekday for each year

---

Whether you're new to SWR or already using TanStack Query, this challenge reinforces the fetch-then-render pattern that every production React app relies on. Plus, you get to see Linus Torvalds' actual commit history rendered as a heatmap — pretty cool.

🔥 Start the Challenge Now