Full-Stack Build · 2026
Hassan Phills
How might fans navigate a 40+ date tour spread across a dozen ticketing platforms?
The Brief
Hassan Phills is a touring stand-up comedian who needed a site that could keep pace with a 40+ city, multi-country tour schedule his manager updates constantly, plus booking inquiries, email capture, and social content — without a developer in the loop for every date change. The existing options (a Brizy site built by their previous developer, a Shopify-only build) each solved part of that but forced a trade-off between design control and non-technical maintainability.
Approach
A Next.js site on Vercel with the tour, booking, and social content built as custom components rather than platform templates. Tour dates pull from Airtable so the manager adds a row and the site updates — no code, no developer dependency for the highest-frequency maintenance task. A geolocation search lets fans find nearby shows without scrolling 40+ dates. The booking form posts to a serverless function that sends a formatted inquiry via Brevo, with the destination address kept in environment variables rather than exposed in the public repo. TikTok and YouTube embeds pull live thumbnails via a custom API route rather than relying on platform widgets that break in Safe Mode.
Getting There
- —Audited the client's existing brand assets (photoshoot, wardrobe, press coverage) and derived a colour palette and visual direction directly from them rather than a generic template
- —Built a full Squarespace site first, but didn't ship it — tour dates still needed manual edits, and it would have handed the client a new interface to learn without solving the actual problem. Evaluated Squarespace + Shopify and Shopify-only as further alternatives before settling on Next.js/Vercel, weighed against two competing constraints: launch speed and long-term non-technical maintainability
- —Identified that the client's actual bottleneck wasn't design flexibility, it was that tour dates were hardcoded directly into the previous Brizy site, meaning every date change required a developer to edit HTML and a JS array in sync
- —Chose Vercel/Next.js with Airtable as the tour-date source of truth, moving date/city/venue/ticket-link updates to a spreadsheet the manager can edit with zero code
- —Built a geolocation-based show finder (Haversine distance calculation) so fans can search 'shows near me' instead of scrolling a full date list
- —Built a serverless booking-inquiry endpoint (Brevo transactional email API) and kept the destination email address in an environment variable rather than the codebase after flagging that hardcoding it was a privacy/repo-hygiene risk
- —Set up GA4 and Search Console, and separately addressed cookie-consent requirements — GDPR opt-in was a hard requirement given confirmed UK, Ireland, France, Germany, and Sweden tour dates, not optional
- —Kept merch on Shopify rather than migrating it, avoiding a rebuild of an already-working store
The Result
The site is live at hassanphillslive.com, replacing the earlier Brizy build. What shipped: a fully custom-designed site with a minimal recurring platform fee, tour-date management the manager handles independently, and GDPR-compliant cookie consent given confirmed European tour dates. The main trade-off, made explicit to the client: this stack shifts maintenance cost away from date updates (previously code edits) and onto visual/layout changes (now requiring a developer, versus Brizy's visual editor). GA4 shows 6.7K active users and 9.6K homepage views year-to-date (Jan–Oct 2026), led by Instagram traffic with organic search and direct close behind, and a geographic spread that tracks the tour itself.
Stack
- —Next.js 16 (Pages Router), React 19 framework — Node ≥24, pnpm ≥10
- —Vercel hosting — auto-deploys on push to main, with a dev → PR → main branch strategy
- —Next.js API routes (/api/booking, /api/subscribe) per-IP rate limiting, HTML sanitization, field length caps, RFC 5322 email validation
- —/api/tiktok-thumbnail server-side proxy for TikTok oEmbed thumbnails (1hr cache), avoids loading TikTok's SDK on page load
- —Brevo transactional booking emails and newsletter subscriber capture
- —Google Analytics 4 + Consent Mode v2 GDPR-compliant, lazy-loaded to reduce TBT — analytics_storage denied by default, updated via the gtag consent API only after explicit opt-in
- —TikTok embeds click-to-load pattern, SDK deferred until user interaction to avoid unsolicited permission prompts
- —react-cookie-consent GDPR cookie banner
- —Custom security headers (next.config.js) CSP, HSTS, X-Frame-Options, Referrer-Policy, Permissions-Policy — production only
- —JSON-LD structured data Person + Event schemas, plus a dynamic sitemap and robots.txt for SEO
- —lib/showUtils.js custom tour/date logic handling past-show detection and multi-year countdown spanning 2026–2027
Skills & Tools
More Projects