React :heart: React Native :yellow_heart: Express :green_heart: MongoDB

1. Setup MongoDB Database

• Activate MongoDB server, then create a dojo database with a ninja collection. Don't forget to create your database user:

  $ use dojo
  
  $ db.createUser({
      user: 'your_username',
      pwd: 'your_password',
      roles: ['readWrite', 'dbAdmin'] 
      })
  
  $ db.createCollection('ninja')
  

• Insert some data, as initial data, into ninja collection:

  $ db.ninja.insert([
      {nama: 'Andi', usia: 22},
      {nama: 'Budi', usia: 23}
      ])
  
  $ db.ninja.find().pretty();
  

• Done! :thumbsup:

2. Setup Node.js Backend Project

• Clone this repo, go to Express_Backend folder then install all dependencies:

  $ git clone https://github.com/LintangWisesa/React_RNative_Express_MongoDB.git
  
  $ cd React_RNative_Express_MongoDB/Express_Backend
  
  $ npm i
  

• Open app.js & edit this line to configure your database:

  var url = 'mongodb://user:password@localhost:27017/dojo';
  

• Save it, then run your backend project. It will run at localhost:3210:

  $ node app
  

• Done! :thumbsup:

3. Setup React Frontend Project

• Go to React_Frontend folder, install all dependencies then run this project:

  $ cd React_RNative_Express_MongoDB/React_Frontend
  
  $ npm i
  
  $ npm start
  

• It will run at localhost:3000 & open in browser automatically! Done! :thumbsup:

4. Setup React Native Android Project

• Activate your AVD (Android Virtual Device). In this project, I'm using Genymotion. It's much lighter than Android Studio's AVD.

• Go to RNative_Mobile folder, install all dependencies then run this project:

  $ cd React_RNative_Express_MongoDB/RNative_Mobile
  
  $ npm i
  
  $ react-native run-android
  

• Done! :thumbsup:

See also:

• React :heart: React Native :yellow_heart: Express :green_heart: MongoDB
• React :heart: React Native :yellow_heart: Express :green_heart: MySQL
• React :heart: React Native :yellow_heart: Express :green_heart: PostgreSQL

Lintang Wisesa :love_letter: [email protected]

Facebook | Twitter | Google+ | Youtube | :octocat: GitHub | Hackster