The ENT Stack: Key Decisions for Building a Full-Stack Web App in 5

Building a scalable full-stack web application requires careful planning and strategic decisions from the outset. Every choice, from framework selection to authentication, impacts cost, scalability, and adaptability. This article details the design choices behind the ENT Stack, a reusable full-stack solution built with Express, Next.js, and tRPC.

The ENT Stack aims to be a single, deployable project that shares code between the backend and frontend while allowing independent deployment. It's designed for cost-effectiveness (initially running on low-cost VPS) but with the scalability to handle future growth. To avoid costly refactoring, key decisions were made upfront across thirteen critical areas: framework selection, project structure, API layer, environment and configuration, database, authentication and authorization, validation and error handling, state management, internationalization (i18n), logging, mailing, testing, and DevOps.

The ENT Stack is available as a monorepo on GitHub and an NPM package for easy project scaffolding.

• ⭐ GitHub Repository
• ? NPM Package
• ? Quick Start Guide
• ? Documentation

(It's 2025, and revisiting our tech stack is practically a yearly ritual!)

Here's a summary of the key architectural decisions:

1. Framework Selection

• Backend (Express): Chosen for its minimalism, stability, and flexibility. Alternatives like NestJS and Fastify were considered, but Express provided the best balance of simplicity and proven reliability.
• Frontend (Next.js): Leveraging React's popularity and Next.js's robust features, strong community support, and backing by Vercel ensures long-term viability and developer accessibility.

2. Project Structure (Monorepo with PNPM)

A monorepo structure using PNPM workspaces facilitates code sharing between the backend and frontend, offering speed and simplicity over Yarn or NPM workspaces. The directory structure is organized as follows:

<code>apps
- backend
  - ...
- frontend
  - ...
packages
- shared
  - config
  - enums
  - i18n
  - schemas
  - scripts
  - services
  - types</code>

3. API Layer (tRPC)

tRPC was selected over REST and GraphQL for its developer-friendly approach and end-to-end type safety. Its seamless integration with Next.js and TanStack Query minimizes boilerplate and enhances type inference.

4. Environment and Configuration (T3 Env, ESM, Tailwind)

T3 Env ensures static validation of environment variables. Custom config classes manage static settings, while ESM (ECMAScript Modules) supports code sharing between backend and frontend. Tailwind CSS is used for frontend styling.

5. Database (MySQL with Drizzle ORM)

An ACID-compliant MySQL database was chosen for reliability and transaction guarantees. Drizzle ORM provides a lightweight, type-safe approach to database interactions.

6. Authentication and Authorization (Passwordless, Route-Level Protection)

A custom passwordless authentication system offers flexibility and control. Basic frontend route-level protection is implemented using a protected flag in the routes definition.

7. Validation and Error Handling (Zod, tRPC errorFormatter, Sonner)

Zod handles input validation, while tRPC's errorFormatter standardizes error handling. Sonner toasts display errors to users. A custom ErrorService ensures explicit error handling.

8. State Management (Zustand, TanStack Query)

Zustand manages simple, synchronous global state, while TanStack Query handles asynchronous state management.

9. Internationalization (i18n) (Custom Solution with intl-messageformat)

A custom i18n solution using standalone TypeScript functions with ICU syntax (via intl-messageformat) provides type safety and automatic tree-shaking. Routes are also fully translatable.

10. Logging (Pino)

Pino provides structured logging for both backend and frontend, offering speed and consistent output.

11. Mailing (Resend, Handlebars, MailSlurp)

Resend simplifies email sending, Handlebars creates email templates, and MailSlurp facilitates email testing.

12. Testing (Playwright, Supertest)

Playwright handles both frontend E2E and backend API testing (integrated with Supertest).

13. DevOps (AWS ECS, Terraform, GitHub Actions, S3, CloudFront) - Separate Repository

AWS ECS, Terraform, GitHub Actions, S3, and CloudFront manage infrastructure and CI/CD, detailed in a separate repository.

The ENT Stack is open-source and welcomes contributions. Report issues or ask questions via the GitHub repository.

The above is the detailed content of The ENT Stack: Key Decisions for Building a Full-Stack Web App in 5. For more information, please follow other related articles on the PHP Chinese website!