Workout Tracker Example

Based on https://github.com/mwarger/expo-nextjs-dripsy-moti-setup

Basics

NextJS

Uses code ripped from the TRPC NextJS starter (https://github.com/trpc/trpc/tree/main/examples/next-prisma-starter)

See _app.tsx for setup.

React-Native

TRPC setup using react-query (only addition at this point is superjson transformer) See App.tsx for this

React Admin

A basic react-admin (https://marmelab.com/react-admin/) implementation is available at /admin - it uses a data-provider to allow react-admin access via TRPC. I don't know if this is a good idea, but it was fun to figure out. It's not typed, because I don't see how it could be... at least not yet.

I didn't use ra-data-prisma (https://github.com/panter/ra-data-prisma) directly because, as far as I can tell, it requires a Nexus adapter for use, and I'm not using GraphQL with this.

NextJS Readme copied below

Prisma + tRPC

Try in CodeSandbox: https://githubbox.com/trpc/trpc/tree/main/examples/next-prisma-starter

Features

• 🧙‍♂️ E2E typesafety with tRPC
• ⚡ Full-stack React with Next.js
• ⚡ Database with Prisma
• ⚙️ VSCode extensions
• 🎨 ESLint + Prettier
• 💚 CI setup using GitHub Actions:
  • ✅ E2E testing with Playwright
  • ✅ Linting

Setup

npx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-starter trpc-prisma-starter
cd trpc-prisma-starter
yarn
yarn dev

Files of note

Path	Description
./prisma/schema.prisma	Prisma schema
./src/api/trpc/[trpc].tsx	tRPC response handler
./src/routers	Your app's different tRPC-routers

Commands

yarn dx # runs prisma studio + next
yarn build # runs `prisma generate` + `prisma migrate` + `next build`
yarn test-dev # runs e2e tests on dev
yarn test-start # runs e2e tests on `next start` - build required before
yarn dev-nuke # resets local db

ℹ️ How to switch from SQLite to Postgres

How to switch to postgres

• Remove migrations: rm -rf ./prisma/migrations
• Update: ./prisma/schema.prisma (see commented code)

---

Created by @alexdotjs.