A social mobile messaging marketplace app using React Native, Firebase, Mobx, CodePush, OneSignal

https://github.com/jsappme/react-native-firebase-starter

At JSapp.me we love using React Native to develop mobile apps. The developer community surrounding this project is one of the most active and positive.

5 reasons to use React Native

To give back to this wonderful community we decided to give away for free the source code of our latest Social Mobile Messaging Marketplace App.

https://play.google.com/store/apps/details?id=me.jsapp.myapp

https://itunes.apple.com/us/app/jsapp-my-app/id1165501349?mt=8

This app allows users to upload a picture and some informations about an item they want to sell to a social feed. Potential buyers are notified by real time push notification and can directly start chatting with the seller. The first user to click on the Buy button can reserve the item and finalize the sale. At this time the app does not offer payment method.

This app is build with:

• React Native : One language, JavaScript, one source code.
• MobX : Simple, scalable state management (easier than Redux)
• Firebase : Cloud based database and storage service
• CodePush : Push code updates to your apps, instantly
• OneSignal : Unlimited push notifications‎

How to install the app?

Prerequisites

To create your own copy of this application, here are the prerequisites:

• Yarn installed on your system or simply use npm if you prefer.
• React Native installed on your system.
• Android SDK installed to run the app on android devices.
• Xcode installed to test the app on iOS devices or simulator.

Build your own copy

Clone the repository:

git clone https://github.com/jsappme/react-native-firebase-starter.git NewApp
cd NewApp

Let’s install all the dependencies:

yarn

In order to run the app you have to setup Firebase (CodePush and OneSignal are optional).

Firebase Setup:

After Login or Register at https://firebase.google.com/

Go to your Firebase console: https://console.firebase.google.com/

Create a new project and click on Add Firebase to your web app.

Open the Firebase config file using your favorite editor (in my case Atom) and Copy/Paste your Firebase variables:

atom src/firebase.js

Next setup the Firebase Auth by enabling Email/Password Signup method:

https://console.firebase.google.com/project/newapp/authentication/providers

Copy and Paste your Firebase rules at: https://console.firebase.google.com/project/newapp/database/rules

{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null",
    "usernameList" : {
      ".read": true
    },
    "posts": {
        ".indexOn": "createdAt",
        ".read": true
    },
    "user_posts": {
      "$uid": {
        "posts": {
          ".indexOn": "createdAt"
        },
      },
    },
    "user_orders": {
      "$uid": {
        "posts": {
          ".indexOn": "createdAt"
        },
      },
    },
    "user_chats": {
      "$uid": {
        "posts": {
          ".indexOn": "updatedAt"
        },
      },
    },
  }
}

That’s it for Firebase!

Make sure all the packages are linked to React Native:

react-native link

Congratulation, you are now ready to lunch the app on an android device:

react-native run-android

To see the logs:

react-native log-android

To open the app on Xcode:

yarn run ios

You might need to add a Signing Team for MyApp and MyApptest to build it.

To run the app on an iOS simulator:

react-native run-ios

To see the logs:

react-native log-ios

We are available for hire to install and customize your mobile app. Please send us an email with your project requirements so we can give you a quote.