build-elevate icon indicating copy to clipboard operation
build-elevate copied to clipboard

Production-grade Turborepo template with Next.js, TypeScript, shadcn/ui, Tailwind CSS, Better-Auth, and TanStack Query.

build-elevate

This template is for creating a monorepo with


🖼 Screenshots

Page Light Theme Dark Theme
Home Home Light Home Dark
Sign Up Sign Up Light Sign Up Dark
Sign In Sign In Light Sign In Dark
Profile Profile Light Profile Dark
Settings - General Settings General Light Settings General Dark
Settings - Security Settings Security Light Settings Security Dark

Project Structure

This monorepo is structured into the following applications and packages:

Applications

  • apps/web: Next.js web application.
  • apps/api: Express API server.

Packages

  • packages/eslint-config: Centralized ESLint config.
  • packages/jest-presets: Shared Jest configuration for Node.js and React.
  • packages/prettier-config: Shared Prettier formatting rules.
  • packages/typescript-config: Base TypeScript configuration.
  • packages/auth: Authentication package using Better Auth.
  • packages/db: Shared Prisma-based database access layer.
  • packages/email: Email features with React Email & Resend.
  • packages/ui: Reusable UI components built with shadcn/ui.
  • packages/utils: Common utilities and shared TypeScript types.

Getting Started

Setting up apps/web

To set up and run the web application (apps/web), follow the instructions in apps/web/README.md.

Setting up apps/api

To set up and run the API server (apps/api), follow the instructions in apps/api/README.md.


Docker Setup

This project includes mutiple Dockerfile and a production docker-compose setup for the apps.

1. Production

To build and run the production container:

pnpm docker:prod

This will:

  • Build the Docker image using docker-compose.prod.yml
  • Start the web container on localhost:3000
  • Start the API container on localhost:4000
  • Start the PostgreSQL database container on localhost:5432

Make sure you have .env.production in apps/web, apps/api, packages/db.

Notes

  • The Dockerfile uses a multi-stage build for minimal image size.
  • The containers runs as a non-root user (nextjs, expressjs) for security.
  • The Docker build context includes the whole monorepo, and Turbo prunes the workspace to include only the necessary dependencies, ensuring PNPM and workspaces are resolved correctly.

Root-Level Scripts

The following scripts are available at the root of the monorepo:

Script Description
pnpm build Runs turbo build to build all apps and packages.
pnpm clean Clears the Turborepo cache and outputs.
pnpm dev Runs turbo dev to start development servers concurrently.
pnpm docker:prod Builds production Docker images and runs containers for all apps.
pnpm lint Lints all workspaces using the shared ESLint configuration.
pnpm format Formats code using Prettier across the monorepo.
pnpm check-types Checks TypeScript types across all workspaces.
pnpm start Starts the production servers for all apps.
pnpm test Runs tests across all workspaces using Jest.

UI Components (shadcn/ui)

Usage

pnpm dlx shadcn@latest init

Adding components

To add components to your app, run the following command at the root directory:

pnpm dlx shadcn@latest add button -c apps/web

This will place the ui components in the packages/ui/src/components directory.

Tailwind

Your tailwind.config.ts and globals.css are already set up to use the components from the ui package.

Using components

To use the components in your app, import them from the ui package.

import { Button } from "@workspace/ui/components/button";