DEV Community

Cover image for Ionic 4 Taxi App Template — User, Driver, and Admin Panel: Features Overview
Sanchit Gupta for Enappd

Posted on • Originally published at enappd.com

Ionic 4 Taxi App Template — User, Driver, and Admin Panel: Features Overview


“Taxi Booking complete platform” is a high-quality app starter package for Cab/Taxi Booking, built-in Ionic 4 Framework with pixel perfect design. This starter contains three important apps, which are essential to create a complete Taxi booking platform :

  • User App — For booking ride
  • Driver App — For accepting rides
  • Admin App — For monitoring both users and drivers

Introduction

Ionic 4 has come out in the market with great improvements over the previous versions. This Taxi booking Ionic template is built using Angular 7 and Ionic Framework v4 and has everything you need to jump-start your Taxi Booking app development!

Ionic 4 represents the culmination of more than two years of research and hard work transforming Ionic from “mobile for Angular” into a powerful UI Design System and app framework for every web developer in the world.


STOP STOP! The best way to stop the taxi.

Benefits with Taxi booking complete starter

  • Clients: Get your next app built by developers using Taxi Booking complete platform. This way you save tonnes on UI development, and significantly on major features like Firebase integration, and many other native plugin integrations. Approximate savings can run in thousands of dollars per app.
  • Developers: This is the time to save your expensive time and write less code for your new app. You can build a rich app with Ionic in a very straightforward way. Your knowledge about using CSS, HTML, and JavaScript will help serve as the building blocks of your app. Ionic also has lots of tutorials you can use.
  • Designers: Customization of layout has no limit with Ionic. You don’t even have to modify a complicated widget. It is pretty clean and simple to start your own customization and create a satisfactory design.

Get Taxi Booking complete platform and enjoy lots of carefully designed pages with the most required functionalities!

Let’s check out some great features of the platform

Starter Features

Take your Ionic Framework app to the next level using this starter app template. Check all the features, designs and beautiful components that you can use on your app!

All in with Ionic 4 and Angular 7

This Ionic 4 Template includes lots of Ionic 4 components coded the angular way and features that you will love. Along with this documentation, we will explain you how to use each of them.

100% Flexible and Customizable

The template includes lots of pages, features and components but you are free to use just what you need and delete the code you don’t. The code structure is super modularized so you will find easy to modify the code to fit your needs.

CSS variables for the win

CSS Variables provide easy customization of an application and allow a value to be stored in one place, then referenced in multiple other places. So, for example, if you want to change the colors of your app, by just changing some variables your app will have the desired colors in just a few seconds!

Documentation

This documentation was built with a lot of effort to help you get the most out of this Ionic 4 template.

The ‘User/Customer’ App

This part of the app template contain screens with the help of which you can quickly make User/Customer App for your Taxi booking service.

Features of the app

Login/Sign up along with social logins
This page will check the authentication of user from Firebase‌. To learn how to setup social logins, check our blogs for Ionic 4 Facebook Login and Ionic 4 Twitter Login

OTP and Forgot password page
OTP flow is not working for this app and you can make it working for that you have to remove firebase auth and create your own auth because firebase doesn’t support OTP authentication currently.

Home Page for Taxi Booking 
Option for manually selecting pickup and destination location or get user current location​‌

Google Autocomplete API integration
In this page, we will get location from Google API.‌

Select Cab type feature
Here cab type showing here is static you can make it dynamic by making new table is Firebase DB‌

Change payment page‌
All payment type is also static here you can make it dynamic by adding New Table in Firebase DB.‌

Estimate fare page‌
Fare estimate Showing here is also Static you can add your own API for calculating Fare Estimate Here‌

Edit profile page
This page is not connected to firebase. To make it work, you will have to add new columns in user DB.

History page with details of the past ride
History Page is dynamic here and connected to firebase as well.‌

Add card page
Add card page just adding card in Your local variables not In Firebase DB. For make it working you have to make new Table in Firebase DB named Card and link it to the used DB with his ID.‌

Help page
Here you can put your FAQ or other general help related content for the facility of your customer.

Booking confirmation page
The final modal that appears to make sure that customer is ready to make the bookings with all preferences entered.

Route Map
 Google map integration for live tracking of location and its display of the shortest path between origin and destination. We are using AGM for showing route here.‌

The ‘Driver’ App

This part of the app template contain screens with the help of which you can quickly make Driver App for your Taxi booking service.

Feature of the app‌

Driver offline/Online feature
Driver can change his status from Offline to Online and vice-versa by the toggle in header and change the status in firebase.‌

Ride history page with details of past rides
It will show the Driver ride history with days and price and it will get data from firebase.‌

Add Payment/card page
In this page, driver can add the payment card.‌

Login/Sign up page
This page will check the authentication of driver from Firebase.‌ You can also add Social logins here. To learn how to setup social logins, check our blogs for Ionic 4 Facebook Login and Ionic 4 Twitter Login

OTP Verification page
This page will verify the driver OTP which comes on his mobile number.‌

Add vehicle page/vehicle list
In this page, the driver can add his vehicle‌

Wallet page 
Multiple payment methods option

Document Mangement page
This page shows the driver Documents.‌

Notification page
This page shows all the notifications when driver gets rides, offers etc.‌

Profile Update page
Driver can edit profile and it will update on firebase.‌

User Requests page
This page shows the total current requests of user and driver can pick any one of them.

Rider/Customer Details page
After accepting the request, the driver can see the detail of customer and driver can call, Message and cancel the user request‌

Chat/Message/Call feature page
The driver can chat with the user directly‌

Invite your friend page
It will help to invite other users

Invite sharing with SocialShare plugin
This page shows the driver contact list which is used to share the invite code of the driver‌.

The ‘Admin’ App

This app contains admin functionality for this platform.

Features of the app

Login
This page will check the authentication of the driver from Firebase.

Driver Details and Approval Page
This page shows the driver details with approved or not approved tabs and this page is connected with firebase. So this will update when it gets new data.
You can approve the driver using the toggle and this page is connected with firebase. So this will update when it gets new data.

Rides Records with the route map
This page shows the total ride history in admin panel and this page is connected with firebase. So this page updates when it gets new data.

Ride Details/Pickup and drop location
This page also the ride details and is connected with firebase.

Customer details
This page shows all customer details in our platform and this page is connected with firebase. So this will update when it gets new data.


Firebase authentication

Conclusion

In this article, we got to know about the features and design aspects of Ionic 4 Taxi Booking App Template. An app template is a sure shot way to save thousands of dollars on app development. Also, it reduces your ideation to market time by manifold. With this app template, you get an awesome looking UI as well as Backend functionality for all three aspects of any Taxi Booking App, i.e. User, Driver, and Admin. At the price that this app template is offered, it can be surely called a steal-deal.

— — — — — — — — — — — — — — — — — — — — — — — — — — -

Buy “Ionic 4 Taxi Booking Complete Platform — User, Driver and Admin App today!!

— — — — — — — — — — — — — — — — — — — — — — — — — — -

Top comments (0)