RaceHero brings everything about racing to your pocket in a fun and social way. Whether it is race schedules, live timing, tracking or analyzing the data, it all can be done in RaceHero.
RaceHero covers live races. It displays and updates racers’s position in real-time. Deep dive into the completed laps data with just a few clicks. Track and find more about the racers by tapping on their profile information.
RaceHero generates charts for each race which helps explain what actually happened in the race. Lap time and position charts help in looking beyond simple finishing position and show how each racer attacks and defends to earn their finishing position.
In addition to the live races, users can look into statistics of already finished races. The app shows lap-wise performance of each racer and key stats like best lap timing, time taken compared to the winner, positions gained. The app uses trophy icons to show additional analytics like Hard Charger, Fast Rabbit, Flag to Flag Victory etc. Users can share these results on social media very easily.
Schedule helps users keep track of upcoming races, participants and their past performances.
When RaceHero approached BigBinary to build the mobile app, they already had the web application up and running. They wanted the mobile app to be up and running quickly. Most importantly after the mobile app is live, they did not want to make changes to the mobile app for every little change they make on the web pages.
RaceHero web application was already built with responsive design. So the application looked great on mobile browser. The task for us was to reuse the already built HTML pages so that every change in the page does not require a similar change in the mobile app.
We decided to use WebView to render the HTML pages from the server. In this case any change on the server will be reflected on the mobile without requiring any code change on the mobile app.
Now we needed to decide if we would use Objective-C for iOS and Java for Android development. Or we could use up-and-coming React Native. After much debate and discussion we decided to use React Native since it was maturing really fast. React Native enabled us to do maximum code reuse and with the same code base we could build both iOS and Android apps.
We decided to keep navigations as native components. This was needed because without the navigational components being native, when the page is refreshed using WebView then the navigational components disappear for a while until the page is fully reloaded. That's not a good user experience.
Now that the navigational components are done, we let WebView load the main content. Since the web pages were already mobile responsive we did not have any problem there.
We were able to do development, QA and getting the app in the app store all in three weeks. Since its release we have received good feedback from the users. We had to go back to the web app to make some performance tuning so that the pages render fast on the mobile app. After the tune up everything looked great.
If you like what you see then you can see it in action too.
Check out Racehero in