https://github.com/andyfrith/dashboard-reactjs-tanstack-trpc-cloudflare

A blueprint for Vertical Type Safety. It demonstrates a production-grade dashboard where types flow uninterrupted from the Cloudflare Edge to the React 19 frontend, utilizing a hand-picked stack of industry-leading libraries for maximum performance and developer velocity.
https://github.com/andyfrith/dashboard-reactjs-tanstack-trpc-cloudflare

cloudflare react tanstack-query tanstack-router trpc

Last synced: 3 months ago
JSON representation

A blueprint for Vertical Type Safety. It demonstrates a production-grade dashboard where types flow uninterrupted from the Cloudflare Edge to the React 19 frontend, utilizing a hand-picked stack of industry-leading libraries for maximum performance and developer velocity.

• Host: GitHub
• URL: https://github.com/andyfrith/dashboard-reactjs-tanstack-trpc-cloudflare
• Owner: andyfrith
• Created: 2026-01-24T17:25:01.000Z (4 months ago)
• Default Branch: master
• Last Pushed: 2026-01-24T22:13:00.000Z (4 months ago)
• Last Synced: 2026-01-25T10:25:54.419Z (4 months ago)
• Topics: cloudflare, react, tanstack-query, tanstack-router, trpc
• Language: TypeScript
• Homepage: https://dashboard-reactjs-tanstack-trpc-cloudflare.afrith-denver-usa.workers.dev/
• Size: 254 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 📊 Full-Stack Dashboard: Vertical Type-Safe Architecture

[![Deployed to: Cloudflare Workers](https://img.shields.io/badge/Deployed_to-Cloudflare_Workers-F38020?style=flat-square&logo=cloudflare&logoColor=white)](https://workers.cloudflare.com/)

[![Framework: React 19](https://img.shields.io/badge/Framework-React_19-61DAFB?style=flat-square&logo=react)](https://react.dev)

[![API: tRPC v11](https://img.shields.io/badge/API-tRPC_v11-2596be?style=flat-square&logo=trpc)](https://trpc.io)

[![UI: shadcn/ui](https://img.shields.io/badge/UI-shadcn/ui-000000?style=flat-square&logo=shadcnui)](https://ui.shadcn.com)

This repository serves as a blueprint for **Vertical Type Safety**. It demonstrates a production-grade dashboard where types flow uninterrupted from the Cloudflare Edge to the React 19 frontend, utilizing a hand-picked stack of industry-leading libraries for maximum performance and developer velocity.

---

## 🏗️ Architecture & Best Practices

The library selection in this stack is highly intentional, prioritizing **Edge-native performance** and **Strict Type Integrity**.

### ⚡ The "Best-in-Class" Selection

1. **React 19**: Leveraging the latest stable web features, including improved transition handling and the `use()` hook for streamlined data patterns.

2. **tRPC v11**: Bridges the gap between client and server without code generation. By importing the server's `AppRouter` type, the client gains full IDE autocompletion for every API procedure.

3. **TanStack Router**: Implements **True Type-Safe Routing**. Search parameters, route IDs, and breadcrumbs are validated at compile-time, eliminating runtime routing errors.

4. **shadcn/ui + Tailwind v4**: Built on Radix UI primitives, this provides a collection of accessible, beautifully designed components that you own. Tailwind v4 brings a simplified, high-performance CSS engine.

5. **TanStack Query v5**: Manages the asynchronous server state with sophisticated caching, optimistic UI updates, and effortless synchronization with tRPC.

6. **Hono (Cloudflare Workers)**: A lightweight, blazingly fast middleware layer that acts as the high-performance host for our tRPC router at the Edge.

---

## 🛠️ System Design

```mermaid

graph LR

    subgraph Client [Frontend: React 19]

        TR[TanStack Router] --> TQ[TanStack Query]

        TQ --> UI[shadcn/ui + Tailwind v4]

    end

    subgraph Server [Backend: Cloudflare Workers]

        H[Hono] --> tRPC[tRPC Router]

        tRPC --> Z[Zod Validation]

        tRPC --> S[Services/Logic]

    end

    Client -.->|Shared Type Inference| Server

    TQ <==>|tRPC Procedures| tRPC

```