Dayfold

What I Built

• Scroll-driven radial wheel mapping scroll position to rotation angle in real time, with a debounced snap timer that settles on the nearest event once the user stops scrolling
• URL as canonical state: month and day encoded in search params via a custom useTimelineDate hook; out-of-range values are auto-clamped to valid calendar dates on parse
• TanStack Query v5 with staleTime: Infinity and composite query keys [lang, month, day] — no re-fetch on re-render; a language switch triggers a targeted cache invalidation rather than a full reload
• Wikimedia On This Day feed API responses mapped into typed TimelineEvent[] models sorted ascending by year, decoupling the UI entirely from the upstream schema
• 11 UI languages via i18next with browser locale auto-detection; the Wikipedia content language is stored separately in localStorage, allowing the UI language and article language to differ independently
• Concerns isolated in custom hooks: useTimelineDate (URL state), useOnThisDayEvents (data layer), useTheme (document class sync and persistence)

How It Works

1. 1On load, useTimelineDate reads month and day from the URL and clamps them to a valid date; today is used as the default.
2. 2useOnThisDayEvents queries the Wikimedia Feed API via TanStack Query — results are cached indefinitely and keyed by [lang, month, day].
3. 3The radial wheel renders the sorted TimelineEvent[] as arc segments; scrolling rotates the wheel and a snap timer settles on the nearest item.
4. 4Selecting a segment reveals the event card with title, year, excerpt and a link to the Wikipedia article.
5. 5Changing language re-keys the query, fetching the Wikipedia edition in the new language while the previous data stays visible during the transition.