you'll have there most of what you need

2. Folder structure

![T3 stack](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qeeleipsudgosqi6xxxz.png)

3. How the integration is done

Note: I won't be able to explain the whole thing because there is too much to talk about. I'll do my best to clarify things, but remember the docs are the best resource. I'm just putting things together.

###React-Native(Expo): apps/expo

![React native expo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d8moeo380ei5ywzwmbbh.png)

This Directory will have an expo application that is fully integrated with tRPC & clerk-auth.

This example includes middleware and everything you need for a real-world app 

Note: Some code explanations are provided within the comments.

###Next.js: apps/nextjs

![next js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tjcxy066cxigzk3lyy40.png)

This Directory will have a Nextjs application that is fully integrated with tRPC & clerk-auth

This example includes middleware and everything you need for a real-world app.

In addition to that, at apps/nextjs/src/pages/api we have two directories

- **api/trpc**: is for tRPC to be used by the Nextjs app or react-native(expo) app 

- **api/user**: is for the webhook.
In this application, we have our database that includes our users, so when a new user signs up using Clerk we should create a profile for that user in our db so we can use it for the relations between tables.
To achieve that webhooks should be used.
Clerk uses Svix to send their webhooks.

![clerk](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/agjvksimpywcuh975i26.png)

Using the dashboard you can get everything you need to integrate the webhook 

Note: I'll explain more about the webhook in the packages section.

###Express.js: apps/express

![express js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r0id0qavgodbx0mkcr56.png)

This project is used to build two APIs

- **api/trpc**: is for tRPC to be used by Nextjs, React, or React-native(expo). 

- **api/webhooks/user**: is for the webhook

Note: we can use Nextjs or Expressjs APIs. They are the same.
The goal was to do it in two different ways, but you can use whatever you like.

##Now let's start with the packages

###tRPC: packages/api

![tRPC](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3rcf177bvq1uxhe9m0fw.png)

This package contains all of our app logic with contexts, middlewares, routes...

**IMPORTANT: The original project used Express for tRPC. Ensure you import the appropriate context.**


###Prisma: packages/db

![Prisma](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/27gpfsn4lozchli1iien.png)

This package provides access to the Prisma client and seeds, allowing easy import wherever needed.

###svix: packages/webhook

![svix](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iv7du72fdzhftbxnfbue.png)


When a user signs up using Clerk, we should create a new user in our db. The Same thing goes for other actions. For example, if the user changes his name or profile pic, we should Sync Clerk data to our backend via webhook.


Clerk-dashboard -> We'll set up a webhook to manage these things and select the actions that should trigger it.

![webhook](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/96mk60jw1sojdt1w7itu.png)

Once configured, your application is production-ready! 🎉🎉 I hope this clarifies things.

### Useful Links 🔗 

 Clerk official example using Nextjs & expo: (no express, webhooks or credential auth)
https://github.com/clerk/t3-turbo-and-clerk

The link to the repo that we are explaining 
https://github.com/mayar4ki/Clerk-auth