Tech Stack

UI Framework

Next.js 15 + React 19

Reflecto uses the App Router with React Server Components. Route groups separate public and protected pages. Turbopack is enabled for fast local development (next dev --turbo).

Key patterns:

• Route groups — (protected) and (public) for layout-based auth gating
• Server Components — Default for pages, reducing client bundle size
• Client Components — Marked with "use client" for interactive features (editor, modals)

React Query (via tRPC)

All server data fetching uses React Query through the tRPC integration. This provides:

• Automatic caching and background refetching
• Cursor-based infinite scroll pagination
• Optimistic updates for instant UI feedback
• Mutation lifecycle hooks (onSuccess, onError)

Editor

TipTap 3

The journal editor is built on TipTap, a headless rich text editor framework based on ProseMirror.

Installed extensions:

• @tiptap/starter-kit — Bold, italic, headings, lists, code blocks
• @tiptap/extension-link — Clickable links with auto-detection
• @tiptap/extension-image — Inline image embedding
• @tiptap/extension-mention — @people and #tag mentions with autocomplete
• @tiptap/extension-placeholder — Ghost text prompts
• @tiptap/extension-underline — Underline formatting
• @tiptap/extension-character-count — Live character counter

Content is stored as HTML in the database content field with a 50,000 character limit.

State Management

Zustand 5

Client-side state is managed through five Zustand stores:

Zustand was chosen over Redux for its minimal boilerplate and hook-first API. Server state is intentionally kept out of Zustand — React Query handles all data fetching and caching.

Styling

Tailwind CSS 4

Styling uses Tailwind CSS v4 with the PostCSS plugin and the typography plugin for rich text rendering. The design system is dark-first with serif headings for a premium journal aesthetic.

Additional styling tools:

• class-variance-authority — Component variant management
• tailwind-merge — Conflict-free class merging
• clsx — Conditional class composition
• tw-animate-css — Tailwind animation utilities

Radix UI

All interactive primitives (dialogs, dropdowns, tooltips, popovers, tabs, alerts) use Radix UI for accessible, unstyled components that integrate with Tailwind.

Framer Motion

Page transitions, list animations, and micro-interactions use Framer Motion for declarative, physics-based animations.

API Layer

tRPC 11

The API layer uses tRPC v11 with SuperJSON for serialization (handles Dates, Maps, and other JS types). Zod schemas provide runtime validation on all inputs.

The middleware stack applied to every procedure:

1. Timing middleware — Logs execution time, adds artificial delay in dev
2. Rate limiting — In-memory sliding window (100/60s authenticated, 30/60s unauthenticated)
3. Auth guard (protected only) — Verifies session and narrows ctx.session.user type

13 routers cover all domain areas: entry, journal, dream, highlight, idea, wisdom, note, tag, person, attachment, insights, preferences, user.

Database

Prisma 6 + PostgreSQL

Prisma provides the ORM layer with type-safe queries generated from the schema. The @prisma/adapter-pg adapter enables connection pooling compatible with Vercel’s serverless environment.

Key features used:

• Transactions — Entry creation wraps tag extraction, activity logging, and streak updates in a single transaction
• Soft deletes — Entries use deletedAt instead of hard deletion
• JSON columns — Entry metadata stores type-specific fields as JSONB
• Composite indexes — Optimized for common query patterns (user + type + date)

Development commands:

pnpm db:generate   # Create and apply migrations
pnpm db:push       # Push schema changes (dev only)
pnpm db:studio     # Open Prisma Studio GUI

Authentication

NextAuth v5

Authentication uses NextAuth v5 (Auth.js) with the Prisma adapter for database-backed sessions.

Providers:

• Credentials — Email + bcrypt-hashed password with email verification
• Google OAuth — One-click sign-in with Google account
• GitHub OAuth — One-click sign-in with GitHub account

Email delivery uses Resend for transactional emails:

• Email verification on sign-up
• Password reset tokens
• Inactivity reminder emails (via Inngest)