Launching a timely Covid Travel app over a weekend. This is how I did it.

A little while ago I found myself needing to travel out of Thailand to renew my work permit. Under normal circumstances, I'd love to go on a trip. But, circumstances aren't normal.

Before Covid, living in Asia was great for traveling. It was easy to book a flight on a Friday morning and be on a beautiful beach that evening, to spend a weekend for a little more than you might spend on a night out in Singapore.

Today, every country in Asia has no-entry or strict travel policies, and most require at least a 14-day costly quarantine period. That left me to research where I can travel safely, minimize, or negate, quarantine, and be able to get back home to Thailand.

I couldn't find a single source that provided Covid-19 data, safety information, and country-specific travel and Visa requirements.

After spending a day searching through countless websites, and writing a lot of information down, I decided there must be an easier way.

I was sitting on my balcony listening to the sounds of Bangkok, and thought to myself…

Answer 1: Get someone else to do it. That's not going to happen.

Answer 2: Get technology to do it. So, I made it.

Within an hour I had mentally scoped out what I would need to make a simple app to solve my problem. Then I thought, "why not make it something other people could use?"

The requirements were clear for this MVP.

My goal was to aggregate Covid and government travel information spread out across the web for a simple interface that would help people to find critical advisory information about any destination when they need it.

All the information is out there on the web, but there isn't an easy way to search for it in a single, simple view.

That's okay for the MVP because there's only a couple hundred countries and territories to watch. Government travel requirements don't change very often--once or twice a day at most.

First, I set up a Python app as a background task that would run every 24-hours. The program is simple, but, does a bunch of things in its 137 lines of code:

Next, create an API endpoint to send the data to the frontend app to display nice data visualizations and clear information. This task was made easy with Python and Django REST Framework to set up a minimal API.

All in all, it's a very basic setup that took only a few hours of my day.

During our morning walk, I talked out what I had accomplished so far, and the next steps with Astro. He's not the best conversationalist, but he is a great listener.

I took this time to prioritize the user experience goals of the MVP. In this first round, I chose to focus on the core search functionality, rather than build in a ton of features.

It's essential for the frontend to be as simple as possible, so I decided on a minimal design style that focused on usable functionality.

I also wanted to leave room for future updates to introduce new features, like flight and hotel lookup and bookings.

I'll admit that a contributing factor to the speed of development was that, in the past, I had already made some of the fundamental UI components on other client work, projects, and how-to articles that I could reuse.

I reused the code from the three components below:

A simple component to display suggestions for country names (or anything else) as the user types in the search field.

I wanted to make the app easy to use. What better way to help people fill out a search form field on their phones than to auto-suggest terms as they type?

You can find the article about it here.

Although recent versions of iOS have better support for PWA's, there's still no built-in prompt for users to install the app. This all but defeats the purpose of an installable web app for the reason that iOS users won't know they can install it. Check it out here.

I started the project developing a SPA (Single Page App) in React, but by mid-afternoon, I changed my mind and moved everything into GatsbyJS.

I chose Gatsby because it's a simple framework that helps get to results fast. Many of the requirements for good SEO and a successful PWA are built-in. Also, page load and data access speed were high on my priorities list, so a static-generated site was the obvious choice.

Accessing the live data is done via Axios calls to the Covid19 API and the custom API that I set up the day before.

Once I had all the pieces in place, stitching it all together that afternoon was a straightforward process, leaving me with a couple of hours to test, debug, and iterate.

After several hours, I had a working Progressive Web App that collects real-time Covid-19 and global travel advisory data to display in a clean and minimal UI design.

Deployment couldn't be any easier than with Netlify. I logged in, linked the GitHub repository, and clicked. Within minutes the Covid Travel App was deployed across Netlify's CDN.

As luck would have it, covidtravelapp.com was available so I went ahead and registered the domain name, and migrated the app to its own space on Netlify. I'll get some free SEO out of that.

A quick look at Google Lighthouse provided some pleasant results. This was a rapid dev/rapid launch project, still, I managed to get some decent marks on important stats for SEO performance.

This was a good start. But, there's still a bit of work to do as I add geo-location, flight lookup, and booking functions, as well as NLP, and actionable data views.

We'll see how it goes.

I really appreciate it, and hope it was worth your time. Feel free to get in touch with questions, revelations, insults, etc.

Stay cool. Stay healthy. And travel safely!