How it works?

🌟 How it works?

Folder Structure

apps
  • next
  • expo
packages
  • ui (your reusable components with tamagui)
  • db (db schema & prisma stuff)
  • api (all of your tRPC & backend code)
app
  • features (⭐️ all of your native frontend code will go here ⭐️)
  • navigation (unifying web + mobile navigation)
  • provider (unifying providers)
  • utils (your utils like auth & tRPC)

In a bit more detail

Your frontend code will be in React Native, meaning that you're going to write Views instead of divs. Since we are using Tamagui in particular, we're gonna write Stacks instead Views.

  • apps/expo and apps/next are practically empty folders that are simply referencing your packages/app folder.
  • If you're familiar with React Native, it's going to feel as if you're writing a React Native app, that just happens to also run really well on the web (with SSR and all of those goodies).
  • Your code will get rendered as HTML/CSS on the NextJS side and normal React Native on the native side.

Your backend code is gonna be in packages/api. NextJS is going to run this code in a serverless environment, if you're a little confused about how that works here (opens in a new tab)'s a good video by Theo that talks about NextJS as a backend framework.

  • Your backend and frontend will communicate with tRPC.
  • Your backend and your DB will communicate with Prisma (ORM).
  • Mobile auth is done with Clerk Expo, and web auth is done with Clerk React and Clerk Next.
What is this?Tamagui