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

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

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, 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 defines all tables
Better Auth	Session and API-key authentication	Integrated in 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
Hono-WebSocket (@hono/node-ws)	Real-time collaborative features	WebSocket setup in apps/api/src/index.ts
Sentry	Error tracking and monitoring	Imported and configured in 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/.

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

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
• 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	Hono application bootstrap, middleware stack, route registration
apps/api/src/database/schema.ts	Drizzle ORM table definitions for PostgreSQL
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 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 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 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.

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