# What Is the Purpose of the `src` Directory in Kaneo?

> Discover the purpose of the src directory in the usekaneo/kaneo monorepo. Learn how it houses the typed TypeScript source code for the Hono backend API, React frontend, and shared libraries.

- Repository: [kaneo.app/kaneo](https://github.com/usekaneo/kaneo)
- Tags: internals
- Published: 2026-08-08

---

**The `src` directories in the usekaneo/kaneo monorepo contain the typed TypeScript source code that implements the Hono backend API, React frontend, and shared library packages, serving as the central location for all functional application logic.**

The `src` directory is the heart of the Kaneo codebase. In this TypeScript monorepo, every application and package maintains its own `src` folder where the actual implementation lives—deliberately separated from configuration files, tests, and build artifacts. These folders compile into the production bundles that power the Kaneo project management platform.

## Where the `src` Directory Lives in the Kaneo Monorepo

The Kaneo repository follows a monorepo structure with three primary locations containing `src` directories:

- **apps/api/src**: Houses the Hono-based backend server
- **apps/web/src**: Contains the React frontend application
- **packages/*/src**: Hosts reusable shared libraries

Each `src` folder serves as the **source code hub** for its respective module, enabling clean separation of concerns and type-safe development across the entire system.

## Backend Implementation: Inside `apps/api/src`

The backend source code lives in `apps/api/src`, which implements the entire Hono server including route definitions, database schemas, authentication logic, and WebSocket handling.

### API Entry Point

The main server initialization occurs in [`apps/api/src/index.ts`](https://github.com/usekaneo/kaneo/blob/main/apps/api/src/index.ts). This file creates the Hono application instance, wires all feature routes, and configures middleware such as CORS and authentication.

```typescript
const taskApi = api.route("/task", task);

```

This pattern mounts the `task` route handler under the `/task` endpoint, demonstrating how the `src` directory organizes feature-based routing logic.

### Database and Business Logic

Beyond routing, this directory contains all database schema definitions, authentication controllers, and WebSocket adapters that handle real-time communication between clients.

## Frontend Implementation: Inside `apps/web/src`

The React frontend source resides in `apps/web/src`, containing UI components, custom hooks, and utility libraries that power the user interface.

### Application Bootstrap

The entry point for the React application is [`apps/web/src/main.tsx`](https://github.com/usekaneo/kaneo/blob/main/apps/web/src/main.tsx), which bootstraps the UI before mounting the component tree.

### Client-Side Utilities

Utility functions that support the frontend logic are stored within the `src` tree. For example, [`apps/web/src/lib/utils/create-slug.ts`](https://github.com/usekaneo/kaneo/blob/main/apps/web/src/lib/utils/create-slug.ts) provides a helper for generating URL-friendly slugs:

```typescript
export function createSlug(name: string): string {
  return name
    .toLowerCase()
    .trim()
    .replace(/[^\w\s-]/g, "")
    .replace(/[\s_-]+/g, "-")
    .replace(/^-+|-+$/g, "");
}

```

This function normalizes input strings by removing special characters and inserting hyphens, illustrating how the `src` directory hosts reusable client-side logic separate from React components.

## Shared Libraries: Inside `packages/*/src`

The `packages` directory contains shared libraries that multiple applications import, each with its own `src` folder implementing cross-cutting concerns:

- **packages/libs/src**: Re-usable API clients and URL helpers
- **packages/email/src**: Email templates
- **packages/permissions/src**: Authorization utilities defined in [`packages/permissions/src/index.ts`](https://github.com/usekaneo/kaneo/blob/main/packages/permissions/src/index.ts)
- **packages/mcp/src**: Kaneo Control Panel logic

### Type-Safe API Client

The [`packages/libs/src/hono.ts`](https://github.com/usekaneo/kaneo/blob/main/packages/libs/src/hono.ts) file builds a type-safe Hono client that the web application uses to communicate with the backend:

```typescript
export const client = hc<AppType>(apiUrl, {
  fetch: (input, init) =>
    fetch(input, {
      ...init,
      headers: {
        ...init?.headers,
        "Content-Type": "application/json",
        "X-Kaneo-Window-Id": windowId,
      },
      credentials: "include",
    });
});

```

This client automatically injects the `X-Kaneo-Window-Id` header into every request, ensuring request tracing across the system while maintaining full TypeScript type safety between the frontend and backend.

## Build Process and Compilation

The `src` directories are compiled into distributable bundles using **Vite** for the web application and **Biome** for linting. This compilation step transforms the TypeScript source files into production-ready JavaScript while preserving type definitions for cross-package imports.

Keeping source code isolated in `src` folders ensures that build tools can cleanly distinguish between implementation and configuration, tests remain separate from production code, and import paths remain predictable across the monorepo.

## Summary

- The `src` directories in `apps/api`, `apps/web`, and `packages/*` contain the only functional TypeScript code in the Kaneo monorepo.
- `apps/api/src` implements the Hono backend server with routes, middleware, and database logic.
- `apps/web/src` houses React components, hooks, and utilities like the `createSlug` function.
- `packages/*/src` provides shared infrastructure including the type-safe Hono client in [`packages/libs/src/hono.ts`](https://github.com/usekaneo/kaneo/blob/main/packages/libs/src/hono.ts).
- These folders compile via Vite and Biome into the production bundles that run the Kaneo platform.

## Frequently Asked Questions

### What build tools compile the `src` directories in Kaneo?

The web application uses **Vite** to compile `apps/web/src` into production bundles, while **Biome** handles linting across all TypeScript source files. The backend compiles through standard TypeScript compilation or the Hono runtime environment.

### How does the web app communicate with the API using `src` files?

The frontend imports a type-safe client from [`packages/libs/src/hono.ts`](https://github.com/usekaneo/kaneo/blob/main/packages/libs/src/hono.ts), which uses the Hono `hc` function to create an RPC client. This client automatically adds headers like `X-Kaneo-Window-Id` and ensures type safety between the backend routes defined in `apps/api/src` and frontend API calls.

### Where should new features be added in the Kaneo `src` structure?

New backend features belong in `apps/api/src` following the existing route-based organization, while frontend components and pages go in `apps/web/src`. Shared utilities that both applications need should be placed in the appropriate `packages/*/src` directory, such as `packages/libs/src` for API clients or `packages/permissions/src` for authorization rules.

### Are test files stored inside the `src` directories?

No, the `src` directories are deliberately kept separate from test files and configuration artifacts. This separation allows developers to focus on core implementation while keeping the source tree clean and build tools focused strictly on production code compilation.