Codewalkers/.planning/phases/16-frontend-scaffold/16-03-PLAN.md

phase, plan, type, wave, depends_on, files_modified, autonomous

phase	plan	type	wave	depends_on	files_modified	autonomous
16-frontend-scaffold	03	execute	2	16-01 16-02	packages/web/package.json packages/web/src/lib/trpc.ts packages/web/src/main.tsx packages/web/tsconfig.app.json	true

Wire tRPC React Query client to connect the frontend to the existing backend server.

Purpose: Enable type-safe data fetching from the Codewalkers backend. All subsequent UI screens (dashboard, detail, inbox) will use these tRPC hooks for data. Output: Working tRPC client with React Query provider, connected to backend via Vite dev proxy.

<execution_context> @/.claude/get-shit-done/workflows/execute-plan.md @/.claude/get-shit-done/templates/summary.md </execution_context>

@.planning/PROJECT.md @.planning/ROADMAP.md @.planning/STATE.md

Backend server runs at 127.0.0.1:3847, tRPC at /trpc/*

@src/server/index.ts

AppRouter type from shared package

@packages/shared/src/trpc.ts

Vite project from Plan 01

@packages/web/vite.config.ts @packages/web/src/main.tsx

Task 1: Install tRPC React Query dependencies packages/web/package.json, packages/web/tsconfig.app.json 1. Install in packages/web: - Dependencies: `@trpc/client`, `@trpc/react-query`, `@tanstack/react-query` - Add `@codewalk-district/shared` as a workspace dependency: `"@codewalk-district/shared": "*"`

2. Update packages/web/tsconfig.app.json:

   • Add project reference to shared package: "references": [{ "path": "../shared" }]
   • Ensure paths can resolve @codewalk-district/shared (npm workspaces handles this via node_modules symlink)

3. Run npm install from root. npm ls @trpc/react-query --workspace=packages/web shows installed version. tRPC and React Query packages installed. Shared package linked.

Task 2: Create tRPC client and provider packages/web/src/lib/trpc.ts, packages/web/src/main.tsx 1. Create `packages/web/src/lib/trpc.ts`: ```typescript import { createTRPCReact } from '@trpc/react-query'; import { httpBatchLink } from '@trpc/client'; import type { AppRouter } from '@codewalk-district/shared';

export const trpc = createTRPCReact();

export function createTRPCClient() { return trpc.createClient({ links: [ httpBatchLink({ // In dev, Vite proxy forwards /trpc to backend // In prod, same-origin or configured URL url: '/trpc', }), ], }); }

2. Update `packages/web/src/main.tsx` to wrap App with providers:
```typescript
import React, { useState } from 'react';
import ReactDOM from 'react-dom/client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { trpc, createTRPCClient } from './lib/trpc';
import App from './App';
import './index.css';

function Root() {
  const [queryClient] = useState(() => new QueryClient({
    defaultOptions: {
      queries: {
        refetchOnWindowFocus: false,
        retry: 1,
      },
    },
  }));
  const [trpcClient] = useState(createTRPCClient);

  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        <App />
      </QueryClientProvider>
    </trpc.Provider>
  );
}

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <Root />
  </React.StrictMode>
);

3. Update packages/web/src/App.tsx to verify tRPC works:

   import { trpc } from './lib/trpc';
   
   function App() {
     const health = trpc.health.useQuery();
   
     return (
       <div className="p-8">
         <h1 className="text-2xl font-bold">Codewalkers</h1>
         <p className="text-muted-foreground mt-2">
           Server: {health.data?.status ?? 'connecting...'}
         </p>
       </div>
     );
   }
   
   export default App;
   

This App component is temporary — Phase 17+ will replace it. It exists to prove the tRPC connection works end-to-end. cd packages/web && npx vite build succeeds (type-checks tRPC client against AppRouter). tRPC client created with httpBatchLink. React Query provider wraps app. Build passes with type-safe router inference.

Before declaring plan complete: - [ ] `cd packages/web && npx vite build` succeeds - [ ] `trpc.health.useQuery()` type-checks correctly - [ ] tRPC client configured with `/trpc` URL (proxied by Vite in dev) - [ ] React Query provider configured with sensible defaults

<success_criteria>

• tRPC React Query client wired to AppRouter type
• React Query provider wraps application
• Build passes with full type inference
• Vite proxy configured for /trpc → backend </success_criteria>

After completion, create `.planning/phases/16-frontend-scaffold/16-03-SUMMARY.md`