Cloneder - The production ready full-stack Social Tinder-inspired Ionic 5, Google App Engine and Firebase project


Daniel Campagnoli

Daniel Campagnoli

Member since 2014


iOS, Android  
3 years ago
1 year ago

Cloneder is the fastest solution to deploying your own customised Android, iOS and web social app to the Apple and Google Play stores. Not just a theme with some pretty screens, Cloneder is a fully functional app with the complete server side code to launch your own dating/social/matching/buy-sell app.

Initially developed in 2015 in Ionic 1, and now updated to v3.9.2, Cloneder brings years of Ionic and Google Cloud experience to you, with a complete Node.js server project integrated with the Google App Engine.

Unlike other stater themes which have showcase screens to demonstrate possible uses of user facing functionality, every part of Cloneder is built for real-world applications. For example it contains everything required by the app stores (in particular Apple which is more strict) when there is user generated content (e.g. a profile picture, about me or chat message) such as:

  • Accepting terms and conditions on login
  • The ability for users to report content
  • Administration screens to manage reported content

One of the early apps built on Cloneder was Verona which was a winner of "2016 Most Innovative Companies" from Fast Company, and an official honoree for the 20th Annual Webby Awards. A more recent customisation is (Just A Baby| which has been profiled on HuffPost, History NOW, Ask Men and Fox News to name a few. You need more than a code template...

A successful software project is more than some code. High performance software teams use modern, essential software engineering practices such as DevOps, automated testing and continuous integration.

Continuous Integration

Cloneder comes integrated with a continuous integration/delivery pipeline using the CI at which performs a build, executes tests and then does a native Android build.

A continuous build pipeline ensure consistent builds, automated test execution. This minimizes the risk of bugs being introduced to your production system from regression bugs and manual procedures. It also saves you time and money from automating essential test, build and deployment tasks.

Multi-environment configuration support

Cloneder supports having a development, continous integration, QA and production environments out of the box, thanks to a centralised configuration file, NPM scripts and code which handle builds and deployments for each environment.

If you want to push an Anroid build to your phone connecting to your dev environment simply run the npm script run-android-dev, or to your production environment run-android-prod

Now the cleverness of run-android-dev is a good example of the attention to detail and developer productivity in Cloneder. So when you're developing locally with a node.js server and in Chrome the server address is localhost. But when you push a build to your phone then it can't connect to localhost on your development machine. So the build script replaces the server URL with the IP address of your dev machine, and makes sure its the IP address of your WiFI adapter and not the ethernet adapter, so your phone can connect over your WiFi network to your local node.js server.

Similarly for the server project run the NPM script dev for the local node.js server or deploy-prod to deploy to your production App Engine project.

And a couple more of the NPM scripts are build-deploy-android-test which does an Android build and submit it to the play store in the beta channel, and build-deploy-ios-test which does do an iOS build and submit it for a TestFlight build on the Apple store


Username/password registration and login
Facebook registration/login
Facebook registration copies their Facebook profile picture to their app profile images, and copies birthdate and hometown if available

Reset Password

Email verification
Forces the user to verify their email address before continuing. (Only if Mailgun is configured for transaction emails)

Terms of Use
Required user to accept terms and conditions on login (Required for Apple store review)

If the app version is no longer compatible with the server then forces the user to upgrade from the app store

Profile setup
On registration if the user is missing required profile fields then provides a form to enter the data

Location Setup
Checks the the app has access to GPS then attempts to get the location from the GPS service.
On Android it uses the Fused Location Provider for efficient location lookup.
If the location can't be retreived from the GPS then checks if GPS is enabled and prompts to send the user to the system settings screen if not
If the location still can't be retrieved the user can select a location from Google Maps, with a auto-complete search field to quickly find ther location.

View profile
View the users own public profile data, ie. photos and about message.

Edit profile
Edit public profile data, ie. Photos and about message Add, delete, swap profile photos.
On web a photo can be added from the webcam or a file upload
On native a photo can be added by the camera or gallery
If logged in with facebook then can add from their FB photos
An option can be set to require all new photos to be approved by an administrator

Photo crop
Allows cropping of a selected profile photo

Facebook albums
When adding a photo through Facebook this page list their FB albums

Facebook albums
On selecting a Facebook album this lists all the photos in the album

Swipe search
Swipe cards to display the search results

Search result profile
View more details of the swipe cards (i.e. that users public profile) Ability to report the profile

New Match
Modal displayed when there is a new match, with the option to keep swiping or go to chat messaging

Liked Me
View users who have liked you (right swiped) that you haven't swiped yet

Settings Page
Set if the user is discoverable, age seach range, gender interested in, maximum distance to search, distance type, use GPS or a map location to search from, language selection, buy subscription/credits, debug information, delete account.

Modal to select a subscription or credits product. For web/PWA it uses Stripe, else uses In-App purchases. Stripe integration creates a Stripe customer object linked to the user account for easier management of any payment issues

Stripe payment
Modal to enter credit card details for purchase through Stripe

Contact Us
Allows the user to send a message to the admins, and sends an email if Mailgun is configured

Displays the list of users you have matched with, and group chats, with the last message in the conversation

Start Group Chat
Allows selecting from your matches to start a group chat

Invite to group chat
Select a user from your matches to invite into a group chat

Chat profile
View the profile of a user in a chat, with the ability to report it

Chat messages
Send a text message Take a photo to send as an image message (Uses native plugins on a phone and HTML5 API for web/PWA) Select a photo to send as an image message (Uses native plugins on a phone and a hidden file input for web/PWA) Send an audio message (Native only) Copy a message Re-send a message which failed to send Report a chat Leave a group chat Uses Firebase real-time database for real-time upates using a Mongo or Postgresql datasource

Admin pages:

Photo Review
Approve/reject profile photos in the moderation queue

Reported users
View a list of the recently reported users

Reported user
View the details (profile, recent chat messages etc) of a reported user
Action the report by deleting content, banning or nothing.

User searchSearch users by id, name or email

User search resultView the details of a user from the search results

Also an administration web app is provided by the Parse framework dashboard