Making the React Native Conference App in React Native

An Adventure of Open Source for the Chain React Conference

We’ve got a design team… wait… reset. We’ve got a great design team. A few months before the Chain React Conference, we were ready to “bust out” a conference app. Rushed to start and were instantly told to stop. Our design team pulled a virtual fire alarm.

“You know you can’t half-tell a story, and expect people to be happy” — Everyone who ever watched the TV Show “Lost”

They were right. We decided to do our client process, but this time for ourselves. The conference app went from a nice-to-have, to an actual project on our work schedule.

Simply put, it was one of the best decisions we could have made.

We started the same way as when we planned the conference; with the feeling we wanted for our attendees. From there, we got a lucid roadmap of what it is were going to build.

From vision the path is easy

Following the steps of our process, our design team pulled us back to square one. They asked the questions that any new mobile app should be thinking about: “Who is using this app?” “Why are they using it?” “What are they trying to achieve?”

After working through several rough sketches and concepts over the course of a week, our team delivered an experience. At the core, this app is all about an experience for our attendees.

Our new design featured:

Talk notifications that’ll remind you when a certain talk is coming up

Quick access to ride-sharing apps — just click the Lyft button, and we’ll take you to the app with all of the information already filled

A mini city guide that makes recommendations for nearby food, coffee, and sight-seeing

Full menus for what to expect at breakfast and lunch

Design in Hand — We Started To Code

First thing was first. React Native for iOS and Android. And not just any React Native, we used our popular CLI for boilerplates and plugins, Ignite.

Ignite CLI gave us a fantastic kick-off, with Reactotron, Redux, Sagas, React-Navigation, and Generators. We were basically there! Here’s what challenged us in implementing the design.

Challenges along the way:

Push Notifications — Why are they still tricky from platform to platform?

— Why are they still tricky from platform to platform? Blur on Android — Didn’t really work like our designers wanted.

— Didn’t really work like our designers wanted. Scope-creep is Real — We see why it’s so easy to keep adding cool stuff! At some point we said enough!

— We see why it’s so easy to keep adding cool stuff! At some point we said enough! Various phone sizes — You test on two phones and think you’re good? You know better. Beta testing with a decent population was crucial.

— You test on two phones and think you’re good? You know better. Beta testing with a decent population was crucial. Testing the Future- Serious debugging tools/flags were key for developing things that activate on designated dates and times.

Testing the future was easy with Reactotron!

But it wasn’t all hurdles; we played in some new tech, too!

Since React Native is constantly evolving, we had a lot of cool changes to consider:

Swapped out our ListView for FlatList which cleaned up code

Utilized Mobile Center for our CI, Beta Distribution, Analytics, and Crash Reporting

Swapped out our API JSON calls for CodePush, which can deliver data, images, and code updates instead

Automated iOS and Android icons from a source 1024 x 1024 image via Fastlane plugins

Automated uploading the dSYM.zip to mobile center on releases

to mobile center on releases We added TypeScript (compile in place — Christian Brevik style), mixed elegantly with JavaScript so we could do a “Go your own pace trying TypeScript” adventure!

Wow, when you look at it, that’s a lot of Microsoft Love! Right?

I KNOW RIGHT!? I’m amazed at how we found ourselves here.

All our decisions just made sense! If you think someone else does these things better, I’d love to hear about it ⚡️🦄🎉

Try the app!

Especially look at the app on July 10th-11th when the conference is active!

Here’s the code! (File bugs, add features, just peruse)

Yay open source!

Thanks to everyone who played a role in the development of the app. Here’s our git contributors list, but special mention to Justin Huskey for keeping us thinking UX, Frank von Hoven, who wasn’t even assigned to the project, but helped, and Sia Karamalegos who doesn’t even work with Infinite Red, but still helped!

Extra special mention: a conference panelist filed and fixed the bug he filed! Kudos Jani Eväkallio, you rock! 🎸🤘

To all others not mentioned, to the Founders who green-lit the project, and to the many attendees who made this all possible, thanks! We 💖 how open source brings people together, and we’ll see you at the conference!