---
# quotesdb-xqh3
title: Implement ui/src/main.rs — Yew app shell, BrowserRouter, route definitions for all 5 pages
status: completed
type: task
priority: critical
created_at: 2026-03-10T23:32:05Z
updated_at: 2026-03-10T23:32:12Z
blocked_by:
    - quotesdb-kaat
    - quotesdb-wvb8
    - quotesdb-wlpv
---

<context>
The `quotesdb` UI is a Yew (Rust → Wasm) single-page app compiled by Trunk and hosted on Cloudflare Pages. It communicates with the backend API via `fetch` calls. Source lives in `src/bin/ui/`. Run with `trunk serve` for local development.

The five frontend routes are:
- `/` — Home (random quote)
- `/browse` — Paginated quote list
- `/quotes/:id` — Single quote view/edit/delete
- `/author/:name` — All quotes by an author
- `/submit` — New quote form
</context>

<goal>
Implement `src/bin/ui/main.rs` — the Yew app shell and router:
1. Set up `BrowserRouter` (from yew-router)
2. Define a `Route` enum for all five routes
3. Render each route to its respective page component (stubs are fine initially)
4. Mount the app to the `#app` div in `index.html`
</goal>

<constraints>
- Resolve TRIAGE ticket 166996 (Yew/yew-router version) before starting.
- The `Route` enum must be exhaustive — all five routes listed above.
- Page components can be stubs (`html! { <p>"Home"</p> }`) in this ticket; full implementation is in separate tickets.
</constraints>

<validation>
From the `quotesdb/` directory:

```sh
trunk build
```
</validation>

<commit>
`feat(quotesdb): implement Yew app shell and BrowserRouter with all 5 routes`
</commit>