Ionic 4 Car Pooling App Starter - Carpool

Ionic 4 Car Pooling App Starter — Carpool

Table of Contents

1. Introduction — What is this template

2. Features of this template

2.2 Features

3. Setup and Installation

4. Modifying code

5. Feature Explanation

6. Integrating Back-end Data

7.0 Troubleshooting

8.0 Third-party libraries, sources, and Credits

Ionic 4 Car Pooling App Starter — Carpool


With this starter kit, you can build a full working cab booking and sharing application to provide services to the people at an extremely convenient way, only by integrating with a back-end server with the help of a good back-end developer. Now let set go to get to know about this starter kit in detail here.



Type caption for image (optional)

Title
Subtitle
Kicker


Table of Contents


  1. Introduction — What is this template
  2. Features of this template

2.1 Screens

2.2 Features

2.3 Device compatibility

3. Setup and Installation

3.1 Introduction

3.2 Installation

3.3 Running your app

3.4 Run your app with changes

3.5 Creating icon and splash

3.6 Generating Release builds

4. Modifying code

4.1 Screen code structure

4.2 Styling structure

4.3 Logic structure

4.4 Running your app

4.4 Navigation structure

5. Feature Explanation

5.1 User Authentication

5.2 Adding rides, booking rides, History, etc

5.3 Recommendations

5.4 Geolocation and Map

5.5 Google Place Prediction

5.6 Chat Support

5.7 Camera

6. Integrating Back-end Data

6.1 Data structure

6.2 Back-end options

7. Troubleshooting

8. Third-party libraries, sources, and Credits


Title
Subtitle
Kicker


1. Introduction — What is this template


Carpool— An Ionic 4 Carpool and Ride-Sharing App Template is a mobile app theme/template. With this template, you can create a Carpool and Ride-Sharing apps like BlaBla Car, UberPool, ToGo, ber Eats, and Ola Share, etc.

This template is the front-end part of the carpool app, which means the screens and user interfaces (screens) are ready. You can easily change the screens, styles, and logics to suit your requirements. To make it a live app like BlaBla Car, UberPool, ToGo, ber Eats, and Ola Share, etc. you just need to add a back-end to the app, and load your data in the back-end.



Type caption for image (optional)

This template is made in IONIC 4 language. With IONIC 4, you can

  • Create iOS and an Android app with a single source code
  • Cut your project cost and time in half
  • Ensure exact same UI in iOS and Android, while following the standard UI norms
  • Saves separate updates for each app in future

Title
Subtitle
Kicker


2. Features of this template


2. 1. Screens

2.1.1 Landing



First screen when the app loads.

You will get this screen as the app loads successfully after the splash screen timeout. Here you are provided with two options on this screen one is log in and another one is signup. If a user already exists then he/she may opt for login or if he/she has no account on this application then the user will have to create an account by clicking on the signup button.
This page navigates you to the login page and signup page. Here this page only UI for demo purpose but you can make it a fully working application by integrating backend to it with the help of a good backend developer.

2.1.2 Login



Type caption for image (optional)

This page can be accessed from the Landing page as the app loads. By clicking on the login button after the required entries in the input field it redirects you to the home page.

The login page can be used to perform login action with username/email and password. Currently, the login is only for demo purposes.

The login page also contains “Forgot Password” and “Signup” page navigations.

2.1.3 Signup



Type caption for image (optional)

This page can be accessed as the app loads. By clicking on the signup button it redirects you to the Home page.

The signup page can be used to register a user with a username/email and password. Currently, the signup is only for demo purposes.

The signup page also contains “Login page “ page navigations.

2.1.4 Forgot Password



Forgot pass page for Carpool App.

This page can be accessed from the “Login” page. Forgot Password page can be used to send a reset password URL or OTP to the user’s email or any other way you want to use. Currently, this page is only UI. The email sent to the user can be verified from their mail and the user may be asked to provide a new password.

2.1.5 Home



Carpool Home page.

This is the first tab of the application. This page can be accessed after a successful login by a registered user for the application.

Home page contains two segments “CURRENT ” and “HISTORY” at the top of the page after the header. The current segment has options to OFFER A RIDE and FIND A RIDE options for a user.
The history segment has the details of all the rides taken in the past.

By clicking on any one options in the current segment, it will navigate to the Offer a ride page or Find a ride page.

2.1.6 History



Type caption for image (optional)

This is the first tab’s second segment of the application. This page can be accessed by clicking on the second segment “History” in the application.

this page contains all the information about previous rides.

2.1.7 Offer Ride — Pick-up



User’s pickup location.

This page can be accessed by clicking on offer a ride button on the home page. Here you can search for a pickup location of your choice or bu clicking on use current location to access your current location with the help of Ionic geolocation plugin.
This page navigates you to your pickup location’s view on the pickup map page.

2.1.8 Offer Ride — Pick-up — Map



Pick-up map view

This page can be accessed by clicking on any of the locations in pickup page.

This page depicts the exact pick-up location on the map. This page navigates to the drop-off page.

2.1.9 Offer Ride —Drop-off



Type caption for image (optional)

This page can be accessed by clicking on the arrow forward button on the pick-up-map page. Here you can select your drop location same as the pickup location. This page navigates to drop-off map view page.

2.1.10 Offer Ride —Drop-off— Map



Type caption for image (optional)

This page can be accessed by clicking on any of the locations in drop-off page.

This page depicts the exact drop location on the map. This page navigates to the add stopover page.

2.1.11 Add Stopover



Add stop in-between journey.

This page can be accessed by clicking on the arrow forward button on the drop-off-map page. Here you can select your stopover in-between the journey. This page navigates to map view page of your complete ride.

2.1.12 Add Stopover — Complete journey on the map.



Complete journey on map.

This page can be accessed by clicking on the confirm button on the Add Stopover page. This page shows the map view of the journey.
This page navigates to the calendar page.

2.1.13 Calender page



Calender Page


Calender View 

This page can be accessed by clicking on the Good for me button on the journey map view after the stopover selection. Here we can select the date of departure for your ride.
This page navigates you to the Select Time page.

2.1.14 Select time page



Ride of Time Page


Select ride time page

This page can be accessed by clicking on the arrow-forward button on the select date page. Here we can select the time of departure for the ride.
This page navigates to the comfort page.

2.1.15 Comfort page



Type caption for image (optional)

This page can be accessed after the pickup time selection. this page navigates you to the total no of carpool passenger’s page.

2.1.16 Total passengers



Tota seats, available for the pool.


This page can be accessed after comfort page by clicking on any button on that page. Here you can select the total number of passengers that you can take with you for the ride.
This page navigates you to the permission page to verify either passenger booking instantly or not ?.

2.1.17 Permission to book by Passengers instantly



Type caption for image (optional)

This page can be accessed after total passengers page by clicking on the arrow-forward button at the right end of the page.
This page navigates you to the recommended price per se seat page.

2.1.18 Recommended price per seat



Type caption for image (optional)

This page can be accessed after the permission page.
This page navigates to the don’t agree or confirmation price page.

2.1.19 Don’t Agree Page



Type caption for image (optional)

This page can be accessed after the recommended price page. This page navigates to the edit price page.

2.1.20 Edit Price



Edit price Page.

This page can be accessed from the don’t agree page. Here you can edit the price of the journey. This page navigates you to the return trip page.

2.1.21 Return Trip Plan



Type caption for image (optional)

This page can be accessed from the edit price page. This page navigates to the return journey plan Calender.

2.1.22 Return Trip Plan date selector



Type caption for image (optional)


Type caption for image (optional)

This page can be accessed from the return trip plan confirmation page. Here you can select the return date of the journey. This page navigates to the return time page.

2.1.23 Select return time 



Type caption for image (optional)


Type caption for image (optional)

This page can be accessed by clicking on the arrow-forward button on the select return date page. Here we can select the return time of pick for the ride.
This page navigates to message for the passenger's page.

2.1.24 Message for the passengers



your message for passengers.

This page can be accessed after the return time page. Here on this page, the user can add some messages or instructions about his/her ride. This page navigates to the ride confirmation page.

2.1.25 Offer Ride Confirmation



Offered ride confirmation

This page can be accessed after complete ride information. This page navigates to the Home page current segment.

2.1.26 Home Page — Current segment — offered rides



Type caption for image (optional)

This page can be accessed after filling and selecting all the details from the “OFFER A RIDE” to “RIDE CONFIRMATION”. This page contains the navigation to journey and stops page.

2.1.27 Home Page — Current segment — offered rides — Journey and Stops



Offered rides journey and stop details

This page can be accessed by clicking on the card in the home page.
This page navigates to:-
1. Journey & Stops
2. Passenger contribution
3. Passenger Options
4: Delete Offered Journey

2.1.28 Offered Rides — Journey and Stops — Journey & stops details



Type caption for image (optional)

This page can be accessed from the Journey & Stops. this page contains the details of the offered journey.

2.1.29 Offered Rides — Journey and Stops —Passenger contribution



Type caption for image (optional)

This page can be accessed from the Journey & Stops. This page contains the details of the price offered for the journey. Here you can edit the price and save that.

2.1.30 Offered Rides — Journey and Stops — Passenger options



Passenger options for offered journey

This page can be accessed from the Journey & Stops. This page contains the details of the passengers offered for the journey. Here you can edit the number of passengers and message for the passengers and save that.

2.1.31 Offered Rides — Journey and Stops — Delete Offered Journey



Delete ride

This page can be accessed from the Journey & stops page by clicking on the delete button at the bottom of the page. This page navigates to the first tab’s first segment.

2.1.32 Find a ride



Search for a ride

This is the second tab of the application. This page navigates to the: — 

  • Destination location
  • Pickup Location
  • Date and time selection

2.1.33 Find a ride — Pickup Location



Find a ride pickup location

This page can be accessed by clicking on the Pickup location in the second tab of the application. In this page, we can select the pickup location of our’s using google place prediction.
This page navigates back to find a ride page.

2.1.34 Find a ride — Destination Location



Type caption for image (optional)

This page can be accessed by clicking on the Destination location in the second tab of the application. In this page, we can select the destination location of our’s with the help google place prediction.
This page navigates back to find a ride page.

2.1.35 Find a ride — Date and Time



Date page


select date page


Time page


Select time page.

These pages can be accessed by clicking on the Date and Time button on the Find a ride page to select the date and time for the ride. This page navigates back to find a ride page. In find ride page after selecting all the information this page navigates to the available rides page by clicking on the search.

2.1.36 Find a ride — Available rides




Type caption for image (optional)

This page can be accessed by clicking on the search on the second tabs of the application after filling/ selecting all the required details of the ride. By selecting any ride it navigates to the ride details page.

2.1.37 Find a ride — Available rides details



Type caption for image (optional)

This page can be accessed by clicking on any card in the available rides page. The page contains detailed information about the available ride.

this page navigates to the total riding passenger's page.

2.1.38 Find a ride — Total passengers count



Passengers to ride.

This page can be accessed by clicking on the “CONTINUE” at the bottom of the available ride details page.
This page navigates to the “Book” page.

2.1.39 Find a ride — Book ride page



Book your ride page

this page can be accessed from the total passenger's count by clicking on the arrow-forward button at the bottom right most of the page.

This page navigates to the “Booking confirmation” page.

2.1.40 Find a ride — Booking confirmation



Alert for confirm booking


Booming in progress

These pages can be accessed from the “Book ride” page. This page processes the progress for booking confirmation.
This page navigates to the ride booked confirmation page.

2.1.41 Find a ride — Ride Booked



Ride booked successfully

This is the last page of the find a ride flow. This page navigates back to the find ride page after successful ride booking.

2.1.42 Inbox



Inbox page

This is the fourth tab of this application. This page contains the nesting of tabs and segments. This page has two segments at the top of the page below the header as “MESSAGES” and “NOTIFICATION”.This is the first segment of the inbox tabs.
This page navigates to the Chat page.

2.1.43 Inbox — Messages-Chat



Chat support

This page can be accessed by clicking on any chat contact in the “MESSAGES” segment.

Messages page contains the chat application for direct interaction to the carpool customer service. Here chat is only UI and for demo purpose.

2.1.44 Inbox — Notification



Type caption for image (optional)

This is the second segment of the inbox tabs. This page contains the notification as list items in the vertical direction of the page. To enable and disable mobile notifications, you will first need a Push notifications system in your back-end. If you are using Firebase — implementing, enabling and disabling push notification is very easy compared to a custom back-end. Read more about Firebase- Ionic push notificationhere.

You will first need a Push notifications system in your back-end. If you are using Firebase — implementing, enabling and disabling push notification is very easy compared to a custom back-end. Read more about Firebase- Ionic push notification here.

2.1.45 Profile



Type caption for image (optional)

This is the fifth tab and the first segment of this application. This page contains the nesting of tabs and segments. This page has two segments at the top of the page below the header as “DETAILS” and “ACCOUNTS”. This is the first segment of the profile tabs. This segment has a list of actions in vertical direction. All the action executes as…

  1. Mini Biography
  2. Add my preferences
  3. Verify my id
  4. Verify mobile number
  5. verify email
  6. Add a car

2.1.46 Profile — Mini Biography



Type caption for image (optional)

This page can be accessed from the “Profile” page.

The options available can be chosen to edit user name, email address, update password, address, contact, Gender, DOB, Bio, and etc as per your requirement and update all those. Back button takes you back to the “Profile” page.

2.1.47 Profile — Add my preferences



Type caption for image (optional)

This page can be accessed from the “Profile” page by clicking on the “Add my preferences”. Here you can edit your preferences and update that. The save preferences button will update your data in the database and navigate back to the profile tab. Here this is only UI for demo purpose.

2.1.48 Profile —Verify my id



Type caption for image (optional)

This page can be accessed from the “Profile” page by clicking on the Verify my id”. This page will navigate to update document details.

2.1.49 Profile — Update Document



Update document details


Type caption for image (optional)

This page can be accessed from the “Verify my id” page by clicking on the “Driving License”. This page will navigate to the camera.

Here this is only UI and for demo purpose. You can make it in a fully functioning app by integrating back-end with the help of a back-end developer.

2.1.50 Profile —Verify mobile number



Type caption for image (optional)

This page can be accessed from the “Profile” page first segment. Verify mobile numbers page can be used to authenticate a user to check a user is registered or not. After entering the registered mobile number it navigates the user to the OTP verification page which a user receives after entering his/her mobile number.

Here these two pages are only UI and for demo purpose.

2.1.51 Profile — OTP Verification



Type caption for image (optional)

This page can be accessed after entering the phone number in with phone number page. In this page, received OTP on user’s mobile gets verified for letting the user to access the home page. On clicking “CONTINUE” it navigates back to the apps profile tab.
This page here is only the UI but you can make it a fully working app by integrating a suitable backend by a developer.

2.1.52 Profile — Verify email



Type caption for image (optional)

This page can be accessed by clicking on the verify email in the profile page.
Here you can control the emails you want to get either all of them, just the important stuff or the bare minimum. Here you have the options to enable and disable email notifications.

You will first need a Push notifications system in your back-end. If you are using Firebase — implementing, enabling and disabling push notification is very easy compared to a custom back-end. Read more about Firebase- Ionic push notification here.
Here this is only the UI for demo purpose.

2.1.53 Profile — Add a car



Type caption for image (optional)

This page can be accessed by clicking on the Add a car in the profile page.
This page navigates to the add new vehicle page.


2.1.54 Profile — Add a car — Add new vehicle



Type caption for image (optional)


Type caption for image (optional)

This page can be accessed by clicking on the Add button at the very bottom in the Add a car page of the profile page. Here the items are listed in a list view in the vertical direction. Each item contains a dropdown menu to select the matching item from them.
By clicking on the “COMPLETE” button it will navigate back to the add car page. 


Title
Subtitle
Kicker


2.2 Features


2.2.1 Geolocation



Type caption for image (optional)

This can be accessed by clicking on the pickup page or drop-off page on the find ride page. This allows the app to get your current location by clicking on the current location button.

2.2.2 Google Map



Type caption for image (optional)

Google map shows us the current location of the app by clicking on the current location or by filling the input field in the pickup or drop location. This shows us the exact point of our location on the map.

2.2.3 Google Place Prediction



Type caption for image (optional)

As mentioned earlier in the geolocation, by filling the input text in the set pickup page or drop-off page, this will show you some predicted locations according to your filled entries in the text input field. By selecting any predicted location it will store that location and show that on Find a ride pages' pickup and destination location individually.

2.2.4 Chat Support



Type caption for image (optional)

Chat support provides us the facility to interact with the customer service provider directly. We can ask our queries and get a solution from their side. This provides us the real-time solution of our related queries.
Here in the app, this is only the UI for demo purpose but you can make it in fully functioning real-time chat support by integrating back-end which I mentioned earlier, with the help of any back-end developer.

2.2.5 Camera



Change profile picture

By using ionic native camera plugin we get the facility to take a picture and save that as a profile picture, we may save that on the server and retrieve that any time as per requirement. We can you back-end for this or we may use ionic native Squalite storage or ionic storage to store data locally and retrieve that when there is no back-end. Or we can pick a picture from the gallery to make that our profile picture. You can follow this link to pick a picture from the gallery with the help of ionic native camera plugin.

2.3 Device Compatibility

As mentioned earlier, the app is written in Ionic 4 and angular language. This allows a single source code to create both iOS and Android apps.

This template has been tested in all latest Android versions and major devices.

This template has also been tested in all latest versions of iPhones, including iPhone X.


Title
Subtitle
Kicker


3. Setup and Installation


Carpool is a carpooling and ride-sharing application made with Ionic 4 and angular.

For navigation in the application, we have used default angular navigation.

3.1 What is Ionic Framework

Ionic Framework is an open-source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies (HTML, CSS, and JavaScript).

Ionic Framework is focused on the frontend user experience, or UI interaction of an app (controls, interactions, gestures, animations). It’s easy to learn and integrates nicely with other libraries or frameworks, such as Angular, or can be used standalone without a frontend framework using a simple script include.

3.2 How can I use this template

This template is a ready-made front-end template for a carpooling and ride-sharing App. You can use the screens coded in this app, navigation between the screens and specific functions applied to buttons, etc. This saves your 100% cost and time in front-end UI development. You can simply add a back-end/server to this app template, and replace the demo data with data coming from your server. This way, you only spend time and money on back-end development.

3.3 Installation

Setting Up Environment and Installing Dependencies

# Install the Ionic CLI

npm install -g ionic

# Start an App

ionic start myApp tabs/blank/sidemenu
whatever is your requirement you can select that and remove others from tabs/blank/sidemenu.

#Angular + Ionic Framework

npm install @ionic/angular@latest --save

# Node & npm

Almost all tooling for modern JavaScript projects is based in Node.js. The download page has prebuilt installation packages for all platforms. We recommend selecting the LTS version to ensure the best compatibility.

Node is bundled with npm, the package manager for JavaScript.

To verify the installation, open a new terminal window and run:

node --version
$ npm --version

# iOS Setup

To target iOS, some additional environment setup is required. Unfortunately, iOS apps can only be created on macOS.

For iOS setup please follow the steps provided in the link here

#Run the App

cd your app name
ionic serve

For iOS build, follow the steps provided in the link here

For the android build, execute the following command

ionic cordova prepare android
ionic cordova run android




Type caption for image (optional)

3.4 Creating Icon and Splash screen

For creating an icon and splash first paste your icon and splash in the resources folder and then execute the following command in your project directory

ionic cordova platform add android 
ionic cordova resources
ionic cordova build android

Title
Subtitle
Kicker


4. Modifying code


4.1 Screen / View’s Code Structure



Type caption for image (optional)

4.2 Overall Folder Structure

There are broadly 40+ pages in this template. All pages are shown in the src/app folder above. Mostly, each page’s code is kept in a separate folder. Folder names are self-explanatory. You can create a page by executing the command

ionic cordova generate page your page name

This will create a folder of page name containing four files as -

In the case of Ionic 4, pages are generated with lazy loading by default which means a page has its own module.

├── enappd.html
├── enappd.module.ts
├── enappd.scss
└── enappd.ts
  • enappd.html: contains UI components for the page.
  • enappd.scss: contains sass styles to style your page.
  • enappd.ts: contains TypeScript code

4.3 Layout File Code Structure

The layout file has the structure shown in the image.

• imports are written on the top.

• @component is the decorator that marks a class as an Angular component and provides configuration metadata that determines how the component should be processed, instantiated, and used at runtime.

• A constructor is used for dependency injections.

When the app loads the constructor gets called first then ngOnInit.

After constructor and inside the class we can write our logic for the page/component in page.ts



Type caption for image (optional)

4.4. Styling Code Structure



Type caption for image (optional)

style page are generated by default for each page after executing page generate command, inside the page folder.

4.5. Navigation Code Structure



Type caption for image (optional)

On creating a project in ionic a file named app-routing.module.ts gets generated by default where all the navigation codes get done.
We use the pathname of a particular page to navigate from one page to another.

In ionic, there are some navigation type as-

Tab navigation



Type caption for image (optional)

Controls the navigation of Tabs (4 tabs in the app). This is detailed in src/app/ tabs/tabs-router.module.ts. All the settings of Tab Navigation can be controlled from here.

Nested Segment and Tab navigation



Type caption for image (optional)

Title
Subtitle
Kicker


5. Feature Explanation


5.1. User Authentication

User authentication is often the first and most important part of the app. This template has pages for Login, Signup, Forgot password and Update password.

As per your requirements, you can either

— Allow a user to access the app without login/signup, and ask a login for specific features, OR

— Do not allow any access without login/signup. In this case the Login page with go on top of the router navigation in app-routing.module.ts. Only once there is a “login”, the user should be allowed access to the HomePage. Authentication can be achieved by your custom back-end or, if you are using Firebase, there are several easy authentication options. You can even choose to integrate social logins in the app. Check details here.

5.2. Adding rides, booking rides, History, etc

This template takes the dummy data from the JSON files placed in the data.service.ts file. If you only want to create static data, you can modify the JSON files’ data and the data in the page/ layout will change.

For example, in History— we see many past rides by the riders.

These details are imported from the JSON data from the data.service.ts file in src/app.

You can generate service in ionic by executing the command

ionic g service your service name


Type caption for image (optional)

Editing this data will edit the view in the page on serve or device.

Once you connect your back-end with the app, this JSON data will be replaced by the backend data. All the data labels are self-explanatory.

5.3 Images

You can choose to load images from URLs (recommended), or keep images in the local storage. If you are loading images from URL, keep a backup image to show in case the actual image takes time to load.

5.4. Geolocation and Map

This is the central component of the carpool app. This template has this feature — for getting users current location or allowing the user to feed his/her location and showing that on map.



Type caption for image (optional)

The app uses ionic @ionic-native/geolocation plugin for geolocation and @agm/core npm package for map view.

Geolocation for Cordova applications. Display the ‘current location’ of the user or device at the current time.

The AGM core package provides the ability to open and show location on the map and drag the location for location adjustment in the map.

5.5. Camera



Type caption for image (optional)

Providing Camera features is where you can change your profile picture using your app.

This template does have a Camera feature functionality but only UI.

You can change your app’s profile pictures by taking a picture and select any picture from the gallery using this plugin and save and retrieve this on a server after integrating it with proper back-end.

The app uses “ionic Cordova plugin add cordova-plugin-camera” plugin for camera and gallery.

5.6 Payments



Type caption for image (optional)

You can have a payment page like above for the payments of the rides with the help of some developer. You can implement the payments by using any one or multiple of the following for your rides…

Ionic PayPal

— Ionic Stripe

Ionic in-app purchase

— Ionic Apple Pay and Android Pay

Ionic Razorpay

— PhonePe

— GooglePay

— AmazonPay


Title
Subtitle
Kicker


6. Integrating Back-end Data


6.1. Data Structure

In each service.ts, there is a dummy data file placed to mimic the behavior of a back-end.

E.g. Following images shows the data and its structure in the carpool app. The data is in JSON format.



Type caption for image (optional)

Data is imported in the page.ts file as

this.ServiceProvider.cards
here, ServiceProvider is service name
cards is the JSON data in service

6.2 Back-end options

To make the app fully operational you will need to attach a back-end to the app. This will require several additions and you will need the assistance of a back-end developer.

We will provide a glimpse into the things you will require

Step 1 — Choose a back-end Technology

There are several options when it comes to the back-end. Some of the major ones are

  1. Node.js custom back-end
  2. 2. Firebase backend (node.js)
  3. 3. Django custom back-end
  4. 4. Ruby-on-rails custom back-end
  5. GO back-end

We recommend starting out with Firebase if you want quick turn-around of features. Firebase is a BaaS platform and comes with a bunch of ready-made functionality, like

— Storage

— Analytics

Push notifications

— In-app messages

Real-time database and much more.

Step 2 — Connect the back-end to the app

As explained in the section above, you will need to replace the Data coming in form individual JSON files with the data coming in from APIs (from your back-end).

To manage the data efficiently, you will need to arrange all API calls and data manipulation in a single location. You can manage API calls with HttpClient services orfirebase functions.


Title
Subtitle
Kicker


7.0 Troubleshooting


Refer this troubleshooting guide from Ionic framework docs to solve some common issues.


Title
Subtitle
Kicker


8.0 Third-party libraries, sources, and Credits


Major third-party libraries used in this app template are

All these are open-source libraries and the license & usage permission of the above are available on their respective URLs.

Assets images are used from unsplash.com. The usage of these images is free.


Title
Subtitle
Kicker



Ionic 4 Car Pooling App Starter — Carpool

With this starter kit, you can build a full working cab booking and sharing application to provide services to the people at an extremely convenient way, only by integrating with a back-end server with the help of a good back-end developer. Now let set go to get to know about this starter kit in detail here.



Type caption for image (optional)

Table of Contents

  1. Introduction — What is this template
  2. Features of this template

2.1 Screens

2.2 Features

2.3 Device compatibility

3. Setup and Installation

3.1 Introduction

3.2 Installation

3.3 Running your app

3.4 Run your app with changes

3.5 Creating icon and splash

3.6 Generating Release builds

4. Modifying code

4.1 Screen code structure

4.2 Styling structure

4.3 Logic structure

4.4 Running your app

4.4 Navigation structure

5. Feature Explanation

5.1 User Authentication

5.2 Adding rides, booking rides, History, etc

5.3 Recommendations

5.4 Geolocation and Map

5.5 Google Place Prediction

5.6 Chat Support

5.7 Camera

6. Integrating Back-end Data

6.1 Data structure

6.2 Back-end options

7. Troubleshooting

8. Third-party libraries, sources, and Credits

1. Introduction — What is this template

Carpool— An Ionic 4 Carpool and Ride-Sharing App Template is a mobile app theme/template. With this template, you can create a Carpool and Ride-Sharing apps like BlaBla Car, UberPool, ToGo, ber Eats, and Ola Share, etc.

This template is the front-end part of the carpool app, which means the screens and user interfaces (screens) are ready. You can easily change the screens, styles, and logics to suit your requirements. To make it a live app like BlaBla Car, UberPool, ToGo, ber Eats, and Ola Share, etc. you just need to add a back-end to the app, and load your data in the back-end.



Type caption for image (optional)

This template is made in IONIC 4 language. With IONIC 4, you can

  • Create iOS and an Android app with a single source code
  • Cut your project cost and time in half
  • Ensure exact same UI in iOS and Android, while following the standard UI norms
  • Saves separate updates for each app in future

2. Features of this template

2. 1. Screens

2.1.1 Landing



First screen when the app loads.

You will get this screen as the app loads successfully after the splash screen timeout. Here you are provided with two options on this screen one is log in and another one is signup. If a user already exists then he/she may opt for login or if he/she has no account on this application then the user will have to create an account by clicking on the signup button.
This page navigates you to the login page and signup page. Here this page only UI for demo purpose but you can make it a fully working application by integrating backend to it with the help of a good backend developer.

2.1.2 Login



Type caption for image (optional)

This page can be accessed from the Landing page as the app loads. By clicking on the login button after the required entries in the input field it redirects you to the home page.

The login page can be used to perform login action with username/email and password. Currently, the login is only for demo purposes.

The login page also contains “Forgot Password” and “Signup” page navigations.

2.1.3 Signup



Type caption for image (optional)

This page can be accessed as the app loads. By clicking on the signup button it redirects you to the Home page.

The signup page can be used to register a user with a username/email and password. Currently, the signup is only for demo purposes.

The signup page also contains “Login page “ page navigations.

2.1.4 Forgot Password



Forgot pass page for Carpool App.

This page can be accessed from the “Login” page. Forgot Password page can be used to send a reset password URL or OTP to the user’s email or any other way you want to use. Currently, this page is only UI. The email sent to the user can be verified from their mail and the user may be asked to provide a new password.

2.1.5 Home



Carpool Home page.

This is the first tab of the application. This page can be accessed after a successful login by a registered user for the application.

Home page contains two segments “CURRENT ” and “HISTORY” at the top of the page after the header. The current segment has options to OFFER A RIDE and FIND A RIDE options for a user.
The history segment has the details of all the rides taken in the past.

By clicking on any one options in the current segment, it will navigate to the Offer a ride page or Find a ride page.

2.1.6 History



Type caption for image (optional)

This is the first tab’s second segment of the application. This page can be accessed by clicking on the second segment “History” in the application.

this page contains all the information about previous rides.

2.1.7 Offer Ride — Pick-up



User’s pickup location.

This page can be accessed by clicking on offer a ride button on the home page. Here you can search for a pickup location of your choice or bu clicking on use current location to access your current location with the help of Ionic geolocation plugin.
This page navigates you to your pickup location’s view on the pickup map page.

2.1.8 Offer Ride — Pick-up — Map



Pick-up map view

This page can be accessed by clicking on any of the locations in pickup page.

This page depicts the exact pick-up location on the map. This page navigates to the drop-off page.

2.1.9 Offer Ride —Drop-off



Type caption for image (optional)

This page can be accessed by clicking on the arrow forward button on the pick-up-map page. Here you can select your drop location same as the pickup location. This page navigates to drop-off map view page.

2.1.10 Offer Ride —Drop-off— Map



Type caption for image (optional)

This page can be accessed by clicking on any of the locations in drop-off page.

This page depicts the exact drop location on the map. This page navigates to the add stopover page.

2.1.11 Add Stopover



Add stop in-between journey.

This page can be accessed by clicking on the arrow forward button on the drop-off-map page. Here you can select your stopover in-between the journey. This page navigates to map view page of your complete ride.

2.1.12 Add Stopover — Complete journey on the map.



Complete journey on map.

This page can be accessed by clicking on the confirm button on the Add Stopover page. This page shows the map view of the journey.
This page navigates to the calendar page.

2.1.13 Calender page



Calender Page


Calender View 

This page can be accessed by clicking on the Good for me button on the journey map view after the stopover selection. Here we can select the date of departure for your ride.
This page navigates you to the Select Time page.

2.1.14 Select time page



Ride of Time Page


Select ride time page

This page can be accessed by clicking on the arrow-forward button on the select date page. Here we can select the time of departure for the ride.
This page navigates to the comfort page.

2.1.15 Comfort page



Type caption for image (optional)

This page can be accessed after the pickup time selection. this page navigates you to the total no of carpool passenger’s page.

2.1.16 Total passengers



Tota seats, available for the pool.


This page can be accessed after comfort page by clicking on any button on that page. Here you can select the total number of passengers that you can take with you for the ride.
This page navigates you to the permission page to verify either passenger booking instantly or not ?.

2.1.17 Permission to book by Passengers instantly



Type caption for image (optional)

This page can be accessed after total passengers page by clicking on the arrow-forward button at the right end of the page.
This page navigates you to the recommended price per se seat page.

2.1.18 Recommended price per seat



Type caption for image (optional)

This page can be accessed after the permission page.
This page navigates to the don’t agree or confirmation price page.

2.1.19 Don’t Agree Page



Type caption for image (optional)

This page can be accessed after the recommended price page. This page navigates to the edit price page.

2.1.20 Edit Price



Edit price Page.

This page can be accessed from the don’t agree page. Here you can edit the price of the journey. This page navigates you to the return trip page.

2.1.21 Return Trip Plan



Type caption for image (optional)

This page can be accessed from the edit price page. This page navigates to the return journey plan Calender.

2.1.22 Return Trip Plan date selector



Type caption for image (optional)


Type caption for image (optional)

This page can be accessed from the return trip plan confirmation page. Here you can select the return date of the journey. This page navigates to the return time page.

2.1.23 Select return time 



Type caption for image (optional)


Type caption for image (optional)

This page can be accessed by clicking on the arrow-forward button on the select return date page. Here we can select the return time of pick for the ride.
This page navigates to message for the passenger's page.

2.1.24 Message for the passengers



your message for passengers.

This page can be accessed after the return time page. Here on this page, the user can add some messages or instructions about his/her ride. This page navigates to the ride confirmation page.

2.1.25 Offer Ride Confirmation



Offered ride confirmation

This page can be accessed after complete ride information. This page navigates to the Home page current segment.

2.1.26 Home Page — Current segment — offered rides



Type caption for image (optional)

This page can be accessed after filling and selecting all the details from the “OFFER A RIDE” to “RIDE CONFIRMATION”. This page contains the navigation to journey and stops page.

2.1.27 Home Page — Current segment — offered rides — Journey and Stops



Offered rides journey and stop details

This page can be accessed by clicking on the card in the home page.
This page navigates to:-
1. Journey & Stops
2. Passenger contribution
3. Passenger Options
4: Delete Offered Journey

2.1.28 Offered Rides — Journey and Stops — Journey & stops details



Type caption for image (optional)

This page can be accessed from the Journey & Stops. this page contains the details of the offered journey.

2.1.29 Offered Rides — Journey and Stops —Passenger contribution



Type caption for image (optional)

This page can be accessed from the Journey & Stops. This page contains the details of the price offered for the journey. Here you can edit the price and save that.

2.1.30 Offered Rides — Journey and Stops — Passenger options



Passenger options for offered journey

This page can be accessed from the Journey & Stops. This page contains the details of the passengers offered for the journey. Here you can edit the number of passengers and message for the passengers and save that.

2.1.31 Offered Rides — Journey and Stops — Delete Offered Journey



Delete ride

This page can be accessed from the Journey & stops page by clicking on the delete button at the bottom of the page. This page navigates to the first tab’s first segment.

2.1.32 Find a ride



Search for a ride

This is the second tab of the application. This page navigates to the: — 

  • Destination location
  • Pickup Location
  • Date and time selection

2.1.33 Find a ride — Pickup Location



Find a ride pickup location

This page can be accessed by clicking on the Pickup location in the second tab of the application. In this page, we can select the pickup location of our’s using google place prediction.
This page navigates back to find a ride page.

2.1.34 Find a ride — Destination Location



Type caption for image (optional)

This page can be accessed by clicking on the Destination location in the second tab of the application. In this page, we can select the destination location of our’s with the help google place prediction.
This page navigates back to find a ride page.

2.1.35 Find a ride — Date and Time



Date page


select date page


Time page


Select time page.

These pages can be accessed by clicking on the Date and Time button on the Find a ride page to select the date and time for the ride. This page navigates back to find a ride page. In find ride page after selecting all the information this page navigates to the available rides page by clicking on the search.

2.1.36 Find a ride — Available rides




Type caption for image (optional)

This page can be accessed by clicking on the search on the second tabs of the application after filling/ selecting all the required details of the ride. By selecting any ride it navigates to the ride details page.

2.1.37 Find a ride — Available rides details



Type caption for image (optional)

This page can be accessed by clicking on any card in the available rides page. The page contains detailed information about the available ride.

this page navigates to the total riding passenger's page.

2.1.38 Find a ride — Total passengers count



Passengers to ride.

This page can be accessed by clicking on the “CONTINUE” at the bottom of the available ride details page.
This page navigates to the “Book” page.

2.1.39 Find a ride — Book ride page



Book your ride page

this page can be accessed from the total passenger's count by clicking on the arrow-forward button at the bottom right most of the page.

This page navigates to the “Booking confirmation” page.

2.1.40 Find a ride — Booking confirmation



Alert for confirm booking


Booming in progress

These pages can be accessed from the “Book ride” page. This page processes the progress for booking confirmation.
This page navigates to the ride booked confirmation page.

2.1.41 Find a ride — Ride Booked



Ride booked successfully

This is the last page of the find a ride flow. This page navigates back to the find ride page after successful ride booking.

2.1.42 Inbox



Inbox page

This is the fourth tab of this application. This page contains the nesting of tabs and segments. This page has two segments at the top of the page below the header as “MESSAGES” and “NOTIFICATION”.This is the first segment of the inbox tabs.
This page navigates to the Chat page.

2.1.43 Inbox — Messages-Chat



Chat support

This page can be accessed by clicking on any chat contact in the “MESSAGES” segment.

Messages page contains the chat application for direct interaction to the carpool customer service. Here chat is only UI and for demo purpose.

2.1.44 Inbox — Notification



Type caption for image (optional)

This is the second segment of the inbox tabs. This page contains the notification as list items in the vertical direction of the page. To enable and disable mobile notifications, you will first need a Push notifications system in your back-end. If you are using Firebase — implementing, enabling and disabling push notification is very easy compared to a custom back-end. Read more about Firebase- Ionic push notificationhere.

You will first need a Push notifications system in your back-end. If you are using Firebase — implementing, enabling and disabling push notification is very easy compared to a custom back-end. Read more about Firebase- Ionic push notification here.

2.1.45 Profile



Type caption for image (optional)

This is the fifth tab and the first segment of this application. This page contains the nesting of tabs and segments. This page has two segments at the top of the page below the header as “DETAILS” and “ACCOUNTS”. This is the first segment of the profile tabs. This segment has a list of actions in vertical direction. All the action executes as…

  1. Mini Biography
  2. Add my preferences
  3. Verify my id
  4. Verify mobile number
  5. verify email
  6. Add a car

2.1.46 Profile — Mini Biography



Type caption for image (optional)

This page can be accessed from the “Profile” page.

The options available can be chosen to edit user name, email address, update password, address, contact, Gender, DOB, Bio, and etc as per your requirement and update all those. Back button takes you back to the “Profile” page.

2.1.47 Profile — Add my preferences



Type caption for image (optional)

This page can be accessed from the “Profile” page by clicking on the “Add my preferences”. Here you can edit your preferences and update that. The save preferences button will update your data in the database and navigate back to the profile tab. Here this is only UI for demo purpose.

2.1.48 Profile —Verify my id



Type caption for image (optional)

This page can be accessed from the “Profile” page by clicking on the Verify my id”. This page will navigate to update document details.

2.1.49 Profile — Update Document



Update document details


Type caption for image (optional)

This page can be accessed from the “Verify my id” page by clicking on the “Driving License”. This page will navigate to the camera.

Here this is only UI and for demo purpose. You can make it in a fully functioning app by integrating back-end with the help of a back-end developer.

2.1.50 Profile —Verify mobile number



Type caption for image (optional)

This page can be accessed from the “Profile” page first segment. Verify mobile numbers page can be used to authenticate a user to check a user is registered or not. After entering the registered mobile number it navigates the user to the OTP verification page which a user receives after entering his/her mobile number.

Here these two pages are only UI and for demo purpose.

2.1.51 Profile — OTP Verification



Type caption for image (optional)

This page can be accessed after entering the phone number in with phone number page. In this page, received OTP on user’s mobile gets verified for letting the user to access the home page. On clicking “CONTINUE” it navigates back to the apps profile tab.
This page here is only the UI but you can make it a fully working app by integrating a suitable backend by a developer.

2.1.52 Profile — Verify email



Type caption for image (optional)

This page can be accessed by clicking on the verify email in the profile page.
Here you can control the emails you want to get either all of them, just the important stuff or the bare minimum. Here you have the options to enable and disable email notifications.

You will first need a Push notifications system in your back-end. If you are using Firebase — implementing, enabling and disabling push notification is very easy compared to a custom back-end. Read more about Firebase- Ionic push notification here.
Here this is only the UI for demo purpose.

2.1.53 Profile — Add a car



Type caption for image (optional)

This page can be accessed by clicking on the Add a car in the profile page.
This page navigates to the add new vehicle page.


2.1.54 Profile — Add a car — Add new vehicle



Type caption for image (optional)


Type caption for image (optional)

This page can be accessed by clicking on the Add button at the very bottom in the Add a car page of the profile page. Here the items are listed in a list view in the vertical direction. Each item contains a dropdown menu to select the matching item from them.
By clicking on the “COMPLETE” button it will navigate back to the add car page. 

2.2 Features

2.2.1 Geolocation



Type caption for image (optional)

This can be accessed by clicking on the pickup page or drop-off page on the find ride page. This allows the app to get your current location by clicking on the current location button.

2.2.2 Google Map



Type caption for image (optional)

Google map shows us the current location of the app by clicking on the current location or by filling the input field in the pickup or drop location. This shows us the exact point of our location on the map.

2.2.3 Google Place Prediction



Type caption for image (optional)

As mentioned earlier in the geolocation, by filling the input text in the set pickup page or drop-off page, this will show you some predicted locations according to your filled entries in the text input field. By selecting any predicted location it will store that location and show that on Find a ride pages' pickup and destination location individually.

2.2.4 Chat Support



Type caption for image (optional)

Chat support provides us the facility to interact with the customer service provider directly. We can ask our queries and get a solution from their side. This provides us the real-time solution of our related queries.
Here in the app, this is only the UI for demo purpose but you can make it in fully functioning real-time chat support by integrating back-end which I mentioned earlier, with the help of any back-end developer.

2.2.5 Camera



Change profile picture

By using ionic native camera plugin we get the facility to take a picture and save that as a profile picture, we may save that on the server and retrieve that any time as per requirement. We can you back-end for this or we may use ionic native Squalite storage or ionic storage to store data locally and retrieve that when there is no back-end. Or we can pick a picture from the gallery to make that our profile picture. You can follow this link to pick a picture from the gallery with the help of ionic native camera plugin.

2.3 Device Compatibility

As mentioned earlier, the app is written in Ionic 4 and angular language. This allows a single source code to create both iOS and Android apps.

This template has been tested in all latest Android versions and major devices.

This template has also been tested in all latest versions of iPhones, including iPhone X.

3. Setup and Installation

Carpool is a carpooling and ride-sharing application made with Ionic 4 and angular.

For navigation in the application, we have used default angular navigation.

3.1 What is Ionic Framework

Ionic Framework is an open-source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies (HTML, CSS, and JavaScript).

Ionic Framework is focused on the frontend user experience, or UI interaction of an app (controls, interactions, gestures, animations). It’s easy to learn and integrates nicely with other libraries or frameworks, such as Angular, or can be used standalone without a frontend framework using a simple script include.

3.2 How can I use this template

This template is a ready-made front-end template for a carpooling and ride-sharing App. You can use the screens coded in this app, navigation between the screens and specific functions applied to buttons, etc. This saves your 100% cost and time in front-end UI development. You can simply add a back-end/server to this app template, and replace the demo data with data coming from your server. This way, you only spend time and money on back-end development.

3.3 Installation

Setting Up Environment and Installing Dependencies

# Install the Ionic CLI

npm install -g ionic

# Start an App

ionic start myApp tabs/blank/sidemenu
whatever is your requirement you can select that and remove others from tabs/blank/sidemenu.

#Angular + Ionic Framework

npm install @ionic/angular@latest --save

# Node & npm

Almost all tooling for modern JavaScript projects is based in Node.js. The download page has prebuilt installation packages for all platforms. We recommend selecting the LTS version to ensure the best compatibility.

Node is bundled with npm, the package manager for JavaScript.

To verify the installation, open a new terminal window and run:

node --version
$ npm --version

# iOS Setup

To target iOS, some additional environment setup is required. Unfortunately, iOS apps can only be created on macOS.

For iOS setup please follow the steps provided in the link here

#Run the App

cd your app name
ionic serve

For iOS build, follow the steps provided in the link here

For the android build, execute the following command

ionic cordova prepare android
ionic cordova run android




Type caption for image (optional)

3.4 Creating Icon and Splash screen

For creating an icon and splash first paste your icon and splash in the resources folder and then execute the following command in your project directory

ionic cordova platform add android 
ionic cordova resources
ionic cordova build android

4. Modifying code

4.1 Screen / View’s Code Structure



Type caption for image (optional)

4.2 Overall Folder Structure

There are broadly 40+ pages in this template. All pages are shown in the src/app folder above. Mostly, each page’s code is kept in a separate folder. Folder names are self-explanatory. You can create a page by executing the command

ionic cordova generate page your page name

This will create a folder of page name containing four files as -

In the case of Ionic 4, pages are generated with lazy loading by default which means a page has its own module.

├── enappd.html
├── enappd.module.ts
├── enappd.scss
└── enappd.ts
  • enappd.html: contains UI components for the page.
  • enappd.scss: contains sass styles to style your page.
  • enappd.ts: contains TypeScript code

4.3 Layout File Code Structure

The layout file has the structure shown in the image.

• imports are written on the top.

• @component is the decorator that marks a class as an Angular component and provides configuration metadata that determines how the component should be processed, instantiated, and used at runtime.

• A constructor is used for dependency injections.

When the app loads the constructor gets called first then ngOnInit.

After constructor and inside the class we can write our logic for the page/component in page.ts



Type caption for image (optional)

4.4. Styling Code Structure



Type caption for image (optional)

style page are generated by default for each page after executing page generate command, inside the page folder.

4.5. Navigation Code Structure



Type caption for image (optional)

On creating a project in ionic a file named app-routing.module.ts gets generated by default where all the navigation codes get done.
We use the pathname of a particular page to navigate from one page to another.

In ionic, there are some navigation type as-

Tab navigation



Type caption for image (optional)

Controls the navigation of Tabs (4 tabs in the app). This is detailed in src/app/ tabs/tabs-router.module.ts. All the settings of Tab Navigation can be controlled from here.

Nested Segment and Tab navigation



Type caption for image (optional)

5. Feature Explanation

5.1. User Authentication

User authentication is often the first and most important part of the app. This template has pages for Login, Signup, Forgot password and Update password.

As per your requirements, you can either

— Allow a user to access the app without login/signup, and ask a login for specific features, OR

— Do not allow any access without login/signup. In this case the Login page with go on top of the router navigation in app-routing.module.ts. Only once there is a “login”, the user should be allowed access to the HomePage. Authentication can be achieved by your custom back-end or, if you are using Firebase, there are several easy authentication options. You can even choose to integrate social logins in the app. Check details here.

5.2. Adding rides, booking rides, History, etc

This template takes the dummy data from the JSON files placed in the data.service.ts file. If you only want to create static data, you can modify the JSON files’ data and the data in the page/ layout will change.

For example, in History— we see many past rides by the riders.

These details are imported from the JSON data from the data.service.ts file in src/app.

You can generate service in ionic by executing the command

ionic g service your service name


Type caption for image (optional)

Editing this data will edit the view in the page on serve or device.

Once you connect your back-end with the app, this JSON data will be replaced by the backend data. All the data labels are self-explanatory.

5.3 Images

You can choose to load images from URLs (recommended), or keep images in the local storage. If you are loading images from URL, keep a backup image to show in case the actual image takes time to load.

5.4. Geolocation and Map

This is the central component of the carpool app. This template has this feature — for getting users current location or allowing the user to feed his/her location and showing that on map.



Type caption for image (optional)

The app uses ionic @ionic-native/geolocation plugin for geolocation and @agm/core npm package for map view.

Geolocation for Cordova applications. Display the ‘current location’ of the user or device at the current time.

The AGM core package provides the ability to open and show location on the map and drag the location for location adjustment in the map.

5.5. Camera



Type caption for image (optional)

Providing Camera features is where you can change your profile picture using your app.

This template does have a Camera feature functionality but only UI.

You can change your app’s profile pictures by taking a picture and select any picture from the gallery using this plugin and save and retrieve this on a server after integrating it with proper back-end.

The app uses “ionic Cordova plugin add cordova-plugin-camera” plugin for camera and gallery.

5.6 Payments



Type caption for image (optional)

You can have a payment page like above for the payments of the rides with the help of some developer. You can implement the payments by using any one or multiple of the following for your rides…

Ionic PayPal

— Ionic Stripe

Ionic in-app purchase

— Ionic Apple Pay and Android Pay

Ionic Razorpay

— PhonePe

— GooglePay

— AmazonPay

6. Integrating Back-end Data

6.1. Data Structure

In each service.ts, there is a dummy data file placed to mimic the behavior of a back-end.

E.g. Following images shows the data and its structure in the carpool app. The data is in JSON format.



Type caption for image (optional)

Data is imported in the page.ts file as

this.ServiceProvider.cards
here, ServiceProvider is service name
cards is the JSON data in service

6.2 Back-end options

To make the app fully operational you will need to attach a back-end to the app. This will require several additions and you will need the assistance of a back-end developer.

We will provide a glimpse into the things you will require

Step 1 — Choose a back-end Technology

There are several options when it comes to the back-end. Some of the major ones are

  1. Node.js custom back-end
  2. 2. Firebase backend (node.js)
  3. 3. Django custom back-end
  4. 4. Ruby-on-rails custom back-end
  5. GO back-end

We recommend starting out with Firebase if you want quick turn-around of features. Firebase is a BaaS platform and comes with a bunch of ready-made functionality, like

— Storage

— Analytics

Push notifications

— In-app messages

Real-time database and much more.

Step 2 — Connect the back-end to the app

As explained in the section above, you will need to replace the Data coming in form individual JSON files with the data coming in from APIs (from your back-end).

To manage the data efficiently, you will need to arrange all API calls and data manipulation in a single location. You can manage API calls with HttpClient services orfirebase functions.

7.0 Troubleshooting

Refer this troubleshooting guide from Ionic framework docs to solve some common issues.

8.0 Third-party libraries, sources, and Credits

Major third-party libraries used in this app template are

All these are open-source libraries and the license & usage permission of the above are available on their respective URLs.

Assets images are used from unsplash.com. The usage of these images is free.

_doc_end_


Title
Subtitle
Kicker