Your Card
Benefits Tracker

Build me a **credit card benefits tracker** as a single React artifact. The goal: my partner and I have a lot of cards and keep forgetting which recurring benefits we've actually used. I want a beautiful, easy checklist we can both check off from our own phones. ## Core features 1. **Add unlimited cards.** Track each physical card separately (3 of the same card = 3 independent checklists). When adding, let me pick from the built-in templates below, set a quantity to add several at once, or add a fully custom card. Cards are editable and deletable. 2. **Benefits with real reset cadences.** Each benefit has a name, annual dollar value, a note, and a cadence: monthly, quarterly, semi-annual, annual, or "perk" (info only, no checkbox). Give the right number of checkboxes per cadence ($10/month credit = 12 boxes, semi-annual = 2 boxes). Highlight the current period so we know what's live, and show a "used X/N" counter per benefit. 3. **Two views via a segmented control:** - **To-Do (default):** one iOS-Reminders-style list of everything that can be checked off right now, across every card. Each row shows a tap-to-check circle, the benefit, the card, the period, and the dollar amount. Checked items move to a "Done this period" group that shows who checked it and when. - **All Cards:** each card as a row that expands into its full punch-card grid of benefits and periods. 4. **Reset dates.** Per card, let me choose "resets on" Calendar year (Jan 1) or Card anniversary (a date I enter). Annual benefits anchor to that date and show "renews [date]". Cards missing a date show a gentle "set reset date" nudge. Monthly, quarterly and semi-annual credits stay on the calendar. 5. **ROI stats.** A dark "metal card" panel at the top: **Available to claim now** (big number), captured this year, total annual potential, total annual fees, and net (captured minus fees), with a progress bar. 6. **AI benefit research.** When adding a custom card, include a "Research benefits with AI" button that calls Claude from inside the artifact (no API key needed) and asks for ONLY a JSON array of recurring credits `[{name, value, cadence, note}]` for that card, then fills the editable benefit list. Label AI results "verify with your issuer." 7. **Sharing via "spaces."** On first open, the user creates a new space (generate a short random code) or joins one with a code. Namespace ALL data to that code so each space is isolated. Partners join the same code to sync. Anyone else who opens it creates their own space with a fresh copy of the card templates. Include a Share panel with the code, a copy button and instructions, plus a "switch space" option. Tell users that anyone with the code can see and edit that space. ## Technical requirements (these prevent real bugs) - **Persist with the artifact storage API (`window.storage`)**, NOT localStorage. Space data (cards, check-offs) uses shared storage keyed by the space code. The active space code and the user's name use personal (not shared) storage. - **Never block first render on storage.** Render instantly with seeded in-memory data and load from storage in the background. Wrap every storage read in try/catch AND race it against a ~1.5s timeout so a slow storage bridge can't hang the app (this is what breaks it on the mobile app). - **Use ONLY core Tailwind utility classes**, no arbitrary values like `text-[15px]`, `bg-black/40` or `max-h-[90vh]`, because the artifact has no Tailwind compiler. Use inline `style` for exact values. - Mobile-friendly: large tap targets, responsive layout, bottom-sheet modals on small screens. - Use `lucide-react` for icons. Default-export the component. ## Design Apple-like and premium: soft layered gray gradient background, white rounded-2xl cells like an iOS grouped list, a graphite gradient hero panel, a neutral palette with one accent color per issuer, generous spacing, subtle shadows. Clean, not busy. ## Pre-load these card templates (Amounts checked against issuer pages in November 2026. Card terms change, so show a small "verify with your issuer" note.) - **Amex Business Platinum** ($895/yr, calendar reset): Hotel Credit $600 (semi-annual, $300 per half, prepaid Fine Hotels + Resorts or The Hotel Collection via Amex Travel), Indeed $360 (quarterly, $90), Hilton $200 (quarterly, $50), Wireless $120 (monthly, $10), Airline Fee $200 (annual, one chosen airline, incidentals only), CLEAR Plus $219 (annual), ChatGPT Business $300 (annual), Adobe $250 (annual, after $600+ Adobe spend), Dell $150 (annual, plus $1,000 more after $5,000+ Dell spend). Perks: Global Entry ($120) or TSA PreCheck (up to $85) every 4 years, cell phone protection, ZO membership. - **Amex Business Gold** ($375/yr, calendar reset): Flexible Business Credit $240 (monthly, $20 at Grubhub, office supply stores and UPS.com shipments), Walmart+ $155 (monthly, up to $12.95), ChatGPT Business $300 (annual), Squarespace $150 (annual). Perk: cell phone protection. - **Chase Ink Business Preferred** ($95/yr, anniversary reset): perks only: cell phone protection, no foreign transaction fees, 5x on Lyft through Sep 30, 2027, complimentary DashPass. - **Chase Ink Business Premier** ($195/yr, anniversary reset): perks only: 5% cash back on Lyft through Sep 30, 2027, cell phone protection, no foreign transaction fees. - **Capital One Spark Cash Plus** ($150/yr, anniversary reset): Annual Fee Refund $150 (annual, refunded in any year you spend $150,000+). Perks: 5% cash back on hotels, vacation rentals and rental cars booked through Capital One Business Travel, no foreign transaction fees. Make it production-quality and ready to use.