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:
4mb
Ionic:
1.0.x,1.3.x
Platforms:
iOS, Android, Windows Phone
View ID:
548a574d
Released:
a year ago
Updated:
2 months ago
Category:
Themes
Tags:
tinder, ui, theme, social, giphy, messaging, card

Ionic Tinder UI

Payment methods

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: Nov 12 2016

mrhieu-ionic-tinder-ui-2179036f9343

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

mrhieu-ionic-tinder-ui-bdc4140752ef

-Adds Profile, Messaging

mrhieu-ionic-tinder-ui-de58ce7f3e01

-Fix animation issue on Android

-Add Settings page (App, Discovery)

-Add Match popup

-Add Giphy Service (the coolest part)

ionicMarket-ionic-tinder-ui-8ca3c0f4a522

-Update latest Settings UI

-Integrate my own Giphy Plugin

-Welcome

-Edit profile with Photo browse

ionicMarket-ionic-tinder-ui-741e76ce1093 (latest)

-Include a beautiful rounded font

-Update the latest UI follow the native Tinder version 6.5.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. After purchasing, download the zip file containing the entire demo app and unzip
  2. Go inside the extracted folder
  3. Run $ npm install
  4. Run $ bower install
  5. Try: $ ionic serve
  6. The browser should automatically open the app

Dependencies

  1. Setup SASS $ ionic setup sass
  2. Ionic Tinder Cards to provide swippable cards layout https://github.com/driftyco/ionic-ion-tinder-cards
  3. ngCordova $ bower install ngCordova --save
  4. Cordova Camera plugin$ ionic plugin add org.apache.cordova.camera
  5. 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 via: [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   ·   10 months ago

Hey, will someday this be available in Ionic 2?

Hieu Pham

Hieu Pham   ·   10 months 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   ·   9 months 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   ·   8 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   ·   8 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   ·   8 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   ·   4 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   ·   4 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   ·   4 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   ·   4 months ago

Is there a live chat integration in the theme ?

Hieu Pham

Hieu Pham   ·   4 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   ·   4 months ago

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

Hieu Pham

Hieu Pham   ·   4 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   ·   4 months ago

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

Hieu Pham

Hieu Pham   ·   4 months ago

Probably in couple of months I think

Kevin

Kevin   ·   18 days ago

have an estimated date on this yet?

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

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

Aakash Jain

Aakash Jain   ·   3 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   ·   4 months ago

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

Hieu Pham

Hieu Pham   ·   4 months ago

Probably in couple of months I think

Kevin

Kevin   ·   18 days ago

have an estimated date on this yet?

  ·   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   ·   4 months ago

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

Hieu Pham

Hieu Pham   ·   4 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   ·   4 months ago

Is there a live chat integration in the theme ?

Hieu Pham

Hieu Pham   ·   4 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   ·   4 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   ·   4 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   ·   4 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   ·   8 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   ·   8 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.

Rustam Eynaliyev

Rustam Eynaliyev   ·   8 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.

Hieu Pham

Hieu Pham   ·   a year ago

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

Joaquin I

Joaquin I   ·   10 months ago

Hey, will someday this be available in Ionic 2?

Hieu Pham

Hieu Pham   ·   10 months 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 ?

cj

cj   ·   9 months 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.

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