Amy Morris Tear Sheets

A web app to itemize and present interior design tear sheets for Amy Morris Interiors. Build a project from manual entry or a spreadsheet, then deliver it three ways from one source of truth:

• 🖼️ Web gallery — a browsable, filterable grid of specified items
• 🎞️ Slideshow — full-screen present mode, one item per slide
• 🧾 Printable PDF — print-optimized layout; use the browser's Save as PDF for clean, client-ready tear sheets grouped by room

It runs entirely in the browser — no server or database. Data auto-saves to the browser, and projects can be exported/imported as a backup file.

Using it

Action	How
Import a spreadsheet	Import → drop an .xlsx/.csv. Columns (Item, Vendor, Category, Room, SKU, Price, Qty, Dimensions, Material, Color, Lead Time, Notes, Image URL, Product URL) are matched automatically. A blank template is available in the import dialog.
Add / edit items	Add item, or click Edit on any card. Images can be a URL or uploaded from disk.
Present	Present (or click any card image) for full-screen mode. Navigate with ← → arrow keys; Esc to exit.
Print / PDF	Print / PDF → in the print dialog choose Save as PDF.
Filter	Search box plus Room and Category filters.
Projects	Manage multiple client projects from the project dropdown.
Backup	⋯ menu → export a .json backup, restore it, or export items back to .xlsx.

Develop

npm install
npm run dev      # start the dev server (http://localhost:5173)
npm run build    # type-check + production build to dist/
npm run preview  # preview the production build

Stack: Vite + React + TypeScript, SheetJS for spreadsheet import/export. No backend.

Deploy

Pushing to main triggers .github/workflows/deploy.yml, which builds with the GitHub Pages base path and publishes dist/ to Pages. Enable it once under Settings → Pages → Build and deployment → Source: GitHub Actions. The site then serves at https://<user>.github.io/AmyMorrisTearSheets/.