Coder Social home page Coder Social logo

studdibuds's Introduction

Tinder Clone - Expo

Tinder Clone - Expo

Overview

โš ๏ธ This project use code of my previous repository Tinder - React Native. Because I don't have time to maintain this previous project made on React Native, I've decided to switch to Expo because it's more convenient to me. Sorry if you don't work with Expo (but give it a try).

Perfect to start an Tinder Clone app. 4 screens are availables : Explore, Matches, Messages and Profile. You'll find some components like Card Component to pass props and variant. No frameworks UI like Bootstrap or Material UI are used.

  • Easy to use ๐Ÿค˜
  • Made with Expo โšก
  • TypeScript supported ๐ŸŒž

This project was inspired by this amazing Kishore's work on Dribbble. Feel free to follow this guy because he does great stuff.

Demo

You can try it here : https://expo.io/@stevenpersia/projects/tinder-expo

Screenshots

Capture 1 Capture 2 Capture 3 Capture 4

Installation and usage

Be sure, you have installed all dependencies and applications to run Expo project on your computer : Getting Started with Expo.

This project works fine on iOS and Android.

Running the project

Clone this repository :

git clone https://github.com/stevenpersia/tinder-expo.git
cd tinder-expo

Install packages :

yarn

When installation is complete, run it :

yarn start

Props

CardItem

Name Type Required Description Example
image string Yes Picture of member. image="https://..."
name string Yes Name of member. name="John Doe"
description string Yes Description of member. description="Full-time Traveller. Globe Trotter."
matches string Yes Match percentage. matches="95"
hasActions boolean No Display actions buttons (Like, Dislike, ...). actions
isOnline string No Display online or offline badge (Online and Offline). status="Online"
hasVariant boolean No Display another style of card (used for Matches screen). variant

Message

Name Type Required Description Example
image string Yes Picture of member. image="https://..."
name string Yes Name of member. name="John Doe"
lastMessage string Yes Last message of member. lastMessage="You want order in Gotham. Batman must take off his mask and turn himself in."

ProfileItem

Name Type Required Description Example
name string Yes Name of member. name="John Doe"
matches string Yes Match percentage. matches="95"
age string No Age of member. age="25"
location string No Location of member. location="Paris, France"
info1 string No More information of member. info1="Straight, Single"
info2 string No More information of member. info2="Tea Totaller & Loves Photography"
info3 string No More information of member. info3="Beaches, Mountain & Coffee"
info4 string No More information of member. info4="Last seen: 23h ago"

Star, Fork, Clone & Contribute

Feel free to contribute on this repository. If my work helps you, please give me back with a star. This means a lot to me and keeps me going!

studdibuds's People

Contributors

rachelgiahong avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.