Frontend scaffold: Vite + React + TypeScript + Tailwind + TanStack Router #2

Closed
opened 2026-07-18 18:14:50 +00:00 by steve · 0 comments
Owner

Part of epic #20 · Design: DESIGN.md

Context

Pansy is a self-hostable garden planner (Go backend + embedded React frontend, single static binary). This issue creates the web app skeleton in web/ that all frontend issues build on. It matches the stack of the sibling cdfview project: React + TypeScript + Vite + Tailwind.

Scope

  • web/: Vite + React 19 + TypeScript (strict mode).
  • Tailwind 4 via @tailwindcss/vite.
  • @tanstack/react-router with placeholder routes: /login, /register, /gardens, /gardens/$gardenId, /plants. Each renders a stub page.
  • @tanstack/react-query provider at the root; zod installed.
  • web/src/lib/api.ts: small typed fetch wrapper for /api/v1 (JSON in/out, throws a typed error carrying HTTP status and response body — later issues rely on reading 409 conflict bodies from it).
  • Vite dev proxy: /apihttp://localhost:8080.
  • Basic layout shell: top nav with app name + placeholder nav links, viewport meta for mobile, sensible base styles.

Out of scope

  • Real pages, auth logic, and the canvas (issues #6, #8, #9+).
  • Embedding into the Go binary (#3).

Key files & patterns

  • Stack reference: /Users/steve/Projects/cdfview (sibling repo on this machine) — React/TS/Vite/Tailwind conventions.
  • Route/state plan: DESIGN.md § Frontend layout.

Dependencies

None — parallel to #1.

Acceptance criteria

  • cd web && npm run dev serves the shell; client-side navigation between all five routes works.
  • npx tsc --noEmit is clean.
  • npm run build emits web/dist without warnings that matter.
  • Shell renders sensibly at 375px width (phone) and desktop.
Part of epic #20 · Design: [DESIGN.md](https://gitea.stevedudenhoeffer.com/steve/pansy/src/branch/main/DESIGN.md) ## Context Pansy is a self-hostable garden planner (Go backend + embedded React frontend, single static binary). This issue creates the web app skeleton in `web/` that all frontend issues build on. It matches the stack of the sibling `cdfview` project: React + TypeScript + Vite + Tailwind. ## Scope - [ ] `web/`: Vite + React 19 + TypeScript (strict mode). - [ ] Tailwind 4 via `@tailwindcss/vite`. - [ ] `@tanstack/react-router` with placeholder routes: `/login`, `/register`, `/gardens`, `/gardens/$gardenId`, `/plants`. Each renders a stub page. - [ ] `@tanstack/react-query` provider at the root; `zod` installed. - [ ] `web/src/lib/api.ts`: small typed fetch wrapper for `/api/v1` (JSON in/out, throws a typed error carrying HTTP status and response body — later issues rely on reading `409` conflict bodies from it). - [ ] Vite dev proxy: `/api` → `http://localhost:8080`. - [ ] Basic layout shell: top nav with app name + placeholder nav links, `viewport` meta for mobile, sensible base styles. ## Out of scope - Real pages, auth logic, and the canvas (issues #6, #8, #9+). - Embedding into the Go binary (#3). ## Key files & patterns - Stack reference: `/Users/steve/Projects/cdfview` (sibling repo on this machine) — React/TS/Vite/Tailwind conventions. - Route/state plan: `DESIGN.md` § Frontend layout. ## Dependencies None — parallel to #1. ## Acceptance criteria - `cd web && npm run dev` serves the shell; client-side navigation between all five routes works. - `npx tsc --noEmit` is clean. - `npm run build` emits `web/dist` without warnings that matter. - Shell renders sensibly at 375px width (phone) and desktop.
steve added the infrafrontend labels 2026-07-18 18:14:50 +00:00
steve closed this issue 2026-07-18 19:25:30 +00:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: steve/pansy#2