Our Technical Infrastructure: For the Curious

This article is for those interested in technical details. CTOs, technical co-founders, developers — welcome.

Stack Overview

Why these choices? Let us explain.

Next.js 16: Why Still Next?

There are many options in the React ecosystem: Remix, Astro, SvelteKit, Nuxt...

Here's why we chose Next.js:

App Router & Server Components

React Server Components are production-ready. Client bundle shrinks, initial load speeds up. Granular control with the "use client" directive.

Partial Prerendering (PPR)

PPR, introduced with Next.js 16, uses the static shell + dynamic holes concept. Header/footer are static, user-specific areas are dynamic. Best of both worlds.

Server Actions

Form handling without writing API routes. Type-safe, with progressive enhancement support. Optimistic UI with useActionState.

Turbopack

Dev server now starts up in seconds. HMR at the millisecond level.

TypeScript: Strict Mode Required

There's no point in writing TypeScript without strict: true.

{
  "compilerOptions": {
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true
  }
}

We catch 80% of runtime errors at compile time. Refactoring is safe. IDE support is maximized.

Tailwind v4: Return to CSS

With Tailwind v4, tailwind.config.js is gone — we're back to CSS.

@theme {
  --color-primary: #E5442C;
  --color-secondary: #041017;
  --font-family-sans: "Manrope", system-ui, sans-serif;
}

Advantages

• Native CSS cascade layers — Specificity wars are over
• Lightning CSS — Build time cut in half
• CSS variables everywhere — Runtime theme switching is possible

Design tokens go directly from Figma to CSS. Single source, no synchronization issues.

PostgreSQL: Boring Technology

In database selection, "boring" is good.

• 30+ years of battle-tested technology
• JSONB covers document store needs
• Full-text search built-in
• Row-level security for multi-tenant architecture

We don't fall for the NoSQL hype. Relational data belongs in a relational database.

Prisma + Zod: Type Safety End-to-End

// From schema to Zod validator
const UserSchema = z.object({
  email: z.string().email(),
  name: z.string().min(2),
});

// Same type on both frontend and backend
type User = z.infer<typeof UserSchema>;

A single type definition from database to UI. Runtime validation + compile time checking.

TurboRepo: Monorepo Done Right

We use TurboRepo for multi-application projects (web + admin + API).

apps/
  web/          # Public website
  admin/        # Admin panel
  api/          # Backend API (optional)
packages/
  ui/           # Shared components
  config/       # ESLint, TypeScript configs
  db/           # Prisma schema & client

Why Monorepo?

• Shared code — UI components, types, utils in one place
• Atomic changes — API change + frontend update in a single commit
• Build caching — Unchanged packages aren't rebuilt

Coolify: Self-Hosted Vercel

Vercel is expensive. Especially difficult to invoice from Turkey.

With Coolify, we run our own Vercel:

• Git push deploy — Push to main, automatic build
• Preview deployments — Temporary URLs for PRs
• Zero-downtime deploy — Blue-green deployment
• Automatic SSL — Let's Encrypt integration

On a VPS, at a fraction of the cost.

Cloudflare: Power at the Edge

All projects sit behind Cloudflare:

• DNS — Anycast, global propagation
• CDN — Static assets cached at the edge
• WAF — Bot protection, DDoS mitigation
• R2 — S3-compatible storage

Edge computing with Cloudflare Workers is also possible, but we haven't added it to our standard stack yet.

Creative Coding Stack

Beyond standard websites, for experiential projects:

Performance Balance

Creative ≠ slow.

• Lighthouse 90+ target is maintained even in creative projects
• prefers-reduced-motion support
• Progressive enhancement — works without JS
• Code splitting — heavy libraries lazy loaded

DevOps Practices

CI/CD Pipeline

# On every PR
- Type check (tsc --noEmit)
- Lint (ESLint + Prettier)
- Unit tests (Vitest)
- Build check

# On merge to main
- Production build
- Deploy to Coolify
- Smoke tests

Monitoring & Backup

Determined by project needs:

• Uptime monitoring — Instant notification on downtime
• Error tracking — Catching production errors
• Analytics — Privacy-friendly options
• Backup — Daily/weekly, retention period based on needs

Security Approach

Secure by Default

• CSP headers — XSS protection
• CORS — Strict origin policy
• Rate limiting — API abuse prevention
• Input validation — Zod at every endpoint

Authentication (When Needed)

• Session-based authentication — We prefer server-side sessions over JWT
• Argon2 — Password hashing
• TOTP — 2FA support

Secrets Management

• Environment variables, .env files not in the repo
• Production secrets encrypted in Coolify

Why This Stack?

1. Depth > Breadth

Instead of knowing 10 frameworks, we prefer knowing one framework 10 different ways.

2. Proven Technology

Every component is tested in production. Not bleeding edge, but leading edge.

3. Developer Experience

Type safety, hot reload, good tooling. Happy developer = quality code.

4. Escape Hatches

We're not locked into the stack. If Next.js dies tomorrow, React knowledge remains. PostgreSQL is universal.

Conclusion

This stack isn't "the best." But it's the most efficient for us.

We've been using every technology for years. We know the pitfalls, we've implemented best practices, and we've found the optimization points.

Our clients don't need to know these things. But for those who are curious: here it is.