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 annual/recurring benefits we've actually used. I want a beautiful, easy checklist of what we can check off, that we can both share. ## Core features 1. **Add unlimited cards, dynamically.** Each physical card is tracked separately (e.g. 3 of the same card = 3 independent checklists). When adding, let me pick from built-in templates, set a quantity to create 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). The checklist must give the right number of checkboxes per cadence: a $20/month credit = 12 monthly boxes, a semi-annual credit = 2 boxes, etc. Highlight the *current* period (this month / quarter / half) so we know what's live. Show a "used X/N" counter per benefit. 3. **Two views via a segmented control:** - **To-Do (default):** one clean iOS-Reminders-style checklist of everything that can be checked off *right now*, pulled across every card. Each row = a tap-to-check circle, the benefit, which card, the period, and the dollar amount. Checked items move to a "Done this period" group showing who checked it and when. - **All Cards:** each card as a row that expands to its full punch-card grid of all benefits and periods. 4. **Reset dates.** Per card, let me choose "resets on": Calendar year (Jan 1) or Card anniversary (with a date I enter). Annual benefits anchor their cycle to that date and show "renews [date]"; cards needing a date show a gentle "set reset date" nudge. (Monthly/quarterly/semi-annual stay on the calendar, that's accurate to how cards work.) 5. **ROI stats.** A dark "metal card" hero panel up top showing: **Available to claim now** (big number), benefits 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, a "Research benefits with AI" button that calls the Anthropic API (model `claude-sonnet-4-6`, max_tokens 1000, no API key needed in-artifact) and asks it to return ONLY a JSON array of recurring credits `[{name, value, cadence, note}]` for that card name, then populates the editable benefit list. Flag AI results as "verify." 7. **Sharing via "spaces."** On first open, the user creates a new space (generate a short random code) or joins one with a code. ALL data is namespaced to that code so each space is isolated. Partners join the same code to sync; anyone else who opens the link creates their own space and gets a fresh private copy of the same card templates. Include a Share panel that shows the code with copy + instructions, plus a "switch space" option. ## Technical requirements (important, these prevent real bugs) - **Persist with `window.storage`** (the artifact persistent key-value API), NOT localStorage. Space data (cards, check-offs) uses `shared: true` storage keyed by the space code; the active space code and the user's name use personal `shared: false` storage. - **Never block first render on storage.** Render instantly with seeded/in-memory data and hydrate from storage in the background. Wrap every storage read in a try/catch AND race it against a ~1.5s timeout so a slow or missing storage bridge can't hang the app (this is what breaks it on the mobile app otherwise). - **Use ONLY core Tailwind utility classes**, no arbitrary values like `text-[15px]`, `bg-black/40`, or `max-h-[90vh]`, because the artifact environment has no Tailwind compiler. For exact values (overlay opacity, custom heights, frosted accents) use inline `style`. - 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 that float on it like an iOS grouped list, a graphite gradient hero panel, restrained neutral palette with one accent color per card issuer, generous spacing, subtle shadows. Clean, not busy. ## Pre-load these cards with researched, current benefits (Verify amounts before relying on them, card terms change.) - **Amex Business Platinum** ($895/yr, calendar reset): Hotel Credit $600 (semi-annual, $300/half), Indeed $360 (quarterly), Hilton $200 (quarterly), Wireless $120 (monthly, $10/mo), Airline Fee $200 (annual), CLEAR Plus $209 (annual), ChatGPT Business $300 (annual), Adobe $250 (annual), Dell $150 (annual); perks: Global Entry/TSA, cell phone protection. - **Amex Business Gold** ($375/yr, calendar reset): FedEx/Grubhub/Office Supply $240 (monthly, $20/mo), Walmart+ $155 (monthly), 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, points earner (no use-it-or-lose-it credits). - **Chase Ink Business Premier** ($195/yr, anniversary reset): perks only: 5% Lyft (thru Sep 2027), cell phone protection, no FX fees. - **Capital One Spark Cash Plus** ($150/yr, anniversary reset): Annual Fee Refund $150 (annual, refunded if you spend $150k); perks: 5% hotels/cars via Capital One Travel, no FX fees. Make it production-quality and ready to use.