FX Checker — Full-Stack Foreign Exchange Currency Converter

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

I'm most proud of the full-stack architecture: a converter backed by a real database, user authentication, and rate alerts that work across devices. The design token system and theme toggle were also satisfying to build properly, from first principles with OKLCH colors and clamp-based responsive sizing.

Next time I'd start with tests from day one instead of leaving them as the "last thing." I'd also pick a paid FX API or an alternative earlier to avoid discovering the Frankfurter single-point-per-day limitation halfway through building the 1D chart.

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

Three stand out:

1. Bidirectional URL sync — Keeping the converter state and URL search params in sync (and handling collisions when from === to) took more iteration than expected. I solved it with a dedicated hook that debounces writes and handles SSR safety.

2. Local-to-server state reconciliation — Merging localStorage (instant, offline) with server state (persistent, shared) had edge cases around ordering and conflict resolution when signing in mid-session. I ended up using an upsert pattern with server timestamps as source of truth.

3. FOUC on theme toggle — The flash of unstyled content on first load was solved by an inline script in the root layout that runs before React hydrates. The ThemeToggle component then takes over post-mount.

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

• Testing strategy: I have zero tests. What would you prioritize first — unit tests for the custom hooks (SWR, theme, URL sync) or E2E tests for the main converter flow?
• Architecture feedback: I chose to keep all mutation logic in hooks and separate API routes. Would something like tRPC be worth it for a project this size, or is the extra complexity not justified?
• Accessibility: Lighthouse gives me 98-99 on accessibility. The heading order issue (an <h3> "SEND" label without a preceding <h2>) is known. Anything else I should fix?