Overview

Currencee is a user-friendly currency converter designed for travelers, remote teams, and anyone who needs a quick rate check. It uses React for the interface and a public exchange-rate API to keep conversions current across major currencies.

Powered by a lightweight API proxy, Currencee keeps provider credentials out of the browser and normalizes exchange-rate responses before they reach the UI.

Technologies

• React with Vite for a fast development loop.
• Node.js and Express for a small API proxy that protects keys.
• Vanilla CSS, responsive layout rules, and theme variables for light and dark mode.
• Browser testing across Chrome, Firefox, and Safari.

Features

The app focuses on the core interaction: enter an amount, choose a source currency, choose a target currency, and see a clear converted value without page reloads.

• Support for more than 160 currencies.
• Instant conversion updates when amount or currency selections change.
• Modern tooling in React and CSS.
• Responsive layouts that work across mobile, tablet, and desktop.

Development and Challenges

The main challenge was keeping the interface stable across browsers while still making the converter feel polished on small screens. I started from a Figma prototype, then translated the layout into reusable input, select, and result components.

Cross-browser Compatibility Issue on Safari

Safari handled a few responsive CSS rules differently, especially around input sizing and select control rendering. The fix was to simplify the control styles, add Autoprefixer, and test the layout against real viewport widths instead of relying only on desktop resizing.

Setting up Autoprefixer

Autoprefixer helped generate vendor prefixes for CSS properties where browser support differed. After enabling it, I verified browser support with the Browserslist config.

{
  "browserslist": [
    "defaults",
    "not IE 11",
    "maintained node versions"
  ]
}

Conclusion

Currencee was a compact project with useful constraints: clean API handling, responsive UI details, and cross-browser polish. It is a good example of turning a small utility into a complete product experience.