# Recipe Manager - Frontend

React + TypeScript frontend for the Recipe Manager application.

## Tech Stack

- **React 19** - UI framework
- **TypeScript** - Type safety
- **Vite** - Build tool and dev server
- **React Router 7** - Client-side routing

## Development

```bash
# Install dependencies
npm install

# Start dev server (http://localhost:5173)
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Lint code
npm run lint

# Style governance checks (token/primitive drift guardrails)
npm run style:guardrails
npm run style:check
```

## Project Structure

```
src/
├── components/     # Reusable UI components
├── hooks/          # Custom React hooks
├── pages/          # Route pages
├── services/       # API client and business logic
├── types/          # TypeScript interfaces
├── App.tsx         # Root component
└── main.tsx        # Application entry point
```

## Next Steps

- [ ] Configure Tailwind CSS
- [ ] Set up React Router
- [ ] Create recipe list page
- [ ] Create recipe detail/edit page
- [ ] Implement cook mode UI

## Architecture

See `/ARCHITECTURE.md` for full system architecture and patterns.


## Visual Assets + Fallbacks

- Visual asset definitions live in `src/assets/visualAssets.ts`.
- The homepage hero uses a fallback chain: bundled `hero.png` first, then `/images/hero-fallback.svg`.
- Keep fallback assets lightweight (SVG preferred) and store browser-served fallbacks under `public/images/`.
- Any new UI-critical image should follow the same fallback pattern to avoid broken-image regressions in production.

## Styling Guardrails

This frontend uses a token + primitive styling contract.

- Governance doc: `../.harness/docs/styling-governance.md`
- Token contract: `../.harness/docs/styling-token-contract.md`
- Primitive contract: `../.harness/docs/ui-primitive-contract.md`

Use `npm run style:guardrails` before PRs touching app shell/shared UI surfaces.