Usage Tracking Demo
Test the free tier usage tracking system (5 improvements per day)
Detailed Variant
Full usage card with progress bar
Loading usage...
Compact Variant
Badge-style display
Standard:
Loading usage...
Without upgrade:
Loading usage...
Inline Variant
Minimal text display
Loading usage...
Individual Components
Specialized displays
UsageText:
UsageBadge:
Testing Controls
Simulate usage and test edge cases
Current Status:
- Used:
- 0
- Remaining:
- 5
- Can Use:
- Yes
Test scenarios:
- Click "Use Feature" to simulate improvements
- Watch the counter and progress bar update
- Notice warnings at 2 remaining and 1 remaining
- See the limit reached state at 0 remaining
- Use "Reset Counter" to start over
- Open in multiple tabs to test sync
Implementation Details
How the usage tracking system works
Storage Format:
{
"count": 3,
"date": "2024-01-15"
}Features:
- Automatic daily reset at midnight
- localStorage for client-side persistence
- Cross-tab synchronization via storage events
- Graceful fallback if localStorage unavailable
- SSR-safe implementation (no hydration mismatch)
- TypeScript type safety throughout
Edge Cases Handled:
- First visit (no data yet)
- Date change (automatic reset)
- localStorage unavailable (graceful degradation)
- Invalid data format (reset to defaults)
- Server-side rendering (no window object)
- Multiple tabs (synchronized updates)