Launching a timely Covid Travel app over a weekend. This is how I did it.
I couldn't find a source to search for country travel restrictions *and* Covid case data in one place. So, I made it.
Posted on Aug 10, 2020
Where could I go?
What would be the lazy way to get all this information at once?
Scoping the project.
That's right, I scope-creeped myself before I even started work.
For brand and product owners.
- Deliver a branded experience and high SEO.
- Structured and useful information at-a-glance.
- Lightening-fast to load, easy to install, and
- Engage people with great PWA experience.
For the coders.
- I went with JAMStack to launch this project quickly. Public APIs for global Covid data.
- Scraping for travel advisory data.
- Python, Pandas, and BeautifulSoup custom API.
- React + Gatsby frontend for UI and data visualization.
Make it simple.
Getting pandemic data.
First, I did a little research to find a reliable source of Covid data. It turns out the folks at Postman have a good resource page for Covid APIs.
Using Postman, I tested many data sources and found covid19-api.org to be reliable, up-to-date, and more importantly, a global source.
The travel advisory data.
The app needed a source for country and government-specific travel requirements and advisory information. I couldn't find a reliable, single-source, but our friends at Kayak.com have a page dedicated to travel requirements that they seem to update daily.
So I thought, "I'll simply scrape that page, format the info, then save as a JSON file."
Structuring the data.
- BeautifulSoup to scrape the Kayak travel restrictions page,
- Pandas to format the incoming data into a usable DataFrame,
- RegEx to filter and recognize language and patterns to identify important travel information, such as quarantine requirements, closed countries, and destinations restricting travel from specific countries,
- Compare, catalog, and highlight country-specific information that has changed, and
- Write the data to structured JSON and save it to disk.
Setting up a simple API.
Pleased with the results, I called it a day to hang out with Astro.
We went to the local pub for dinner and a pint, knowing I'd be on a fast-track to getting on with the React frontend the next morning.
Bright and early, Sunday morning.
Back to simple.
UX/UI and data visualization.
For another of my side projects, I had created a design system for data visualization cards which I was pretty happy with. So using that as a model, it was straightforward to apply a similar design style to the Covid Travel app.
I like shortcuts. There's no reason to reinvent the wheel when it's already done-to-death and the code is available.
1. Suggest-as-you search.
2. React-Spring animation to add a "native-feel".
I'm a big believer in modern websites feeling and behaving like native apps, as much as possible, on mobile phones.
Using animations for a "native-feel" is engaging for users. You can find the article about it here.
More so, I was thinking about the interaction, experience, and usability of the app. For the Covid Travel App, I used animation to move UI elements out of the way when the keyboard slides up on mobile.