From Start to Finish

Idea/Research

I had an idea, I just needed research to support it. I just googled, “how to determine snowboard size” and found several sources such as Burton, Evo, The House, Backcountry, proboardshop, and Tactics that had pages on their sites describing several factors that went into determining one’s board size. Some pages even had sizing charts — perfect!

A challenge I faced at this stage was deciding which sizing chart to follow. They were all different enough for me to have to come up with my own. So with some help from my experienced snowboarding friend, I carved out what we thought were the most important bits from several sources and created our own formula.

Design

I’m not exactly a designer, so I needed some ideas to get inspired. If only there was a site where I could browse interesting things that people have pinned… 😉

I enjoy simple and efficient layouts. When I make edits, I want to see results instantly, and I assume I am not the only one. Therefore, I decided to contain my user-input component in the same screen as the result component. What I mean by that is that the user doesn’t have to navigate to some other screen to make edits, then navigate to another screen to see the results of his/her inputs. Simple. Of course, if the app were more complex, then it may make more sense to organize certain functionality into separate screens. That’s a use-case decision.

“A user interface is like a joke. If you have to explain it, it’s not that good.” — Martin LeBlanc of Iconfinder

Once I had my layout determined, deciding on a color scheme was next. Since it was a snowboard app I thought whites, blues, and maybe greens(thinking of snowy mountains with trees) would be fitting. I found a nice color scheme here.

Develop

As I stated previously, this app was not complex at all, and I wanted to keep this app as lightweight as possible, so I tried to use the components that were already built into the react-native library. Here is actually my entire list of dependencies.

"dependencies": {

"react": "16.0.0",

"react-native": "0.51.0",

"react-native-animatable": "^1.2.4",

"react-redux": "^5.0.6",

"redux": "^3.7.2",

"redux-logger": "^3.0.6",

"redux-promise-middleware": "^5.0.0",

"redux-thunk": "^2.2.0"

},

As far as software, I use React Native Debugger for all debugging needs, Xcode/Android Studio of course, and Sublime Text is my preferred text editor. That’s it really. I do opt to run most of my development on my actual phone rather than the emulator. I’ll just use emulators to make sure it still looks good on the other devices. For iOS, you will need to have a paid developer account in order to build on your device, but Android you don’t.

Apple Dev Account: $99/year

Android Dev Account: one-time payment of $25

As I continued, I was met with a challenge pertaining to aesthetics — specifically related to styles for the iPhoneSE and iPhoneX. I found out that RN v0.50.0-rc+ already has an easy styling fix for iPhoneX called SafeAreaView, which basically just pads the top and bottom of the device. You can import it just like you would with the View or ScrollView component.

import { SafeAreaView } from 'react-native'

For the iPhoneSE, I used the Dimensions and Platform components (built-in react-native components) to determine if the current device was in fact the iPhoneSE. I did something like the following:

import { Dimensions, Platform } from 'react-native' const { height } = Dimensions.get('window')

const is_iPhoneSE = Platform.OS === 'ios' && height === 568

Then you can style accordingly, checking if device is_iPhoneSE.

Another decision I made was to disable all orientation options, except portrait mode, so that I didn’t have to worry about styling for the other orientation on all devices for this first version.

Feedback and Submission

When you’ve been staring at anything for a while, it’s always good to get a second or third pair of eyes to help catch any simple mistakes that you may have glazed over or provide new perspectives that you hadn’t thought about before. Even non-developers/non-designers can be of assistance.

Once I felt the app was in a stable state, and received enough feedback from friends and family, I prepared an app submission on iTunes Connect (the place where you upload iOS apps) and Google Play Store. The process is very simple and short. For screenshots, all I did was simply take a snapshot of my app on an emulator.

After submission, it gets reviewed. For iOS, if you chose to have it automatically released to the App Store, your app will be in a “Ready for Sale” state, which means it’s up on the App Store. For Android, your app submission will have a status of “Published” when it’s available on the Google Play Store. Woot woot!! Exciting times!

I’ve heard a wide range of wait times, but for me, it took 1 day on iTunes Connect and 2 days on Google Play Store.