> For the complete documentation index, see [llms.txt](https://pencilr.gitbook.io/react-native-pencilr-app-with-backend/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://pencilr.gitbook.io/react-native-pencilr-app-with-backend/make-it-your-own.md). # Make It Your Own here come the steps to create your backends, deploy the API, and get your endpoints ## Step 1: Create a Firebase project * In the [Firebase console](https://console.firebase.google.com/), click Add project, then select or enter a Project name.(e.g. pencilr) * (Optional) If you are creating a new project, you can edit the Project ID. Firebase automatically assigns a unique ID to your Firebase project. Visit [Understand Firebase Projects](https://firebase.google.com/docs/projects/learn-more#project-id) to learn about how Firebase uses the project ID. * Click Continue * Click Create project ## Step 2: Register Your App With Firebase * In the center of the Firebase console's [project overview](https://console.firebase.google.com/) page, click the Web icon (\) to launch the setup workflow. * If you've already added an app to your Firebase project, click Add app to display the platform options. * Enter your app's nickname. This nickname is an internal, convenience identifier and is only visible to you in the Firebase console. * No need to setup “hosting”. Just uncheck hosting option. * Click Register app. * In the Firebase console, open Settings > [Service Accounts](https://console.firebase.google.com/project/_/settings/serviceaccounts/adminsdk). ![N](https://i.imgur.com/EOCYqIO.png) * Choose Nodejs, and then click Generate New Private Key, then confirm by clicking Generate Key. * Securely store the JSON file containing the key. ## Step 3: Configure the database * Go to `Databases` , click on `create database` button, then choose `production mode` and then click `next`. If there was no `create database` but you see this window ![](https://1827193846-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1QTd2VkMHX-_ibF2b8%2F-M6uA5vxU-8gSGekUk9b%2F-M6uBhd5e4mu9Mj_lfsh%2FScreenshot%202020-05-09%20at%2011.08.24%20PM.png?alt=media\&token=ea71dbf6-2bde-4e83-b63b-c9a00c59de94) then, click on `Go to Cloud Platform` button. It will take to you google cloud console. You will see the following option ![](https://1827193846-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1QTd2VkMHX-_ibF2b8%2F-M6uA5vxU-8gSGekUk9b%2F-M6uCOuodIy91k7ynKLm%2FScreenshot%202020-05-09%20at%2011.11.52%20PM.png?alt=media\&token=ac47803f-d3fc-4da8-bda2-fe5300befd78) click on `Swtich to native mode` button. That's it. * in the Firebase console, go to `Databases > Rules` and update the rules with the following: ``` rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { match /{document=**} { allow read, write: if false; } } } ``` * Go to `Databases > indexes` and add indexes as follows: ![every new index takes a few moments to be enabled](https://1827193846-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1QTd2VkMHX-_ibF2b8%2F-M6uCmZx0GrbEFdKdana%2F-M6uEiGm5W0wtuNTYhTY%2FScreenshot%202020-05-09%20at%2011.22.27%20PM.png?alt=media\&token=6f27efe8-fd8e-4cab-9ed0-eda1acfeb6d9) * Go to `Storage > Rules` and update it with the following: ``` rules_version = '2'; service firebase.storage { match /b/{bucket}/o { match /{allPaths=**} { allow read; } } } ``` ## Step 4: Update some files in the `api` folder * Copy the content of the JSON file you saved in **Step 2**, copy *everything between the braces {}* and paste it here in `api/functions/src/utils/serviceAccountKey.ts` file: N Leave `const acc` and `export { acc }` as-is * Go to the [Firebase console](https://console.firebase.google.com/), open *Settings > General*. Copy the following config: ![N](https://i.imgur.com/34FsF5O.png) and **paste** it in `src/utils/config.ts` * Change the default project to the project name you just created. You can go to `api/ .firebaserc` file ![N](https://i.imgur.com/IdASo6L.png) * Install firebase CLI ``` $ npm install -g firebase-tools ``` * Open your terminal and cd to `api/functions` directory ``` $ cd api/functions ``` * deploy your api to your firebase cloud by running the following commands ``` $ npm install $ firebase login $ npm run deploy ``` * Copy your endpoint from your terminal **or** go to [firebase console](https://console.firebase.google.com/) > your project >Functions. ## Step 5: Update the endpoint in the `app` folder * Go to `app/src/utils/config.ts` file and update the endpoints `PencilrAPI.API` constant variable. ![N](https://i.imgur.com/xTArXtq.png) ## Step 6: Registering your app with Facebook * **Enroll as a Facebook Developer:** In order to create a Facebook app, open [Facebook Developer](https://developers.facebook.com/) and login to your account. * **Add new app:** option from the drop-down menu in the upper right corner. * **Set up Facebook Login:** Once the App ID is created, **Add a Product** webpage opens. Click **set up** option under **Facebook login**. ![](https://1827193846-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1QTd2VkMHX-_ibF2b8%2F-M1kAr6ZYjadcChT1oOg%2F-M1kEFccVz-BTU-iSb36%2Fimage.png?alt=media\&token=e4ab8baf-8d3c-4006-be43-b2d635f3637c) * **Select the platform of your application :** select iOS and Android ![](https://1827193846-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1QTd2VkMHX-_ibF2b8%2F-M1kAr6ZYjadcChT1oOg%2F-M1kEZ-R2hDlS3WLBLeY%2FChoose-app-platform.png?alt=media\&token=834fd490-1e91-47b4-b9ad-fbdd19251d44) * **Add** `host.exp.Exponent` as an iOS ***Bundle ID***. * **Add** `rRW++LUjmZZ+58EbN5DVhGAnkX4=` as an Android ***key hash***. ![](https://1827193846-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1QTd2VkMHX-_ibF2b8%2F-M1kAr6ZYjadcChT1oOg%2F-M1kFBKNz2umDXxkZFPF%2FScreenshot%202020-03-06%20at%209.29.50%20PM.png?alt=media\&token=79d90846-bf08-41fe-ad56-217dbe1d3bee) * **Go** to your facebook app dashboard and copy the **app id** ![](https://1827193846-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1QTd2VkMHX-_ibF2b8%2F-M1kAr6ZYjadcChT1oOg%2F-M1kGC5woo-tFWbOdbIF%2FScreenshot%202020-03-06%20at%209.33.07%20PM.png?alt=media\&token=0d4e95ef-a8db-4906-b798-2e9d97893526) * Go to `app/src/utils/config.ts` file and update the `FBConfig.id` constant variable with your new id you have just created. ## Step 7: Test The App: * run the following command: ``` $ cd app $ yarn start ``` Your browser will popup running a localhost server as follows: ![](https://1827193846-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1QTd2VkMHX-_ibF2b8%2F-M7hznGWaURU0CHwTyl8%2F-M7i1LujhCdbQs1QYUAf%2FScreenshot%202020-05-20%20at%2012.35.47%20AM.png?alt=media\&token=b7a6ba4a-6971-4050-979c-36d86c61d99c)