CHORE: Improve docs

.gitignore

@@ -42,4 +42,4 @@ scripts/doppler_variables.sh
 .env
 env.json
 
-.vercel
+.vercel

.vscode/settings.json

@@ -1,5 +1,5 @@
 {
-  "cSpell.words": ["icomoon", "notificated", "postsecondary", "Touchables"],
+  "cSpell.words": ["Binar", "diawi", "icomoon", "mobileprovision", "notificated", "postsecondary", "Touchables"],
   "todohighlight.keywords": [
     {
       "text": "CONFIG:",

README.md

@@ -20,18 +20,18 @@ This is a template to be used with react native and expo. It includes all the ne
 
 Check out our [documentation page](https://baca-rn-docs.vercel.app/docs/bootstrap/intro), it contains:
 
-- Bootstraping project - tutorial how to easy setup from scrath
+- Bootstrapping project - tutorial how to easy setup from scratch
 - Deploying app
-- Tutorials
-  - How to manage environment variables
-  - Use jotai as state management tool
+- Tutorials how to:
+  - manage environment variables
+  - use jotai as state management tool
 
 ## Why to use?
 
 We know there are a lot of project starters for react native, but we have some good features:
 
 - Fully works with **EXPO GO**
-  - Good for start the project and later you can switch to expo-dev-client
+  - Good for start of the project, later you can switch to expo-dev-client
 - Fully works on **WEB**
   - If you want to develop apps both on web and mobile this starter is good choice for you
 - **Code generators** (create new screen / create new component)
@@ -54,7 +54,7 @@ It's great for production project, but if you want to just test it, you can foll
 
 - `npx create-expo-app --template=@binarapps/expo-ts-template name_of_your_app`
 - `cd name_of_your_app`
-- `yarn bootstrap` - the cli will ask you some questinos about your app (you can fill all this data later)
+- `yarn bootstrap` - the cli will ask you some questions about your app (you can fill all this data later)
 
 ## What's inside?
 
@@ -118,15 +118,15 @@ It's great for production project, but if you want to just test it, you can foll
 - write docs (app deployment, app setup and more) - in progress
 - tutorial on how to use features
   - navigation
-  - deeplinking
+  - deepLinking
   - auth flows
   - components
   - react query
   - api calls
   - state management tool
-- Add desings (figma) and redesing whole app
+- Add designs (figma) and redesign whole app
 - Updating expo versions (in future)
-- Deploy app to appstore and playstore
+- Deploy app to App Store and Play Store
   - Create sample app and document the process of deployment
 - Improve mock server logic
 - add commit lint
@@ -176,7 +176,7 @@ Environment variables instruction:
 
 1. Create empty file `scripts/doppler_variables.sh` and add this script to new created file.
 
-- run `yarn prepare:env_file` - this will copy template and plase it in `scripts/doppler_variables.sh`
+- run `yarn prepare:env_file` - this will copy template and place it in `scripts/doppler_variables.sh`
 
 2. Add correct values to variables (ask one of the developers for that), example:
 
@@ -221,7 +221,7 @@ If you have any feedback, please reach out to me at mateusz.rostkowsky995@gmail.
 
 ### Outdated (not maintained anymore)
 
-- https://github.com/kacgrzes/expo-typescript-template (our repo is fork of this one - we keep maintaing this)
+- https://github.com/kacgrzes/expo-typescript-template (our repo is fork of this one - we keep maintaining this)
 - https://github.com/codingki/react-native-expo-template
 - https://github.com/flatlogic/react-native-starter
 - https://github.com/mcnamee/react-native-expo-starter-kit

docs/docs/bootstrap/BOOTSTRAP_INTRO.md → docs/docs/bootstrap/BOOTSTRAP_INTRO.mdx

@@ -10,45 +10,49 @@ tags:
 description: Bootstrap project structure, that is needed to start development your new project
 ---
 
+import Details from '@site/src/components/Details'
+
 # BOOTSTRAP - start development 🕐
 
 Bootstrap project structure, that is needed to start development
 
-### **What you need to do to start development?**
-
-#### 1. Clone this repository
+## **What you need to do to start development?**
 
-There are three types that you can clone the repo:
+---
 
-1. Init using this command (beaware that sometimes this template can't be updated on npm, in that case, clone this repository and reinitialize repozitory for yourself - check third type of setup)
+### 1. Setup repository
 
 ```bash
-npx create-expo-app --template=@binarapps/expo-ts-template name_of_your_app
+git clone git@github.com:binarapps/baca-react-native-template.git name_of_your_app
+cd name_of_your_app
 ```
 
-2. Use this as template repo on GitHub
-   ![Github Repository Template](../../static/img/github-repository-template.png)
+> Removing git history **(not recommended)**
+>
+> - do it only if you don't want to keep history of commits - maybe client doesn't want this
+> - when you will get rid of git history it could be hard to apply changes made in the starter file
+>
+> ```bash
+> rm -r .git
+> git init
+> git commit -m "chore: initialize project"
+> ```
 
-3. Clone repository
-
-   This usage is usefull when you want to keep git history, thanks to this you can sync incomming changes in this template
+<Details title="Other options to setup repository">
+1. Init using this command (be aware that sometimes this template can't be updated on npm, in that case, clone this repository and reinitialize repository for yourself - check third type of setup)
 
 ```bash
-git clone git@github.com:binarapps/expo-ts-template.git
-cd expo-ts-template
-yarn
-yarn start
+npx create-expo-app --template=@binarapps/baca-react-native-template name_of_your_app
 ```
 
-- in that case you can also reinitialize repozitory if you don't want to keep history of commits
+2. Use this as template repo on GitHub
+   ![Github Repository Template](../../static/img/github-repository-template.png)
 
-```bash
-rm -r .git
-git init
-git commit -m "chore: initialize project"
-```
+</Details>
+
+---
 
-#### 2. Login / register to expo
+### 2. Login / register to expo
 
 If you have expo account → go login with it
 
@@ -76,7 +80,9 @@ eas login
 eas whoami
 ```
 
-#### 3. Create project on expo.dev
+---
+
+### 3. Create project on expo.dev
 
 a. Sign in to the expo dev console (account created in the first step of repo configuration).
 
@@ -102,24 +108,26 @@ Display name is a name that will be visible in the Expo Dev Console.
 
 Slug is the name that will link your Expo application with your code.
 
-![Project create](../../static/img/expo_create.png)
+## ![Project create](../../static/img/expo_create.png)
 
-#### 4.Sync project with code.
+### 4.Sync project with code.
 
 Synchronize the newly created Expo Project to your app.
 
-In app.json file please insert the following:
+In `app.json` file please insert the following:
 
-a. **slug name** - created in 1-st point.
-b. **owner** - organization picked from the list in 1-st point
-
-<!-- TODO: This should be better documented - we should update app.config.ts instead not app.json -->
+1. **slug name** - created in 1-st point.
+2. **owner** - organization picked from the list in 1-st point
 
 ```json
 {
   "expo": {
     "owner": "your_organization_name",
-    "slug": "example-app-name"
+    "slug": "your_app_name"
   }
 }
 ```
+
+---
+
+### 5. Make environment setup - [tutorial](/docs/doppler-config)

docs/docs/deploy/DEPLOY_INTRO.md

@@ -141,7 +141,7 @@ description: Intro to app deployment
         </td>
         <td>
             <ul>
-                <li>Can't test native modules that are not supported by expo go like: firebase analytics,  onesignal</li>
+                <li>Can't test native modules that are not supported by expo go like: Firebase Analytics,  OneSignal</li>
                 <li>It's little different than native app, will need additional tests after testing in expo go</li>
             </ul>
         </td>

docs/docs/tutorials/BACKEND-CONNECTION.md

@@ -16,9 +16,9 @@ description: Backend connection - check how to fetch data from backend and displ
 
 This template uses this packages to keep connection with backend:
 
-- (axios)[https://axios-http.com/docs/intro] - direct calls to backend
-- (react-query)[https://tanstack.com/query/latest/docs/framework/react/overview] - use hooks that helps displaying data on UI
-- (orval)[https://orval.dev/overview] - generating query hooks based on swagger (provided by backend)
+- [axios](https://axios-http.com/docs/intro) - direct calls to backend
+- [react-query](https://tanstack.com/query/latest/docs/framework/react/overview) - use hooks that helps displaying data on UI
+- [orval](https://orval.dev/overview) - generating query hooks based on swagger (provided by backend)
 
 ## Generate new query
 
@@ -38,7 +38,7 @@ This template uses this packages to keep connection with backend:
   - override-header - additionally turning off `no-explicit-any` eslint rule
   - mutator - where is api instance placed
   - afterAllFilesWrite - what should happened when the script will run - we are running liter with fix flag
-- Orval is very flexible and you can do a lot modifications, please check (their docs)[https://orval.dev/overview] for reference
+- Orval is very flexible and you can do a lot modifications, please check [their docs](https://orval.dev/overview) for reference
 
 2. How to do changes to axios instance
 

docs/docs/tutorials/DOPPLER_CONFIG.mdx

@@ -16,7 +16,13 @@ import Details from '@site/src/components/Details'
 
 # Doppler configuration 🌈
 
-Thanks to doppler you will be able to autoamtically mange your environment varialbes.
+## Why you need it?
+
+Thanks to doppler you will be able to automatically mange your environment variables.
+
+This starter have fully integrated doppler configuration, you just need to do few easy steps
+
+## Configuration
 
 <Details title="1. Sign up for the Doppler tool">
 
@@ -63,7 +69,7 @@ a. Enter the projects tab, and select a newly created project
 
 b. Each project consist of three predefined environments - dev, stg and prd. \*\*
 Click each of them to enter environment variable page.
-![Select environment](../../static/img/doppler_envirnoments.png)
+![Select environment](../../static/img/doppler_environments.png)
 
 c. To add a new environment variable click on <b>Add first secret</b>
 ![Add first secret](../../static/img/doppler_secret_add.png)
@@ -82,14 +88,7 @@ g. Make sure that you have consistent data in each environment. In these step, y
 
 </Details>
 
-<Details title="5. Implement Doppler tool onto the app.">
-
-Use gist to go through the implementation of Doppler tool in the app. \*\*
-In doppler_variables.sh file, please use generated Access Tokens from the above.
-
-</Details>
-
-<Details title="6. Get Access from your code level">
+<Details title="5. Get Access tokens">
 
 a. Enter <b>Access</b> tab:
 
@@ -116,19 +115,47 @@ f. To be able to use environment variables for different environments (qa/stagin
 
 </Details>
 
+<Details title="6. Place doppler tokens in configuration file">
+
+1. Create empty file `scripts/doppler_variables.sh` and add this script to new created file.
+
+- run this command (this will copy template and place it in `scripts/doppler_variables.sh`)
+
+```bash
+yarn prepare:env_file
+```
+
+2. Add correct values to variables (ask one of the developers for that), example:
+
+```bash
+export DOPPLER_TOKEN_DEVELOPMENT=dp.st.alpha.XXXXxxxxXXXXxxxxXXXXxxxx
+```
+
+</Details>
+
 <Details title="7. Check if everything works correctly.">
 
 In project dir terminal run:
 
 ```bash
-yarn prepare:(qa/staging/production)
+yarn generate:env:(qa/staging/production)
 ```
 
 Choose the proper app version depending on the environment for which you want to generate env file.
 
-<b>.env</b> file should be generated and consist of variables passed to Doppler, and some extra doppler
+<b>`.env`</b> file should be generated and consist of variables passed to Doppler, and some extra doppler
 variables as DOPPLER_CONFIG.
 
 CONGRATULATION !! 🥳🥳 You have configured the Doppler tool for your project!
 
+---
+
+Additionally you can start the expo server:
+
+- this will start server and generate env variables
+
+```bash
+  yarn start
+```
+
 </Details>

docs/docs/tutorials/ICONS.md

@@ -35,8 +35,8 @@ It is added to the app as a font generated by [icomoon app](https://icomoon.io/a
 7. Download font - icomoon app
 8. Replace old files with downloaded ones
 
-   - ./selection.json => assets/icomoon/selection.json
-   - ./fonts/icomoon.ttf => assets/icomoon/icomoon.ttf
+   - `./selection.json` => `assets/icomoon/selection.json`
+   - `./fonts/icomoon.ttf` => `assets/icomoon/icomoon.ttf`
 
 9. Generate new types for icons
 

docs/docs/tutorials/JOTAI.md

@@ -13,27 +13,6 @@ description: Doppler - automatically manage environment variables
 
 ## Jotai
 
-Jotai is great state management library - after cloning this repository it don't come with any state management tool, so if you want to have a quick start with something you can follow instructions bellow.
+This starter comes with jotai state management tool. Please check documentation on how it work in details:
 
-> **Warning**: Only works when git cloning repository (not working for rest methods of cloning repository), so follow the instruction bellow:
-
-1. Clone repository:
-
-```
-git clone git@github.com:binarapps/expo-ts-template.git
-cd expo-ts-template
-yarn
-yarn start
-```
-
-2. Checkout to jotai branch
-
-```
-git checkout feat/add_jotai_store
-```
-
-or merge to main
-
-```
-git merge origin/feat/add_jotai_store
-```
+- https://jotai.org/docs/introduction

docs/docs/tutorials/NOTIFICATIONS_SETUP.md

@@ -1,6 +1,6 @@
 ---
 id: expo-notifications
-slug: /expo-notofications
+slug: /expo-notifications
 title: Expo notifications
 sidebar_position: 4
 tags:
@@ -49,11 +49,11 @@ Expo notifications are already preconfigured in this template. However, you stil
 {
   "expo": {
     ...,
-    "owner": "@binarapps",
-    "slug": "expo-typescript-template",
+    "owner": "your_owner_name",
+    "slug": "your_app_slug",
     ...,
     "extra": {
-      "experienceid": "@binarapps/expo-typescript-template"
+      "experienceId": "your_owner_name/your_app_slug"
     }
   }
 }

docs/package.json

@@ -12,6 +12,7 @@
     "serve": "docusaurus serve",
     "write-translations": "docusaurus write-translations",
     "write-heading-ids": "docusaurus write-heading-ids",
+    "deploy:prod": "vercel --prod -y",
     "typecheck": "tsc"
   },
   "dependencies": {