How we built a React Native mobile app in 36 hours with AWS Mobile hub
It started with an idea that I got from my online dating experience for over the past 2+ years. I talked about the idea with one of my colleagues and found that he was interested in the idea as well. We spent some time for doing market research to see if there was an existing app that did the same thing, but we couldn’t find any and it seemed simple enough for us to build it in a short period of time. We decided to build the app the next day and jump right into it.
We spend approximately 3 hours a night, 3 days a week, for 1 month. In all, 36 hours in a month to publish the app to the App store and Play store.
Idea and wireframe
The idea was to build an app that will help people to do better dating by getting feedback on dates. Since we both have a good understanding of designing and building apps, it didn’t take long to decide on the stack we wanted to use and get wireframes for the app.
We decided to build the app with React Native since we both are familiar with it, and AWS Mobile hub for the backend, authentication, database, storage, analytics, and more.
I spent about 30 minutes to come up with the wireframe to show how everything would work together on the screen.
We revised the user flow and user interface to make it more intuitive and easy to use on the second version.
We knew that we didn’t want to spend more than a month to build this app and to do that we decided to focus on the main feature first and add more features later.
No design mockups
From these two wireframes, we jumped right into building the app. We did this to reduce the time of building the app. I had a pretty good idea of how do I wanted it to look and feel in my mind since it has quite simple user flows and user interfaces.
We set up the Github repo for the project and jumped right into coding.
How did we work together?
My colleague works as a Front-end engineer who also has a good sense of design. I work as a Product designer and am always messing around coding. Since my colleague is more familiar with React, he took care of all the front-end of the app and setting up the structure for the project repository in Github.
While my colleague was working on the front-end, I worked on back-end with AWS Mobile hub. After messing around with AWS serverless architecture last year, I already had a good understanding how to set things up for a React Native app.
While my colleague got all the UIs on the screens with placeholder JSON data, I was able to get all the endpoints and authentication part done on AWS mobile hub.
After we got the primitive UI and back-end, I moved on to styling the app while my colleagues replaced the placeholder JSON data with actual data from the endpoint.
I went over all the screens and UIs my colleague created and added the style that I had in my mind, while my colleague was setting up Redux and connecting the app with the end points I created on AWS Mobile hub.
How did we build it in 36 hours?
We knew exactly what we wanted to build and how to build. Of course there were many things that we had to learn while we were working on this but that was one of the best parts of working on the app. Now we know a lot more about how to build an app with React Native and AWS mobile hub.
We started the entire project from AWS amplify library which made it possible for us to build this app in a fairy short amount of time. AWS amplify literally sets a running React Native app with a fully functional back-end solution including authentication, API, Storage, Database and more. It took a little time to study how it works but it didn’t take that long to figure out how to use it.
Coming from the path of setting all those serverless architecture services manually, this dramatically reduced the development time for this project. Also having all the services in one place made everything much easier to manage. One issue though was that `awsmobile push` command takes way to long to complete which slows down the process while I was working on the backend functions with Lambda.
I highly recommend checking out AWS mobile hub if you want to build a scalable product in a short time and React Native for building an app for iOS and Android app at the same time.
How does it look now?
How those two wireframes turned into a real app? You can check it out on your own smart phone. Date Helper is available on App store and Play store for free.
Originally published at www.ohsikpark.com.
