Overview

What is Raypx?

Raypx is a Turborepo-powered monorepo that hosts a TanStack Start application, React Email templates, documentation site, and 12 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, ORPC 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: ORPC for type-safe APIs
UI: Tailwind CSS v4 + 60+ shadcn/ui components
Email: Resend + React Email with pre-built templates
Storage: S3/R2 file storage with Sharp image processing
Observability: Sentry + OpenTelemetry
Tooling: Biome (linter/formatter), Vitest v4, Vite v8, Turborepo

Requirements

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

Node.js 22+ (LTS recommended)
pnpm 10.26+ (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)
# - AUTH_URL (http://localhost:3000 for dev)

3. Run database migrations

pnpm --filter @raypx/database 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 dev:web`	Just the main TanStack Start app
Docs only	`pnpm dev:docs`	Just the Fumadocs site
Email preview	`pnpm dev:email`	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 db`	Database commands (migrate, studio, etc.)
Add UI component	`pnpm shadcn`	Add shadcn/ui components
Find unused code	`pnpm knip`	Run Knip to find unused code

Recommended Workflow

Start development with pnpm dev (or pnpm dev:web 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
Set up Email service for sending emails
Configure File storage for uploads
Learn about ORPC API for type-safe APIs

Quick Start