Building CardMedic in 10 days

shots

Earlier this month Rachael Grimaldi, a local NHS Anaesthetist, reached out via WiredSussex; she had created a series of communication flashcards for frontline teams struggling to communicate behind PPE, which she'd made available at cardmedic.com (a neat little SquareSpace site). The site was proving popular but her biggest challenge was users often having no internet connection and so she was looking to develop an app. At the same time, my work had slowed down with various jobs for travel companies and festivals cancelled, I was also feeling pretty glum about the current situation so this seemed a good solution all around, so I through my hat into the ring and got started.

It felt like about two months work. For obvious reasons Rachael wanted it pronto, ideally in about a week.

Getting started

Kid's dumped in front of the TV, on Saturday 11th April, Rachael and I had a long chat and mapped out what an MVP looked like and what we would want to add after that. The key features in the MVP were:

  • Multilingual
  • Text to speech functionality
  • Ability to upload a profile image and some basic details that could be displayed to give a warmer welcome when carers faces are hidden behind PPE
  • Ability to quickly search Flashcard

This all felt do-able, so the next couple of days were spent clearing the decks, before on Tuesday 14th, I set to work.

R & D

Turning the project around in the timeframe was only possible because Rachael and her tech savvy husband Tim were incredibly trusting. They either had no interest in the tech stack, or were happy for me to do whatever I wanted to get the product out there, either way the backend was always going to be built in Laravel and the front end was React Native using Expo.

spec

What a card looks like was pretty obvious from the outset, it had a title, body, audio file and slug. The first challenge came in deciding how to handle translations. I've got a shocking memory, but I don't think I've every developed anything multilingual, after a bit of reading, I wrote a very basic spec on APIARY which you can see here.

As well as giving me something to work towards when working on the backend, it also gave me this mock endpoint I could use when building the mobile app.

The Back-End

Laravel, Laravel, Laravel!

Using Laravel's auth scaffolding and Eloquent, within a day, the basics of the backend were in place. Users could add, edit and update cards and the corresponding categories. After another day I'd set up jobs to carry out the following tasks:

  • Importing the SquareSpace export
  • Creating translations (via the Weglot API)
  • Creating audio files (via SiteSpeaker)

Hat tip to both Weglot and SiteSpeaker who have provided unlimited access to their services free of charge!

Once sorted, the API was deployed to Digital Ocean (who are providing host free-of-charge as part of their COVID-19 support) and Forge made the process of provisioning and deploying as well as scheduling and managing jobs super-simple.

The Apps

CardMedic is built using React Native. I used Expo as this allowed rapid prototyping and distribution (Rachael is in America at the moment and uses an Android).

In 2020 I'm trying to get into TypeScript, and given the speed at which this app needed to be built, type-hinting provided a huge safety net.

The app uses React Navigation for routing and navigation and Redux for state management.

The UI is really basic, but UI Kitten provides a few components. In hindsight, I regret this as this prevented React Native Web from working. (Apparently this can be resolved but only through Babel which I didn't have time to set up).

The web app isn't live yet, but it's built using Vue.JS and injected straight into the SquareSpace template.

The Launch

The app was submitted to the App Store at 1.30am on Friday morning on my developer account as there was a delay in getting a DUNS number for CardMedic. By 7.00am it was rejected with one of those rejections that feels final:

Screenshot-2020-04-27-at-08.33.21

After an hour of complete panic and breakdown, I re-read the rejection notice and it felt like it would be worth resubmitting on a CardMedic developer account. We managed to get a DUNS number and got a developer account approved. The app was resubmitted at about 8pm on Friday evening along with a load of notes around Rachael's credentials and details of the support we've received from the Department of Trade and Industry and by midnight the app was live.

Overnight on Saturday, the Guardian and a number of other national newspapers published an article about CardMedic. We got a stack of traffic and the app really feels it's getting some momentum.

Screenshot-2020-04-27-at-09.21.44

Ten days from the first line of code, to the app being in the App Store feels good, but sitting on this side, it wasn't crazy; truth be told there was a load of other client work I had to do in there. It's possible because tools like Laravel, Forge and React Native are so good.

Next Steps

Next up:

  • Google Playstore Review is taking a long time, and there is no process to expedite an app review.
  • The web app needs a load of work. Injecting into SquareSpace is cool, but feels unsustainable. Ideally, I think I might strip out a few dependencies from the mobile app and use React Native Web.
  • Rachael has a load of features she wants to add. Before doing this I really want to tighten the type hinting in React and maybe write a few basic testing for both the front and back-end.
  • To improve accessibility we're going to add illustrations to the flash cards
  • The translations are all machine-generated. We're trying to hunt down a partner that could provide better translation services.

If you feel you can help on any of the above please email hello@amillionmonkeys.co.uk

Show Comments