Refine

# MISSION: Scaffold "Refine" Production Architecture
You are an expert Senior Staff Software Architect and Full-Stack Engineer. Your mission is to scaffold and implement a production-grade, highly reliable, and modular codebase following the proven architecture of **Refine**.
---
## 1. PROJECT SPECIFICATIONS & BENCHMARK
- **Reference Architecture**: Refine
- **What It Does**: Refine is an open-source React framework for building internal tools, admin panels, dashboards, and B2B applications with headless flexibility.
- **Domain & Category**: Enterprise Internal Tool & CRUD Framework
- **Production Scale**: 20+ People
- **Development Mode**: HYBRID
- **Architectural Rationale**: Decoupling CRUD state and data fetching from UI design systems enables developers to build customized enterprise dashboards rapidly without framework lock-in.
- **Live Website Reference**: https://refine.dev
- **Source Repository**: https://github.com/refinedev/refine
---
## 2. PRODUCTION TECH STACK
- **Full Stack Array**: React, TypeScript, TanStack Query, Tailwind CSS, pnpm, GraphQL, Next.js
- **Primary Language(s)**: TypeScript, JavaScript, CSS
- **License of the reference repo**: MIT
- **Frontend**: React — Headless hook architecture delivering CRUD controllers, form bindings, and table state.; TypeScript — Strict type safety across data provider contracts, resource definitions, and UI adapters.; TanStack Query — Powers asynchronous data synchronization, caching, background refetching, and pagination.; Tailwind CSS — Utility-first CSS styling powering documentation and headless UI starter templates.
- **Backend & APIs**: Next.js — First-class framework integration providing server-side rendering and App Router compatibility.; GraphQL — Data provider adapters for Hasura, Strapi, and custom GraphQL APIs.
- **Infrastructure & deploy**: pnpm — Monorepo workspace package manager linking core libraries, UI adapters, and example apps.; Cypress — End-to-end browser test automation suite in cypress/ verifying interactive user journeys.
---
## 3. KEY ARCHITECTURAL DECISIONS (audited from https://github.com/refinedev/refine @ 2352eb5)
1. **Headless core architecture decoupled from UI presentation**: Refine splits business logic from the view layer: packages/core provides pure headless hooks (useTable, useForm, useList) while packages/antd, packages/mui, and packages/chakra-ui offer optional design system adapters.
2. **Pluggable data provider contract for universal backend integration**: All communication routes through an abstract DataProvider interface (getList, getOne, create, update, delete). Developers can swap between REST, GraphQL, Supabase, Strapi, or NestJS without altering application views.
3. **TanStack Query as the server-state backbone**: Refine adopts TanStack Query (@tanstack/react-query in packages/core) for caching, automatic cache invalidation on mutations, optimistic updates, and background re-validation.
4. **Granular AccessControlProvider for declarative RBAC**: Permissions and role-based access control are enforced via an access control provider interface, checking canAccess rules before rendering navigation items, buttons, or data columns.
5. **Framework agnostic: Vite, Next.js, and Remix support**: The core framework does not enforce a specific bundler or router, providing dedicated router packages for React Router v6, Next.js Pages/App Router, and Remix.
---
## 4. NON-NEGOTIABLE ARCHITECTURAL GUARDRAILS
1. **Monorepo & Modular Separation**:
   - Structure as a Turborepo monorepo with strict package boundaries:
     - `apps/web`: Application UI, routing, layouts, and server endpoints.
     - `packages/ui`: Shared design tokens, CSS variables, and Radix UI primitive components.
     - `packages/db`: Database schemas, client singleton, declarative migrations, and seed scripts.
     - `packages/config`: Shared TypeScript, ESLint, and build configurations.
2. **Strict Type Safety & Zero `any` Policy**:
   - Enable `strict: true`, `noImplicitAny: true`, and `strictNullChecks: true`.
   - Validate ALL external inputs, API request bodies, and query parameters with **Zod** schemas before execution.
3. **Frontend & Rendering Guidelines**:
   - Utilize Next.js 15 App Router: default to React Server Components (RSC) for data fetching. Handle mutations through Server Actions with Zod validation. Keep 'use client' directives restricted strictly to interactive leaf components.
4. **Design System & Aesthetics**:
   - Keep every color, radius, shadow and font in a single token file (CSS variables) and consume tokens everywhere; never hardcode hex values in components.
   - Prefer crisp 1px borders and one subtle shadow scale over blurry default shadows. Pair one sans-serif for body/headings with one monospace for tags, badges, metrics, and code.
5. **Data Layer & Reliability**:
   - Write declarative schema definitions with foreign keys, composite indexes on queried filters, and automated timestamp triggers.
   - Use connection pooling and prepared statements for serverless database execution.
---
## 5. STEP-BY-STEP SCAFFOLDING ROADMAP
- **Phase 1: Workspace & Root Config**: Initialize package manager, monorepo configuration (`turbo.json`, `tsconfig.base.json`, `package.json`).
- **Phase 2: Database Schema & Client**: Set up the data layer: client, connection pool, models, and migration scripts.
- **Phase 3: Design Tokens & UI Primitives**: Build accessible `Button`, `Input`, `Card`, `Badge`, and layout wrappers inside `packages/ui`.
- **Phase 4: Core Application Routes & Handlers**: Implement primary authentication, user session handling, and application routes.
- **Phase 5: Quality Assurance & Build Verification**: Run `tsc --noEmit`, ESLint, Prettier, and smoke test suites to ensure zero compilation or runtime errors.
---
## 6. EXECUTION INSTRUCTIONS
1. Review all specifications, architectural guardrails, and stack choices above.
2. Present the full monorepo directory tree structure.
3. Systematically generate the complete, production-ready codebase according to the 5-phase roadmap above — starting with the root workspace setup, followed by the database schema, UI design system package, and full-stack application routes until the repository is fully scaffolded and ready to run.