cyber-phys/kibro

Kibro: anti-social media MVP. Use as example for how to build mobile+web tamagui application with supabase.

Kibro Monorepo 🐢

🔦 About

This is the monorepo for Kibro. Kibro is designed to disconnect people from their phones by focusing on ephemeral events.

📦 Included packages

This repo is based on the Tamagui + Solito + Next + Expo Monorepo.

• Tamagui 🪄
• solito for cross-platform navigation
• Expo SDK
• Next.js
• React Navigation

🗂 Folder layout

The main apps are:

• expo (native)

• next (web)

• packages shared packages across apps

  • ui includes your custom UI kit that will be optimized by Tamagui
  • app you'll be importing most files from app/
    • features (don't use a screens folder. organize by feature.)
    • provider (all the providers that wrap the app, and some no-ops for Web.)
    • navigation Next.js has a pages/ folder. React Native doesn't. This folder contains navigation-related code for RN. You may use it for any navigation code, such as custom links.
    • components Reusable react components.

• types Typescript files, supabase.ts is autogenerated.

• supabase Supabase configuration folder.

🏁 Start the app

Install

• Install dependencies: yarn

• Install Supabase CLI

Setting up local supabase backend

• Login to supabase cli: supabase login

• Start Docker and make sure it is running.

• Start Supabase services: supabase start

If everything goes as plan you'll see the local Supabase credentials, which should look somthing like this.

Started supabase local development setup.

         API URL: http://localhost:54321
          DB URL: postgresql://postgres:postgres@localhost:54322/postgres
      Studio URL: http://localhost:54323
    Inbucket URL: http://localhost:54324
        anon key: eyJh......
service_role key: eyJh......

• Copy and rename .env.example to .env and populate with the local Supabase credentials from the last step.

Local Next.js dev

Next app is currently broken.

• Next.js local dev: yarn web

To run with optimizer on in dev mode (just for testing, it's faster to leave it off): yarn web:extract. To build for production yarn:prod.

To see debug output to verify the compiler, add // debug as a comment to the top of any file.

Local Expo dev

• Expo local dev: yarn native.

If the ios simulator does not open run open -a Simulator && expo start.

Production

• Create a new project on Supabase

• Link the project with the : supabase link --project-ref $PROJECT_ID

• Add encrypted secrets to your GitHub Action runners.

  • SUPABASE_ACCESS_TOKEN is your personal access token
  • SUPABASE_DB_PASSWORD is your project specific database password
  • PRODUCTION_PROJECT_ID
  • PRODUCTION_DB_PASSWORD
  • STAGING_PROJECT_ID
  • STAGING_DB_PASSWORD

• Each database migration should take 2 PR's, once on develop then into main

  • First verrify that database migrations were succesful by merging a PR into develop
  • Then create a new PR to merge the changes from develop into main

More about Supabase database migration + managing environments

Deploying to Vercel

• Root: ./apps/next
• Install command to be yarn set version berry && yarn install
• Build command: leave default setting
• Output dir: leave default setting

Developing

Supabase Backend

Local supabase web interface: localhost:54323 The supabase docker images provide

• Postgres database with RESTFul api
• Auth with GoTrue
• Storage
• Realtime db websockets
• Edge Functions

After making a change to the the postgres database or supabase config: supabase db diff -f migration_message

Developing supabase functions locally

We've added packages/ui to show an example of building your own design system.

UI Kit

Note we're following the design systems guide and creating our own package for components.

See packages/ui named @my/ui for how this works.

🆕 Add new dependencies

Pure JS dependencies

If you're installing a JavaScript-only dependency that will be used across platforms, install it in packages/app:

cd packages/app
yarn add date-fns
cd ../..
yarn

Native dependencies

If you're installing a library with any native code, you must install it in expo:

cd apps/expo
yarn add react-native-reanimated
cd ..
yarn

You can also install the native library inside of packages/app if you want to get autoimport for that package inside of the app folder. However, you need to be careful and install the exact same version in both packages. If the versions mismatch at all, you'll potentially get terrible bugs. This is a classic monorepo issue. I use lerna-update-wizard to help with this (you don't need to use Lerna to use that lib).

You may potentially want to have the native module transpiled for the next app. If you get error messages with Cannot use import statement outside a module, you may need to use transpilePackages in your next.config.js and add the module to the array there.