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

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 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 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 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, the application initializes the Hono server and aggregates all feature routes:

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 exemplifies the reusable client-side logic stored in the frontend src directory:

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 file constructs a typed Hono client that automatically injects required headers:

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. 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, 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}