Quotably

Quotably

  • Category: Mobile Apps, Creative, Experimental UI
  • Project date: 01-2021
  • Project URL: Apple App Store

Quotably

In the never-ending quest to keep relevant in the web development world, we often find ourselves stepping through tutorials or reading articles on emerging technologies.

We like creating mobile apps, but the tools of our trade had progressed and changed significantly in the past few years, and it was time to refresh our knowledge. Learning new stuff is great, but it doesn't stick unless you use it.

Quotably was born from the need to apply new knowledge with the desire to create something - no clients, no expectations, no creative brief, no deadline. Just create it and use the most up-to-date tools available.

Concepts

Initially a learning project, the focus became clearer as we progressed. Covid was in full swing, the news was always terrible and general mental health was fragile. Whatever we would come up with should maybe help divert attention or perhaps help break patterns of negative thinking. From this directive, Laphona formed these basic concepts:

  • Inspire and disrupt through cognitive dissonance
  • Mash together random high-quality content with high-quality imagery just to see what happens
  • Extend the concept of text/image combinations to allow for quote bubbles and cells (like a comic strip)
  • Give the user full control to create these mashups with infinite possibilities
  • Allow users to share their creations directly to social media or through our own in-app gallery

Challenges

The challenge initially was to use new tools to realize the concept - but from a tech perspective, there were a few goals that were important from the outset:

  • Learn the latest versions of Angular and Ionic
  • Learn new technologies and grow our skill base
  • Make this a serverless implementation - no back end!
  • Utilize modern (and hopefully free) services as much as possible

Results

Free!

In the end we accomplished all of our goals. The only money spent in making this project was the Apple Development License, which we already had. The authentication and database management system is courtesy of Firebase, which has a free tier. The unlimited stock photography is a gift from Unsplash, a fantastic service which delivers a constant stream of user uploaded professional-grade photography. The image storing service is AWS S3, which although isn't completely free, is pennies a month. S3 also hosts our static website, quotably.xyz. The extensive quote database was assembled through free APIs and a custom web scraping tool we developed.

More tools for the toolbox!

So many aspects of this project were new and exciting to us

New skill: Free Push Notifications!

For the mobile apps we've developed in the past, push notifications were a bit pricey. For starters, we would create an back end ecosystem to schedule, modify and integrate with a provider. Then we'd pay the provider a monthly fee for the service. With this app, we found the delightful Firebase push notification service. We engineered a way to manage push notifications at the app level and then created a scheduler to deliver the 'Quotably of the Day' each morning to our audience. Because we needed to run a backend service for this, we created a very lightweight system to comb our 3000+ quotes and pick one at random daily.

New skill: Angular 10+

For starters, this was our first Angular project since that team threw away their initial brainchild AngularJS and replaced it with a complete rewrite - in a new language. Long hours of web classes and online tutorials gave us shiny new skillsets: Typescript, Reactive programming and component architecture to name a few.

New skill: Ionic 5/Capacitor

Our previous mobile apps had been written in Ionic 1, which used the now defunct AngularJS framework. Additionally they used the Apache Cordova framework for native mobile app functionality. With the advanced features afforded to us with Ionic 5, we were able to make our app completely PWA compatible using Capacitor instead of Cordova, while leveraging the more robust functionality of Typescript vs Javascript.

New skill: NO_SQL

Our previous experience in mySQL had almost no bearing in the land of NO SQL - and had to be unlearned/set aside for this adventure into Firebase's NO_SQL database service. We thought there might be some crossover, but no - this was a total rethink. The NO_SQL approach looked simple enough though - everything stored in objects in a completely flat structure. However, to stay in the free tier, we had to absolutely minimize the amount of data that was passed, and the number of times we accessed it. It's easy to suddenly run into a quite expensive back end if you don't architect and optimize your transactions. We had to go through multiple iterations before we came upon the paradigm that would enable us to manage a good amount of data at minimal costs.

New skill: Mobile app creative UX/UI

The Quotably app has some creative abilities allowing users to manipulate imagery and quotes in a variety of ways. We wanted to learn how to pack loads of functionality into a tiny space, while making everything as intuitive as possible. This meant a constant reduction of interface elements and an increasing reliance on natural user behaviour. The result was a beautifully simple interface, often with just a single (or no) button. Functionality is either tucked away or triggered by finger movements. And all this thoughtful execution had to reflow properly for Android and iPhone - for regular phones, phablets and large devices.

New skill: Static Web Hosting - Free!

While it's possible to host tiny websites for free on tiny servers in AWS, eventually that free tier will expire and you'll be paying monthly. Even still, you're stuck in a tiny server with tiny resources. We wanted to learn how to host in the S3 environment - 100% uptime with great performance at pennies per month. While this wasn't technically difficult, it was eye-opening and led us to our current adventures in headless CMS's and static websites.

Reception

Shortly after launching, we conducted a handful of interviews to find out what could be improved upon. We got some great feedback and are currently working on version 2.