Building a Simple Gift Card Tracker with Modern Web Features

TLDR: Vibe coded a gift card tracker to manage our household’s scattered gift cards. Features search, sort, accordion UI, and URL persistence. Try it here.

My wife and I had a stack of gift cards scattered around the house - some in wallets, others in drawers, digital ones buried in emails. We’d constantly ask “Do we have a gift card for that store?” then spend 15 minutes hunting through everything. Time to build a simple tracker.

Building with Vanilla JavaScript

Rather than reach for a heavy framework, I built this with vanilla JavaScript and modern web APIs, vibe coding the whole thing with Claude Code. This approach aligns with my philosophy of making the web fun again while keeping things technically sound.

Key Features Implemented

Accordion Interface: Each gift card can be expanded to show detailed information, similar to modern mobile app patterns. Click any card to reveal edit/delete buttons and additional metadata.

URL Persistence: Perhaps the most useful feature - all gift cards are encoded in the URL parameters. This means you can bookmark your gift card collection or share it across devices without any backend database.

// Save to URL parameters
function saveToURL() {
    const urlParams = new URLSearchParams();
    if (giftCards.length > 0) {
        urlParams.set('cards', btoa(JSON.stringify(giftCards)));
    }
    const newURL = window.location.pathname + (urlParams.toString() ? '?' + urlParams.toString() : '');
    window.history.replaceState({}, '', newURL);
}

Smart Search & Filtering: Real-time search across card names, retailers, and notes, plus status filtering (active/used/expired) that works instantly without page reloads.

Comprehensive Sorting: Sort by amount (highest/lowest), expiration date (soonest/latest), date added, or alphabetically by name/retailer. Perfect for finding cards about to expire or your most valuable ones.

Toast Notifications: Modern UX feedback for all actions - add, edit, delete operations show success messages that slide in smoothly and auto-dismiss.

Technical Implementation

The app uses several interesting patterns that make it feel modern despite being built with vanilla JavaScript:

Smooth Animations

@keyframes fadeIn {
  from { 
    opacity: 0; 
    transform: translateY(20px) scale(0.95); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0) scale(1); 
  }
}

Export Functionality

One-click CSV export transforms the gift card data into a spreadsheet-friendly format:

const exportData = giftCards.map(card => ({
    'Card Name': card.cardName,
    'Retailer': card.retailer,
    'Amount': card.amount,
    'Status': card.status,
    // ... more fields
}));

Modern UX Patterns

The interface borrows from modern mobile and web design:

• Card-based layout with subtle shadows and hover effects
• Progressive disclosure through the accordion interface
• Instant feedback via toast notifications
• Smart defaults like automatically focusing form fields
• Responsive design that works on all screen sizes

Why This Approach Works

The URL persistence feature is what makes this actually useful day-to-day - share a URL with my wife and we’re both looking at the same data, no account, no sync setup, no backend to maintain. For a household tracker, that’s the right call.

The vibe coding approach with Claude Code made the whole thing quick. I’d describe a feature, review the output, tweak it. Weekend project that turned into something we actually use.

Try It Yourself

You can check out the gift card tracker at /giftcards over here. Add a few test cards to see the search, sort, and accordion features in action. The URL will automatically update with your cards encoded as parameters.

For developers interested in the implementation details, the entire app is built with:

• Vanilla JavaScript for logic and interactions
• Modern CSS with custom properties and animations
• HTML5 form validation and accessibility features
• URL-based state management instead of localStorage

If you’re working on something similar or want to talk through the implementation, I’d love to chat.