kwwwk / novelship-app-develop

Novelship Marketplace App

• Novelship Marketplace App
  • Developments
  • CodePush Scripts
  • React & Components
    • How to work on a new Component?
  • Styling
  • UI State Management
  • Server State Management
  • Localization of app
    • Steps to add a new language in the project
    • Tagging Terms for translations
    • WorkFlow of Translations
  • API & Data Fetching
  • Type Checking
  • File Structure
  • Assets
  • Code Standards
  • Notes
  • Architecture
  • Others

Developments

1. Clone this repository to local.

2. Setup Environment and Emulators/Simulators following this guide for your system. Make Sure to Setup

   1. Node
   2. Java
   3. Android Studio with SDKs and AVD
      1. Additionally also install "NDK (Side by side)" from Android Studio > SDK Tools.
   4. Android Env Paths
   5. Intel Virtualization
   6. Watchman

3. Environment Variables: Make a copy of .env.sample as .env.

4. Local API Server uses a self signed certificate. Connect to the local API server setup according to steps given below for different platforms

   • iOS

     • Run the command mkcert -CAROOT in your terminal, this will give you the path to the rootCA.pem certificate. Drag and drop the certificate from the location to your iOS Simulator. Now you should be able to access local API server from your simulator.

   • Android

     • Self signed certificate doesn't work with android emulator. You can either use the Test API Server or setup a tunnel in the API project. In the API repo, set your TUNNEL_SUBDOMAIN=YOUR_USERNAME-novelship (TUNNEL_SUBDOMAIN=vignesh-novelship) in .env. Then run npm run dev:tunnel to start a tunnel connection. It will print the tunnel url

5. VSCode is a recommended Code Editor. Install Recommended VSCode extensions for a better experience. (Open Project in VSCode, Go to Extensions, Select show recommended extensions)

6. Use Scripts from package.json to run the build

CodePush Scripts

# Codepush deployments
appcenter codepush deployment list -a novelship/Novelship.Android -k

# Codepush release
appcenter codepush release-react -a novelship/Novelship.iOS --plist-file "ios/novelship/Info.plist" -d Staging

React & Components

How to work on a new Component?

Start by creating your component in app/component.

• Components must not include their own paddings, margin, shadow, border and position unless they will be always used with those styles. For better reusability, components must not define how their environment is. We can always easily wrap them in a <Box> and add the required wrapping styles.
• If the component is going to be used at too many places with multiple conditions. Duplicate it, don't abstract more. Read more...

Styling

• See Restyle By Shopify
• Provides support for theming, typography and responsive UI. Inspired by the popular Styled System Library
• Use predefined colors from app/styles/theme.ts
• Follow Font & Spacing from app/styles/theme.ts
• Font Used is IBM Plex Sans. All components must use these fonts
• Do not use fontWeight Property. Use fontFamily with one of the options from app/styles/theme.ts.Fonts. Using only fontWeigh will apply the weight on a wrong font.
• Ensure to disable fontscaling when directly using a third party or react native component which directly displays text. We will support fontscaling when we setup responsive font sizes on the app.

UI State Management

• Manage local component state with React.useState
• Global State : Easy Peasy (Redux Wrapper)
• Import state hooks from app/store/ only. These have been types setup.

Server State Management

• Query API using React Query.
• React Query has built in hooks for data fetching, caching, mutations, suspense and much more. Read the docs for more info.

Localization of app

We are using Lingui JS for translating our app into local languages. You can access the documentation for Lingui here

Steps to add a new language in the project

1. Click here to search subtags for the language you want to add e.g., You want to add Chinese. Then, your subtag would be zh

2. Once you have found the subtag for the language you want, add it to locales in .linguirc file

3. Add the language in language.js in app/services/language.ts

Tagging Terms for translations

• If you want to tag terms for translation in a react component wrap it inside a "Trans" component.

<Trans>Hello</Trans>

• Always use LB for line breaks imported from common/constants/index.ts. Using \n directly breaks the sentence after translations. lingui/js-lingui#1132

  lingui/js-lingui#1100

• If you want to tag a variable just wrap it with "i18n" and add the text to be translated in translate.js. Before adding something in translate.js, check if the text already exists in the file. also, translations are case sensitive. so "Hello" and "hello" needs to be tagged separately.

i18n._(mode)

• For adding a term for form fields we add the term directly in translate.js or translate the placeholder/label

WorkFlow of Translations

1. On every commit on develop branch, terms are extracted automatically and added to your commit.

2. On every push to develop branch, terms tagged for translations are automatically synced to poeditor.com via webhooks.

3. Translations for terms exported can be done by the contributors added to POEditor.

4. Translated terms are automatically fetched and overwritten on every build.

5. If one needs to see translations in development environment, run

npm run lingui:import

API & Data Fetching

1. common/api: Exposes API with all fetch, post, put, patch and remove methods.
   1. API.fetch takes in the params for filtering, sorting, joining etc as per Backend API specs.
   2. API.fetch also works for external APIs.

Type Checking

• Project is ready to use typescript.
  • Typescript Docs
  • Typescript React Cheatsheet

File Structure

• /app/components: base reusable components
• /app/config: base configurations
• /app/hooks: app hooks or native only hooks
• /app/navigation: Navigation routes and stacks
• /app/services: services/integrations, like utils but are non functional
• /app/store: Global state store and controllers
• /app/styles: base style configs
• assets/: Assets to be bundled with app
• /common/api: api utils
• /common/constants: constants
• /common/utils: basic utils, mostly pure functional
• /types: common type definitions

Assets

• Image assets must be stored in AWS S3 and proxied with Imgix. If the asset is used appwide or on main components like splash, store it in /assets
• Use auto=format,compress for all imgix image query. compress can be dropped for some cases
• Display responsive images: Imgix React Native Guide
• Create React Native SVGs React SVGR
  

Code Standards

• Prettier + Eslint
• Auto Prettify on commit

Notes

• Currency Utils Usage:
  • Use useCurrencyUtils Hook when using Currency Utils inside React Components.
  • Use utils/currency functions elsewhere.
  • By default it uses currentCurrency as currency

Architecture

Level	Name	Phase	Tool	Why	For
1	OTA updates	To setup	Expo	Quick OTA Updates	All
2	Performance and Crashlytics	To setup	Firebase	Tracking performance, crashes and live errors	SRE Team

Others

• Install recommended Code editor extensions
• Only use NPM and not Yarn to manage packages.