# Purpose of the src Directory in Kaneo: Monorepo Source Code Architecture Explained

> Discover the purpose of the src directory in Kaneo's monorepo. Learn how it centralizes all backend API, React frontend, and shared package source code before production compilation.

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

---

**The `src` directories in the usekaneo/kaneo repository house all typed TypeScript source code for the backend API, React frontend, and shared packages, functioning as the centralized location where every feature, route, and utility is implemented before compilation into production bundles.**

The `src` directory serves as the foundational codebase for the Kaneo project management platform. In this monorepo architecture, these folders contain the functional implementation distinct from configuration files, tests, and build artifacts. Understanding the purpose of the `src` directory in Kaneo is essential for developers contributing to the API, web interface, or shared libraries.

## What the src Directory Contains in Kaneo

The repository organizes source code into three primary `src` locations, each serving a distinct role in the application stack.

### Backend API Source (apps/api/src)

The `apps/api/src` directory contains the **Hono-based backend server** implementation. This includes route definitions for endpoints like `/project`, `/task`, and `/workspace`, database schema definitions, authentication logic, and WebSocket handling. The entry point at [`apps/api/src/index.ts`](https://github.com/usekaneo/kaneo/blob/main/apps/api/src/index.ts) creates the Hono application instance and wires all feature routes together with middleware for CORS and authentication.

### Frontend Web Source (apps/web/src)

The `apps/web/src` folder hosts the **React frontend application**, including UI components, custom hooks, query-fetchers for data loading, and client-side utility libraries. This directory powers the user interface and contains type definitions that ensure end-to-end type safety. 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 URL-friendly slug generation logic used throughout the application.

### Shared Package Libraries (packages/*/src)

The `packages/*/src` directories contain **reusable libraries** that multiple applications import. These include the API client in `packages/libs/src`, email templates in `packages/email/src`, permission utilities in `packages/permissions/src`, and the Kaneo Control Panel (MCP) package. The `src` folders in these packages compile into distributable modules that enforce consistent functionality across the monorepo.

## Key Architectural Patterns in Kaneo's src Structure

The separation of `src` from configuration enables clean **separation of concerns** and streamlined build processes. The backend entry point at [`apps/api/src/index.ts`](https://github.com/usekaneo/kaneo/blob/main/apps/api/src/index.ts) demonstrates this by explicitly mounting route handlers while keeping business logic isolated within the `src` hierarchy.

Build tools like **Vite** (for the web app) and **Biome** (for linting) process these source files into production bundles. This architecture ensures that developers edit only the implementation code in `src` while the build system handles compilation and optimization separately.

## Practical Code Examples from Kaneo's src Directories

### Backend Route Configuration

In [`apps/api/src/index.ts`](https://github.com/usekaneo/kaneo/blob/main/apps/api/src/index.ts), the application initializes the Hono server and aggregates all feature routes:

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

```

This mounting pattern connects the task management endpoints to the main API instance, with each route module residing within the `src` hierarchy.

### Frontend Utility Implementation

The `createSlug` function in [`apps/web/src/lib/utils/create-slug.ts`](https://github.com/usekaneo/kaneo/blob/main/apps/web/src/lib/utils/create-slug.ts) exemplifies the reusable client-side logic stored in the frontend `src` directory:

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

```

This utility normalizes whitespace, removes special characters, and generates URL-friendly identifiers used across the React application.

### Shared Type-Safe API Client

The [`packages/libs/src/hono.ts`](https://github.com/usekaneo/kaneo/blob/main/packages/libs/src/hono.ts) file constructs a typed Hono client that automatically injects required headers:

```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 shared library enables the web application to make type-safe API calls while maintaining consistent request tracing through the `X-Kaneo-Window-Id` header.

## Summary

- The `src` directories in the Kaneo monorepo contain **all functional TypeScript source code**, separated from configuration and tests.
- **Backend code** lives in `apps/api/src`, implementing Hono routes, database logic, and authentication middleware.
- **Frontend code** resides in `apps/web/src`, including React components, hooks, and utilities like `createSlug`.
- **Shared packages** use `packages/*/src` to distribute reusable libraries such as the typed API client and permission utilities.
- Build tools compile these `src` directories into production bundles, making them the exclusive location for feature development and bug fixes.

## Frequently Asked Questions

### What programming language is used in Kaneo's src directories?

Kaneo uses **TypeScript** exclusively within all `src` directories. The codebase leverages strict typing across the backend API, React frontend, and shared packages to ensure end-to-end type safety and improved developer experience.

### How does the src directory in apps/api differ from packages/libs?

The `apps/api/src` directory contains the **executable backend application** with HTTP routes, middleware, and database connections specific to the server. In contrast, `packages/libs/src` contains **reusable library code** such as the Hono client factory that multiple applications import, but which does not run independently as a service.

### Where is the entry point for Kaneo's backend server?

The backend server initializes 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, configures global middleware for CORS and authentication, and mounts all feature routes including `/task`, `/project`, and `/workspace`.

### Why does Kaneo separate src from configuration files?

This separation maintains a **clean project structure** where `src` contains only implementation code while root directories hold configuration files like [`package.json`](https://github.com/usekaneo/kaneo/blob/main/package.json), [`tsconfig.json`](https://github.com/usekaneo/kaneo/blob/main/tsconfig.json), and build artifacts. This distinction simplifies build processes, makes testing configuration explicit, and helps developers locate functional code quickly without navigating through metadata files.