• Stars
    star
    303
  • Rank 137,655 (Top 3 %)
  • Language
    TypeScript
  • Created about 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

🀯 zART-stack β€” Zero-API, React [Native], & TypeScript

ℹ️ℹ️ℹ️ 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 [email protected]: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

More Repositories

1

envsafe

πŸ”’ Makes sure you don't accidentally deploy apps with missing or invalid environment variables.
TypeScript
786
star
2

shop

πŸ›πŸ›’ Full-stack React/Prisma/TS/GraphQL E-Commerce Example
TypeScript
374
star
3

typescript.careers

TypeScript
39
star
4

next-router-query

πŸ‘¨β€πŸ”§ Drop-in alternative of `useRouter().query` that tries it's best to get the query params on the first mount.
TypeScript
38
star
5

graphql-workshop

πŸ•ΈοΈ GraphQL Node.js Workshop: Create an API Gateway
JavaScript
21
star
6

next-with-apollo-airbnb-auth0-graphcool

Server-side rendered & authed requests with GraphQL
JavaScript
13
star
7

next-ssr-form

next-ssr-form
TypeScript
12
star
8

options-curry

πŸ› TypeScript Options-object Currying
TypeScript
11
star
9

use-is-typing

… React Hook for typing indicator
TypeScript
9
star
10

toggl-iCal

πŸ“…β³ Calendar Toggl Entries
TypeScript
9
star
11

resident-advisor-resale-checker

🎟 Resident Advisor Resale checker
TypeScript
9
star
12

useSuspense-next-prisma-starter

TypeScript
9
star
13

next-use-query-params

TypeScript
9
star
14

gitkatt

πŸ‘¨β€πŸŽ€ create art in your github commit history
JavaScript
8
star
15

app-dir-play

TypeScript
6
star
16

Magento-CustomerLogin

Login as any customer easily from customer grid in admin. Not actually working, see stackoverflow-link.
PHP
6
star
17

brunch-jade-stylus-coffee

Bare-bones brunch skeleton using Stylus, Jade and CoffeeScript
CSS
5
star
18

500cats

😻 Pointless TypeScript/nextjs/s3/imgix project
TypeScript
5
star
19

create-react-app-docz-test

Example of create-react-app with absolute imports + docz
JavaScript
4
star
20

typed-form

typesafe formik example
TypeScript
3
star
21

nextjs-13-use-client

CSS
2
star
22

next-trpc-form-proc

TypeScript
2
star
23

awilix-typescript-dependency-injection

TypeScript
2
star
24

mfn

TypeScript
2
star
25

sanitize-object-deep-by-regex

TypeScript
1
star
26

trpc-declaration

TypeScript
1
star
27

forked-versions

TypeScript
1
star
28

unidici-fetch-reserved-header-crap

TypeScript
1
star
29

my-vite-bling-react-app

play around with vite + bling
TypeScript
1
star
30

goaskamt

JavaScript
1
star
31

AJFormViewController

Objective-C
1
star
32

boilerplate-heroku-static-nodejs-express-basic-auth

Boilerplate static web app Heroku + Basic auth setup
JavaScript
1
star
33

clubmate

nodejs fest
JavaScript
1
star
34

trpc-rsc

TypeScript
1
star
35

lectr

JavaScript
1
star
36

promise-click

JavaScript
1
star
37

trpc-ssr-form

TypeScript
1
star
38

iOSBase

future base of my ios applications
Objective-C
1
star
39

AJScrollableView

Objective-C
1
star
40

react-server-action-useformstate-issues

Just a repo showcasing some issues with the design of Server Actions / `useActionState` /`useFormState()`
TypeScript
1
star
41

yarn-workspaces-lerna-mono-server-client

JavaScript
1
star
42

wizzy

TypeScript
1
star