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

Alex Johansson

Last update: Jan 3, 2023

Overview

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 😅

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

Credits

tRPC and this example is made by @alexdotjs
apps/expo is basically a copy-paste from expo-next-monorepo-example by axeldelafosse.

You might also like...

A set of React components implementing Google's Material Design specification with the power of CSS Modules

React Toolbox is a set of React components that implement Google's Material Design specification. It's powered by CSS Modules and harmoniously integra

8.7k Dec 30, 2022

CSS media queries in react - for responsive design, and more.

react-responsive Information Package react-responsive Description Media queries in react for responsive design Browser Version = IE6* Demo The best s

6.5k Dec 30, 2022

Immutable state for React.js

react-cursor Immutable state for React.js react-cursor hello-world in a fiddle What is react-cursor Cursors are a tool for working with recursive or d

1k Dec 12, 2022

Mobile App Framework powered by React

TouchstoneJS Mobile App Framework powered by React. See the demo at touchstonejs.io. Follow @touchstonejs on Twitter for updates. See the touchstone-s

3.3k Jan 5, 2023

Centrally manage state for React applications with CSP

State Trooper Install npm npm install state-trooper Yarn yarn add state-trooper Example Usage Call StateTrooper.patrolRunLoop in your route handler/ma

15 May 14, 2022

Maple.js is a React webcomponents based framework mixing ES6 with Custom Elements, HTML Imports and Shadow DOM. It has in-built support for SASS and JSX, including a Gulp task for vulcanizing your project.

Heroku: http://maple-app.herokuapp.com/ npm: npm install maple.js Bower: bower install maple.js Maple is a seamless module that allows you to organise

430 Dec 23, 2022

A performant, scalable and pluggable approach to instrumenting your React application.

react-i13n react-i13n provides a performant, scalable and pluggable approach to instrumenting your React application. Typically, you have to manually

369 Dec 25, 2022

svg react icons of popular icon packs

React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons

9k Jan 5, 2023

Plain functions for a more functional Deku approach to creating stateless React components, with functional goodies such as compose, memoize, etc... for free.

"Keo" is the Vietnamese translation for glue. Plain functions for a more functional Deku approach to creating stateless React components, with functio

225 Sep 24, 2022

Comments

Bump prisma version to 3.5.0

Hey Katt!

This is an awesome repo!

I just saw that it was using prisma version 2.x which lacks some niceties they added on 3.x, so here's a PR that bumps the version!

Best regards

opened by mikealche 3
Modernizing to tRPC v10
refs trpc/trpc#2118

Adds turborepo

Upgrades tRPC to v10

Replaces some scripts for turbo repo pipelines

Fixes wrong import for expo

Adds type safety for next.config.js
opened by zomars 14