build-elevate

This template is for creating a monorepo with

• Turborepo for monorepo management
• Next.js (with Turbopack) for the web application
• Express for the API server
• TypeScript for type safety
• Docker for containerization
• Prisma as the ORM for database access
• PostgreSQL as the database
• shadcn/ui for UI components
• Tailwind CSS for styling
• Better Auth for authentication
• React Email for email templates
• Resend for sending emails
• Tanstack Query for data fetching and state management
• ESLint for linting
• Prettier for code formatting
• Jest for testing
• GitHub Actions for CI/CD
• pnpm as the package manager

---

🖼 Screenshots

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

---

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";