XKCDY

main screen of app

In the summer of 2020, I decided to learn Swift & SwiftUI by making an app. I set the end goal as a fully-featured app for xkcd, since it seemed relatively small in scope (at the time) and the previous open source xkcd app had issues that annoyed me whenever using it. (The previous app is no longer maintained; otherwise I would have contributed to it instead of creating a new one.)

In addition to the app, I wrote a simple backend API for it that automatically scrapes xkcd to retrieve comics and notifies users when a new comic is available. I planned to write the API in Swift using Vapor, but had to switch to Typescript due to poor performance with the default database driver.

Design

iPad view

When designing the app, I tried to keep UX principles in mind. For example, the main actions for most screens are located at the bottom; where it's easiest to reach with your thumbs. On bigger screens, like iPads, the button bars automatically resize to provide a better experience. Since this was a side project and I had no deadline, I always prioritized polishing exising functionality to perfection instead of adding new functionality.

I choose a waterfall layout for the main view instead of having a list (like a few other xkcd apps do) as it's more enjoyable to use when casually browsing. The app makes heavy use of gestures: the waterfall view is scrollable, action sheets and comics are dismisable by swiping, and comics can be zoomed by double-tapping.

I made the intentional decision to integrate XKCDY with iOS-specific features as much as possible. As a result, the app supports:

  • 3 different homescreen widgets (introduced in iOS 14)
  • Custom automations via the built-in Shortcuts.app
  • Opener, a popular way to open native apps from the web browser

Problems Encountered

swipe animation

After learning the basics of Swift and SwiftUI, the single hardest part was getting the transition between the waterfall layout and the swipable detail view just right.

I tried to model the transition after Photos.app. Although SwiftUI 2.0 in iOS 14 introduced some new features that would have made this much easier, I had to make this transition from scratch. Syncing the position with the finger position, the comic position, and the waterfall layout (and for every orientation) was difficult but the end result works well.

Results

After going through a long App Store review process, XKCDY finally became available in August. I made a few posts about it, but by far the most traffic-generating post was a submission to /r/apple.

Today, XKCDY has close to 4k downloads and generally favorable reviews. I'm very happy with how it turned out, and hope to do more iOS apps in the future.

return to home