Overview
Currencee is a user-friendly and reliable currency converter app designed to provide seamless currency conversion operations. With Currencee, you can effortlessly convert top leading currencies like USD, GBP, EUR, INR, and many more.
Powered by the CurrencyBeacon API , Currencee supports over 161 world currencies covering 99% of all UN-recognized states and territories.
Technologies
Features
Originally built two years ago when I first learned HTML, CSS, and JavaScript, Currencee initially supported just 5 currency pairs and had limited API allowance of 512 conversions per month. With the recent updates and rebranding, here are the current features:
- Over 160 currencies available for conversion
- Modern tooling in React and CSS
- Implemented an API proxy using Node.js/Express to secure API keys and provide endpoints for fetching currency data.
- Cross-browser compatible across numerous devices.
Development and Challenges
I find it is easier to focus on solving problems when the flow and design is ready, so I always start with a Figma prototype. Currencee was no exception. Here's what I designed:
You can view the complete design posted on Dribbble .
Cross-browser Compatibility Issue on Safari
While building Currencee and making it responsive was relatively straightforward, older versions of Safari presented unique challenges. The responsiveness was completely off, with elements stacking incorrectly. Initially, I used CSS Grid for the layout, but upon discovering that older Safari versions (3.2 - 10.2 specifically) lacked support , I switched to Flexbox. However the issue persisted due to Safari's need for specific CSS vendor prefixes.
Setting up Autoprefixer
To address this, I turned to Autoprefixer , a post-processor plugin used to generate vendor prefixes for CSS properties. Autoprefixer was essential for resolving cross-browser compatibility issues, particularly for Safari. It generated the necessary prefixes for Flexbox and other properties to make the UI responsive.
Integrating Autoprefixer in a React(Vite) project also posed some challenges. After extensive research, I found that adding the appropriate browser support list to the package.json file was crucial. Here's what the snippet looked like:
package.json
{
...,
"browserslist": ["cover 99.5%"],
...
}
Additionally, running npx browserlist verified the list of supported browsers.
Conclusion
Building Currencee was a rewarding experience that enhanced my understanding of development. Overcoming challenges, such as ensuring cross-browser compatibility and configuring Autoprefixer, helped me discover valuable tools and techniques. I'm excited to share more about the development process in a later article.