77 lines
1.9 KiB
Markdown
77 lines
1.9 KiB
Markdown
# 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.
|