Ionic V4 Tinder Styled App Starter - Dating

Ionic V4 Tinder Styled App Starter — Dating

Table of Contents

1. Introduction — What is this template

2. Features of this template

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 V4 Tinder Styled App Starter — Dating




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

4.5 Navigation Code Structure

4.6 Nested segment navigation

5. Feature Explanation

5.1 User Authentication

5.2 Adding cards, Settings, Edit Profile, etc

5.3 Recommendations

5.4 Swipe-able cards

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


Our Ionic 4 Dating App Template is a mobile app starter/template . With this template, you can create a Dating app like Tinder, eHarmony, OkCupid, Match.com, etc.

This template is the front-end part of the dating 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 Tinder, eHarmony, OkCupid, Match.com, etc. you just need to add a back-end to the app, and load your data in the back-end.


Ionic 4 Dating App Template

Ionic 4 Dating App Template

This template is made in Ionic 4 . 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 Login



Type caption for image (optional)

This page can be accessed as the app loads. By clicking on the login button it navigates you to the login verification page.

The login page can be used to perform login action with the phone number or by facebook social login. Currently, facebook login is only for demo purposes you can follow our tutorial to implement facebook login in Ionic4.

The login page contains “Account recovery” page navigations too.

2.1.2 Account Recovery



Type caption for image (optional)

This page can be accessed as the app loads. By clicking on the “Trouble login in?” it redirects you to the account recovery page.

The account recovery page can be used to recover a user account with a username/email. Currently, the account recovery is only for demo purposes.

The account recovery page also contains “Login page “ page navigations.

2.1.3 Login with phone number



Type caption for image (optional)

This page can be accessed from the “Login” page. Login with phone number 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.4 OTP Verification



Type caption for image (optional)

This page can be accessed after entering the phone number in login 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 to the apps home page.
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.5 Home



Dating app’s swipeable cards


Cancel button — Swipe LEFT — Dislike


Heart button — Swipe RIGHT — Like


Star button — SwipeTop — SuperLike

Home page contains three-segment at the top and five buttons at the bottom of the page. This is the Home page’s second segment of the application.

Home page contains swipe-able cards like tinder app. Here you can swipe left, right, top, bottom for different tasks. The bottom buttons of the card execute different tasks as follows…

Cancel button — Swipe LEFT — Dislike
Heart button — Swipe RIGHT — Like
Star button — SwipeTop — SuperLike
Repeat button — opens a modal for Dating Plus subscription and navigates to dating plus page.
Flash button — Opens modal for booster.
SwipeBottom — Reject

There is an information icon in the bottom right of the card which navigates to the profile details page. It also contains a segment in the header of the page,

2.1.6 Get Plus membership



Get Dating plus membership

This page can be accessed by clicking on the repeat button on the home page. User can get premium access to dating app for preferred and best matching of their profile by applying paid plus membership.
You can integrate payment methods for plus membership with the help of a developer. Here this is only UI. This page navigates to Tinder plus page.

2.1.7 My Tinder Plus



My Tinder Plus

This page can be accessed from the home page’s tinder plus modal.
This page is very helpful for tinder plus members to control their preferences from a list of settings. All the preferences have the toggle functionality to allow or reject preferences. Here this is only the UI for demo purpose.

2.1.8 Swipe Profile Information



Type caption for image (optional)

This page can be accessed by clicking on the info button at the right bottom of each swipeable card. This page contains detailed information of the selected matching person. Here, the arrow-down icon at the center of the page navigates back to the candidate's swipeable card at home page.

2.1.9 Chat — MESSAGES



Chat list

This page can be accessed by clicking on the third segment of the home page.
This segment has nested segments including “MESSAGES” and “FEED”.
This page contains the list of people matched and contacted on dating app. By clicking on any contact you can start chatting with him/her. 

2.1.10 Chat — FEED



Feed Page

This is the home page’s third segments second segment. This page contains the exactly matched profile with which you can chat, check their profile and many more. Here this is for demo purpose, this is only UI.You can get it in a fully working app like the tinder app for dating. This page contains a options popover, you can access it by clicking the options button at the top right-most corner of the card header.

2.1.11 Chat — FEED — Popover



Feed popover actions


Report a user page.

This page contains different tasks to execute in Dating app as follows….

  1. Unmatch
  2. Report
  3. Share Profile
  4. Open chat
  5. Open profile

When you click on unmatch then it will unmatch your profile to this matched profile, here this is only the UI.
When you click on the report then a modal will appear where you can choose an option to report about this profile.
Share profile is used to share profile using social sharing methods or share by mail method among friends and families. On clicking chat, it will navigate to the matched user’s chat page and when you click on Open profile it will navigate to the profile page.

2.1.12 Chat 



Type caption for image (optional)

This page can be accessed by clicking on any of the contact’s chat head in message’s segment. Chat support provides us the facility to interact with the matched profile directly. With this, we can start interacting with the matched people and build a good relation.
Here in the app, this is only the UI for demo purpose but you can make it in a fully functioning real-time chat app by integrating back-end with the help of any back-end developer.You can check out another awesome interacting chat templates here…

2.1.13 User Page



Dating app user’s page.

On clicking the third segment of the home page this page can be accessed.

This page contains information about the user profile and settings. In this page, the user can edit his/her profile and set the settings of the app as per his requirement. In this page, the user can upload his profile picture from media or facebook. This page navigates to settings page, edit info page, and add media page.


2.1.14 Settings Page



Type caption for image (optional)

This page can be accessed by clicking on the settings on the user page. In any app, settings page plays an important role in setting user’s preferences and requirement, here user can set the preferences for Push Notification, Email Notifications, and Team dating notifications.
This page allows you to toggle some preferences and navigates to other pages to select choices.
This page allows the user to select the maximum distance to search for the profile to match with the user’s profile, setting the age range, toggle to show the user’s profile on the app, share user’s feed, setting data usage, managing Top Picks, managing push and email notifications, sharing the app with friends and contacts, and to delete account from the app.

This page navigates to…
i. Account Setting
ii. Show Me
iii. Share my feed
iv. Autoplay videos
v. Email Setting
vi. Push Notifications
vii. Team Dating
viii. Delete Account

We can select and set any setting from the list of settings arranged in the vertical direction. This is the only UI for the demo purpose.

2.1.15 Settings Page — Phone Number Setting



Type caption for image (optional)

This page can be accessed by clicking on the Account setting in the setting page.

Here we can edit our registered contact number and update with the new one. Here this is only the UI for demo purpose.

2.1.16 Settings Page — Show Me



Type caption for image (optional)

This page can be accessed by clicking on the Show me in the setting page.

Here we can select our gender preference and let the application search the filtered preference for you. Here this is only the UI for demo purpose.

2.1.17 Settings Page — Share my feed



Type caption for image (optional)

This page can be accessed by clicking on the Share my feed in the setting page.

This page lets the user to allow or disallow sharing their social content with other user’s to increase their chances of receiving messages.

This page contains the toggle at the right side of each item of the page. To enable and disable sharing feed settings, you may toggle them. Here this is only the UI for demo purpose.

2.1.18 Settings Page — Autoplay videos



Type caption for image (optional)

This page can be accessed by clicking on the Autoplay videos in the setting page.
This page allows you to check when to use data to play videos because playing videos use more data than displaying photos.

2.1.19 Settings Page — Email Setting



Type caption for image (optional)

This page can be accessed by clicking on the Email Setting in the setting page.
Control the emails you want to get- all of them, just the important stuff or the bare minimum.
Here this is only the UI for demo purpose.

2.1.20 Settings Page — Push Notifications



Type caption for image (optional)

This page can be accessed by clicking on the Push Notifications in the setting page.

Here you can enable and disable your notifications related to a new match, messages, likes, super likes, and top picks in the Dating app. 

This page contains the toggle at the right side of each item of the page. To enable and disable push notification, you may toggle them.

 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.21 Settings Page —Team Dating



Type caption for image (optional)

This page can be accessed by clicking on the Team Dating in the setting page.
Here you can enable or disable to receive news, update, and offers from Dating App.

2.1.23 Settings Page — Delete Account



Type caption for image (optional)

This page can be accessed by clicking on the Delete Account in the setting page at the very bottom of the page.


this page lets the user to pause the account or delete the account from the app. This page navigates to the Delete my account page.

2.1.24 Settings Page — Delete My Account



Type caption for image (optional)

This page can be accessed by clicking on the Delete My Account in the delete account page at the very bottom of the page.

This page allows the user to delete/ deactivate their account from the app.

2.1.25 User profile— Add media



Type caption for image (optional)

This page can be accessed from the user profile page by clicking on the “ADD MEDIA” button. Here you can change your profile picture by selecting facebook’s profile picture from facebook or you may opt to use your device gallery to select a picture. Here this page is only UI for demo purpose.
You can integrate Facebook Login using firebase in Ionic 4 by following this tutorial.


2.1.25 User profile — Edit Profile



Type caption for image (optional)

This page can be accessed from the user profile page by clicking on the “EDIT INFO” button. Here you can edit your profile information and enable or disable authentications like to show your age, your distance visible to others and many more.
Here this page is only UI for demo purpose but you can make it a fully functioning real-time app by integrating back-end with the help of a back-end developer.

2.2 Features

2.2.1 Chat Support



Chat page

This page can be accessed by clicking on any of the contact’s chat head in message’s segment. Chat support provides you the advantage to interact with the matched profile directly or message someone whom you like.
With this, we can start interacting with the matched people and build a good relation.
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 with the help of a back-end developer.

2.2.2 Swipe-able cards



Swipe Left, Right, Top, Bottom

Most of the user wants something attractive and functional, here the swipeable cards fulfills that need and perform extraordinary tasks for you.

 It lets you swipe LEFT, RIGHT, TOP, and BOTTOM to perform multiple tasks and express your views. You can swipe cards right to like someones' profile and can swipe left to dislike a particular profile. You may swipe up for a super like. The UI is amazingly attractive and gives you a perfect view to your eyes.

2.3 Device Compatibility

As mentioned earlier, the app is written in Ionic 4 and angular language. This allows 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


Dating is matchmaking or a date 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 dating/matchmaking 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

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

Install the Ionic CLI

$ npm install -g ionic

#Angular + Ionic Framework

$ npm install @ionic/angular@latest --save

# iOS Setup

To target iOS, some additional environment setup is required. Unfortunately, iOS apps can only be created on macOS (or using Ionic AppFlow, which is a paid feature)

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

#Run the App

After installing all dependencies, you just need to run following command to run your app in the browser

$ cd your app name
$ ionic serve

For iOS build, follow the steps provided in the link here. Once all setup is done, you just need to run

// add ios platform
$ ionic cordova platform add ios 
// build ios for running in device or simulator
$ ionic cordova prepare ios

and then open the .xcworkspace file in Xcode, and run the app in iOS device or simulator.

For Android build, execute the following command

// add android platform
$ ionic cordova platform add android 
// build android for running in device or simulator
$ ionic cordova build android 
//run android app in device or simulator
$ 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.png (10241024) and splash.png (2732x2732) in the resources folder and then execute the following command in your project directory

$ ionic cordova resources

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 30+ 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 pages 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 Ionic4 a file named app-routing.module.ts gets generated by default where all the navigation codes get done.
We use the path name of a particular page to navigate from one page to another.-

4.6 Nested Segment navigation



Type caption for image (optional)

Controls the navigation of Segments(3 Segment buttons in the app). This is detailed in src/app/ home/home.page.ts. All the settings of Segment Navigation can be controlled from here.


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, 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 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 cards, Settings, Edit Profile, 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, on the Homepage — we see an array of cards.

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

You can generate service in Ionic4 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. Swipe-able cards

This is the central component of the dating app. This template has this feature — for getting the interactive animations to users and allowing the user to express his/her perception about the profiles and perform various actions according to that.



Type caption for image (optional)

The app uses Ionic angular2-swing npm package for swipe-able card gestures and ionic-swing npm package as a wrapper for swipe views.


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 swipeable cards on the home page. The data is in JSON format.



Type caption for image (optional)

Data is imported in the page.ts file as

this.service.cards
here, service is service provider 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 back-end. Some of the major ones are

  1. Node.js custom back-end
  2. 2. Firebase back-end (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


Ionic V4 Tinder Styled App Starter — Dating



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

4.5 Navigation Code Structure

4.6 Nested segment navigation

5. Feature Explanation

5.1 User Authentication

5.2 Adding cards, Settings, Edit Profile, etc

5.3 Recommendations

5.4 Swipe-able cards

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

Our Ionic 4 Dating App Template is a mobile app starter/template . With this template, you can create a Dating app like Tinder, eHarmony, OkCupid, Match.com, etc.

This template is the front-end part of the dating 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 Tinder, eHarmony, OkCupid, Match.com, etc. you just need to add a back-end to the app, and load your data in the back-end.


Ionic 4 Dating App Template

Ionic 4 Dating App Template

This template is made in Ionic 4 . 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 Login



Type caption for image (optional)

This page can be accessed as the app loads. By clicking on the login button it navigates you to the login verification page.

The login page can be used to perform login action with the phone number or by facebook social login. Currently, facebook login is only for demo purposes you can follow our tutorial to implement facebook login in Ionic4.

The login page contains “Account recovery” page navigations too.

2.1.2 Account Recovery



Type caption for image (optional)

This page can be accessed as the app loads. By clicking on the “Trouble login in?” it redirects you to the account recovery page.

The account recovery page can be used to recover a user account with a username/email. Currently, the account recovery is only for demo purposes.

The account recovery page also contains “Login page “ page navigations.

2.1.3 Login with phone number



Type caption for image (optional)

This page can be accessed from the “Login” page. Login with phone number 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.4 OTP Verification



Type caption for image (optional)

This page can be accessed after entering the phone number in login 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 to the apps home page.
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.5 Home



Dating app’s swipeable cards


Cancel button — Swipe LEFT — Dislike


Heart button — Swipe RIGHT — Like


Star button — SwipeTop — SuperLike

Home page contains three-segment at the top and five buttons at the bottom of the page. This is the Home page’s second segment of the application.

Home page contains swipe-able cards like tinder app. Here you can swipe left, right, top, bottom for different tasks. The bottom buttons of the card execute different tasks as follows…

Cancel button — Swipe LEFT — Dislike
Heart button — Swipe RIGHT — Like
Star button — SwipeTop — SuperLike
Repeat button — opens a modal for Dating Plus subscription and navigates to dating plus page.
Flash button — Opens modal for booster.
SwipeBottom — Reject

There is an information icon in the bottom right of the card which navigates to the profile details page. It also contains a segment in the header of the page,

2.1.6 Get Plus membership



Get Dating plus membership

This page can be accessed by clicking on the repeat button on the home page. User can get premium access to dating app for preferred and best matching of their profile by applying paid plus membership.
You can integrate payment methods for plus membership with the help of a developer. Here this is only UI. This page navigates to Tinder plus page.

2.1.7 My Tinder Plus



My Tinder Plus

This page can be accessed from the home page’s tinder plus modal.
This page is very helpful for tinder plus members to control their preferences from a list of settings. All the preferences have the toggle functionality to allow or reject preferences. Here this is only the UI for demo purpose.

2.1.8 Swipe Profile Information



Type caption for image (optional)

This page can be accessed by clicking on the info button at the right bottom of each swipeable card. This page contains detailed information of the selected matching person. Here, the arrow-down icon at the center of the page navigates back to the candidate's swipeable card at home page.

2.1.9 Chat — MESSAGES



Chat list

This page can be accessed by clicking on the third segment of the home page.
This segment has nested segments including “MESSAGES” and “FEED”.
This page contains the list of people matched and contacted on dating app. By clicking on any contact you can start chatting with him/her. 

2.1.10 Chat — FEED



Feed Page

This is the home page’s third segments second segment. This page contains the exactly matched profile with which you can chat, check their profile and many more. Here this is for demo purpose, this is only UI.You can get it in a fully working app like the tinder app for dating. This page contains a options popover, you can access it by clicking the options button at the top right-most corner of the card header.

2.1.11 Chat — FEED — Popover



Feed popover actions


Report a user page.

This page contains different tasks to execute in Dating app as follows….

  1. Unmatch
  2. Report
  3. Share Profile
  4. Open chat
  5. Open profile

When you click on unmatch then it will unmatch your profile to this matched profile, here this is only the UI.
When you click on the report then a modal will appear where you can choose an option to report about this profile.
Share profile is used to share profile using social sharing methods or share by mail method among friends and families. On clicking chat, it will navigate to the matched user’s chat page and when you click on Open profile it will navigate to the profile page.

2.1.12 Chat 



Type caption for image (optional)

This page can be accessed by clicking on any of the contact’s chat head in message’s segment. Chat support provides us the facility to interact with the matched profile directly. With this, we can start interacting with the matched people and build a good relation.
Here in the app, this is only the UI for demo purpose but you can make it in a fully functioning real-time chat app by integrating back-end with the help of any back-end developer.You can check out another awesome interacting chat templates here…

2.1.13 User Page



Dating app user’s page.

On clicking the third segment of the home page this page can be accessed.

This page contains information about the user profile and settings. In this page, the user can edit his/her profile and set the settings of the app as per his requirement. In this page, the user can upload his profile picture from media or facebook. This page navigates to settings page, edit info page, and add media page.


2.1.14 Settings Page



Type caption for image (optional)

This page can be accessed by clicking on the settings on the user page. In any app, settings page plays an important role in setting user’s preferences and requirement, here user can set the preferences for Push Notification, Email Notifications, and Team dating notifications.
This page allows you to toggle some preferences and navigates to other pages to select choices.
This page allows the user to select the maximum distance to search for the profile to match with the user’s profile, setting the age range, toggle to show the user’s profile on the app, share user’s feed, setting data usage, managing Top Picks, managing push and email notifications, sharing the app with friends and contacts, and to delete account from the app.

This page navigates to…
i. Account Setting
ii. Show Me
iii. Share my feed
iv. Autoplay videos
v. Email Setting
vi. Push Notifications
vii. Team Dating
viii. Delete Account

We can select and set any setting from the list of settings arranged in the vertical direction. This is the only UI for the demo purpose.

2.1.15 Settings Page — Phone Number Setting



Type caption for image (optional)

This page can be accessed by clicking on the Account setting in the setting page.

Here we can edit our registered contact number and update with the new one. Here this is only the UI for demo purpose.

2.1.16 Settings Page — Show Me



Type caption for image (optional)

This page can be accessed by clicking on the Show me in the setting page.

Here we can select our gender preference and let the application search the filtered preference for you. Here this is only the UI for demo purpose.

2.1.17 Settings Page — Share my feed



Type caption for image (optional)

This page can be accessed by clicking on the Share my feed in the setting page.

This page lets the user to allow or disallow sharing their social content with other user’s to increase their chances of receiving messages.

This page contains the toggle at the right side of each item of the page. To enable and disable sharing feed settings, you may toggle them. Here this is only the UI for demo purpose.

2.1.18 Settings Page — Autoplay videos



Type caption for image (optional)

This page can be accessed by clicking on the Autoplay videos in the setting page.
This page allows you to check when to use data to play videos because playing videos use more data than displaying photos.

2.1.19 Settings Page — Email Setting



Type caption for image (optional)

This page can be accessed by clicking on the Email Setting in the setting page.
Control the emails you want to get- all of them, just the important stuff or the bare minimum.
Here this is only the UI for demo purpose.

2.1.20 Settings Page — Push Notifications



Type caption for image (optional)

This page can be accessed by clicking on the Push Notifications in the setting page.

Here you can enable and disable your notifications related to a new match, messages, likes, super likes, and top picks in the Dating app. 

This page contains the toggle at the right side of each item of the page. To enable and disable push notification, you may toggle them.

 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.21 Settings Page —Team Dating



Type caption for image (optional)

This page can be accessed by clicking on the Team Dating in the setting page.
Here you can enable or disable to receive news, update, and offers from Dating App.

2.1.23 Settings Page — Delete Account



Type caption for image (optional)

This page can be accessed by clicking on the Delete Account in the setting page at the very bottom of the page.


this page lets the user to pause the account or delete the account from the app. This page navigates to the Delete my account page.

2.1.24 Settings Page — Delete My Account



Type caption for image (optional)

This page can be accessed by clicking on the Delete My Account in the delete account page at the very bottom of the page.

This page allows the user to delete/ deactivate their account from the app.

2.1.25 User profile— Add media



Type caption for image (optional)

This page can be accessed from the user profile page by clicking on the “ADD MEDIA” button. Here you can change your profile picture by selecting facebook’s profile picture from facebook or you may opt to use your device gallery to select a picture. Here this page is only UI for demo purpose.
You can integrate Facebook Login using firebase in Ionic 4 by following this tutorial.


2.1.25 User profile — Edit Profile



Type caption for image (optional)

This page can be accessed from the user profile page by clicking on the “EDIT INFO” button. Here you can edit your profile information and enable or disable authentications like to show your age, your distance visible to others and many more.
Here this page is only UI for demo purpose but you can make it a fully functioning real-time app by integrating back-end with the help of a back-end developer.

2.2 Features

2.2.1 Chat Support



Chat page

This page can be accessed by clicking on any of the contact’s chat head in message’s segment. Chat support provides you the advantage to interact with the matched profile directly or message someone whom you like.
With this, we can start interacting with the matched people and build a good relation.
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 with the help of a back-end developer.

2.2.2 Swipe-able cards



Swipe Left, Right, Top, Bottom

Most of the user wants something attractive and functional, here the swipeable cards fulfills that need and perform extraordinary tasks for you.

 It lets you swipe LEFT, RIGHT, TOP, and BOTTOM to perform multiple tasks and express your views. You can swipe cards right to like someones' profile and can swipe left to dislike a particular profile. You may swipe up for a super like. The UI is amazingly attractive and gives you a perfect view to your eyes.

2.3 Device Compatibility

As mentioned earlier, the app is written in Ionic 4 and angular language. This allows 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

Dating is matchmaking or a date 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 dating/matchmaking 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

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

Install the Ionic CLI

$ npm install -g ionic

#Angular + Ionic Framework

$ npm install @ionic/angular@latest --save

# iOS Setup

To target iOS, some additional environment setup is required. Unfortunately, iOS apps can only be created on macOS (or using Ionic AppFlow, which is a paid feature)

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

#Run the App

After installing all dependencies, you just need to run following command to run your app in the browser

$ cd your app name
$ ionic serve

For iOS build, follow the steps provided in the link here. Once all setup is done, you just need to run

// add ios platform
$ ionic cordova platform add ios 
// build ios for running in device or simulator
$ ionic cordova prepare ios

and then open the .xcworkspace file in Xcode, and run the app in iOS device or simulator.

For Android build, execute the following command

// add android platform
$ ionic cordova platform add android 
// build android for running in device or simulator
$ ionic cordova build android 
//run android app in device or simulator
$ 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.png (10241024) and splash.png (2732x2732) in the resources folder and then execute the following command in your project directory

$ ionic cordova resources

4. Modifying code

4.1 Screen / View’s Code Structure



Type caption for image (optional)

4.2 Overall Folder Structure

There are broadly 30+ 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 pages 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 Ionic4 a file named app-routing.module.ts gets generated by default where all the navigation codes get done.
We use the path name of a particular page to navigate from one page to another.-

4.6 Nested Segment navigation



Type caption for image (optional)

Controls the navigation of Segments(3 Segment buttons in the app). This is detailed in src/app/ home/home.page.ts. All the settings of Segment Navigation can be controlled from here.

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, 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 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 cards, Settings, Edit Profile, 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, on the Homepage — we see an array of cards.

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

You can generate service in Ionic4 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. Swipe-able cards

This is the central component of the dating app. This template has this feature — for getting the interactive animations to users and allowing the user to express his/her perception about the profiles and perform various actions according to that.



Type caption for image (optional)

The app uses Ionic angular2-swing npm package for swipe-able card gestures and ionic-swing npm package as a wrapper for swipe views.

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 swipeable cards on the home page. The data is in JSON format.



Type caption for image (optional)

Data is imported in the page.ts file as

this.service.cards
here, service is service provider 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 back-end. Some of the major ones are

  1. Node.js custom back-end
  2. 2. Firebase back-end (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