Overview

What is Raypx?

Raypx is a Turborepo-powered monorepo that hosts a TanStack Start application, React Email templates, documentation site, and 14 shared packages aligned around modern full-stack development. It provides a fully type-safe React 19 stack with Better Auth authentication, Drizzle ORM database layer, tRPC APIs, 60+ shadcn/ui components, and comprehensive infrastructure helpers so teams can ship production-ready features quickly.

Tech Stack Highlights

Framework: TanStack Start 1.135.2 + React 19 + TypeScript 5.9
Database: PostgreSQL + Drizzle ORM
Auth: Better Auth with OAuth, Magic Link, Email OTP
API: tRPC for type-safe APIs
UI: Tailwind CSS v4 + 60+ shadcn/ui components
Email: React Email with 8 pre-built templates
Tooling: Biome (linter/formatter), Vitest, Turborepo

Requirements

Before you start, make sure the following tools are installed:

Node.js 20+ (LTS recommended)
pnpm 10.17+ (required - this project uses pnpm workspaces)
PostgreSQL database (local or cloud like Neon)
Git for version control

Tip: run node --version and pnpm --version to verify your versions.

First-Time Setup

1. Clone and install dependencies

git clone https://github.com/raypx/raypx.git
cd raypx
pnpm install

2. Configure environment variables

cp .env.example .env
# Edit .env with your configuration:
# - DATABASE_URL (PostgreSQL connection string)
# - BETTER_AUTH_SECRET (min 32 characters)
# - BETTER_AUTH_URL (http://localhost:3000 for dev)

3. Run database migrations

pnpm --filter @raypx/db run db:migrate

4. Start the development server

pnpm dev
# Web app: http://localhost:3000
# Docs: http://localhost:3001

The web app runs at http://localhost:3000 with hot-module reloading and TanStack's file-based routing enabled.

Everyday Commands

Task	Command	Notes
Development	`pnpm dev`	Starts all apps (web + docs) with hot reload
Web app only	`pnpm --filter web dev`	Just the main TanStack Start app
Docs only	`pnpm --filter docs dev`	Just the Fumadocs site
Email preview	`pnpm --filter email dev`	Preview email templates
Format & lint	`pnpm format` / `pnpm check`	Biome for formatting and linting
Type check	`pnpm typecheck`	TypeScript across entire workspace
Tests	`pnpm test`	Vitest unit tests
Coverage	`pnpm coverage`	HTML coverage reports
Build	`pnpm build`	Full Turborepo production build
Clean	`pnpm clean`	Remove build artifacts and caches
Database	`pnpm --filter @raypx/db run db:studio`	Drizzle Studio (database GUI)
Add UI component	`pnpm shadcn`	Add shadcn/ui components

Recommended Workflow

Start development with pnpm dev (or pnpm --filter web dev for web only)
Make changes in the relevant app or package
Run pnpm typecheck and pnpm check to validate changes
Run pnpm test if you've added or modified business logic
Build to verify everything compiles: pnpm build
Commit with conventional commits (e.g., feat(auth): add OAuth providers)

Learn More

Explore the Workspace layout to understand how apps and packages are organized
Review the Development workflow for tooling, scripts, and commit guidance

Quick Start