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

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. This file creates the Hono application instance, wires all feature routes, and configures middleware such as CORS and authentication.

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, 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 provides a helper for generating URL-friendly slugs:

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
• packages/mcp/src: Kaneo Control Panel logic

Type-Safe API Client

The packages/libs/src/hono.ts file builds a type-safe Hono client that the web application uses to communicate with the backend:

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

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