Tick Slayer 3000
← All Progress Logs

Progress Log

Delete Confirmation Modals and First Vercel Deploy

March 29, 202607:52Build Log

Delete Confirmation Modals and First Vercel Deploy

Date: 2026-03-29 Type: Build Log

Context

The parts list and detail pages had delete buttons that immediately removed items with no confirmation. With 25+ researched parts in the database (each with purchase links and notes), an accidental delete would mean re-doing research. Also deployed to Vercel for the first time, pointing it at the existing Convex dev deployment so local and production share the same database.

What Changed

Delete confirmation dialogs

Added shadcn AlertDialog component to both the parts list page and the part detail page. Clicking the trash icon now opens a modal showing the part name and asking for confirmation before deleting.

  • src/app/parts/page.tsx — Added deleteId and deleteName state. Trash button sets these instead of calling handleDelete directly. AlertDialog at bottom of page reads the state, shows part name, and only calls handleDelete + removePart on confirm.
  • src/app/parts/[id]/page.tsx — Added deleteOpen state. Same pattern: trash button opens dialog, confirm triggers handleDelete which removes the part and redirects to /parts.
  • src/components/ui/alert-dialog.tsx — New shadcn component added via npx shadcn@latest add alert-dialog.

Vercel deployment

  • Linked project to Vercel (vercel link)
  • Set NEXT_PUBLIC_CONVEX_URL env var on Vercel to the dev Convex deployment URL (https://loyal-antelope-788.convex.cloud) so both local and production use the same database with the same parts data
  • Deployed with vercel --prod — live at https://tickslayer3000.vercel.app
  • Added .playwright-mcp/ and tsconfig.tsbuildinfo to .gitignore

Files Modified

  • src/app/parts/page.tsx — Delete confirmation dialog, state for tracking which part is being deleted
  • src/app/parts/[id]/page.tsx — Delete confirmation dialog on detail view
  • src/components/ui/alert-dialog.tsx — New shadcn AlertDialog component
  • .gitignore — Added .playwright-mcp/ and tsconfig.tsbuildinfo

Key Takeaways

  • Convex dev and prod are separate deployments with separate databases. For this project we're intentionally using the dev deployment for both local and Vercel so there's one source of truth for parts data.
  • The prod Convex deployment (capable-mink-653) exists but is unused. If we ever want to separate environments, we'd need to re-seed or migrate data.