Building an app like Uber using React-Native

Building an android app to book cab rides similar to Uber/Ola

Let’s dive into the world of React Native

Ever dreamt of building an app like Uber or Ola?

If yes then you can join me in my journey of building an android app similar to Uber/Ola.

You can directly jump to coding by clicking this link or you can read some theory here.

When I was bored on a weekend and wanted to try something new I decided to build an android app. I read about various ways to build an app and I found React Native using JavaScript to be my best match.

Why I chose Javascript?

I wanted to learn something where I can build an end to end application including UI. Currently the leading platforms are AngularJS, Node.js, React Native etc and all these are based on JavaScript. So I decided to build an end to end mobile app using React Native and NodeJS.

Why I chose React Native?

I have previously worked on native android but I wanted to try something new. I wanted to get into the world of hybrid apps. So when I read about the various ways to develop hybrid apps I found React Native to be the best fit for me.

Why a cab booking app?

I thought of building something similar to an existing app which would reduce my time in designing phase. I wanted an app which would cover all scenarios of the development environment. When I checking my mobile for existing apps I saw Uber and felt I can build a similar app which can help me cover many features of React Native and NodeJS. I noted down the below functionalities I need to cover

React Native app development

REST API Integration

MQTT and live data integration

Camera functionality/ File Storage

Internal database and Cache

Google maps and google directions integration

Live location tracking

So the objective of our React Native app is:

• App should act both as driver app and user app. Currently we will not get into create multiple apps as this is just for experimental purpose

User App:

• For the first time user should be able to register himself using his mobile number and password
• From the second time user/driver can login using his registered mobile number and password. A check box to be provided to differentiate between user and driver
• Based on user’s current location we will show all the nearby cabs available to book. User can filter the cabs based on mini/sedan and suv vehicles
• User should be able to provide destination and book a ride
• App should display cab and driver details once a ride is created successfully
• App should show live location tracking of the cab on the map
• User should get notification once trip is completed and he should be able to rate the trip once completed
• User can view his past trip history with the trip status and details
• User should be able to update his profile details such as phone number, email, name, profile pic etc
• User should get notifications regarding offers and trips
• User should be able to logout from the app

various user features

Driver App:

• For the first time admin to add driver to the app environment
• From the second driver should be able to login using his phone number and password
• Driver will get notification once his cab is booked for a ride and should be able to view the user’s source location on the map along with user name and phone number
• Driver should be able to cancel a ride, start a ride and end a ride
• Driver can view his past trip history
• Driver can logout from the app

driver features

So lets split our app development process into 4 stages with separate stage for app development, server coding and deployment, integration of app & server api’s and finally testing

Stage 1: Build a React Native app with static data

Stage 2: Build a NodeJS application and deploy it

Stage 3: Integrate React Native with NodeJS REST api’s

Stage 4: Add caching and local db in React Native app

Stage 5: Enable live location tracking

For better understanding we will be splitting each stage into multiple parts and then merge all parts at last to get the finishing product.

Stage 1 and Stage 2 is completed as of now. Remaining stages will be covered in coming days

Please refer to github for the complete source code.

Lets start our process :p