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

This project demonstrates that you don’t always need complex frameworks to build delightful user experiences. Similar to my approach with other automation projects and creative web experiences, sometimes the best solution is the simplest one that solves the actual problem.

The URL persistence feature alone makes this more useful than many database-backed alternatives - you can bookmark your gift card collection or access it from any device by sharing the URL. My wife and I can now share the same URL and both stay updated on our gift card inventory without any complex syncing or account management.

The vibe coding approach with Claude Code proved especially valuable for rapid prototyping and iteration. Instead of getting bogged down in implementation details, I could focus on the user experience and let the AI handle the technical heavy lifting. This workflow has me excited about future projects where I can leverage AI assistance for faster, more creative development cycles.

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

This project reinforces my belief that web development can be both technically sophisticated and refreshingly simple. Sometimes the best tools are the ones you build yourself to solve your own problems.

If you’re working on similar projects or want to discuss modern web development approaches, I’d love to chat.