Introduction

Ionic 5 + Firebase Cab Booking

Cabbyd app connects the customer to the driver. App has features of accepting customers booking a ride and drivers accept a ride. Customers and Drivers can see their rides history & more features. It has a total of 2 apps for Customers and Drivers.

Installation Instructions

Softwares required

Ionic CLI
Firebase Create an account on Google Firebase

Setup Firebase

Setup Customer

Download and unzip the file from codecanyon.

First of all, make sure you have already installed Ionic CLI on your machine. After that, do the following action.

Navigate inside the directory cd Customer
Install all required packages npm install
Set the sensitive information in .env file Environment setting here
Start Customer ionic serve
That's it
Now open http://localhost:8100

Setup Driver

Open another command line and do the following action.

Navigate inside the directory cd Driver
Install all required packages npm install
Set the sensitive information in environment.ts file Environment setting here
Start driver npm start
That's it
Now open http://localhost:8101

Video guide

Here is video for more clearification.

Firebase

Customer

Driver

Environment Settings (Customer application)

path: .env

Here we specify secret credentials

config: {

    apiKey: "",

    authDomain: "",

    projectId: "",

    storageBucket: "",

    messagingSenderId: "",

    appId: "",

    measurementId: ""

}

Environment Settings (Driver application)

path: src/environments/environment.ts

Here we specify secret credentials

config: {

    apiKey: "",

    authDomain: "",

    projectId: "",

    storageBucket: "",

    messagingSenderId: "",

    appId: "",

    measurementId: ""

}

Note

Replace GOOGLE_MAP_API_KEY with your Google api key in following pages

config.xml

index.html

environments.ts

Directory Structure

Root Directory Structure

Codecanyon folder
- Customer
- Documentation
- Driver
- Instruction Video

Customer Directory Structure

Customer
- src
  - app
    - components
    - models
    - pages
    - services
    - app-routing.module.ts
    - app.component.css
    - app.component.html
    - app.component.spec.ts
    - app.component.ts
    - app.module.ts
  - assets
  - environments
    - environment.prod.ts
    - environment.ts
  - theme
  - global.scss
  - index.html
  - main.ts
  - manifest.json
  - polyfills.ts
  - styles.scss
  - tsconfig.app.json
  - tsconfig.spec.json
  - typings.d.ts
- .angular-cli.json
- .editorconfig
- .gitignore
- angular.json
- config.xml
- karma.conf.js
- ngsw-config.json
- package.json
- protractor.conf.js
- README.md
- tsconfig.json
- tslint.json

Driver Directory Structure

Driver
- src
  - app
    - components
    - models
    - pages
    - services
    - app-routing.module.ts
    - app.component.css
    - app.component.html
    - app.component.spec.ts
    - app.component.ts
    - app.module.ts
  - assets
  - environments
    - environment.prod.ts
    - environment.ts
  - theme
  - global.scss
  - index.html
  - main.ts
  - manifest.json
  - polyfills.ts
  - styles.scss
  - tsconfig.app.json
  - tsconfig.spec.json
  - typings.d.ts
- .angular-cli.json
- .editorconfig
- .gitignore
- angular.json
- config.xml
- karma.conf.js
- ngsw-config.json
- package.json
- protractor.conf.js
- README.md
- tsconfig.json
- tslint.json

Features

Customer Features

Customer Registration & Login
Request a ride
Choose your destination
Cancel ride
Ride history
Profile
Settings
Support

Driver Features

Driver Registration & Login
Vehicle Management
Document Management
Accept a ride
Ignore a ride
Google map Pick-up
Google map Drop-off
Ride history
Profile
Settings
Support

App features

Full source code shared (Both Customer and Driver)
Simplified installation and configuration
Easy deployment to production server
Respond quickly to user actions
Load fast and provide an offline experience
Well, structured and clean code
Clean endpoints
Best performance
Build with MVC architecture
Handled errors carefully and explicitly
Easily Customizable if necessary
Fully documented
Easy to configure

Thankyou

Thanks

Thanks again for purchasing this application. We are trying to add and improve new features regularly. Hopefully, you'll enjoy using the app. If you have any queries or suggestions, please contact us.

Best wishes Rarle Team

http://codecanyon.net/user/rarle