Skip to content

Latest commit

 

History

History
354 lines (219 loc) · 11 KB

README.md

File metadata and controls

354 lines (219 loc) · 11 KB
Raw

Showtime

The Showtime app powered by Expo, Next.js, Storybook and Universal UI.

You'll find included:

Architecture

Introduction: Universal Design System by Axel Delafosse

App

Code shared between iOS, Android and Web

cd packages/app

Design System

Universal design system

cd packages/design-system

Expo

React Native

Expo entrypoint: apps/expo/App.tsx

cd apps/expo

yarn dev to start the development client (iOS and Android app with Expo)

Next.js (React Native)

Web

Next.js entrypoint: apps/next-react-native/src/pages/_app.tsx

cd apps/next-react-native

yarn dev to start the web app

Storybook React

Storybook for Web (using React Native for Web)

Storybook config: apps/storybook-react/.storybook/*

cd apps/storybook-react

yarn dev to start Storybook

Storybook (React Native)

Storybook for React Native

Storybook config: apps/storybook-react-native/.storybook/*

cd apps/storybook-react-native

yarn dev to start Storybook

Usage

Here is a quick overview of the repo.

Commands

The monorepo leverages Turbo as it's build system. There are a lot of advantages to Turbo but two deciding factors were

  1. Faster, incremental builds
  2. Cloud caching, managed by Vercel

Turbo pipelines are configured within the root directory package.json and can be ran through yarn scripts.

Development

Build

Start

Lint

Formatting

The formatting rules are the ones from prettier/recommended. The actual formatting is done via eslint.

To get formatting on save in VS Code, install the eslint extension and add the following setting:

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}

Graph

Utility scripts

  • clean removes all monorepo node_modules and clears the turbo cache
  • clean:turbo clears the turbo cache
  • clean:node-modules removes all node_modules
  • clean:native runs yarn clean and removes android, iOS folders from expo and storybook-react-native apps.

Enable Remote Cache

Turbo can use a technique known as Remote Caching to share cache artifacts across machines for an additional speed boost.

Local Remote Cache

Link your local turbo project to the remote cache through Vercel

npx turbo login
npx turbo link

To verify, build and delete your local turbo cache with:

  1. Run any build locally
  2. Clear the turbo cache 
    yarn clean:turbo
  3. Then run the same build again. If things are working properly, turbo should not execute tasks locally

Mobile Development Client

You can create a development client in local or in the cloud.

Expo dev client

  • We're using expo dev client for development builds which allows us to add custom/third party native libraries while preserving the expo like developer experience. Read more about custom dev clients here
  • You only need to build and install custom dev client in below cases.
  1. If you don't have it installed on your phone or simulator
  2. If you make any changes on native side or add a new native library
  • To install dev client, plug your device and run below commands. This will install the dev client and start the javascript bundler.
// For iOS
yarn ios -d

// For android
yarn android
  • For subsequent developments, we can simple start javascript bundler, no need to build dev client again. Run below command to start the bundler.
yarn dev:expo

Local

❗️ The yarn script commands are from within the @showtime/expo application ❗️

Plug your device and build the app with Expo CLI:

yarn ios -d
yarn android -d

iOS: if yarn ios -d doesn't detect your iPhone, make sure that you have compatible Xcode and iOS versions.

Android: if you are on a Mac M1, please install the following JDK: curl -s "https://get.sdkman.io" | bash sdk install java 11.0.14-zulu

Cloud

Use Expo Application Services to build the app:

yarn build:development

This is useful if you want to build the iOS app without a Mac, for example.

Design system (Universal UI)

React Native for Web + Tailwind

Note that we use custom utilities for the fonts to use capsize. It's applying negative margin-top and margin-bottom so you can't use those on <Text> directly. Prefer using a separator <View tw="h-2" /> instead of <Text tw="mt-2" /> or <Text tw="mb-2" /> for example.

State Management

SWR

  • SWRConfig in apps/expo/App.tsx and apps/next/src/pages/_app.tsx

Data Fetching

SWR + axios

  • axiosAPI in packages/app/lib/axios.ts
  • useSWR hooks like const { data, error } = useSWR([url], url => axios({ url, method: 'GET', unmountSignal }))
  • packages/app/hooks/use-user.ts

Navigation

React Navigation + Next.js Router

Authentication

Magic + WalletConnect

  • packages/app/components/login.tsx

Analytics

RudderStack

Testing

Waldo + QA Wolf

Deployment

Vercel + Expo

CI/CD

GitHub Actions

Environment Variables

Using dotenv for the Expo app. Next.js is automatically picking up the .env.local file.

  • .env.development + .env.staging + .env.production in apps/expo
  • .env in apps/next-react-native

Release Cycle

Native

Over The Air Update (EAS Update)

  1. Increment the patch version in the root package.json

  2. Run yarn update:production in apps/expo

  3. Close and reopen the production app twice to check the new update

Native Build (EAS Build + EAS Submit)

  1. Increment the major version in the root package.json

  2. Run yarn deploy:production in apps/expo

  3. Submit the new build for review on TestFlight and Google Play

Web

CI/CD with Vercel for PR previews + GitHub Actions via /promote Slack command

Notes

Pro tip: you can add tw to Tailwind CSS: Class Attributes VS Code extension setting to get IntelliSense working.

Pro tip: Ignore a list of commits within git-blame by default on version >2.23

git config blame.ignoreRevsFile .git-blame-ignore-revs

Root

  • Don't add any package here

App

  • Don't add any package here
  • You can use SVGR to generate the icons component from the .svg files: npx @svgr/cli --icon --replace-attr-values "#000={props.color},#fff={props.color},#FFF={props.color}" --ignore-existing --native --typescript -d . . and then you can programmatically change the color thanks to fill={props.color} for example.

Expo

  • Add all the React Native and universal packages here

Next.js

  • Add the web-only packages here

Quick Style Guide

  • Filenames: lowercase and separated by dashes
  • Prefer absolute imports
  • export { Component } instead of export default Component