Face Value is a currency conversion app that does things differently: instead of converting arbitrary amounts it shows you the actual denominations in the country you're visiting. It lets you think in your home currency even with a foreign currency in your pocket.
Face Value was built by Matthew Riley MacPherson and sarah ✈ semark. Both are remote-working, frequent travellers.
I saw an app that had a similar functionality while I was travelling in Brazil, but it was lacking polish and -- more importantly -- Brazilian Reais. The app was iOS-only, but more importantly didn't have open data; it was impossible for me to just send the guy the BRL data to make the app useful for me. I wound up building my own version instead.
Outside of Canada and the United States, cash is much more common. You can often use credit cards at fancier places and hotels, but your debit card will almost surely not work at point-of-sale. So you go to the ATM and withdrawal a bunch of bills. Then you end up with coins from making change. And you have no idea what they are worth.
With Face Value we draw coins and bills how they look--does a coin have a silver ring around it like the Canadian Toonie? We'll show you that. And then we say what it's worth in your native currency. I think it's an easier way to deal with foreign currency than doing the exchange rate math in your head. You start to think in Euros slowly, with the help of this app. I think that's what makes Face Value special.
And making it open source means people can add a currency in a Pull Request on GitHub and the app can be updated in a few hours instead of days or weeks. I can't cover every currency myself, but it's the perfect opportunity for crowdsourcing data.
And it's also pretty, in my opinion.
I figured doing the currency calculations would be difficult, but it turns out there are lots of APIs that will let you convert tonnes of currencies. I ended up doing the simplest thing possible: creating a cron task that runs every hour and updates all currencies relative to each other. It's a bit crude, but it's performant and really simple.
Of course, because I'm dealing with data that updates and such, I opted to use a dynamic server. I store the data in redis and use node.js to serve the data. It's actually pretty easy.
The biggest technical challenge for me was doing lightweight testing of the app and the design; I wanted the app to be bulletproof because I would use it myself while travelling and without a data connection. And I wanted a fun, whimsical design that made you feel more confident when travelling; landing in a foreign country can be intimidating. I liked the idea of the app making you feel like a road warrior who had a bit more grounding than you thought.
I ended up using casper.js to test the front-end of the app; I even built a node library on top of it to do Open Web App testing. I ran into some weird race conditions in my testing but ironed them out. I also built tests that were design-focused; currencies can be created via Pull Requests on GitHub, but the tests will fail unless there are all necessary graphics for every currency (including Retina graphics for iOS). I don't see a lot of testing like that in web programming, but I think it's an awesome way to automate some of the more mundane stuff we do in web development.
Test your front-end code! Check out sisyphus to do headless front-end testing. I'm using Travis CI because Face Value is open-source, but they have a pro version available too. It's really handy to test on a platform that isn't your computer.
And keep things simple whenever possible. I don't need to query my data in redis, so I actually just store it as a serialized JSON string. I wanted to avoid filesystem writes so I could deploy this on Heroku, but that would've also been easy.
And use a grid system and a responsive layout from the start. Making this app work on multiple screen sizes has been a pain, but grid systems make it a lot easier.
You can see the app running at http://face-value.herokuapp.com/. It works offline and can be installed as a web app on iOS, Android, and Firefox OS. You can see the code on GitHub; it's at https://github.com/tofumatt/face-value. If you have a currency that's missing, just open a pull request and send it through!
Under technical challenges, I'd actually put a link or two onto relevant phrases, like "cron task" and "store the data in redis" and "use node.js to serve"... You might also want to point to the source repository specifically.
Also link to how you use casper.js. And to sisyphus.