Frontend Architecture

The locraft dashboard is a modern single-page application built with a carefully chosen stack optimized for developer experience and performance.

Tech stack

Layer	Technology	Why
Build	Vite 7 + SWC	20x faster than Babel, native ESM dev server
UI	React 19	Concurrent features, server actions ready
Routing	TanStack Router	Type-safe routes with autoCodeSplitting: true
Data	TanStack Query	Smart caching, background refetching, intent-based preload
Styling	Tailwind v4	Zero-config via @tailwindcss/vite, no PostCSS needed
Types	TypeScript strict	Project references, bundler module resolution
Linting	ESLint flat config	strictTypeChecked + query plugin + hooks plugin

Key design decisions

Auto code-splitting

TanStack Router’s autoCodeSplitting: true means every route is automatically chunked — no manual React.lazy() wrappers needed. Combined with Vite’s built-in tree-shaking, only the code for the current page is loaded.

Self-hosted fonts

Fonts are loaded via @fontsource packages (Inter, Manrope, Monaspace Krypton) — zero CDN requests, fully offline-capable, and no GDPR concerns.

OKLch color system

The theme uses OKLch colors defined in theme.css, providing perceptually uniform lightness across the palette. This makes it trivial to create accessible contrast ratios and consistent UI.

Smart QueryClient defaults

// No retry on client errors (4xx)
// 10s stale time
// Intent-based preloading on hover

The QueryClient is configured to avoid hammering the API on user errors while keeping data fresh enough for a real-time feel.

Build optimization

Vendor chunks are split for optimal caching:

Chunk	Contents	Rationale
react-vendor	React + ReactDOM (~140KB gz)	Rarely changes, long cache life
router	TanStack Router	Updates independently from app code
query	TanStack Query	Same — stable library, separate cache

Everything else uses Vite’s automatic chunking plus TanStack Router’s per-route splits.

What’s NOT customized (and why)

These defaults are already optimal and don’t need overriding:

• tsconfig.json — strict mode, ES2020 target, bundler resolution
• eslint.config.js — flat config with all relevant plugins
• Tailwind — v4 @tailwindcss/vite + @theme inline = zero config
• index.html — clean, proper favicon strategy, meta tags
• tw-animate-css — confirmed used by 15+ files for enter/exit animations