Source: https://www.hype-stack.dev/docs/development/e2e-typesafety

# End-to-End Typesafety

Hype Stack types flow from the database schema all the way to your React components. No manual type wiring, no drift
between backend and frontend.

## How it works

```
Prisma schema  ->  Kysely types  ->  Hono routes  ->  HyperFetch SDK  ->  React hooks
```

1. **Prisma** generates TypeScript types from your database schema
2. **Kysely** uses those types for compile-time checked SQL queries
3. **Hono** routes define request/response types through Zod validation
4. **HyperFetch** SDK imports Hono's route types, giving the frontend a fully typed API client
5. **React hooks** (`useFetch`, `useSubmit`) infer params, body, and response types from the SDK

## The Hono-to-HyperFetch bridge

When you define a backend route with Zod validation:

```ts
app.post("/projects", zValidator("json", createProjectSchema), async (c) => {
  const data = c.req.valid("json");
  const project = await createProject(data);
  return c.json(project);
});
```

The frontend SDK picks up the types automatically:

```ts
const { submit } = useSubmit(sdk.projects.$post);
// submit() knows the body shape and return type
```

No code generation step. No OpenAPI spec. The types are inferred at compile time through TypeScript's type system.

## Adding a new endpoint

1. Define the route in the backend with Zod validation
2. Use it in the frontend via `sdk.<path>.$method`
3. TypeScript catches any mismatches

That's it. Change a field name in the Zod schema and the frontend breaks at compile time, not in production.