DEV Community: mokwa moffat

Building a REST API with Express + tRPC: End-to-End Type Safety Eliminate API Bugs & Reduce Development Time by 40%

mokwa moffat — Fri, 13 Jun 2025 11:24:51 +0000

As full-stack developers, we waste countless hours debugging mismatched data types between frontend and backend. A 2024 survey by Postman reveals that 65% of API errors stem from type mismatches. Let’s fix this permanently with Express + tRPC – a combo that enforces type safety from database to UI.

The Pain Point

// Traditional Express - THE NIGHTMARE  
app.post("/login", (req, res) => {  
  const email = req.body.email; // Type: any 🤮  
  // 200 lines later...  
  res.json({ token: JWT }); // Hope frontend guesses the shape!  
});

Result: Runtime errors, broken features, and angry Slack messages.

The Solution: Express + tRPC Stack

Why This Wins

	REST	GraphQL	tRPC + Express
Type Safety	❌ Manual	✅ Codegen	✅ End-to-End
Boilerplate	High	High	Zero
Validation	Custom	Partial	✅ Zod-powered
Deployment	Standard	Complex	✅ Express-compatible

Step 1: Lightning-Fast Setup

Installation:

npm install express @trpc/server zod @types/express

File: server.ts

import express from 'express';  
import { createExpressMiddleware } from '@trpc/server/adapters/express';  
import { initTRPC } from '@trpc/server';  
import { z } from 'zod';  

// 1. Initialize tRPC  
const t = initTRPC.create();  

// 2. Create type-safe router  
const appRouter = t.router({  
  // We'll add procedures here  
});  

// 3. Mount to Express  
const app = express();  
app.use(express.json());  
app.use('/api', createExpressMiddleware({ router: appRouter }));  

app.listen(3000, () => console.log('✅ Server running on port 3000'));

Step 2: Bulletproof Authentication Endpoint

Add Zod validation + business logic:

const appRouter = t.router({  
  login: t.procedure  
    .input(  
      z.object({  
        email: z.string().email("Invalid email"),  
        password: z.string().min(8, "Password too short")  
      })  
    )  
    .mutation(async ({ input }) => {  
      // input is AUTOMATICALLY TYPED as { email: string, password: string }  
      const user = await db.users.findUnique({  
        where: { email: input.email }  
      });  

      if (!user) throw new Error("User not found");  
      if (!verifyPassword(input.password, user.hash)) {  
        throw new Error("Invalid password");  
      }  

      // Return type INFERRED by TypeScript  
      return {  
        token: createJWT(user.id),  
        user: { id: user.id, name: user.name }  
      };  
    }),  
});  

// Export types for frontend consumption  
export type AppRouter = typeof appRouter;

Key Benefits:

Validation Fail-Fast: Invalid requests blocked before DB call
Autocomplete: IDE knows input.email is a string
Self-Documenting: Types serve as live documentation

Step 3: Frontend Integration (Zero Type Duplication!)

React/Vue/Svelte Setup:

import { createTRPCReact } from '@trpc/react-query';  
import type { AppRouter } from '../server';  

// 1. Create type-safe client  
export const trpc = createTRPCReact<AppRouter>();  

// 2. Usage in component  
function LoginForm() {  
  const login = trpc.login.useMutation();  

  const handleSubmit = async (e) => {  
    e.preventDefault();  
    try {  
      //  TypeScript validates fields in real-time!  
      const result = await login.mutateAsync({  
        email: e.target.email.value,  
        password: e.target.password.value  
      });  
      console.log(result.token); // Known to be string  
    } catch (err) {  
      // Error types also inferred!  
    }  
  };  

  return (/* form */)  
}

Step 4: Deploy Like Any Express App

Dockerfile Example:

FROM node:20-slim  
WORKDIR /app  

# Install dependencies  
COPY package*.json ./  
RUN npm ci --omit=dev  

# Build and run  
COPY . .  
EXPOSE 3000  
CMD ["node", "server.ts"]

Deployment Targets:

Serverless:

   # Add serverless adapter  
   npm install @trpc/server/adapter-aws-lambda

Kubernetes: Add health check endpoint

   app.get('/health', (_, res) => res.send('OK'));

Vercel/AWS: Standard Node.js deployments

When Should You Use This?

Perfect For:

Full-stack TypeScript apps
Startups needing rapid iteration
Teams reducing bug backlog

Avoid When:

Building public REST APIs (use OpenAPI)
Non-TypeScript projects

Real-World Impact

After migrating to tRPC:

63% reduction in "undefined property" bugs (Source: tRPC case studies)
40% faster feature development (eliminated manual type checks)

🚀 Get Started Today

Clone template:

   git clone https://github.com/express-templates/trpc-starter

Explore resources:
- tRPC Official Docs
- Express Deployment Checklist

** Your turn*: Have you tried tRPC? Share your experience below!

* Discussion**: What's your biggest API pain point? Type mismatches? Validation? Deployment?

// Stop debugging, start shipping.  
// Your future self will thank you.

Like this? Share it with your team!
Follow me for more Express/TypeScript deep dives. Next up:

"Deploying Express to Serverless with 0 Cold Starts"

Why You Should Use MVC Architecture in Express.js for Scalable Web Apps

mokwa moffat — Fri, 23 May 2025 12:49:51 +0000

If you’re diving into building web applications with Express.js, you’ve probably heard about the MVC (Model-View-Controller) architecture. But why is MVC such a popular choice among developers? And how can it supercharge your Express.js projects?

In this blog, I’ll walk you through the usefulness, advantages, and scalability of MVC in Express.js, sprinkle in some fun facts, and give you actionable insights to start implementing it today.

What is MVC in Express.js?

MVC is a design pattern that divides your application into three interconnected components:

Model: Manages data and business logic
View: Handles the user interface and presentation
Controller: Acts as an intermediary, processing user input and interacting with Models and Views

This separation helps keep your code organized, maintainable, and scalable.

Graphical Example: MVC Structure in Express.js

Below is a simplified diagram showing how MVC components interact in an Express.js app:

  [User]
     |
  (HTTP Request)
     |
  [Controller]  <-- Receives user requests and processes input
     |
  +--|-------------------+
  |                      |
[Model]               [View]
(Handles data,       (Renders UI,
database queries)    sends HTML)

Workflow explained:

User sends a request (e.g., visiting /profile).
Controller receives the request and decides what to do.
Controller asks the Model to fetch or update data.
Once data is ready, Controller passes it to the View.
View renders the response (HTML, JSON, etc.) sent back to the User.

Why Use MVC in Express.js? -The Usefulness

Express.js is a minimal and flexible Node.js web framework, but as your app grows, maintaining a flat folder structure can quickly become a nightmare. That’s where MVC shines:

Separation of Concerns: Keeps your business logic, UI, and input handling clearly separated.
Easier Maintenance: Bugs and features are easier to isolate and fix.
Team Collaboration: Different developers can work on Models, Views, or Controllers independently.
Cleaner Codebase: Improves readability and reduces complexity.
Faster Development: With a clear structure, onboarding new team members becomes seamless.

Advantages of MVC in Express.js

Scalability: MVC’s modular nature allows your app to grow without turning into a tangled mess.
Reusability: Models and views can be reused across different parts of the app.
Testability: Isolated components make unit testing straightforward.
Flexibility: Easily swap out or upgrade components without rewriting the whole app.
Community Support: MVC is widely used, so you’ll find plenty of resources, tutorials, and frameworks built on it.

Fun Fact: MVC Isn’t New

Did you know the MVC pattern dates back to the 1970s? Originally developed at Xerox PARC, it was designed to improve user interface programming. Today, it’s one of the most enduring and widely adopted patterns in web development — powering frameworks from Ruby on Rails to Angular, and yes, Express.js too.

The Importance and Scalability of MVC in Express.js

In real-world projects, scalability is key. Apps that start simple often evolve into complex beasts requiring robust architecture. MVC provides:

Scalability: By compartmentalizing components, you can grow features without rewriting core parts.
Maintainability: Teams can easily identify where new code belongs.
Performance Optimization: Models can handle database queries efficiently, while views can be optimized for faster rendering.
Code Reusability: Common functions are abstracted, reducing redundancy and improving speed.

Key Features You Shouldn’t Miss

Routing Layer in Controllers: Handle different routes and HTTP methods cleanly.
Template Engines for Views: Use engines like EJS, Pug, or Handlebars for dynamic rendering.
ORM Integration in Models: Use Sequelize, Mongoose, or other ORMs to interact with databases.
Middleware for Authentication & Validation: Keep your controllers focused and clean.

Ready to Build Scalable Apps? Here’s Your Call to Action

Start integrating MVC in your Express.js projects today to write cleaner, more maintainable code and build scalable applications that stand the test of time.

If you want a step-by-step tutorial or starter boilerplate, just drop a comment below or follow me for more tips on Express.js and Node development!

Thanks for reading! If this helped you, consider sharing it on Dev.to and Twitter to help fellow developers embrace the power of MVC in Express.js.