Title Text

What is FrogQuest?

 

FrogQuest is a high-energy game for team building which puts costume-clad teams in competition with each other to scour the city on foot making spectacles of themselves and others as they frantically compete to capture daring, interactive photo-quests with their smartphones. High score wins!

What Does That Look Like?

Antiquing

Adult in child's car seat

Stranger Bound and Gagged in the Trunk of a Car

Teammate dressed as a manniquin

Teammate flying on a broom

team in a store display bed

Eskimo kissing a stranger

MVP - Low Tech

Online Leaderboard (RWD)

Pros

  • Low tech
  • Offline First
  • Fault tolerant
  • Zero config

Cons

  • Cumbersome
  • Error prone
  • Not user friendly
  • Less professional?
  • Doesn't Scale
  • Less Ecological
  • Extra server-side work
    • One image
    • Code validation
    • Email formatting
    • Image optimization

It's Time for an Upgrade!

...enter react native

Features

  • Expo App
  • setState 100%
  • StyleSheet 100%
  • GraphQL / Apollo w/Offline Caching
  • Uses Camera & Camera Roll

Packages

  • appolo-cache-persist
  • react-native-image-gallery
  • react-native-sideswipe
  • react-native-typography
  • react-navigation
  • sentry-expo

Expo Component / APIs

  • ImageManipulator

  • ImagePicker

  • IntentLauncherAndroid

  • MailComposer

  • Permissions

  • ScreenOrientation

  • Vector Icons (Feather, Ionicons, FontAwesome, MaterialIcons)

     

RN Component / APIs

  • ActivityIndicator
  • Alert
  • Animated
  • FlatList
  • Image
  • ImageBackground
  • KeyboardAvoidingView
  • Linking
  • StatusBar
  • StyleSheet
  • Text
  • TextInput
  • TouchableNativeFeedback
  • TouchableOpacity
  • View

Mobile App Flow

App Navigation & Architecture

<App>

  • Setup Apollo Provider
  • Setup Sentry
  • Pre-cache Fonts / Images

<App>

<RootNavigation>

  • Authentication Gating
  • Login Mutation
  • Manage Auth Session
  • Register Notifications

<App>

<RootNavigation>

<EventsNavigation>

is a StackNavigator

<App>

<RootNavigation>

<EventsNavigation>

  • EventList

<App>

<RootNavigation>

<EventsNavigation>

  • EventList
  • EventTabs

<App>

<RootNavigation>

<EventsNavigation>

  • EventList
  • EventTabs
  • GallerySlider

Gotchas & Takeaways

Flexbox

Gallery

Expo Upgrades

flawless

v24 > v27

Sentry

Integrate early

Demo

Time

AMA

@geirmanc

Made with Slides.com