It’s easier than ever to build your own service like Uber or Uber-for-X. We are happy to announce that we have launched React Native Taxi App Script with Backend integration.

Incase you missed the UI theme of our Taxi app, it’s here.

The app is integrated with passenger app view as well as driver app view. The Backend integrated theme is enriched with all the required backend functionality that includes REST API Call, Authentication of the user, Socket.IO to handle bidirectional communication between server and client (user).

Also it includes Express and Node server as node.js uses lightweight event-driven I/O which is very efficient in data-intensive real-time application.

Features:

This app does not try to mimic Uber completely. We wanted to provide a basic framework for developers to build upon. This app is easily customizable and can be extended to any app in these categories. Say you want Uber for a Laundry service, so you need to keep track of all your drivers out. We have the tracking mechanism. You take it out and extend the idea in your own implementation.

So let’s walkthrough the basic functionality of the app.

You have a login / register screen for both driver and rider. The app itself contains both the rider and driver views. Although architecturally we have kept them as separate entities so that it is easier to refactor code later.

Rider View

Based on the login you are redirected to rider or driver views. On Homepage a socket connection is made which keeps track of the user. If user is a driver he constantly updates his location.

On rider homepage your GPS location is fetched (with permission) and the map shows your current region. You can drag the map around, zoom it and set your pickup location. Your pickup address is also fetched.

Once pickup location is set you can request ride. A socket call is made and the backend searches from it’s pool of connected drivers (nearby drivers fetching is in our roadmap).

A suitable driver is selected and the driver is sent a request with the rider who is requesting and his pickup address.

If the driver accepts the ride, both rider and driver receive this confirmation.

Now rider screen as well as driver screen show status enRoute, Arriving or Arrived at location. This was a little tricky to simulate because we as app builders are at the same location. In actual scenario based on the driver distance this trip status will change. We have implemented those modules. But for simulation purposes we have set a time bound interval in which these calls would be made. Nothing to worry about. It’s just there for simulation purposes.

Once the status is arrived on driver side the driver starts the trip. Another time bound call will end the trip on driver side. The rider receives this confirmation and a receipt page is generated for him which shows the time, journey details and cost.

Other handles like cancel ride mechanism, no nearby drivers check are also available.

Driver View

Technologies Used:

Front end is implemented mainly with these listed packages:

React-Native

NativeBase

React-native-code-push

Redux : A state management library, the most widely accepted Flux like implementation. It helps in managing all the data properly in complex applications. Also it forces to keep the data of your application in one place and passing data down to the View layer. It makes easy to think about test and debug your application.

: A state management library, the most widely accepted Flux like implementation. It helps in managing all the data properly in complex applications. Also it forces to keep the data of your application in one place and passing data down to the View layer. It makes easy to think about test and debug your application. Redux-thunk : When communicating via REST API asynchronous calls have to be made. To manage this, Redux-thunk is used.

: When communicating via REST API asynchronous calls have to be made. To manage this, Redux-thunk is used. Redux-persist : It is used when we want to save some information like cookies, authentication tokens locally. It saves the data automatically and also has AutoRehydrate feature which automatically retrieves the data once the app boots up.

: It is used when we want to save some information like cookies, authentication tokens locally. It saves the data automatically and also has AutoRehydrate feature which automatically retrieves the data once the app boots up. Socket.io-client : Like Backend, we have used this Socket library which allows bi-directional data flow over a WebSocket connection. WebSocket has become the de-facto real time communication protocol in the industry. The communication between driver and rider and status of ride is handled via socket.

: Like Backend, we have used this Socket library which allows bi-directional data flow over a WebSocket connection. WebSocket has become the de-facto real time communication protocol in the industry. The communication between driver and rider and status of ride is handled via socket. React-native maps : A library made by Airbnb guys that lets us handle all the map related activities like setting region according to coordinates, placing markers etc.

Back-end:

We have used the below mentioned technologies in our backend theme. Here we go with short description regarding each technology implementation.

ExpressJs : A prebuilt Node.js framework that helps in creating server- side application faster and efficient as it is simple, flexible and scalable. Defining routing in express is very easy. Also it helps in modularising the code for large application. We have implemented API parameter validation using express-validation and Joi. Helmet middleware is used to make express apps more secure.

A prebuilt Node.js framework that helps in creating server- side application faster and efficient as it is simple, flexible and scalable. Defining routing in express is very easy. Also it helps in modularising the code for large application. We have implemented API parameter validation using express-validation and Joi. Helmet middleware is used to make express apps more secure. NodeJs : A server side platform to build fast and scalable network easily. The main features are asynchronous and event driven approach, single threaded model with high scalability and no buffering for any data. Nodemon has been used for auto server restart.

A server side platform to build fast and scalable network easily. The main features are asynchronous and event driven approach, single threaded model with high scalability and no buffering for any data. Nodemon has been used for auto server restart. MongoDb : A cross-platform, document oriented database which provides high performance, high availability and easy scalability. It makes use of collection and document. For easy and efficient interaction, mongoose library is used.

A cross-platform, document oriented database which provides high performance, high availability and easy scalability. It makes use of collection and document. For easy and efficient interaction, mongoose library is used. Socket IO : It enables real time, bidirectional event based communication between client and server. It is built on top of the WebSocket API(client side) and Node.js.

It enables real time, bidirectional event based communication between client and server. It is built on top of the WebSocket API(client side) and Node.js. API Calls : Handle different API calls along with CRUD

: Handle different API calls along with CRUD Passport-jwt : Passport-JWT is an easily configurable and flexible authentication middleware that helps in authenticating the user which in turn use jsonwebtoken to generate the token. Bcrypt module is used to secure passwords.

: Passport-JWT is an easily configurable and flexible authentication middleware that helps in authenticating the user which in turn use jsonwebtoken to generate the token. Bcrypt module is used to secure passwords. Eslint : It is a tool that analyses code and checks whether coding style meets coding standards or not. It can find bugs, potential problem area, poor coding style and stylistic issue. It follows Airbnb javascript guidelines.

It is a tool that analyses code and checks whether coding style meets coding standards or not. It can find bugs, potential problem area, poor coding style and stylistic issue. It follows Airbnb javascript guidelines. Chai and Mocha : They are used for unit testing code. Mocha is a powerful tool which provides testing framework for the node enriched with functionality whereas chai provides a handful of shortcuts such as expect or assert. Chai checks whether the response from the server is as expected or not.

They are used for unit testing code. Mocha is a powerful tool which provides testing framework for the node enriched with functionality whereas chai provides a handful of shortcuts such as expect or assert. Chai checks whether the response from the server is as expected or not. Istanbul : ES6 uses Istanbul to check the code coverage. Code coverage reports enable one to know whether code written is being executed or not. Error free and more flexible code using Babel.

ES6 uses Istanbul to check the code coverage. Code coverage reports enable one to know whether code written is being executed or not. Error free and more flexible code using Babel. Gulp helped in running the sequence of task.

helped in running the sequence of task. Bluebird a highly focussed promise library is used to promisify the code.

a highly focussed promise library is used to promisify the code. Winston a universal logging library is used for logging the API call.

Architecture:

Taxi app has complex yet easily understandable architecture. We have a thorough documentation available but let me give you an overview.

MongoDb architecture:

MongoDB is essential to store data in different schema for different entity. These are easily customizable.

Socket Architecture:

Socket IO has very simple architecture and provides event based communication between server and client (rider / driver). This allows server to receive and emit events in real time whenever there is some change in the data. Different scenarios in which socket IO is used are as follows:

Socket Authentication : It authenticates the requested socket connection using jwt token.

Socket Authentication — success

Start Trip : Here the driver initiates the start trip and when the trip is over driver ends the trip. Trip object one out of two status and these are ‘onTrip’ or ‘endTrip’

Start trip

Rest Server : Rest server handles all the rest api call such as login, register, update user details etc.

Test Cases:

For testing various api, we have used chai and mocha. Each test case gives the description about the test case, parameter to send, and expected value in the response along with code coverage status.

User API Call Test Cases

Code Coverage Statistics

Roadmap:

Though we have the working prototype ready, we are continuously adding new features and improving the app. We have the following features on our roadmap:

Restore Trip / TripRequest on-

WebSocket (disconnect / connect)

Fresh boot up

2. Upgrade to RN 0.33.

3. Use of NavigationExperimental.

4. Add sidebar on the driver side.

The development team is actively working on the theme to add more features. Take a look at our other themes at StrapMobile.

Credit goes to Sanket Sahu, Himanshu, Akshay and Gaurav from GeekyAnts.

Thanks for reading the article. Please share and recommend if you like it.