📲Wanna Develop an App?

Published in

XP Corp

5 min readApr 24, 2021

Hey everyone!

This is Arjun from the XP Fantasy engineering team. We at XP Fantasy have a huge announcement for everyone. XP Fantasy is developing an app!

🤷 Why are we building an app? 🤷

Many of you may be asking, why is XP Fantasy building an app?

That is a great question.

There are two main reasons we have decided to take on this project: (i) better usability on mobile devices; and (ii) push notifications;

✨ Better Usability on Mobile Devices ✨

XP Fantasy currently has a full-fledged mobile browser experience. This means that users are already able to go to https://xpfantasy.com on their mobile devices using any browser and are able to do everything a user on a desktop is able do — create lineups, add friends, join groups, etc. from the convenience of their bed.

Although the website is live on mobile browsers, the power of apps come with their lightning quick speeds, always being on the user’s home screen, and being able to use a plethora of gestures which aren’t found in the browser.

By improving the mobile experience, users are better able to keep track of their lineup or their friends’ lineups. This will allow users to avoid switching tabs during a critical moment of the game, while continuing to monitor how many fantasy points they have accumulated!

🔔 Push Notifications 🔔

As a daily fantasy esports site, we run league of legends contests every single day. This means that we have a direct need to notify our users when a contest that they may be interested in goes live.

Currently we have two ways of reaching out to users for announcements. The first being our community discord and the second being email. As a power user of both discord and email, I find daily notifications from any company or individual extremely annoying. As such, we give deep consideration when reaching out to users with either of these methods.

On the flip side, although I immediately turned off Facebook’s email notifications, I continue to use their mobile push notifications without batting an eye. Due to this, our team decided that the most effective way to reach out to users is on their mobile devices. By utilizing push notifications, users will be notified of new contests immediately after they are created, and then with a single tap, be able to create their lineup.

⚙️ How are we building our app? ⚙️

From here on out, we will be taking a look at the technology stack we are using to develop the app and walk you through each one of our decisions.

As a bit of a background on app development, there are currently two methodologies to building an app. The first is to build natively for both iOS and Android separately, and the second is to use a platform agnostic framework such as React Native or Flutter.

Given that our engineering team is quite lean, we simply do not have the bandwidth to maintain three separate codebases for our website, an iOS app and an Android app. Therefore, React Native and Flutter were our clear winners.

Now came the trickier part, deciding between React Native and Flutter.

The main draw to Flutter is that from a performance standpoint, Flutter is just better — here is an article that I found helpful when comparing the performance between React Native, Flutter and native solutions. The team decided to go with React Native — because we are already using React to build our website, and our app will not have any performance intensive tasks, we decided this was the best decision for us. Furthermore, since Twitter has had success using React Native, my thought was that if it is good enough for Twitter, it should be good enough for us.

Another bonus was that the concepts between React and React Native were similar enough, which meant that we could begin building immediately.

An issue with this approach however, is that we now have to maintain two separate codebases for our app and website. This would effectively double the amount of time it would take to make any frontend changes. Imagine if we could use just a single codebase that would run on every platform — browser, Android and iOS — that would be perfect! That is when I was introduced to the React Native for Web project.

React Native for Web allows React Native’s Components and APIs to be interoperable with the React DOM, effectively allowing any React Native application to run in the browser. Therefore, by using React Native for Web, we are able to write code once and it is able to run on any platform.

Finally, as a huge skeptic, I thought that React Native for Web was too good to be true. However, once again Twitter surprised me by using React Native for Web. Again, my thoughts are that if it is good enough for Twitter, it should be good enough for us. Link: https://news.ycombinator.com/item?id=20472957.

🙄 Difficulties 🙄

Although I would like to say that everything was smooth sailing after deciding to use React Native for Web, that definitely wasn’t the case. We are currently a month into building the app, and while we were able to copy-paste a few components over from our website, we still had to rewrite the majority of the site using React Native components. The process has been long, but we are getting close to the end. Our aim is to deploy our new website and submit the app to the App Store and Google Play Store by the end of the month.

I also made a bet with our CEO, Justin, that we would have the app completed within three weeks. Unfortunately, development took a little longer than expected so I will be writing the next 3 Medium blog posts.