ReactFoo Delhi

Pickyourtrail is a platform for booking fully customizable vacations and one of the important part of our customer’s vacations is providing on-trip support. We had to build a full fledged mobile app that can provide complete on-trip vacation support to our users on both Android and iOS phones. This talk is a summary of why we chose React Native as the platform for our application and the challenges we faced while building the application.

Outline

What we wanted to achieve with Pickyourtrail App

• A place to access all the trip vouchers in one place
• Set of commonly used tools but ones that is more tweaked to the customer’s trip like a language translator that has all the commonly spoken phrases on the places they visit, a weather forecast that displays the weather during different stages of the trip etc.
• Fast and easy access to our 24 hour travel concierge
• Providing them with quick suggestions to places nearby based on their current location.
• An intelligent trip feed which automatically provides the vouchers or information the customer will need immediately on the top of their application home page.
• A trip journal in which the users will log their experiences (along with the images they captured during the trip) and can publish them to share it with their friends or family at the end of their trip.
• Finally handling all the above features in scenarios such as low network coverage or no network coverage. (Making the app work offline)

The application architecture

• The application is built with React native and we will also ensure we are up-to date with the latest React Native releases
• The application state is managed with MobX and we have good case study on why we chose MobX instead of Redux
• The application uses encryption to store sensitive information such as the JWT session tokens
• The app animations are built with React native Animated API which provides animations at 60fps
• Firebase push notifications are enabled in the app to send timely notifications
• Making intelligent use of Webview to build some of the interesting UI components such as a rich text editor for our Journal.
• React Navigation is used for managing screen transitions and screen animations
• All the UI components are built to be completely reusable with the help of Storybook

Currently the application is available for download at Play Store and App Store and we have our customers using the app during their trip. We are actively collecting feedback from our users and so far received many happy reviews.

This talk will focus more on how we achieved all the native functionality on our app and how we kept the performance consistent despite the number of features we keep adding to our app.

Requirements

None

Speaker bio

Dani Akash is a React Developer at Pickyourtrail. He is working on the mobile team to build the Pickyourtrail mobile app. He loves Javascript and has published a book “Javascript By Example”. He is an active member of many Chennai javascript communities and is actively giving talks on various Javascript and React topics.

Links

• https://github.com/DaniAkash
• https://pickyourtrail.com
• https://play.google.com/store/apps/details?id=com.pickyourtrail&hl=en_IN
• https://apps.apple.com/us/app/pickyourtrail/id1400253672