# What Frameworks and Libraries Power usekaneo/kaneo's Core Functionality?

> Discover the core frameworks and libraries powering usekaneo/kaneo. Learn about Hono, React 19, TanStack, Drizzle ORM, and Better Auth in this pnpm monorepo.

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

---

**Kaneo uses Hono for its backend API, React 19 with TanStack Router and TanStack Query for its frontend, and Drizzle ORM with Better Auth for data and authentication layers—all organized as a pnpm monorepo.**

Kaneo is a modern project management platform built as a **pnpm monorepo** that cleanly separates backend and frontend concerns. The repository's architecture relies on a curated stack of high-performance, type-safe libraries rather than heavy all-in-one frameworks. This article breaks down every core dependency and shows exactly where each one appears in the source code.

## Backend API Framework: Hono

The API layer in [`apps/api/src/index.ts`](https://github.com/usekaneo/kaneo/blob/main/apps/api/src/index.ts) runs on **Hono**, a lightweight Node.js web framework designed for speed and minimal overhead. Hono handles routing, middleware composition, and the full request/response lifecycle.

```typescript
import { Hono } from "hono";
import { describeRoute, validator } from "hono-openapi";
import * as v from "valibot";

const api = new Hono();

api.get(
  "/health",
  describeRoute({
    operationId: "getHealth",
    tags: ["Utility"],
    description: "Health check endpoint",
    responses: { 200: { description: "OK" } },
  }),
  validator("query", v.object({})),
  (c) => c.json({ status: "ok" })
);

```

This pattern appears throughout [`apps/api/src/index.ts`](https://github.com/usekaneo/kaneo/blob/main/apps/api/src/index.ts), where Hono routes are enriched with OpenAPI metadata and runtime validators. The framework's middleware-based design allows Kaneo to stack CORS, authentication, error tracking, and WebSocket handling in a composable pipeline.

### API Layer Enhancements

| Library | Purpose | Implementation |
|---------|---------|----------------|
| **Drizzle ORM** | Type-safe PostgreSQL queries | [`apps/api/src/database/schema.ts`](https://github.com/usekaneo/kaneo/blob/main/apps/api/src/database/schema.ts) defines all tables |
| **Better Auth** | Session and API-key authentication | Integrated in [`apps/api/src/index.ts`](https://github.com/usekaneo/kaneo/blob/main/apps/api/src/index.ts), utilities in `apps/api/src/auth/*` |
| **Valibot** | Runtime request validation | `v.object(...)` validators throughout route definitions |
| **Hono-OpenAPI** | Automatic OpenAPI spec generation | `openAPIRouteHandler` in [`apps/api/src/index.ts`](https://github.com/usekaneo/kaneo/blob/main/apps/api/src/index.ts) |
| **Hono-WebSocket** (`@hono/node-ws`) | Real-time collaborative features | WebSocket setup in [`apps/api/src/index.ts`](https://github.com/usekaneo/kaneo/blob/main/apps/api/src/index.ts) |
| **Sentry** | Error tracking and monitoring | Imported and configured in [`apps/api/src/index.ts`](https://github.com/usekaneo/kaneo/blob/main/apps/api/src/index.ts) |

## Frontend Framework: React 19 with TanStack

The web application in `apps/web/` centers on **React 19+** for component rendering, layered with TanStack's routing and data-fetching solutions for a modern, type-safe user experience.

### Routing with TanStack Router

Kaneo uses **@tanstack/react-router** for file-based routing with automatic code splitting and lazy loading. Route definitions live directly in the filesystem under `apps/web/src/routes/`.

```tsx
import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/")({
  component: () => (
    <div className="p-4">
      <h1 className="text-2xl font-bold">Welcome to Kaneo</h1>
    </div>
  ),
});

```

The actual implementation in [`apps/web/src/routes/index.tsx`](https://github.com/usekaneo/kaneo/blob/main/apps/web/src/routes/index.tsx) demonstrates this pattern, where each route file exports a component mapped to its URL path.

### Data Fetching with TanStack Query

All server communication flows through **@tanstack/react-query**, which provides caching, background refetching, and optimistic updates. Query hooks are centralized in `apps/web/src/hooks/queries/`.

```typescript
import { useQuery } from "@tanstack/react-query";

export function useHealthCheck() {
  return useQuery({
    queryKey: ["health"],
    queryFn: async () => {
      const res = await fetch(`${import.meta.env.VITE_API_URL}/health`);
      if (!res.ok) throw new Error("Health check failed");
      return res.json();
    },
    staleTime: 60_000,
  });
}

```

This hook pattern repeats across the codebase, with each query file wrapping a specific API endpoint in a reusable, cached data source.

### State Management and Styling

| Library | Role | Location |
|---------|------|----------|
| **Zustand** | Lightweight global state (theme, auth) | `apps/web/src/store/*` |
| **Tailwind CSS v4** | Utility-first styling | Project-wide Tailwind configuration |

Zustand stores in `apps/web/src/store/` handle cross-component state without the boilerplate of larger solutions. Tailwind v4 provides all UI styling through utility classes.

## Shared Infrastructure

Several utilities bridge both layers of the monorepo:

- **@paralleldrive/cuid2**: Collision-resistant ID generation via `createId()` calls in [`apps/api/src/database/schema.ts`](https://github.com/usekaneo/kaneo/blob/main/apps/api/src/database/schema.ts)
- **pnpm workspaces**: Dependency management and script coordination across `apps/api` and `apps/web`

## Key Source Files

These files anchor the entire framework stack:

| Path | Responsibility |
|------|----------------|
| [`apps/api/src/index.ts`](https://github.com/usekaneo/kaneo/blob/main/apps/api/src/index.ts) | Hono application bootstrap, middleware stack, route registration |
| [`apps/api/src/database/schema.ts`](https://github.com/usekaneo/kaneo/blob/main/apps/api/src/database/schema.ts) | Drizzle ORM table definitions for PostgreSQL |
| [`apps/web/src/routes/index.tsx`](https://github.com/usekaneo/kaneo/blob/main/apps/web/src/routes/index.tsx) | TanStack Router entry point and root route |
| `apps/web/src/hooks/queries/*` | TanStack Query hooks for all API interactions |
| `apps/web/src/store/*` | Zustand stores for global client state |
| `apps/api/src/auth/*` | Better Auth session and credential logic |

## Summary

- **Backend**: Hono web framework with Drizzle ORM, Better Auth, Valibot validation, and Hono-OpenAPI documentation
- **Frontend**: React 19 with TanStack Router for routing, TanStack Query for data, Zustand for state, and Tailwind CSS v4 for styling
- **Architecture**: pnpm monorepo separating API and web concerns with shared utilities
- **Notable integrations**: WebSocket support via `@hono/node-ws`, error tracking with Sentry, and CUID2 for database IDs

## Frequently Asked Questions

### Does Kaneo use Express.js for its backend?

No. Kaneo uses **Hono** instead of Express. Hono provides a smaller bundle size, faster request handling, and native TypeScript support—visible in [`apps/api/src/index.ts`](https://github.com/usekaneo/kaneo/blob/main/apps/api/src/index.ts) where the Hono instance is created and configured with middleware.

### What database does Kaneo use with Drizzle ORM?

Kaneo uses **PostgreSQL**. The Drizzle ORM schema in [`apps/api/src/database/schema.ts`](https://github.com/usekaneo/kaneo/blob/main/apps/api/src/database/schema.ts) defines tables for users, projects, tasks, and other entities with type-safe query builders that compile to SQL.

### How does Kaneo handle real-time updates?

Through **Hono-WebSocket** (`@hono/node-ws`). The WebSocket server is initialized in [`apps/api/src/index.ts`](https://github.com/usekaneo/kaneo/blob/main/apps/api/src/index.ts) alongside the HTTP routes, enabling live collaborative features without a separate socket.io dependency.

### Is Kaneo's frontend using Next.js?

No. Kaneo uses **React 19 with TanStack Router**, not Next.js. This choice provides file-based routing without the server-side rendering complexity, keeping the frontend as a purely client-side single-page application deployed as static assets.