salesassist v0.0.1

Expo Firebase Starter Kit (1.0.0)

This project serves as a starter kit to build expo applications with a firebase backend. Designed to work with Android, Ios & Web. The app is written in Typescript primarily for code documentaion and ease of use. The rules are relaxed to allow vanilla JS and can be adjusted in tsconfig.json. It comes prepacked with:

• firebase setup
• firebase emulators
• basic navigation
• basic admin web setup
• React Native Paper UI kit
• Bootstrap css for web admin

Table of contents

1. Getting Started
2. Installation
3. Configurations
4. Commands

5. Structure

   5.1.Breakdown

6. Resources

7. TODOS

Getting Started

Requirements

• Install nodejs 16
• Install Yarn
• Intall Expo cli - yarn global add expo-cli

• Install Firebase cli - yarn global add firebase-tools

Prerequisites

Before begining, ensure that you have already been added to the firebase project in the firebase console and have the project name ready at installation.

Installation

Run npx ... in your terminal in your directory of choice and enter the required data when prompted. The script will:

• create an app directory
• download the starter kit files
• setup firebase

• install all npm packages

From your firebase console, select the project and create:

A web application. Copy the generated firebaseConfig data into the ./config/firebaseconfig.js file.

An android application. Copy the generated google-service.json file into the ./assets/googleService/ directory.

An IOS application. Copy the generated GoogleService-info.plist file into the ./assets/googleService/ directory.

Configurations

Commands

The following commmands are found in the package.json file in the script section and can be used to assist development.

Development Mode

• yarn start - starts up the expo application for development
• yarn startWithEmulator - starts up the expo application for development and connect it to the firebase emulator
• yarn android - starts up expo for android development only
• yarn ios - starts up expo for ios development only
• yarn web - starts up expo for web development only

cloud functions:

• yarn start-firebase-emulators - starts up the firebase emulators
• yarn functions-dev - starts up the firebase cloud function for development
• yarn functions-deploy - builds and deploys firebase cloud functions

building:

• yarn build-android - creates an android development build of the application
• yarn build-ios - creates an ios development build of the application
• yarn build-web - creates a web development build of the application
• yarn publish - publish updates to expo server (doc)
• yarn publish-web - both builds and uploads web to firebase hosting (may need configuring)
• yarn deploy - only uploads web to firebase hosting (may need configuring)

msc.:

• yarn release - bumps app version

Staging Mode

• yarn stag-start - starts up the expo application for development
• yarn stag-startWithEmulator - starts up the expo application for development and connect it to the firebase emulator
• yarn stag-android - starts up expo for android development only
• yarn stag-ios - starts up expo for ios development only
• yarn stag-web - starts up expo for web development only

building:

• yarn stag-build-android - creates an android development build of the application
• yarn stag-build-ios - creates an ios development build of the application
• yarn stag-build-web - creates a web development build of the application
• yarn stag-publish - publish updates to expo server (doc)
• yarn stag-publish-web - both builds and uploads web to firebase hosting (may need configuring)
• yarn stag-deploy - only uploads web to firebase hosting (may need configuring)

msc.:

• yarn stag-bump-Version - bumps app version

Production Mode

• yarn prod-start - starts up the expo application for development
• yarn prod-startWithEmulator - starts up the expo application for development and connect it to the firebase emulator
• yarn prod-android - starts up expo for android development only
• yarn prod-ios - starts up expo for ios development only
• yarn prod-web - starts up expo for web development only

building:

• yarn prod-build-android - creates an android development build of the application
• yarn prod-build-ios - creates an ios development build of the application
• yarn prod-build-web - creates a web development build of the application
• yarn prod-publish - publish updates to expo server (doc)
• yarn prod-publish-web - both builds and uploads web to firebase hosting (may need configuring)
• yarn prod-deploy - only uploads web to firebase hosting (may need configuring)

msc.:

• yarn prod-bump-Version - bumps app version

Structure

/
|__assets
|__config (stores app config for dev,staging,prod + firestore rules and indexes)
|__functions (cloud functions dev area) 
|__src
|__
|  |__componentLibrary
|  |__components (holds all reuseable components)
|  |__constants 
|  |__context (global state (react context))
|  |__hooks (react external hooks)
|  |  |__useCachedResources.ts (preload stuff during splash screen)
|  |__layouts (global page layouts)
|  |__navigation (react navigation v6)
|  |__routes 
|  |__screens (main app pages)
|  |__utils (handly reuseable functions)
|__web (expo's index.html + other web files)
|__web-build
|__.firebaserc
|__.versionrc.js
|__app.config.js
|__App.tsx (entry point)
|__eas.json (configure expo builds)
|__firebase.json (configure firebase)
|__package.json
|__tsconfig.json (configure typescript)

Breakdown

1. /assets --- Used for core app assets such as icons, splash screens, etc

   1.1 /assets/googleService --- Used to store google-services.json & GoogleService-Info.plist from firebase

2. /config --- Used to store the config files for:

   • expo's app.json
   • firebaseconfig.js (where you add the config generated by the firebase console)
   • all firebase rules and indexes

3. /functions --- Used as the dev directory for cloud functions 3.1. /functions/lib --- Typescript generated file

   3.2. /functions/src --- Used as main dev directory

       3.2.1. /functions/src/ ---

4. /src --- Used as the main app/web dev directory

   4.1. /src/componentLibrary ---

   4.2. /src/components --- Used for all reuse able individual components

   4.3. /src/constants --- Used for global configurations

   • Firebase.ts --- Used to initialize firebase
   • GlobalTypes.ts --- used for global typescript types
   • Schemas.ts --- Used for formik forms schemas
   • Strings.ts --- Used to avoid "hard coding" text
   • Theme.ts --- Used for React Native Paper theming config

   4.4. /src/context --- Used for the app's global state using React Context. Controls stuff like login status, used data, etc.

   4.5. /src/hooks --- Used as the app's data layer. Move all "business logic" from inside components/screens(view layer) to external, reuseable files, following react hooks conventions.

   • useCachedResources.ts --- Used as an app preloader to load data during the splashscreen

   4.6. /src/layouts --- Used for global screen layouts and component designs

   4.7. /src/navigation --- Used for navigation design using React Navigation

   4.8. /src/routes --- Used for navigation route design where links to new screens are added.

   4.9. /src/screens --- Used for app screes/pages

   4.10. /src/utils --- Used for resuable helper functions

5. /web --- Used as expo's web directory and stores index.html + other web files

6. /web-build --- Used as the web build directory
7. .firebaserc
8. .versionrc.js --- Used as the Standard Version config
9. app.config.js --- expo's app config
10. App.tsx --- App entry point
11. eas.json --- Expo's eas config
12. firebase.json --- Firebase's config file
13. package.json
14. tsconfig.json --- Typescript's configuration

Resources

• Expo documentation
• Firebase Documentation
• React Context
• React Hooks
• React Native Paper
• React Navigation
• Standard Version

TODO:

• move hooks to seperate library
• add scripts for firebase rules
• redesign the handling of expo's app.json files
• design a test layer
• reconfigure web admin dashboard's theming and style