Technical specification
Ooga is a payment platform for merchants and consumers that lets users fund their account with a credit card or bank account and use the funds for payments and transfers. Three apps were built for Ooga: a consumer web app, a consumer mobile app and an administration app. All of them run on Angular 6 and use a REST API server built with the LoopBack framework. The consumer app includes screens for login/register, profile settings, payment methods, wallet, transactions, shops, send money, request money, pay shops, QR code scanning, deposit/withdraw money, etc. The administration app is built for overseeing and managing user accounts, transactions and merchants.
Responsibilities
I was responsible for building the entire frontend of both web apps and the hybrid mobile app, which entailed:
- Converting the design files to HTML/CSS
- Design and architecture of Angular applications
- Design and architecture of Ionic application
- Internationalization (i18n) support for 6 languages
- REST API integration
- UI/UX improvements
Assisted in backend development by working on implementation of new features and designing new data models using LoopBack.
Challenges
The first challenge we encountered was designing and architecting the base structure of the application. With 50+ screens, Angular was the perfect choice for future growth and maintainability. Angular CLI and lazy loading modules made this a whole lot easier by allowing us to separate the app logic by modules (per feature). One of the biggest challenges during development was internationalization (i18n) of the app. Ooga currently supports 6 different languages (English, Hebrew, Arabic, Russian, French and Turkish). We solved this by utilizing the @ngx-translate library (for both web and mobile) that allowed users to change language at runtime by loading JSON translation files in the background. Angular Material components helped with adapting most of the UI to both LTR and RTL languages on the web.