Ionic 5 Tinder Styled App Starter
  • Introduction
  • Ionic 5 Tinder Clone Template
  • Why to use this Template
  • Initial Setup
  • Running the app
  • Template Features
    • Screens
      • Login Screens
      • Home Page
      • User Profile & Settings
      • Tinder Premium
      • Chat Pages
    • Features
      • Swipe-able Cards
      • Chat feature
      • Device Compatibility
    • Feature Explanation
  • How to use this Template
    • Two ways to use the Template
    • Modifying Code
    • Removing a Page
    • Removing a plugin
    • Integrating Back-end
    • Add More Features
  • Build the app and PWA
    • Building App on device
    • Deploying app as PWA
  • Extra
    • FAQs
Powered by GitBook
On this page
  • User Page
  • User profile — Edit Profile
  • Settings Page
  • Settings Page — Phone Number Setting
  • Settings Page — Show Me
  • Settings Page — Share my feed
  • Settings Page — Autoplay videos
  • Settings Page — Email Setting
  • Settings Page — Push Notifications
  • Settings Page —Team Dating
  • Settings Page — Delete Account
  • Settings Page — Delete My Account
  • User profile— Add media

Was this helpful?

  1. Template Features
  2. Screens

User Profile & Settings

User Profile and Settings pages

PreviousHome PageNextTinder Premium

Last updated 5 years ago

Was this helpful?

User Page

Dating app user’s page.

User page to access Settings, Profile and add new Media

On clicking the first 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.

User profile — Edit Profile

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.

Settings Page

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.

Settings Page — Phone Number Setting

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.

Settings Page — Show Me

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.

Settings Page — Share my feed

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.

Settings Page — Autoplay videos

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.

Settings Page — Email Setting

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.

Settings Page — Push Notifications

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.

Settings Page —Team Dating

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.

Settings Page — Delete Account

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.

Settings Page — Delete My Account

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.

User profile— Add media

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 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.

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.

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.

Push Notification, Email Notifications, and Team dating notifications.
Read more about Firebase- Ionic push notification here.
You can integrate Facebook Login using firebase in Ionic 4 by following this tutorial.