Tamagui - The Best Stack for Universal Apps

Introduction

This tutorial will guide you through setting up a monorepo for a project using Tamagui, Next.js, and Expo for building universal applications. We will explore the tools and technologies chosen for the MY4X4 project, including tRPC, Prisma, and Kinde Auth. By the end of this guide, you'll have a clear understanding of how to set up your own monorepo and the reasons behind these choices.

Step 1: Setting Up the Monorepo

• Choose a Monorepo Tool: For this project, we will use Tamagui, a powerful framework for building universal applications.
• Initialize the Repository:
  1. Create a new directory for your project.
  2. Run the following command to initialize a Git repository:

     git init my4x4
     

• Clone the Demo Repository: You can use the provided demo repository to start off:

  git clone https://github.com/kengreeff/demo-monorepo.git
  cd demo-monorepo
  

Step 2: Integrating Next.js

• Install Next.js: Inside your monorepo, install Next.js to handle your web application.

  npm install next react react-dom
  

• Create Next.js Application:
  1. Create a new directory for your Next.js app, e.g., apps/web.
  2. Add a basic Next.js configuration by creating a pages directory with an index.js file for the homepage.

Step 3: Setting Up React Native with Expo

• Install Expo CLI: To build your React Native app, install the Expo CLI globally.

  npm install -g expo-cli
  

• Create a New Expo Project:
  1. Create a new directory for your Expo app, e.g., apps/mobile.
  2. Initialize a new Expo project:

     expo init mobile
     

Step 4: Configuring tRPC

• Install tRPC:

  npm install @trpc/server @trpc/client
  

• Set Up tRPC for API Communication:
  1. Create routes for your API.
  2. Integrate the tRPC provider in your Next.js application.

Step 5: Setting Up Prisma

• Install Prisma:

  npm install prisma
  

• Initialize Prisma:
  1. Run the initialization command:

     npx prisma init
     

  2. Configure your database connection in the .env file.

Step 6: Configuring Kinde Auth

• Set Up Kinde: Follow the Kinde documentation to set up authentication for your application.
• Integrate Kinde Auth:
  1. Install necessary Kinde dependencies.
  2. Configure your app to use Kinde for user authentication.

Conclusion

You have now set up a monorepo using Tamagui, integrating Next.js for web applications and Expo for React Native. You also configured tRPC for API communication, Prisma for database management, and Kinde for authentication.

Next Steps

• Explore individual configurations and setups in more detail.
• Follow subsequent videos to dive deeper into each component and its integration.
• Start building your features on top of this foundational structure.