App Diary: Day 3

Finishing onboarding and starting the main interface #ReactNative #Redux #iOS #Android

I’ve been building my latest app, F’ed, in public. Here’s the Github repo. I’m working on it today and thought it would be fun to show you a step-by-step account of what the app-building process is like.

11:27am

Got a late start today but still hoping to get a solid day of coding in. Yesterday I wired up the “Interests”, “Sign Up”, and “Log In” screens, along with the Firebase user authentication backend, so the full trip (signing up, logging in, logging out) works completely. Here are the screens, now implemented in code:

TitleScreen, InterestsScreen, SignUpScreen

After implementing my design, I decided that the light header looked better than the money motif. I built the header with a “mode” prop, though, so it will be easy to switch back if I change my mind. I found a great cross-platform component called “react-native-image-picker” to handle the camera and image roll.

I also noticed that during the onboarding process, you might want to return to the title screen, like if you clicked sign up by mistake. So I made the F’ed logo clickable and it takes you back to the title screen.

Now: saving your user information and profile photo to Firebase on sign up. And maybe converting the photo to a smaller file size before uploading.

11:53am

First, added a nice loading indicator to the Sign Up and Log In screens via some Redux actions, while the network request to Firebase is processing.

case types.SIGN_UP_ATTEMPTED:
return {
…state,
loading: true
};
case types.SIGN_UP_SUCCESSFUL:
return {
…state,
loading: false
};
case types.SIGN_UP_FAILED:
return {
…state,
loading: false
};
1:27pm

I spent some time polishing the loading indicators and adding another one to the profile photo image picker. There was a ~400ms delay after choosing your image, which was noticeable; I wanted to make sure users knew that something was happening in the background. Now the entire sign up and log in process is fully responsive to user input.

Then I created the /users database in Firebase to store user data, including their primary interest (mobile apps, web development, etc) so I can customize the main area of the app when they first load it up. I’ll use that interest to pull courses directly from the Udemy API.

Now, quick lunch while researching how to downsize images locally on the device before uploading.

4:33

The first image resizing library I tried had a dependency issue with my React Native version (RN developers, you know what that’s like!) so I decided to get the upload functionality working first, and then add in resizing after.

Uploading photos turned out to be a LOT more difficult than expected. I’m using Firebase for my backend, and basically the files have to be converted into Blob format (yeah, I had a good chuckle at that) before being uploaded from the device filesystem to Firebase’s servers. Thanks to the amazing amount of information and resources online, I found this great tutorial which did the trick.

Since my signUpUser action creator was getting packed full with creating a new Firebase user, saving metadata to the database, and then uploading the profile picture, I created a helper function to contain the image upload function, which I can subsequently use in other parts of the app if necessary (for example, on the ProfileScreen if the user wants to change their photo later).

import * as helpers from ‘../helpers’;

I also refactored some promise statements with the new async/await syntax, which makes for much cleaner code.

4:59

And now the place I’m working at is closing… so I will pick this up another day.