GNR Comparo

Compare your run with the Great North Run! See how far through you got. Which of your local landmarks match up to iconic things on the route? Maybe passing the corner shop is like crossing the Tyne Bridge? This app was built to help the Team 40x40 runners train and raise money for the GNR 2019.

It’s built with Laravel & Vue. I’d been using these for work and enjoying the mix, and wanted to try it out for prototyping a brand new app from scratch. It has loads of project generation scaffolding to get something up and running very quickly. This current version does not make that much use of Laravel itself, but nonetheless the process seemed worthwhile: I got server-side routing and webpack for free and it’s nice knowing there’s flexibility to do other stuff in future. It can always be stripped back when I know what if anything will be added to the app.

I deployed it on Google App Engine (PHP7 standard environment) because:

  • it has a generous free usage tier (in the standard environment)
  • it provides a handy domain name
  • I use it already for Simon Likes Maps with the Python2.7 runtime and I wanted to try out the PHP runtime

And I’ve made it open source so you can dig into my code to have a close look at my work.

Try it out here: http://gnrcomparo.appspot.com

Technology

It uses:

  • Laravel, a bit heavyweight for an app this simple, but very useful scaffolding for rapid prototyping
  • Client-side libraries: VueJS and a selection of packages from NPM
  • Server-side libraries: Laravel and a selection of packages from Composer
  • Map tools: OpenLayers5 for map rendering
  • Deployment: Google App Engine Standard Environment / PHP7 runtime / Google Cloud Build
  • Versioning: git