๐คฏ
zART-Stack Zero-API, React, & TypeScript
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
๐
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
afteryarn 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
- tRPC and this example is made by @alexdotjs
-
apps/expo
is basically a copy-paste fromexpo-next-monorepo-example
by axeldelafosse.