/splitter

Expo + Turborepo + tRPC go brrrrrrr 🚀🔥

Primary LanguageTypeScript

Splitter

Splitter Logo

Expo + Turborepo + tRPC go brrrrrrr 🚀🔥

Summary

  1. Usage

    1.1 Development

    1.2 Production

    1.3 Test

  2. Deploy

  3. Screen Shots

  4. Motivation

  5. Stack

Usage

Development

Setup development environment With Turbo repo.

  1. 🏗 Setup .env files:
cp .env.example .env
  1. 📦 Install dependencies, inside the root folder run:
pnpm install
  1. 🚀 Run in development mode, inside the root folder run:
pnpm run dev

Production

For every app, but mobile the process is really straightforward:

  1. 🏗 Setup .env files:
cp .env.example .env
  1. 📦 Install dependencies, inside the root folder run:
pnpm install
  1. 📦 Build all apps packages, inside the root folder run:
pnpm run build
  1. 🚀 Run the production builds, inside the root folder run:
pnpm run start

Mobile (.APK, .IPA)

If you want a preview of the mobile app, in a apk or ipa, you will have to:

cd apps/mobile

eas build -p android --profile development

Test

Lint

pnpm run lint

This lints stuff...

If you want to test specifics run inside each app folder.

Unit and Integration

To run unit and integration tests just run this shit locally:

pnpm run test

It will test every repo, if you want to test specifics run inside each app folder.

End To End

End to end test is handled by detox, to run the test first we need to build an release app.

Inside apps/mobile folder run:

# ios
pnpm run e2e:ios:build
# or
# android
pnpm run e2e:android:build

Next, run the detox test script:

# ios
pnpm run e2e:ios:test
# or
# android
pnpm run e2e:android:test

Both tests will be run in headless mode, so don't expect the emulator to pop-up.

Deploy

We are using railway.app to deploy the backend app, and EAS to build, update, and release the mobile app.

Screen Shots

animations-record.mp4

Motivation

This study objective is not to create an application restricted in a stack. But to elaborate and test SOTA tools that enable a stable and productive stack. Or goals with the final product is to find a stack that:

  1. Improves developer experience;
  2. Allows fast deploy and development;
  3. Constructs an app with great performance;
  4. Defines an architecture to easily componentize and reuse animations;
  5. Implements code quality tools (e.g. test, static analysis, linting, etc.);
  6. Target the largest number of devices (e.g. ios, android, and web).

Stack

Current stack been used in the challenge:

Workspace

  • pnpm
  • turborepo

Framework

  • react native
  • expo

Test & Debug

  • flipper
  • detox
  • jest

Components, Animation & Styling

  • nativewind (Tailwind)
  • reanimated
  • flash list - docs

State Management & Storage

Network & API

  • react query
  • tRPC - docs
  • fastify - docs

Deploy

  • github actions
  • railway.app
  • eas