TTechtonic

Client project · Community events

Bagram Events

Bagram Events produces Afghan cultural celebrations, festivals, and community gatherings in the Washington, D.C. metro area. We designed and built their website — a fast, animated single-page site that puts the next event, its tickets, and a way to reach the team front and center.

Visit bagram.us
Homepage of the Bagram Events website at bagram.us, showing the logo and the headline Bagram Events
Screenshot of the public homepage, captured by Techtonic Innovations on September 21, 2026.

The client and the goal

Bagram Events brings the Afghan community together through music, food, art, and tradition. Their events are promoted on social media and ticketed through Eventbrite, but they needed a home of their own: one address to send people to that explains who they are, shows what's coming up, and lets anyone get in touch.

The first event the site had to carry was the 107th anniversary of Afghanistan's independence — an evening of talks, poetry, cuisine, and live music in Annandale, Virginia — so the site needed to be live, and trustworthy, well before event day.

The challenge

Speed and reliability mattered more than breadth. The site had to look polished on phones, make buying a ticket a single tap, and make sure every message from the contact form actually arrived.

That last point turned out to be the real engineering problem. The first version of the contact form sent mail through Gmail SMTP. It worked from a normal server, but Google rejected the same credentials when the login came from Vercel's shared cloud IP ranges. We replaced it with Resend, a transactional email API designed for serverless platforms, so delivery no longer depends on how Gmail treats a hosting provider's IP addresses.

What we built

A single-page Next.js site with four sections — hero, upcoming events, about, and contact — plus social links to the team's Facebook, Instagram, and TikTok profiles.

  • An animated hero with a drifting gold particle field rendered in WebGL (React Three Fiber), loaded client-side only so it never blocks the server-rendered page.
  • Event cards with an auto-rotating flyer gallery that pauses on hover and has per-image dot controls, plus date, time, venue, and a Get Tickets button linking to the event's Eventbrite page.
  • Get Tickets links in the header, hero, event card, and footer, so buying a ticket is one tap from anywhere on the page.
  • A contact form backed by a Next.js API route that validates input with Zod, emails the team through Resend with reply-to set to the sender, and HTML-escapes everything a visitor types.
  • Friendly failure handling: if email can't be sent, the visitor gets a clear message with a direct email address, and the detailed error is logged on the server — never shown in the browser.

Security and SEO

No secrets live in the code: the Resend key and destination inbox come from environment variables, with a documented .env.example and a deployment guide for the client. Page metadata and Open Graph tags are defined once in the root layout with the custom domain as the base URL, so shared links preview correctly.

It's the kind of focused web application development we do for small businesses: a modern stack, handled edge cases, and a handover document the client can actually follow.

Results

  • Live on the client's own domain at www.bagram.us (the bare bagram.us redirects to it).
  • Contact-form delivery moved from Gmail SMTP to the Resend API after SMTP logins from Vercel were rejected.
  • Built in one week: the repository's first commit is August 4, 2026 and the latest is August 10, 2026.
  • Every event card links straight to its Eventbrite ticket page.

Facts verified against the project's repository and live site. Past results don't guarantee future results; every project is different.

More case studies

All case studies