Tinder UI

Tinder UI

Tinder UI for hybrid app

$24.00

Not yet rated
Hieu Pham

Hieu Pham

Member since 2015

Details

Version:
1.0
Size:
24mb
Ionic:
1.x
Platforms:
iOS, Android, Windows Phone
View ID:
548a574d
Released:
a year ago
Updated:
a month ago
Category:
Themes
Tags:
tinder, ui, theme, social, giphy, messaging, card

Ionic Tinder UI

Payment methods

If you're looking for a complete package

My good friend Xohan has developed a complete production-ready system for you to start your own business today. Check it out!

See more of my works

Introduction

Tinder is a location-based dating and social discovery application that facilitates communication between mutually interested users, allowing matched users to chat. Tinder is famous for its swipping card UI, which is later implemented in some other popular mobile apps e.g LinkedIn, Fancy,... So...

I'm an UI/UX lover. I see nice UI, I clone. That's it.

and

This is an Ionic theme, not a fully-functional application.

I always take it serious to keep the code quality high with clean and self-explained code. When purchasing this, you also get my latest "helper" snippets inside the package to make it more fun to code.

Take a look at it with Ionic View using ID: 548a574d

In case you don't know, Ionic View mobile app is the simplest way to experience an Ionic app. Download it here http://view.ionic.io/

Or even more entertaining, see how it works on Youtube: https://youtu.be/rfNm-Di6oaA

See more of my works: https://market.ionic.io/user/66136

See more of my works

Happy prototyping!

Changelog

Last updated: Jun 17 2017

r1-mrhieu-ionic-tinder-ui-2179036f9343

-First version with 3 main screens: Settings, Explore and Matches.

r2-mrhieu-ionic-tinder-ui-bdc4140752ef

-Adds Profile, Messaging

r3-mrhieu-ionic-tinder-ui-de58ce7f3e01

-Fix animation issue on Android

-Add Settings page (App, Discovery)

-Add Match popup

-Add Giphy Service (the coolest part)

r4-ionicMarket-ionic-tinder-ui-8ca3c0f4a522

-Update latest Settings UI

-Integrate my own Giphy Plugin

-Welcome

-Edit profile with Photo browse

r5-ionicMarket-ionic-tinder-ui-741e76ce1093

-Include a beautiful rounded font

-Update the latest UI follow the native Tinder version 6.5.0

r6-ionicMarket-ionic-tinder-ui-aa6527c01c7c

-Compatible with Ionic CLI ~3.4.0

Note: you can buy Giphy Plugin alone

Giphy

Screens

  1. Settings
  2. Explore
  3. Matches
  4. Profile
  5. Messaging
  6. App Settings
  7. Discovery Settings
  8. Match popup
  9. Chat with Giphy service (search and send GIF images)
  10. Edit Profile
  11. Welcome

Run locally

1.Install Ionic environment

$ npm install -g cordova
$ npm install -g [email protected]

2.After purchasing, download the zip file containing the entire demo app and unzip 3.Go inside the extracted folder 4.Install all dependencies

$ npm install
$ bower install

5.Start local server

$ ionic serve

6.Your default browser should now automatically open the app

Dependencies

  1. Ionic Tinder Cards to provide swippable cards layout https://github.com/driftyco/ionic-ion-tinder-cards
  2. ngCordova $ bower install ngCordova --save
  3. Cordova Camera plugin$ ionic plugin add org.apache.cordova.camera
  4. Modify the default color theme to match Tinder's colors in /scss/ionic.app.scss
    // line 18
    $calm:                            #2cb3c9 !default;
    $balanced:                        #57C581 !default;
    $energized:                       #F7C755 !default;
    $assertive:                       #ff6b69 !default;
    

Support

If you need technical support or have any questions, don't hesitate to send me a message: [email protected]

Hey there! You'll need to log in or create an account before you can leave a comment here.

talal

talal   ·   a year ago

Hi I want to ask you I have script chat and I want mobile app for the app can you design it and programing the app ?

Hieu Pham

Hieu Pham   ·   a year ago

@talal can you drop me an email to [email protected] Thanks

Tamer EL BAKKALI

Tamer EL BAKKALI   ·   a year ago

Hi, does this UI supports ionic 2 / Typescript ?

Hieu Pham

Hieu Pham   ·   a year ago

No, this is Ionic 1 with JS and Sass

eduardo

eduardo   ·   a year ago

There is an estimate for a new update?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in or create an account before you can leave a comment here.

dilawar

dilawar   ·   a year ago

why are all the css files missing from the templates? I am unable to recreate the above shown theme.

Hieu Pham

Hieu Pham   ·   a year ago

This template uses SASS preprocessor. You should have SASS compiler installed in your localhost. Cheers!

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in or create an account before you can leave a comment here.

Luccio

Luccio   ·   a year ago

Is it possible to use small videos for profile pictures instead of static pictures ?

Hieu Pham

Hieu Pham   ·   a year ago

I don't think so. We can not have video played inline in a hybrid app, both iOS or Android.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in or create an account before you can leave a comment here.

Ernie Mac

Ernie Mac   ·   a year ago

Are you using any database storage?

Hieu Pham

Hieu Pham   ·   a year ago

No I don't. But it's easy to implement any data service (firebase, your custom API endpoint...)

Ernie Mac

Ernie Mac   ·   a year ago

ok how is the pictures being saved? localstorage

Hieu Pham

Hieu Pham   ·   a year ago

Nothing special, static photos stored in /img directory. It's just a theme anyway.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in or create an account before you can leave a comment here.

Joaquin I

Joaquin I   ·   a year ago

Hey, will someday this be available in Ionic 2?

Hieu Pham

Hieu Pham   ·   a year ago

I'm not sure

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in or create an account before you can leave a comment here.

cj

cj   ·   a year ago

Looks just like this other app, but its free (and older) https://market.ionic.io/themes/pulkits-ionic-tinder-ui

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in or create an account before you can leave a comment here.

Rustam Eynaliyev

Rustam Eynaliyev   ·   10 months ago

Hi template looks great, but please convert it to Angular 2.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in or create an account before you can leave a comment here.

prat

prat   ·   10 months ago

Hello I can buy this and upload it on IOS and android store as APP ? If I buy this what will i get ?

Hieu Pham

Hieu Pham   ·   10 months ago

Absolutely. That's what this theme meant to be. You'll get all the source code of it.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in or create an account before you can leave a comment here.

Samuel Perfidio

Samuel Perfidio   ·   6 months ago

We are from Brazil and we develop Apps I would like to offer your tool to our customers How could we work together? The idea would be to include your plugin within our apps We are more than 485 developers and we work with an open source platform Http://developer.siberiancms.com/ Is it possible to integrate? Your plugins can be offered in our marketplace https://extensions.siberiancms.com/downloads/category/siberian-plugins-commercial-editions/mae-pe-modules/ []s Samuel

Hieu Pham

Hieu Pham   ·   6 months ago

Hi there can you drop me an email? Thanks

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in or create an account before you can leave a comment here.

Zil Mehta

Zil Mehta   ·   6 months ago

Is there a live chat integration in the theme ?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in or create an account before you can leave a comment here.

Zil Mehta

Zil Mehta   ·   6 months ago

Is there a live chat integration in the theme ?

Hieu Pham

Hieu Pham   ·   6 months ago

No there isn't. It only provides the layout for the chat UI. You will need some more work to integrate with a chat service (or you API). Thanks

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in or create an account before you can leave a comment here.

Giuseppe Tortorella

Giuseppe Tortorella   ·   6 months ago

This theme work on ios and android aswell ? I mean no bug in the ui or strange effect?

Hieu Pham

Hieu Pham   ·   6 months ago

Hi, you can definitely see it before you buy with the app Ionic View and enter the app ID mentioned above. Anyway Android later than 4.4 is recommended.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in or create an account before you can leave a comment here.

Dan Conner

Dan Conner   ·   6 months ago

Hi, the UI looks greats. Any plans to release it for ionic 2?

Hieu Pham

Hieu Pham   ·   6 months ago

Probably in couple of months I think

Kevin

Kevin   ·   3 months ago

have an estimated date on this yet?

gojira00

gojira00   ·   a month ago

Yes, I would be interested on this, too. Thanks!

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in or create an account before you can leave a comment here.

Aakash Jain

Aakash Jain   ·   5 months ago

Waiting for Ionic 2 conversion. Loved your theme.... Great Job.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in or create an account before you can leave a comment here.

Muddassir Basit

Muddassir Basit   ·   a month ago

Hello mate, bought the theme externally. My developer is saying that the css files are missing and the theme is not getting implemented. Any help would be much appreciated ? Thanks.

Hieu Pham

Hieu Pham   ·   a month ago

Hi, it meant to be that way cause it needs SASS compiler installed. Sass files are provided in /scss. Drop me an email man

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in or create an account before you can leave a comment here.

Navin Kumar

Navin Kumar   ·   17 days ago

after set it up on local , its showing white blank screen only

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in or create an account before you can leave a comment here.

Navin Kumar

Navin Kumar   ·   17 days ago

after set it up on local , its showing white blank screen only

Hieu Pham

Hieu Pham   ·   17 days ago

Hi, can you drop me an email? I would like to know what were the steps you took. Thanks.

Navin Kumar

Navin Kumar   ·   17 days ago

I have dropped mail already please check its from [email protected]

Hieu Pham

Hieu Pham   ·   17 days ago

I have not received it. Can you double check? [email protected]

Navin Kumar

Navin Kumar   ·   17 days ago

please check all folders i have sent 2 times [email protected] is my gmail ..if you did not got then please drop me mail from your email

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in or create an account before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in or create an account before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in or create an account before you can leave a comment here.

Navin Kumar

Navin Kumar   ·   17 days ago

after set it up on local , its showing white blank screen only

Hieu Pham

Hieu Pham   ·   17 days ago

Hi, can you drop me an email? I would like to know what were the steps you took. Thanks.

Navin Kumar

Navin Kumar   ·   17 days ago

I have dropped mail already please check its from [email protected]

Hieu Pham

Hieu Pham   ·   17 days ago

I have not received it. Can you double check? [email protected]

Navin Kumar

Navin Kumar   ·   17 days ago

please check all folders i have sent 2 times [email protected] is my gmail ..if you did not got then please drop me mail from your email

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in or create an account before you can leave a comment here.

Navin Kumar

Navin Kumar   ·   17 days ago

after set it up on local , its showing white blank screen only

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in or create an account before you can leave a comment here.

Muddassir Basit

Muddassir Basit   ·   a month ago

Hello mate, bought the theme externally. My developer is saying that the css files are missing and the theme is not getting implemented. Any help would be much appreciated ? Thanks.

Hieu Pham

Hieu Pham   ·   a month ago

Hi, it meant to be that way cause it needs SASS compiler installed. Sass files are provided in /scss. Drop me an email man

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in or create an account before you can leave a comment here.

Aakash Jain

Aakash Jain   ·   5 months ago

Waiting for Ionic 2 conversion. Loved your theme.... Great Job.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in or create an account before you can leave a comment here.

Dan Conner

Dan Conner   ·   6 months ago

Hi, the UI looks greats. Any plans to release it for ionic 2?

Hieu Pham

Hieu Pham   ·   6 months ago

Probably in couple of months I think

Kevin

Kevin   ·   3 months ago

have an estimated date on this yet?

gojira00

gojira00   ·   a month ago

Yes, I would be interested on this, too. Thanks!

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in or create an account before you can leave a comment here.

Giuseppe Tortorella

Giuseppe Tortorella   ·   6 months ago

This theme work on ios and android aswell ? I mean no bug in the ui or strange effect?

Hieu Pham

Hieu Pham   ·   6 months ago

Hi, you can definitely see it before you buy with the app Ionic View and enter the app ID mentioned above. Anyway Android later than 4.4 is recommended.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in or create an account before you can leave a comment here.

Zil Mehta

Zil Mehta   ·   6 months ago

Is there a live chat integration in the theme ?

Hieu Pham

Hieu Pham   ·   6 months ago

No there isn't. It only provides the layout for the chat UI. You will need some more work to integrate with a chat service (or you API). Thanks

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in or create an account before you can leave a comment here.

Zil Mehta

Zil Mehta   ·   6 months ago

Is there a live chat integration in the theme ?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in or create an account before you can leave a comment here.

Samuel Perfidio

Samuel Perfidio   ·   6 months ago

We are from Brazil and we develop Apps I would like to offer your tool to our customers How could we work together? The idea would be to include your plugin within our apps We are more than 485 developers and we work with an open source platform Http://developer.siberiancms.com/ Is it possible to integrate? Your plugins can be offered in our marketplace https://extensions.siberiancms.com/downloads/category/siberian-plugins-commercial-editions/mae-pe-modules/ []s Samuel

Hieu Pham

Hieu Pham   ·   6 months ago

Hi there can you drop me an email? Thanks

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in or create an account before you can leave a comment here.

prat

prat   ·   10 months ago

Hello I can buy this and upload it on IOS and android store as APP ? If I buy this what will i get ?

Hieu Pham

Hieu Pham   ·   10 months ago

Absolutely. That's what this theme meant to be. You'll get all the source code of it.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in or create an account before you can leave a comment here.

Hieu Pham

Hieu Pham   ·   a year ago

@talal can you drop me an email to [email protected] Thanks

cj

cj   ·   a year ago

Looks just like this other app, but its free (and older) https://market.ionic.io/themes/pulkits-ionic-tinder-ui

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in or create an account before you can leave a comment here.

Joaquin I

Joaquin I   ·   a year ago

Hey, will someday this be available in Ionic 2?

Hieu Pham

Hieu Pham   ·   a year ago

I'm not sure

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in or create an account before you can leave a comment here.

Ernie Mac

Ernie Mac   ·   a year ago

Are you using any database storage?

Hieu Pham

Hieu Pham   ·   a year ago

No I don't. But it's easy to implement any data service (firebase, your custom API endpoint...)

Ernie Mac

Ernie Mac   ·   a year ago

ok how is the pictures being saved? localstorage

Hieu Pham

Hieu Pham   ·   a year ago

Nothing special, static photos stored in /img directory. It's just a theme anyway.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in or create an account before you can leave a comment here.

Luccio

Luccio   ·   a year ago

Is it possible to use small videos for profile pictures instead of static pictures ?

Hieu Pham

Hieu Pham   ·   a year ago

I don't think so. We can not have video played inline in a hybrid app, both iOS or Android.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in or create an account before you can leave a comment here.

dilawar

dilawar   ·   a year ago

why are all the css files missing from the templates? I am unable to recreate the above shown theme.

Hieu Pham

Hieu Pham   ·   a year ago

This template uses SASS preprocessor. You should have SASS compiler installed in your localhost. Cheers!

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in or create an account before you can leave a comment here.

eduardo

eduardo   ·   a year ago

There is an estimate for a new update?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in or create an account before you can leave a comment here.

Hieu Pham

Hieu Pham   ·   a year ago

No, this is Ionic 1 with JS and Sass

Tamer EL BAKKALI

Tamer EL BAKKALI   ·   a year ago

Hi, does this UI supports ionic 2 / Typescript ?

talal

talal   ·   a year ago

Hi I want to ask you I have script chat and I want mobile app for the app can you design it and programing the app ?

Rustam Eynaliyev

Rustam Eynaliyev   ·   10 months ago

Hi template looks great, but please convert it to Angular 2.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in or create an account before you can leave a comment here.

Hey there! You'll need to log in or create an account and purchase the add-on before you can leave a rating here.

There are no ratings for this theme yet

  ·     ·   just now

{{ rating.comment }}

  ·     ·   just now

{{ rating.comment }}