paulh
/
recipe-manager
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
recipe-manager/frontend
History
Paul Huliganga 8b729d7fc4 chore(backend): implement high-priority improvements from code review 
- Configuration: dotenv support, env vars for PORT, DB_PATH, CORS_ORIGIN, rate limits
- Security: API key auth for write endpoints, rate limiting on import, configurable CORS, image URL normalization
- Reliability: DB transactions for create/update, dirty flag for saves, foreign key enforcement (PRAGMA), duplicate detection O(1) optimization
- Features: health check endpoint (/api/health)
- Bugfix: corrected tag assignment/removal routes (param order)
- Testing: added tests for PUT/DELETE recipes, tag CRUD and assignment, enabled foreign keys in tests
- All 46 backend tests passing

Closes #<ticket-if-any>
 		2026-03-29 23:11:27 -04:00
..
public chore(backend): implement high-priority improvements from code review 2026-03-29 23:11:27 -04:00
scripts chore(backend): implement high-priority improvements from code review 2026-03-29 23:11:27 -04:00
src chore(backend): implement high-priority improvements from code review 2026-03-29 23:11:27 -04:00
.dockerignore feat(docker): add frontend Dockerfile with nginx configuration 2026-03-24 07:57:11 -04:00
.gitignore feat(frontend): initialize React + Vite project with TypeScript 2026-03-24 00:27:17 -04:00
Dockerfile feat(docker): add frontend Dockerfile with nginx configuration 2026-03-24 07:57:11 -04:00
README.md chore(backend): implement high-priority improvements from code review 2026-03-29 23:11:27 -04:00
eslint.config.js feat(frontend): initialize React + Vite project with TypeScript 2026-03-24 00:27:17 -04:00
index.html feat(frontend): initialize React + Vite project with TypeScript 2026-03-24 00:27:17 -04:00
nginx.conf feat(devops): add docker-compose orchestration with nginx API proxy 2026-03-24 08:12:55 -04:00
package-lock.json feat(frontend): configure Tailwind CSS v4 with PostCSS 2026-03-24 00:42:34 -04:00
package.json chore(backend): implement high-priority improvements from code review 2026-03-29 23:11:27 -04:00
postcss.config.js feat(frontend): configure Tailwind CSS v4 with PostCSS 2026-03-24 00:42:34 -04:00
tailwind.config.js chore(backend): implement high-priority improvements from code review 2026-03-29 23:11:27 -04:00
tsconfig.app.json feat(frontend): initialize React + Vite project with TypeScript 2026-03-24 00:27:17 -04:00
tsconfig.json feat(frontend): initialize React + Vite project with TypeScript 2026-03-24 00:27:17 -04:00
tsconfig.node.json feat(frontend): initialize React + Vite project with TypeScript 2026-03-24 00:27:17 -04:00
vite.config.ts chore(backend): implement high-priority improvements from code review 2026-03-29 23:11:27 -04:00

README.md

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.