{"id":46222600,"url":"https://github.com/andyfrith/dashboard-reactjs-tanstack-trpc-cloudflare","last_synced_at":"2026-03-03T14:53:18.580Z","repository":{"id":334458007,"uuid":"1141339041","full_name":"andyfrith/dashboard-reactjs-tanstack-trpc-cloudflare","owner":"andyfrith","description":"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.","archived":false,"fork":false,"pushed_at":"2026-01-24T22:13:00.000Z","size":260,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-01-25T10:25:54.419Z","etag":null,"topics":["cloudflare","react","tanstack-query","tanstack-router","trpc"],"latest_commit_sha":null,"homepage":"https://dashboard-reactjs-tanstack-trpc-cloudflare.afrith-denver-usa.workers.dev/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/andyfrith.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-01-24T17:25:01.000Z","updated_at":"2026-01-24T22:26:22.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/andyfrith/dashboard-reactjs-tanstack-trpc-cloudflare","commit_stats":null,"previous_names":["andyfrith/dashboard-reactjs-tanstack-trpc-cloudflare"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/andyfrith/dashboard-reactjs-tanstack-trpc-cloudflare","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andyfrith%2Fdashboard-reactjs-tanstack-trpc-cloudflare","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andyfrith%2Fdashboard-reactjs-tanstack-trpc-cloudflare/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andyfrith%2Fdashboard-reactjs-tanstack-trpc-cloudflare/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andyfrith%2Fdashboard-reactjs-tanstack-trpc-cloudflare/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andyfrith","download_url":"https://codeload.github.com/andyfrith/dashboard-reactjs-tanstack-trpc-cloudflare/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andyfrith%2Fdashboard-reactjs-tanstack-trpc-cloudflare/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30050210,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-03T14:38:37.398Z","status":"ssl_error","status_checked_at":"2026-03-03T14:38:06.721Z","response_time":61,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cloudflare","react","tanstack-query","tanstack-router","trpc"],"created_at":"2026-03-03T14:53:17.939Z","updated_at":"2026-03-03T14:53:18.529Z","avatar_url":"https://github.com/andyfrith.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 📊 Full-Stack Dashboard: Vertical Type-Safe Architecture\n\n[![Deployed to: Cloudflare Workers](https://img.shields.io/badge/Deployed_to-Cloudflare_Workers-F38020?style=flat-square\u0026logo=cloudflare\u0026logoColor=white)](https://workers.cloudflare.com/)\n[![Framework: React 19](https://img.shields.io/badge/Framework-React_19-61DAFB?style=flat-square\u0026logo=react)](https://react.dev)\n[![API: tRPC v11](https://img.shields.io/badge/API-tRPC_v11-2596be?style=flat-square\u0026logo=trpc)](https://trpc.io)\n[![UI: shadcn/ui](https://img.shields.io/badge/UI-shadcn/ui-000000?style=flat-square\u0026logo=shadcnui)](https://ui.shadcn.com)\n\nThis 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.\n\n---\n\n## 🏗️ Architecture \u0026 Best Practices\n\nThe library selection in this stack is highly intentional, prioritizing **Edge-native performance** and **Strict Type Integrity**.\n\n### ⚡ The \"Best-in-Class\" Selection\n\n1. **React 19**: Leveraging the latest stable web features, including improved transition handling and the `use()` hook for streamlined data patterns.\n2. **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.\n3. **TanStack Router**: Implements **True Type-Safe Routing**. Search parameters, route IDs, and breadcrumbs are validated at compile-time, eliminating runtime routing errors.\n4. **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.\n5. **TanStack Query v5**: Manages the asynchronous server state with sophisticated caching, optimistic UI updates, and effortless synchronization with tRPC.\n6. **Hono (Cloudflare Workers)**: A lightweight, blazingly fast middleware layer that acts as the high-performance host for our tRPC router at the Edge.\n\n---\n\n## 🛠️ System Design\n\n```mermaid\ngraph LR\n    subgraph Client [Frontend: React 19]\n        TR[TanStack Router] --\u003e TQ[TanStack Query]\n        TQ --\u003e UI[shadcn/ui + Tailwind v4]\n    end\n\n    subgraph Server [Backend: Cloudflare Workers]\n        H[Hono] --\u003e tRPC[tRPC Router]\n        tRPC --\u003e Z[Zod Validation]\n        tRPC --\u003e S[Services/Logic]\n    end\n\n    Client -.-\u003e|Shared Type Inference| Server\n    TQ \u003c==\u003e|tRPC Procedures| tRPC\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandyfrith%2Fdashboard-reactjs-tanstack-trpc-cloudflare","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandyfrith%2Fdashboard-reactjs-tanstack-trpc-cloudflare","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandyfrith%2Fdashboard-reactjs-tanstack-trpc-cloudflare/lists"}