The Complete Tech Stack: What's Inside Craft

Craft isn't just a collection of random libraries. It's a carefully curated stack where every technology was chosen to maximize developer productivity, type safety, and production reliability.

Frontend: Next.js 15 + React 19

Why Next.js?

Next.js 15 with the App Router is the foundation of Craft. It's the most mature full-stack React framework with:

• Server Components: Reduce client bundle size by rendering on the server
• File-based routing: Intuitive structure, no config needed
• API routes: Backend endpoints alongside your frontend code
• Automatic code splitting: Only load what's needed
• Image optimization: Built-in lazy loading and responsive images
• Production-ready: Deploys to Vercel, AWS, Docker with zero config

React 19: The latest version with improved performance, concurrent rendering, and better TypeScript support.

Backend: tRPC + Prisma

tRPC: Type-Safe APIs Without Code Generation

tRPC is a game-changer for full-stack TypeScript. Unlike REST or GraphQL, tRPC gives you:

• End-to-end type safety: Changes to backend procedures instantly reflect in frontend
• No code generation: Types are inferred automatically
• Autocomplete everywhere: Your IDE knows every available endpoint
• Runtime validation: Zod schemas validate inputs/outputs

// Backend (tRPC router)
export const userRouter = router({
  getProfile: protectedProcedure
    .input(z.object({ userId: z.string() }))
    .query(({ input }) => {
      return db.user.findUnique({ where: { id: input.userId } })
    }),
})

// Frontend (100% type-safe, zero config)
const { data } = trpc.user.getProfile.useQuery({ userId: '123' })
//    ^? User | undefined (TypeScript knows the exact type!)

Prisma: Modern Database ORM

Prisma is the most developer-friendly ORM for TypeScript:

• Type-safe queries: Autocomplete for every table and field
• Declarative schema: Define models in a readable DSL
• Automatic migrations: Schema changes generate SQL migrations
• Query optimization: Prevents N+1 queries automatically
• Multi-database support: PostgreSQL, MySQL, SQLite, MongoDB

// Prisma schema (schema.prisma)
model User {
  id        String   @id @default(cuid())
  email     String   @unique
  name      String?
  posts     Post[]
  createdAt DateTime @default(now())
}

// Auto-generated type-safe client
const user = await prisma.user.create({
  data: {
    email: 'user@example.com',
    name: 'John Doe',
  },
  include: { posts: true }, // Type-safe relations!
})

Database & Auth: Supabase

Supabase is "Firebase for PostgreSQL" - a complete backend-as-a-service:

PostgreSQL Database

• Production-grade: Real PostgreSQL, not a proprietary database
• Free tier: 500 MB database + 2 GB bandwidth
• Row Level Security (RLS): Database-level authorization
• Realtime subscriptions: Listen to database changes

Supabase Auth

• Email/password: Built-in with email verification
• Social providers: Google, GitHub, Discord, etc.
• Magic links: Passwordless authentication
• JWT tokens: Secure, stateless sessions

Supabase Storage

• File uploads: Images, documents, videos
• CDN-backed: Fast global delivery
• Access control: Public or private buckets
• Image transformations: Resize on-the-fly

Payments: Stripe

Stripe is the gold standard for online payments. Craft includes:

• Checkout integration: Pre-built payment page
• Subscription billing: Recurring payments with trials
• Webhook handling: Process payment events securely
• Customer portal: Users manage their own subscriptions
• Tax calculation: Automatic tax for 100+ countries
• PCI compliance: Stripe handles all card data

// Create Stripe checkout session
const session = await stripe.checkout.sessions.create({
  customer: user.stripeCustomerId,
  line_items: [{ price: 'price_1234', quantity: 1 }],
  mode: 'subscription',
  success_url: 'https://yourapp.com/success',
  cancel_url: 'https://yourapp.com/cancel',
})

// Handle webhook (payment successful)
stripe.webhooks.constructEvent(body, signature, webhookSecret)
// Update user subscription status in database

Emails: Resend + React Email

Resend: Modern Email API

Resend is built for developers who care about deliverability:

• Simple API: One function to send emails
• High deliverability: Emails actually reach inboxes
• Free tier: 100 emails/day, 3,000/month
• React templates: Design emails with JSX

React Email: Components for Emails

Write email templates using React components instead of raw HTML:

// emails/welcome.tsx
import { Button, Html, Text } from '@react-email/components'

export function WelcomeEmail({ name }: { name: string }) {
  return (
    <Html>
      <Text>Welcome {name}!</Text>
      <Button href="https://yourapp.com/dashboard">
        Get Started
      </Button>
    </Html>
  )
}

// Send it with Resend
await resend.emails.send({
  from: 'noreply@yourapp.com',
  to: user.email,
  subject: 'Welcome!',
  react: WelcomeEmail({ name: user.name }),
})

Styling: Tailwind CSS + shadcn/ui

Tailwind CSS

Utility-first CSS framework that's become the industry standard:

• No CSS files: Style directly in JSX
• Design system built-in: Consistent spacing, colors, typography
• Purge unused styles: Tiny production bundles
• Responsive design: Mobile-first breakpoints
• Dark mode: Built-in class-based dark mode

shadcn/ui: Copy-Paste Components

Not a library - a collection of beautifully designed components you own:

• Full control: Components live in your codebase
• Accessible: Built on Radix UI primitives
• Customizable: Modify any component as needed
• Themeable: CSS variables for easy theming

Testing: Vitest + Playwright + MSW

Vitest: Fast Unit Tests

• 10x faster than Jest: Native ESM support
• Jest-compatible API: Easy migration
• TypeScript first: No babel config needed
• Watch mode: Instant feedback

Playwright: Reliable E2E Tests

• Real browser testing: Chrome, Firefox, Safari
• Auto-wait: No flaky tests from race conditions
• Parallel execution: Run tests concurrently
• Debug tools: Time-travel debugging, screenshots

MSW: Mock Service Worker

• API mocking: Intercept network requests
• Works everywhere: Tests, browser, Node.js
• No server needed: Mock responses client-side

Monorepo: Turborepo

Turborepo manages multiple packages in one repository:

• Shared code: Reuse logic between web and mobile
• Parallel builds: Build multiple packages simultaneously
• Smart caching: Only rebuild what changed
• Task pipelines: Define build dependencies

craft-project/
├── apps/
│   ├── web/          # Next.js app
│   └── mobile/       # React Native app (optional)
├── packages/
│   ├── api/          # tRPC routers (shared)
│   ├── database/     # Prisma schema (shared)
│   ├── ui/           # UI components
│   │   ├── web/      # shadcn/ui (web)
│   │   └── mobile/   # React Native components
│   ├── auth/         # Auth logic (shared)
│   └── validators/   # Zod schemas (shared)
└── tooling/
    └── typescript/   # Shared TS config

TypeScript: Strict Mode Everywhere

Craft enforces TypeScript strict mode across the entire codebase:

• strict: true - All strict checks enabled
• noUncheckedIndexedAccess: true - Array access safety
• noImplicitOverride: true - Explicit overrides
• Path aliases configured (@/ imports)

Developer Experience

ESLint + Prettier

• Automatic formatting: Consistent code style
• React best practices: Catch common mistakes
• Import sorting: Organized imports

Husky: Git Hooks

• Pre-commit: Lint and format before commit
• Pre-push: Run tests before pushing
• Commit messages: Enforce conventional commits

Optional: Mobile Stack

If you choose Web + Mobile, you also get:

React Native + Expo

• Expo SDK 52+: Latest tools and APIs
• Expo Router: File-based navigation (like Next.js)
• EAS Build: Cloud-based iOS/Android builds
• OTA updates: Push updates without app store

NativeWind

• Tailwind for React Native: Same classes as web
• Shared design system: Consistent UI across platforms

Why This Stack?

Every technology in Craft was chosen based on three criteria:

1. Developer Experience: Tools should make you faster, not slower. TypeScript inference, autocomplete, and instant feedback are non-negotiable.
2. Production Ready: No experimental libraries. Everything is battle-tested by thousands of companies.
3. Community & Support: Popular tools have better docs, more tutorials, and easier hiring.

What's NOT Included

Craft deliberately avoids these common choices:

• Redux/MobX: React Query + tRPC handle state better
• GraphQL: tRPC gives type safety without complexity
• Jest: Vitest is faster and simpler
• CSS-in-JS (styled-components, emotion): Tailwind is faster
• Class-based ORM (TypeORM, Sequelize): Prisma is more modern

The Bottom Line

This stack isn't trendy - it's proven. These are the tools used by Vercel, Supabase, Cal.com, and thousands of successful SaaS products.

You're not locked in. Every piece can be swapped if needed. But most developers ship their product without changing a single dependency.