feat: add React frontend with search and mod pages
Add apps/web (Vite + React Router + Tailwind v4 + Zustand) with a search page and a mod page that analyzes saves via @tts/extract. Document the frontend in the README and docs.
This commit is contained in:
+14
-5
@@ -27,6 +27,7 @@ shared types/validation package.
|
||||
|
||||
| Package | Role | Runtime |
|
||||
| ------------------ | ------------------------------------------- | ------------ |
|
||||
| `apps/web` | React frontend: search + mod pages | Browser |
|
||||
| `apps/proxy` | Hono HTTP server: search + fetch endpoints | Node |
|
||||
| `packages/tts` | Fetch save from Steam, BSON-parse to `TTSMod` | Node |
|
||||
| `packages/extract` | Analyze a `TTSMod`: objects, refs, assets | Isomorphic |
|
||||
@@ -35,15 +36,19 @@ shared types/validation package.
|
||||
## Dependency graph
|
||||
|
||||
```
|
||||
apps/proxy ──► packages/tts ──► packages/shared
|
||||
│ │
|
||||
│ └──► (fetchMod → TTSMod)
|
||||
▼
|
||||
packages/extract ──► packages/tts (traverseMod) ──► packages/shared (types)
|
||||
apps/web ──► apps/proxy ──► packages/tts ──► packages/shared
|
||||
│ │ │
|
||||
│ │ └──► (fetchMod → TTSMod)
|
||||
│ ▼
|
||||
└──► packages/extract ──► packages/shared (types)
|
||||
```
|
||||
|
||||
### Edges
|
||||
|
||||
- **`apps/web` → `apps/proxy`** — calls `/search`, `/items/:id`, and
|
||||
`/items/:id/file` over HTTP.
|
||||
- **`apps/web` → `packages/extract`** — uses `flattenObjects` / `collectRefs`
|
||||
to analyze a loaded `TTSMod` in the browser.
|
||||
- **`apps/proxy` → `packages/tts`** — calls `fetchMod` / `getFileName` to serve
|
||||
item requests.
|
||||
- **`apps/proxy` → `packages/shared`** — uses shared types and zod schemas for
|
||||
@@ -90,11 +95,15 @@ packages/extract ──► packages/tts (traverseMod) ──► packages/shared
|
||||
|
||||
- `typescript` (strict), `tsx` (dev runner), `eslint`, `prettier`.
|
||||
- `vitest` (unit tests), colocated as `*.test.ts` next to sources.
|
||||
- `vite`, `@vitejs/plugin-react`, `tailwindcss`, `@tailwindcss/vite` — frontend
|
||||
build/dev tooling.
|
||||
- `pnpm` workspaces for package management.
|
||||
|
||||
## Deployment / runtime shape
|
||||
|
||||
- The proxy runs as a single Node process via `@hono/node-server`.
|
||||
- `apps/web` is a static Vite build served separately; during development it
|
||||
proxies `/search`, `/items`, and `/health` to the proxy.
|
||||
- `packages/extract` is published/consumed as a plain ESM module usable from a
|
||||
browser bundle or Node.
|
||||
- No shared state between requests; each request fetches fresh.
|
||||
Reference in New Issue
Block a user