/zart

🤯 zART-stack — Zero-API, React [Native], & TypeScript

Primary LanguageTypeScript

ℹ️ℹ️ℹ️ This example project is not actively maintained and is using an old version (v9) of tRPC ℹ️ℹ️ℹ️

If you're looking for alternatives, have a look at https://github.com/t3-oss/create-t3-turbo and other reference projects on https://trpc.io/docs/awesome-trpc

zART-Stack 🤯

Zero-API, React, & TypeScript

⚡️ Probably the fastest way to build a React Native app with your own backend ⚡️

Introduction

A monorepo containing:

  • Next.js web app
  • React Native app with Expo
  • A tRPC-API which is inferred straight into the above.
  • Prisma as a typesafe ORM

In tRPC you simply write API-functions that are automatically inferred straight into your frontend - no matter if it's React, React Native, or something else (that is TS/JS-based).

Video

Very rough video recorded in 2 minutes 😅

ZART

Requirements

You will need docker compose to run the postgres database. It comes with the Docker Desktop App

Getting started

git clone git@github.com:KATT/zart.git
cd zart
yarn
yarn dev

Press i after yarn dev in to launch the iOS Simulator.

Now - head over to one of the ./apps, whilist updating a router in tRPC or the Database Schema and see that the data is directly inferred.

Available commands

Command Description
yarn dev Starts Postgres, Expo & Next.js
yarn db-up Starts Postgres on port 5466
yarn db-migrate-dev Runs the latest Database migrations after updating the Prisma schema
yarn db-nuke Stops and deletes the the database

Folder structure

.
├── apps
│   ├── expo    # Expo/RN application
│   └── nextjs  # Server-side rendered Next.js application
├── packages
│   ├── api           # tRPC API 
│   ├── react         # Shared React-helpers
│   └── react-native  # RN components. **Could** be shared between Expo & Next.js if you're in to that sort of thing.
└── prisma      # Prisma setup

Further reading

Deployment

Vercel

  • Create a Postgres Database
  • Set env DATABASE_URL pointing towards that db
  • Configure "Root Directory" as apps/nextjs and tick Include source files outside of the Root Directory in the Build Step.

Questions?

Shoot me a message on Twitter!

Credits