paint-brush
How to Create a Tinder Clone Application in Phở [No-Code Approach]by@EmreSokullu
594 reads
594 reads

How to Create a Tinder Clone Application in Phở [No-Code Approach]

by Emre SokulluMay 14th, 2020
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

In this tutorial, we’ll be creating a Tinder clone, in under 1 hour using Phở Networks, an open-source no-code platform that makes it seamlessly easy to create social applications. All you need to do is to define your app in “graph” format (as shown below) and it generates the APIs in a breeze. With this graph-native backend, you can query your Ph�ß app in a language that’s in native graph format. At the end, you'll create a GraphQL recipe similar to: https://github.com/esokullu/GroupRouletteRecipe.

Companies Mentioned

Mention Thumbnail
Mention Thumbnail
featured image - How to Create a Tinder Clone Application in Phở [No-Code Approach]
Emre Sokullu HackerNoon profile picture

In this tutorial, we’ll be creating a Tinder clone, in under 1 hour using Phở Networks, an open-source no-code platform that makes it seamlessly easy to create social applications.

With Phở, you define your app in “graph” format (as shown below), and it generates the APIs in a breeze.

Phở depends on PHP 7+Redis and Neo4J; so make sure you have them installed on your system before we start.

Phở uses Redis as its persistent (and lightning fast) keeper-of-truth, while Neo4J acts as the index with its Cypher query language. Thanks to this graph-native backend, you can query your Phở app in a language that’s in native graph format:

MATCH (m)-[:like]->(f) WHERE m.sex="male" AND f.sex="female" RETURN f;

The query above would fetch all female users with at least 1 like.

Needless to add, Phở is a declarative language. All you need to do is to define the core components of your apps (also called as, nodes and edges) in a whiteboard-friendly way, as follows:

  • User: an Actor node
  • Like: a Subscribe edge
  • Message: a Notification edge

Voila.

So how do we implement this? Fortunately, there is a simple GUI (graphical user interface) which lets you draw the application in a whiteboard friendly way as below:

To see how it works, take a look at the 15-minutes long tutorial video below:

At the end, you’ll create a GraphQL recipe similar to:

https://github.com/esokullu/GroupRouletteRecipe

We need to compile this and serve it via REST. To do that install pho-cli from Github.

After you download the file, copy it to your global binary path such as

/usr/local/bin
 on UNIX systems, so it can be called from anywhere. Also, make sure it’s executable by running: 

chmod +x /usr/local/bin/pho

Then, while you’re on the terminal, run:

> pho init

This will start a CLI dialog with five easy questions:

  • App Name
  • App Description
  • App Template: You must select 6 (custom) here. It will ask you the path to your recipe. Either you can create it on your own as shown above, download, and enter that path; or just point to https://github.com/esokullu/GroupRouletteRecipe for a quick start.
  • Founder Username: keep it “admin”
  • Founder Password
  • Founder Email

Once you fill these out, it will create a folder with a bunch of files and folders, including the following key ones:

  • schema/ this is the folder where we will place the GraphQL source code.
  • build/ this is the folder where compiled GraphQL schema will reside.

Then, we go to the root folder of our project, and install the dependencies using Composer. Suppose, the App Name was “grouproulette”, here’s what we do:

> cd grouproulette
> composer install

We could have executed 

pho build
 to compile our schema folder (in other words, the recipe) but it’s already baked into in this example, so we skip that.

Voila…

Now we have a working-kernel, which we should pass to our REST API server, so we can connect it to our mobile app.

If you need to change your server settings on the Phở side (your project folder) make sure to edit the .env file there. Please note it’s a hidden file so you may not be able to see it in your filesystem browser.

Then run:

> php public/api/index.php &

Now if all goes well, when you visit http://localhost/founder on your browser, you should see a JSON response like:

{
  "success": true,
  "id":      "427501bd323e5e40f05b9fb4e769714a",
  "class":   "PhoNetworksAutogenerated\\User"
}

OK, now our REST APIs are working fine! For reference to the full set of commands, visit https://www.phonetworks.org/assets/restapi.htm

The default Phở Server REST comes with the 

login
logout
, and 
signup 
functions in its Authentication Controller. You may extend it further by editing the 
public/api/index.php
 file as documented on Phở Server REST’s README file.

To illustrate the signup call, a sample GET request would be:

http://localhost/signup?param1=joe&[email protected]&param3=secret&param4=01/15/1993&param5=&param6=http://google.com/emre.gif&param7=0

Hope this helps! Should you have any questions, feel free to comment or shoot me an email at [email protected]

Last but not least, if you need funding for the apps you create using Phở, we can help!

Previously published at https://ideasforfree.org/2020/05/08/how-to-create-a-tinder-clone-in-pho/