UTM Builder

Build an application called The UTM Builder, a professional campaign link generator that helps teams standardize tracking links and eliminate inconsistencies. The app should include a smart form with a base URL input that validates, and dropdowns for source, medium, and campaign. Each dropdown should include predefined options such as common marketing channels and also offer a “Custom…” option at the bottom, which reveals an additional input field when selected. There should also be a “Link Created By” field that automatically saves the user’s name to localStorage so it persists for future use. A collapsible section should hold optional parameters like term and content. The form should have a “Clear Fields” button that resets all values except the creator name. All inputs should automatically format to lowercase, replace spaces with hyphens, and remove special characters, while providing real-time validation and errors.

As the user fills out the form, the app should show a live preview of the fully generated URL, along with a clean display of all UTM parameters and the creator name. Users should be able to copy the final URL with one click, which also adds the entry to a URL history log. They should be able to export the complete history as a CSV file.

The app needs a presets system where users can save frequently used configurations, load them later, and delete them. Presets must handle custom values correctly, including showing custom input fields when needed, and display the date they were created.

A URL history table should show up to the 50 most recent URLs with columns for the created date, creator, source, medium, campaign, base URL, final URL, and actions. The table should use a clean, padded design with subtle header styling, colored badge pills for UTM values, row hover states, text truncation with tooltips, and defined max-widths for certain fields. Each row should include options to copy or delete the entry.

The application should enforce validation rules, including required fields, proper URL format, duplicate URL detection, and custom naming rules that allow only lowercase letters, numbers, and hyphens. Errors should appear clearly and inline.

A settings and documentation area should explain all formatting rules, including lowercase conversion, hyphen replacement, special character removal, and duplicate detection. It should also include a reference guide with examples for each UTM parameter, best practices, and examples. Buttons for clearing history and clearing presets should include confirmation steps.

The design should use Webflow-inspired branding: a large header reading “The UTM Builder” in Webflow blue (#146ef5) accompanied by a blue link icon, plus a subtitle about eliminating tracking chaos. All card titles, headers, subheaders, table headers, and preset names should use the same blue. The app layout should use four main tabs (Builder, Presets, History, Settings), include badge counters showing the number of presets and history items, and follow a clean, card-based layout that works well on mobile. UI should be built using shadcn/ui components, with collapsible sections, scroll areas, toast notifications, loading states, and disabled states.

The final product should offer a complete, professional-grade solution for generating, managing, and standardizing UTM campaign links efficiently and consistently.