Launching React Native Dating App with Backend

With NativeBase, React Navigation, GraphCool as Backend, and an Admin Web Dashboard

We are proud to announce the launch of React Native Dating App with Backend! Dating App is a well-structured starter kit/app script that brings with it fully customizable pages and a rich collection of UI elements that will enable you quickly get build a dating app as you desire.

This is a bold and flexible React Native solution that is best suited for developing high-quality dating apps with the help of latest technologies that are available in the market.

Dating app provides multiple screens and features in order to help you extend the functionality of your dating app to new levels. Dating App is built using React Native, GraphCool, and NativeBase, all of which will greatly help you provide world-class user experience to your app’s users. What’s even more great about this is that your users will be able to experience this on the native platform itself!

What Does It Contain?

• Mobile App
• Admin Web Dashboard
• GraphQL as Backend

Mobile App

The Mobile App is built using the following technologies:

• React Native
• NativeBase
• React Navigation
• React Native Easy Grid

And here’s the code structure of the Mobile App:

src
 |_ components
     |_ cardDetails
     |_ gradient
     |_ progressBar
     |_ chatBubble.js
     |_ errorHandler.js
     |_ header.js
     |_ homeFooter.js
     |_ icon.js
     |_ imageView.js
     |_ loader.js
     |_ noMoreData.js
     |_ renderImage.js
     |_ renderTag.js
 |_ constants
 |_ containers
     |_ cards
         |_ card.js
         |_ index.js
         |_ styles.js
     |_ matches
         graphql.js
         index.js
         match.js
         matchItem.js
         styles.js
     |_ interestProvider.js
     |_ locationProvider.js
     |_ login.js
     |_ styles.js
     |_ uploadImages.js
     |_ userProvider.js
 |_ graphql
     |_ mutation.js
     |_ query.js
 |_ screens
     |_ account
     |_ cardProfile
     |_ chat
     |_ home
     |_ match
     |_ onBoard
     |_ profile
     |_ settings
     |_ socialLogin
     |_ uploadPhoto
 |_ theme
     |_ components
     |_ variables
 |_ appNavigator.js
 |_ tabNavigator.js
 |_ utils.js
 |_ .eslintrc
 |_ app.json
 |_ config-local.js
 |_ configureClient.js
 |_ index.js

All The Screens You’d Ever Want!

React Native Dating App with Backend provides you with a set of fully customizable, ready-to-use screens with easily configurable application design and the perfect UX for a dating app.

This starter kit provides you with the following screens:

• Facebook Login

• Instagram Login

• Discover New People

• Matches

• Account

• Profile Details

• Edit Profile

• Photo Upload

• Settings

Dating App Backend

We have used the following technologies to set up the backend support for the dating app:

GraphQL

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

GraphCool

GraphCool is an open-source framework to develop and deploy production-ready serverless GraphQL backends. It includes GraphQL database mapping, real-time subscriptions & flexible permission system.

The reason for why we used GraphQL for backend instead of something like REST API is that:

• GraphQL needs lesser code than REST API.
• GraphQL is more declarative and provides an elegant data retrieval than REST API.
• GraphQL avoids multiple REST calls.
• GraphQL is backward compatible and version-free.
• GraphQL has proved to be a more flexible solution than REST API.
• GraphQL has powerful development tools.
• GraphQL can evolve with versions

Admin Web Dashboard

The Admin Web Dashboard is built using the following technologies:

• React
• React Bootstrap
• React Router
• GraphQL
• Apollo Client

And here’s the code structure of the Admin Web Dashboard:

src
 |_ assets
 |_ components
 |_ config
 |_ pages
 |_ styles
 |_ App.js
 |_ App.test.js
 |_ constants.js
 |_ data.json
 |_ index.js
 |_ logo.svg
 |_ registerServiceWorker.js

Dating App can perform the following the services:

• Login — When a user tries to login inside the Web Admin Dashboard.
• Overview — Dashboard provides the total users, total swipes, total matches, total cities, number of males, number of females, number of iOS and Android devices.
• Settings — Dashboard can also create and update settings such as Google Play Store Link, iOS App Store link, timezone, etc.
• Users — Dashboard can provide all user data, activate and deactivate user accounts, and also monitors all the users in real time.

React Native Dating App is brought to you by the amazing developers at GeekyAnts. Special mention needs to be given to Gaurav Guha, Rishabh Pandey, Krishna M.S. and Kuldeep Saxena.

Please do check out our Dating App and let us know what else you would like us to do with your feedback.

I am Rajat S, currently at Geekyants as a Technical Content Writer.

Thanks for reading! Please 👏 if you liked this post and follow me to stay updated with all the exciting things happening at GeekyAnts.