1.9 KiB

Raw Blame History

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

# 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.

1.9 KiB Raw Blame History