RockApp PWA

RockApp Progressive Web App

The converting of a published rock climbing guidebook into an offline capable mobile application.

Overview

While out on a climbing trip to Montagu, I met Tony Lourens who is the publisher of multiple rock climbing guidebooks. In his guidebooks he lists many of the climbing routes in and around the Western Cape. Accompaning these routes are the grades, length, first ascents and other details describing these routes.

As with the development of new areas to climb at and the multitude of new routes opening, the need for an app became more prevelent. So Tony and I partnered up to create this app, he provided the content and I built the app.

  • Year: 2021
  • Agency: Private
  • Scope: PWA (Progressive Web App)
  • Tools: Firebase, React, Gatsby
Visit Website

Challenge

The first problem I needed to solve was to build an app with offline capabilities, this presented unique challenges due to the reliance on internet connectivity.

One major hurdle was to implement efficient caching mechanisms while still ensuring users can access and interact with essential features even without an internet connection.

The second obstacle I faced was to convert the existing data from a book format to a digitil representation. Written paragraphs are easy but each rock climbing area has a photo or topo (diagram of routes indicating where the routes start and finish) which presented as more of a challenge.

RockApp - Progressive Web App
RockApp - Progressive Web App RockApp - Progressive Web App
RockApp - Progressive Web App RockApp - Progressive Web App

Solution

For my technology stack I decided to use Firebase, React and Gatsby. Firebase is used not only as the authentication provider but also as the data storage platform. I know React quite well, so this was an easy choice but with the addition of Gatsby I was sure I could harness the power of page caching effenciently.

SVG paths of the topos and routes were extracted from the print-ready Illustrator files and were saved straight to the database. This was done to give me the means of adding new routes easier in the future.

RockApp - Progressive Web App
RockApp - Progressive Web App
RockApp - Progressive Web App
RockApp - Progressive Web App

Results

Super stoked with the end result. The tech stack I chose is perfect for what I needed to accomplish. React is the main driving force behind gathering the data from Firebase and displaying the contents on the front end, but it was Gatsby's offline caching techniques that helped me create static HTML pages instead of trying to make a request on every page load to still give the user a pleasant (and offline) experience.