Feature Explanation

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 for social logins here

• Google Login with Ionic

• Facebook Login with Ionic

• Twitter Login with Ionic

• Anonymous login

• Email login

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 Ionic 5 by executing the command

$ ionic g service your service name

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.

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.

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.

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