Service Layer Refactor

Introduction: Why a Service Layer?

In the last few lessons, you learned how to make your API more professional — you standardized responses, added validation to incoming data, and introduced structured logging. Now it’s time to organize all that logic into a cleaner, more scalable structure — the service layer . As your API grows, route files tend to become overloaded. They start doing too many things: reading requests, validating data, applying business logic, modifying data, and sending responses. This clutter makes your code hard to maintain, test, or even read. A service layer solves this by separating your business logic from your request handling logic. It becomes the “core brain” of your backend — where your app’s rules and behaviors live — while the route files act only as controllers that coordinate incoming and outgoing data. By introducing a service layer now, you’re setting up your Remix backend for long-term maintainability and scalability.

Why Do We Need a Service Layer?

To understand the need for a service layer, let’s think about what’s currently happening in your API routes. Each route: Parses the request. Validates the data. Applies logic to the user list (like creating or updating users). Formats and returns a response. This is fine for a small demo project, but as soon as you add more features — like roles, permissions, or external data fetching — these files can become messy.

Key Problems the Service Layer Solves

Separation of Concerns: Routes should handle communication (requests and responses), not business logic. The service layer cleanly separates what the API does (business logic) from how requests are handled. Reusability: You can use service functions in multiple routes, or even in other parts of your app (like background jobs or CLI tools), without duplicating code. Testability: You can easily test service functions in isolation without needing to mock entire HTTP requests. This makes your codebase more robust and easier to maintain. Scalability: As your app grows, your service layer can connect to databases, authentication systems, or external APIs — all without changing how your routes work. In short: The service layer keeps your routes lean, your logic centralized, and your code adaptable to future growth.

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

TypeScript

import { users, type User } from "~/lib/data";

type OptionalUserFields = Partial<Omit<User, "id" | "createdAt">>;

function normalizeRole(role: unknown, fallback: string): string {
  return typeof role === "string" && role.trim() !== "" ? role.trim() : fallback;
}

function normalizeIsActive(isActive: unknown, fallback: boolean): boolean {
  return typeof isActive === "boolean" ? isActive : fallback;
}

export function getAllUsers(): User[] {
  return [...users];
}

export function getUserById(id: number): User | undefined {
  return users.find(candidate => candidate.id === id);
}

export function createUser(payload: OptionalUserFields & Pick<User, "name" | "email">): User {
  const nextId = users.length > 0 ? Math.max(...users.map(u => u.id)) + 1 : 1;

  const newUser: User = {
    id: nextId,
    name: payload.name.trim(),
    email: payload.email.trim(),
    role: normalizeRole(payload.role, "user"),
    isActive: normalizeIsActive(payload.isActive, true),
    createdAt: new Date().toISOString()
  };

  users.push(newUser);
  return newUser;
}

// ... replaceUser, patchUser, deleteUser

TypeScript

import { ok, err } from "~/lib/responses";
import { validateUserPayload } from "~/lib/validation";
import { withLogging } from "~/utils/withLogging.server";
import { createUser } from "~/lib/services/userService";

export async function action({ request }) {
  return withLogging("POST /api/users", async () => {
    if (request.method !== "POST") return err("Method Not Allowed", 405);

    try {
      const body = await request.json();
      const errors = validateUserPayload(body, { requireAll: true });
      if (errors.length) return err(errors, 400);

      const created = createUser({
        name: body.name,
        email: body.email,
        role: body.role,
        isActive: body.isActive
      });

      return ok(created, 201);
    } catch {
      return err("Invalid JSON body", 400);
    }
  });
}

text

Request → Remix route → validateUserPayload → userService → ok/err response → withLogging logs result

Introduction: Why a Service Layer?

Why Do We Need a Service Layer?

Key Problems the Service Layer Solves

Join the 1M+ learners on CodeSignal

What the Service Layer Looks Like

Breaking It Down

How Routes Use the Service Layer

The Bigger Picture: Architectural Layers

Example: Why This Matters Later

Summary