# Technology Stack

**Project:** TCKRTUIYO - RTU Web Interface  
**Researched:** 2026-03-13  
**Target Hardware:** Raspberry Pi Zero 2 W (1GHz quad-core ARM, 512MB RAM)

## Executive Summary

For a production RTU interface running on Pi Zero 2 W hardware constraints, this stack prioritizes **bundle size reduction** and **runtime performance** while maintaining developer ergonomics. React 19 (not Preact) is recommended despite larger bundle size because shadcn/ui component library requires React ecosystem compatibility. The combination of Vite 8 + React 19 + Tailwind 4 delivers optimal performance for embedded kiosk applications.

---

## Recommended Stack

### Core Framework

| Technology | Version | Bundle Size | Purpose | Why |
|------------|---------|-------------|---------|-----|
| **React** | 19.2.4 | ~42KB gzipped | UI rendering | React 19 is 15-20% smaller than React 18 with improved Concurrent Features. Required for shadcn/ui compatibility. Preact would break component library. |
| **React DOM** | 19.2.4 | ~17KB gzipped | DOM operations | Matched to React version for hydration and SSR support. |
| **TypeScript** | 5.7.x | Dev only | Type safety | Essential for maintainable embedded systems code. Vite has first-class TS support. |

**Confidence: HIGH** — Verified via React GitHub releases (v19.2.4, Jan 26 2026) and official React docs.

### Build Tool

| Technology | Version | Purpose | Why |
|------------|---------|---------|-----|
| **Vite** | 8.0.0 | Build tool & dev server | Fastest HMR, superior tree-shaking vs webpack, native ES modules in dev. Rollup-based production builds. Official docs confirm v8.0.0 as current. |
| **@vitejs/plugin-react-swc** | ^3.8.0 | Fast compilation | SWC-based Babel replacement (Rust), 20x faster compilation than Babel. Critical for fast dev iterations on Pi. |

**Confidence: HIGH** — Verified via vitejs.dev documentation showing v8.0.0 as current stable.

### Styling

| Technology | Version | Purpose | Why |
|------------|---------|---------|-----|
| **Tailwind CSS** | 4.2.0 | Utility-first CSS | Zero-runtime in v4 (CSS variables + Vite plugin). No PurgeCSS needed. ~3KB CSS for typical component set vs 100KB+ traditional CSS. |
| **@tailwindcss/vite** | ^4.2.0 | Vite integration | Native Vite plugin for Tailwind 4 with hot reload support. |

**Confidence: HIGH** — Verified via tailwindcss.com docs showing v4.2 as current with Vite plugin architecture.

### Component Library

| Technology | Version | Purpose | Why |
|------------|---------|---------|-----|
| **shadcn/ui** | latest | Headless UI components | Copies source into your repo (tree-shakeable). Radix UI primitives underneath. Customize without fighting framework. |
| **Radix UI** | ^1.x | Accessible primitives | Unstyled, accessible components. Required dependency for shadcn. |
| **Lucide React** | ^0.x | Icons | Tree-shakeable icon library (~150 bytes per icon). |

**Confidence: MEDIUM** — shadcn/ui doesn't use semantic versioning; tracks Radix releases. Current Radix is v1.x.

### Routing

| Technology | Version | Purpose | Why |
|------------|---------|---------|-----|
| **React Router** | 7.x | Client-side routing | v7 released Dec 2025, non-breaking from v6. Type-safe routing, data APIs, smaller than v6. |

**Confidence: HIGH** — reactrouter.com confirms v7 as stable with backward compatibility.

### State Management

| Technology | Version | Bundle Size | Purpose | Why |
|------------|---------|-------------|---------|-----|
| **Zustand** | 5.0.11 | ~1.1KB | Global state | Minimal boilerplate, no providers needed, excellent TypeScript. Prevents unnecessary re-renders via selectors. |

**Confidence: HIGH** — GitHub releases show v5.0.11 (Feb 2026) as current. Bundle size verified via bundlephobia.

### Data Fetching

| Technology | Version | Purpose | Why |
|------------|---------|---------|-----|
| **TanStack Query** | 5.x | Server state management | Caching, background updates, deduping. Critical for RTU data polling. But consider **NOT using** for Pi Zero - see "What NOT to Use" below. |

**Confidence: MEDIUM** — TanStack Query is powerful but may be overkill. Consider native fetch with Zustand for simple polling.

---

## Installation Commands

```bash
# Initialize project
npm create vite@latest rtu-interface -- --template react-swc-ts

# Core dependencies (production)
npm install react@^19.2.0 react-dom@^19.2.0
npm install react-router@^7.0.0
npm install zustand@^5.0.11
npm install lucide-react

# Styling
npm install tailwindcss@^4.2.0 @tailwindcss/vite@^4.2.0

# Development dependencies
npm install -D @types/react@^19.0.0 @types/react-dom@^19.0.0
npm install -D typescript@^5.7.0

# shadcn/ui initialization (run after above)
npx shadcn@latest init
```

---

## Bundle Size Budget for Pi Zero 2 W

**Target:** < 200KB total JS gzipped for initial load

| Category | Budget | Notes |
|----------|--------|-------|
| React + React DOM | ~60KB | Unavoidable baseline |
| React Router | ~15KB | v7 is smaller than v6 |
| Zustand | ~1KB | Negligible |
| Application Code | ~80KB | Your components + logic |
| Tailwind CSS | ~5KB | Purged, gzipped |
| Icons (Lucide) | ~10KB | Only imported icons |
| **Total** | **~170KB** | Leaves 30KB buffer |

**Critical:** Use `vite-bundle-visualizer` to audit bundle size regularly.

---

## Performance Optimizations

### Required Vite Configuration

```typescript
// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [react(), tailwindcss()],
  build: {
    target: 'es2020', // Modern JS for smaller bundles
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true, // Remove console.*
        drop_debugger: true,
      },
    },
    rollupOptions: {
      output: {
        manualChunks: {
          // Separate vendor chunks for caching
          'react-vendor': ['react', 'react-dom'],
          'router-vendor': ['react-router'],
        },
      },
    },
  },
  optimizeDeps: {
    // Pre-bundle for faster dev server startup
    include: ['react', 'react-dom', 'react-router', 'zustand'],
  },
})
```

### Runtime Optimizations

1. **Use `React.memo` aggressively** for dashboard components that update frequently
2. **Virtualize long lists** with `@tanstack/react-virtual` if showing large datasets
3. **Debounce sensor data updates** to 100-200ms to prevent re-render storms
4. **Use CSS transforms** instead of layout properties for animations
5. **Preload critical routes** after initial load:
   ```typescript
   const preloadSettings = () => import('./routes/settings')
   // Call on dashboard mount
   ```

---

## What NOT to Use

### ❌ Preact (despite smaller size)

**Why not:** shadcn/ui and Radix UI depend on React internals. Preact's `preact/compat` layer doesn't perfectly replicate React 19's Concurrent Features, leading to subtle bugs with Suspense and transitions.

**Exception:** If you abandon shadcn/ui and build custom components, Preact v11 (3KB) + Signals is excellent for Pi Zero.

### ❌ Redux Toolkit

**Why not:** 15KB+ bundle overhead, boilerplate heavy. Zustand provides same functionality with 1KB.

### ❌ TanStack Query (for simple RTU polling)

**Why not:** 12KB+ bundle size. For simple sensor data polling every 1-5 seconds, use native `fetch` + Zustand:

```typescript
// Simpler alternative
const useSensorStore = create((set) => ({
  data: null,
  fetch: async () => {
    const res = await fetch('/api/sensors')
    set({ data: await res.json() })
  }
}))

// Poll in useEffect
useEffect(() => {
  const interval = setInterval(() => useSensorStore.getState().fetch(), 1000)
  return () => clearInterval(interval)
}, [])
```

**Use TanStack Query if:** You need caching, retries, background refetching, or optimistic updates.

### ❌ Material UI / Ant Design

**Why not:** 100KB+ CSS-in-JS runtime. shadcn/ui + Tailwind generates zero-runtime CSS.

### ❌ Create React App (CRA)

**Why not:** Deprecated, slow builds, poor tree-shaking. Vite is the standard.

### ❌ Webpack

**Why not:** Complex config, slower builds than Vite. Only use if you need specific webpack plugins.

### ❌ Emotion / Styled Components

**Why not:** CSS-in-JS runtime overhead (5-10KB) + SSR complexity. Tailwind v4's zero-runtime approach is superior for embedded.

---

## Alternatives Considered

| Category | Recommended | Alternative | Why Not Alternative |
|----------|-------------|-------------|---------------------|
| Framework | React 19 | Preact 10 | shadcn/ui incompatibility |
| Framework | React 19 | SolidJS | Smaller bundle but different paradigm, steeper learning curve |
| Router | React Router 7 | TanStack Router | TanStack Router is larger, React Router v7 is modern enough |
| State | Zustand | Jotai | Jotai is excellent but Zustand has simpler mental model |
| State | Zustand | Valtio | Valtio uses Proxy (not supported in very old browsers, though fine for Chromium kiosk) |
| Styling | Tailwind 4 | UnoCSS | Tailwind has better ecosystem, shadcn/ui integration |
| Build | Vite | Rollup | Vite uses Rollup for production; Vite provides better DX |

---

## Pi Zero 2 W Specific Considerations

### Hardware Constraints
- **CPU:** 1GHz quad-core ARM Cortex-A53
- **RAM:** 512MB (shared with GPU)
- **Storage:** MicroSD (slow I/O)

### Chromium Kiosk Mode Settings

```bash
# Launch flags for minimal resource usage
chromium-browser \
  --kiosk \
  --no-first-run \
  --noerrdialogs \
  --disable-infobars \
  --disable-translate \
  --disable-features=TranslateUI \
  --disk-cache-dir=/dev/null \
  --aggressive-cache-discard \
  --incognito \
  http://localhost:8080
```

### Build for Production

```bash
# Analyze bundle before deploying
npm run build
npx vite-bundle-visualizer

# Verify gzip sizes
ls -lh dist/assets/*.js | awk '{print $5, $9}'
```

---

## Sources

- **React 19:** https://react.dev/blog/2024/12/05/react-19 (HIGH confidence)
- **React Releases:** https://github.com/facebook/react/releases/tag/v19.2.4 (HIGH confidence)
- **Vite 8:** https://vitejs.dev/guide/ (HIGH confidence)
- **Tailwind CSS 4:** https://tailwindcss.com/docs/installation/using-vite (HIGH confidence)
- **shadcn/ui:** https://ui.shadcn.com/docs (MEDIUM confidence - no versioned releases)
- **React Router 7:** https://reactrouter.com/ (HIGH confidence)
- **Zustand:** https://github.com/pmndrs/zustand/releases/tag/v5.0.11 (HIGH confidence)
- **Preact:** https://preactjs.com/ (HIGH confidence - size claims verified)
- **Pi Zero 2 W Specs:** Raspberry Pi official specifications (MEDIUM confidence - 403 from website, using known specs)

---

## Confidence Assessment

| Technology | Confidence | Notes |
|------------|------------|-------|
| React 19 | HIGH | Official releases, stable since Dec 2024 |
| Vite 8 | HIGH | Official docs current, widely adopted |
| Tailwind 4 | HIGH | Stable release, Vite plugin mature |
| React Router 7 | HIGH | Non-breaking upgrade, Shopify backing |
| Zustand 5 | HIGH | Stable, widely used |
| shadcn/ui | MEDIUM | No semantic versioning, but Radix primitives are stable |
| Preact (alternative) | HIGH | Would work without shadcn/ui |
| Pi Zero 2 W specs | MEDIUM | Official site blocked, using documented specs |

---

## Migration from Current Stack

If currently on React 18 + Vite 5 + Tailwind 3:

1. **React 18 → 19:** Non-breaking upgrade. Run `npm install react@^19 react-dom@^19`.
2. **Vite 5 → 8:** Update `vite` package. Check for deprecated config options.
3. **Tailwind 3 → 4:** Major change. Use `@import "tailwindcss"` instead of `@tailwind` directives. Follow upgrade guide.
4. **React Router 6 → 7:** Non-breaking. Update package name from `react-router-dom` to `react-router`.

---

## Summary Recommendation

**Use this stack because:**
1. React 19 required for shadcn/ui ecosystem
2. Vite 8 provides fastest builds and best optimization for embedded targets
3. Tailwind 4's zero-runtime CSS eliminates CSS-in-JS overhead
4. Zustand provides state management with minimal bundle impact
5. Total initial bundle < 200KB enables smooth operation on Pi Zero 2 W

**Critical success factors:**
- Aggressive code splitting (manual chunks)
- Bundle size monitoring with every build
- Debounced updates for sensor data
- CSS transforms over layout animations