The idea started simple. July 4th, 2026. America's 250th birthday. Every city in the country shooting fireworks. And no single place to find them all.
Sure, local news sites publish "Top 10 fireworks shows near you" listicles. Eventbrite has some. Reddit threads from three years ago still rank in Google. But an actual interactive map? One that shows every major show, lets you search by ZIP code, and gives you real photos of the actual venue? Nothing.
So I built one. Not in theory. Not as a concept deck. A real, live, shipped product at https://dellons.com/4th-of-july-fireworks-map with 121 shows, real venue photography, ZIP code search, user voting, and a mobile experience that doesn't suck.
Here's how it went down.
Where the Data Came From
The first problem was data. There's no API for "every fireworks show in America." The information exists, but it's scattered across municipal websites, local newspapers, venue pages, and event listing sites. Some of it is accurate. Some of it hasn't been updated since 2019.
I started with the known big shows. Macy's on the East River. The National Mall in DC. Boston Pops on the Charles. Navy Pier in Chicago. These are nationally famous, well-documented, and have stable coordinates. From there, I worked outward through every major metro area, pulling show details from city tourism boards, venue websites, and local news coverage.
Each show needed the same fields: name, city, state, venue, start time, description, latitude, longitude, whether it's free or ticketed, shell count, duration, and a fun fact. 121 shows. Every one manually researched and verified.
The coordinates matter more than you'd think. A fireworks show isn't at a point. It's launched from barges, rooftops, park grounds, or waterfronts. I placed each marker at the best public viewing area, not the launch site. That's the difference between a map that's technically accurate and one that's actually useful when you're standing somewhere with your kids.
The Stack That Made It Possible
React, Next.js, and Leaflet. That's it. No fancy mapping API with usage limits. No paid data provider. Leaflet is free, open source, and renders fast. It handles tile layers, markers, popups, and zoom out of the box.
The search component is a ZIP code input that geocodes through a free API, calculates distance to every show using the Haversine formula, and filters results within a user-selected radius. 5, 10, 25, 50, or 100 miles. When you search, the map flies to your location, drops a blue marker, and shows only the shows within range.
The counter below the map updates in real time. "4 SHOWS WITHIN 30 MILES. VIEW ALL" in all caps, with the result count in green when shows are found, red when zero. The "VIEW ALL" text is underlined because it's a link, not a label. Small detail, but users need to know what's clickable.
Every marker opens a popup with the show name, venue, time, shell count, duration, free/ticketed status, a description, a fun fact, real photos, and voting buttons. The photos open a full-screen lightbox with prev/next navigation. You can upvote or downvote any show, and the votes persist in localStorage so you can't game the system by refreshing.
This is where I think a lot of marketers miss the point about AI. The conversation is always about content generation, automation, efficiency. But the real unlock is building things. Shipping products. Taking an idea from "someone should make this" to live on the internet in hours, not months. I wrote about this tension in my post about why brands are invisible to AI, and it connects to what I explored about agentic marketing versus automation. The same platforms that make you invisible can also make you a builder.
The Image Problem Nobody Talks About
Here's where most AI-built projects fall apart. The images.
When you generate a fireworks image with AI, you get something that looks like a fireworks image. Orange bursts, dark sky, maybe a cityscape. Technically fine. But it's the same image for every show. A generic firework explosion over a generic skyline tells you nothing about the actual venue. It's decorative, not informational.
The first version of the map used AI-generated images. Three or four variants, recycled across 121 shows. New York looked the same as Dallas. Miami looked the same as Seattle. It worked, but it felt hollow. Like a stock photo carousel at a dentist's office.
So I replaced every single one. 121 shows, each with three real photos sourced from Wikimedia Commons. Actual photos of the actual venues. The East River with fireworks bursting over the Brooklyn Bridge. Navy Pier at night. The Hollywood Bowl with pyrotechnics behind the stage shell. Mount Rushmore. The National Mall.
The API calls took hours. I searched Wikimedia Commons by venue name, city name, and event name. When venue-specific searches came up empty, I fell back to city skylines and landmarks. Ten shows had nothing, so I broadened the search terms until every show had at least one real photo.
The difference is night and day. When you click a marker for the Macy's show, you see the actual East River with actual fireworks. Not a generated approximation. That's the difference between a project that feels real and one that feels generated.
The Details That Take All Night
The map works. The images are real. Now comes the part where you spend three hours on things nobody will explicitly notice but everyone will feel.
The subnav bar. The ZIP input, the location button, and the results counter all need to be the same height. If the input is 38px and the button is 40px, the whole thing looks broken. Not "slightly off." Broken. So you measure, adjust, measure again. 38px across the board.
The mobile menu needs a z-index of 10,000 so it overlays the Leaflet map controls. The map itself needs to render without requiring user interaction, which means replacing dynamic viewport height with a fixed calculation that triggers on load. The popup images need an orange border so users know they're tappable, with a hover dim effect for feedback.
Every one of these took a debug cycle. Build, deploy, test on mobile, test on desktop, find the issue, fix, rebuild. The kind of work that doesn't make the feature list but makes the difference between "this is janky" and "this is smooth."
I also added an uptime monitor that checks the site every 30 minutes and a GitHub Actions rollback strategy. Because nothing kills a July 4th launch like the site going down at 9pm when everyone's looking for show times.
What Actually Shipped
The final product:
- 121 fireworks shows across all 50 states
- ZIP code search with adjustable radius (5 to 100 miles)
- Real venue photos from Wikimedia Commons for every show
- Full-screen image lightbox with prev/next navigation
- User voting (upvote/downvote) with localStorage persistence
- Mobile-first responsive design with working map controls
- Share button for native share API on mobile
- Auto-detect location via browser geolocation
- Fun facts, shell counts, durations, and free/ticketed status for every show
- Dark editorial design matching the dellons.com aesthetic
This is what AI-assisted development looks like when you actually ship. Not a demo. Not a prototype. A product that 121 cities' worth of fireworks information lives on, accessible to anyone with a phone, on the biggest fireworks holiday of the year.
What Comes Next
The map is live, but it's version one. Here's what I'm thinking about for the next milestone:
Adding show details beyond the current fields. Parking info, accessibility, food vendors, rain dates. The data exists, it just needs collecting. I could also open the map to community submissions, letting people add shows I missed. There are easily 500+ shows nationwide if you include the smaller municipal displays.
The voting data could power a "most anticipated shows" ranking. Real signal from real users, not a curated list. And the map architecture is reusable. Swap fireworks data for any geolocated event dataset and you've got a template.
The point isn't the fireworks. The point is that the tools exist now to go from idea to shipped product in a day. The bottleneck was never technology. It was the willingness to do the unglamorous work: researching 121 shows, fixing mobile z-index issues at 2am, replacing 360 AI-generated images with real photos because "good enough" isn't good enough.
The map is live at https://dellons.com/4th-of-july-fireworks-map. Go find your show.