DemoFrontend implementation

currency converter

A responsive currency conversion interface using live rates and reusable React state patterns.

LiveSource
Currency Converter

Problem

Currency conversion needs fast input feedback, clear rate state, and a layout that remains usable on small screens.

Architecture

  • React components manage amount input, selected currencies, and conversion output.
  • Custom hooks encapsulate rate fetching and derived state.
  • Tailwind handles responsive layout and visual states.
  • External rate data powers real-time conversion behavior.

Key decisions

  • Moved fetch logic into a custom hook so UI components stay focused.
  • Kept controls compact for mobile use.
  • Used responsive styling instead of separate mobile views.

Tradeoffs

  • Live exchange data improves usefulness, but the UI needs loading and failure states.
  • Client-side conversion is fast, but rate source reliability controls the quality of results.

What I learned

  • Small frontend tools are a good place to practice state boundaries.
  • Responsive forms need spacing and control sizing as much as layout breakpoints.

Stack

ReactJSHTMLTailwind CSSCustom HooksResponsive DesignReal-time Data
Open project