TODO

chage this repo name when using it;

Turborepo

This codebase was spun up using turborepo's starter.

What's inside?

This Turborepo includes the following packages/apps:

Apps and Packages

• web: a Next.js app where all the React code lives.
• ui: a stub React component library shared by both any application inside this monorepo.
• eslint-config-custom: eslint configurations (includes eslint-config-next and eslint-config-prettier)
• tsconfig: tsconfig.jsons used throughout the monorepo

Each package/app is 100% TypeScript.

Utilities

• TypeScript for static type checking
• ESLint for code linting
• Prettier for code formatting
• TRPC for API calls
• PrismaJS for ORM
• Zod for runtime type validation

Build

To build all apps and packages, run the following command:

cd my-turborepo
yarn build

Develop

To develop all apps and packages, run the following command:

cd my-turborepo
yarn dev

Remote Caching

Turborepo can use a technique known as Remote Caching to share cache artifacts across machines, enabling you to share build caches with your team and CI/CD pipelines.

By default, Turborepo will cache locally. To enable Remote Caching you will need an account with Vercel. If you don't have an account you can create one, then enter the following commands:

cd my-turborepo
npx turbo login

This will authenticate the Turborepo CLI with your Vercel account.

Next, you can link your Turborepo to your Remote Cache by running the following command from the root of your Turborepo:

npx turbo link

Configuration

Different from other configurations (such as using Apollo for GraphQL) where different types are generated for each layer of the application, with tRPC and Prisma we can use types generated by Prisma that can be carried over all the way to the UI.

Some important pieces of configuration to make life easier when using Prisma + tRPC.
Server side:

• context: This file generates the context for incoming requests. For additional information, refer to the documentation; In the current implementation, it enables you to access the database client for each request. However, you can also incorporate other essential utilities like logging tools, the current user's ID, authentication information, and more;
• trpc: This file is responsible for initializing tRPC with the aforementioned context. It defines public procedures, handles error formatting for the client, and establishes the tRPC router;
• index: Defines and exports tRPC router, context and types used by the front end;

Client side:

• _trpcClient: This file is responsible for initializing the tRPC client by leveraging the types defined by the server. This approach guarantees that we can utilize the types seamlessly in the front end without the need to redefine them.
• _trpcServer: Creates a request-scoped singleton instance of TrpcProxyClient. This ensures that data remains isolated between different users and requests, while guaranteeing that the TrpcProxyClient is created only once per request. For more details on per-request caching, refer to the Next.js documentation: link.
• types: Defines and exposes Input and Output types for all tRPC routers.