FX Checker using Next.js, styled-components, SWR & Recharts

What are you most proud of, and what would you do differently next time?

Most proud of the API layer — the Frankfurter v2 endpoint returns a raw JSON array instead of the keyed object most examples show, so I had to reverse-engineer the response shape from the OpenAPI spec and write custom fetchers for each use case (single pair, multi-quote ticker, history range). Getting that working cleanly with SWR's de-duplication and 60s polling felt solid.

Next time I'd set up the API client and verify all endpoint shapes before building any UI, rather than discovering breaking changes mid-build.

What challenges did you encounter, and how did you overcome them?

The biggest challenge was the Frankfurter v2 API being a silent breaking change from v1 — all the community examples and docs use v1 endpoints that return 404 on v2. I read the OpenAPI spec at /v2/openapi.json to map every renamed endpoint and changed response shape, then rewrote the data layer from scratch.

A second gotcha: styled-components with Next.js App Router doesn't support the old _document.tsx injection pattern. I had to implement a ServerStyleSheet registry using useServerInsertedHTML to prevent a flash of unstyled content on first load.

What specific areas of your project would you like help with?

I'd love feedback on the accessibility implementation — specifically whether the currency picker modal, tab panel switching, and live rate announcements (aria-live) are wired up correctly for screen readers. Also open to feedback on the SWR data-fetching strategy and whether the hook structure could be simplified.