kindred/silo
1
1
Fork 0
Code Issues 29 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(web): scaffold React + Vite + TypeScript app with shared layout, auth, and API client #7

New Issue
Closed
opened 2026-02-06 20:43:25 +00:00 by forbes · 0 comments
forbes commented 2026-02-06 20:43:25 +00:00
Owner
Copy Link

Phase 1 of #6 — Frontend Migration

Goal

Set up the React + Vite + TypeScript project in web/, establish the shared infrastructure that all pages will use, and serve it alongside the existing Go templates so both can run during the transition.

Tasks

Project Setup

  • Initialize Vite + React + TypeScript project in web/
  • Configure Vite dev server to proxy /api/* to Go backend (port 8080)
  • Add web/ build targets to Makefile (make web-dev, make web-build)
  • Configure Go server to serve web/dist/ static files at a prefix (e.g. /app/) during transition
  • Add web/ to .gitignore for node_modules/, dist/

Catppuccin Mocha Theme

  • Create theme constants file with all Catppuccin Mocha color tokens as CSS variables
  • Set up global styles: dark background, font stack, scrollbar styling
  • Match existing look and feel — same nav bar, same color palette

Auth Integration

  • Create useAuth hook that calls GET /api/auth/me to get current user/role
  • Create AuthProvider context for app-wide auth state
  • Create LoginPage component (username/password form, OIDC redirect button)
  • Handle 401 responses globally — redirect to login
  • Support dev mode (auth disabled — synthetic user)

API Client

  • Create typed API client module (web/src/api/) with fetch wrapper
  • Add TypeScript interfaces for all API response types (Item, Revision, Project, Schema, BOM, etc.)
  • Add request/response interceptors for auth token injection and error handling
  • Type the major endpoints: items, projects, schemas, revisions, BOM, audit

Router and Shell

  • Set up React Router with routes: /, /projects, /schemas, /audit, /settings, /login
  • Create AppShell layout component with navigation bar matching current 4-tab design
  • Add role-based route guards (viewer/editor/admin)
  • Add active tab highlighting based on current route

Placeholder Pages

  • Create placeholder components for each route (Items, Projects, Schemas, Settings, Audit)
  • Each placeholder should call one API endpoint to prove the API client works

Acceptance Criteria

  • npm run dev starts Vite dev server, proxies API calls to Go backend
  • npm run build produces static assets in web/dist/
  • Navigation between placeholder pages works
  • Auth flow works: login, logout, role display, 401 redirect
  • API client can fetch and display items list (even as raw JSON)
  • Catppuccin Mocha theme visually matches existing pages

Dependencies

None — this phase is independent of the Go templates. Both old and new UIs can coexist.

## Phase 1 of #6 — Frontend Migration ### Goal Set up the React + Vite + TypeScript project in `web/`, establish the shared infrastructure that all pages will use, and serve it alongside the existing Go templates so both can run during the transition. ### Tasks #### Project Setup - [ ] Initialize Vite + React + TypeScript project in `web/` - [ ] Configure Vite dev server to proxy `/api/*` to Go backend (port 8080) - [ ] Add `web/` build targets to Makefile (`make web-dev`, `make web-build`) - [ ] Configure Go server to serve `web/dist/` static files at a prefix (e.g. `/app/`) during transition - [ ] Add `web/` to `.gitignore` for `node_modules/`, `dist/` #### Catppuccin Mocha Theme - [ ] Create theme constants file with all Catppuccin Mocha color tokens as CSS variables - [ ] Set up global styles: dark background, font stack, scrollbar styling - [ ] Match existing look and feel — same nav bar, same color palette #### Auth Integration - [ ] Create `useAuth` hook that calls `GET /api/auth/me` to get current user/role - [ ] Create `AuthProvider` context for app-wide auth state - [ ] Create `LoginPage` component (username/password form, OIDC redirect button) - [ ] Handle 401 responses globally — redirect to login - [ ] Support dev mode (auth disabled — synthetic user) #### API Client - [ ] Create typed API client module (`web/src/api/`) with fetch wrapper - [ ] Add TypeScript interfaces for all API response types (Item, Revision, Project, Schema, BOM, etc.) - [ ] Add request/response interceptors for auth token injection and error handling - [ ] Type the major endpoints: items, projects, schemas, revisions, BOM, audit #### Router and Shell - [ ] Set up React Router with routes: `/`, `/projects`, `/schemas`, `/audit`, `/settings`, `/login` - [ ] Create `AppShell` layout component with navigation bar matching current 4-tab design - [ ] Add role-based route guards (viewer/editor/admin) - [ ] Add active tab highlighting based on current route #### Placeholder Pages - [ ] Create placeholder components for each route (Items, Projects, Schemas, Settings, Audit) - [ ] Each placeholder should call one API endpoint to prove the API client works ### Acceptance Criteria - `npm run dev` starts Vite dev server, proxies API calls to Go backend - `npm run build` produces static assets in `web/dist/` - Navigation between placeholder pages works - Auth flow works: login, logout, role display, 401 redirect - API client can fetch and display items list (even as raw JSON) - Catppuccin Mocha theme visually matches existing pages ### Dependencies None — this phase is independent of the Go templates. Both old and new UIs can coexist.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
forbes
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: kindred/silo#7
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?