Quizzelda Mobile App

​

What Prerequisite knowledge do you need to run this app ?

• ​React​

• ​React-Native​

• ​Yarn​

• ​Git​

• ​Node

​

Prerequisite Credentials you need to obtain in order to run this app

• Facebook App Id

• Firebase app with relevant configuration files for android, ios and web

Installation Guide

1. Run yarn install on the root folder

Prerequisites

this stage is only to prepare the platforms the code uses prior the actually app and native configuration - please don't touch native code only in next stage

​

its better to create some quizzes and categories in dashboard prior running the app

Firebase

​

please refer to this docs for adding rn-firebase to project : https://rnfirebase.io/​

​

1. Create new firebase project​

2. Enable the following sign in methods : Email/Password, Facebook, Apple Sign In and Anonymous

3. Create Firestore database

4. Create 2 composite indexes (not mandatory at this stage as after you run app you would get an error with link to create those indexes) : a. collection id - quizzes, field path - category Ascending and field path = date Descending b. collection id - quizzes, field path - id Ascending and field path = date Descending

Facebook

1. Create new facebook app and follow instructions for the quick start and how to configure the app id in the android and ios apps

Apple

1. you need to enable apple sign in and push notifications via developer console, go to apple developer and to your account, identifiers , choose your app identifier, and enable push notifications and apple sign in capabilities.

Installation

Im referring in this section to the relevant docs of the platforms, as its better to read the updated docs directly from the platforms websites

1. react native firebase config's - please refer to docs here in this sections: a. app b. authentication c. firestore

Please note, react native firebase already includes all the xcode frameworks ,so please do not install them manually as it would cause many build errors

1. apple sign in - enable apple sign in by going to your app target -> capabillities and enable Apple Sign In

2. react native paper - refer to docs here. a. please note - as react native paper uses react-native-vector-icons, there is need to manually install this fonts. android - please add this gradle line in the bottom of your app build.gradle file : apply from: "../../node_modules/react-native-vector-icons/fonts.gradle" where you should replace node modules with your library path if its different in ios you should manually install each of the fonts by downloading them and adding them into info.plist file. example : <key>UIAppFonts</key> <array> <string>FontAwesome.ttf</string> <string>MaterialIcons.ttf</string> <string>MaterialCommunityIcons.ttf</string> <string>Montserrat-Black.ttf</string> <string>Montserrat-BlackItalic.ttf</string> <string>Montserrat-Bold.ttf</string> <string>Montserrat-BoldItalic.ttf</string> <string>Montserrat-ExtraBold.ttf</string> <string>Montserrat-ExtraBoldItalic.ttf</string> <string>Montserrat-ExtraLight.ttf</string> <string>Montserrat-ExtraLightItalic.ttf</string> <string>Montserrat-Italic.ttf</string> <string>Montserrat-Light.ttf</string> <string>Montserrat-LightItalic.ttf</string> <string>Montserrat-Medium.ttf</string> <string>Montserrat-MediumItalic.ttf</string> <string>Montserrat-Regular.ttf</string> <string>Montserrat-SemiBold.ttf</string> <string>Montserrat-SemiBoldItalic.ttf</string> <string>Montserrat-Thin.ttf</string> <string>Montserrat-ThinItalic.ttf</string> </array>

Next, you'll need to add facebook data:

Android: create file names strings.xml in res/values folder, and add there the following data

<resources>
    <string name="app_name"><YOUR_APP_NAME></string>
    <string name="facebook_app_id"><YOUR_FACEBOOK_APP_ID></string>
</resources>

for ios : add these to the info.plist file :

	<key>CFBundleURLTypes</key>
	<array>
		<dict>
			<key>CFBundleURLSchemes</key>
			<array>
				<string>fb<YOUR_FB_APP_ID></string>
			</array>
		</dict>
	</array>
	<key>FacebookAppID</key>
	<string><YOUR_FB_APP_ID></string>
	<key>FacebookDisplayName</key>
	<string><YOUR_FACEBOOKP_DISPLAY_NAME></string>

b. also add all the roboto fonts to the project - you can download them from here. please refer here how to add fonts to react native project.

1. android - add multidex​

​

Deploying mobile app locally

1. run yarn install from root folder

2. Lunch ios emulator and click on play in xcode

3. For android there is need to run react-native run-android to start metro server if its didnt start yet

​

Deploying mobile app in production

1. refer to android docs on how to create signed apk or app bundle

2. Create user in google play console and follow instructions

3. IOS - refer to this guide how to prepare your app for distribution

4. Create app in apple developer - and buy subscription if you don't have one yet

5. Next steps is to follow the installation guide

​

Dashboard

After installing mobile app, dashboard should be quite simple to install as it contain already node and react.

Installation guide for web

• Install firebase cli using this guide​

• Install libs using yarn install from root of /quizzelda-web folder

• To run just use yarn build form root fo/quizzelda-web

​

adding firebase creds

• create file names config.json in quizzelda-web/src/lib directory

• add the following code there

{
    "apiKey": <YOUR_FIREBAS_WEB_KEY>,
    "authDomain": <YOUR_FIREBAS_AUTH_DOMAIN>,
    "databaseURL": <YOUR_FIREBASE_DB_URL>,
    "projectId": <YOUR_FIREBASE_PROJECT_ID>,
    "storageBucket": <YOUR_FIREBASE_STORAGE_BUCKET>,
    "messagingSenderId": <YOUR_FIREBASE_SENDER_ID>
}

​

​

Deploying guide locally

After yarn start it should open chrome page with localhost:3000 and thats it

Deploying guide to production

If you want to use firebase hosting you can sue this guide to deploy it there.

​

​

​

​

​

​

​

​

​

​

​

​

​