How the Kaneo Frontend Is Built: Complete Tech Stack and Build Pipeline Explained

The Kaneo frontend is a modern React application built with Vite, bundled through apps/web/vite.config.ts, and powered by TanStack Router, Tailwind CSS, and a curated set of UI primitives from Radix UI and Base UI.

This article breaks down the complete architecture of the Kaneo frontend, a project management tool built as part of the usekaneo/kaneo monorepo. Whether you're exploring the codebase for contributions or researching modern React stack decisions, you'll find detailed coverage of the build pipeline, routing system, state management, and every major library in use.

Project Structure and Build Tooling

The Kaneo frontend lives in the apps/web workspace and uses Vite as its build tool and development server. This choice delivers fast cold starts, instant hot-module replacement, and optimized production bundles.

Vite Configuration

The build pipeline is defined in apps/web/vite.config.ts. This file configures plugins for routing, Tailwind CSS, React with the new React Compiler preset, Babel transformations, and optional Sentry error tracking.

// vite.config.ts - key plugins excerpt
plugins: [
  tanstackRouter({ target: 'react', autoCodeSplitting: true }),
  tailwindcss(),
  react({ babel: { plugins: [['babel-plugin-react-compiler', {}]] } }),
  sentryVitePlugin({ /* conditional on env vars */ }),
]

TypeScript compilation is controlled by tsconfig.app.json, targeting ES2022 with "moduleResolution": "bundler" for optimal Vite compatibility.

Development and Production Scripts

Command	Script	Purpose
pnpm dev	vite	Starts dev server on port 5173 with HMR
pnpm build	vite build	Creates production bundle with hidden source maps in dist/

Hidden source maps allow Sentry to symbolicate stack traces without exposing mappings to end users.

Routing with TanStack Router

Kaneo uses TanStack Router for type-safe, file-based routing. The @tanstack/router-plugin/vite plugin in vite.config.ts enables automatic code splitting and route generation.

Routes are parsed from the filesystem and generated into routeTree.gen.ts at build time. The entry point in apps/web/src/main.tsx creates the router instance:

import { createRouter } from '@tanstack/react-router';
import { routeTree } from './routeTree.gen';

const router = createRouter({
  routeTree,
  defaultPreload: 'intent',
  defaultPreloadStaleTime: 0,
  context: { user: null, queryClient },
});

The router is rendered through <RouterProvider> nested within the application's provider tree.

State Management and Data Fetching

Kaneo employs a layered approach to state management:

• @tanstack/react-query – Primary data fetching and server state caching, wrapped in QueryClientProvider
• zustand – Lightweight client state for global UI state
• nanostores – Micro-stores for atomic, cross-component state

The provider hierarchy in apps/web/src/main.tsx establishes this architecture:

root.render(
  <StrictMode>
    <ErrorBoundary fallback={RootCrashFallback}>
      <QueryClientProvider client={queryClient}>
        <ThemeProvider>
          <AuthProvider>
            <AppI18nProvider>
              <KeyboardShortcutsProvider>
                <App />
                <KeyboardShortcutsHelp />
              </KeyboardShortcutsProvider>
            </AppI18nProvider>
          </AuthProvider>
        </ThemeProvider>
      </QueryClientProvider>
    </ErrorBoundary>
  </StrictMode>,
);

Styling System: Tailwind CSS

All UI components use Tailwind CSS via the @tailwindcss/vite plugin. The styling pipeline includes:

• Tailwind utility classes – Base styling approach throughout components
• tailwind-merge – Deduplication of conflicting class names
• clsx – Conditional class composition
• class-variance-authority – Type-safe variant-based component styling

Global styles are imported in apps/web/src/index.css, which includes Tailwind directives and custom design tokens.

Component Library Architecture

Kaneo builds its interface on a foundation of unstyled, accessible primitives:

Core Primitives

• Radix UI (@radix-ui/react-*) – Low-level, accessible components for dialogs, dropdowns, tooltips, and more
• Base UI (@base-ui/react) – Additional headless UI primitives

Visual Enhancements

• lucide-react – Consistent iconography
• framer-motion – Declarative animations and transitions
• tippy.js – Lightweight, customizable tooltips

Example usage of a Radix UI tooltip:

import { Tooltip, TooltipTrigger, TooltipContent } from '@radix-ui/react-tooltip';

<Tooltip>
  <TooltipTrigger asChild>
    <button>Hover me</button>
  </TooltipTrigger>
  <TooltipContent>Tooltip text</TooltipContent>
</Tooltip>

Rich Text Editing with TipTap

The Kaneo editor integrates TipTap (@tiptap/*) for extensible rich text editing. Supporting libraries include:

• lowlight – Syntax highlighting for code blocks
• shiki – Modern, themeable code rendering

This combination provides a polished writing experience with code support for project documentation and task descriptions.

Internationalization

Multi-language support is implemented through i18next and react-i18next, with translation resources loaded via i18next-resources-to-backend. The AppI18nProvider wraps the application to ensure locale contexts are available throughout the component tree.

Form Handling and Validation

Forms use react-hook-form for state management and zod (via @hookform/resolvers/zod) for schema validation. This pairing provides type-safe forms with robust error handling and minimal boilerplate.

Error Monitoring

Production error tracking is handled by Sentry, conditionally enabled when SENTRY_DSN and related environment variables are present. The <ErrorBoundary> component in apps/web/src/main.tsx captures React errors and forwards them to Sentry for aggregation and alerting.

Additional Utility Libraries

Library	Purpose
date-fns	Date manipulation and formatting
zustand	Lightweight global state
nanostores	Atomic, framework-agnostic stores

Key Configuration Files

File	Purpose
apps/web/package.json	Dependencies and npm scripts
apps/web/vite.config.ts	Vite plugins and build settings
apps/web/tsconfig.app.json	TypeScript compiler options
apps/web/src/main.tsx	Application bootstrap and provider tree
apps/web/src/index.css	Tailwind imports and global styles
apps/web/src/routeTree.gen.ts	Auto-generated TanStack Router tree

Summary

• The Kaneo frontend uses Vite in apps/web/vite.config.ts for development and production builds, with the React Compiler preset enabled
• TanStack Router provides file-based, type-safe routing with automatic code splitting
• Data fetching relies on TanStack Query, client state on Zustand and nanostores
• Tailwind CSS with tailwind-merge and class-variance-authority powers all styling
• Radix UI and Base UI form the accessible component foundation, enhanced by Framer Motion and Lucide
• TipTap, i18next, react-hook-form, and Sentry round out the feature stack

Frequently Asked Questions

What build tool does Kaneo use for its frontend?

Kaneo uses Vite as its build tool and development server. The configuration lives in apps/web/vite.config.ts and includes plugins for React, Tailwind CSS, TanStack Router, and optional Sentry integration.

How does Kaneo handle routing in its React application?

Kaneo uses TanStack Router with file-based routing. The @tanstack/router-plugin/vite plugin auto-generates routes into routeTree.gen.ts, which is consumed by createRouter() in apps/web/src/main.tsx.

What UI component libraries does Kaneo use?

Kaneo builds on Radix UI and Base UI for accessible, unstyled primitives. Visual elements come from Lucide React for icons, Framer Motion for animations, and Tippy.js for tooltips. All components are styled with Tailwind CSS.

How is state managed in the Kaneo frontend?

Server state uses TanStack Query (@tanstack/react-query). Client state splits between Zustand for global stores and nanostores for atomic state. Forms use react-hook-form with Zod validation.

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