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

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.

Setup Driver

Open another command line and do the following action.

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